/* ============================================================
   Experts page (experts.html) - the Founding Chairman section.
   Loaded by experts.html only; styles.css carries everything else.

   Layout (2026-09-24, second pass): the page banner re-inked in the
   welcome page's purple gradient (scoped to .page-banner--experts,
   which only this page carries). Then a 240px portrait circle | ONE
   content column (56px gap) holding, top to bottom, the eyebrow, name,
   credentials, biography, the white stat card and the "Read the full
   biography" action - so every block starts at the portrait's right
   edge + 56px and ends at the container's right edge. Below 920px the
   portrait stacks above and everything shares the gutter (the shared
   .chair rule in styles.css stacks at 760; .chair--experts, which only
   this page carries, overrides it between 760 and 919).

   The card reuses the homepage's .fusion__stats / .fusion-stat classes
   (not scoped to .fusion) for the figure typography; here everything
   inside the card is CENTRED: three equal columns from 640px (the card
   is full width to 919px and wide enough beside the portrait from
   920px), one centred column below 640px.

   Measured pairs (flat, token on token):
     on the section's --lavender #F2EEF8: credentials --gold-deep 4.77,
       name --purple 10.78, biography --text 12.12
     on the white card: band label --gold-deep 5.45, figures --purple
       12.33, figure labels --purple-deep 14.49, description --text
       13.86, footnote + source --text-muted 6.98, links --purple 12.33
     the action: --purple on lavender 10.78 (outline), hover white on
       --purple 12.33
   ============================================================ */

/* ---- The page banner: welcome.html's purple gradient (same tokens, same
   118deg direction), the eyebrow in the light brand gold, the headline white.
   The shared .page-banner keeps its 2px gold hairline at the bottom edge and
   its padding, so the band's height is unchanged (209px at 1440). Scoped to
   the --experts modifier, which only experts.html carries. */
.page-banner--experts {
  background: linear-gradient(118deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--white);
}
.page-banner--experts .eyebrow { color: var(--guide-gold-light); }   /* 7.65 on --purple, 8.99 on --purple-deep */
.page-banner--experts h1 { color: var(--white); }                     /* 10.78 / 12.68 */

/* ---- portrait 240px, the board cards' circle treatment at a larger size;
   from 920px it is the left rail with a 56px gap to the content column.
   styles.css puts the shared .chair beside its text from 760px; on this page
   the 240px rail would leave a 424px column there, so .chair--experts keeps
   the stacked layout (one column, the phone row gap) up to 919px. */
.chair__photo { width: 240px; }
@media (min-width: 760px) and (max-width: 57.49rem) {
  .chair--experts { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (min-width: 57.5rem) {
  .chair--experts { grid-template-columns: 240px minmax(0, 1fr); column-gap: 3.5rem; }
}

/* credentials beneath the name: small, letter-spaced, deep gold */
.chair__creds {
  margin: 0.2rem 0 1.1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-deep);           /* 4.77:1 on --lavender */
  max-width: none;                   /* its box ends at the column edge like every other block */
}
/* the biography reaches the column's right edge (the base p { max-width: 72ch }
   is lifted, as on welcome.html) and is set at 18px: in the 784px column
   at 1440 full lines then average 84 / 81 / 88 characters (spaces
   included) over the three paragraphs; 17px runs 88-93, 19px 78-83 */
.chair__bio > p {
  max-width: none;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ---- Global surgical education: the white card beneath both columns ------
   Same treatment as the board cards below it on this page: white, the site
   radius, a 2px --lavender border and their soft shadow (0 2px 10px), so the
   two card families read as one. */
.chair-stats {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: 1.5rem;                   /* 24px mobile */
  background: var(--white);
  border: 2px solid var(--lavender);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(46, 33, 80, 0.08);
}
@media (min-width: 48rem) {
  .chair-stats { padding: 2rem; }    /* 32px desktop */
}
.chair-stats__eyebrow {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  color: var(--gold-deep);           /* 5.45:1 on white */
  max-width: none;
}
/* the figures: three EQUAL columns across the card from 640px, figure and
   label centred as a unit in each; ONE centred column below 640px. The
   numbers carry the card - 36px from 800px, 28px on phones - and never wrap
   ("1,086,274" is 151px wide at 36px; the narrowest three-column card, 584px
   at 920px beside the portrait, holds three at 157px each). */
.chair-stats .chair-stats__list {
  grid-template-columns: 1fr;
  column-gap: clamp(1rem, 2.5vw, 3rem);
  row-gap: 1.25rem;
  justify-items: center;
}
@media (min-width: 40rem) {
  .chair-stats .chair-stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.chair-stats .fusion-stat {
  align-items: center;
  text-align: center;
  padding: 0;
  gap: 0.35rem;
}
.chair-stats .fusion-stat__figure {
  font-size: clamp(1.75rem, 4.5vw, 2.25rem);   /* 28px floor at 640, 36px from 800px */
  line-height: 1.05;
  white-space: nowrap;
  color: var(--purple);              /* 12.33:1 on white */
}
.chair-stats .fusion-stat__label {
  font-size: 1rem;                   /* 16px on phones, 18px from 800px with the 36px figures */
  color: var(--purple-deep);         /* 14.49:1 on white */
}
@media (min-width: 50rem) { .chair-stats .fusion-stat__label { font-size: 1.125rem; } }
/* a hairline between the figures and the description - the site's card-border
   tint (the guide cards' rgba(58,42,102,.14)) - so the card has structure */
.chair-stats__desc {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(58, 42, 102, 0.14);
  margin-inline: auto;
  max-width: 62ch;                   /* a reading measure, not the card's width */
  text-align: center;
  line-height: 1.6;
  color: var(--text);                /* 13.86:1 on white */
}
/* the footnote and source as one quieter block, set apart from the
   description: the block is capped at 80 characters of its own 14px type and
   centred with auto margins; the two paragraphs inside fill it (the base
   p { max-width: 72ch } is lifted - it left them 636px wide at the block's
   left edge, so their centred text sat 40px left of the card's centre) */
.chair-stats__foot {
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(58, 42, 102, 0.08);
  margin-inline: auto;
  max-width: 80ch;
  font-size: 0.875rem;
}
.chair-stats__note,
.chair-stats__source {
  margin: 0;
  max-width: none;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);          /* 6.98:1 on white */
}
.chair-stats__source { margin-top: 0.35rem; }
/* a 44px hit area on the inline source link, pulled back so the line does not move */
.chair-stats__source a {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  color: var(--purple);              /* 12.33:1 on white */
  font-weight: 600;
  text-underline-offset: 3px;
}
.chair-stats__source a:hover { color: var(--purple-bright); }
.chair-stats__source a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---- The section's action: "Read the full biography" as a real control --
   An outlined button in the section's ink: 44px+, the site radius, filled on
   hover, a 3px ring on focus. Left-aligned at the end of the section. */
.chair__more {
  display: flex;
  justify-content: flex-end;         /* the action sits at the content column's right edge */
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  max-width: none;                   /* the base p cap would stop the row short of the edge */
}
@media (max-width: 39.99rem) {
  .chair__more a { width: 100%; justify-content: center; }   /* phones: full width of the gutter */
}
.chair__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 2px solid var(--purple);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--purple);              /* 10.78:1 on --lavender; the outline 10.78 */
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.chair__more a:hover { background: var(--purple); color: var(--white); }   /* 12.33:1 */
.chair__more a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .chair__more a { transition: none; }
}