/**
 * Meten & Inzicht — editorial paginastijl.
 *
 * Uitgangspunten:
 * - Uitsluitend bestaande tokens; geen nieuwe kleuren of fonts.
 * - De drie meetgebieden delen één basiscomponent (.mi-verdieping: zelfde
 *   kop-, titel- en puntenstijl) zodat ze herkenbaar familie blijven, maar
 *   elk krijgt via een modifier (--breed / --mirror) een eigen compositie.
 * - "Meetlijn": één gedeelde visuele familie vervangt nummering (01/02/03).
 *   Drie ingrediënten, steeds hetzelfde gewicht/kleur/doorzichtigheid, maar
 *   per meetgebied anders gecombineerd: een organische lijn (de kern), een
 *   asymmetrisch, licht transparant vlak dat alleen bestaat dankzij de lijn
 *   die het doorkruist/verbindt (fill: var(--color-accent-dark), opacity
 *   0.06–0.14 — nooit los decoratief), en precies één goud meetpunt per
 *   visual op de belangrijkste plek. Puur decoratief (aria-hidden), geen
 *   assen, cijfers of echte data.
 * - Ritme ontstaat ook door achtergrondwisseling en één donkere ankersectie.
 */

/* ---------------------------------------------------------------- Hero -- */

.mi-hero {
	padding-block: clamp(var(--space-md), 6vw, var(--space-lg));
}

.mi-hero__inner {
	display: grid;
	gap: clamp(var(--space-md), 5vw, var(--space-lg));
	align-items: center;
}

@media (min-width: 900px) {
	.mi-hero__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.mi-hero__content > h1 {
	margin-block: var(--space-2xs) var(--space-sm);
	max-width: 16ch;
	text-wrap: balance;
}

.mi-hero__intro {
	color: var(--color-text-muted);
	max-width: 52ch;
	font-size: clamp(1.02rem, 1.4vw, 1.15rem);
}

.mi-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

.mi-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}

/* -------------------------------------------------------- Waarom meten -- */

.mi-waarom__inner {
	display: grid;
	gap: clamp(var(--space-md), 4vw, var(--space-lg));
	align-items: start;
}

@media (min-width: 900px) {
	.mi-waarom__inner {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

.mi-waarom__lead {
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	font-weight: 400;
	font-family: var(--font-heading);
	line-height: 1.5;
	color: var(--color-text);
	max-width: 30ch;
	text-wrap: balance;
	margin-bottom: var(--space-sm);
}

.mi-waarom__body p {
	color: var(--color-text-muted);
	max-width: 60ch;
}

/* Rustige terzijde: wanneer meten wel past. Geen kaart, alleen een hairline. */
.mi-aside {
	border-left: 2px solid var(--color-accent-light);
	padding-left: var(--space-sm);
}

.mi-aside__kop {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	color: var(--color-brown-soft);
	margin-bottom: var(--space-xs);
}

.mi-aside__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-xs);
}

.mi-aside__lijst li {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* ------------------------------------------ Drie vormen van inzicht ----- */
/* Editorial index in plaats van SaaS-kaarten: hairline-rijen met meetlijn-merk. */

.mi-index {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
}

.mi-index__item {
	border-bottom: 1px solid var(--color-border);
}

.mi-index__link {
	display: grid;
	gap: var(--space-2xs) var(--space-md);
	grid-template-columns: auto 1fr;
	align-items: baseline;
	padding-block: clamp(var(--space-sm), 3vw, var(--space-md));
	text-decoration: none;
	color: inherit;
	transition: background-color var(--duration-fast) var(--ease-calm);
}

@media (min-width: 760px) {
	.mi-index__link {
		grid-template-columns: auto minmax(0, 12rem) minmax(0, 1fr) auto;
		align-items: center;
	}
}

/* Meetlijn-merk i.p.v. 01/02/03: een korte lijn met meetpunt, geen cijfer. */
.mi-index__merk,
.mi-verdieping__merk {
	position: relative;
	display: inline-block;
	align-self: center;
	width: 26px;
	min-width: 26px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--color-accent-dark);
}

.mi-index__merk::after,
.mi-verdieping__merk::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -1px;
	width: 6px;
	height: 6px;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--color-gold-bright);
}

.mi-index__titel {
	font-family: var(--font-heading);
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	line-height: 1.2;
	margin: 0;
	color: var(--color-brown-deep);
}

.mi-index__omschrijving {
	grid-column: 2 / -1;
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.98rem;
	line-height: 1.55;
	max-width: 56ch;
}

