/* =========================================================
   Our Story page styles
   Depends on styles.css (and currently also faq.css for the
   intro/CTA blocks) being loaded first.
   ========================================================= */


/* =========================================================
   OUR STORY INTRO — EDITORIAL REDESIGN
   ---------------------------------------------------------
   A quiet single-column editorial layout that sits inside the
   reused .faq-intro section shell:

     1. Header block (centered)
          - small caps eyebrow (sage)
          - Optima display heading
          - 56px hairline ornament
     2. Opening lede (centered, Optima italic)  ← bridges the
          header to the body column.
     3. Body column (left-aligned within a centered measure)
          ~64ch comfortable measure; four-paragraph rhythm.
     4. Coda (centered, separated by a hairline rule)
          - small-caps kicker (sage)
          - three-line verb triplet in Optima italic.

   The wrapper section (.faq-intro) provides outer padding and
   the cream background; nothing about it changes.
   ========================================================= */

/* The parent .faq-intro has text-align:center. We override on
   the inner pieces individually so the body column can read
   left-aligned while header + lede + coda remain centered. */

/* ---------- Header ---------- */

.our-story-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
}

.our-story-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 14px;
}

/* Tighten the inherited .faq-heading bottom margin so the
   hairline ornament reads as part of the header group. */
.our-story-heading {
  margin-bottom: 22px;
}

.our-story-mark {
  display: block;
  width: 56px;
  height: 1px;
  background: rgba(29, 40, 54, 0.28);
  margin: 0 auto;
}

/* ---------- Lede (opening sentence) ---------- */

.our-story-lede {
  /* Widened from 32ch to 46ch so the sentence breaks into two clean
     balanced lines instead of three. text-wrap: balance handles the
     split point and prevents single-word widows. */
  max-width: 46ch;
  margin: 0 auto clamp(32px, 4vw, 48px);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--color-navy);
  text-align: center;
  text-wrap: balance;
}

/* ---------- Body column ---------- */

.our-story-body {
  /* 820px reads as the comfortable upper edge of editorial body
     measure at 17px / 1.75 line-height (~80–85ch). Parent
     .container's padding-inline handles tablet/mobile narrowing. */
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}

.our-story-body > p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(29, 40, 54, 0.85);
  margin: 0 0 1.35em;
  text-wrap: pretty;
}

.our-story-body > p:last-child {
  margin-bottom: 0;
}

/* ---------- Coda (final brand statement) ---------- */

.our-story-coda {
  display: block;
  max-width: 720px;
  margin: clamp(44px, 5.5vw, 68px) auto 0;
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid rgba(29, 40, 54, 0.14);
  text-align: center;
}

.our-story-coda__kicker {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 18px;
}

.our-story-coda__triplet {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
  color: var(--color-navy);
  text-wrap: balance;
}

.our-story-coda__triplet > span {
  display: block;
}
.our-story-coda__triplet > span + span {
  margin-top: 4px;
}


/* ---------- CLINICAL LEADERSHIP ---------- */
/* Two-up profile grid. Designed to feel editorial and human:
   tall portrait placeholder, small tracked-caps role label,
   Optima name, then a concise bio in the body face. Bios are
   intentionally short for the placeholder stage — they expand
   well as real copy comes in without redesigning the card. */

.leadership {
  /* Soft sage-cream (#EEF4EC) — same token used on the homepage's
     .process section. Gives the team block its own quiet "stage"
     in the page's cream → sage → cream pacing, and pairs cleanly
     with the pale-sage portrait placeholder gradients above. */
  background: #EEF4EC;
  padding-block: clamp(64px, 8vw, 112px);
  /* No hairline rule — the color edge itself is the section
     divider now. */
}

.leadership__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--color-navy);
  margin: 0 0 16px;
  text-wrap: balance;
}

.leadership__intro {
  text-align: center;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 auto clamp(48px, 6vw, 72px);
  color: rgba(29, 40, 54, 0.78);
  text-wrap: pretty;
}

.leadership__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 56px);
  /* Narrower than the featured block above so the two remaining
     cards read as supporting/quieter — preserves their original
     ~370px card width from the prior 3-up layout. */
  max-width: 820px;
  margin-inline: auto;
  /* Cards size to their own content so an expanded bio in one
     card doesn't add empty space to siblings. */
  align-items: start;
}


/* =========================================================
   FEATURED CARD — lead physician (Dr. Peterson)
   ---------------------------------------------------------
   A wider, two-column hero block that sits ABOVE the 2-up
   grid. Photo left (3:4 portrait, capped at 360px), content
   right (name, credentials line, short bio, expandable full
   bio). Stacks to a single column at the same 900px
   breakpoint the grid uses.
   ========================================================= */

.leadership-featured {
  max-width: 880px;
  margin: 0 auto clamp(64px, 8vw, 96px);
}


