/* =========================================================
   WERKEN BIJ – 1 VEEG / SCROLL = 1 BANNER
   =========================================================
   Zelfde snapprincipe als Home, Ondersteuning, Werkwijze en Over ons.
   De mededelingsbalk en navbar blijven zichtbaar; elke sectie vult exact
   de resterende viewport. De JS-fit schaalt alleen wanneer inhoud anders
   buiten een lage/smalle viewport zou vallen.
*/

html:has(body.page-jobs),
html.jobs-banner-page {
    --jobs-top-offset: calc(var(--announcement-height) + var(--header-height));
    --jobs-viewport-height: 100svh;
    --jobs-banner-height: max(1px, calc(var(--jobs-viewport-height) - var(--jobs-top-offset)));
    scroll-behavior: auto;
    scroll-padding-top: var(--jobs-top-offset);
    scroll-snap-type: y mandatory;
    overflow-anchor: none;
}

html.jobs-banner-page.jobs-banner-is-snapping {
    scroll-snap-type: none;
}

@supports (height: 100dvh) {
    html:has(body.page-jobs),
    html.jobs-banner-page {
        --jobs-viewport-height: 100dvh;
    }
}

body.page-jobs {
    overscroll-behavior-y: none;
}

.page-jobs #main-content {
    position: relative;
    isolation: isolate;
}

.page-jobs .jobs-banner,
.page-jobs .site-footer[data-jobs-banner] {
    position: relative;
    width: 100%;
    height: var(--jobs-banner-height);
    min-height: var(--jobs-banner-height);
    max-height: var(--jobs-banner-height);
    padding-block: 0;
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: none;
    scroll-margin-top: 0;
    overflow-anchor: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    isolation: isolate;
}

.page-jobs [data-jobs-banner-content] {
    --jobs-content-scale: 1;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: min(calc(100% - clamp(24px, 4vw, 48px)), var(--container));
    max-width: calc(100% - clamp(24px, 4vw, 48px));
    margin: 0;
    transform: translate(-50%, -50%) scale(var(--jobs-content-scale));
    transform-origin: center center;
    will-change: transform;
}

/* Bestaande layouts en kleuren blijven intact; alleen bannerhoogte en
   verticale positionering worden hier geregeld. */
.page-jobs .jobs-banner--hero .page-hero__grid {
    padding-block: 0;
}

.page-jobs .jobs-intro,
.page-jobs .profile-section__grid,
.page-jobs .jobs-banner--cta .cta-panel {
    width: min(calc(100% - clamp(24px, 4vw, 48px)), var(--container));
}

/* Footer is ook op Werken bij de laatste snapbanner. */
.page-jobs .site-footer[data-jobs-banner] {
    padding: 0;
    background: var(--forest-deep);
}

.page-jobs .site-footer__fit {
    display: grid;
    gap: clamp(24px, 5vh, 48px);
}

.page-jobs .site-footer__fit > .container {
    width: 100%;
    margin-inline: 0;
}

.page-jobs .site-footer__grid {
    gap: clamp(22px, 4vw, 46px);
}

.page-jobs .site-footer__bottom {
    margin-top: 0;
}

@media (max-width: 840px) {
    .page-jobs [data-jobs-banner-content] {
        width: min(calc(100% - 24px), var(--container));
        max-width: calc(100% - 24px);
    }

    .page-jobs .jobs-intro,
    .page-jobs .profile-section__grid,
    .page-jobs .jobs-banner--cta .cta-panel {
        width: min(calc(100% - 24px), var(--container));
    }
}