/* ---------------------------------------------------------------------------
 * Blok: Stappen. Twee weergaven:
 * - lijst: doorlopend donker vlak met vink-watermerken en de stappen als
 *   verticale lijst (blauw nummer links, witte titel en tekst rechts);
 * - kaarten: witte kaarten met groot blauw nummer in de gedeelde slider,
 *   waarbij de sectie halverwege de kaarten via de curve (dezelfde ellips
 *   3999x499 als elders) overgaat van licht naar donker.
 * ------------------------------------------------------------------------- */

/* Gedeeld: het stapnummer is altijd MobileXL-blauw en vet. */
.blok-stappen__nummer {
	display: block;
	font-weight: 700;
	color: var(--c-blauw);
}

/* ---------------------------------------------------------------------------
 * Weergave: donkere lijst
 * ------------------------------------------------------------------------- */

.blok-stappen--lijst {
	position: relative;
	overflow: hidden;
	padding: var(--blok-pt) 0 var(--blok-pb);
	background: var(--c-donkerblauw);
	color: var(--c-wit);
}

/* Vink-watermerken (beeldmerk op lage dekking), deels buiten beeld. */
.blok-stappen__watermerk {
	position: absolute;
	pointer-events: none;
}

.blok-stappen__watermerk svg {
	display: block;
	width: 100%;
	height: auto;
}

.blok-stappen__watermerk--links {
	top: -44px;
	left: 114px;
	width: 290px;
}

.blok-stappen__watermerk--rechts {
	right: -111px;
	bottom: 85px;
	width: 704px;
}

/* ---------------------------------------------------------------------------
 * Instap-curve (optie "Curve met beeldmerk", Figma 157:10377): het blok opent
 * met een licht vlak waarin het donkere vlak als ellips (dezelfde curve als
 * elders) omhoog buigt; op de top van de curve staat het beeldmerk in een
 * blauwe cirkel. Maten uit het ontwerp op 1920: curveband 113px (5.885vw),
 * badge 82px, kop 175px onder de crest. Het lichte stuk boven de crest is de
 * vaste blokruimte (--blok-pt), maar minstens de halve badge, zodat de badge
 * binnen het blok blijft als de ruimte vervalt (licht blok erboven): dan
 * staat de bovenkant van de badge op de blokafstand van de inhoud erboven.
 * ------------------------------------------------------------------------- */

.blok-stappen--lijst.blok-stappen--instap-curve {
	padding-top: 0; /* de instap-band en zijn marge regelen de bovenkant */
}

.blok-stappen__instap {
	--instap-top: max(var(--blok-pt), 41px);
	position: relative;
	height: calc(var(--instap-top) + 5.885vw);
	margin-bottom: 62px;
	background: var(--c-grijs-1);
}

.blok-stappen__instap::before {
	content: "";
	position: absolute;
	top: var(--instap-top);
	left: 50%;
	transform: translateX(-50%);
	width: 208.3%;
	aspect-ratio: 3999 / 499;
	border-radius: 50%;
	background: var(--c-donkerblauw);
}

.blok-stappen__instap-badge {
	position: absolute;
	top: var(--instap-top);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 82px;
	height: 82px;
}

.blok-stappen__instap-badge svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Linker watermerk hangt in het ontwerp 25px onder de crest van de curve. */
.blok-stappen--instap-curve .blok-stappen__watermerk--links {
	top: calc(max(var(--blok-pt), 41px) + 25px);
}

@media (max-width: 767px) {
	.blok-stappen__instap {
		--instap-top: max(var(--blok-pt), 28px);
		margin-bottom: 40px;
	}

	.blok-stappen__instap-badge {
		width: 56px;
		height: 56px;
	}

	.blok-stappen--instap-curve .blok-stappen__watermerk--links {
		top: calc(max(var(--blok-pt), 28px) + 15px);
	}
}

/* Kop en intro */

.blok-stappen--lijst .blok-stappen__kop {
	position: relative;
	max-width: 1279px;
}

.blok-stappen--lijst .blok-stappen__titel {
	margin: 0 0 30px;
	font-size: 50px; /* sectiekop uit het ontwerp: 50px */
	line-height: 1.22;
	color: var(--c-wit);
}

.blok-stappen--lijst .blok-stappen__intro {
	margin: 0;
}

.blok-stappen__intro p {
	margin: 0;
}

.blok-stappen__intro p + p {
	margin-top: 26px;
}

/* Lijst: nummer links (63px kolom, 39px ruimte), inhoud rechts. In het
 * ontwerp staat de lijst 21px links van de wrapperlijn (nummer uitgelijnd
 * op het optische begin). Dat inspringen gebruikt alleen de ruimte naast de
 * wrapper: tot ~1480px is die er niet en zouden de nummers tegen de
 * schermrand lopen. */