/* =========================================================
   FEATURED CARD — lead physician (Dr. Peterson)
   ---------------------------------------------------------
   The featured card uses the SAME visual grammar as the
   smaller cards in the grid below (photo on top, content
   stacked beneath), just at a hero scale and centered inside
   a wider container. This is what makes the section read as
   one cohesive editorial composition instead of two layouts
   stitched together.

   Layout:
     - Container .leadership-featured caps at 880px so the
       block has generous side-margins matching the page's
       intro story.
     - Portrait centers at 560px wide (3:4 → 747 tall).
     - Name + credentials center beneath the photo.
     - Short bio + expanded bio sit in a centered 580px
       column, left-aligned for readability.
     - Read more / Read less toggle centers under the bio.

   Mobile (≤ 900px) intentionally untouched — see the
   media query below.
   ========================================================= */

.leadership-card__body {
  display: block;
  width: 100%;
}

.leadership-card--featured .leadership-card__name {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  margin-top: 0;
  margin-bottom: 10px;
}

.leadership-card--featured .leadership-card__subtitle {
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.leadership-card--featured .leadership-card__bio {
  font-size: 17px;
  line-height: 1.72;
}

/* ----- Desktop / tablet (≥ 901px): centered hero layout ----- */
@media (min-width: 901px) {

  .leadership-card.leadership-card--featured {
    /* Inherits display:flex / flex-direction:column from
       .leadership-card. Center children horizontally and
       center the inline text inside name/credentials/toggle.
       Bio + expanded paragraphs override back to left-aligned
       below for readability. */
    align-items: center;
    text-align: center;
  }

  .leadership-card--featured .leadership-card__portrait {
    width: 100%;
    /* Reduced from 560px → 420px so Ryan reaches his bio
       sooner without sacrificing the "featured" feel — at
       420×560 the photo is still ≈1.5× the small-card
       portraits below it. */
    max-width: 420px;
    margin-bottom: clamp(28px, 3.5vw, 40px);
  }

  .leadership-card--featured .leadership-card__body {
    /* Widened from 580px so more of the bio fits per line.
       720px ≈ 80ch at 17px — upper edge of comfortable
       editorial measure, still inside the 880px container. */
    max-width: 720px;
  }

  /* Subtitle gets a soft measure cap so the credentials line
     wraps with a balanced silhouette instead of running full
     width. */
  .leadership-card--featured .leadership-card__subtitle {
    max-width: 44ch;
    margin-inline: auto;
  }

  /* Paragraphs read left-aligned inside the centered body
     column — this is the readability rule editorial pages
     follow when a single column is centered. */
  .leadership-card--featured .leadership-card__bio-stack,
  .leadership-card--featured .leadership-card__more-content {
    text-align: left;
  }

  /* Toggle is inline-flex; text-align:center on its block
     parent centers it horizontally. */
  .leadership-card--featured .leadership-card__more {
    text-align: center;
  }

  /* Coda is the brand-statement closer — re-center even
     though the surrounding expanded content reads left. */
  .leadership-card--featured .leadership-card__more-coda {
    text-align: center;
  }
}

.leadership-card {
  display: flex;
  flex-direction: column;
}


/* ---------- Portrait placeholder ---------- */
/* Soft pale-sage gradient with hairline corner brackets — matches
   the placeholder treatment on the Our Science page. Reads as
   intentional editorial framing, not a gray box. */

.leadership-card__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(135deg, #f0f4ec 0%, #e8efe5 100%);
  border: 1px solid rgba(29, 40, 54, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  margin-bottom: clamp(20px, 2.5vw, 28px);
  overflow: hidden;
}

.leadership-card__portrait::before,
.leadership-card__portrait::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(29, 40, 54, 0.30);
}
.leadership-card__portrait::before {
  top: 14px;
  left: 14px;
  border-right: 0;
  border-bottom: 0;
}
.leadership-card__portrait::after {
  bottom: 14px;
  right: 14px;
  border-left: 0;
  border-top: 0;
}

/* When a real photo is supplied, it fills the framed box and
   sits above the placeholder bracket pseudo-elements. The 1px
   border + 3:4 ratio of the wrapper still applies, so all three
   portraits share the same outer treatment. */
.leadership-card__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  z-index: 1;
}

.leadership-card__portrait-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(29, 40, 54, 0.55);
  max-width: 80%;
  text-wrap: pretty;
}
.leadership-card__portrait-label strong {
  display: block;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 8px;
}


/* ---------- Role + name + bio ---------- */

.leadership-card__role {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 8px;
}

/* Variant — when the role label sits BELOW the name instead of
   above (used on Dr. Peterson's featured card). Adds breathing
   room above so the label reads as part of the title block,
   not as a tag attached to the name; the tight bottom margin
   keeps it visually grouped with the subtitle that follows. */
.leadership-card__role--below-name {
  margin: 14px 0 4px;
}

