/**
 * v3 careerweb — all responsive overrides, consolidated.
 *
 * Per CLAUDE.md convention, every @media rule lives here regardless of
 * which component it targets. Components ship desktop-first; this file
 * narrows them down across three breakpoints:
 *   - 1100px : tighter horizontal padding, narrower list column
 *   - 920px  : icon-only collapses (filters label, nav-location label,
 *              phone-label) — keeps the bar usable on tablets
 *   - 860px  : full mobile layout — single column, list-then-detail
 *              swap, bottom-sheet filters, sticky-detail-open helpers
 */

/* ─── ≤ 1100px : narrower grid + body inset ─── */
@media (max-width: 1100px) {
    .main {
        grid-template-columns: 360px 1fr;
        padding: 16px 20px 20px;
    }
    .nav, .results-meta {
        padding-left: 20px;
        padding-right: 20px;
    }
    .detail-hero, .detail-body, .apply-bar {
        padding-left: 24px;
        padding-right: 24px;
    }
    .detail-title-row { padding-right: 130px; }

    /* Banner-hero ignores its own padding — banner is full-bleed, the
       glass card's margin handles alignment with the body content
       below. Without this override hero-padding (24px) + card-margin
       (24px) = 48px total inset, which doesn't match the body's 24px.
       The card's margin/padding/width now scale via clamp() in
       detail.css so we no longer need the fixed 22px/24px override
       here. */
    .detail-hero--has-banner {
        padding-left: 0;
        padding-right: 0;
    }

    /* Step down from 4 highlights to 3 between the mobile breakpoint
       (≤860px shows 2) and the wider desktop (>1100px shows 4). At
       ~900-1100px the detail column is ~560-720px wide; four cells
       each get ~140-180px which forces ellipsis on longer values. */
    .hero-highlight[data-pos="3"] { display: none; }

    .nav { gap: 12px; }
    .nav-search { max-width: none; }
}

/* ─── ≤ 1000px : narrow desktop drops to 2 highlights ───
   Between mobile (≤860, shows 2) and the 1100-step (shows 3), the
   detail column is ~440-560px and chips with wide pay / location
   values overflow the glass card right edge when three are shown.
   Drop to 2 here so the strip stays clean; the third value is still
   visible in the Key Details section below. */
@media (min-width: 861px) and (max-width: 1000px) {
    .hero-highlight[data-pos="2"] { display: none; }
}

/* ─── ≤ 920px : icon-only nav collapses ─── */
@media (max-width: 920px) {
    .filters-btn-label { display: none; }
    .filters-btn { padding: 0 12px; }
    .nav-location-label { display: none; }
    /* .nav-phone-label stays visible on mobile per VP review 2026-05-28
       — users tapping a phone icon with no copy didn't realise the
       button was dialable. The "Call" label costs ~30px and confirms
       the affordance. */
    .nav-phone { padding: 0 12px; }
}

