/*
   WUME — Journal Article Detail page Stage-2 DESKTOP layout overrides.

   SCOPE: every rule is prefixed `body.is-journal-detail` AND lives inside the
   single `@media (min-width: 992px)` block below, so the synced MOBILE view
   (<992px — the current single-column stacked article) is left completely
   unchanged. This file is loaded only by templates/pages/journal_detail.html.twig
   (block head).

   Figma ref: figma-final/screens/desktop/journal-detail.png (1440 wide).
   Measured 1:1 with PIL:
     - 36px page gutters (.wume-x).
     - Row 1 kicker left edge x=36, date right edge x=1402 (space-between).
     - Row 2 serif title left edge x=268 (editorial indent ~232px from gutter).
     - Row 3 two-column grid: featured photo 523px (left, x=36..558) + 168px
       gap + body column 582px (x=726..1308); 1st paragraph is a large serif
       lead.
     - Hero band ground is sand (not cream).
     - Bottom: left "FAQ" serif heading + an 8-row borderless +/- accordion in
       the right 582px column, then a landscape editorial photo (582 wide) and
       a product callout (333x450 bottle swatch + name / WUME / $214), all
       right-column aligned.

   V01 — initial Stage-2 desktop layout.
   V02 — desktop finish: FAQ heading moved into the right 582 column; title
         3->3.25rem; lead 1.6->1.9rem; FAQ heading 1.8->1.9rem; accordion
         hairline #989693; editorial photo aspect 582/620.
   V03 — verify-fix: FAQ grid 1fr 582px/gap60 -> 691px 582px/gap0 so the FAQ
         heading + accordion align at x727 (under the body column) per figma,
         not x822.
   V04 — Stage-2b MOBILE layout (<=991.98px, target 393px), appended as a
         SEPARATE @media (max-width:991.98px) block AFTER the desktop block, so
         desktop (>=992px) stays byte-identical. Built to pixel-match
         figma-final/screens/mobile/journal-detail.png (393 wide, PIL-measured).
         Single column at a 24px gutter. HERO: sand->cream split (sand top band
         to ~y311, cream below), left-aligned, and the meta row is re-ordered
         (flex order) to fall BELOW the serif title to match figma (title first,
         then "FROM THE DESK / OF DR. WU" left + date right, space-between);
         title ~2.1rem. FEATURED image full content-width, aspect 345/430.
         BODY: the .wume-article-body 720px center-cap + extra 1.25rem padding
         are removed so copy sits full-width at the gutter; 1st paragraph stays
         a serif lead (~1.7rem). FAQ: left serif "FAQ" heading ~2.1rem; the
         borderless +/- hairline accordion is restated (the desktop accordion
         rules live behind @min-width:992); editorial photo full-width aspect
         345/430 (overrides the IMG inline 582/620); product swatch is a small
         168px-wide swatch (aspect 168/287) left-aligned with name / WUME /
         $214 beneath. Page CSS ?v 3->4.
   V05 — desktop overflow fix (992-1440px): the article grid (523px 582px), FAQ grid (691px 582px),
         featured image (523px) and editorial photo (582px) were all fixed 1440-width -> horizontal
         overflow / tablet shrink-to-fit. Now minmax() columns + responsive images so they render at
         the figma sizes at 1440 and shrink to fit below. Page CSS ?v 4->5.
*/

