/**
 * Component: Hero
 */

.bw-hero {
	overflow: clip;
}

.bw-hero__inner {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

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

	/* Compacter dan de homepage-hero: de briefing vraagt 440–500px
	   voor de contactpagina. */
	.bw-hero--split {
		min-height: 27.5rem;
		display: grid;
		align-items: center;
	}
}

/* Vanaf 1280px 45/55, daaronder 50/50 — precies de verhouding die de
   contactbriefing per breedte noemt. */
@media (min-width: 80rem) {
	.bw-hero--split .bw-hero__inner {
		grid-template-columns: 45fr 55fr;
	}
}

.bw-hero__content {
	display: grid;
	gap: var(--bw-space-md);
	align-content: center;
	max-width: 34rem;
	/*
	 * Zonder dit mag een rasteritem niet smaller worden dan zijn
	 * langste woord. Een kop als OPLEIDINGSCOÖRDINATOR duwde de kolom
	 * daardoor breder dan het scherm, en omdat de hero zijn overloop
	 * afknipt viel het laatste stuk van het woord gewoon weg. Met
	 * min-width: 0 mag de kolom krimpen en breekt het woord netjes af.
	 */
	min-width: 0;
}

.bw-hero__title {
	margin-block: 0;
	/* Eén maat voor elke hero, op elke pagina: 38px op mobiel, 50px op
	   1024, 64px vanaf 1440. Stond deze regel alleen op de homepage, dan
	   kreeg elke andere pagina de standaard displaymaat — groter, lichter
	   en met een andere letterafstand. */
	font-size: clamp(2.375rem, 0.97rem + 3.37vw, 4rem);
	font-weight: 700;
	/*
	 * 1.08 en niet 1.02. In hoofdletters met een trema — COÖRDINATOR —
	 * reikt de inkt van een regel tot ongeveer 0,98em boven de
	 * basislijn. Bij 1.02 bleef daar 0,04em over en raakten twee
	 * regels elkaar; op 64px was dat zichtbaar als aan elkaar
	 * geplakte tekst. 1.08 geeft die trema lucht en houdt de kop nog
	 * steeds compact.
	 */
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--bw-surface-text);
}

.bw-hero__intro {
	max-width: 42ch;
}

.bw-hero__actions {
	margin-block-start: var(--bw-space-2xs);
}

.bw-hero__media {
	position: relative;
	border-radius: var(--bw-radius-lg);
	overflow: hidden;
	box-shadow: var(--bw-shadow-lg);
}

.bw-hero__media .bw-placeholder {
	border-radius: 0;
}

.bw-hero__image,
.bw-hero__video {
	width: 100%;
	height: 100%;
	max-height: 40rem;
	object-fit: cover;
}

/* Compacte variant: alleen tekst, gecentreerd. */
.bw-hero--compact .bw-hero__content {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}

.bw-hero--compact .bw-hero__actions {
	justify-content: center;
}

/* Overlay: beeld over de volle breedte met tekst eroverheen. */
.bw-hero--overlay {
	padding-block: 0;
}

.bw-hero--overlay .bw-hero__inner {
	position: relative;
	min-height: clamp(26rem, 60vh, 40rem);
	align-content: end;
	padding-block: var(--bw-section-y);
}

.bw-hero--overlay .bw-hero__media {
	position: absolute;
	inset: 0;
	border-radius: 0;
	box-shadow: none;
	z-index: 0;
}

.bw-hero--overlay .bw-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Donkere gradient zodat tekst op elk beeld 4,5:1 haalt. */
	background: linear-gradient(100deg, rgba(25, 48, 91, 0.92) 0%, rgba(25, 48, 91, 0.72) 45%, rgba(25, 48, 91, 0.25) 100%);
}

.bw-hero--overlay .bw-hero__content {
	position: relative;
	z-index: 1;
	color: var(--bw-oat);
}

