/*
 * Sectie 03: Training for your mind (anker #methodology).
 * Donkere sectie: intro, brain-map-kaart, drie programmakaarten met een doorlopende golf, tweede brain-map-kaart.
 * Maten uit Figma (tree.txt regels 133-248), desktop 1728px, inhoud 1104px.
 */

.fm-s03 { color: var(--fm-egg); }
.fm-s03 h2,
.fm-s03 h3 { color: var(--fm-egg); }

/* de vier blokken onder elkaar, 48px uit elkaar (autolayout in Figma) */
.fm-s03 > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.fm-s03 > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > * { margin: 0 !important; }

/* Salient geeft kolommen een negatieve marge en padding (column_margin); hier regelen de grids de goten */
.fm-s03 > .row_col_wrap_12 { margin: 0; }
.fm-s03 > .row_col_wrap_12 > .wpb_column { padding: 0; }
.fm-s03 .inner_row > .row_col_wrap_12_inner { margin: 0; width: 100%; }
.fm-s03 .inner_row > .row_col_wrap_12_inner > .wpb_column {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	min-width: 0;
}

/* ---------- intro ---------- */

/* padding-bottom 1px: Figma rondt het tekstvak af op 113 in plaats van 112; zo staan de kaarten op hun Figma-y */
.fm-s03 .fm-s03-kop { display: flex; flex-direction: column; gap: 20px; padding-bottom: 1px; }
.fm-s03 .fm-s03-kop .fm-intro { max-width: 860px; }   /* was 726 (ontwerp); breder op vraag van Dario 15-10, minder regels */

/* ---------- brain-map-kaarten ---------- */

.fm-s03 .fm-s03-brein {
	background: var(--fm-chocolate-2);
	border-radius: 28px;
	overflow: hidden;
}
.fm-s03 .fm-s03-brein > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: minmax(0, 460fr) minmax(0, 644fr);
	align-items: center;
}
/* de tweede kaart heeft in Figma 8px padding boven (282 hoog in plaats van 274) */
.fm-s03 .fm-s03-brein--2 { padding-top: 8px; }
.fm-s03 .fm-s03-brein--2 > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 644fr) minmax(0, 460fr); }

.fm-s03 .fm-s03-brein-tekst { display: flex; flex-direction: column; gap: 12px; padding: 56px; }
.fm-s03 .fm-s03-brein-tekst h3 {
	margin: 0;
	font-weight: 300;
	font-size: 40px;
	line-height: 66px;
	letter-spacing: -.4px;
}
.fm-s03 .fm-s03-brein-tekst p { color: var(--fm-egg-72); }

.fm-s03 .fm-s03-brein .img-with-aniamtion-wrap,
.fm-s03 .fm-s03-brein .img-with-aniamtion-wrap .inner,
.fm-s03 .fm-s03-brein .img-with-aniamtion-wrap .hover-wrap,
.fm-s03 .fm-s03-brein .img-with-aniamtion-wrap .hover-wrap-inner { display: block; width: 100%; margin: 0; }
.fm-s03 img.fm-s03-brein-beeld {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
	aspect-ratio: 644 / 260;
	object-fit: cover;
	margin: 0 !important;
}

/* ---------- programmakaarten ---------- */

