/**
 * 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: 0 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; }

    /* Glass card follows the body's 24px horizontal padding here */
    .detail-hero--has-banner .detail-hero-content {
        margin: 22px 24px;
        width: calc(100% - 48px);
    }
    /* 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. */
    .detail-hero--has-banner {
        padding-left: 0;
        padding-right: 0;
    }

    .nav { gap: 12px; }
    .nav-search { max-width: 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 { display: none; }
    .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;
    }
    .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-value { font-size: 28px; }
    /* 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 {
        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; }

    /* 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;
    }

    /* Chat FAB lifted above the sticky apply bar in mobile detail */
    body.mobile-detail-open .chat-fab {
        bottom: calc(94px + env(safe-area-inset-bottom));
    }

    /* 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 — let it scale with viewport. The
       16/5 aspect ratio from the desktop rule is fine for tablets
       but a portrait phone (390px wide) yields ~122px tall which
       crowds the glass card. Switch to a 4/3 aspect on phones so
       the banner reads as a proper hero, and tighten the glass-card
       inset so it stays clear of the backdrop-filter boundary. */
    .detail-hero--has-banner {
        aspect-ratio: 4 / 3;
        min-height: 280px;
        max-height: 360px;
    }
    .detail-hero--has-banner .detail-hero-content {
        margin: 16px 24px 20px;
        padding: 14px 16px;
        width: calc(100% - 48px);
    }
    .detail-hero--has-banner .detail-title-row {
        margin-bottom: 8px;
    }
    .detail-hero--has-banner .detail-title {
        font-size: 19px;
        line-height: 1.25;
        max-width: none;
        margin-bottom: 6px;
    }
    .detail-hero--has-banner .detail-subtitle {
        font-size: 12.5px;
        line-height: 1.4;
    }
    .detail-hero--has-banner .detail-subtitle i {
        font-size: 12px;
    }
    .detail-hero--has-banner .pay-display-value { font-size: 22px; }
    .detail-hero--has-banner .pay-display-unit  { font-size: 13px; }
    .detail-hero--has-banner .pay-display {
        padding: 10px 0 0;
        margin-top: 2px;
    }

    /* 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)); }
}