@media (min-width: 760px) {
	.mi-index__omschrijving {
		grid-column: auto;
	}
}

/* Pijl verschijnt subtiel; op mobiel verborgen om ruis te vermijden. */
.mi-index__pijl {
	display: none;
	color: var(--color-brown-soft);
	font-size: 1.1rem;
	transform: translateX(0);
	transition: transform var(--duration-fast) var(--ease-calm);
}

@media (min-width: 760px) {
	.mi-index__pijl {
		display: inline-block;
	}
}

.mi-index__link:hover,
.mi-index__link:focus-visible {
	background-color: rgba(185, 138, 52, 0.06);
}

.mi-index__link:hover .mi-index__pijl,
.mi-index__link:focus-visible .mi-index__pijl {
	transform: translateX(4px);
}

.mi-index__link:focus-visible {
	outline: 2px solid var(--color-accent-dark);
	outline-offset: -2px;
}

/* ------------------------------------------- Van meting naar betekenis -- */
/* Donkere ankersectie: geeft de pagina een rustpunt met visueel gewicht. */

.mi-flow {
	background-color: var(--color-brown-deep);
	color: var(--color-bg);
}

.mi-flow__kop {
	text-align: center;
}

.mi-flow .mi-flow__titel {
	color: var(--color-bg);
	margin: 0 0 var(--space-xs);
}

.mi-flow__intro {
	color: var(--color-accent-light);
	max-width: 54ch;
	margin: 0 auto var(--space-lg);
}

.mi-flow__stappen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 820px) {
	.mi-flow__stappen {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-sm);
	}
}

.mi-flow__stap {
	position: relative;
	padding-top: var(--space-md);
	border-top: 1px solid rgba(230, 211, 166, 0.28);
}

/* Markeerpunt op de hairline — de enige versiering in deze sectie. */
.mi-flow__stap::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-gold-bright);
}

.mi-flow__label {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	color: var(--color-bg);
	margin-bottom: var(--space-2xs);
}

.mi-flow__tekst {
	margin: 0;
	color: var(--color-accent-light);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ------------------------------------------------------- Verdiepingen -- */
/* Een component voor alle drie de meetgebieden: gelijke structuur, gelijk
   tekstbudget, gelijke typografie. Balans is hier structureel afgedwongen. */

.mi-verdieping__inner {
	display: grid;
	gap: clamp(var(--space-md), 4vw, var(--space-lg));
	align-items: start;
}

@media (min-width: 900px) {
	.mi-verdieping__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.mi-verdieping__kop {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	margin-bottom: var(--space-xs);
}

.mi-verdieping__label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	color: var(--color-brown-soft);
}

.mi-verdieping__titel {
	margin: 0 0 var(--space-sm);
	max-width: 20ch;
	text-wrap: balance;
}

.mi-verdieping__tekst p {
	color: var(--color-text-muted);
	max-width: 62ch;
}

/* Glucosepatronen: bredere, horizontale afsluitband met golflijn + Mayke,
   in plaats van de tekst/lijst-verhouding van de andere twee gebieden. */
.mi-verdieping--breed .mi-verdieping__band {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--space-md);
	align-items: center;
	margin-top: var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

@media (min-width: 760px) {
	.mi-verdieping--breed .mi-verdieping__band {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	}
}

.mi-verdieping--breed .mi-expert {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Stress & herstel: gespiegelde compositie, visual links i.p.v. tekst links. */
.mi-verdieping--mirror .mi-verdieping__inner {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.mi-verdieping--mirror .mi-verdieping__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
	}
}

/* Sluit Stress & herstel af als volwaardige sectie, met ruimte vóór de
   volgende (bewust stille) sectie — geen rand, geen kleurwissel: alleen
   voldoende adempauze om niet in de disclaimer te lopen. */
#stress-en-herstel {
	padding-bottom: clamp(var(--space-lg), 6vw, var(--space-xl));
}

/* Wat het zichtbaar maakt — exact drie punten per meetgebied. Typografische
   hiërarchie (titel + toelichting) i.p.v. sterretjes en horizontale lijnen;
   een dunne meetlijn links van elk punt is de enige marker. */
.mi-punten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

.mi-punten__kop {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	color: var(--color-brown-soft);
	margin-bottom: var(--space-xs);
}

.mi-punten li {
	padding-left: var(--space-sm);
	border-left: 2px solid var(--color-border);
}

.mi-punten__titel {
	margin: 0 0 var(--space-3xs);
	font-family: var(--font-heading);
	font-size: 1.02rem;
	color: var(--color-brown-deep);
}

