/* =========================================================
   OVER ONS – 1 VEEG / SCROLL = 1 BANNER
   =========================================================
   Zelfde snapprincipe als Home, Ondersteuning en Werkwijze.
   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-about),
html.about-banner-page {
    --about-top-offset: calc(var(--announcement-height) + var(--header-height));
    --about-viewport-height: 100svh;
    --about-banner-height: max(1px, calc(var(--about-viewport-height) - var(--about-top-offset)));
    scroll-behavior: auto;
    scroll-padding-top: var(--about-top-offset);
    scroll-snap-type: y mandatory;
    overflow-anchor: none;
}

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

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

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

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

.page-about .about-banner,
.page-about .site-footer[data-about-banner] {
    position: relative;
    width: 100%;
    height: var(--about-banner-height);
    min-height: var(--about-banner-height);
    max-height: var(--about-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-about [data-about-banner-content] {
    --about-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(--about-content-scale));
    transform-origin: center center;
    will-change: transform;
}

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

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

/* Binnen een vaste snapbanner is sticky niet nodig en kan het tijdens een
   smooth snap onrust veroorzaken. De visuele positie blijft hetzelfde. */
.page-about .story-section .sticky-heading {
    position: static;
}

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

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

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

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

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

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

    .page-about .story-section__grid,
    .page-about .quality-section__grid,
    .page-about .about-banner--cta .cta-panel {
        width: min(calc(100% - 24px), var(--container));
    }
}