.leadership-card__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--color-navy);
  margin: 0 0 16px;
  text-wrap: balance;
}

.leadership-card__bio {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(29, 40, 54, 0.78);
  margin: 0;
  text-wrap: pretty;
}


/* ---------- Expandable card (Dr. Peterson) ---------- */
/* Scoped to .leadership-card--expandable so the other cards
   keep their existing role-eyebrow + name pattern. This card
   leads with the name, follows with a longer credentials
   subtitle, stacks multi-paragraph short bio, then exposes a
   <details>-based Read more / Read less toggle that expands in
   place inside the same card. No JavaScript required. */

.leadership-card--expandable .leadership-card__name {
  /* Tighter to the credentials subtitle that now sits below. */
  margin-bottom: 6px;
}

.leadership-card__subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--color-green);
  margin: 0 0 18px;
  text-wrap: pretty;
}

/* Spacing between stacked short-bio paragraphs. Other cards
   are unaffected — they don't use .leadership-card__bio-stack. */
.leadership-card__bio-stack {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* --- Read more / less toggle (<details>) --- */

.leadership-card__more {
  margin-top: 22px;
}

.leadership-card__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(29, 40, 54, 0.6);
  padding: 6px 2px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 180ms ease, border-color 180ms ease;
}
/* Strip the native disclosure marker across browsers. */
.leadership-card__more-toggle::-webkit-details-marker { display: none; }
.leadership-card__more-toggle::marker { content: ""; }

.leadership-card__more-toggle:hover {
  color: var(--color-green);
  border-color: var(--color-green);
}
.leadership-card__more-toggle:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 4px;
}

/* Small chevron drawn in CSS — flips when open. */
.leadership-card__more-toggle-icon {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 220ms ease;
}
.leadership-card__more[open] .leadership-card__more-toggle-icon {
  transform: rotate(-135deg) translateY(-1px);
}

/* Swap visibility based on open state:
   - Closed: top "Read more" toggle visible.
   - Open:   top toggle hidden; the bottom "Read less" button
             inside .leadership-card__more-content takes over,
             right-aligned at the end of the expanded copy. */
.leadership-card__more[open] > .leadership-card__more-toggle {
  display: none;
}

/* Bottom "Read less" button — only visible when expanded
   because it lives inside the expanded content. Same uppercase
   tracked style as the top toggle for visual continuity. */
.leadership-card__more-close-wrap {
  margin-top: clamp(20px, 2.4vw, 28px);
  display: flex;
  justify-content: flex-end;
}

.leadership-card__more-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(29, 40, 54, 0.6);
  padding: 6px 2px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.leadership-card__more-close:hover {
  color: var(--color-green);
  border-color: var(--color-green);
}
.leadership-card__more-close:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 4px;
}

/* Up-chevron variant for the close button. */
.leadership-card__more-toggle-icon--up {
  transform: rotate(-135deg) translateY(1px);
}

/* On the featured card the surrounding content is centered;
   the close-wrap stays right-aligned via its own flex rules,
   but ensure the centered text-align doesn't override the
   button's inline layout. */
.leadership-card--featured .leadership-card__more-close-wrap {
  text-align: right;
}

/* --- Expanded content --- */

.leadership-card__more-content {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(29, 40, 54, 0.14);
  animation: leadership-card-more-in 280ms ease both;
}

.leadership-card__more-content p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(29, 40, 54, 0.82);
  margin: 0 0 1.05em;
  text-wrap: pretty;
}
.leadership-card__more-content p:last-child {
  margin-bottom: 0;
}

/* Closing brand line — quieter version of the page coda. */
.leadership-card__more-coda {
  margin-top: 1.6em !important;
  padding-top: 1.25em;
  border-top: 1px solid rgba(29, 40, 54, 0.14);
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: var(--color-navy) !important;
  text-wrap: balance;
}

@keyframes leadership-card-more-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   RESPONSIVE — MOBILE / TABLET (≤ 900px)
   ========================================================= */
/* Leaves the featured card in its natural full-width stacked
   form (no grid, no centering overrides) so mobile reads
   exactly as it does today: photo top, name + credentials +
   bio all left-aligned, Read more left-aligned. Only adds the
   max-width cap so it doesn't get too wide on small tablets,
   and stacks the 2-up grid to a single column. */
@media (max-width: 900px) {

  .leadership-card.leadership-card--featured {
    max-width: 480px;
    margin-inline: auto;
  }

  .leadership__grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: clamp(40px, 6vw, 56px);
  }
}

@media (max-width: 767px) {

  .leadership__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: clamp(40px, 9vw, 56px);
  }

  .leadership-card__portrait {
    aspect-ratio: 4 / 5;
  }
  .leadership-card__portrait::before,
  .leadership-card__portrait::after {
    width: 20px;
    height: 20px;
  }
}