/* 8px boven zoals in Figma, 1px onder voor dezelfde afronding als bij de intro */
.fm-s03 .fm-s03-programmas { padding: 8px 0 1px; }
.fm-s03 .fm-s03-programmas > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 28px;
	align-items: stretch;
}
/* kolommen even hoog, zodat de definitielijst onderaan op één lijn staat */
.fm-s03 .fm-s03-programmas .vc_column-inner,
.fm-s03 .fm-s03-programmas .vc_column-inner > .wpb_wrapper { height: 100%; }
.fm-s03 .fm-s03-prog {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* vak met een stuk van de golf: de svg is 1100px breed (drie kaarten plus twee goten),
   elke kaart toont haar derde. In procenten zodat de golf meeschaalt met de kaart. */
.fm-s03 .fm-s03-prog::before {
	content: "";
	display: block;
	aspect-ratio: 349 / 262;
	border-radius: 20px;
	background-color: var(--fm-chocolate-2);
	background-image: url('../../svg/golf.svg');
	background-repeat: no-repeat;
	background-size: 315.19% auto;
	background-position: 0 50%;
}
.fm-s03 .fm-s03-prog--2::before { background-position: 50% 50%; }
.fm-s03 .fm-s03-prog--3::before { background-position: 100% 50%; }

.fm-s03 .fm-s03-prog h3 {
	margin: 23.25px 0 0;
	font-weight: 500;
	font-size: 19px;
	line-height: 31.35px;
	letter-spacing: 1.14px;
	text-transform: uppercase;
}
.fm-s03 .fm-s03-prog p.fm-s03-sub {
	margin-top: 5.25px;
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	line-height: 26.4px;
	color: var(--fm-tan);
}
.fm-s03 .fm-s03-prog p.fm-s03-tekst {
	margin: 12px 0 22.75px;
	font-size: 16px;
	line-height: 26.4px;
	color: var(--fm-egg-72);
}

/* Includes / Duration */
.fm-s03 .fm-s03-prog dl.fm-s03-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	row-gap: 6px;
	margin: auto 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--fm-egg-14);
	font-size: 14px;
	line-height: 23.1px;
}
.fm-s03 .fm-s03-dl dt,
.fm-s03 .fm-s03-dl dd {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 23.1px;
	font-weight: 400;
}
.fm-s03 .fm-s03-dl dt { color: var(--fm-egg-50); }
.fm-s03 .fm-s03-dl dd { color: var(--fm-egg); }
.fm-s03 .fm-s03-dl dd.fm-s03-duur { color: var(--fm-tan); font-weight: 500; }
.fm-s03 .fm-s03-dl a {
	color: var(--fm-egg);
	text-decoration: underline;
	text-decoration-color: rgba(234, 177, 99, .6);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s ease, text-decoration-color .2s ease;
}
.fm-s03 .fm-s03-dl a:hover { color: var(--fm-tan); text-decoration-color: var(--fm-tan); }
.fm-s03 .fm-s03-dl a:focus-visible { outline: 2px solid var(--fm-tan); outline-offset: 3px; border-radius: 2px; }

/* ---------- tablet ---------- */

@media (max-width: 999px) {
	.fm-s03 > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper { gap: 40px; }

	.fm-s03 .fm-s03-brein > .row_col_wrap_12_inner,
	.fm-s03 .fm-s03-brein--2 > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); }
	.fm-s03 .fm-s03-brein--2 { padding-top: 0; }
	/* op een smal scherm eerst de tekst, dan het beeld, bij beide kaarten */
	.fm-s03 .fm-s03-brein--2 > .row_col_wrap_12_inner > .wpb_column:first-child { order: 2; }
	.fm-s03 .fm-s03-brein-tekst { padding: 40px 40px 8px; }

	.fm-s03 .fm-s03-programmas { padding-top: 0; }
	.fm-s03 .fm-s03-programmas > .row_col_wrap_12_inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}
	/* kaart liggend: golfvak links, tekst rechts */
	.fm-s03 .fm-s03-prog {
		display: grid;
		grid-template-columns: minmax(0, 300fr) minmax(0, 400fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: 32px;
	}
	.fm-s03 .fm-s03-prog::before { grid-column: 1; grid-row: 1 / -1; align-self: start; }
	.fm-s03 .fm-s03-prog > * { grid-column: 2; }
	.fm-s03 .fm-s03-prog h3 { margin-top: 0; }
}

/* ---------- gsm ---------- */

@media (max-width: 690px) {
	.fm-s03 .fm-s03-brein-tekst { padding: 32px 28px 4px; }
	.fm-s03 .fm-s03-brein-tekst h3 { font-size: 32px; line-height: 44px; }
	.fm-s03 .fm-s03-brein-tekst p { font-size: 16px; line-height: 26.4px; }

	.fm-s03 .fm-s03-programmas > .row_col_wrap_12_inner { row-gap: 44px; }
	/* beeld iets hoger, zodat de hoofden niet te klein worden */
	.fm-s03 img.fm-s03-brein-beeld { aspect-ratio: 2 / 1; }

	.fm-s03 .fm-s03-prog { display: flex; flex-direction: column; }
	.fm-s03 .fm-s03-prog::before { align-self: stretch; }
	.fm-s03 .fm-s03-prog h3 { margin-top: 20px; }
}