/*
   WUME — Search page Stage-2 layout overrides (DESKTOP + MOBILE).

   SCOPE: every rule is prefixed `body.is-search-page`. The DESKTOP rules live
   in the single `@media (min-width: 992px)` block; the MOBILE rules live in the
   separate `@media (max-width: 991.98px)` block at the bottom of this file. The
   two breakpoints never overlap, so editing the mobile block leaves desktop
   byte-identical and vice-versa. This file is loaded only by
   templates/pages/search.html.twig (block head).

   DESKTOP figma ref: figma-final/screens/desktop/search.png (1440 wide).
   Two-column cream hero: LEFT "Search" serif heading over a borderless
   hairline-underline input (~846px, 1px bottom border only — no box, no
   button); RIGHT "POPULAR SEARCHES" kicker over a vertical, left-aligned,
   uppercase suggestion list (gap ~13px). Below the hero, a full-bleed olive
   photo gallery band (asset pending).

   MOBILE figma ref: figma-final/screens/mobile/search.png (393 wide, PIL-measured).
   Single left-aligned cream column: the field's own serif "Search" placeholder
   over a 1px hairline underline (x26→370) with a right-arrow submit pinned to
   the right end (cap top y145, underline y179); then a large fixed gap drops
   "POPULAR SEARCHES" (gray kicker, cap y544) + a BOLD black uppercase vertical
   suggestion list (37px row pitch, GLP-1 y591 … PCOS y776) to the lower portion
   of the first viewport. No photo band on mobile (the desktop band stays
   d-none d-lg-block; the figma mobile frame has none).

   V01 — initial Stage-2 desktop layout.
   V02 — desktop finish: container max-width 1200->1440 + 36px gutters;
         suggestions packed flex-start; left col fixed 846px; heading #71706A;
         underline #94908A; kicker #5B5852; olive photo band placeholder
         (#61665A, 528px min-height).
   V03 — wired the gallery: .wume-photo-band -> flex row of 5 photos (470px tall,
         object-fit cover) on the olive ground + top-right founder caption.
   V04 — Stage-2b MOBILE block appended (@max-width 991.98px): single-column
         hairline search field with visible serif "Search" placeholder + arrow
         submit; bottom-anchored bold "POPULAR SEARCHES" list. Desktop untouched.
   V05 — mobile spacing tuned to 393px screenshot diff vs figma (all hero
         segments now within ±1px): hero top pad 48px; field padding-bottom 5px +
         arrow bottom 5px (cap→underline ≈33px); aside margin-top 350px
         (field→kicker ≈365px); kicker margin-bottom 30px; suggestion gap 23px
         (37px row pitch); suggestion text-decoration:none.
   V06 — mobile background → sand (var(--wume-sand) #E3DDCD) per figma mobile
         search frame; live was inheriting the default cream. Page + hero ground.
   V07 — desktop hero overflow fix: the left column was flex:0 0 846px (fixed, no shrink), so at
         992-1440px the 846px column + gap + aside overflowed -> tablet shrink-to-fit. Now
         flex:0 1 846px (still 846 at 1440, shrinks below). Page CSS ?v 8->9.
*/

