/*
 * Rebel Farms — "Hoe werkt je broccoli cress abonnement?" (homepage, #hoe-werk-het).
 *
 * Standalone stylesheet (NIET onderdeel van de sass/CodeKit build).
 * Enqueued vanuit functions.php → rebel_hoe_werkt_het_assets().
 *
 * Legt per stap het grote cijfer links naast de illustratie, met de
 * uitlegtekst daaronder over de volle kolombreedte:
 *
 *   ┌──────┬───────────────┐
 *   │  1.  │  illustratie  │
 *   ├──────┴───────────────┤
 *   │  uitlegtekst …       │
 *   └──────────────────────┘
 *
 * De selector pakt de 3 genestelde stap-kolommen binnen de sectie. Zet
 * eventueel de extra CSS-class `rebel-hw-step` op een kolom als de structuur
 * in de editor verandert — beide selectors werken.
 *
 * LET OP: gebruik hier NIET de class `rebel-step`. Die is al in gebruik door
 * de uitlegsectie #stappen (MOND → MICROBIOOM); custom.js zet die class daar
 * automatisch op de rijen. Vandaar de `hw`-prefix (hoe-werkt-het).
 */

#hoe-werk-het .wp-block-columns .wp-block-columns > .wp-block-column,
.rebel-hw-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: end;
	/* Gutenberg-kolommen zijn flex-items van gelijke hoogte. Heeft een stap
	   minder regels tekst dan de andere, dan houdt die kolom ruimte over. Zonder
	   align-content:start verdeelt de grid die restruimte over de rijen, waardoor
	   de illustratie én de tekst omlaag zakken (stap 1 kreeg zo ~14px extra lucht
	   boven de tekst). Met start blijven de rijen op contenthoogte en zakt de
	   restruimte naar de onderkant van de kolom. */
	align-content: start;
}

/* het grote cijfer (1 / 2 / 3) — Bellamy, linksonder naast de illustratie */
#hoe-werk-het .wp-block-columns .wp-block-columns > .wp-block-column > p.bellamy_second,
.rebel-hw-step > p.bellamy_second {
	grid-column: 1;
	margin: 0;
	line-height: 0.8;
}

/* de illustratie */
#hoe-werk-het .wp-block-columns .wp-block-columns > .wp-block-column > figure.wp-block-image,
.rebel-hw-step > figure.wp-block-image {
	grid-column: 2;
	margin: 0;
	align-self: end;
}

#hoe-werk-het .wp-block-columns .wp-block-columns > .wp-block-column > figure.wp-block-image img,
.rebel-hw-step > figure.wp-block-image img {
	/* Gelijke hoogte voor alle drie de illustraties, ongeacht hun
	   verschillende breedte-hoogteverhouding (zoals in het ontwerp). */
	height: clamp(74px, 8vw, 118px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left bottom;
}

/* de uitlegtekst onder cijfer + illustratie */
#hoe-werk-het .wp-block-columns .wp-block-columns > .wp-block-column > p:not(.bellamy_second),
.rebel-hw-step > p:not(.bellamy_second) {
	grid-column: 1 / -1;
	margin-top: 1.25rem;
	margin-bottom: 0;
	/* niet meebewegen met align-items:end van de grid — de tekst hoort
	   direct onder de illustratie te beginnen, niet onderaan zijn rij. */
	align-self: start;
}

/* Mobiel: de drie stappen staan onder elkaar (Gutenberg stackt de kolommen
   onder 782px). Iets meer lucht tussen de stappen. */
@media only screen and (max-width: 781px) {
	#hoe-werk-het .wp-block-columns .wp-block-columns > .wp-block-column:not(:first-child),
	.rebel-hw-step:not(:first-child) {
		margin-top: 2.25rem;
	}
}