/* ---------------------------------------------------------------
 * Variant: boog
 *
 * Het beeld loopt door tot de rand van het scherm en wordt onderaan
 * afgesneden met een ruime boog. De linkerkant vervaagt in het kleurvlak,
 * zodat beeld en achtergrond in elkaar overlopen in plaats van tegen
 * elkaar aan te liggen.
 *
 * De boog zelf zit in een SVG-clipPath in objectBoundingBox-eenheden.
 * Daardoor schaalt hij mee met elk formaat en is er geen tweede vorm
 * nodig voor mobiel.
 * ------------------------------------------------------------ */
.bw-hero--curve {
	position: relative;
	padding-block: 0;
	overflow: clip;
}

/* De hero schuift onder de transparante header door, zodat het kleurvlak
   tot de bovenrand van het scherm loopt en er geen witte balk tussen
   header en hero zit.

   Het beeld begint wél onder de header, op de hoogte van de CTA. Zou het
   erachter doorlopen, dan staat de navigatie op de foto en is hij niet
   meer te lezen — precies het probleem dat een beeld met veel detail
   altijd oplevert. */
.bw-header-over-hero .bw-hero--curve {
	margin-block-start: calc(var(--bw-header-height) * -1);
}

.bw-header-over-hero .bw-hero--curve .bw-hero__inner {
	padding-block-start: calc(var(--bw-section-y) + var(--bw-header-height));
}

.bw-header-over-hero .bw-hero--curve .bw-hero__media {
	inset-block-start: var(--bw-header-height);
	height: calc(100% - var(--bw-header-height));
}

.bw-hero--curve .bw-hero__inner {
	/* Bewust geen position: relative. Het beeld hangt aan de sectie en
	   niet aan de container, zodat het doorloopt tot de schermrand — ook
	   op een breed scherm waar de container zelf al ophoudt. Anders
	   blijft er rechts een strook kleurvlak naast het beeld staan. */
	min-height: clamp(28rem, 58vh, 42rem);
	align-content: center;
	padding-block: var(--bw-section-y);
}

.bw-hero--curve .bw-hero__content {
	position: relative;
	z-index: 1;
	max-width: 34rem;
}

.bw-hero--curve .bw-hero__media {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 62%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	clip-path: url("#bw-hero-curve");
}