@media (min-width: 992px) {

    /* ── Hero band: the SAND ground covers ONLY the meta row + serif title
       (figma: sand runs page-top y0..384, then CREAM behind the featured
       image + body grid). We keep the grid inside this <section> (template /
       mobile untouched) and paint a sand->cream vertical split with a
       linear-gradient: sand from the top down past the 2-line title, hard
       stop to cream well above the featured-image top (figma img top y=433),
       so the image + body sit on cream. The stop is placed generously so it
       lands correctly whether or not the global nav offsets the hero top. ── */
    body.is-journal-detail .wume-hero {
        background: linear-gradient(180deg,
            var(--wume-sand) 0,
            var(--wume-sand) 300px,
            var(--wume-cream) 300px);
        color: var(--wume-text-on-sand);
        text-align: left;
        padding: 86px 0 64px;
    }

    /* Row 1: kicker (left) + date (right) on one baseline. */
    body.is-journal-detail .wume-jd-meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin: 0 0 56px;
    }
    body.is-journal-detail .wume-jd-meta .wume-hero-tagline,
    body.is-journal-detail .wume-jd-meta .wume-hero-subtitle {
        margin: 0;
        max-width: none;
        text-align: left;
    }
    body.is-journal-detail .wume-jd-meta .wume-hero-subtitle {
        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;
        line-height: 1.2;
        color: var(--wume-black);
    }

    /* Row 2: serif title, left-aligned with editorial indent (figma x=268,
       i.e. ~232px in from the 36px gutter). */
    body.is-journal-detail .wume-hero-title {
        margin: 0 0 56px 232px;
        max-width: 760px;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 3.25rem;
        line-height: var(--wume-lead-heading);
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        color: var(--wume-black);
    }

    /* Row 3: two-column editorial grid — featured photo left (523px) + body
       right (582px), 168px gap. The grid left-aligns inside .wume-x, leaving
       the figma's ~95px right margin. ── */
    body.is-journal-detail .wume-jd-grid {
        display: grid;
        grid-template-columns: minmax(0, 523px) minmax(0, 582px);   /* was 523px 582px — fixed cols overflowed 992-1440px */
        column-gap: clamp(32px, 10vw, 168px);                        /* was 168px fixed */
        align-items: start;
    }

    /* Featured image: portrait 523x654, cover. */
    body.is-journal-detail .wume-jd-featured {
        width: 100%;
        max-width: 523px;
        height: auto;
        aspect-ratio: 523 / 654;   /* was width:523px height:654px — responsive so it shrinks with its column */
        margin: 0;
        overflow: hidden;
        background: var(--wume-sand);
    }
    body.is-journal-detail .wume-jd-featured img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Body column. */
    body.is-journal-detail .wume-jd-body {
        min-width: 0;
        max-width: 582px;
    }
    body.is-journal-detail .wume-jd-body > p,
    body.is-journal-detail .wume-jd-body > h2 {
        max-width: 582px;
    }

    /* First paragraph = large serif lead. */
    body.is-journal-detail .wume-jd-body > p:first-child {
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading);
        font-size: 1.9rem;
        line-height: var(--wume-lead-heading);
        letter-spacing: var(--wume-tracking-heading);
        color: var(--wume-black);
        margin: 0 0 32px;
    }

    /* ── Bottom FAQ section: 2-col grid — left serif "FAQ" heading + right
       582px column (accordion + assets). Drop the centered base alignment. ── */
    body.is-journal-detail .wume-jd-faq {
        background: var(--wume-cream);
    }
    body.is-journal-detail .wume-jd-faq-grid {
        display: grid;
        grid-template-columns: minmax(0, 691px) minmax(0, 582px);   /* was 691px 582px — fixed cols overflowed 992-1440px */
        grid-template-rows: auto auto;
        column-gap: 0;
        align-items: start;
    }
    body.is-journal-detail .wume-jd-faq-heading {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 40px;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading);
        font-size: 1.9rem;
        line-height: var(--wume-lead-heading);
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        color: var(--wume-black);
        text-align: left;
    }
    body.is-journal-detail .wume-jd-faq-col {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }

    /* Borderless +/- accordion (mirrors the faq.css pattern). Rows are
       border-bottom only, transparent (no sand fill). ── */
    body.is-journal-detail .wume-jd-accordion .accordion-item {
        border: 0;
        border-bottom: 1px solid #989693;
        border-radius: 0;
        margin-bottom: 0;
        background: transparent;
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button {
        position: relative;
        background: transparent;
        color: var(--wume-black);
        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;
        padding: 21px 40px 21px 0;
        box-shadow: none;
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button:not(.collapsed) {
        background: transparent;
        color: var(--wume-black);
        box-shadow: none;
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button:focus {
        box-shadow: none;
        outline: none;
    }
    /* +/- glyph far right (replaces Bootstrap chevron). */
    body.is-journal-detail .wume-jd-accordion .accordion-button::after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        margin: 0;
        background-image: none;
        content: "+";
        font-family: var(--wume-font-body);
        font-weight: 300;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--wume-black);
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button:not(.collapsed)::after {
        background-image: none;
        transform: translateY(-50%);
        content: "\2212"; /* minus sign */
    }
    body.is-journal-detail .wume-jd-accordion .accordion-body {
        background: transparent;
        color: var(--wume-text-on-cream);
        line-height: var(--wume-lead-body);
        padding: 4px 40px 24px 0;
    }

    /* ── Landscape editorial photo (right column, 582 wide). ── */
    body.is-journal-detail .wume-jd-editorial-photo {
        width: 100%;
        max-width: 582px;
        margin: 56px 0 0;
        overflow: hidden;
        background: var(--wume-sand);
    }
    body.is-journal-detail .wume-jd-editorial-photo .wume-img-placeholder {
        width: 100%;
        aspect-ratio: 582 / 620;
        min-height: 0;
    }
    body.is-journal-detail .wume-jd-editorial-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* ── Product callout (right column): 333x450 bottle swatch + name / WUME /
       $214 label left-aligned beneath. ── */
    body.is-journal-detail .wume-jd-product {
        margin: 56px 0 0;
    }
    body.is-journal-detail .wume-jd-product-img {
        width: 333px;
        height: 450px;
        overflow: hidden;
        background: var(--wume-sand);
    }
    body.is-journal-detail .wume-jd-product-img.wume-img-placeholder {
        min-height: 0;
    }
    body.is-journal-detail .wume-jd-product-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    body.is-journal-detail .wume-jd-product-name {
        margin: 16px 0 4px;
        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-black);
    }
    body.is-journal-detail .wume-jd-product-brand {
        margin: 0 0 4px;
        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-lbrown);
    }
    body.is-journal-detail .wume-jd-product-price {
        margin: 0;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-body);
        font-size: 0.85rem;
        color: var(--wume-black);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   STAGE-2b MOBILE (<=991.98px, target 393px) — figma-final/screens/mobile/
   journal-detail.png. Every rule is scoped `body.is-journal-detail` so no
   other page is touched, and this whole block sits BELOW the @min-width:992px
   desktop block above, so desktop stays byte-identical.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* Page gutter = 24px (figma img/text edge x=24). Overrides the shared
       wume.css `.wume-x { padding:0 20px }` for this page only. */
    body.is-journal-detail .wume-hero .wume-x,
    body.is-journal-detail .wume-jd-faq .wume-x {
        padding: 0 24px;
    }

    /* ── HERO band: sand at the top (meta + title), hard step to cream behind
       the featured image. Figma sand runs page-top -> ~y311; the hero element
       begins at page top, so the gradient stop sits at ~305px. Left-aligned;
       override the centered cream base + the wume.css mobile hero padding. ── */
    body.is-journal-detail .wume-hero {
        background: linear-gradient(180deg,
            var(--wume-sand) 0,
            var(--wume-sand) 305px,
            var(--wume-cream) 305px);
        color: var(--wume-text-on-sand);
        text-align: left;
        padding: 88px 0 0;
    }

    /* Hero inner is a vertical flex so the meta row can be re-ordered BELOW the
       serif title (figma: title first, then "FROM THE DESK..." + date). */
    body.is-journal-detail .wume-hero .wume-x {
        display: flex;
        flex-direction: column;
    }

    /* Title first (order 0). Figma cap height ~24px -> ~2.1rem. Left at gutter. */
    body.is-journal-detail .wume-hero-title {
        order: 0;
        margin: 0;
        max-width: none;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 2.1rem;
        line-height: 1.1;
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        color: var(--wume-black);
    }

    /* Meta row second (order 1), pushed down under the title. Kicker left
       (wraps to 2 lines), date right — space-between. */
    body.is-journal-detail .wume-jd-meta {
        order: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin: 96px 0 0;
    }
    body.is-journal-detail .wume-jd-meta .wume-hero-tagline {
        margin: 0;
        max-width: 150px;            /* wrap "FROM THE DESK / OF DR. WU" */
        text-align: left;
        color: var(--wume-black);
    }
    body.is-journal-detail .wume-jd-meta .wume-hero-subtitle {
        margin: 0;
        max-width: none;
        white-space: nowrap;
        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;
        line-height: 1.2;
        text-align: right;
        color: var(--wume-black);
    }

    /* ── Featured image + body: single column. The grid wrapper is order 2,
       sits on cream; image full content-width (figma 345x430). ── */
    body.is-journal-detail .wume-jd-grid {
        order: 2;
        display: block;
        margin-top: 30px;            /* sand-end(311) -> image-top(341) */
    }
    body.is-journal-detail .wume-jd-featured {
        width: 100%;
        height: auto;
        aspect-ratio: 345 / 430;
        margin: 0;
        overflow: hidden;
        background: var(--wume-sand);
    }
    body.is-journal-detail .wume-jd-featured img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Body column: full-width at the gutter. Kill the .wume-article-body
       720px center-cap + its extra 1.25rem mobile padding (the .wume-x already
       supplies the 24px gutter). */
    body.is-journal-detail .wume-jd-body.wume-article-body {
        max-width: none;
        margin: 28px 0 0;            /* image-bottom -> lead */
        padding: 0;
        text-align: left;
    }
    body.is-journal-detail .wume-jd-body > p,
    body.is-journal-detail .wume-jd-body > h2 {
        max-width: none;
    }

    /* First paragraph = serif lead (figma cap ~19px -> ~1.7rem). */
    body.is-journal-detail .wume-jd-body > p:first-child {
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading);
        font-size: 1.7rem;
        line-height: 1.25;
        letter-spacing: var(--wume-tracking-heading);
        color: var(--wume-black);
        margin: 0 0 24px;
    }

    /* ── FAQ section (cream). Stack: serif "FAQ" heading, +/- accordion,
       editorial photo, product callout. ── */
    body.is-journal-detail .wume-jd-faq {
        background: var(--wume-cream);
    }
    body.is-journal-detail .wume-jd-faq-grid {
        display: block;
    }
    body.is-journal-detail .wume-jd-faq-heading {
        margin: 0 0 24px;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading);
        font-size: 2.1rem;
        line-height: 1.1;
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        text-align: left;
        color: var(--wume-black);
    }

    /* Borderless +/- accordion — restate (desktop rules live behind
       @min-width:992). Rows: border-bottom hairline only, transparent,
       uppercase caps question, "+" glyph far right. */
    body.is-journal-detail .wume-jd-accordion .accordion-item {
        border: 0;
        border-bottom: 1px solid #989693;
        border-radius: 0;
        margin-bottom: 0;
        background: transparent;
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button {
        position: relative;
        background: transparent;
        color: var(--wume-black);
        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;
        line-height: 1.35;
        padding: 18px 36px 18px 0;
        box-shadow: none;
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button:not(.collapsed) {
        background: transparent;
        color: var(--wume-black);
        box-shadow: none;
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button:focus {
        box-shadow: none;
        outline: none;
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button::after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        margin: 0;
        background-image: none;
        content: "+";
        font-family: var(--wume-font-body);
        font-weight: 300;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--wume-black);
    }
    body.is-journal-detail .wume-jd-accordion .accordion-button:not(.collapsed)::after {
        background-image: none;
        transform: translateY(-50%);
        content: "\2212";            /* minus */
    }
    body.is-journal-detail .wume-jd-accordion .accordion-body {
        background: transparent;
        color: var(--wume-text-on-cream);
        line-height: var(--wume-lead-body);
        padding: 4px 36px 22px 0;
    }

    /* ── Editorial photo: full content-width, figma aspect 345/430. Override
       the IMG inline aspect-ratio:582/620 + height:auto. ── */
    body.is-journal-detail .wume-jd-editorial-photo {
        width: 100%;
        margin: 36px 0 0;
        overflow: hidden;
        background: var(--wume-sand);
    }
    body.is-journal-detail .wume-jd-editorial-photo img {
        width: 100%;
        height: auto;
        aspect-ratio: 345 / 430 !important;
        object-fit: cover;
        display: block;
    }

    /* ── Product callout: small 168px-wide swatch (figma 168x287) left-aligned,
       name / WUME / $214 beneath. ── */
    body.is-journal-detail .wume-jd-product {
        margin: 20px 0 0;
    }
    body.is-journal-detail .wume-jd-product-img {
        width: 168px;
        height: auto;
        aspect-ratio: 168 / 287;
        overflow: hidden;
        background: var(--wume-sand);
    }
    body.is-journal-detail .wume-jd-product-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    body.is-journal-detail .wume-jd-product-name {
        margin: 16px 0 4px;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.82rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        line-height: 1.3;
        color: var(--wume-black);
    }
    body.is-journal-detail .wume-jd-product-brand {
        margin: 0 0 6px;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.74rem;
        letter-spacing: var(--wume-tracking-caps);
        text-transform: uppercase;
        color: var(--wume-lbrown);
    }
    body.is-journal-detail .wume-jd-product-price {
        margin: 0;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-body);
        font-size: 0.85rem;
        color: var(--wume-black);
    }
}