/*
  WumeHealth — Home page MOBILE refinements
  Pixel-matches figma-final/screens/mobile/home.png (393px wide).
  Scope: every rule is body.is-home-page inside @media (max-width: 991.98px).
  Desktop (>=992px) is untouched — it lives in public/css/wume.css and this file
  adds NOTHING outside the mobile media query.

  Sections (top -> bottom): hero (sand) + full-bleed photo band, Expert (stone),
  World/Dr-Wu (sage), Protocols (stone) + pathway carousel, What-happens (sand)
  + steps, Real-stories (stone) + brown card carousel, closing CTA glass panel.

  Key figma deltas vs the wume.css mobile baseline:
   - hero + all copy LEFT-aligned (baseline centred the hero)
   - feature LABEL pulled ABOVE the heading; body indented ~40px
   - hero band photos kept at 243x365 (baseline shrank them to 160)
   - steps use an 80px | 1fr grid (desktop is 115px)
   - section vertical rhythm tightened to the figma
  V01
  V06 The mobile generic .wume-feature-media img rule now excludes the Dr-Wu stack (:not(.wume-drwu-stack)),
      so the layered bg/fg keep their own sizing instead of the full-width aspect rule — fixes the
      portrait spilling outside the background on wide (unfolded foldable) viewports.
  V05 Mobile Dr-Wu foreground increased 10% to 73/78 (corrects the wrong-direction shrink;
      still smaller than the original 78/84 so the parallax keeps room).
  V04 Mobile Dr-Wu foreground shrunk a further 10% to 59/64 (more background for the parallax).
  V03 Mobile Dr-Wu foreground shrunk to 66/71 (parallax room, wume-motion.js V06); image sizing
      normalized — the 150px corner thumbnail and the 230px-capped CTA inset now render full-content-width
      like the other feature photos, per the figma frame.
  V02 What-happens steps now layer four photos (.wume-steps-img); give .wume-steps-media
      an explicit 4/3 box on mobile so the absolute-positioned images have height
      (the desktop hover cross-fade lives in wume.css V83). Linked ?v 1 -> 2.
  V07 Lift the 522px width ceiling on the plain feature photo (the Expert photo) on mobile —
      add max-width:none to the full-width rule so it fills the column like the Dr-Wu block,
      the pathways photo and the step photos instead of capping at 522px on wide foldable/tablet widths.
  V08 What-happens steps reorder (pairs wume.css V107 + home.html.twig markup): the label, photo and
      steps are now three direct children of .wume-feature--steps, stacked label -> photo -> steps on
      mobile via grid-template-areas so the photo sits under the label (was dumped below the last step),
      matching figma. Linked ?v 7 -> 8.
  V09 Exclude the steps photo from the mobile feature-photo rule (added :not(.wume-steps-media), matching
      the pattern in wume.css) — that rule was forcing the steps image to a 4/5 portrait that overflowed
      its 4/3 box by ~165px and, with the photo now above the steps (V08), covered STEP I. The steps image
      now fills its own 4/3 box via its inset:0 rule. Linked ?v 8 -> 9.
*/

