/* ==========================================================================
   Responsive — uitbreidingen vanaf grotere schermen (mobile first)
   Breekpunten: 600px (klein tablet) · 900px (tablet/laptop) · 1280px (desktopnavigatie) 
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≥ 600px
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
    :root {
        --gutter: 32px;
    }

    .raster--2,
    .raster--3,
    .raster--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .formulier__rij {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .keuzes--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kenmerken {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ingangen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-5);
    }

    .ingang {
        grid-template-columns: 1fr;
    }

    .tegels--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-5);
    }

    .ingang__beeld {
        aspect-ratio: 4 / 3;
    }

    .bb-citaat {
        padding: var(--space-7) var(--space-6);
    }

    .dienstkaart {
        display: grid;
        grid-template-columns: 42% 1fr;
    }

    .dienstkaart .bb-kaart__beeld {
        aspect-ratio: auto;
        height: 100%;
        min-height: 280px;
    }

    .eventkaart {
        grid-template-columns: 88px 1fr;
        padding: var(--space-5) var(--space-4);
    }

    .formulier-kaart,
    .praktisch__kaart {
        padding: var(--space-6) var(--space-5);
    }

    .bb-dialoog__binnen {
        padding: var(--space-6) var(--space-5) var(--space-5);
    }
}

/* --------------------------------------------------------------------------
   ≥ 900px
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    :root {
        --sectie-padding: 96px;          /* desktop (was 120px) */
    }

    .raster--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .raster--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .raster {
        gap: var(--space-6) var(--space-5);
    }

    .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-7);
    }

    .split--beeld-breed {
        grid-template-columns: 1.15fr .85fr;
    }

    .split--tekst-breed {
        grid-template-columns: .8fr 1.2fr;
    }

    .split--omgekeerd > :first-child {
        order: 2;
    }

    .split--boven {
        align-items: start;
    }

    .bb-sectiekop {
        grid-template-columns: 1fr 1.3fr;
        gap: var(--space-6);
        align-items: end;
    }

    .bb-sectiekop--midden {
        grid-template-columns: 1fr;
    }

    /* Hero binnenpagina's */
    .bb-hero {
        padding-block: var(--space-6) var(--space-8);
    }

    .bb-hero__raster {
        grid-template-columns: 1.1fr .9fr;
        gap: var(--space-7);
    }

    .bb-hero__beeld {
        justify-self: end;
    }

    .bb-hero--zonder-beeld .bb-hero__raster {
        grid-template-columns: minmax(0, 760px);
    }

    /* Hero met achtergrondfoto */
    .bb-herofoto {
        align-items: center;
        min-height: min(86vh, 760px);
    }

    .bb-herofoto::before {
        background: linear-gradient(90deg, rgba(43, 33, 31, .82) 0%, rgba(43, 33, 31, .55) 42%, rgba(43, 33, 31, 0) 78%);
    }

    .bb-herofoto__tekst {
        padding-block: var(--space-8);
    }

    /* Ingangen: vier kolommen, zacht verspringend */
    .ingangen {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-5);
    }


    .ingang__beeld {
        aspect-ratio: 4 / 5;
    }

    /* Uitgelicht aanbod */
    .uitgelicht {
        grid-template-columns: 1.1fr 1fr;
        align-items: stretch;
    }

    .uitgelicht__beeld {
        position: relative;
        aspect-ratio: auto;
        min-height: 460px;
    }

    /* De foto volgt de hoogte van de tekst, niet omgekeerd */
    .uitgelicht__beeld picture,
    .uitgelicht__beeld img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .uitgelicht__tekst {
        justify-content: center;
        padding: var(--space-7) var(--space-6);
    }

    /* Tegels: twee kolommen, tweede kolom zakt iets */
    .tegels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-7) var(--space-6);
    }

    .tegel__beeld {
        aspect-ratio: 3 / 2;
    }

    .tegels--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .tegels--4 .tegel__beeld {
        aspect-ratio: 4 / 3;
    }

    .principes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .kenmerken {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kenmerken--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stappen--raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-6);
    }

    .programma {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .programma--1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .praktisch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch; /* beide kaarten even hoog */
    }

    .ervaringen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .events--raster {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .events--raster .eventkaart {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .events--raster .eventkaart__datum {
        flex-direction: row;
        align-items: baseline;
        justify-self: start;
        gap: 8px;
        padding: 10px 16px;
    }

    .events--raster .eventkaart__dag {
        font-size: 1.75rem;
    }

    .events--raster .eventkaart__maand,
    .events--raster .eventkaart__jaar {
        margin-top: 0;
    }

    .site-footer__boven {
        grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
        gap: var(--space-5);
        padding-block: var(--space-7) var(--space-6);
    }

    /* Carrousel: knoppen links en rechts van de getuigenis */
    .carrousel.is-actief {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "vorige venster volgende"
            ". bollen .";
        column-gap: var(--space-6);
    }

    .formulier--naast-info {
        grid-template-columns: 1fr 1.4fr;
    }
}

/* --------------------------------------------------------------------------
   ≥ 1280px — desktop header met menuband, dropdown en genest submenu
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    html {
        scroll-padding-top: 24px;
    }

    .site-header {
        border-bottom: 0;
    }

    .bb-headerband {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        padding: 0;
    }

    .bb-headerband__logo {
        grid-row: 1 / 3;
        padding: 14px 24px 14px var(--header-rand);
    }

    .bb-headerband__logo .logo-desktop {
        display: block;
        flex: none;
        max-width: none;
        height: 80px;
        width: auto;
    }

    .bb-headerband__logo .logo-mobiel,
    .bb-headerband__mobiel {
        display: none;
    }

    .bb-headerband__top {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 18px;
        padding: 8px var(--header-rand) 8px 32px;
        font: 600 .875rem/1.4 var(--font-tekst);
    }

    .bb-headerband__top a:not(.bb-knop):not(.bb-icoonlink) {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        color: var(--ink-heading);
        text-decoration: none;
    }

    .bb-headerband__top a:not(.bb-knop):not(.bb-icoonlink):hover {
        color: var(--accent);
        text-decoration: underline;
    }

    .bb-headerband__top .icoon {
        width: 18px;
        height: 18px;
        color: var(--accent);
    }

    .bb-headerband__top .sociaal {
        display: flex;
    }

    .bb-headerband__top .bb-icoonlink + .bb-icoonlink {
        margin-left: -8px;
    }

    .bb-headerband__top .scheiding {
        width: 1px;
        height: 20px;
        background: var(--lijn);
    }

    /* De menuband in rozenhout met grote afgeronde hoek */
    .bb-headerband__band {
        position: static;
        display: flex;
        align-items: center;
        padding: 0 10px 0 36px;  /* knop rechts: zelfde marge als boven/onder in de band */
        overflow: visible;
        visibility: visible;
        opacity: 1;
        transform: none;
        border-top: 0;
        border-top-left-radius: var(--radius-band);
        background: var(--rozenhout);
        transition: none;
    }

    .hoofdnav {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        width: 100%;
        padding: 0;
    }

    /* Afspraakknop rechts in de menuband */
    .hoofdnav__cta {
        display: inline-flex;
        flex: 0 0 auto;
        margin-left: auto;
        white-space: nowrap;
    }

    .hoofdnav__cta:focus-visible {
        outline-color: var(--wit);
    }

    .hoofdnav__lijst {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0 clamp(12px, 1.2vw, 26px);
        white-space: nowrap;
    }

    .hoofdnav__item {
        position: relative;
        border: 0;
    }

    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__rij > .hoofdnav__link,
    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__link {
        min-height: 62px;
        padding: 0;
        font-size: clamp(.9375rem, .75rem + .25vw, 1rem);
        color: var(--wit);
        box-shadow: inset 0 -2px 0 transparent;
        transition: box-shadow var(--duur) var(--ease);
    }

    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__rij > .hoofdnav__link:hover,
    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__link:hover {
        box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .45);
    }

    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__rij > .hoofdnav__link[aria-current="page"],
    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__link[aria-current="page"],
    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__rij > .hoofdnav__link.is-actief-pad {
        color: var(--wit);
        box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .85);
    }

    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__rij > .hoofdnav__toggle {
        width: 30px;
        min-height: 62px;
        margin: 0 -6px 0 2px;
        color: var(--wit);
        border-radius: 6px;
    }

    .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__rij > .hoofdnav__toggle:hover {
        background: rgba(255, 255, 255, .12);
    }

    .bb-headerband__band > .hoofdnav > .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__rij :focus-visible,
    .bb-headerband__band > .hoofdnav > .hoofdnav__lijst > .hoofdnav__item > .hoofdnav__link:focus-visible {
        outline-color: var(--wit);
    }

    /* Dropdownpaneel */
    .submenu {
        position: absolute;
        top: calc(100% - 6px);
        left: -22px;
        z-index: 120;
        min-width: 300px;
        margin: 0;
        padding: 10px;
        border: 1px solid var(--lijn);
        border-radius: var(--radius-md);
        background: var(--wit);
        box-shadow: var(--shadow-menu);
    }

    .heeft-sub.is-open > .submenu {
        display: block;
        animation: menu-in 260ms var(--ease);
    }

    @keyframes menu-in {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
    }

    .submenu > li {
        position: relative;
        border: 0;
    }

    .submenu .hoofdnav__rij {
        border-radius: var(--radius-sm);
        transition: background-color 250ms;
    }

    .submenu .hoofdnav__rij:hover,
    .submenu .heeft-sub.is-open > .hoofdnav__rij {
        background: var(--poederroze);
    }

    .submenu__link,
    .submenu .hoofdnav__link {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        flex: 1;
        min-height: 52px;
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        font-size: .9375rem;
        color: var(--ink-heading);
    }

    .submenu > li > .submenu__link:hover {
        background: var(--poederroze);
        color: var(--ink-heading);
    }

    .submenu__beschrijving {
        display: block;
        font-size: .8125rem;
        font-weight: 400;
        line-height: 1.4;
        color: var(--ink);
    }

    .submenu .hoofdnav__toggle {
        width: 44px;
        min-height: 52px;
        margin: 0;
        color: var(--accent);
    }

    .submenu .hoofdnav__toggle:hover {
        background: transparent;
    }

    .submenu .hoofdnav__toggle .icoon {
        transform: rotate(-90deg);
    }

    .submenu .hoofdnav__toggle[aria-expanded="true"] .icoon {
        transform: rotate(-90deg) translateY(2px);
    }

    /* Genest submenu (Verdieping) als flyout rechts, of links bij plaatsgebrek */
    .submenu .submenu {
        top: -11px;
        left: calc(100% + 10px);
        min-width: 280px;
    }

    .submenu .submenu::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -12px;
        width: 12px;
    }

    .submenu .submenu.naar-links {
        left: auto;
        right: calc(100% + 10px);
    }

    .submenu .submenu.naar-links::before {
        left: auto;
        right: -12px;
    }

    .submenu__kop {
        display: block;
        padding: 8px 14px 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
    }

    .hoofdnav__extra {
        display: none;
    }

    /* Zonder JS: hover en focus-within openen de submenu's */
    html:not(.js) .heeft-sub:hover > .submenu,
    html:not(.js) .heeft-sub:focus-within > .submenu {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   ≥ 1280px — mobiele menu-open-toestand neutraliseren
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    body.menu-open {
        overflow: auto;
    }
}

/* Heel smalle schermen: afspraakknop in de balk verbergen (staat in het menu) */
@media (max-width: 379px) {
    .bb-headerband__mobiel .bb-knop {
        display: none;
    }

    .bb-headerband__logo .logo-mobiel {
        height: 38px;
    }
}

/* --------------------------------------------------------------------------
   < 900px — footer: de kolommen staan onder elkaar, alles horizontaal centreren
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
    .site-footer__boven,
    .site-footer__onder-binnen,
    .nieuwsbrief__tekst,
    .nieuwsbrief__privacy {
        text-align: center;
    }

    .site-footer__lijst {
        justify-items: center;
    }

    .site-footer__sociaal,
    .site-footer__onder-binnen,
    .site-footer__onder ul {
        justify-content: center;
    }
}