/*
  WumeHealth — Care page MOBILE (<=991.98px) layout overrides (Stage 2b)
  ----------------------------------------------------------------------------
  Scope: every rule is prefixed `body.is-care-page` AND wrapped in
  `@media (max-width: 991.98px)` so the synced DESKTOP view (>=992px),
  which lives in public/css/wume.css, is left completely byte-identical.

  Linked from templates/pages/care.html.twig via {% block head %} (after
  wume.css, so these rules win the cascade). Does NOT modify wume.css or
  base.html.twig.

  Target: figma-final/screens/mobile/care.png (393px wide). Builds the
  phone layout to match the Figma R1 mobile Care screen:
    - Hero: larger 3-line serif headline; jump-links stacked with square
      markers (the single-column collapse already lives in wume.css).
    - Step cards: full-width photo ON TOP of each card, heading below, then
      a 2-column body row (STEP kicker far-left + body indented-right kept
      on mobile — wume.css collapses it to one column, restored here).
    - Philosophy: "OUR PHILOSOPHY" eyebrow right-aligned; intro paragraph;
      a single square image floated right for the first pillar; the three
      pillar rows render as kicker-left + body-indented (no photos on the
      2nd/3rd rows, matching the Figma).
    - Services: the desktop 10-tile grid + the desktop Aesthetic-Dermatology
      split section are hidden on mobile (d-none d-lg-block in the template);
      a mobile-only categorized accordion (d-lg-none) takes their place —
      four category groups, each a Bootstrap collapse list with +/- toggles,
      Injectables expanded by default with its overview + four sub-lists.
    - Comparison: Signature-Pathways list items become bordered boxes with a
      diagonal arrow; both card CTAs become solid sage-filled buttons.
    - The inherited bottom brown "Request an Invitation" band is hidden on
      mobile (the Figma closes the page with the Ongoing-Care card's
      "start with wume" button straight into the footer).

  V01 — initial Stage-2b mobile build.
  V02 — spacing finishing: section padding 56->42, step-card margin 56->42,
        pillar-rows gap 44->32 (the per-section padding ran the long page ~14%
        over the figma). ?v 1->2.
  V03 — DESKTOP heading wrap: step-card titles given a Figma max-width so they
        wrap to two lines like the design (were running one line). ?v 2->3.
  V04 — Hero title max-width (620px) added so it wraps to two lines like Figma
        (earlier 510/680 attempts were testing a stale ?v=3 cache). ?v 3->4.
*/

