/**
 * 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. */
.bw-section.bw-surface--white + .bw-section.bw-surface--white,
.bw-section.bw-surface--oat + .bw-section.bw-surface--oat,
.bw-section.bw-surface--soft + .bw-section.bw-surface--soft,
.bw-section.bw-surface--midnight + .bw-section.bw-surface--midnight,
.bw-section.bw-surface--jeans + .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;
}

@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%;
}