/*
 * Sectie 06: Your mind in form (anker #mind-in-form). Licht (Egg), links titel, intro en drie accordeons, rechts een beeld.
 * Maten uit Figma (tree.txt 331-378): kolom links 554px, gap 88, beeld 462x577 (4:5) met radius 28 op x690.
 * Accordeons: <details>/<summary>, lijst met bovenrand en 22px binnenmarge, elk item een onderrand Chocolate 14%.
 * Summary 113px hoog (26 boven en onder), chevron (20px) rechts onderaan uitgelijnd op de titel.
 */

.fm-s06 { color: var(--fm-chocolate); }

/* ---------- raster: tekst links, beeld rechts ---------- */

.fm-s06 .fm-s06-raster { margin: 0; padding: 0; }
.fm-s06 .fm-s06-raster > .row_col_wrap_12_inner {
	display: grid;
	grid-template-columns: minmax(0, 554fr) minmax(0, 462fr);
	column-gap: 88px;
	align-items: start;
	float: none;
	width: 100%;
	margin: 0;
}
.fm-s06 .fm-s06-raster > .row_col_wrap_12_inner::before,
.fm-s06 .fm-s06-raster > .row_col_wrap_12_inner::after { display: none; }
.fm-s06 .fm-s06-raster > .row_col_wrap_12_inner > .wpb_column {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

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

.fm-s06 .fm-s06-kop h2.fm-h2 { font-weight: 300; margin-bottom: 18px; }

/* ---------- accordeons ---------- */

.fm-s06 .fm-s06-lijst {
	margin-top: 18px;
	padding-top: 22px;
	border-top: 1px solid var(--fm-choc-14);
}
.fm-s06 .fm-s06-item { border-bottom: 1px solid var(--fm-choc-14); }
.fm-s06 .fm-s06-item > summary {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 25px 0 27px;
	list-style: none;
	cursor: pointer;
}
.fm-s06 .fm-s06-item > summary::-webkit-details-marker { display: none; }
.fm-s06 .fm-s06-item > summary::marker { content: ""; }
.fm-s06 .fm-s06-item > summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: url('../../svg/chevron.svg') center / 20px 20px no-repeat;
	transition: transform .2s ease;
}
.fm-s06 .fm-s06-item[open] > summary::after { transform: rotate(180deg); }
.fm-s06 .fm-s06-item > summary:focus { outline: none; }
.fm-s06 .fm-s06-item > summary:focus-visible { outline: 2px solid var(--fm-burnt); outline-offset: 4px; border-radius: 4px; }

.fm-s06 .fm-s06-item h3.fm-s06-titel {
	margin: 0;
	font-weight: 400;
	font-size: 22px;
	line-height: 36.3px;
	letter-spacing: 0;
	color: var(--fm-chocolate);
	transition: color .2s ease;
}
@media (hover: hover) {
	.fm-s06 .fm-s06-item > summary:hover h3.fm-s06-titel { color: var(--fm-burnt); }
}
.fm-s06 .fm-s06-titel .fm-s06-eyebrow {
	display: block;
	margin-bottom: 2px;
	font-weight: 500;
	font-size: 14px;
	line-height: 23.1px;
	color: var(--fm-burnt);
}
/* body + details: Salient zet .row .col p:last-child op padding-bottom 0 en won van .fm-s06 .fm-s06-item .fm-s06-tekst;
   daardoor plakte de tekst van een open accordeon tegen de lijn (alleen bij een p, niet bij de lijst). Fix 15-10. */
body .fm-s06 details.fm-s06-item .fm-s06-tekst {
	padding-bottom: 28px;
	font-size: 16px;
	line-height: 26.4px;
	color: var(--fm-choc-74);
}
/* Neuromodulation (copy 15-10): twee methodes. Sinds 15-10 (vraag Dario: "wat droog") elk een kaart in Zand met een icoon
   in Burnt, de tekst van Formind letterlijk maar in kortere alinea's. Bij neurofeedback staat de lus (de video speelt of
   pauzeert) als twee rijen in Egg, bij tDCS de laatste zin als noot met een vinkje. Vorige versie: versies/06-mind-in-form.v5.css */
.fm-s06 .fm-s06-item ul.fm-s06-methodes,
.fm-s06 .fm-s06-methodes ul.fm-s06-lus { margin: 0; padding-left: 0; list-style: none; }
.fm-s06 .fm-s06-methodes > li.fm-s06-methode {
	position: relative;
	margin: 0;
	padding: 22px 24px 24px 80px;
	border-radius: 16px;
	background: var(--fm-zand);
	list-style: none;
}
.fm-s06 .fm-s06-methodes > li.fm-s06-methode + li.fm-s06-methode { margin-top: 12px; }
.fm-s06 .fm-s06-methode::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 22px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--fm-burnt) url('../../svg/stap-training.svg') center / 24px 24px no-repeat;
}
.fm-s06 .fm-s06-methode--tdcs::before { background-image: url('../../svg/methode-stroom.svg'); }
body .fm-s06 .fm-s06-methode p { margin-bottom: 0; padding: 0; }
body .fm-s06 .fm-s06-methode > * { margin-top: 0; }
body .fm-s06 .fm-s06-methode > * + * { margin-top: 10px; }
.fm-s06 .fm-s06-methodes strong { font-weight: 500; color: var(--fm-chocolate); }

