/* ==========================================================================
   Blok: Werkwijze — trapsgewijze stappen.
   Stap 1 bovenaan, elke volgende stap een trede lager. Bij het scrollen
   zakken de treden mee (zie steps.js).
   ========================================================================== */

.steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 40px;
	align-items: start;
}
@media (min-width: 620px) {
	.steps { grid-template-columns: repeat(2, 1fr); }
	.steps .step:nth-child(2n) { margin-top: 64px; }
}
@media (min-width: 1000px) {
	.steps {
		grid-template-columns: repeat(4, 1fr);
		gap: 0 40px;
		/* De vier stappen staan op één lijn; de trap wordt volledig door het
		   scrollen gemaakt (steps.js). Hier staat alleen de ruimte gereserveerd
		   die de laagste trede nodig heeft, zodat de pagina niet verspringt. */
		padding-bottom: 288px;
	}
	.steps .step,
	.steps .step:nth-child(2n) { margin-top: 0; }
}

/* Minder dan vier stappen: het rooster past zich aan */
@media (min-width: 1000px) {
	.steps[data-count="1"] { grid-template-columns: 1fr; padding-bottom: 0; }
	.steps[data-count="2"] { grid-template-columns: repeat(2, 1fr); padding-bottom: 96px; }
	.steps[data-count="3"] { grid-template-columns: repeat(3, 1fr); padding-bottom: 192px; }
}

.step { position: relative; }

.step__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	will-change: transform;
	transform: translate3d(0, var(--stair-shift, 0px), 0);
}

.step__index {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: rgba(var(--ink-rgb), 0.45);
	margin-bottom: 10px;
}

.step h3 {
	font-size: 1.35rem;
	line-height: 1.25;
	margin-bottom: 18px;
	max-width: 14ch;
}
@media (min-width: 620px) {
	/* Gelijke kophoogte, zodat de treden even hoog blijven */
	.step h3 { min-height: 2.5em; }
}

.step__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-s);
	overflow: hidden;
	margin-bottom: 18px;
}
.step__media picture,
.step__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.step p {
	color: rgba(var(--ink-rgb), 0.7);
	font-size: 0.95rem;
	max-width: 34ch;
}

.bg-blauw .step__index,
.bg-donker .step__index { color: rgba(255, 255, 255, 0.6); }
.bg-blauw .step p,
.bg-donker .step p { color: rgba(255, 255, 255, 0.8); }