.bw-hero--curve .bw-hero__image,
.bw-hero--curve .bw-hero__video,
.bw-hero--curve .bw-placeholder {
	width: 100%;
	height: 100%;
	max-height: none;
	border-radius: 0;
	object-fit: cover;
	/* Lange, zachte overgang naar het kleurvlak. Het beeld loopt door tot
	   achter de tekstkolom en lost daar op. De eerste tien procent blijft
	   volledig doorzichtig, zodat de tekst zelf altijd op schoon oat staat
	   en het contrast gegarandeerd blijft. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 6%, #000 48%);
	mask-image: linear-gradient(to right, transparent 0%, transparent 6%, #000 48%);
}

/* Tussen 60 en 78rem is er naast het beeld minder ruimte. De tekstkolom
   wordt daar smaller, zodat de langste regel binnen het volledig
   doorzichtige deel van de vervaging blijft en het contrast gegarandeerd
   is — ook als het beeld op die plek donker is. */
@media (min-width: 60rem) and (max-width: 84rem) {
	.bw-hero--curve .bw-hero__content {
		max-width: 25rem;
	}

	.bw-hero--curve .bw-hero__media {
		width: 58%;
	}

	.bw-hero--curve .bw-hero__image,
	.bw-hero--curve .bw-hero__video,
	.bw-hero--curve .bw-placeholder {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 10%, #000 56%);
		mask-image: linear-gradient(to right, transparent 0%, transparent 10%, #000 56%);
	}
}

/* Op smallere schermen komt het beeld onder de tekst te staan, over de
   volle breedte, met dezelfde boog. Anders wordt de tekst onleesbaar
   omdat er te weinig ruimte naast het beeld overblijft. */
@media (max-width: 60rem) {
	.bw-hero--curve .bw-hero__inner {
		min-height: 0;
		padding-block-end: 0;
		gap: var(--bw-space-xl);
	}

	.bw-hero--curve .bw-hero__content {
		max-width: none;
	}

	.bw-hero--curve .bw-hero__media {
		position: relative;
		inset: auto;
		width: calc(100% + var(--bw-gutter) * 2);
		margin-inline: calc(var(--bw-gutter) * -1);
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.bw-hero--curve .bw-hero__image,
	.bw-hero--curve .bw-hero__video,
	.bw-hero--curve .bw-placeholder {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Browsers zonder clip-path op een SVG-verwijzing tonen gewoon het hele
   beeld. Dat is minder mooi maar nergens kapot. */
@supports not (clip-path: url("#bw-hero-curve")) {
	.bw-hero--curve .bw-hero__media {
		border-end-start-radius: var(--bw-radius-lg);
	}
}

/* ---------------------------------------------------------------
 * Variant: homepage
 *
 * Volgens de hero-specificatie. Drie lagen boven elkaar:
 *   het beeld rechts, dat doorloopt tot de schermrand;
 *   de tekstkolom links, op een licht kleurvlak;
 *   een brede witte boog die de hero afsluit.
 *
 * Alle maten uit de specificatie staan hier als variabele bovenaan.
 * Wie de hero later hoger of lager wil, verandert één regel en niet
 * zeven plekken verderop in dit bestand.
 * ------------------------------------------------------------ */
.bw-hero--homepage {
	--bw-hero-h: clamp(30rem, 44vw, 41.25rem);   /* 480 tot 660px, excl. header */
	--bw-hero-curve-h: clamp(4rem, 8.5vw, 11.25rem); /* 64 tot 180px            */
	--bw-hero-curve-fill: var(--bw-white);
	--bw-hero-focal: 58% center;

	/* De specificatie vraagt 64 tot 80px binnenmarge; de standaardgoot
	   van het theme is smaller. Alleen hier ruimer, en omdat het beeld
	   met dezelfde variabele rekent schuift dat vanzelf mee. */
	--bw-gutter: clamp(1.25rem, 5vw, 4.5rem);

	position: relative;
	padding-block: 0;
	overflow: clip;
}

/* De hero loopt door tot achter de header, zodat het kleurvlak de
   bovenrand van het scherm raakt. Het beeld begint pas onder de header:
   navigatie op een foto is niet te lezen. */
.bw-header-over-hero .bw-hero--homepage {
	margin-block-start: calc(var(--bw-header-height) * -1);
}

/* Bewust NIET position: relative. Het beeld hangt aan de sectie en niet
   aan de container, zodat het doorloopt tot de schermrand — ook op een
   breed scherm waar de container zelf al ophoudt. */
.bw-hero--homepage .bw-hero__inner {
	min-height: var(--bw-hero-h);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-block-start: var(--bw-section-y);
	/* Ruimte onder de tekst voordat de boog begint te snijden. De boog
	   staat links het hoogst op ongeveer 62 procent van zijn hoogte;
	   daar komt de vrije ruimte uit de specificatie bovenop. */
	padding-block-end: calc(var(--bw-hero-curve-h) * 0.62 + 3.75rem);
}

.bw-header-over-hero .bw-hero--homepage .bw-hero__inner {
	min-height: calc(var(--bw-hero-h) + var(--bw-header-height));
	padding-block-start: calc(var(--bw-section-y) + var(--bw-header-height));
}

.bw-hero--homepage .bw-hero__content {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 32.5rem; /* 520px */
}

.bw-hero--homepage .bw-hero__intro {
	max-width: 33.5rem; /* 536px */
	margin-block-start: 1.375rem;
	font-size: 1.0625rem; /* 17px op mobiel, 18px vanaf tablet */
	line-height: 1.55;
	/* De specificatie zet de introtekst in midnight, niet in de zachtere
	   tint die de rest van het theme voor lopende tekst gebruikt. */
	color: var(--bw-surface-text);
}

.bw-hero--homepage .bw-hero__actions {
	margin-block-start: 1.875rem;
	gap: 1.125rem;
}

/* Knophoogte en tekstgrootte volgens de specificatie. De vorm van de
   knop blijft die van het theme: dat is een merkbrede keuze en geen
   heroteken. */
.bw-hero--homepage .bw-hero__actions .bw-btn {
	min-height: 3.25rem; /* 52px */
	padding-inline: 1.75rem;
	font-size: 1rem;
}

/* De drie bewijspunten, op één regel onder de knoppen. */
.bw-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.375rem;
	margin-block-start: 1.875rem;
	padding: 0;
	list-style: none;
}

.bw-hero__trust-item {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	font-size: 0.9375rem; /* 15px */
	font-weight: 500;
	line-height: 1.3;
	color: var(--bw-surface-text);
}

/* Scheidingsstreepje tussen de punten. Puur decoratief en dus in CSS:
   een schermlezer hoort drie items in een lijst, geen streepjes. */
.bw-hero__trust-item + .bw-hero__trust-item::before {
	content: "";
	flex: none;
	align-self: center;
	width: 1px;
	height: 1.875rem;
	margin-inline-end: 0.6875rem;
	background-color: rgba(25, 48, 91, 0.18);
}

.bw-hero__trust-icon {
	flex: none;
	width: 1.375rem;  /* 22px */
	height: 1.375rem;
	color: var(--bw-surface-text);
}

/* Het beeld. Absoluut geplaatst ten opzichte van de sectie, niet van de
   container: daardoor loopt het door tot de schermrand, ook op een breed
   scherm waar de container zelf al ophoudt. */
/* ---------------------------------------------------------------
 * De beeldhero op een vervolgpagina
 *
 * Zelfde compositie, zelfde typografie, zelfde beeld en zelfde
 * vervaging — alleen minder lucht eromheen. Drie dingen maakten de
 * hero op die pagina's onnodig hoog:
 *
 *  1. de hoogte rekende met 44vw, bedoeld voor de homepage;
 *  2. er kwam de headerhoogte bovenop, terwijl de header op een
 *     vervolgpagina boven het kruimelpad staat en niet boven de hero;
 *  3. onderaan zat ruimte gereserveerd voor de boog, en die staat hier
 *     niet meer.
 *
 * Samen zo'n 200px die nergens iets deed. De onderlinge afstanden
 * binnen het contentblok blijven ongemoeid; alleen de ruimte eromheen
 * gaat eraf.
 * ------------------------------------------------------------ */
.bw-hero--homepage.bw-hero--vervolg {
	/* Uit hetzelfde token als alle andere pagina-hero's. */
	--bw-hero-h: var(--bw-hero-pagina-h);
}

.bw-hero--homepage.bw-hero--vervolg .bw-hero__inner,
.bw-header-over-hero .bw-hero--homepage.bw-hero--vervolg .bw-hero__inner {
	min-height: var(--bw-hero-h);
	/* 40px boven, 48px onder. Onder iets meer dan boven, omdat het
	   kruimelpad er vlak boven staat en de hero daaronder moet
	   afsluiten. */
	padding-block: 2.5rem 3rem;
	align-items: center;
}

.bw-hero--homepage .bw-hero__media {
	position: absolute;
	inset-block: 0 0;
	inset-inline-end: 0;
	width: 62%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	z-index: 0;
}

.bw-header-over-hero .bw-hero--homepage .bw-hero__media {
	inset-block-start: var(--bw-header-height);
	height: calc(100% - var(--bw-header-height));
}

.bw-hero--homepage .bw-hero__image,
.bw-hero--homepage .bw-hero__video,
.bw-hero--homepage .bw-placeholder {
	width: 100%;
	height: 100%;
	max-height: none;
	border-radius: 0;
	object-fit: cover;
	object-position: var(--bw-hero-focal);
}

/* De vervaging van beeld naar kleurvlak.
 *
 * Als losse laag bóven het beeld, niet als masker op het beeld zelf:
 * daardoor zijn beeld en vervaging onafhankelijk te sturen en kan de
 * ene worden aangepast zonder de andere.
 *
 * De kleur komt uit het kleurvlak van de sectie via color-mix, niet uit
 * een vaste hexwaarde. Krijgt de hero een ander kleurvlak, dan klopt de
 * vervaging vanzelf; met een vaste kleur zou er een zichtbare rand
 * ontstaan.
 *
 * De overgang loopt bewust lang door: volledig dekkend tot 34 procent,
 * en pas rond 92 procent helemaal weg. Het beeld blijft daardoor tot ver
 * richting de tekst zichtbaar, maar wordt steeds zachter in plaats van
 * ergens in het midden af te kappen.
 */
.bw-hero--homepage .bw-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* De percentages uit de briefing zijn van de volle schermbreedte;
	   deze laag is 62 procent breed en ligt rechts. Omgerekend: een stop
	   op X procent van het scherm valt op (X − 38) ÷ 62 van deze laag. */
	background: linear-gradient(
		90deg,
		var(--bw-surface-bg) 0%,
		color-mix(in srgb, var(--bw-surface-bg) 98%, transparent) 8%,
		color-mix(in srgb, var(--bw-surface-bg) 90%, transparent) 23%,
		color-mix(in srgb, var(--bw-surface-bg) 70%, transparent) 39%,
		color-mix(in srgb, var(--bw-surface-bg) 45%, transparent) 55%,
		color-mix(in srgb, var(--bw-surface-bg) 20%, transparent) 71%,
		transparent 87%
	);
}

/* Browsers zonder color-mix vallen terug op een masker op het beeld.
   Minder fijn te sturen, maar visueel hetzelfde. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.bw-hero--homepage .bw-hero__media::after {
		background: none;
	}

	.bw-hero--homepage .bw-hero__image,
	.bw-hero--homepage .bw-hero__video,
	.bw-hero--homepage .bw-placeholder {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 10%, #000 90%);
		mask-image: linear-gradient(to right, transparent 0%, transparent 10%, #000 90%);
	}
}

/* De rij bewijspunten is breder dan de tekstkolom, zodat de drie punten
   op één regel passen zoals in het ontwerp. Hij blijft links uitgelijnd
   met titel en knoppen, en breekt alsnog netjes af wanneer de teksten
   langer worden dan waar het ontwerp op rekent. */
@media (min-width: 75rem) {
	.bw-hero--homepage .bw-hero__trust {
		width: max-content;
		max-width: 42rem;
	}
}

.bw-hero--homepage picture {
	display: contents;
}

/* De afspeelknop. Start de video met geluid en bediening. */
.bw-hero__play {
	position: absolute;
	inset-block-start: 50%;
	/* Iets links van het midden van de beeldkolom, maar wel voorbij de
	   vervaging: op de vervaging zelf zweeft de knop in het niets. */
	inset-inline-start: 46%;
	translate: -50% -50%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 1;
}

.bw-hero__play-circle {
	display: grid;
	place-items: center;
	width: 4.5rem;  /* 72px */
	height: 4.5rem;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background-color: rgba(91, 134, 157, 0.92);
	color: var(--bw-white);
	transition: scale var(--bw-duration) var(--bw-ease), background-color var(--bw-duration) var(--bw-ease);
}

.bw-hero__play-circle svg {
	width: 1.75rem;
	height: 1.75rem;
	margin-inline-start: 0.1875rem; /* optisch centreren van de driehoek */
}

.bw-hero__play:hover .bw-hero__play-circle {
	scale: 1.05;
	background-color: rgba(68, 106, 126, 0.95);
}

.bw-hero__play:focus-visible {
	outline: var(--bw-focus-width) solid var(--bw-midnight);
	outline-offset: var(--bw-focus-offset);
	border-radius: 50%;
}

.bw-hero__play[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bw-hero__play:hover .bw-hero__play-circle {
		scale: 1;
	}
}

/* De witte boog. Een vorm, geen afbeelding: hij rekt mee met elke
   schermbreedte en weegt niets. */
.bw-hero__curve {
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	display: block;
	width: 100%;
	height: var(--bw-hero-curve-h);
	z-index: 2;
	pointer-events: none;
}

.bw-hero__curve path {
	fill: var(--bw-hero-curve-fill);
}

/* Tussen 48 en 75rem is er naast het beeld minder ruimte. De tekstkolom
   krimpt mee en de vervaging begint later, zodat de langste regel binnen
   het volledig doorzichtige deel blijft. */
@media (min-width: 48rem) {
	.bw-hero--homepage .bw-hero__intro {
		font-size: 1.125rem;
	}
}

@media (min-width: 48rem) and (max-width: 75rem) {
	.bw-hero--homepage .bw-hero__content {
		/* Ruimer dan de 24rem van eerder. Bij die maat werd de kop op een
		   tablet vier of vijf regels hoog, en dan is geen enkele hero
		   nog even hoog te krijgen zonder er een van 640px van te maken. */
		max-width: 30rem;
	}

	.bw-hero--homepage .bw-hero__media {
		/* 50 in plaats van 58 procent: de tekst heeft hier meer nodig dan
		   het beeld. */
		width: 50%;
	}

	/* Smaller scherm, smallere tekstkolom: de vervaging moet hier eerder
	   dekkend zijn, anders komt beeld achter de tekst. */
	.bw-hero--homepage .bw-hero__media::after {
		background: linear-gradient(
			90deg,
			var(--bw-surface-bg) 0%,
			color-mix(in srgb, var(--bw-surface-bg) 95%, transparent) 14%,
			color-mix(in srgb, var(--bw-surface-bg) 75%, transparent) 34%,
			color-mix(in srgb, var(--bw-surface-bg) 45%, transparent) 56%,
			color-mix(in srgb, var(--bw-surface-bg) 18%, transparent) 76%,
			transparent 92%
		);
	}

	.bw-hero__play {
		inset-inline-start: 50%;
	}
}

/* Tablet: dezelfde hoogte voor iedereen, uit het tablet-token. */
@media (max-width: 74.99rem) and (min-width: 48rem) {
	.bw-hero--homepage.bw-hero--vervolg .bw-hero__inner,
	.bw-header-over-hero .bw-hero--homepage.bw-hero--vervolg .bw-hero__inner {
		min-height: var(--bw-hero-pagina-h-tablet);
		padding-block: 2.5rem 3rem;
	}
}

/* Onder 48rem staat alles onder elkaar: tekst, dan beeld, dan de boog.
   Naast het beeld is dan geen leesbare tekstkolom meer te maken. */
@media (max-width: 47.99rem) {
	.bw-hero--homepage {
		--bw-hero-curve-h: clamp(3.5rem, 18vw, 6.875rem);
	}

	.bw-hero--homepage .bw-hero__inner {
		display: grid;
		grid-template-columns: 1fr;
		min-height: 0;
		padding-block-end: 0;
		gap: var(--bw-space-xl);
	}

	.bw-header-over-hero .bw-hero--homepage .bw-hero__inner {
		min-height: 0;
	}

	.bw-hero--homepage .bw-hero__content {
		max-width: none;
	}

	/*
	 * Detailpagina's krijgen hun kop uit het CMS, en die kan lang zijn:
	 * "Opleidingscoördinator", "Content & communicatiespecialist". Op
	 * een telefoon past zo'n woord bij 38px niet op één regel en breekt
	 * de browser er middenin. Iets kleiner en het past wél heel, wat
	 * beter leest dan een afgebroken woord.
	 *
	 * Alleen deze variant: de homepage houdt zijn 38px.
	 */
	.bw-hero--pagina .bw-hero__title {
		font-size: clamp(1.875rem, 7.5vw, 2.375rem);
	}

	/* Vervolgpagina op mobiel: geen vaste hoogte, 40px boven en onder.
	   De foto staat hier ónder de tekst en heeft zijn eigen 4/3, dus
	   die wordt nergens afgesneden. */
	.bw-hero--homepage.bw-hero--vervolg .bw-hero__inner,
	.bw-header-over-hero .bw-hero--homepage.bw-hero--vervolg .bw-hero__inner {
		min-height: 0;
		padding-block: 2.5rem;
	}

	.bw-hero--homepage .bw-hero__media,
	.bw-header-over-hero .bw-hero--homepage .bw-hero__media {
		position: relative;
		inset: auto;
		width: calc(100% + var(--bw-gutter) * 2);
		margin-inline: calc(var(--bw-gutter) * -1);
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.bw-hero--homepage .bw-hero__media::after {
		background: none;
	}

	.bw-hero--homepage .bw-hero__image,
	.bw-hero--homepage .bw-hero__video,
	.bw-hero--homepage .bw-placeholder {
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Verticaal gestapeld, met een lijntje tussen de punten in plaats van
	   de verticale streepjes. Die passen niet naast elkaar. */
	.bw-hero__trust {
		display: grid;
		gap: 0;
	}

	.bw-hero__trust-item {
		padding-block: 0.6875rem;
	}

	.bw-hero__trust-item + .bw-hero__trust-item {
		border-block-start: 1px solid rgba(25, 48, 91, 0.18);
	}

	.bw-hero__trust-item + .bw-hero__trust-item::before {
		content: none;
	}

	.bw-hero__play {
		inset-inline-start: 50%;
	}

	.bw-hero__play-circle {
		width: 3.5rem;
		height: 3.5rem;
	}

	.bw-hero__play-circle svg {
		width: 1.375rem;
		height: 1.375rem;
	}
}

/* Tablet: de drie punten mogen over twee regels. */
@media (min-width: 48rem) and (max-width: 64rem) {
	.bw-hero__trust-item:nth-child(3) {
		flex-basis: 100%;
	}

	.bw-hero__trust-item:nth-child(3)::before {
		content: none;
	}
}


/* ---------------------------------------------------------------
 * Variant: pagina
 *
 * De hero van alle pagina's behalve de homepage. Geen beeld en geen
 * boog: die twee horen bij de homepage en nergens anders. Wat overblijft
 * is de opbouw uit de mock-up — titel links, intro en knoppen rechts,
 * gescheiden door een dunne lijn.
 *
 * Waarom geen beeld: een halve pagina foto bovenaan elke pagina duwt de
 * inhoud onder de vouw en zegt op een sectorpagina niets wat de titel
 * niet al zegt. De fotografie krijgt verderop de ruimte, in de blokken
 * die er inhoudelijk om vragen.
 * ------------------------------------------------------------ */
.bw-hero--pagina {
	position: relative;
	padding-block: 0;
	overflow: clip;
}

.bw-hero--pagina .bw-hero__inner {
	min-height: 0;
	align-items: start;
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--bw-section-y);
}

@media (min-width: 62rem) {
	.bw-hero--pagina .bw-hero__inner {
		/* 1.35 tegen 1: de kop is waar deze pagina over gaat en heeft
		   meer ruimte nodig dan het kolommetje met feiten ernaast. */
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 4vw, 4.5rem);
		align-items: center;
	}
}

.bw-hero--pagina .bw-hero__content {
	display: block;
	/*
	 * 40rem en niet 34rem. De maat van 34rem is een leesbreedte voor
	 * lopende tekst; een kop in een display-font heeft er meer nodig.
	 * "OPLEIDINGSCOÖRDINATOR" is op 64px in hoofdletters 672px breed
	 * en paste niet, waardoor de browser midden in het woord afbrak.
	 * De introtekst houdt zijn eigen, smallere maat.
	 */
	max-width: 44rem;
}

.bw-hero--pagina .bw-hero__intro {
	max-width: 34rem;
}

.bw-hero--pagina .bw-hero__intro {
	max-width: 30rem;
	margin-block-start: 1.375rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--bw-surface-muted, var(--bw-text-muted));
}

.bw-hero--pagina .bw-hero__actions {
	margin-block-start: 1.875rem;
	gap: 1rem;
}

/* De tweede kolom: intro en knoppen, met een dunne scheidingslijn zoals
   in de mock-up. Onder 62rem valt hij onder de titel en vervalt de lijn. */
@media (min-width: 62rem) {
	.bw-hero--pagina .bw-hero__aside {
		padding-inline-start: clamp(2rem, 3vw, 3.5rem);
		border-inline-start: 1px solid var(--bw-surface-border, var(--bw-border));
	}
}

.bw-hero--pagina .bw-hero__aside .bw-hero__intro,
.bw-hero--pagina .bw-hero__aside .bw-hero__actions {
	margin-block-start: 0;
}

.bw-hero--pagina .bw-hero__aside .bw-hero__actions {
	margin-block-start: 1.75rem;
}

/* Het decoratieve vormvlak rechtsboven uit de mock-up. Puur sfeer, dus
   niet in de markup maar als pseudo-element, en het verdwijnt op
   smalle schermen waar er geen ruimte voor is. */
.bw-hero--pagina::after {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--bw-header-height) * -1);
	inset-inline-end: -12%;
	width: 46rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--bw-surface-text) 4%, transparent);
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 62rem) {
	.bw-hero--pagina::after {
		display: none;
	}
}

