/*
 * Sectie 01: hero. Beeld hero-man-hoofdband als rij-achtergrond, met het Chocolate-verloop uit Figma als overlay.
 * Desktop: 828px hoog (140 boven, 568 inhoud, 120 onder). Tablet en gsm: beeld als band bovenaan, tekst eronder.
 */

/* beelduitsnede zoals in Figma (STRETCH met crop x 7,35% tot 96,9%): cover, horizontaal op 69,5%;
   verticaal 10% zodat de hoofdband op schermen breder dan 1932px (waar het beeld hoger wordt dan de sectie) niet wegvalt */
.wpb_row.fm-s01 > .row-bg-wrap .row-bg {
	background-size: cover !important;
	background-position: 69.5% 10% !important;
}
.wpb_row.fm-s01 > .row-bg-wrap .row-bg-overlay {
	background: linear-gradient(90deg, rgba(43, 26, 18, .94) 0%, rgba(43, 26, 18, .82) 30%, rgba(43, 26, 18, .35) 55%, rgba(43, 26, 18, 0) 75%) !important;
	opacity: 1 !important;
}

.fm-s01 h1.fm-h1 {
	color: var(--fm-egg);
	font-weight: 300;
}
/* vette regel onder de titel (copy van 15-10-2026); de intro schuift 12px eronder. Op desktop staan regel en intro
   in 610px (was 552) met 20 en 8px ertussen, zodat de knoppen op 1512x762 boven de vouw blijven (offline gemeten: 20px marge) */
.fm-s01 p.fm-s01-lead {
	max-width: 552.64px;
	margin-top: 28px;
	font-size: 20px;
	line-height: 31px;
	font-weight: 500;
	color: var(--fm-egg);
}
.fm-s01 p.fm-s01-lead + p.fm-s01-intro { margin-top: 12px; }
.fm-s01 p.fm-s01-intro {
	max-width: 552.64px;
	margin-top: 28px;
	font-size: 20px;
	line-height: 33px;
	font-weight: 400;
	color: var(--fm-egg-85);
}
.fm-s01 p.fm-knoppen { margin-top: 40px; }
/* Salient dimt links in een lichte tekstkolom (.span_12.light ... a:not(:hover) { opacity: .7 }) en maakt ze wit */
.fm-s01 .span_12.light .wpb_text_column a.fm-knop { opacity: 1; color: var(--fm-egg); }

/* Figma tekent de regels van Poppins 0,1em dichter dan de opgegeven regelhoogte (lh min de lineGap van het font),
   met de eerste regel op dezelfde plaats. Hier hetzelfde, en de vakken houden hun Figma-hoogte (282 en 165). */
@media (min-width: 1000px) {
	/* de titel is sinds 15-10 (vraag Dario) 10% kleiner dan in het ontwerp (92px): vanaf ongeveer 1211px 82,8px; smaller schaalt hij mee,
	   zodat hij niet over het hoofd van de man loopt. Eerst 20% kleiner (versies/01-hero.v4.css), dat was te klein. Ontwerpmaat: versies/01-hero.v3.css */
	.fm-s01 h1.fm-h1 { font-size: clamp(68.4px, 6.84vw, 82.8px); line-height: .92em; letter-spacing: -.035em; padding-bottom: .3em; }
	.fm-s01 p.fm-s01-intro { line-height: 31px; padding: 1px 0 9px; }
	.fm-s01 p.fm-s01-lead { margin-top: 20px; max-width: 610px; }
	.fm-s01 p.fm-s01-lead + p.fm-s01-intro { margin-top: 8px; max-width: 610px; }
}

/* tablet en gsm: de man bovenaan in beeld, verloop van onder naar boven, tekst op de donkere onderkant */
@media (max-width: 999px) {
	.wpb_row.fm-s01 {
		--fm-s01-band: 540px;
		padding-top: calc(var(--fm-s01-band) - 96px) !important;
		padding-bottom: 80px !important;
	}
	.wpb_row.fm-s01 > .row-bg-wrap .row-bg {
		background-size: auto var(--fm-s01-band) !important;
		background-position: 100% 0 !important;
	}
	.wpb_row.fm-s01 > .row-bg-wrap .row-bg-overlay {
		background: linear-gradient(180deg,
			rgba(43, 26, 18, 0) 0,
			rgba(43, 26, 18, 0) calc(var(--fm-s01-band) * .4),
			rgba(43, 26, 18, .45) calc(var(--fm-s01-band) * .66),
			rgba(43, 26, 18, .88) calc(var(--fm-s01-band) * .86),
			#2b1a12 var(--fm-s01-band)) !important;
	}
	.fm-s01 p.fm-s01-intro { max-width: 600px; font-size: 18px; line-height: 30px; margin-top: 20px; }
	.fm-s01 p.fm-s01-lead { max-width: 600px; font-size: 18px; line-height: 30px; margin-top: 20px; }
	.fm-s01 p.fm-s01-lead + p.fm-s01-intro { margin-top: 10px; }
	.fm-s01 p.fm-knoppen { margin-top: 32px; }
	.fm-s01 h1.fm-h1 { font-size: 50.4px; line-height: 54px; letter-spacing: -1.62px; }   /* 10% kleiner dan .fm-h1 (56/60) */
}
@media (max-width: 690px) {
	.wpb_row.fm-s01 {
		--fm-s01-band: 400px;
		padding-top: calc(var(--fm-s01-band) - 72px) !important;
		padding-bottom: 64px !important;
	}
	.fm-s01 p.fm-s01-intro,
	.fm-s01 p.fm-s01-lead { font-size: 16px; line-height: 26.4px; }
	.fm-s01 p.fm-knoppen { margin-top: 28px; }
	.fm-s01 h1.fm-h1 { font-size: 37.8px; line-height: 41.4px; letter-spacing: -1.08px; }   /* 10% kleiner dan .fm-h1 (42/46) */
}