/* /stories-of-hope, Figma 2796:16924 (09-24 master copy).
   Loaded after theme.css. Everything here is scoped to st-* classes so the
   shared theme rules for the old markup can be retired without touching
   this page. */

/* Hand-drawn ring. The #sh-tcard-wavy filter is defined on the page (it
   already drives the Faces cards). Set --st-ring to the card colour. */
.st-ring { position: relative; isolation: isolate; }
.st-ring::after {
  content: ""; position: absolute; inset: -2.5px; border-radius: inherit;
  border: 5px solid var(--st-ring, currentColor);
  pointer-events: none; filter: url(#sh-tcard-wavy); z-index: -1;
}

/* ---- Hero: a 634px photo, then the dark card lifted over its bottom edge ---- */
.st-hero { position: relative; background: #fff; }
.st-hero-media {
  position: relative; height: clamp(634px, 33vw, 900px); overflow: clip;
  background: var(--neutral-900, #171211);
  border-radius: 0 0 16px 16px;
}
.st-hero-media .home-hero-media { object-position: center top; }
.st-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Figma: the overlay is a 0 -> 43% black gradient, flipped, so the dark
     end sits under the navbar at the top. */
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,.43) 100%);
}
.st-hero-strip { position: relative; z-index: 2; padding: 0 24px 40px; margin-top: -203px; }
.st-hero-card {
  --st-ring: var(--carbon, #28201C);
  max-width: 1464px; margin: 0 auto;
  background: var(--carbon, #28201C);
  border-radius: 32px; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  box-shadow: 0 4px 6px -1px rgba(10,13,18,.1), 0 2px 4px -2px rgba(10,13,18,.06);
}
.st-hero-title { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(34px, 4.25vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -.75px; color: var(--magnolia, #FDF9F1); margin: 0; max-width: 1056px; }
.st-hero-sub { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; line-height: 1.25; letter-spacing: -.5px; color: var(--neutral-300, #E5E1D8); margin: 0; max-width: 1056px; }

/* ---- Featured story: grass card, copy left, photo + X-ray strip right ---- */
.st-featured-sec { padding: 40px 64px; background: #fff; }
.st-featured {
  --st-ring: var(--grass, #A7C434);
  max-width: 1384px; margin: 0 auto; min-height: 680px;
  background: var(--grass, #A7C434);
  border-radius: 24px; padding: 40px 10px;
  display: flex; align-items: center; justify-content: center; gap: 56px;
  filter: drop-shadow(0 20px 12px rgba(10,13,18,.08)) drop-shadow(0 8px 4px rgba(10,13,18,.03)) drop-shadow(0 3px 1.5px rgba(10,13,18,.04));
}
.st-featured-copy { flex: 0 1 568px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.st-featured-copy h2 { max-width: 492px; margin-top: 8px; color: var(--carbon, #28201C); }
.st-featured-lede { font-family: 'Fredoka', system-ui, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--carbon, #28201C); margin: 0; max-width: 540px; }
.st-featured-body { font-size: 16px; line-height: 1.6; color: var(--grass-900, #2D3113); margin: 0; max-width: 568px; }
.st-featured-copy .d-btn-dark { margin-top: 10px; }
.st-featured-media { flex: 0 1 607px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.st-featured-photo {
  position: relative; height: 504px; border-radius: 24px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 8px 10px;
}
.st-featured-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.st-xray-strip {
  position: relative; z-index: 1; width: 100%;
  background: #fff; border-radius: 12px; padding: 6px;
  display: flex; align-items: center; gap: 16px;
}
.st-xray-thumbs { display: flex; gap: 12px; flex: none; }
.st-xray-thumbs img {
  width: 95px; height: 113px; object-fit: cover; display: block;
  background: #000; border-radius: 8px; border: 1.6px solid var(--magnolia, #FDF9F1);
  box-shadow: 0 2px 2px rgba(0,0,0,.25);
}
.st-xray-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.st-xray-title { font-family: 'Fredoka', system-ui, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.25; color: #455115; margin: 0; }
.st-xray-cap { font-size: 14px; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
/* Grass 900 on Grass is 7.6:1; Forest (#455115) was 4.33:1, short of 4.5:1 at 20px. */
.st-featured-quote { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; line-height: 1.25; color: var(--grass-900, #2D3113); text-align: center; margin: 0; }

/* ---- Impact to date: a rounded inset card, not a full-width band ---- */
.st-stats-sec { padding: 56px; background: #fff; }
.st-stats {
  /* Grass 400 panel with a Magnolia badge (Site Banner 3908:11538), the same
     component as the homepage stats. */
  --st-ring: var(--grass-400, #BDD267);
  max-width: 1400px; margin: 0 auto;
  background: var(--grass-400, #BDD267);
  border-radius: 24px; padding: 40px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 20px 24px -4px rgba(10,13,18,.08), 0 8px 8px -4px rgba(10,13,18,.03), 0 3px 3px -1.5px rgba(10,13,18,.04);
}
.st-stats-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 40px; }
.st-stats-head .d-badge { background: var(--magnolia, #FDF9F1); }
.st-stats-head h2 { color: var(--grass-900, #2D3113); max-width: 980px; }
.st-stats-head p { font-size: 18px; line-height: 1.6; color: var(--grass-900, #2D3113); opacity: .9; margin: 0; max-width: 820px; }
.st-stats-grid { display: flex; width: 100%; align-items: center; justify-content: center; margin: 24px 0; padding: 0 16px; }
.st-stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 24px; text-align: center; color: var(--grass-900, #2D3113); }
.st-stat-num { font-family: 'Fredoka', system-ui, sans-serif; font-size: clamp(34px, 3.2vw, 48px); font-weight: 600; line-height: 1.12; letter-spacing: -.5px; margin: 0; white-space: nowrap; color: var(--grass-900, #2D3113); }
.st-stat-label { font-size: 20px; font-weight: 600; line-height: 1.6; opacity: .8; margin: 0; color: var(--grass-900, #2D3113); }
.st-stat--tilt { transform: rotate(-.33deg); }

@media (max-width: 1100px) {
  .st-hero-media { height: 520px; }
  .st-hero-strip { margin-top: -160px; }
  .st-featured-sec { padding: 32px 24px; }
  .st-featured { flex-direction: column; min-height: 0; gap: 32px; padding: 32px 28px; }
  .st-featured-copy, .st-featured-media { flex: 1 1 auto; width: 100%; max-width: 640px; }
  .st-featured-photo { height: 420px; }
  .st-stats-sec { padding: 40px 24px; }
  .st-stats-grid { flex-wrap: wrap; row-gap: 16px; }
  .st-stat { flex: 1 1 30%; }
}
@media (max-width: 640px) {
  .st-hero-media { height: 420px; }
  .st-hero-strip { padding: 0 12px 24px; margin-top: -120px; }
  .st-hero-card { padding: 28px 18px; border-radius: 24px; }
  .st-featured-sec { padding: 24px 12px; }
  .st-featured { padding: 24px 18px; }
  .st-featured-photo { height: 340px; padding: 6px; }
  .st-xray-strip { gap: 10px; }
  .st-xray-thumbs { gap: 6px; }
  .st-xray-thumbs img { width: 60px; height: 72px; }
  .st-xray-title { font-size: 20px; }
  .st-xray-cap { font-size: 13px; }
  .st-stats-sec { padding: 32px 12px; }
  .st-stats { padding: 32px 0; }
  .st-stats-head { padding: 0 20px; }
  .st-stat { flex: 1 1 45%; padding: 8px 10px; }
  .st-stat-label { font-size: 16px; }
}

/* ---- Fidelity pass 2026-09-24 (Astra review, verified against 2796:16924) ---- */
/* Hero card ends 10px above the Featured section (strip 644-781, section at 791). */
.st-hero-strip { padding-bottom: 10px; }
/* Faces grid (2859:5147): 80px padding, 64px from header to grid, three
   432px cards 28px apart (the grid runs 1352 wide at 1512). */
.st-faces-sec { padding: 80px; gap: 64px; }
.st-faces-sec .d-patients--grid { gap: 28px; }
.st-faces-sec .d-patient-place { line-height: 1.4; }
.st-faces-sec .d-patient-quote { margin-top: 0; }
/* Stats banner: 4px between header, grid and button, as on the homepage. */
.st-stats-grid { margin: 0; }
/* Impact intro sits on one line (min-w-full in the frame). */
.st-stats-head p { max-width: none; }
/* Section badges carry the hand-drawn ring in their own fill. */
.d-badge--grass.wavy-edge { --wavy-color: var(--grass, #A7C434); }
.d-badge--sunny.wavy-edge { --wavy-color: var(--sunny, #FFD100); }
.st-stats-head .d-badge.wavy-edge { --wavy-color: var(--magnolia, #FDF9F1); }
@media (max-width: 1100px) { .st-faces-sec { padding: 72px 40px; gap: 40px; } .st-faces-sec .d-patients--grid { gap: 24px; } }
@media (max-width: 640px) { .st-faces-sec { padding: 56px 20px; gap: 32px; } .st-hero-strip { padding-bottom: 8px; } }

/* Phone: keep the face in the hero (YuNet audit 2026-09-24). */
@media (max-width: 720px) { img[src*="hero-02-guyana-rahsaan"] { object-position: 2% 6% !important; } }

/* Keyboard focus on the Grass card and the Carbon hero: Carbon ring, 2px off
   (the Sunny button on Grass keeps a visible edge either way). */
.st-featured .d-btn-dark:focus-visible, .st-stats .btn:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; box-shadow: none; }

/* ============================================================
   Phone frame "Stories of Hope - Mobile" (Figma WmKUes42Xq4m4lJ956wuwe,
   3817:29733, 375 wide), 2026-10-02. 24px gutters, sections 48px
   top and bottom. Mobile type: H3 36/1.2 -0.5px, H5 28/1.25,
   Body Large 18, Body 16, Body Small 14.
   ============================================================ */
@media (max-width: 720px) {
  /* Hero (3817:29734): 540px photo, the Carbon card lifted 56px over it.
     The frame runs the photo under the nav pill, but its crop has headroom
     this photo does not: here the crown is 18px from the top, so the pill
     sat across the face. The photo starts below the pill instead, on the
     same 160px of white the homepage frame uses. */
  .st-hero { padding-top: 160px; }
  .st-hero-media { height: 540px; }
  .st-hero-media::after { background: none; }
  .st-hero-strip { padding: 0 24px; margin-top: -56px; }
  .st-hero-card { padding: 24px; gap: 12px; border-radius: 24px; }
  .st-hero-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .st-hero-sub { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; letter-spacing: 0; }

  /* Featured story (3817:29745): body copy, not a second heading; a tall
     portrait photo with the X-rays side by side and the caption under them. */
  .st-featured-sec { padding: 48px 24px; }
  .st-featured { padding: 27px; gap: 24px; border-radius: 24px; }
  .st-featured-copy, .st-featured-media { max-width: none; }
  .st-featured-copy { gap: 16px; }
  .st-featured-copy h2 { margin-top: 0; max-width: none; }
  .st-featured-lede { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; max-width: none; }
  .st-featured-body { font-size: 16px; max-width: none; }
  .st-featured-copy .d-btn-dark { width: 100%; justify-content: center; white-space: nowrap; font-size: 16px; padding: 12px; margin-top: 0; }
  .st-featured-media { gap: 12px; }
  .st-featured-photo { height: 487px; padding: 8px; border-radius: 24px; }
  .st-xray-strip { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 12px; }
  .st-xray-thumbs { gap: 8px; width: 100%; }
  .st-xray-thumbs img { flex: 1 1 0; min-width: 0; width: auto; height: 114px; object-fit: cover; }
  .st-xray-text { gap: 0; }
  .st-xray-title { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--grass-900, #2D3113); }
  .st-xray-cap { font-size: 14px; }
  .st-featured-quote { font-size: 28px; }

  /* Faces grid (3817:29770) */
  .st-faces-sec { padding: 48px 24px; gap: 16px; }
  .st-faces-sec .d-patients--grid { gap: 16px; }

  /* Impact to date (3908:11642): Grass 400 card, Magnolia badge, one column. */
  .st-stats-sec { padding: 48px 24px; }
  .st-stats { padding: 40px 0; gap: 4px; }
  .st-stats-head { padding: 0 6px; gap: 8px; }
  .st-stats-head p { font-size: 16px; padding: 0 6px; }
  .st-stats-grid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; row-gap: 0; padding: 0; }
  .st-stat { flex: none; padding: 8px 24px; }
  .st-stat--tilt { transform: none; }
  .st-stat-num { font-size: 36px; line-height: 1.2; }
  .st-stat-label { font-size: 18px; }
  .st-stats > .btn { font-size: 16px; min-height: 53px; padding: 12px 16px; margin-top: 8px; white-space: nowrap; }
}