@charset "utf-8";
/* NAOIH | Home: 13 tegels bewegen horizontaal tijdens verticaal scrollen.
   Losstaand van de CANONIEKE piramide-stack: geen aanpassingen aan stack-scroll.js
   of naoih-home-stacking.css. */

/* De route krijgt exact het gebroken wit van de voormalige 'Vind je weg'-kaart. */
body.page-home .site-sections.naoih-home-card-stack .route-section {
    background: var(--rice, #F3EFE6);
}

body.page-home .naoih-horizontal-links {
    --tiles-pin-top: clamp(58px, 7.7svh, 70px);
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    isolation: isolate;
}

body.page-home .naoih-horizontal-links__pin {
    position: sticky;
    top: var(--tiles-pin-top);
    height: calc(100svh - var(--tiles-pin-top) - 8px);
    min-height: 0;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

body.page-home .naoih-horizontal-links__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
}

/* Eén enkele rij; pad van 20px houdt de strandvideo langs de kanten zichtbaar. */
body.page-home .naoih-horizontal-links .naoih-horizontal-links__track {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: clamp(14px, 4vw, 26px);
    width: max-content;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 16px var(--naoih-frame, 20px) 22px;
    transform: translate3d(var(--tiles-translate, 0px), 0, 0);
    will-change: transform;
}

body.page-home .naoih-horizontal-links .feature-card,
body.page-home .naoih-horizontal-links .feature-card.tradition-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 clamp(245px, 74vw, 360px);
    width: clamp(245px, 74vw, 360px);
    height: clamp(275px, 54svh, 415px);
    min-height: 0;
    max-width: none;
    box-sizing: border-box;
    padding: 26px 24px 50px;
    text-align: center;
    margin: 0;
    box-shadow: 0 10px 27px rgba(12, 27, 44, .15);
}
body.page-home .naoih-horizontal-links .feature-card > svg:not(.card-arrow) {
    flex-shrink: 0;
}
body.page-home .naoih-horizontal-links .feature-card .tradition-label {
    color: var(--blue);
    margin: .4rem 0 .7rem;
}

/* De bestaande IntersectionObserver ziet kaarten buiten het beeld niet;
   daarom blijft hun inhoud zichtbaar zodra ze horizontaal binnenkomen. */
body.page-home .naoih-horizontal-links .feature-card.is-prepared {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
}
@media (hover: hover) {
    body.page-home .naoih-horizontal-links .feature-card:hover {
        transform: translateY(-3px);
    }
}
body.page-home .naoih-horizontal-links .feature-card:focus-visible {
    outline: 3px solid var(--honey);
    outline-offset: -4px;
}

/* Geen bewegingsdwang: bij minder animatie gewoon horizontaal vegen/swipen. */
@media (prefers-reduced-motion: reduce) {
    body.page-home .naoih-horizontal-links { height: auto !important; }
    body.page-home .naoih-horizontal-links__pin {
        position: relative;
        top: auto;
        height: auto;
        min-height: 300px;
    }
    body.page-home .naoih-horizontal-links__viewport {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    body.page-home .naoih-horizontal-links__track {
        transform: none !important;
        will-change: auto;
    }
    body.page-home .naoih-horizontal-links .feature-card {
        scroll-snap-align: center;
    }
}