@media (max-width: 991.98px) {

  /* ---- content gutter (figma = 24px) ---- */
  body.is-home-page .wume-x { padding: 0 24px; }

  /* ============================================================= HERO */
  /* figma: left-aligned copy, 30px serif title, full-width subtitle,
     full-width sage button, then a full-bleed photo band (243x365 imgs). */
  body.is-home-page .wume-hero-final { padding: 40px 0 0; text-align: left; }
  body.is-home-page .wume-hero-final-copy { max-width: none; margin: 0; }
  body.is-home-page .wume-hero-final-title {
    font-size: 30px; line-height: 1.12; letter-spacing: -0.8px;
    max-width: none; margin: 0;
  }
  body.is-home-page .wume-hero-final-subtitle {
    font-size: 16px; line-height: 1.45; max-width: none; margin: 20px 0 28px;
  }
  /* full-width block button */
  body.is-home-page .wume-hero-final .wume-btn-sage {
    display: block; width: 100%; text-align: center; padding: 17px 24px;
  }
  /* photo band — full-bleed track, figma image size 243x365, 16px gap, ~36px above */
  body.is-home-page .wume-hero-band { margin-top: 36px; }
  body.is-home-page .wume-hero-band-track { gap: 16px; }
  body.is-home-page .wume-hero-band-track img { width: 243px; height: 365px; }

  /* ===================================================== FEATURE SECTIONS */
  /* Expert / World / Protocols share .wume-feature. figma mobile order is
     LABEL (top) -> HEADING -> indented BODY -> IMAGE (full-width, inset). */
  body.is-home-page .wume-section { padding-top: 36px; padding-bottom: 40px; }

  body.is-home-page .wume-feature,
  body.is-home-page .wume-feature--img-left,
  body.is-home-page .wume-feature--img-corner {
    grid-template-columns: 1fr; row-gap: 28px; align-items: stretch;
  }
  /* text block becomes an ordered flex column so the label can sit above the
     heading even though it is nested inside .wume-feature-row in the markup */
  body.is-home-page .wume-feature-text { display: flex; flex-direction: column; }
  body.is-home-page .wume-feature-row { display: contents; }
  body.is-home-page .wume-feature-label { order: 0; margin: 0 0 14px; max-width: none; }
  body.is-home-page .wume-feature-title { order: 1; }
  body.is-home-page .wume-feature-body { order: 2; }

  body.is-home-page .wume-feature-title {
    font-size: 30px; line-height: 1.14; letter-spacing: -0.8px; margin: 0 0 22px; max-width: none;
  }
  /* indented body column (figma ~40px in from the gutter) */
  body.is-home-page .wume-feature-body { max-width: none; padding-left: 40px; }
  body.is-home-page .wume-feature-body p { font-size: 16px; line-height: 1.45; margin: 0 0 14px; }
  body.is-home-page .wume-feature-body .wume-link-underline { margin-top: 14px; }

  /* feature photo — inset, full content width, 4:5 portrait */
  body.is-home-page .wume-feature-media:not(.wume-drwu-stack):not(.wume-steps-media) img { width: 100%; max-width: none; height: auto; aspect-ratio: 4/5; }
  body.is-home-page .wume-feature--steps .wume-steps-media { aspect-ratio: 4 / 3; min-height: 0; }

  /* World (img-left): figma stacks image AFTER the text (label->heading->body->portrait) */
  body.is-home-page .wume-feature--img-left .wume-feature-media { order: 0; }
  /* Dr-Wu floated portrait stack keeps its layered look but full-bleed-ish on mobile */
  body.is-home-page .wume-drwu-stack { aspect-ratio: 4/5; }
  body.is-home-page .wume-drwu-stack .wume-drwu-fg { width: 73%; height: 78%; }

  /* Protocols small corner image — figma shows a small ~150px image at the
     LEFT, below the body, before the pathway carousel */
  body.is-home-page .wume-feature--img-corner .wume-feature-corner-img { order: 3; align-self: flex-start; }
  body.is-home-page .wume-feature-corner-img img { width: 100%; height: auto; aspect-ratio: 4/5; }

  /* ====================================================== PATHWAY CARDS */
  /* horizontal auto-carousel; figma card ~270px wide, label serif ~26px */
  body.is-home-page .wume-pathway-cards { margin-top: 32px; }
  body.is-home-page .wume-pathway-card { flex-basis: 270px; height: 120px; padding: 16px 18px; }
  body.is-home-page .wume-pathway-card-label { font-size: 26px; line-height: 1.1; }

  /* ============================================================= STEPS */
  /* What-happens: label(top) -> photo -> steps. figma steps grid = 80px | 1fr,
     STEP label at x25, title at x105. */
  body.is-home-page .wume-feature--steps { align-items: stretch; grid-template-areas: "label" "photo" "steps"; row-gap: 28px; }
  body.is-home-page .wume-feature--steps > .wume-feature-label--top { margin-bottom: 0; }
  body.is-home-page .wume-feature--steps > .wume-steps { margin-top: 0; }
  body.is-home-page .wume-feature-label--top { margin: 0 0 24px; white-space: normal; }
  body.is-home-page .wume-steps { margin: 24px 0 0; }
  body.is-home-page .wume-steps li { grid-template-columns: 80px 1fr; padding: 18px 0; column-gap: 0; }
  body.is-home-page .wume-step-num { padding-top: 6px; }
  body.is-home-page .wume-step-title { font-size: 22px; line-height: 1.16; margin: 0 0 6px; max-width: none; }
  body.is-home-page .wume-step-body p { font-size: 15px; line-height: 1.45; max-width: none; }

  /* ====================================================== REAL STORIES */
  body.is-home-page .wume-stories-head { margin-bottom: 28px; }
  body.is-home-page .wume-stories-head .wume-section-title { font-size: 32px; letter-spacing: -1px; }
  /* brown card carousel — figma card ~310px wide, ~282px tall, 12px gap */
  body.is-home-page .wume-stories-track { gap: 12px; }
  body.is-home-page .wume-story-card { flex-basis: 310px; height: 282px; padding: 28px; }
  body.is-home-page .wume-story-quote { font-size: 26px; line-height: 1.16; max-width: none; }
  /* link sits below the carousel on its own line in the figma */
  body.is-home-page .wume-stories-head { flex-wrap: wrap; }

  /* =============================================================== CTA */
  /* hourglass photo bg + frosted glass panel, fully stacked:
     heading -> body -> hourglass image -> full-width button -> login.
     (wume.css already columns the glass; we order the inset image between
     the copy and the actions, and make the button full-width.) */
  body.is-home-page .wume-cta-final { padding: 48px 0; background-attachment: scroll; }
  body.is-home-page .wume-cta-glass { flex-direction: column; align-items: stretch; padding: 28px; gap: 24px; }
  /* flatten the copy wrapper so the hourglass inset can sit between the body
     and the actions (figma order: heading -> body -> hourglass -> button -> login) */
  body.is-home-page .wume-cta-copy { display: contents; }
  body.is-home-page .wume-cta-title { order: 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.8px; margin: 0 0 18px; }
  body.is-home-page .wume-cta-body { order: 1; font-size: 16px; line-height: 1.45; max-width: none; margin: 0; }
  body.is-home-page .wume-cta-inset { order: 2; }
  body.is-home-page .wume-cta-inset img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
  body.is-home-page .wume-cta-actions { order: 3; flex-direction: column; align-items: stretch; gap: 18px; }
  body.is-home-page .wume-cta-actions .wume-btn-sand {
    display: block; width: 100%; text-align: center; padding: 17px 24px;
  }
  body.is-home-page .wume-cta-login { align-self: flex-start; }
}