.blok-stappen__lijst {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 80px;
	max-width: 953px;
	margin: 135px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1200px) {
	.blok-stappen__lijst {
		margin-left: clamp(-21px, calc((var(--wrapper) + 2 * var(--gutter) - 100vw) / 2), 0px);
	}
}

.blok-stappen__stap {
	display: grid;
	grid-template-columns: 63px 1fr;
	column-gap: 39px;
	align-items: start;
}

.blok-stappen--lijst .blok-stappen__nummer {
	font-size: 46px;
	line-height: 1.22;
	letter-spacing: -0.92px;
}

.blok-stappen__stap-titel {
	margin: 0 0 16px;
	font-size: 32px;
	line-height: 44px;
	font-weight: 700;
	color: var(--c-wit);
}

.blok-stappen__stap-tekst p {
	margin: 0;
}

.blok-stappen__stap-tekst p + p {
	margin-top: 26px;
}

/* Een lijst direct na een inleidende alinea (klantcases: processtappen). */
.blok-stappen__stap-tekst p + ol,
.blok-stappen__stap-tekst p + ul {
	margin-top: 12px;
}

/* Optionele afbeelding per stap (schermafbeelding in een handleiding): op
 * ware grootte tot de kolombreedte, als witte kaart op het donkere vlak.
 * Tot desktop staat hij onder de tekst, in de tekstkolom. */
.blok-stappen__stap-beeld {
	grid-column: 2;
	display: block;
	max-width: min(100%, 720px);
	height: auto;
	margin-top: 28px;
	border-radius: 12px;
	background: var(--c-wit);
	box-shadow: 0 18px 40px rgb(0 0 0 / 25%);
}

/* Vanaf desktop: tekst links, beeld rechts. De lijst neemt dan de volle
 * wrapperbreedte; stappen zonder beeld houden hun leesbreedte. */
@media (min-width: 1200px) {
	.blok-stappen--met-beelden .blok-stappen__lijst {
		max-width: none;
	}

	.blok-stappen--met-beelden .blok-stappen__stap {
		grid-template-columns: 63px minmax(0, 1fr) minmax(0, 1.2fr);
	}

	.blok-stappen--met-beelden .blok-stappen__inhoud {
		grid-column: 2 / -1;
		max-width: 890px;
	}

	.blok-stappen--met-beelden .blok-stappen__stap--beeld .blok-stappen__inhoud {
		grid-column: 2;
		max-width: none;
		padding-right: 32px;
	}

	.blok-stappen__stap--beeld .blok-stappen__stap-beeld {
		grid-column: 3;
		grid-row: 1;
		margin-top: 10px; /* bovenkant gelijk met de eerste regel van de titel */
	}
}

/* ---------------------------------------------------------------------------
 * Weergave: kaarten-slider
 * ------------------------------------------------------------------------- */

.blok-stappen--kaarten {
	position: relative;
	overflow: hidden;
	padding: var(--blok-pt) 0 var(--blok-pb);
}

/* Donker vlak onderin met de curve (ellips) bovenaan: de crest ligt in het
 * ontwerp 248px onder de kaarttop. Het vlak groeit mee met de onderruimte. */
.blok-stappen__achtergrond {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(186px + var(--blok-pb));
	overflow: hidden;
	pointer-events: none;
}

/* Feedback designer (november 2026): de donkere band alleen als het blok
 * eronder ook donker begint; anders hield het donker abrupt op met een
 * rechte rand. inc/blok-ritme.php zet dan blok--onder-donker. */
.blok-stappen--kaarten.blok--onder-licht .blok-stappen__achtergrond {
	display: none;
}

.blok-stappen__achtergrond::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 208.3%;
	aspect-ratio: 3999 / 499;
	border-radius: 50%;
	background: var(--c-donkerblauw);
}

.blok-stappen__achtergrond::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 1.6vw; /* zichtbare boogdiepte aan de schermranden: 30.6px op 1920 */
	bottom: 0;
	background: var(--c-donkerblauw);
}

/* Kop en intro op het lichte vlak */

.blok-stappen--kaarten .blok-stappen__kop {
	position: relative;
	max-width: 1160px;
	margin-inline: auto;
	text-align: center;
}

.blok-stappen--kaarten .blok-stappen__titel {
	margin: 0 0 15px;
	font-size: 36px; /* sectiekop uit het ontwerp: 36/44 */
	line-height: 44px;
	color: var(--c-donkerblauw);
}

.blok-stappen--kaarten .blok-stappen__intro {
	margin: 0;
	color: var(--c-grijs-4);
}

/* Slider */

.blok-stappen__slider {
	margin-top: 48px;
}

.blok-stappen__zone {
	position: relative;
}

.blok-stappen__track {
	--slider-gap: 35.5px;
}

