/* ---------------------------------------------------------------------------
 * 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: 106px 0 110px;
	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: 154px licht boven de crest,
 * curveband 113px (5.885vw), badge 82px, kop 175px onder de crest.
 * ------------------------------------------------------------------------- */

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

.blok-stappen__instap {
	position: relative;
	height: calc(154px + 5.885vw);
	margin-bottom: 62px;
	background: var(--c-grijs-1);
}

.blok-stappen__instap::before {
	content: "";
	position: absolute;
	top: 154px;
	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: 154px;
	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(154px + 25px);
}

@media (max-width: 767px) {
	.blok-stappen__instap {
		height: calc(60px + 5.885vw);
		margin-bottom: 40px;
	}

	.blok-stappen__instap::before,
	.blok-stappen__instap-badge {
		top: 60px;
	}

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

	.blok-stappen--instap-curve .blok-stappen__watermerk--links {
		top: calc(60px + 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). */
.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: -21px;
	}
}

.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;
}

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

.blok-stappen--kaarten {
	position: relative;
	overflow: hidden;
	padding: 106px 0 44px;
}

/* Donker vlak onderin met de curve (ellips) bovenaan: de crest ligt in het
 * ontwerp 248px onder de kaarttop, 223px boven de blokonderkant. */
.blok-stappen__achtergrond {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 230px;
	overflow: hidden;
	pointer-events: 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);
}

/* 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--lijst {
		padding: 56px 0 70px;
	}

	.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;
	}

	/* Kaarten-slider */
	.blok-stappen--kaarten {
		padding: 44px 0 36px;
	}

	.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__track {
		--slider-gap: 17px;
	}

	.blok-stappen__kaart {
		width: 300px;
		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: 181px; /* crest op ~2/3 van de kaarthoogte, zoals op desktop */
	}

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