/**
 * Component: Stappen / proces
 */

.bw-stappen__list {
	display: grid;
	gap: var(--bw-grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.bw-stappen__item {
	position: relative;
	display: grid;
	gap: var(--bw-space-2xs);
}

.bw-stappen__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--bw-radius-pill);
	border: 2px solid var(--bw-accent-text, var(--bw-caramel));
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-lg);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--bw-accent-text, var(--bw-caramel-ink));
	background: var(--bw-surface-bg, var(--bw-white));
	position: relative;
	z-index: 1;
}

.bw-stappen__title {
	font-size: var(--bw-text-lg);
}

.bw-stappen__text {
	color: var(--bw-surface-muted, var(--bw-text-muted));
	font-size: var(--bw-text-base);
}

/* Horizontaal: kolommen met een verbindingslijn achter de markers. */
@media (min-width: 52rem) {
	.bw-stappen--horizontal .bw-stappen__list {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.bw-stappen--horizontal .bw-stappen__item::before {
		content: "";
		position: absolute;
		inset-block-start: 1.25rem;
		inset-inline-start: 2.5rem;
		width: calc(100% - 2.5rem + var(--bw-grid-gap));
		height: 2px;
		background: var(--bw-surface-border, var(--bw-border));
	}

	.bw-stappen--horizontal .bw-stappen__item:last-child::before {
		display: none;
	}
}

/* Verticaal: lijn langs de linkerkant. */
.bw-stappen--vertical .bw-stappen__item {
	grid-template-columns: 2.5rem 1fr;
	gap: var(--bw-space-md);
	align-items: start;
	padding-block-end: var(--bw-space-lg);
}

.bw-stappen--vertical .bw-stappen__item::before {
	content: "";
	position: absolute;
	inset-block-start: 2.5rem;
	inset-block-end: 0;
	inset-inline-start: 1.2rem;
	width: 2px;
	background: var(--bw-surface-border, var(--bw-border));
}

.bw-stappen--vertical .bw-stappen__item:last-child::before {
	display: none;
}

.bw-stappen--vertical .bw-stappen__body {
	display: grid;
	gap: var(--bw-space-3xs);
}

/* ---------------------------------------------------------------
 * Accentvariant
 *
 * Vier stappen, vier kleuren. De mock-up gebruikt blauw, groen, oranje
 * en paars; groen en paars staan niet in de brandguide, dus hier vier
 * tinten uit de eigen palet. Donkerblauw blijft dominant op de pagina.
 *
 * De kleur zit alleen op het cijfervlak. Kleur draagt hier geen
 * betekenis die niet ook in de tekst staat — de nummers en de titels
 * doen dat werk — dus wie kleur niet ziet mist niets.
 * ------------------------------------------------------------ */
.bw-stappen--accent .bw-stappen__marker {
	color: var(--bw-white);
}

.bw-stappen--accent .bw-stappen__item:nth-child(4n + 1) .bw-stappen__marker {
	background-color: var(--bw-midnight);
}

.bw-stappen--accent .bw-stappen__item:nth-child(4n + 2) .bw-stappen__marker {
	background-color: var(--bw-jeans-deep);
}

.bw-stappen--accent .bw-stappen__item:nth-child(4n + 3) .bw-stappen__marker {
	background-color: var(--bw-caramel-ink);
}

.bw-stappen--accent .bw-stappen__item:nth-child(4n + 4) .bw-stappen__marker {
	background-color: var(--bw-midnight-tint);
}