/*
  WumeHealth — visit (/visit) page-scoped DESKTOP layout overrides.

  Stage-2 desktop fixes. EVERY rule here is scoped to body.is-visit-page
  AND wrapped in @media (min-width: 992px) so the synced MOBILE view
  (<992px) is left completely untouched. Shared primitives
  (.wume-contact-panel-*, .wume-doctor-digest-*, .wume-press-*,
  .wume-hero-*) are styled in wume.css; this file only narrows their
  behaviour for the standalone /visit page so the same primitives keep
  their existing look on Home and the other pages that reuse them.

  Mirrors figma-final/screens/desktop/visit.png (1440 wide):
   (1) Contact panels — no kicker; each panel is a flex column with the
       detail line pushed to the bottom (margin-top:auto).
   (2) The Doctoral Digest — grid 4-up -> 2-up (scoped, so Home's shared
       grid stays 4-up); each card is image-LEFT / text-RIGHT.
   (3) Digest header — h2 on the left, eyebrow + "view journal" as a
       right-aligned cluster.
   (4) Hero body — center-left column (~figma x268-691), max-width 423px.
   (5) Press wall — text swatches kept for now (TODO ASSET: 18 logo PNGs),
       grid 6-up -> 5-up, square (1/1) tiles, max-width 1220.
  V01
  V02 Stage-2 desktop finish: section grounds corrected (FAQ sand, digest cream,
       press sand); digest card image aspect 1/1 -> 251/347 (fills card height)
       + image-text gap 24 -> 13; press-wall gap 24 -> 100px.
  V03 Stage-2b MOBILE layout (<=991.98px, target 393px) — a SINGLE
       @media(max-width:991.98px) block appended AFTER the desktop block; the
       desktop @media(min-width:992px) rules above are untouched (byte-identical),
       so desktop stays pixel-identical. Every rule scoped body.is-visit-page.
       Mirrors figma-final/screens/mobile/visit.png (393 wide). Covers: 24px page
       gutters; contact band -> inset hairline-bordered brown panel group with
       internal dividers, title at the panel pad + detail/CTA indented, the
       relocated "start with wume" CTA styled as a plain caps line; Doctoral
       Digest header (eyebrow top-right, title left) + the desktop-style card
       carried to phone (sand tile, image LEFT ~158px aspect 158/264, date pinned
       top-right, title bottom-right) + a centered bottom "view journal"; the
       "view journal" link gets styled at <992 (it was unstyled there before);
       press swatch grid forced to 2-up square 167x167 (overrides the wume.css
       <=575.98 1-up rule). TODO ASSET: the contact-band background photo (figma
       shows a translucent brown panel over an editorial skin/body photo — no hash
       supplied; the band falls back to solid brown here) and the 18 press-wall
       logo PNGs (text swatches remain the placeholder).
  V04 Intro feature (#faqs) photo column constrained to 523px (base .wume-split
      1fr 1fr made it 618px/half = too big vs figma 523x654). ?v 3->4.
  V05 Contact band follows figma: the three contact panels sit over a soft,
      heavily-blurred warm photo (≈ a warm-taupe gradient, lighter upper-centre,
      darker edges), NOT solid brown cards. Gradient on the grid + transparent
      panels (dividers + light text preserved); phone uses a lighter, more uniform
      linear gradient since the tall stacked grid darkened the desktop radial. ?v 4->6.
*/

/* Contact band (all widths) — figma shows the three contact panels over a soft,
   heavily-blurred warm photo, reproduced here as a warm-taupe gradient on the
   grid with transparent panels so the existing dividers + light text read over
   it (replaces the solid-brown cards). */
