/* Homepage-only hero compatibility styles. Navbar fallback styles live in the
   shared stylesheet linked by the Laravel navbar component. */
body[data-landing-release-refresh] .landing-hero-section {
    position: relative;
    z-index: 40;
    overflow: visible;
    padding-top: 4rem;
    border-bottom: 0;
    background: transparent;
}

body[data-landing-release-refresh] .landing-hero-section__panel {
    position: relative;
    z-index: 10;
    overflow: visible;
    background: #08251d;
    color: #fff;
}

body[data-landing-release-refresh] .landing-hero-section .hero-bg-static {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body[data-landing-release-refresh] .landing-hero-section__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

body[data-landing-release-refresh] .landing-hero-section__content {
    position: relative;
    z-index: 30;
    width: 100%;
    max-width: 1450px;
    margin-inline: auto;
    padding: 6rem 1.25rem;
}

body[data-landing-release-refresh] .landing-hero-section__copy-wrap {
    max-width: 980px;
}

body[data-landing-release-refresh] .landing-hero-section .landing-job-search--hero {
    display: grid;
}

@media (min-width: 640px) {
    body[data-landing-release-refresh] .landing-hero-section__content {
        padding: 7rem 2rem;
    }
}

@media (min-width: 1024px) {
    body[data-landing-release-refresh] .landing-hero-section__content {
        padding-top: 9rem;
        padding-bottom: 9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-landing-release-refresh] .landing-hero-section .hero-bg-static,
    body[data-landing-release-refresh] .landing-hero-section .hero-copy,
    body[data-landing-release-refresh] .landing-hero-section .landing-job-search--hero,
    body[data-landing-release-refresh] .landing-hero-section .landing-hero-section__search-benefits {
        animation: none;
    }
}

/* Home Section 3: keep the left job list and the detail loading frame within
   the same responsive desktop workspace. Below the two-column breakpoint,
   the page remains in normal document flow. */
@media (min-width: 901px) {
    .landing-latest-jobs__workspace {
        --landing-latest-job-panel-height: min(44rem, calc(100vh - 7rem));
        align-items: stretch !important;
    }

    .landing-latest-jobs__list-panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .landing-latest-jobs__workspace .landing-latest-jobs__grid,
    .landing-latest-jobs__workspace .landing-latest-jobs__grid.is-scrollable {
        flex: 1 1 0;
        min-height: 0;
        max-height: none !important;
        grid-auto-rows: max-content;
        align-content: start;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding: .15rem .5rem .35rem .1rem !important;
        scrollbar-color: #89b99a transparent;
        scrollbar-width: thin;
    }

    .landing-latest-jobs__workspace .landing-latest-job-card {
        height: auto;
        min-height: 10.65rem;
    }

    .landing-latest-jobs__workspace .landing-latest-jobs__grid::-webkit-scrollbar {
        width: .48rem;
    }

    .landing-latest-jobs__workspace .landing-latest-jobs__grid::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #8ab79a;
    }

    .landing-latest-jobs__workspace :is(
        .landing-latest-job-detail__skeleton,
        .landing-latest-job-detail__full
    ) {
        box-sizing: border-box;
        height: auto !important;
        min-height: var(--landing-latest-job-panel-height) !important;
    }
}