/*
 * Sectie 07: Start with confidence (Zand, anker #evidence).
 * Links de casekaart (628px, beeld 628x660), rechts twee kaarten van 448px (beeld 448x224), gap 28.
 * Maten uit Figma (tree.txt regels 379-462). Figma rondt elke tekstbox naar boven af op hele pixels
 * (lh 26.4 wordt een box van 27); de marges hieronder vangen dat op, zodat elke tekst op dezelfde y staat.
 */

/* ---------- kop ---------- */
.fm-s07 .fm-s07-kop .fm-lead { margin-top: 10.1px; }
.fm-s07 .fm-s07-kop .fm-intro { margin-top: 14.41px; max-width: 860px; }   /* was 641 (ontwerp); breder op vraag van Dario 15-10, zoals 03 en 05 */
.fm-s07 .fm-s07-kop .fm-h2 + .fm-intro { margin-top: 18px; }   /* zonder lead (copy 15-10) */

/* ---------- kaarten: grid 628 / 448 met gap 28 ---------- */
.fm-s07 .fm-s07-kaarten { margin: 57px 0 0; }
.fm-s07 .fm-s07-kaarten > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: minmax(0, 627.67fr) minmax(0, 448.33fr);
	gap: 28px;
	margin: 0;
	width: 100%;
}
/* Salients clearfix (::before/::after) zou anders een extra gridcel maken */
.fm-s07 .fm-s07-kaarten > .row_col_wrap_12_inner::before,
.fm-s07 .fm-s07-kaarten > .row_col_wrap_12_inner::after { content: none; display: none; }
.fm-s07 .fm-s07-kaarten > .row_col_wrap_12_inner > .wpb_column {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	min-height: 0;
}
.fm-s07 .fm-s07-kolom > .vc_column-inner { height: 100%; padding: 0; }
/* kaarten vullen de kolom: de onderkanten links en rechts lopen gelijk, ook als de tekst anders terugloopt */
.fm-s07 .fm-s07-kolom > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	gap: 28px;
	height: 100%;
}
.fm-s07 .fm-s07-kolom .fm-s07-kaart:last-child { flex-grow: 1; }

/* ---------- kaart ---------- */
/* het tekstblok is de kaart (Salient zet er geen .wpb_wrapper in); het beeld loopt met negatieve marges tot de rand */
.fm-s07 .fm-s07-kaart {
	--fm-s07-pad: 26px;
	overflow: hidden;
	padding: 0 var(--fm-s07-pad) 24.4px;
	border-radius: 24px;
	background: var(--fm-creme);
}
.fm-s07 .fm-s07-kaart--case { --fm-s07-pad: 36px; padding-bottom: 40.55px; }

/* beeld over de volle kaartbreedte (ook als wpautop het in een p zet) */
body .fm-s07 .fm-s07-kaart img.fm-s07-beeld {
	display: block;
	width: calc(100% + 2 * var(--fm-s07-pad)) !important;
	max-width: none !important;
	height: auto;
	aspect-ratio: 2 / 1;
	margin: 0 calc(-1 * var(--fm-s07-pad));
	object-fit: cover;
	object-position: 50% 25%;
	background: var(--fm-zand-2);
}
body .fm-s07 .fm-s07-kaart--case img.fm-s07-beeld {
	aspect-ratio: 628 / 660;
	object-position: 50% 50%;
}

/* label (Burnt) en kaarttitel */
body .fm-s07 .fm-s07-kaart p.fm-s07-label {
	margin: 33.25px 0 0; /* 24 + 9.25 */
	font-weight: 500;
	font-size: 14px;
	line-height: 23.1px;
	color: var(--fm-burnt);
}
body .fm-s07 .fm-s07-kaart h3.fm-s07-titel {
	margin: 6.65px 0 0;
	font-weight: 500;
	font-size: 20px;
	line-height: 33px;
	letter-spacing: 0;
	color: var(--fm-chocolate);
}
body .fm-s07 .fm-s07-kaart p.fm-s07-alinea {
	margin: 10px 0 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 24.75px;
	color: var(--fm-choc-74);
}
body .fm-s07 .fm-s07-kaart p.fm-s07-alinea strong { font-weight: 600; color: inherit; }

/* privacyknop: kleiner dan de standaardknop (padding 10/20, Medium 14) */
body .fm-s07 .fm-s07-kaart p.fm-s07-actie { margin: 20px 0 0; }
body .fm-s07 a.fm-knop.fm-s07-knop {
	padding: 10px 20px;
	font-size: 14px;
	line-height: 23.1px;
}

