/* ==========================================================================
   Layout — container, secties, rasters (mobile first)
   Grotere schermen: zie responsive.css
   ========================================================================== */

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--smal {
    max-width: calc(760px + 2 * var(--gutter));
}

.container--breed {
    max-width: calc(var(--container-breed) + 2 * var(--gutter));
}

/* Secties: de rust zit in de witruimte */
.sectie {
    position: relative;
    padding-block: var(--sectie-padding);
}

.sectie--compact {
    padding-block: var(--space-6);
}

/* Lichtroze secties: zachte Bloom-roze gloed in het midden die uitdeint naar poederroze (zie --verloop-zacht) */
.sectie--zacht {
    background: var(--surface-soft);
    background-image: var(--verloop-zacht);
}

.sectie--zand {
    background: var(--zand);
}

.sectie--merk {
    background: var(--surface-brand);
    color: var(--ink-heading);
}

.sectie--donker {
    background: var(--surface-dark);
    color: var(--tekst-op-donker);
}

.sectie--donker h2,
.sectie--donker h3,
.sectie--donker h4 {
    color: var(--wit);
}

.sectie--donker .bb-label {
    color: var(--roze);
}

.sectie--donker a:not(.bb-knop) {
    color: var(--roze);
}

.sectie--merk .bb-label,
.sectie--merk a:not(.bb-knop) {
    color: var(--nachtaarde);
}

.sectie + .sectie--zelfde {
    padding-top: 0;
}

/* Rasters */
.raster {
    display: grid;
    gap: var(--space-5) var(--space-4);
}

.stapel > * + * {
    margin-top: var(--space-4);
}

.stapel-klein > * + * {
    margin-top: var(--space-3);
}

/* Tekst + beeld naast elkaar */
.split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.split__tekst > * + * {
    margin-top: var(--space-4);
}

.split__tekst .bb-label + h2,
.split__tekst .bb-label + h3 {
    margin-top: var(--space-2);
}

/* Knoppenrij */
.knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.knoppen--midden {
    justify-content: center;
}

.midden {
    text-align: center;
}

.midden p {
    margin-inline: auto;
}

/* Hoofdinhoud onder de sticky mobiele header */
main {
    display: block;
}