/*
 * Layout: pagina, secties, stacks, clusters en grids.
 */

/* Schermbrede sectie binnen een smallere themacontainer. */
.ww-c-full-bleed {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    overflow-x: clip;
}

/* Paginawrapper: lichte achtergrond en ruimte onderaan. */
.ww-c-page {
    padding-bottom: var(--ww-space-page-end);
    background: var(--ww-color-page);
}

.ww-c-page--top {
    padding-top: var(--ww-space-6);
}

.ww-c-section {
    margin-top: var(--ww-space-section);
}

.ww-c-section--sm {
    margin-top: var(--ww-space-7);
}

.ww-c-section--lg {
    margin-top: calc(var(--ww-space-section) + var(--ww-space-6));
}

.ww-c-section > .ww-c-section-heading,
.ww-c-section > .ww-c-eyebrow {
    margin-bottom: var(--ww-space-6);
}

.ww-c-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ww-stack-gap, var(--ww-space-4));
}

.ww-c-stack--sm { --ww-stack-gap: var(--ww-space-2); }
.ww-c-stack--lg { --ww-stack-gap: var(--ww-space-6); }

.ww-c-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ww-cluster-gap, var(--ww-space-3));
}

.ww-c-cluster--between {
    justify-content: space-between;
}

.ww-c-cluster--end {
    justify-content: flex-end;
}

.ww-c-cluster--center {
    justify-content: center;
}

.ww-c-grid {
    display: grid;
    gap: var(--ww-grid-gap, var(--ww-space-4));
}

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

/* Automatisch vullend grid: kaarten van minimaal --ww-grid-min breed. */
.ww-c-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--ww-grid-min, 260px), 100%), 1fr));
}

/* Inhoud + zijkolom. */
.ww-c-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ww-split-aside, 340px);
    gap: var(--ww-grid-gap, var(--ww-space-6));
    align-items: start;
}

.ww-c-split--reverse {
    grid-template-columns: var(--ww-split-aside, 340px) minmax(0, 1fr);
}

/* Twee gelijke kolommen die op mobiel stapelen (bijv. tekst + illustratie). */
.ww-c-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ww-grid-gap, var(--ww-space-7));
    align-items: center;
}

.ww-c-divider {
    height: 1px;
    margin: var(--ww-space-6) 0;
    border: 0;
    background: var(--ww-color-border);
}

@media (max-width: 900px) {
    .ww-c-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .ww-c-split,
    .ww-c-split--reverse {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 650px) {
    .ww-c-grid--2,
    .ww-c-grid--3,
    .ww-c-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 400px) {
    .ww-c-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}