/* ─── ≤ 860px : mobile layout, list-then-detail swap ─── */
@media (max-width: 860px) {
    .main {
        grid-template-columns: 1fr;
        padding-bottom: 16px;
    }
    .joblist-wrap {
        position: relative;
        top: 0;
        max-height: none;
        /* Reserve viewport space below the last card + load-more button
           so the fixed bottom CTA bar (≈ 70px + safe-area) doesn't
           overlay them. Mirrors the .detail-body rule in mobile-cta.css
           that does the same for the detail panel. */
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
    .nav-location { padding: 0 10px 0 12px; }
    .apply-fields { grid-template-columns: 1fr; }
    .chat-drawer { width: calc(100vw - 32px); right: 16px; left: 16px; }
    .detail-title { font-size: 22px; }
    /* .pay-display rules removed — pay is now a chip inside the subtitle
       row (see .pay-chip in detail.css), no mobile size override needed. */

    /* Mobile detail panel — tighten the outer body padding so the
       inner cards (apply-section, key-details, section-richtext)
       have room to breathe. At 390px viewport the 24px desktop
       padding + 32px apply-section padding combined ate 112px of
       horizontal space leaving form fields ~278px wide. */
    .detail-body { padding-left: 16px; padding-right: 16px; }
    .apply-section { padding: 22px 18px 24px; }
    .apply-section-intro { margin-bottom: 18px; }
    .cwv3-apply-form .form-page { gap: 12px; }

    /* Tighten editorial slab on mobile — desktop padding (32px) eats
       too much of a 390px viewport once the 24px body padding lands
       on top, leaving the prose with a ~250px measure. Drop slab
       padding so the body copy can breathe. */
    .section-richtext {
        padding: 22px 18px 22px 20px;
        font-size: 15px;
        line-height: 1.68;
        border-radius: var(--radius);
    }
    .section-richtext p > strong:only-child {
        font-size: 11px;
        letter-spacing: 0.12em;
    }
    .section-richtext h2 { font-size: 16.5px; }
    .section-richtext h3 { font-size: 15px; }
    .section-richtext h4 { font-size: 14px; }
    .section-prose {
        font-size: 16px;
        padding-left: 14px;
    }
    .section-title { font-size: 10.5px; letter-spacing: 0.16em; }
    /* Keep location + sort on a single row even on the narrowest
       phones. They were wrapping because location (~163px) + sort
       (~184px) + gap > 350px inner width; trimming the "Sort:" label
       buys us back ~32px so the row fits comfortably. */
    .results-meta { flex-wrap: nowrap; gap: 8px; }
    .results-meta .sort-label { display: none; }

    /* Nav wraps to two rows: actions on top, search full-width below.
       --nav-h is bumped so results-meta (sticky below the nav) lands
       under the wrapped layout, not behind it. The number is the
       sum of: 12px padding-top + 44px logo-row + 10px row-gap +
       42px search-input + 12px padding-bottom + 1px border ≈ 121px. */
    :root { --nav-h: 121px; }
    .nav {
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 12px 16px;
    }
    .nav-search {
        display: block;
        order: 99;
        flex-basis: 100%;
        max-width: none;
    }
    .nav-search input {
        height: 42px;
        /* Reserve room on the right for the embedded filter button —
           36px button + 4px gap + 4px button inset = 44px. */
        padding-right: 48px;
    }
    /* Show the embedded filter and hide the row-1 standalone one so
       the filter affordance moves into the search bar on mobile. */
    .nav-search-filter { display: inline-flex; }
    .filters-btn { display: none; }

    /* nav-phone right-alignment + empty .nav-actions hide live in
       nav.css now — applies to both desktop and mobile from a single
       base rule. */

    /* List-then-detail navigation: list visible by default, detail
       hidden. Tapping a card adds body.mobile-detail-open and swaps. */
    .detail {
        display: none;
        border-radius: 0;
        border: none;
    }
    body.mobile-detail-open .nav,
    body.mobile-detail-open .joblist-wrap,
    body.mobile-detail-open .results-meta { display: none; }
    body.mobile-detail-open .detail { display: block; }
    body.mobile-detail-open .main {
        padding: 0;
        max-width: none;
    }

    /* App-shell layout for the mobile detail view.
       The list page uses a regular body scroll and that works fine. The
       detail page additionally carries a fixed-bottom CTA bar, and on
       Android Chrome / iOS Safari `position: fixed; bottom: 0` is anchored
       to the layout viewport — when the URL bar collapses or the visual
       viewport changes underneath, the bar mis-positions briefly and the
       sticky back-bar at the top can slide under the OS status bar in
       the same window.

       Constraining body to 100dvh and turning it into a flex column
       gives every chrome element a stable slot: nav rows (hidden here),
       .app fills the middle, #cwv3-mcta is the last flex child. Inside
       .app the same pattern repeats — .main / .detail flex-column with
       .detail-back-bar pinned to the top and .detail-body scrolling in
       the middle. The CTA becomes a flex item at the bottom of body
       instead of a viewport-anchored fixed bar.

       Tradeoff: Chrome Android won't auto-collapse its URL bar when the
       active scroll container is nested (.detail-body), so the URL bar
       stays visible. That's the standard app-shell tradeoff and matches
       how Indeed / LinkedIn / Gmail mobile behave. */
    body.mobile-detail-open {
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* `min-width: 0` is load-bearing on every nested flex column:
       flex items default to `min-width: auto` which means "no smaller
       than the child's min-content size." The banner sets aspect-ratio
       + min-height which gives it a min-content width of 320 × 4/3 =
       426.67px, and without min-width:0 that floor bubbles up through
       .detail → .main → .app and overflows the viewport. */
    body.mobile-detail-open .app {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    body.mobile-detail-open .main {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        /* The desktop grid set `align-items: start` to top-align the
           list and detail columns. That carries into flex mode and
           tells flex children to size to their natural cross-axis
           width — so .detail's width becomes its content's intrinsic
           min-width, which on tenants with long unbreakable strings
           in the job title forces the whole panel wider than the
           viewport. Forcing stretch lets .detail clamp to the
           viewport width and `overflow-x: hidden` on .detail then
           clips whatever long word remains. */
        align-items: stretch;
    }
    /* .detail itself is the scroll container — the back-bar is sticky
       at top:0 within it, the hero / body / apply-bar all scroll
       through. Earlier draft made the hero a flex sibling of body
       which kept the banner pinned across scrolls, wasting 320px of
       viewport on a never-changing image. Putting the scroll back on
       .detail (with sticky back-bar) gives the standard app-detail
       feel: back stays visible, hero scrolls out, content takes over. */
    body.mobile-detail-open .detail {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    body.mobile-detail-open .detail-back-bar {
        /* Sticky stays — but the scroll container is now .detail,
           which is bounded by the flex column. Earlier diagnosis was
           that fixed-bottom CTA + body-as-scroller was the URL-bar
           interaction killer; sticky-top inside a bounded scroller
           is fine and keeps the back affordance visible mid-scroll. */
        position: sticky;
        top: 0;
        z-index: 15;
    }
    body.mobile-detail-open .detail-body {
        /* CTA sits below this scroll container as a flex sibling of
           .app, so its height doesn't overlap content. Drop the
           viewport-CTA padding compensation. */
        padding-bottom: 16px;
    }
    body.mobile-detail-open .cwv3-mcta {
        position: static;        /* drop fixed — flex item at body bottom */
        flex-shrink: 0;
        box-shadow: 0 -6px 24px rgba(14, 14, 14, 0.08);
    }

    /* On mobile the bottom CTA bar (.cwv3-mcta) carries both chat and
       apply, so the desktop's chat-fab + sticky apply-bar fold into
       that single surface. Hide both at this breakpoint. Desktop is
       unchanged — chat-fab stays bottom-right, .apply-bar stays
       sticky inside the detail pane for apply-start jobs. */
    .chat-fab { display: none; }
    .apply-bar { display: none; }

    /* Cap the apply-form-loading shimmer to the viewport on mobile.
       The pseudo-elements are absolute-positioned inside #detail,
       which on mobile expands to the full content height (~3000px).
       Without this override the shimmer paints a giant blank stripe
       extending past the viewport, including past the chat-fab and
       any other floating affordance. position: fixed scopes it to
       the screen — body.mobile-detail-open already hides the nav /
       list / results-meta so the viewport IS the detail panel. */
    .detail--form-loading::before,
    .detail--form-loading::after {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        inset: 0;
        border-radius: 0;
    }

    /* Bigger tap targets */
    .jobcard { padding: 16px; }
    .load-more { padding: 16px; font-size: 14px; }

    /* iOS safe area for the apply bar */
    .apply-bar { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

    /* Banner hero on mobile — auto height with a 220px floor. The
       earlier `aspect-ratio: 4/3 + min-height` combo derived width
       from height in flex contexts (320 × 4/3 = 426.67px) which
       overflowed the viewport, and a flat `height: 220px` clipped
       the glass card on tenants where a long title / long highlight
       value pushed the card past 220. Auto-height lets the banner
       grow with the glass card content (the card is bottom-aligned
       via `align-items: flex-end` from the base rule), so banner +
       card sizes track each other instead of fighting. The 220px
       floor keeps short-content jobs from looking sparse. */
    .detail-hero--has-banner {
        aspect-ratio: auto;
        height: auto;
        min-height: 220px;
        width: 100%;
    }
    /* Highlight values stay un-clamped per VP — every word matters
       for a candidate scanning the role. The auto-height banner
       above takes the strain: long values just nudge the hero a
       few px taller rather than getting truncated. */
    .detail-hero--has-banner .detail-hero-content {
        margin: 16px 24px 20px;
        padding: 14px 16px;
        /* width is implicit so the mobile card breathes via its
           margins, same pattern as the desktop fluid rule. */
        /* Mobile inherits the desktop --glass-tint var (set by
           detail.js from banner luminance). No gradient override —
           the var-driven tint handles both colourways uniformly. */
    }
    .detail-hero--has-banner .detail-title-row {
        margin-bottom: 8px;
    }
    .detail-hero--has-banner .detail-title {
        /* Fluid type: scales between 15px (narrow phones / very long
           titles) and 19px (roomy phones / short titles). Matches the
           Indeed / LinkedIn / Glassdoor mobile-jobs pattern of
           shrinking the headline so a 60-char title doesn't push the
           glass card past the viewport edge. */
        font-size: clamp(15px, 4.4vw, 19px);
        line-height: 1.25;
        max-width: none;
        margin-bottom: 6px;
        /* Mobile clamps at 3 lines instead of the desktop 2-line
           default — the smaller font + narrower column means a
           reasonable 4-word title can already need 2 lines, and
           leaving the cap at 2 forced premature ellipsis on titles
           that comfortably fit 3 lines. Banner is now auto-height
           so the extra line just nudges the hero a touch taller
           rather than clipping. */
        -webkit-line-clamp: 3;
        /* `anywhere` is the modern superset of `break-word`: when a
           token can't fit even with normal wrapping, break it at any
           character. Combined with the 3-line clamp + ellipsis from
           detail.css this keeps titles bounded no matter how
           pathological the source string. */
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }
    /* Long unbreakable strings inside the key-details (URLs in job
       descriptions, long facility names, unbroken phone formats)
       have the same overflow risk now that the panel is bounded. */
    body.mobile-detail-open .detail-body,
    body.mobile-detail-open .key-detail-value,
    body.mobile-detail-open .section-prose,
    body.mobile-detail-open .section-richtext {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .detail-hero--has-banner .detail-subtitle {
        font-size: 12.5px;
        line-height: 1.4;
    }
    .detail-hero--has-banner .detail-subtitle i {
        font-size: 12px;
    }
    /* .pay-display rules removed — pay is now an inline chip inside
       the subtitle row (see .pay-chip in detail.css). No mobile glass-
       card override needed. */

    /* Hero benefits strip: show only the first 2 cells on mobile —
       4 would crowd the glass card and force ellipsis on everything.
       The full set is still in the "Key details" section below. */
    .hero-highlights {
        margin-top: 12px;
        padding-top: 10px;
        gap: 0;
    }
    .hero-highlight { padding: 0 10px; gap: 8px; }
    .hero-highlight[data-pos="2"],
    .hero-highlight[data-pos="3"] { display: none; }
    .hero-highlight-key { font-size: 9.5px; }
    .hero-highlight-val { font-size: 13px; }
    .hero-highlight-icon { width: 28px; height: 28px; }
    .hero-highlight-icon svg { width: 16px; height: 16px; }

    /* Filters modal → bottom sheet */
    .filters-dialog {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        max-height: 88vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform: translateY(100%) scale(1);
    }
    .filters-modal.open .filters-dialog {
        transform: translateY(0) scale(1);
    }
    /* Drag-handle indicator */
    .filters-header {
        padding-top: 28px;
        position: relative;
    }
    .filters-header::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--border-2);
        border-radius: 2px;
    }
    .filters-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}