/* ==========================================================================
   Structuur — secties, container, kolomrooster, achtergrondkleuren, reveal
   ========================================================================== */

main.site-main {
	display: flex;
	flex-direction: column;
	overflow: clip;
}


/* ---------- Secties ---------- */
section {
	position: relative;
	width: 100%;
	padding-block: var(--section-padding);
	background: var(--wit);
}
section.section--tight { padding-block: var(--section-padding-tight); }

/* Twee opeenvolgende secties met dezelfde achtergrond lezen als één vlak:
   de naad ertussen krijgt geen dubbele witruimte. */
.bg-wit    + .bg-wit,
.bg-zacht  + .bg-zacht,
.bg-blauw  + .bg-blauw,
.bg-donker + .bg-donker,
.bg-accent + .bg-accent { padding-top: 0; }


/* ---------- Container ---------- */
.container,
.section-wrapper {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* .section-wrapper blijft daarnaast het 10-koloms rooster van het thema, zodat
   blokken met .w10 … .w100 kunnen werken. */
.section-wrapper--grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: var(--gap);
}

.w10 { grid-column: span 1; }
.w20 { grid-column: span 2; }
.w30 { grid-column: span 3; }
.w40 { grid-column: span 4; }
.w50 { grid-column: span 5; }
.w60 { grid-column: span 6; }
.w70 { grid-column: span 7; }
.w80 { grid-column: span 8; }
.w90 { grid-column: span 9; }
.w0,
.w100 { grid-column: span 10; }

@media screen and (max-width: 899px) {
	.w10, .w20, .w30, .w40, .w50,
	.w60, .w70, .w80, .w90 { grid-column: span 10; }
}


/* ---------- Sectiekop ---------- */
.section-head {
	max-width: 640px;
	margin-bottom: var(--section-head-gap);
}
.section-head--wide { max-width: 760px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 16px; }
.section-head p {
	color: rgba(var(--ink-rgb), 0.72);
	font-size: 1.1rem;
	max-width: 54ch;
}
.section-head--center p { margin-inline: auto; }


/* ---------- Achtergrondkleuren ---------- */
.bg-wit    { background-color: var(--wit); }
.bg-zacht  { background-color: var(--zacht); }
.bg-blauw  { background-color: var(--blauw); }
.bg-donker { background-color: var(--donker); }
.bg-accent { background-color: var(--accent); }

/* Tekstkleur omkeren op de donkere vlakken */
.bg-blauw,
.bg-donker { color: #fff; }
.bg-blauw h1, .bg-blauw h2, .bg-blauw h3, .bg-blauw h4, .bg-blauw h5, .bg-blauw h6,
.bg-donker h1, .bg-donker h2, .bg-donker h3, .bg-donker h4, .bg-donker h5, .bg-donker h6 { color: #fff; }
.bg-blauw .section-head p,
.bg-donker .section-head p,
.bg-blauw .content p,
.bg-donker .content p,
.bg-blauw .content li,
.bg-donker .content li { color: rgba(255, 255, 255, 0.82); }

/* Accent is een lichte kleur: tekst blijft donker */
.bg-accent,
.bg-accent h1, .bg-accent h2, .bg-accent h3,
.bg-accent h4, .bg-accent h5, .bg-accent h6 { color: var(--ink); }


/* ---------- Full-bleed helper ----------
   Laat een element de container verlaten en van rand tot rand lopen. */
.is-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	max-width: none;
}


/* ---------- Reveal on scroll ---------- */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Zonder JS blijft alles gewoon zichtbaar */
.no-js .reveal { opacity: 1; transform: none; }


/* ---------- Cover-afbeelding helper ---------- */
div > picture.cover { position: relative; }
picture.cover {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}
picture.cover img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}