/**
 * Name and Title Paragraph Styles
 *
 * Staff credits component: displays a person's name and role/title.
 * Design: two-line stacked — name bold/uppercase, title smaller and lighter.
 * Layout: two columns on desktop, one column on mobile.
 */

/* Parent container — CSS grid for two-column layout on desktop */
.group-hp-section-name-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}

/* Single column on mobile */
@media (max-width: 767px) {
  .group-hp-section-name-list {
    grid-template-columns: 1fr;
  }
}

/* Container — breathing room between each name/title pair */
.paragraph--type-name-and-title {
  margin-bottom: 0.5rem;
}

/* The field group wrapping name + title */
.group-team-member {
  display: flex;
  flex-direction: column;
}

/* Name — bold uppercase */
.creditPersonName {
  display: block !important;
  font-size: 1.2rem !important; /* ~19px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-left: 0 !important;
  line-height: 1.3;
  color: var(--tbc-black, #000);
}

/* Title/role — visually subordinate to name */
.group-team-member > span:not(.creditPersonName) {
  display: block;
  font-size: 1.05rem; /* ~17px */
  font-weight: 400;
  color: var(--tbc-grey, #555);
  line-height: 1.4;
  margin-top: 0.15rem;
}