/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   AboutLeadershipSection — Figma b54Vp5G1JrG0jhDNIxBaxz, node 7214:9785.
   Spec: AboutLeadershipSection.figma.md.

   `.hp-section` padding, `.hp-section--stepped` rhythm, the `.hp-badge--cream` badge, the standard
   header convention on one `.container`.
   ============================================================ */

.about-leadership {
  background: var(--background-white);
}

/* header → cards, flat 64px */
.about-leadership__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;
}

/* 7214:9794 — the large row and the grid, 24px apart like the grid's own rows. */
.about-leadership__people {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);              /* 24px */
}


/* ---- Rows (7214:9795, 7214:9820 / 9825) ------------------- */

/* 3 × 325.33 and 4 × 238, 24px gaps, on the 1024 column. Both stretch:
   the large cards are equal height in Figma (`self-stretch`), and so is the
   "+700 more" card. */
.about-leadership__featured,
.about-leadership__grid {
  display:     grid;
  gap:         var(--spacing-6);                 /* 24px */
  align-items: stretch;
  margin:      0;
  padding:     0;
  list-style:  none;
}

.about-leadership__featured {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four across on desktop (owner, 2026-10-27; Figma draws five at 185.6), so a
   small card's photo is the large cards' 206. */
.about-leadership__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* ---- Card shell ("Team cards v2") ------------------------- */

/* Cream on white, 16px padding, 24px radius. The extra 1px at the bottom is
   Figma's hidden 1px "Description" row, kept so the rows land on the
   design's heights (282.6 small, 611 large). */
.about-leader {
  display:        flex;
  flex-direction: column;
  min-width:      0;
  padding:        var(--spacing-4) var(--spacing-4) calc(var(--spacing-4) + 1px);   /* 16 / 16 / 17 */
  background:     var(--panel-cream);
  border-radius:  var(--radius-lg);              /* 24px */
  box-sizing:     border-box;
}

/* Small cards: the photo fills the card's width (206 at 1512). */
.about-leader__photo {
  display:       block;
  width:         100%;
  height:        auto;
  aspect-ratio:  1;
  border-radius: var(--radius-full);
  object-fit:    cover;
}

.about-leader__photo--empty {
  background: var(--muted);                     /* #E5DFD5 — Figma's blank headshot */
}

/* Title (I7214:9822;6946:9540): pt 12, px 8. */
.about-leader__body {
  align-self: stretch;
  padding:    0.75rem 0.5rem 0;                  /* 12 / 8 */
}

/* Text: at least an 84px box with 12 below; a title that needs a third line
   grows its row. Name + title sit at the top, so the names line up across a
   row whether a title takes one line or two (Figma centred them, which put
   one-line titles' names 12px lower). Owner, 2026-10-27, as is dropping
   Figma's fixed 84, which Shea's three-line title overflowed. */
.about-leader__id {
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  min-height:      84px;
  padding-bottom:  0.75rem;                     /* 12px */
  box-sizing:      border-box;
}

.about-leader__name {
  font-size:   var(--font-size-base);           /* 16px */
  line-height: var(--line-height-base);         /* 24px */
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

/* rgba(40,40,37,.6) — no --opacity-neutral-60 token. */
.about-leader__role {
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  color:       color-mix(in srgb, var(--foreground) 60%, transparent);
}


/* ---- Large card (7214:9796) ------------------------------- */

/* pt 40, the 206px photo centred; name + title, then the bio 12px below,
   with Figma's 12px under the text block. */
.about-leader--featured {
  align-items: center;
  padding-top: 2.5rem;                           /* 40px */
}

.about-leader--featured .about-leader__photo {
  width:     206px;
  max-width: 100%;
}

.about-leader--featured .about-leader__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);              /* 12px */
  padding-bottom: 0.75rem;                       /* 12px */
}

.about-leader--featured .about-leader__id {
  min-height:     0;
  padding-bottom: 0;
}

.about-leader__bio {
  margin:      0;
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  color:       var(--foreground);
}


/* ---- "+700 more" (7509:3461) ------------------------------ */

/* The strip is Figma's 153.6 x 58.6 headshot row, its fade into the card's
   cream baked into the export; it scales with the card. */
.about-leader__avatars {
  display: block;
  width:   100%;
  height:  auto;
}

.about-leader--team .about-leader__id {
  min-height: 0;
}

