/*
 * Sectie 05: Your program, step by step (anker #trajectory). Donker, drie stappen met een verlooplijn door de iconen.
 * Maten uit Figma (tree.txt 263-330): stappen 352px met gap 24, icoon 82px met binnenring 2px Burnt,
 * lijn 2px van Burnt (#d76525) naar Tan (#ebb263) door het midden van de iconen.
 * Op tablet en gsm een verticale tijdlijn: icoon links, tekst rechts, lijn verticaal tussen de iconen.
 */

.fm-s05 {
	--fm05-icoon: 82px;
	--fm05-svg: 34px;
	--fm05-gap: 24px;
	color: var(--fm-egg);
}

/* ---------- kop ---------- */

.fm-s05 .fm-s05-kop h2.fm-h2 { color: var(--fm-egg); font-weight: 300; margin-bottom: 10.1px; }
.fm-s05 .fm-s05-kop .fm-lead { color: var(--fm-egg); margin-bottom: 14.4px; }
.fm-s05 .fm-s05-kop .fm-intro { max-width: 860px; }   /* was 641 (ontwerp); breder op vraag van Dario 15-10, minder regels */
.fm-s05 .fm-s05-kop .fm-h2 + .fm-intro { margin-top: 18px; }   /* zonder lead (copy 15-10) */

/* ---------- stappen: grid met 3 kolommen, gap 24 ---------- */

.fm-s05 .fm-s05-stappen {
	position: relative;
	margin: 73px 0 0;
	padding: 0;
}
.fm-s05 .fm-s05-stappen > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fm05-gap);
	float: none;
	width: 100%;
	margin: 0;
}
.fm-s05 .fm-s05-stappen > .row_col_wrap_12_inner::before,
.fm-s05 .fm-s05-stappen > .row_col_wrap_12_inner::after { display: none; }
.fm-s05 .fm-s05-stappen > .row_col_wrap_12_inner > .wpb_column {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

/* de verlooplijn achter de iconen, over de volle breedte (Figma: y 102 in de container met 62 padding) */
.fm-s05 .fm-s05-stappen::before {
	content: "";
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: calc(var(--fm05-icoon) / 2 - 1px);
	width: auto;
	height: 2px;
	background: linear-gradient(90deg, var(--fm-burnt), #ebb263);
	pointer-events: none;
}

/* ---------- één stap ---------- */

.fm-s05 .fm-s05-stap { position: relative; }
/* icoon: cirkel Chocolate met binnenring 2px Burnt en de lijntekening (34px) */
.fm-s05 .fm-s05-stap::before {
	content: "";
	position: relative;
	z-index: 1;
	display: block;
	width: var(--fm05-icoon);
	height: var(--fm05-icoon);
	margin-bottom: 27.25px;
	border-radius: 50%;
	background: var(--fm-chocolate) center / var(--fm05-svg) var(--fm05-svg) no-repeat;
	box-shadow: inset 0 0 0 2px var(--fm-burnt);
}
.fm-s05 .fm-s05-stap--intake::before { background-image: url('../../svg/stap-intake.svg'); }
.fm-s05 .fm-s05-stap--training::before { background-image: url('../../svg/stap-training.svg'); }
.fm-s05 .fm-s05-stap--meting::before { background-image: url('../../svg/stap-meting.svg'); }

.fm-s05 .fm-s05-stap p.fm-s05-nr {
	font-weight: 600;
	font-size: 14px;
	line-height: 23.1px;
	color: var(--fm-burnt);
	margin-bottom: 4.3px;
}
.fm-s05 .fm-s05-stap h3.fm-s05-titel {
	font-weight: 400;
	font-size: 22px;
	line-height: 36.3px;
	letter-spacing: -.22px;
	color: var(--fm-egg);
	margin-bottom: 10px;
}
.fm-s05 .fm-s05-stap p.fm-s05-tekst {
	max-width: 342px;
	font-size: 16px;
	line-height: 26.4px;
	color: var(--fm-egg-72);
	margin-bottom: 16px;
}
.fm-s05 .fm-s05-stap p.fm-s05-pil { display: flex; }
.fm-s05 .fm-s05-pil span {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--fm-chocolate-2);
	color: #ebb263;
	font-size: 13px;
	line-height: 22px;
	white-space: nowrap;
}

/* ---------- tablet en gsm: verticale tijdlijn ---------- */

@media (max-width: 999px) {
	.fm-s05 { --fm05-gap: 40px; --fm05-tekst-links: 32px; }
	.fm-s05 .fm-s05-stappen { margin-top: 56px; }
	.fm-s05 .fm-s05-stappen > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); }
	.fm-s05 .fm-s05-stappen::before { display: none; }
	.fm-s05 .fm-s05-stap {
		min-height: var(--fm05-icoon);
		padding-left: calc(var(--fm05-icoon) + var(--fm05-tekst-links));
		padding-top: 9px;
	}
	.fm-s05 .fm-s05-stap::before {
		position: absolute;
		left: 0;
		top: 0;
		margin: 0;
	}
	/* lijnstuk van het midden van dit icoon tot het midden van het volgende */
	.fm-s05 .fm-s05-stappen .wpb_column:not(:last-child) .fm-s05-stap::after {
		content: "";
		position: absolute;
		left: calc(var(--fm05-icoon) / 2 - 1px);
		top: calc(var(--fm05-icoon) / 2);
		bottom: calc(-1 * (var(--fm05-gap) + var(--fm05-icoon) / 2));
		display: block;
		width: 2px;
		background: linear-gradient(180deg, var(--fm-burnt), #e18b44);
		pointer-events: none;
	}
	.fm-s05 .fm-s05-stappen .wpb_column:nth-child(2) .fm-s05-stap::after {
		background: linear-gradient(180deg, #e18b44, #ebb263);
	}
	.fm-s05 .fm-s05-stap p.fm-s05-tekst { max-width: 520px; }
}

@media (max-width: 690px) {
	.fm-s05 { --fm05-icoon: 52px; --fm05-svg: 24px; --fm05-gap: 36px; --fm05-tekst-links: 18px; }
	.fm-s05 .fm-s05-stappen { margin-top: 44px; }
	.fm-s05 .fm-s05-stap { padding-top: 0; }
	.fm-s05 .fm-s05-stap p.fm-s05-nr { margin-bottom: 2px; }
	.fm-s05 .fm-s05-stap h3.fm-s05-titel { font-size: 20px; line-height: 30px; margin-bottom: 8px; }
}