@media (max-width: 991.98px) {

    /* ====================================================================
       Page rhythm — content gutter and section vertical padding.
       Figma left/right content margin measures ~24px at 393px.
       ==================================================================== */
    body.is-care-page .wume-section,
    body.is-care-page .wume-hero,
    body.is-care-page .wume-invite-form {
        padding-top: 42px;
        padding-bottom: 42px;
    }
    body.is-care-page .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* ====================================================================
       HERO — sage band. Larger serif headline (3 lines at 393px), body
       paragraph below, jump-links stacked. (The 2-col -> 1-col collapse and
       the vertical jump stack already exist in wume.css; this only tunes
       type sizes + spacing to the Figma.)
       ==================================================================== */
    body.is-care-page .wume-hero-title {
        font-size: 2.35rem;
        line-height: 1.12;
        letter-spacing: var(--wume-tracking-heading);
        margin-bottom: 28px;
    }
    body.is-care-page .wume-hero-body {
        font-size: 1rem;
        line-height: 1.55;
    }
    body.is-care-page .wume-hero-jumps {
        margin-top: 36px;
    }
    body.is-care-page .wume-jump-links {
        gap: 22px;
    }
    body.is-care-page .wume-jump-link {
        font-size: 0.78rem;
        letter-spacing: var(--wume-tracking-caps);
        border-bottom: 0;
        padding-bottom: 0;
    }

    /* ====================================================================
       STEP CARDS — photo ON TOP, then heading, then a 2-column body row
       (kicker far-left + body indented). wume.css forces the step photo to
       `order: 2` (right column on desktop) and collapses the body-row to a
       single column on mobile; both are reversed here.
       ==================================================================== */
    body.is-care-page .wume-step-card {
        display: flex;
        flex-direction: column;
        gap: 28px;
        margin-bottom: 42px;
    }
    body.is-care-page .wume-step-card:last-child {
        margin-bottom: 0;
    }
    /* Photo to the TOP of the card (overrides wume.css order:2). */
    body.is-care-page .wume-step-card > .wume-step-card-image {
        order: -1;
        width: 100%;
        margin: 0;
        aspect-ratio: 4 / 5;
        overflow: hidden;
    }
    body.is-care-page .wume-step-card > .wume-step-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    body.is-care-page .wume-step-card-title {
        font-size: 1.7rem;
        line-height: 1.15;
        letter-spacing: var(--wume-tracking-heading);
        margin: 0 0 20px;
    }
    /* Restore the 2-column body row on mobile (kicker far-left + body). */
    body.is-care-page .wume-step-card-body-row {
        display: grid;
        grid-template-columns: 72px 1fr;
        column-gap: 24px;
        align-items: start;
    }
    body.is-care-page .wume-step-card-body-row .wume-step-card-kicker {
        margin: 0;
        padding-top: 2px;
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
    }
    body.is-care-page .wume-step-card-body-row .wume-step-card-body {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.55;
    }
    /* "what happens at wume" eyebrow above the steps. */
    body.is-care-page .wume-section .wume-hero-tagline {
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        margin-bottom: 28px;
    }

    /* ====================================================================
       PHILOSOPHY + 3-PILLAR ROWS — sand band.
       "OUR PHILOSOPHY" eyebrow right-aligned; one square image floated to
       the right for the first pillar; pillar rows are kicker-left +
       body-indented; no photos on rows 2 & 3.
       ==================================================================== */
    body.is-care-page #our-philosophy .wume-hero-tagline {
        text-align: right;
        margin-bottom: 24px;
    }
    body.is-care-page #our-philosophy .wume-section-title {
        font-size: 1.95rem !important;   /* overrides inline 2.6rem from template */
        line-height: 1.15;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    body.is-care-page #our-philosophy .wume-section-subtitle {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    /* The pillar rows: single column, kicker full-left, body indented. The
       single-column collapse exists in wume.css; this adds the body indent
       and the row rhythm, and tunes the type. */
    body.is-care-page .wume-three-pillar-rows {
        gap: 32px;
        margin-top: 8px;
    }
    body.is-care-page .wume-three-pillar-rows > .wume-three-pillar-row {
        display: block;
    }
    body.is-care-page .wume-three-pillar-rows .wume-three-pillar-kicker {
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        margin: 0 0 14px;
        max-width: 60%;
    }
    body.is-care-page .wume-three-pillar-rows .wume-three-pillar-body {
        margin: 0 0 0 48px;          /* indented body per Figma */
        font-size: 0.95rem;
        line-height: 1.55;
        max-width: 100%;
    }
    /* First pillar's photo = small square floated right, above its kicker. */
    body.is-care-page .wume-three-pillar-rows .wume-three-pillar-row:first-child .wume-three-pillar-image {
        float: right;
        width: 145px;
        height: 145px;
        aspect-ratio: 1 / 1;
        margin: 0 0 28px 24px;
        overflow: hidden;
    }
    body.is-care-page .wume-three-pillar-rows .wume-three-pillar-row:first-child .wume-three-pillar-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* No photos on the 2nd & 3rd pillar rows (Figma shows none). */
    body.is-care-page .wume-three-pillar-rows .wume-three-pillar-row:nth-child(n+2) .wume-three-pillar-image {
        display: none;
    }

    /* ====================================================================
       SERVICES BAND — cream. Desktop tile grid + desktop Aesthetic-Derm
       section are hidden via d-none d-lg-block in the template. Here we
       style the heading row + the mobile-only accordion (d-lg-none).
       ==================================================================== */
    body.is-care-page #our-services .wume-section-title {
        font-size: 2.05rem !important;   /* overrides inline 2.6rem */
        line-height: 1.15;
        margin-bottom: 0;
    }
    /* "OUR SERVICES" eyebrow above the heading, right-aligned. */
    body.is-care-page .wume-care-svc-eyebrow {
        text-align: right;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        color: var(--wume-black);
        margin: 0 0 24px;
    }

    /* Category group eyebrow (AESTHETIC DERMATOLOGY, etc.). */
    body.is-care-page .wume-care-svc-cat {
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        color: var(--wume-black);
        margin: 40px 0 16px;
    }
    body.is-care-page .wume-care-svc-group:first-of-type .wume-care-svc-cat {
        margin-top: 36px;
    }

    /* Accordion item card: subtle lighter fill, thin light border, generous
       internal padding, serif title bottom-left, +/- toggle top-right. */
    body.is-care-page .wume-care-svc-acc .accordion-item {
        background: #EFEBE2;                    /* slightly lighter than cream band */
        border: 1px solid #E0DACB;
        border-radius: 2px;
        margin-bottom: 12px;
        overflow: hidden;
    }
    body.is-care-page .wume-care-svc-acc .accordion-button {
        position: relative;
        background: transparent;
        box-shadow: none;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading);
        font-size: 1.6rem;
        line-height: 1.12;
        letter-spacing: var(--wume-tracking-heading);
        color: var(--wume-black);
        text-transform: none;
        padding: 44px 52px 22px 24px;          /* tall card, title sits low-left */
        min-height: 96px;
        align-items: flex-end;
    }
    body.is-care-page .wume-care-svc-acc .accordion-button:not(.collapsed) {
        background: transparent;
        color: var(--wume-black);
        box-shadow: none;
        padding-bottom: 12px;
    }
    body.is-care-page .wume-care-svc-acc .accordion-button:focus {
        box-shadow: none;
        outline: none;
    }
    /* Replace Bootstrap's chevron with a thin +/- glyph, top-right. */
    body.is-care-page .wume-care-svc-acc .accordion-button::after {
        position: absolute;
        right: 24px;
        top: 22px;
        width: auto;
        height: auto;
        margin: 0;
        background-image: none;
        content: "+";
        font-family: var(--wume-font-body);
        font-weight: 300;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--wume-black);
        transform: none;
    }
    body.is-care-page .wume-care-svc-acc .accordion-button:not(.collapsed)::after {
        background-image: none;
        transform: none;
        content: "\2212";                       /* minus */
    }
    body.is-care-page .wume-care-svc-acc .accordion-body {
        background: transparent;
        color: var(--wume-text-on-cream);
        padding: 4px 24px 28px 24px;
    }
    /* Expanded Injectables: OVERVIEW kicker + body + image + sub-lists. */
    body.is-care-page .wume-care-svc-acc .wume-care-svc-overview-kicker {
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        margin: 0 0 14px;
    }
    body.is-care-page .wume-care-svc-acc .wume-care-svc-overview-body {
        font-size: 0.95rem;
        line-height: 1.55;
        margin: 0 0 24px;
    }
    body.is-care-page .wume-care-svc-acc .wume-care-svc-img {
        width: 100%;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        margin: 0 0 28px;
    }
    body.is-care-page .wume-care-svc-acc .wume-care-svc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    body.is-care-page .wume-care-svc-acc .wume-care-svc-sublist {
        margin: 0 0 22px;
    }
    body.is-care-page .wume-care-svc-acc .wume-care-svc-sublist:last-child {
        margin-bottom: 0;
    }
    body.is-care-page .wume-care-svc-acc .wume-care-svc-sublist-kicker {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        margin: 0 0 8px;
    }
    /* Filled square marker before each sub-list kicker. */
    body.is-care-page .wume-care-svc-acc .wume-care-svc-sublist-kicker::before {
        content: "";
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        background: var(--wume-black);
    }
    body.is-care-page .wume-care-svc-acc .wume-care-svc-sublist-body {
        margin: 0;
        padding-left: 19px;          /* aligns under the kicker text */
        font-size: 0.9rem;
        line-height: 1.5;
        color: #5b574e;
    }

    /* ====================================================================
       COMPARISON — cream. "PHYSICIAN-LED CARE" eyebrow centered. Cards
       stack full-width. Signature-Pathways list items become bordered
       boxes with a diagonal arrow; both CTAs become solid sage buttons.
       ==================================================================== */
    body.is-care-page .wume-section-alt .wume-hero-tagline.text-center {
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        margin-bottom: 28px;
    }
    body.is-care-page .wume-section-alt .wume-card {
        padding: 28px 24px;
        margin-bottom: 28px;
    }
    body.is-care-page .wume-section-alt .wume-card .wume-card-title {
        font-size: 1.9rem !important;
        line-height: 1.12;
        letter-spacing: var(--wume-tracking-heading);
        margin-bottom: 18px;
    }
    body.is-care-page .wume-section-alt .wume-card .wume-three-pillar-kicker {
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        margin-bottom: 16px;
    }
    body.is-care-page .wume-section-alt .wume-card p {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    /* Signature-Pathways list -> bordered boxes with a diagonal arrow. */
    body.is-care-page .wume-section-alt .wume-card > ul {
        margin-top: 24px !important;
    }
    body.is-care-page .wume-section-alt .wume-card > ul > li {
        position: relative;
        border: 1px solid #E0DACB;
        border-radius: 2px;
        background: #EFEBE2;
        min-height: 92px;
        display: flex;
        align-items: flex-end;
        padding: 24px 48px 22px 24px;
        margin-bottom: 12px !important;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading);
        font-size: 1.3rem;
        line-height: 1.15;
        letter-spacing: var(--wume-tracking-heading);
        color: var(--wume-black);
    }
    /* Hide the inherited "·" bullet markers. */
    body.is-care-page .wume-section-alt .wume-card > ul > li > strong {
        display: none;
    }
    /* Diagonal arrow top-right of each box. */
    body.is-care-page .wume-section-alt .wume-card > ul > li::after {
        content: "\2197";            /* NORTH EAST ARROW */
        position: absolute;
        right: 24px;
        top: 20px;
        font-family: var(--wume-font-body);
        font-weight: 300;
        font-size: 1.2rem;
        line-height: 1;
        color: var(--wume-black);
    }

    /* Solid sage CTA buttons (override the desktop outline). */
    body.is-care-page .wume-section-alt .wume-card .wume-btn-outline {
        display: block;
        width: 100%;
        text-align: center;
        background: var(--wume-sage);
        color: var(--wume-black);
        border-color: var(--wume-sage);
        padding: 21px 24px;
        margin-top: 28px;
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
    }
    body.is-care-page .wume-section-alt .wume-card .wume-btn-outline:hover {
        background: var(--wume-sage);
        color: var(--wume-black);
        border-color: var(--wume-sage);
    }
    /* Ongoing-Care 4 sub-discipline rows: filled-square markers + indent,
       matching the Figma's ■-marked rows. */
    body.is-care-page .wume-section-alt .wume-card .row .wume-three-pillar-kicker {
        position: relative;
        padding-left: 19px;
        margin-bottom: 8px;
    }
    body.is-care-page .wume-section-alt .wume-card .row .wume-three-pillar-kicker::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        width: 7px;
        height: 7px;
        background: var(--wume-black);
    }
    body.is-care-page .wume-section-alt .wume-card .row > [class*="col-"] > p:not(.wume-three-pillar-kicker) {
        padding-left: 19px;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* ====================================================================
       BOTTOM CTA — hide the inherited brown "Request an Invitation" band;
       the Figma closes the page with the Ongoing-Care card's button.
       ==================================================================== */
    body.is-care-page .wume-invite-form.wume-section-brown {
        display: none;
    }
}

/* DESKTOP (>=992px) heading wrap — the shared .wume-hero-title and care-only
   .wume-step-card-title had no max-width, so they ran to one line; Figma wraps
   them to two. Constrained to the Figma widths (verified via live DOM). */
@media (min-width: 992px) {
    body.is-care-page .wume-hero-title { max-width: 620px; }
    body.is-care-page .wume-step-card-title { max-width: 360px; }
}