/*
   WUME — Journal index ("The Doctoral Digest") Stage-2 DESKTOP layout overrides.

   SCOPE: every rule is prefixed `body.is-journal-page` AND lives inside the
   single `@media (min-width: 992px)` block below, so the synced MOBILE view
   (<992px — the current single-column stacked card list) is left completely
   unchanged. This file is loaded only by templates/pages/journal.html.twig
   (block head). All shared `.wume-doctor-digest-*` overrides are scoped under
   body.is-journal-page so the home page's shared card component is NOT changed.

   Figma ref: figma-final/screens/desktop/journal.png (1440 wide). Compact
   left-aligned serif hero; horizontal text-tab filter row with hairline
   underline + sage active underline; 2-column grid of sand cards, each a
   2-column layout (image LEFT ~251px aspect 251/362, date top-right, title
   bottom-right); numbered 1..6 pagination + arrow (replaces "Load More").

   V01 — initial Stage-2 desktop layout.
   V02 — desktop finish: tab gap 32->54px; filter hairline rgba .15->.5; card
         title left-aligned + 1.8rem, date 0.78rem; pagination gap 24->18,
         digit 0.78rem, active = 28px sand box, arrow = 28px bordered box.
   V03 — Stage-2b MOBILE layout (<=991.98px, target 393px), appended as a
         SEPARATE @media (max-width:991.98px) block after the desktop block;
         desktop (>=992px) byte-identical. Built to pixel-match
         figma-final/screens/mobile/journal.png (393 wide). Hero left-aligned
         ~2.25rem; filter tabs become a single horizontal nowrap row (h-scroll)
         with hairline border-bottom + sage active underline (overrides the
         wume.css wrap-row rule); each card keeps the desktop 2-col layout
         scaled to phone — sand ground, image LEFT 158px (aspect 158/265),
         text RIGHT with date pinned top-right + title pinned bottom-left;
         numbered "1 2 3 … 6 ->" pagination styled (it rendered unstyled
         below 992 before). Every rule scoped body.is-journal-page so the
         shared home digest card is untouched.
*/

@media (min-width: 992px) {

    /* ── Hero: compact + left-aligned serif title (override centered base
       .wume-hero / .wume-hero-title from wume.css). ── */
    body.is-journal-page .wume-hero {
        text-align: left;
        padding: 67px 0 90px;
    }
    body.is-journal-page .wume-hero-title {
        font-size: 3.5rem;
        line-height: 1.05;
        margin-bottom: 0;
    }

    /* ── Filter tabs: horizontal text-tab row (no pill chrome) with a hairline
       border-bottom under the whole row; active tab gets a sage underline. ── */
    body.is-journal-page .wume-pill-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 54px;
        align-items: flex-end;
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        padding-bottom: 14px;
        margin-bottom: 40px;
    }
    body.is-journal-page .wume-pill {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0 0 14px;
        margin-bottom: -15px;            /* drop the active underline onto the row hairline */
        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);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        transition: color 0.2s ease, border-color 0.2s ease;
    }
    body.is-journal-page .wume-pill:hover {
        color: var(--wume-lbrown);
    }
    body.is-journal-page .wume-pill.is-active {
        color: var(--wume-black);
        border-bottom-color: var(--wume-sage);
    }

    /* ── Article grid: two columns, tight gap. Scoped to this page so the
       home page's 4-up shared grid is untouched. ── */
    body.is-journal-page .wume-doctor-digest-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 13px;
    }

    /* ── Card: 2-column layout — image LEFT (~251px), text column RIGHT on a
       sand background. Date pins top-right, title pins bottom-right. ── */
    body.is-journal-page .wume-doctor-digest-card {
        display: grid;
        grid-template-columns: 251px 1fr;
        gap: 16px;
        background: var(--wume-sand);
        padding: 21px 16px;
    }
    body.is-journal-page .wume-doctor-digest-card-image {
        aspect-ratio: 251 / 362;
        margin-bottom: 0;
        align-self: start;
    }
    /* Right text column: date top, title bottom (flex-column space-between). */
    body.is-journal-page .wume-doctor-digest-card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
        height: 100%;
    }
    body.is-journal-page .wume-doctor-digest-card-date {
        margin: 0;
        order: 0;
        font-size: 0.78rem;
    }
    body.is-journal-page .wume-doctor-digest-card-title {
        margin: 0;
        order: 1;
        text-align: left;
        font-size: 1.8rem;
    }

    /* ── Pagination: numbered 1..6 + arrow, replacing the "Load More" button. ── */
    body.is-journal-page .wume-journal-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin-top: 56px;
    }
    body.is-journal-page .wume-journal-page {
        background: transparent;
        border: 0;
        padding: 0;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.78rem;
        letter-spacing: var(--wume-tracking-caps);
        color: var(--wume-black);
        cursor: pointer;
        line-height: 1;
        transition: color 0.2s ease;
    }
    body.is-journal-page .wume-journal-page:hover {
        color: var(--wume-lbrown);
    }
    body.is-journal-page .wume-journal-page.is-active {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--wume-sand);
    }
    body.is-journal-page .wume-journal-page-arrow {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(0, 0, 0, 0.3);
        font-size: 0.9rem;
        line-height: 1;
    }

}