@media (min-width: 992px) {

    /* ── Hero: 2-column on cream. Left = heading + hairline input, right =
       popular searches list. Top padding tightened 120 -> 64px. ── */
    body.is-search-page .wume-hero {
        text-align: left;
        padding: 64px 0 100px;
    }
    body.is-search-page .wume-hero .container {
        max-width: 1440px;
        padding: 0 36px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 48px;
    }

    /* Left column holds the heading + input; grows to take the wide side. */
    body.is-search-page .wume-search-hero-main {
        flex: 0 1 846px;          /* was 0 0 846px — fixed width overflowed 992-1440px; now shrinks to fit */
        min-width: 0;
        max-width: 846px;
    }

    /* "Search" — left-aligned plain serif (override the centered base
       .wume-hero-title from wume.css). ~2rem per spec. */
    body.is-search-page .wume-hero-title {
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 2rem;
        line-height: var(--wume-lead-heading);
        letter-spacing: var(--wume-tracking-heading);
        text-transform: none;
        text-align: left;
        color: #71706A;
        margin: 0 0 20px;
    }

    /* Input row: no longer a flex row with a button — the input alone, full
       width of the left column. */
    body.is-search-page .wume-search-input-row {
        display: block;
        margin: 0;
    }

    /* Borderless hairline-underline input — only a 1px bottom border, ~846px
       wide. Strips the bootstrap .form-control box, shadow and radius. */
    body.is-search-page .wume-search-input-row .form-control {
        width: 100%;
        max-width: 846px;
        border: 0;
        border-bottom: 1px solid #94908A;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0 0 12px;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 1.5rem;
        line-height: 1.2;
        color: var(--wume-black);
    }
    body.is-search-page .wume-search-input-row .form-control::placeholder {
        color: transparent;
    }
    body.is-search-page .wume-search-input-row .form-control:focus {
        border-bottom-color: var(--wume-black);
        background: transparent;
        box-shadow: none;
        outline: none;
    }

    /* Right column: "POPULAR SEARCHES" kicker + vertical suggestion list. */
    body.is-search-page .wume-search-hero-aside {
        flex: 0 0 auto;
        text-align: left;
    }
    body.is-search-page .wume-search-hero-aside .wume-hero-tagline {
        margin: 0 0 20px;
        text-align: left;
        color: #5B5852;
    }

    /* Suggestions stack vertically, left-aligned, uppercase, gap ~13px. */
    body.is-search-page .wume-search-suggestions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    body.is-search-page .wume-search-suggestion {
        text-transform: uppercase;
        letter-spacing: var(--wume-tracking-caps);
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.78rem;
        color: var(--wume-black);
    }

    /* Olive photo gallery band (figma y496-1024): 5 portrait photos in a row on
       the olive ground, with the founder caption pinned top-right. */
    body.is-search-page .wume-photo-band {
        min-height: 528px;
        background: #61665A;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px 36px;
        position: relative;
    }
    body.is-search-page .wume-photo-band img {
        flex: 1 1 0;
        min-width: 0;
        height: 470px;
        object-fit: cover;
        display: block;
    }
    body.is-search-page .wume-photo-band-caption {
        position: absolute;
        top: 28px;
        right: 36px;
        margin: 0;
        text-align: right;
        text-transform: uppercase;
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
        line-height: 1.4;
        color: var(--wume-cream);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Stage-2b — MOBILE (≤991.98px, target 393px). PIL-measured from
   figma-final/screens/mobile/search.png. Single left-aligned cream column:
   hairline "Search" field + arrow near the top, then a large fixed gap, then a
   bottom-anchored bold "POPULAR SEARCHES" list. These rules override the
   generic <992 .wume-search-* rules in wume.css via the body.is-search-page
   prefix (higher specificity).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* Figma mobile search sits on SAND (#E3DDCD), not the default cream. Set the
       page ground so the area behind the translucent navbar reads sand too. */
    body.is-search-page { background-color: var(--wume-sand); }

    /* Sand hero, left-aligned. Top pad lands the "Search" cap ~74px below the
       navbar; bottom pad leaves ~71px under the last suggestion (PCOS). */
    body.is-search-page .wume-hero {
        text-align: left;
        padding: 48px 0 70px;
        background-color: var(--wume-sand);
    }
    /* Single column; the two children (field block + popular block) stack, with
       the gap created by the aside's margin-top below. Page side padding 26px
       to match the figma x26 content edge. */
    body.is-search-page .wume-hero .container {
        display: block;
        max-width: none;
        padding: 0 24px 0 26px;
    }

    /* ── Field block ──────────────────────────────────────────────────────
       The desktop <h1>"Search" is hidden here (d-none d-lg-block in template);
       the field's own serif placeholder is the visible "Search" label. */
    body.is-search-page .wume-search-hero-main {
        margin: 0;
    }

    /* Form is the positioning context for the absolutely-pinned arrow. */
    body.is-search-page .wume-search-input-row {
        display: block;
        position: relative;
        margin: 0;
    }

    /* Borderless hairline field — 1px bottom border only (#94908A), serif text,
       visible gray "Search" placeholder. Right padding clears the arrow. */
    body.is-search-page .wume-search-input-row .form-control {
        width: 100%;
        border: 0;
        border-bottom: 1px solid #94908A;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0 44px 5px 0;
        font-family: var(--wume-font-heading);
        font-weight: var(--wume-w-heading-display);
        font-size: 1.75rem;
        line-height: 1.1;
        color: var(--wume-black);
    }
    body.is-search-page .wume-search-input-row .form-control::placeholder {
        color: #716E66;
        opacity: 1;
    }
    body.is-search-page .wume-search-input-row .form-control:focus {
        border-bottom-color: var(--wume-black);
        background: transparent;
        box-shadow: none;
        outline: none;
    }

    /* Right-arrow submit — pinned to the right end, vertically centered on the
       placeholder line. Black, borderless, ~24px glyph. */
    body.is-search-page .wume-search-arrow {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 5px; /* matches the field's padding-bottom so it sits on the text line, not the underline */
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 40px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        color: var(--wume-black);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    /* ── Popular searches block ───────────────────────────────────────────
       Pushed down by margin-top to reproduce the large figma gap (underline
       y179 → kicker cap y544 ≈ 365px). */
    body.is-search-page .wume-search-hero-aside {
        margin-top: 361px;
        text-align: left;
    }

    /* Kicker: gray, uppercase, small. ~43px above the first suggestion. */
    body.is-search-page .wume-search-hero-aside .wume-hero-tagline {
        margin: 0 0 30px;
        text-align: left;
        color: #8E8980;
        font-size: 0.72rem;
        letter-spacing: var(--wume-tracking-caps);
    }

    /* Suggestions: vertical, left-aligned, BOLD black, uppercase, ~37px row
       pitch. Override the wume.css <992 flex-wrap default. */
    body.is-search-page .wume-search-suggestions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 23px;
    }
    body.is-search-page .wume-search-suggestion {
        text-transform: uppercase;
        letter-spacing: var(--wume-tracking-caps);
        font-family: var(--wume-font-body);
        font-weight: 700;
        font-size: 0.875rem;
        line-height: 1;
        color: var(--wume-black);
        text-decoration: none;
    }
}