/* The card fills the rest of its row at every column count, or takes a row
   of its own when the leaders fill theirs, whatever the team's size. The
   component sets `--team-span-N` (cells left in the row at N columns) and
   lists in `data-wide` the column counts where that is more than one cell;
   each breakpoint below reads its own. */
.about-leader--team {
  grid-column:     span var(--team-span-4, 1);
  /* In one cell it is stacked, and the row is as tall as the tallest leader:
     its content sits in the middle rather than at the top (owner, 2026-10-27). */
  justify-content: center;
}

/* Wider than one cell, it is laid out across, with the strip beside the copy.
   Written once per breakpoint, because each reads its own `data-wide` entry.
   `align-self: center` on the copy: the shell's `stretch` would pin it to the
   top when a leader makes the row taller than the card's content. */
@media (min-width: 992px) {
  .about-leader--team[data-wide~="4"] { flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--spacing-6); }
  .about-leader--team[data-wide~="4"] .about-leader__avatars { flex-shrink: 0; width: 154px; }   /* the strip's 1x width */
  .about-leader--team[data-wide~="4"] .about-leader__body { align-self: center; padding: 0; }
  .about-leader--team[data-wide~="4"] .about-leader__id { padding-bottom: 0; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .about-leader--team[data-wide~="3"] { flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--spacing-6); }
  .about-leader--team[data-wide~="3"] .about-leader__avatars { flex-shrink: 0; width: 154px; }
  .about-leader--team[data-wide~="3"] .about-leader__body { align-self: center; padding: 0; }
  .about-leader--team[data-wide~="3"] .about-leader__id { padding-bottom: 0; }
}

@media (max-width: 767px) {
  .about-leader--team[data-wide~="2"] { flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--spacing-6); }
  .about-leader--team[data-wide~="2"] .about-leader__avatars { flex-shrink: 0; width: 154px; }
  .about-leader--team[data-wide~="2"] .about-leader__body { align-self: center; padding: 0; }
  .about-leader--team[data-wide~="2"] .about-leader__id { padding-bottom: 0; }
}

/* Portrait phones: too narrow for the strip beside the copy, so it goes above
   it, at its own width, and the copy takes the leader cards' 4px text inset
   (owner, 2026-10-27). */
@media (max-width: 479px) {
  .about-leader--team[data-wide~="2"] { flex-direction: column; align-items: flex-start; gap: var(--spacing-3); }   /* 12px — a leader card's photo → name */
  .about-leader--team[data-wide~="2"] .about-leader__body { align-self: stretch; padding: 0 0.25rem; }
}


/* ---- Responsive ------------------------------------------- */

/* No About mobile frame yet. Tablets: the large cards stack (their bios
   need the width), and the grid goes to 3. */
@media (max-width: 991px) {
  .about-leadership__featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-leadership__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-leader--team {
    grid-column: span var(--team-span-3, 1);
  }
}

@media (max-width: 767px) {
  /* Header → cards 32 on phones (convention variant): ClioCon's mobile frame
     uses 32, and so do this page's Agents and Case Studies at this width. */
  .about-leadership__content {
    gap: 2rem;
  }

  /* Cards on the 16px media inset, text on the 32 — the design language's
     mobile two-inset rule ("cards in `.container` sections bleed out with
     `margin-inline: -1rem`"), as the Agents cards below do. */
  .about-leadership__people {
    margin-inline: -1rem;
  }

  .about-leadership__people,
  .about-leadership__featured,
  .about-leadership__grid {
    gap: var(--spacing-4);                       /* 16px */
  }

  .about-leadership__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-leader {
    padding: var(--spacing-3);                   /* 12px */
  }

  .about-leader--featured {
    padding: 2rem var(--spacing-4) var(--spacing-4);   /* 32 / 16 / 16 */
  }

  .about-leader__body {
    padding-inline: 0.25rem;                     /* 4px */
  }

  /* Two columns. In one cell, the "more" card is stacked like the others
     (wider, it is laid out across, above). */
  .about-leader--team {
    grid-column: span var(--team-span-2, 1);
  }

  .about-leader--team .about-leader__avatars {
    width: 100%;
  }

  .about-leader--team .about-leader__body {
    align-self: stretch;
    padding:    0.75rem 0.25rem 0;
  }

  .about-leader--team .about-leader__id {
    padding-bottom: 0.75rem;
  }
}