/* ════════════════════════════════════════════════════════════════════════
   STAGE-2b — MOBILE (<=991.98px, target 393px)
   Pixel-matched to figma-final/screens/mobile/journal.png. All rules scoped
   body.is-journal-page so the shared home digest card stays untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* ── Hero: left-aligned compact serif title (override the centered base
       .wume-hero + the wume.css mobile clamp on .wume-hero-title). Figma cap
       height ~25px -> ~2.25rem. ── */
    body.is-journal-page .wume-hero {
        text-align: left;
        padding: 40px 0 30px;
    }
    body.is-journal-page .wume-hero-title {
        font-size: 2.25rem;
        line-height: 1.05;
        margin-bottom: 0;
    }

    /* ── Filter tabs: ONE horizontal nowrap row that scrolls sideways (6 tabs
       overflow 345px), with a full-width hairline border-bottom and a sage
       underline on the active tab. Overrides the wume.css <992 wrap rule
       (flex-wrap:wrap, centered, pill padding) so the desktop bare-tab look
       carries to phone. ── */
    body.is-journal-page .wume-pill-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 28px;
        align-items: flex-end;
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        padding-bottom: 12px;
        margin-bottom: 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;            /* Firefox: hide the scrollbar */
    }
    body.is-journal-page .wume-pill-row::-webkit-scrollbar {
        display: none;                    /* WebKit: hide the scrollbar */
    }
    body.is-journal-page .wume-pill {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0 0 12px;
        margin-bottom: -13px;             /* drop the active underline onto the row hairline */
        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);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    body.is-journal-page .wume-pill.is-active {
        color: var(--wume-black);
        border-bottom-color: var(--wume-sage);
    }

    /* ── Article grid: single column, 11px gap between cards (figma pitch
       299 = 288 card + 11 gap). Base wume.css already sets 1fr; we only
       tighten the gap. ── */
    body.is-journal-page .wume-doctor-digest-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    /* ── Card: keep the desktop 2-col composition scaled to phone — sand
       ground, image LEFT (158px, aspect 158/265), text column RIGHT with the
       date pinned top-right and the title pinned bottom-left. ── */
    body.is-journal-page .wume-doctor-digest-card {
        display: grid;
        grid-template-columns: 158px 1fr;
        gap: 14px;
        background: var(--wume-sand);
        padding: 12px 9px;
    }
    body.is-journal-page .wume-doctor-digest-card-image {
        aspect-ratio: 158 / 265;
        margin-bottom: 0;
        align-self: start;
    }
    body.is-journal-page .wume-doctor-digest-card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;                /* date sits top-right */
        height: 100%;
    }
    body.is-journal-page .wume-doctor-digest-card-date {
        margin: 0;
        order: 0;
        font-size: 0.72rem;
    }
    body.is-journal-page .wume-doctor-digest-card-title {
        margin: 0;
        order: 1;
        text-align: left;                 /* title sits bottom-left */
        font-size: 1.35rem;
        line-height: 1.25;
    }

    /* ── Pagination: numbered "1 2 3 … 6 ->" centered. The desktop block lives
       behind @min-width:992 so below 992 this rendered as bare unstyled
       buttons; restate the styling here. ── */
    body.is-journal-page .wume-journal-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin-top: 40px;
    }
    body.is-journal-page .wume-journal-page {
        background: transparent;
        border: 0;
        padding: 0;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.78rem;
        letter-spacing: var(--wume-tracking-caps);
        color: var(--wume-black);
        cursor: pointer;
        line-height: 1;
    }
    body.is-journal-page .wume-journal-page.is-active {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--wume-sand);
    }
    body.is-journal-page .wume-journal-ellipsis {
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.78rem;
        letter-spacing: var(--wume-tracking-caps);
        color: var(--wume-black);
        line-height: 1;
    }
    body.is-journal-page .wume-journal-page-arrow {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(0, 0, 0, 0.3);
        font-size: 0.9rem;
        line-height: 1;
    }

}