body .fm-s06 .fm-s06-methode > ul.fm-s06-lus { display: grid; gap: 8px; margin: 14px 0; }
.fm-s06 ul.fm-s06-lus > li {
	position: relative;
	margin: 0;
	padding: 12px 16px 12px 52px;
	border-radius: 12px;
	background: var(--fm-egg);
	font-size: .9375em;
	line-height: 1.65;
	list-style: none;
}
.fm-s06 ul.fm-s06-lus > li::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 12px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--fm-burnt) url('../../svg/lus-speelt.svg') center / 14px 14px no-repeat;
}
.fm-s06 ul.fm-s06-lus > li.fm-s06-lus-pauze::before { background-color: var(--fm-choc-14); background-image: url('../../svg/lus-pauze.svg'); }

.fm-s06 .fm-s06-methode p.fm-s06-noot {
	position: relative;
	padding-left: 30px;
	font-size: .9375em;
	line-height: 1.65;
	color: var(--fm-chocolate);
}
.fm-s06 .fm-s06-methode p.fm-s06-noot::before {
	content: "";
	position: absolute;
	left: 0;
	top: .17em;
	width: 22px;
	height: 22px;
	background: url('../../svg/check.svg') center / 22px 22px no-repeat;
}

/* ---------- beeld ---------- */

.fm-s06 .img-with-aniamtion-wrap,
.fm-s06 .img-with-aniamtion-wrap .inner,
.fm-s06 .img-with-aniamtion-wrap .hover-wrap,
.fm-s06 .img-with-aniamtion-wrap .hover-wrap-inner { display: block; width: 100%; margin: 0; }
body .fm-s06 img.fm-s06-beeld {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
	aspect-ratio: 462 / 630;   /* ontwerp 462x577; hoger op vraag van Dario 15-10, onderkant gelijk met de laatste accordeonlijn (1440-1512) */
	object-fit: cover;
	border-radius: 28px;
	background: var(--fm-zand);
	margin: 0 !important;
}

/* Op desktop blijft het beeld in beeld terwijl je door opengeklapte accordeons scrolt (sticky, vraag Dario 15-10), tot de
   onderkant van de tekstkolom. 24px onder de header (77px). In een laag venster wordt het beeld lager (object-fit: cover), zodat
   het er altijd helemaal op past. Werkt omdat body alleen overflow: clip heeft (geen scrollcontainer). Vorige versie: versies/06-mind-in-form.v6.css */
@media (min-width: 1000px) {
	.fm-s06 .fm-s06-raster > .row_col_wrap_12_inner > .wpb_column:last-child { position: sticky; top: 101px; }
	body .fm-s06 img.fm-s06-beeld { max-height: calc(100vh - 125px); }
}

/* ---------- tablet en gsm: onder elkaar ---------- */

@media (max-width: 999px) {
	.fm-s06 .fm-s06-raster > .row_col_wrap_12_inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 56px;
	}
	/* liggend op tablet, anders wordt het beeld hoger dan het scherm */
	body .fm-s06 img.fm-s06-beeld { aspect-ratio: 4 / 3; object-position: 50% 60%; border-radius: 24px; }
	/* lopende tekst niet breder dan op desktop (kolom 554px); titels, lijnen en chevrons blijven over de volle breedte */
	.fm-s06 .fm-s06-kop .fm-intro { max-width: 641px; }
	.fm-s06 .fm-s06-item .fm-s06-tekst { max-width: 560px; }
}
@media (max-width: 690px) {
	.fm-s06 .fm-s06-raster > .row_col_wrap_12_inner { row-gap: 40px; }
	.fm-s06 .fm-s06-item > summary { padding: 20px 0 22px; gap: 16px; }
	.fm-s06 .fm-s06-item h3.fm-s06-titel { font-size: 20px; line-height: 30px; }
	body .fm-s06 details.fm-s06-item .fm-s06-tekst { padding-bottom: 24px; }
	/* methodekaarten: icoon boven de tekst, zodat de tekst de volle breedte krijgt */
	.fm-s06 .fm-s06-methodes > li.fm-s06-methode { padding: 72px 18px 20px; }
	.fm-s06 .fm-s06-methode::before { left: 18px; top: 18px; width: 38px; height: 38px; background-size: 22px 22px; }
	.fm-s06 ul.fm-s06-lus > li { padding: 10px 14px 10px 48px; }
	.fm-s06 ul.fm-s06-lus > li::before { left: 12px; top: 10px; }
	body .fm-s06 img.fm-s06-beeld { aspect-ratio: 4 / 5; object-position: 50% 50%; border-radius: 20px; }
}