/* Kaart: wit, afgerond, subtiele schaduw; groeit mee met langere tekst. */
.blok-stappen__kaart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: calc((100% - 71px) / 3);
	min-height: 370px;
	padding: 39px 51px 40px;
	border-radius: var(--radius-sectie);
	background: var(--c-wit);
	box-shadow: 5px 5px 12.5px rgb(0 0 0 / 5%);
}

.blok-stappen--kaarten .blok-stappen__nummer {
	margin-left: -6px; /* nummer staat in het ontwerp 6px buiten de tekstlijn */
	font-size: 86px;
	line-height: 1.22;
	letter-spacing: -1.72px;
}

.blok-stappen__kaart-titel {
	margin: 20px 0 0;
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
	color: var(--c-zwart);
}

.blok-stappen__kaart-tekst {
	margin-top: 19px;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-donkerblauw);
}

.blok-stappen__kaart-tekst p {
	margin: 0;
}

.blok-stappen__kaart-tekst p + p {
	margin-top: 26px;
}

/* Premium hover: lift via .kaart-hover, schaduw verdiept subtiel. */
.blok-stappen__kaart.kaart-hover:hover {
	box-shadow: 5px 10px 25px rgb(0 0 0 / 10%);
}

/* Pijlen: op de buitenranden, verticaal gecentreerd op de kaarten. */

.blok-stappen__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
}

.blok-stappen__pijl--vorige {
	left: -18px;
}

.blok-stappen__pijl--volgende {
	right: -18px;
}

/* Bolletjes op het donkere vlak: wit, actief blauw. */

.blok-stappen--kaarten .slider-bolletjes {
	position: relative;
	margin-top: 53px;
}

.blok-stappen--kaarten .slider-bolletje {
	background: var(--c-wit);
}

.blok-stappen--kaarten .slider-bolletje.is-actief {
	background: var(--c-blauw);
}

/* Zonder donkere band staan de bolletjes op licht: donker, actief blauw. */
.blok-stappen--kaarten.blok--onder-licht .slider-bolletje {
	background: var(--c-donkerblauw);
}

.blok-stappen--kaarten.blok--onder-licht .slider-bolletje.is-actief {
	background: var(--c-blauw);
}

/* Tablet: twee kaarten in beeld. */
@media (max-width: 1199px) and (min-width: 768px) {
	.blok-stappen__kaart {
		width: calc((100% - 35.5px) / 2);
	}
}

/* Mobiel (geen mobiel ontwerp: ingevuld in lijn met de andere blokken). */
@media (max-width: 767px) {
	/* Lijst */
	.blok-stappen__watermerk--links {
		top: -18px;
		left: 16px;
		width: 150px;
	}

	.blok-stappen__watermerk--rechts {
		right: -70px;
		bottom: 30px;
		width: 340px;
	}

	.blok-stappen--lijst .blok-stappen__titel {
		margin-bottom: 15px;
		font-size: 26px;
		line-height: 34px;
	}

	.blok-stappen__lijst {
		gap: 40px;
		margin-top: 44px;
	}

	.blok-stappen__stap {
		grid-template-columns: 44px 1fr;
		column-gap: 16px;
	}

	.blok-stappen--lijst .blok-stappen__nummer {
		font-size: 30px;
		letter-spacing: -0.6px;
	}

	.blok-stappen__stap-titel {
		margin-bottom: 10px;
		font-size: 20px;
		line-height: 28px;
	}

	.blok-stappen__stap-tekst {
		font-size: 14px;
		line-height: 24px;
	}

	.blok-stappen__stap-beeld {
		margin-top: 18px;
		border-radius: 8px;
	}

	/* Kaarten-slider */
	.blok-stappen--kaarten .blok-stappen__titel {
		margin-bottom: 10px;
		font-size: 22px;
		line-height: 28px;
	}

	.blok-stappen__slider {
		margin-top: 30px;
	}

	/* Smallere kaarten zodat de volgende kaart binnen de wrapper doorkijkt;
	 * het spoor zelf krijgt bewust geen extra padding of marge. */
	.blok-stappen__kaart {
		min-height: 0;
		padding: 26px 28px 30px;
		border-radius: 18px;
	}

	.blok-stappen--kaarten .blok-stappen__nummer {
		margin-left: -4px;
		font-size: 56px;
		letter-spacing: -1.12px;
	}

	.blok-stappen__kaart-titel {
		margin-top: 12px;
		font-size: 18px;
		line-height: 26px;
	}

	.blok-stappen__kaart-tekst {
		margin-top: 12px;
		font-size: 14px;
		line-height: 24px;
	}

	.blok-stappen__pijl {
		display: none;
	}

	.blok-stappen__achtergrond {
		height: calc(145px + var(--blok-pb)); /* crest op ~2/3 van de kaarthoogte, zoals op desktop */
	}

	.blok-stappen--kaarten .slider-bolletjes {
		margin-top: 32px;
	}
}