@charset "utf-8";
/* =============================================================
   NAOIH | VASTE SPIDERMAN PAGINAKOP
   Geldt alleen voor de vijf video-subpagina's met krimpende hero.
   De kop begint zoals voorheen in het midden, krimpt naar linksboven
   en blijft daarna in een volledige-breedte balk aan het scherm plakken.
   ============================================================= */

/* Alleen het EINDPUNT van de bestaande animatie verschuift naar
   linksboven, zodat de titel naadloos op dezelfde plaats kan blijven. */
body.naoih-video-page.subpage .subpage-hero-content {
    justify-content: flex-start;
    padding: .5rem var(--page-padding);
}

/* Transparante Spiderman over de VOLLE viewportbreedte.
   Extra specifieke selector is nodig omdat de pagina vaste body's
   een position:relative-regel hebben voor de videocontent. */
body.naoih-video-page > .naoih-sticky-title-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1200;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: .5rem var(--page-padding);
    background: transparent;
    color: var(--blue);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: blur(var(--naoih-spiderman-blur, 14px));
    backdrop-filter: blur(var(--naoih-spiderman-blur, 14px));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
}

body.naoih-video-page > .naoih-sticky-title-bar.is-active {
    visibility: visible;
}

.naoih-sticky-title-bar__inner {
    width: max-content;
    max-width: 100%;
}

.naoih-sticky-title-bar__kicker {
    margin: 0 0 .4rem;
    color: var(--blue);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: none;
}

.naoih-sticky-title-bar__title {
    width: max-content;
    max-width: 100%;
    margin: 0;
    color: var(--blue);
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 11vw, 3.5rem);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.04em;
    text-shadow: none;
}

@media (prefers-reduced-transparency: reduce) {
    body.naoih-video-page > .naoih-sticky-title-bar {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--offwhite);
    }
}