.mi-punten__tekst {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* --------------------------------------------------- Meetlijn-visuals --- */
/* Gedeelde, bewust eenvoudige familie van lijntekeningen (balans, golf,
   ritme): geen assen, cijfers of data — puur decoratief, nooit de enige
   drager van informatie. */

.mi-visual {
	margin-bottom: var(--space-sm);
}

.mi-visual__svg {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
}

.mi-visual--breed .mi-visual__svg {
	max-width: 100%;
}

.mi-visual--groot {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
}

.mi-visual--groot .mi-visual__svg {
	max-width: 240px;
}

@media (min-width: 900px) {
	.mi-visual--groot .mi-visual__svg {
		max-width: 100%;
	}
}

/* De lijnen faden rustig mee met de bestaande .reveal-mechaniek van de
   pagina (opacity + translateY); geen aparte teken-animatie op de path
   zelf, dat bleek te fragiel om betrouwbaar te schalen op de padlengte. */

/* --------------------------------------------- Expertprofiel (extern) -- */
/* Bewust compacter dan de fotografie van Will: WAHD blijft het hoofdmerk. */

.mi-expert {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-sm) var(--space-md);
	align-items: start;
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.mi-expert__portret {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background-color: var(--color-surface-muted);
}

.mi-expert__naam {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	margin: 0;
	color: var(--color-brown-deep);
}

.mi-expert__rol {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent-dark);
	margin: var(--space-3xs) 0 var(--space-xs);
	font-weight: 600;
}

.mi-expert__tekst {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 56ch;
}

/* ------------------------------------------------- Grens / eindpunt ---- */
/* Bewust visueel klein gehouden: dit is een kanttekening, geen sectiekop. */

.mi-grens {
	padding-block: var(--space-lg) var(--space-md);
}

.mi-grens__inner {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

.mi-grens__titel {
	margin: 0 0 var(--space-2xs);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	color: var(--color-brown-soft);
}

.mi-grens__tekst {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.6;
	margin-inline: auto;
}

/* --------------------------------------------------------- Afsluiting -- */
/* Donkere ankersectie als echte finale — zelfde --color-brown-deep als de
   "Van meting naar betekenis"-sectie verderop op de pagina, zodat de CTA
   niet de derde crème-sectie op rij is en de pagina met visueel gewicht
   sluit, net als ze opende met de donkere middensectie. */

.mi-slot {
	background-color: var(--color-brown-deep);
	color: var(--color-bg);
	padding-top: clamp(var(--space-lg), 8vw, var(--space-xl));
	padding-bottom: clamp(var(--space-lg), 8vw, var(--space-xl));
}

.mi-slot__merk {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-md);
	opacity: 0.7;
}

.mi-slot__merk .mi-visual__svg {
	width: 120px;
	max-width: 120px;
}

.mi-slot__merk .mi-visual__svg path {
	stroke: var(--color-accent-light);
}

.mi-slot__inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.mi-slot__inner h2 {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.85rem, 3.6vw, 2.6rem);
	text-wrap: balance;
	color: var(--color-bg);
}

.mi-slot__inner > p {
	color: var(--color-accent-light);
	margin-inline: auto;
}

.mi-slot .cta-button--ghost {
	color: var(--color-bg);
	border-color: var(--color-accent-light);
}

.mi-slot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
	margin-top: var(--space-md);
}

/* ------------------------------------------------------------- Legal --- */

.mi-legal {
	padding-block: var(--space-md);
}

.mi-legal__tekst {
	max-width: 820px;
	margin-inline: auto;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	text-align: center;
}

.mi-legal__tekst + .mi-legal__tekst {
	margin-top: var(--space-sm);
}

/* --------------------------------------------------------- Responsief -- */

@media (max-width: 599px) {
	/* Op smalle schermen wint leesbaarheid van compositie. */
	.mi-hero__actions .cta-button,
	.mi-slot__actions .cta-button {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.mi-expert {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-index__link,
	.mi-index__pijl {
		transition: none;
	}

	.mi-index__link:hover .mi-index__pijl,
	.mi-index__link:focus-visible .mi-index__pijl {
		transform: none;
	}
}

/* ------------------------------------------------ Correctie contrast --- */
/* De gedeelde .section-heading__eyebrow staat op --color-accent-dark en haalt
   op de crème achtergrond 3.92:1 — onder de AA-eis van 4.5:1 voor deze
   tekstgrootte. Hier pagina-gescoped gecorrigeerd; het geldt sitebreed en
   hoort in components.css te worden opgelost. */
.mi-hero .section-heading__eyebrow {
	color: var(--color-brown-soft);
}