body.is-visit-page .wume-contact-panel-grid {
    background: radial-gradient(ellipse 100% 150% at 43% 30%, #bcaa9a 0%, #9c8a78 50%, #7a6959 100%);
}
body.is-visit-page .wume-contact-panel {
    background: transparent;
}
body.is-visit-page .wume-contact-panel:hover {
    background: rgba(45, 34, 24, 0.12);
}

@media (min-width: 992px) {

    /* (0) Section grounds — figma desktop: hero cream, FAQ sand, Doctoral
       Digest cream, press sand. The live template paints FAQ + press via
       .wume-section (cream) and the digest via .wume-section-alt (sand) — all
       three inverted vs figma. Override by section id (mobile untouched). */
    body.is-visit-page #faqs {
        background: var(--wume-sand);
    }
    /* Intro feature photo: base .wume-split is 1fr 1fr (618px = too big); figma
       photo is 523. Photo is the left child. */
    body.is-visit-page #faqs .wume-split {
        grid-template-columns: min(523px, 41%) minmax(0, 1fr);
    }
    body.is-visit-page #wume-journal {
        background: var(--wume-cream);
    }
    body.is-visit-page #press {
        background: var(--wume-sand);
    }

    /* (4) Hero body — figma places the paragraph in a center-left column
       (~x268-691, width ~423px), vertically below the title rather than on
       the title's baseline. wume.css puts it in grid-column 2 (right half)
       on grid-row 1; re-place it into the center-left band and drop it to a
       second row so it clears the heading. The two-column grid from
       wume.css (minmax(0,1fr) minmax(0,1fr), 60px gap) is widened to a
       three-column track so the middle band lands at ~x268. */
    body.is-visit-page .wume-hero .container {
        grid-template-columns: minmax(0, 236px) minmax(0, 423px) minmax(0, 1fr);
        column-gap: 0;
    }
    body.is-visit-page .wume-hero-body {
        grid-column: 2;
        grid-row: 2;
        max-width: 423px;
        margin-top: 56px;
    }
    /* Title stays top-left in the first column; jump-links span all three
       tracks on the bottom row (unchanged behaviour, restated for the new
       3-track grid). */
    body.is-visit-page .wume-hero-title {
        grid-column: 1 / -1;
    }
    body.is-visit-page .wume-hero-jumps {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* (1) Contact panels — kicker removed in the template. Make each panel
       a flex column so the detail line can be pushed to the bottom of the
       (equal-height) tile via margin-top:auto, with the title anchored to
       the top. Matches figma's title-top / detail-bottom rhythm. */
    body.is-visit-page .wume-contact-panel {
        display: flex;
        flex-direction: column;
    }
    body.is-visit-page .wume-contact-panel-title {
        margin-bottom: 0;
    }
    body.is-visit-page .wume-contact-panel-detail {
        margin-top: auto;
        margin-bottom: 0;
    }

    /* (3) Digest header — h2 on the left, eyebrow + "view journal" as a
       right-aligned cluster on the right (flex space-between). The eyebrow
       sits above the link; both are right-aligned. */
    body.is-visit-page .wume-visit-digest-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    body.is-visit-page .wume-visit-digest-header .wume-section-title {
        margin: 0;
    }
    body.is-visit-page .wume-visit-digest-header-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        gap: 32px;
    }
    body.is-visit-page .wume-visit-digest-header-meta .wume-hero-tagline {
        margin: 0;
    }
    body.is-visit-page .wume-visit-digest-viewjournal {
        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);
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    body.is-visit-page .wume-visit-digest-viewjournal:hover {
        color: var(--wume-lbrown);
    }

    /* (2) Doctoral Digest grid — 4-up -> 2-up. Scoped to this page so the
       shared .wume-doctor-digest-grid stays 4-up on Home. */
    body.is-visit-page .wume-doctor-digest-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Each card is image-LEFT / text-RIGHT on a sand ground: a 2-col grid
       (square image | text), the image spanning both rows, the date pinned
       top-right and the title pinned bottom-right. */
    body.is-visit-page .wume-doctor-digest-card {
        display: grid;
        grid-template-columns: minmax(0, 251px) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 13px;
        background: var(--wume-sand);
        padding: 21px 16px;
    }
    body.is-visit-page .wume-doctor-digest-card-image {
        grid-column: 1;
        grid-row: 1 / span 2;
        aspect-ratio: 251 / 347;
        margin-bottom: 0;
        align-self: start;
    }
    body.is-visit-page .wume-doctor-digest-card-date {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        margin-bottom: 0;
    }
    body.is-visit-page .wume-doctor-digest-card-title {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
    }

    /* (5) Press wall — keep the text swatches for now (TODO ASSET: 18 logo
       PNGs). Grid 6-up -> 5-up, square (1/1) tiles, wider max-width. The
       wume.css `.wume-press-wall .wume-press-swatch { aspect-ratio: 3/2 }`
       rule is overridden to 1/1 here. */
    body.is-visit-page .wume-press-swatch-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 100px;
        max-width: 1220px;
    }
    body.is-visit-page .wume-press-wall .wume-press-swatch {
        aspect-ratio: 1 / 1;
    }

}

