/**
 * Beweeg Wijs — layout
 * Container, sectieritme, grids.
 */

.bw-container {
	width: 100%;
	max-width: var(--bw-container);
	margin-inline: auto;
	padding-inline: var(--bw-gutter);
}

.bw-container--narrow {
	max-width: var(--bw-container-narrow);
}

.bw-container--wide {
	max-width: var(--bw-container-wide);
}

/**
 * Sectie: het enige element dat verticale ruimte en kleurvlak bepaalt.
 * Componenten regelen hun eigen binnenkant, nooit hun buitenmarge.
 */
.bw-section {
	position: relative;
	padding-block: var(--bw-section-y);
	background-color: var(--bw-surface-bg, var(--bw-white));
	color: var(--bw-surface-text, var(--bw-text));
}

.bw-section--tight,
.bw-section--compact {
	padding-block: var(--bw-section-y-tight);
}

/* Ruim: voor een overgang die echt lucht moet krijgen. */
.bw-section--large {
	padding-block: var(--bw-section-y-large);
}

.bw-section--flush-top {
	padding-block-start: 0;
}

.bw-section--flush-bottom {
	padding-block-end: 0;
}

/* Twee opeenvolgende secties met HETZELFDE kleurvlak lopen door in
   plaats van dubbele ruimte te maken: de bezoeker ziet één vlak, en de
   onderruimte van de vorige sectie is de bovenruimte van deze.

   Let op: beide kanten van de selector moeten hetzelfde vlak noemen.
   Stond er aan de linkerkant alleen .bw-section, dan verloor elk
   oat-vlak zijn bovenruimte zodra er iets vóór stond — ook een wit
   vlak — en begon de tekst tegen de bovenrand. */
/* Een hero telt hier niet mee. Zijn onderruimte sluit de hero af en is
   niet bedoeld als bovenruimte voor het blok erna. Stond het volgende
   blok toevallig op hetzelfde vlak, dan begon het tegen de hero aan —
   zoals het formulier op de Pleincheck-pagina deed. */
.bw-section.bw-surface--white:not(.bw-hero) + .bw-section.bw-surface--white,
.bw-section.bw-surface--oat:not(.bw-hero) + .bw-section.bw-surface--oat,
.bw-section.bw-surface--soft:not(.bw-hero) + .bw-section.bw-surface--soft,
.bw-section.bw-surface--midnight:not(.bw-hero) + .bw-section.bw-surface--midnight,
.bw-section.bw-surface--jeans:not(.bw-hero) + .bw-section.bw-surface--jeans {
	padding-block-start: 0;
}

.bw-section__header {
	display: grid;
	gap: var(--bw-space-sm);
	max-width: 54rem;
	/* 40px in plaats van 48px. De kop en wat eronder staat horen bij
	   elkaar; met de oude waarde stonden ze als twee losse dingen. */
	margin-block-end: 2.5rem;
}

.bw-section__header--center {
	justify-items: center;
	text-align: center;
	margin-inline: auto;
}

.bw-section__title {
	max-width: 22ch;
}

.bw-section__header--center .bw-section__title {
	max-width: 26ch;
}

/* ---------------------------------------------------------------
 * Grids
 * ------------------------------------------------------------ */
.bw-grid {
	display: grid;
	gap: var(--bw-grid-gap);
}

.bw-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.bw-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.bw-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

/* Vijf kolommen: voor processtappen zoals het ecosysteem. Onder 68rem
   valt het terug op een tweekolomsraster in plaats van vier plus een wees. */