.bw-hero--pagina .bw-hero__inner {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------
 * Elke reguliere pagina-hero even hoog
 *
 * Onderwijs, Contact, Vacatures, Academie en de rest gebruiken elk een
 * eigen variant — de een met een groot beeld, de ander met een
 * feitenkolom ernaast. Die varianten blijven, want ze doen iets
 * verschillends. Wat ze vanaf nu delen is de hoogte, uit één token.
 *
 * Dit blok staat bewust onderaan het bestand: de variantregels
 * hierboven hebben dezelfde of hogere specificiteit, en dit moet
 * winnen. Eén plek dus, geen !important en geen uitzondering per
 * pagina.
 *
 * min-height en geen height: content wordt nooit afgesneden. Past er
 * meer in dan de tekenlimieten toelaten, dan groeit de hero mee en
 * waarschuwt WordPress de redactie. Liever een hero die uit de pas
 * loopt dan een zin die halverwege ophoudt.
 * ------------------------------------------------------------ */
@media (min-width: 48rem) {
	.bw-hero.bw-hero--vervolg {
		display: grid;
		min-height: var(--bw-hero-pagina-h-tablet);
	}

	/* De inhoud vult de hoogte en staat verticaal in het midden. */
	.bw-hero.bw-hero--vervolg .bw-hero__inner {
		min-height: 100%;
		align-items: center;
	}

	/* De contactvariant had een eigen minimumhoogte; die komt nu uit
	   hetzelfde token. */
	.bw-hero--split.bw-hero--vervolg {
		min-height: var(--bw-hero-pagina-h-tablet);
	}

	/* De paginavariant lijnde bovenaan uit en had een eigen
	   ruimteverdeling. Binnen een vaste hoogte hoort de inhoud
	   gecentreerd, met dezelfde ruimte als de andere varianten. */
	.bw-hero--pagina.bw-hero--vervolg .bw-hero__inner,
	.bw-hero--compact.bw-hero--vervolg .bw-hero__inner {
		padding-block: 2.5rem 3rem;
	}
}

@media (min-width: 75rem) {
	.bw-hero.bw-hero--vervolg,
	.bw-hero--split.bw-hero--vervolg {
		min-height: var(--bw-hero-pagina-h);
	}
}