/* ════════════════════════════════════════════════════════════════════════
   STAGE-2b MOBILE (<= 991.98px, target 393px). Separate block; the desktop
   block above is untouched. All rules scoped body.is-visit-page. Mirrors
   figma-final/screens/mobile/visit.png (393 wide).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* Page gutters — content runs x24..x368 in figma (≈24px each side). The
       shared .container already supplies this; restated on hero for safety. */
    body.is-visit-page .wume-hero .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Hero jump-links — figma mobile shows plain caps with the □ marker and NO
       underline rule under each link (wume.css gives .wume-jump-link a
       border-bottom). Drop it on this page at phone width. */
    body.is-visit-page .wume-jump-link {
        border-bottom: 0;
        padding-bottom: 0;
    }
    body.is-visit-page .wume-jump-link:hover {
        border-bottom: 0;
        color: var(--wume-lbrown);
    }

    /* ── Contact band ──────────────────────────────────────────────────────
       Figma mobile: a translucent brown panel group floats inset (~24px each
       side) over an editorial skin/body photo, with a 1px light hairline
       border around the group and hairline dividers between the three blocks.
       TODO ASSET: the background photo is not supplied (no hash); the band
       falls back to the existing solid brown ground. Here we reproduce the
       INSET bordered panel + dividers + figma's text indents. */
    body.is-visit-page .wume-contact-panel-grid {
        /* Full-bleed warm ground so the ~24px inset margin reads as part of the
           band. Figma shows a soft, heavily-blurred warm photo here; reproduced
           as a lighter, uniform warm-taupe gradient (the tall stacked grid made
           the desktop radial too dark at the bottom). */
        background: linear-gradient(165deg, #c2b3a4 0%, #ab9a85 100%);
        padding: 24px;
    }
    body.is-visit-page .wume-contact-panel {
        /* hairline outer border on every side; the shared <992 rule sets a
           bottom-only divider — promote it to a full box and let inner panels
           share edges so the group reads as one bordered panel. */
        border: 1px solid rgba(242, 240, 235, 0.5);
        border-bottom-width: 0;
        padding: 30px 28px 34px;
    }
    body.is-visit-page .wume-contact-panel:first-child {
        border-top-width: 1px;
    }
    body.is-visit-page .wume-contact-panel:last-child {
        border-bottom-width: 1px;
    }
    /* Internal divider between blocks (1px light hairline). */
    body.is-visit-page .wume-contact-panel + .wume-contact-panel {
        border-top: 1px solid rgba(242, 240, 235, 0.5);
    }
    /* Title sits at the panel pad; the detail line + CTA are indented deeper
       (figma: title x≈47, detail x≈109 → ~32px extra indent past the 28px pad). */
    body.is-visit-page .wume-contact-panel-title {
        margin-bottom: 22px;
    }
    body.is-visit-page .wume-contact-panel-detail {
        margin-left: 32px;
        line-height: 1.9;
    }
    /* Relocated "start with wume" — plain caps line inside the Email panel,
       indented to match the detail line (NOT a black button). */
    body.is-visit-page .wume-contact-panel-cta {
        display: inline-block;
        margin-left: 32px;
        margin-top: 22px;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.78rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        color: var(--wume-cream);
        cursor: pointer;
    }

    /* ── Doctoral Digest header — figma mobile: eyebrow ("curated & edited by
       dr. wu") aligned TOP-RIGHT, the title left-aligned BELOW it. The desktop
       space-between flex would put them on one baseline; reflow to a column. */
    body.is-visit-page .wume-visit-digest-header {
        display: flex;
        flex-direction: column;
    }
    body.is-visit-page .wume-visit-digest-header-meta {
        order: -1;                            /* eyebrow above the title */
        text-align: right;
        margin-bottom: 14px;
    }
    body.is-visit-page .wume-visit-digest-header-meta .wume-hero-tagline {
        margin: 0;
    }
    body.is-visit-page .wume-visit-digest-header .wume-section-title {
        margin: 0;
    }

    /* Digest grid — single column, tight gap (figma card pitch ≈ card + 11). */
    body.is-visit-page .wume-doctor-digest-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }
    /* Card — carry the desktop image-LEFT / text-RIGHT composition to phone:
       sand tile, image LEFT ~158px (aspect 158/264), date pinned top-right,
       title pinned bottom-right. The visit template places .date / .title as
       direct grid children (no -card-body wrapper), matching the desktop CSS. */
    body.is-visit-page .wume-doctor-digest-card {
        display: grid;
        grid-template-columns: 158px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 14px;
        background: var(--wume-sand);
        padding: 12px 14px 12px 9px;
    }
    body.is-visit-page .wume-doctor-digest-card-image {
        grid-column: 1;
        grid-row: 1 / span 2;
        aspect-ratio: 158 / 264;
        margin-bottom: 0;
        align-self: start;
    }
    body.is-visit-page .wume-doctor-digest-card-date {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        margin-bottom: 0;
    }
    body.is-visit-page .wume-doctor-digest-card-title {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        font-size: 1.05rem;
    }

    /* "view journal" — styled for phone (it had no <992 rule before, so it
       rendered as a default link). Centered bottom link per figma mobile. */
    body.is-visit-page .wume-visit-digest-viewjournal {
        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);
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    body.is-visit-page .wume-visit-digest-viewjournal:hover {
        color: var(--wume-lbrown);
    }
    body.is-visit-page .wume-visit-digest-viewjournal-mobile {
        text-align: center;
        margin-top: 28px;
    }

    /* ── Press wall — figma mobile: 2-up square tiles (167x167) with the brand
       name centered. The wume.css <=575.98 rule forces 1fr (1-up) at 393px;
       override back to 2-up here. Square tiles override the desktop 1/1 +
       wume.css 3/2 defaults. TODO ASSET: 18 logo PNGs (text swatches remain). */
    body.is-visit-page .wume-press-swatch-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 13px;
        max-width: none;
    }
    body.is-visit-page .wume-press-wall .wume-press-swatch {
        aspect-ratio: 1 / 1;
    }

}