/*
 * Sectie 02: Unlock your potential (Egg). Twee kaarten van 536px met gap 32, daaronder de knop naar #trajectory.
 * Maten uit Figma (tree.txt regels 21-132).
 */

/* ---------- kop ---------- */
.fm-s02 .fm-s02-kop .fm-lead { margin-top: 10px; }
.fm-s02 .fm-s02-kop .fm-intro { margin-top: 14.5px; max-width: 641px; }
.fm-s02 .fm-s02-kop .fm-h2 + .fm-intro { margin-top: 18px; }   /* zonder lead (copy 15-10) */

/* ---------- kaarten: grid met gap 32, even hoog ---------- */
.fm-s02 .fm-s02-kaarten { margin: 57px 0 0; }
.fm-s02 .fm-s02-kaarten > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	width: 100%;
}
/* Salients clearfix (::before/::after) zou anders een extra gridrij met gap maken */
.fm-s02 .fm-s02-kaarten > .row_col_wrap_12_inner::before,
.fm-s02 .fm-s02-kaarten > .row_col_wrap_12_inner::after { content: none; display: none; }
.fm-s02 .fm-s02-kaarten > .row_col_wrap_12_inner > .wpb_column {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	min-height: 0;
}
.fm-s02 .fm-s02-kaart > .vc_column-inner {
	height: 100%;
	padding: 32px;
	border-radius: 28px;
}
.fm-s02 .fm-s02-kaart--werkgevers > .vc_column-inner { background: var(--fm-zand); }
.fm-s02 .fm-s02-kaart--professionals > .vc_column-inner { box-shadow: inset 0 0 0 1px var(--fm-choc-18); }
/* voettekst onderaan, ook als de lijst korter is */
.fm-s02 .fm-s02-kaart > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.fm-s02 .fm-s02-kaart .fm-s02-voet { margin-top: auto; }

/* ---------- kaartinhoud ---------- */
body .fm-s02 .fm-s02-inhoud img.fm-s02-beeld {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 472 / 260;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 20px;
	background: var(--fm-zand-2);
	margin: 0;
}
body .fm-s02 h3.fm-s02-titel {
	margin: 28px 0 0;
	font-weight: 400;
	font-size: 26px;
	line-height: 42.9px;
	letter-spacing: -.26px;
	color: var(--fm-chocolate);
}
body .fm-s02 p.fm-s02-tagline {
	margin-top: 3.2px;
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	line-height: 26.4px;
	color: var(--fm-choc-74);
}
body .fm-s02 .fm-s02-inhoud ul.fm-s02-lijst {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 32px 0 30px;
}
body .fm-s02 .fm-s02-lijst li {
	position: relative;
	margin: 0;
	padding: 0 0 0 36px;
	list-style: none;
	font-weight: 400;
	font-size: 16px;
	line-height: 25.6px;
	color: var(--fm-choc-74);
}
.fm-s02 .fm-s02-lijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	background: url('../../svg/check.svg') no-repeat center / 22px 22px;
}
body .fm-s02 .fm-s02-lijst li strong { font-weight: 500; color: var(--fm-chocolate); }

body .fm-s02 .fm-s02-voet {
	border-top: 1px solid var(--fm-choc-14);
	padding-top: 24px;
}
body .fm-s02 .fm-s02-voet p {
	font-weight: 500;
	font-size: 15px;
	line-height: 24.75px;
	color: var(--fm-chocolate);
}

/* ---------- knop ---------- */
.fm-s02 .fm-s02-actie { margin-top: 48px; }

/* ---------- tablet en gsm ---------- */
@media (max-width: 999px) {
	.fm-s02 .fm-s02-kaarten { margin-top: 48px; }
	body .fm-s02 .fm-s02-inhoud img.fm-s02-beeld { aspect-ratio: 16 / 7; }
	.fm-s02 .fm-s02-kaarten > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.fm-s02 .fm-s02-actie { margin-top: 40px; }
	/* kaarten over de volle breedte: de lijst niet breder dan ongeveer 70 tekens per regel (zoals de casekaart in 07) */
	body .fm-s02 .fm-s02-inhoud ul.fm-s02-lijst { max-width: 600px; }
}
@media (max-width: 690px) {
	.fm-s02 .fm-s02-kaarten { margin-top: 40px; }
	.fm-s02 .fm-s02-kaarten > .row_col_wrap_12_inner { gap: 20px; }
	.fm-s02 .fm-s02-kaart > .vc_column-inner { padding: 20px; border-radius: 24px; }
	body .fm-s02 .fm-s02-inhoud img.fm-s02-beeld { aspect-ratio: 472 / 260; border-radius: 16px; }
	body .fm-s02 h3.fm-s02-titel { margin-top: 20px; font-size: 23px; line-height: 34px; }
	body .fm-s02 .fm-s02-lijst li { font-size: 15px; line-height: 24px; padding-left: 32px; }
	.fm-s02 .fm-s02-lijst li::before { top: 1px; }
	body .fm-s02 .fm-s02-inhoud ul.fm-s02-lijst { margin: 24px 0 24px; gap: 16px; }
	body .fm-s02 .fm-s02-voet { padding-top: 20px; }
	.fm-s02 .fm-s02-actie { margin-top: 32px; }
}