.bw-grid--5 {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 68rem) {
	.bw-grid--5 {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 30rem) {
	.bw-grid--5 {
		grid-template-columns: 1fr;
	}
}

/* Split: tekst naast beeld. */
.bw-split {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}

/* Twee kolommen die allebei bovenaan beginnen. Nodig zodra beide kolommen
   een eigen kop hebben: gecentreerd zakt de kortste kolom omlaag en
   staan de koppen niet meer op dezelfde hoogte. */
.bw-split--top {
	align-items: start;
}

@media (min-width: 56rem) {
	.bw-split {
		grid-template-columns: 1fr 1fr;
	}

	.bw-split--wide-media {
		grid-template-columns: 5fr 6fr;
	}

	.bw-split--wide-text {
		grid-template-columns: 6fr 5fr;
	}

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

.bw-stack {
	display: grid;
	/* minmax(0, 1fr) en niet de standaard auto: anders rekt een grid zich
	   op tot de max-content van zijn breedste kind — een invoerveld
	   bijvoorbeeld — en loopt de pagina op mobiel horizontaal over. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bw-space-md);
	align-content: start;
}

.bw-stack--sm {
	gap: var(--bw-space-2xs);
}

.bw-stack--lg {
	gap: var(--bw-space-lg);
}

/* Een subtiele caramel streep, het accentelement uit de brandguide. */
.bw-rule {
	width: 4rem;
	height: 2px;
	border: 0;
	background-color: var(--bw-caramel);
}

/* Beeldmerkvorm als decoratief accent. */
.bw-mark-accent {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: var(--bw-gutter);
	width: clamp(6rem, 12vw, 11rem);
	opacity: 0.08;
	pointer-events: none;
	color: currentColor;
}

/* Een sectie begint nooit met tekst tegen de bovenrand: de ruimte komt
   van de sectie zelf, niet van de marge van het eerste element. Zonder
   deze regel telt een h2-marge op bij de sectieruimte op de ene plek en
   niet op de andere, en oogt hetzelfde blok per pagina anders. */
.bw-section > .bw-container > :first-child,
.bw-section > .bw-container > :first-child > :first-child,
.bw-section__header > :first-child {
	margin-block-start: 0;
}

/* Eyebrow naar titel, titel naar intro: vaste afstanden uit de
   briefing, zodat de kop overal hetzelfde ritme heeft. */
.bw-section__header {
	gap: 0;
}

.bw-section__header > .bw-eyebrow + * {
	margin-block-start: 0.6875rem;   /* 11px */
}

.bw-section__header > .bw-section__title + * {
	margin-block-start: 1.3125rem;   /* 21px */
}

/* ---------------------------------------------------------------
 * Kruimelpad boven een doorlopende hero
 *
 * Op de homepage loopt het kleurvlak van de hero door tot de bovenrand
 * van het scherm, achter de transparante header langs. Op de andere
 * pagina's staat het kruimelpad daartussen. Kreeg dat een eigen (witte)
 * achtergrond, dan hield het linnen halverwege op en zweefde het beeld
 * in een strook wit.
 *
 * De balk krijgt daarom hetzelfde kleurvlak als de hero en schuift zelf
 * onder de header door. De hero sluit er naadloos op aan.
 * ------------------------------------------------------------ */
.bw-breadcrumbs-bar--over {
	background-color: var(--bw-surface-bg);
	color: var(--bw-surface-text);
	margin-block-start: calc(var(--bw-header-height) * -1);
	padding-block-start: var(--bw-header-height);
}

/* Het kruimelpad hoort bij het gebied boven de hero, maar hoeft daar
   niet veel ruimte te kosten. De bovenmarge van de balk is de
   headerhoogte en ligt vast; wat het kruimelpad er zelf bovenop legde
   kan smaller. */
.bw-breadcrumbs-bar--over .bw-breadcrumbs {
	padding-block: var(--bw-space-2xs);
}

/* De hero hoeft dan niet zelf meer omhoog: de balk dekt de header al af. */
/* Algemene broer-selector en niet de directe: het boog-component zet
   eerst een verborgen svg met de vorm neer, en die staat tussen de balk
   en de sectie in. */
.bw-header-over-hero .bw-breadcrumbs-bar--over ~ .bw-section.bw-hero {
	margin-block-start: 0;
}

/* En het beeld begint bovenin de hero in plaats van onder de header,
   want de header staat inmiddels boven de kruimelpadbalk. */
.bw-header-over-hero .bw-breadcrumbs-bar--over ~ .bw-section.bw-hero .bw-hero__media {
	inset-block-start: 0;
	height: 100%;
}