/* ---------- casekaart ---------- */
body .fm-s07 .fm-s07-kaart--case p.fm-s07-label {
	margin-top: 41.25px; /* 32 + 9.25 */
	font-size: 16px;
	line-height: 26.4px;
}
body .fm-s07 .fm-s07-kaart--case h3.fm-s07-titel {
	margin-top: 6.35px;
	font-weight: 400;
	font-size: 26px;
	line-height: 42.9px;
}
body .fm-s07 blockquote.fm-s07-citaat {
	margin: 24.1px 0 0;
	padding: 0 0 0 20px;
	border: 0;
	border-left: 2px solid var(--fm-burnt);
	background: none;
	font-size: 19px;
	line-height: 28.5px;
	color: var(--fm-chocolate);
}
body .fm-s07 blockquote.fm-s07-citaat::before,
body .fm-s07 blockquote.fm-s07-citaat::after { content: none; display: none; }
body .fm-s07 blockquote.fm-s07-citaat p {
	margin: 0;
	padding: 0;
	font-weight: 300;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: 0;
	color: inherit;
}
body .fm-s07 .fm-s07-kaart p.fm-s07-meta {
	margin: 9.75px 0 0;
	font-size: 14px;
	line-height: 23.1px;
	color: var(--fm-choc-55);
}
body .fm-s07 .fm-s07-kaart--case p.fm-s07-alinea {
	margin-top: 12px;
	font-size: 16px;
	line-height: 26.4px;
}
body .fm-s07 .fm-s07-kaart--case p.fm-s07-meta + p.fm-s07-alinea { margin-top: 18.8px; }
body .fm-s07 .fm-s07-kaart p.fm-s07-conclusie {
	margin: 15.3px 0 0;
	font-size: 16px;
	line-height: 26.4px;
	color: var(--fm-chocolate);
}
body .fm-s07 .fm-s07-kaart p.fm-s07-conclusie strong { font-weight: 500; color: inherit; }
body .fm-s07 .fm-s07-kaart p.fm-s07-voetnoot {
	margin: 14.35px 0 0;
	font-style: italic;
	font-weight: 400;
	font-size: 13px;
	line-height: 21.45px;
	color: var(--fm-choc-55);
}

/* ---------- tablet en gsm ---------- */
@media (max-width: 999px) {
	.fm-s07 .fm-s07-kaarten { margin-top: 48px; }
	.fm-s07 .fm-s07-kaarten > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	/* de twee kleine kaarten naast elkaar onder de casekaart */
	.fm-s07 .fm-s07-kolom--rechts > .vc_column-inner > .wpb_wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	.fm-s07 .fm-s07-kaart { --fm-s07-pad: 24px; }
	.fm-s07 .fm-s07-kaart--case { --fm-s07-pad: 32px; }
	body .fm-s07 .fm-s07-kaart--case img.fm-s07-beeld { aspect-ratio: 16 / 10; object-position: 50% 62%; }
	.fm-s07 .fm-s07-kaart--case { padding-bottom: 32px; }
	body .fm-s07 .fm-s07-kaart--case p.fm-s07-label { margin-top: 32px; }
	/* casekaart over de volle breedte: de tekst niet breder dan op desktop laten lopen */
	.fm-s07 .fm-s07-kaart--case > :not(:first-child) { max-width: 600px; }
}
@media (max-width: 690px) {
	.fm-s07 .fm-s07-kaarten { margin-top: 40px; }
	.fm-s07 .fm-s07-kaarten > .row_col_wrap_12_inner,
	.fm-s07 .fm-s07-kolom--rechts > .vc_column-inner > .wpb_wrapper { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.fm-s07 .fm-s07-kaart,
	.fm-s07 .fm-s07-kaart--case { --fm-s07-pad: 20px; border-radius: 20px; }
	body .fm-s07 .fm-s07-kaart--case img.fm-s07-beeld { aspect-ratio: 1 / 1; object-position: 50% 50%; }
	.fm-s07 .fm-s07-kaart,
	.fm-s07 .fm-s07-kaart--case { padding-bottom: 24px; }
	body .fm-s07 .fm-s07-kaart p.fm-s07-label,
	body .fm-s07 .fm-s07-kaart--case p.fm-s07-label { margin-top: 22px; }
	body .fm-s07 .fm-s07-kaart--case h3.fm-s07-titel { font-size: 23px; line-height: 34px; }
	body .fm-s07 blockquote.fm-s07-citaat { font-size: 18px; line-height: 27px; padding-left: 16px; }
	body .fm-s07 .fm-s07-kaart--case p.fm-s07-alinea { font-size: 15px; line-height: 24.75px; }
	body .fm-s07 .fm-s07-kaart--case p.fm-s07-meta + p.fm-s07-alinea { margin-top: 16px; }
	body .fm-s07 .fm-s07-kaart p.fm-s07-conclusie { font-size: 15px; line-height: 24.75px; }
}