/* Kracht, Kunst en Keuze — componenten.
 *
 * Met de hand geschreven, maar met één harde regel: geen losse kleuren.
 * Alleen var(--mvd-*) en var(--wp--preset--*). tools/tokens/check.py faalt op
 * elke hex-, rgb()- of hsl()-waarde in dit bestand.
 *
 * Opbouw volgt build/redesign/homepage.html (herontwerp 2026-08-25).
 */

/* ── ritme ─────────────────────────────────────────────────────────────── */
.mvd-sec { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* WordPress zet blockGap als marge tussen opeenvolgende blokken — ook tussen
   header, main en footer, en tussen de secties. Die secties sluiten in het
   ontwerp naadloos op elkaar aan; de ruimte zit ín een sectie.
   De secties van de homepage staan in de pagina-inhoud, niet in de template;
   wp:post-content zet daar een eigen div omheen, vandaar .mvd-flow. */
.wp-site-blocks > * + *,
main > * + *,
.mvd-flow > * + *,
.mvd-stories > * + * { margin-block-start: 0; }

/* Twee lichte secties direct na elkaar delen hun witruimte (herontwerp: contact padding-top 0). */
.mvd-sec:not(.mvd-band) + .mvd-sec:not(.mvd-band) { padding-block-start: 0; }

/* Ankers landen onder de sticky header, niet erachter. */
[id="werk"], [id="kunst"], [id="over"], [id="coaching"], [id="contact"] { scroll-margin-top: 88px; }

h1, h2, h3 { text-wrap: balance; }

/* ── eyebrow, lede, gedempt ────────────────────────────────────────────── */
.mvd-eyebrow {
	font-family: var(--mvd-font-jost);
	font-size: var(--mvd-size-label-xs);
	letter-spacing: var(--mvd-ls-label-xs);
	font-weight: var(--mvd-fw-label-xs);
	text-transform: uppercase;
	color: var(--mvd-gold-text);
	margin: 0 0 1rem;
}
.mvd-band .mvd-eyebrow { color: var(--mvd-gold); }

.mvd-lede { font-size: var(--mvd-size-body-l); max-width: 62ch; color: var(--mvd-muted); }
.mvd-band .mvd-lede { color: var(--mvd-cream-ink); }
.mvd-muted { color: var(--mvd-muted); max-width: 52ch; }
.mvd-sub { color: var(--mvd-muted); max-width: 46ch; margin-top: .75rem; }
.mvd-band .mvd-sub { color: var(--mvd-cream-ink); }

/* ── donkere band ──────────────────────────────────────────────────────── */
.mvd-band { background: var(--mvd-navy); color: var(--mvd-cream-ink); }
.mvd-band :where(h1, h2, h3) { color: var(--mvd-cream-ink); }

/* ── knoppen ───────────────────────────────────────────────────────────── */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--mvd-text);
	color: var(--mvd-cream);
	border-color: var(--mvd-text);
}
.mvd-band .wp-block-button.is-style-outline > .wp-block-button__link { border-color: var(--mvd-band-rule); }
.mvd-band .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.mvd-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--mvd-cream-ink);
	color: var(--mvd-navy);
	border-color: var(--mvd-cream-ink);
}
.mvd-btn-light > .wp-block-button__link {
	background: var(--mvd-white);
	color: var(--mvd-navy);
	border-color: var(--mvd-white);
}
.mvd-btn-light > .wp-block-button__link:hover {
	background: var(--mvd-cream-ink);
	border-color: var(--mvd-cream-ink);
}

/* ── header ────────────────────────────────────────────────────────────── */
.mvd-site-head {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--mvd-cream);
	border-bottom: 1px solid var(--mvd-rule-soft);
}
.admin-bar .mvd-site-head { top: var(--wp-admin--admin-bar--height, 0); }
.mvd-head__in { min-height: 72px; gap: 1.5rem; }
/* Dubbele klasse: WordPress' eigen .is-layout-flex > * zet margin op 0 en wint
   anders van een enkele klasse. */
.mvd-head__in .mvd-logo { margin-right: auto; min-width: 0; }
.mvd-head__in > * { flex-shrink: 0; }
.mvd-head__in > .mvd-logo { flex-shrink: 1; }
@media (max-width: 800px) {
	.mvd-head__in { gap: 1rem; }
}
.mvd-logo {
	font-family: var(--mvd-font-cormorant);
	font-size: clamp(.78rem, .58rem + .8vw, 1rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-right: auto;
}
.mvd-logo a { text-decoration: none; color: var(--mvd-text); }
.mvd-nav { gap: 2rem; }
.mvd-nav .wp-block-navigation-item__content {
	font-size: var(--mvd-size-label-m);
	letter-spacing: var(--mvd-ls-label-m);
	text-transform: uppercase;
	color: var(--mvd-muted);
	padding-block: .5rem;
	border-bottom: 1px solid transparent;
	text-decoration: none;
}
.mvd-nav .wp-block-navigation-item__content:hover { color: var(--mvd-text); border-color: var(--mvd-gold); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.mvd-hero { min-height: min(72svh, 620px) !important; }
.mvd-hero .wp-block-cover__background { background: var(--mvd-hero-veil) !important; opacity: 1 !important; }
.mvd-hero { padding-inline: clamp(1.25rem, 5vw, 4rem); }
/* De binnencontainer lijnt uit op dezelfde 1200px als header en secties.
   Zijn kinderen niet apart centreren — dat deed de constrained layout wel,
   waardoor titel, ondertitel en knoppen elk op een andere x begonnen. */
/* Core zet bij contentPosition margin:0 en width:auto met specificiteit (0,4,0). */
.wp-block-cover.has-custom-content-position.has-custom-content-position.mvd-hero .wp-block-cover__inner-container {
	width: min(1200px, 100%);
	margin-inline: auto;
	padding-block: clamp(3rem, 7vw, 6rem);
	display: grid;
	gap: 1.5rem;
	justify-items: start;
	color: var(--mvd-cream-ink);
}
.wp-block-cover.mvd-hero .wp-block-cover__inner-container > * { margin-inline: 0; margin-block: 0; }
.mvd-hero h1 { color: var(--mvd-white); max-width: 14ch; }
.mvd-hero .mvd-lede { color: var(--mvd-cream-ink); max-width: 46ch; font-weight: 500; }

/* ── sectiekop ─────────────────────────────────────────────────────────── */
.mvd-sec-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ── museumkaartje ─────────────────────────────────────────────────────── */
.mvd-works__grid { gap: clamp(1.75rem, 3vw, 2.75rem) !important; }
/* Kaart: beeld, dan titel en prijsregel dicht op elkaar (herontwerp: .label gap .55rem).
   De flow layout zet anders blockGap plus kopmarges ertussen. 320px minimum geeft op
   1200px drie kolommen: "alle 6 werken in 2 rijen van 3" (spec 2026-08-26). */
.mvd-card { display: flex; flex-direction: column; gap: .55rem; }
.mvd-card.mvd-card > * { margin-block: 0; }
.mvd-card__fig { margin-bottom: .45rem !important; }
.mvd-card__fig { margin: 0; overflow: hidden; min-height: 0 !important; }
.mvd-card__fig img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.mvd-card:hover .mvd-card__fig img { transform: scale(1.03); }
.mvd-card__title {
	font-family: var(--mvd-font-cormorant);
	font-size: var(--mvd-size-display-s);
	font-weight: var(--mvd-fw-display-s);
	line-height: var(--mvd-lh-display-s);
	margin: 0;
}
.mvd-card__title a { text-decoration: none; color: inherit; }
.mvd-card__row {
	border-top: 1px solid var(--mvd-stone);
	padding-top: .6rem;
	font-variant-numeric: tabular-nums;
}
.mvd-band .mvd-card__row { border-color: var(--mvd-band-rule); }
.mvd-card__price { color: var(--mvd-gold-text); }
.mvd-band .mvd-card__price { color: var(--mvd-gold); }
.mvd-empty { color: var(--mvd-band-quiet); }

/* ── twee sporen ───────────────────────────────────────────────────────── */
.mvd-story { background: var(--mvd-white); }
.mvd-story + .mvd-story { border-top: 1px solid var(--mvd-rule-soft); }
.mvd-story .wp-block-media-text__content { padding: clamp(2rem, 5vw, 4.5rem); }
.mvd-story .wp-block-media-text__media { background: var(--mvd-navy); }
.mvd-story .wp-block-media-text__content > * { margin-block: 0; }
.mvd-story .wp-block-media-text__content > * + * { margin-block-start: 1.1rem; }
.mvd-story .wp-block-media-text__content > .mvd-eyebrow + * { margin-block-start: 0; }
/* WordPress stapelt media-text onder 600px met het beeld bovenaan, via grid-row. Het
   ontwerp (spec 2026-08-26) wil op mobiel tekst boven, beeld eronder. */
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right.mvd-story .wp-block-media-text__content { grid-row: 1; }
	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right.mvd-story .wp-block-media-text__media { grid-row: 2; }
}
.mvd-story__title { font-size: var(--mvd-size-display-l); margin: 0; }

/* Feedback #34/#35 (Edwin, 2026-09-17) — spec "Correcties na review Edwin
   (2026-08-26)": Kunst links, Kracht & Keuze rechts, elk 720 × 429, beeld rechts
   in het blok, titel 62 → 40px zodat "Kracht & Keuze" op één regel past.
   Onder 900px weer onder elkaar; onder 600px tekst boven beeld (zie hieronder). */
@media (min-width: 900px) {
	.mvd-stories { display: grid; grid-template-columns: 1fr 1fr; }
	.mvd-story { min-height: clamp(360px, 29.8vw, 429px); align-items: stretch; }
	.mvd-story + .mvd-story { border-top: 0; border-left: 1px solid var(--mvd-rule-soft); }
	.mvd-story .wp-block-media-text__content { padding: clamp(1.5rem, 2.8vw, 2.5rem); align-self: center; }
	.mvd-story .wp-block-media-text__media { height: 100%; }
	.mvd-story .wp-block-media-text__media img { width: 100%; height: 100%; object-fit: cover; }
	.mvd-story__title { font-size: clamp(1.9rem, 1.1rem + 1.1vw, 2.5rem); white-space: nowrap; }
	.mvd-story__txt { max-width: 250px; font-size: var(--mvd-size-body-m); }
}
.mvd-story__txt { color: var(--mvd-muted); max-width: 36ch; font-size: var(--mvd-size-body-l); }
.mvd-go a {
	font-size: var(--mvd-size-label-s);
	letter-spacing: var(--mvd-ls-label-s);
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--mvd-gold);
	padding-bottom: .35rem;
}

/* ── over ──────────────────────────────────────────────────────────────── */
.mvd-about { gap: clamp(2rem, 5vw, 4.5rem); }
.mvd-about .wp-block-media-text__media img { aspect-ratio: 4 / 5; object-fit: cover; }
.mvd-quals { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.mvd-quals li {
	font-size: var(--mvd-size-label-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 500;
	border: 1px solid var(--mvd-stone);
	padding: .5rem .9rem;
	color: var(--mvd-muted);
}

/* ── coaching: trajecten ───────────────────────────────────────────────── */
.mvd-coach { gap: clamp(2rem, 5vw, 4rem); }
.mvd-tiers {
	display: grid;
	gap: 1px;
	background: var(--mvd-band-rule);
	border: 1px solid var(--mvd-band-rule);
}
.mvd-tiers.mvd-tiers > * { margin-block: 0; }
.mvd-tier {
	background: var(--mvd-navy);
	padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
}
.mvd-tier h3 {
	font-size: var(--mvd-size-display-s);
	font-weight: var(--mvd-fw-display-s);
	margin: 0;
}
.mvd-tier__price { color: var(--mvd-gold); font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; }
.mvd-tier__txt { flex: 1 0 100%; color: var(--mvd-cream-ink); margin: 0; }

/* ── werkwijze ─────────────────────────────────────────────────────────── */
.mvd-steps { gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2rem; }
.mvd-step { border-top: 1px solid var(--mvd-stone); padding-top: 1.25rem; }
.mvd-step h3 { margin: 0 0 .6rem; }

/* ── contact ───────────────────────────────────────────────────────────── */
.mvd-dl { display: grid; gap: 1.1rem; margin-top: 2rem; }
.mvd-dl p { display: grid; gap: .2rem; margin: 0; }
.mvd-dl__label {
	font-size: var(--mvd-size-label-xs);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mvd-muted);
	font-weight: 500;
}
.mvd-dl a { text-decoration: none; border-bottom: 1px solid var(--mvd-stone); justify-self: start; }

/* ── contactformulier (SureForms) ──────────────────────────────────────── */
/* SureForms stuurt alles met --srfm-*-variabelen op .srfm-form-container-<id>.
   Die zetten we hier op de tokens. Twee klassen diep weegt zwaarder dan hun
   ene klasse, en hangt niet af van het formulier-ID (dat per omgeving verschilt).
   Opbouw volgt het herontwerp: .field label / .field input. */
.mvd-contact-cols { gap: clamp(2rem, 5vw, 4rem); }
.mvd-form .srfm-form-container {
	--srfm-bg-color: transparent;
	--srfm-color-scheme-primary: var(--mvd-navy);
	--srfm-color-scheme-text: var(--mvd-text);
	--srfm-color-scheme-text-on-primary: var(--mvd-cream-ink);
	--srfm-color-input-label: var(--mvd-muted);
	--srfm-color-input-text: var(--mvd-text);
	--srfm-color-input-background: var(--mvd-white);
	--srfm-color-input-background-hover: var(--mvd-white);
	--srfm-color-input-border: var(--mvd-stone);
	--srfm-color-input-border-hover: var(--mvd-navy);
	--srfm-color-input-border-focus-glow: transparent;
	--srfm-label-font-size: var(--mvd-size-label-xs);
	--srfm-label-line-height: 1.2;
	--srfm-input-field-font-size: var(--mvd-size-body-m);
	--srfm-input-field-padding: .85rem 1rem;
	--srfm-input-height: 3.1rem;
	--srfm-input-field-margin-top: .4rem;
	--srfm-row-gap-between-blocks: 1.1rem;
	--srfm-row-gap-between-fields: 1.1rem;
	--srfm-col-gap-between-fields: 1.1rem;
	background: transparent;
	font-family: var(--mvd-font-jost);
}
.mvd-form .srfm-block-label {
	font-family: var(--mvd-font-jost);
	text-transform: uppercase;
	letter-spacing: .2em;
	font-weight: 500;
}
/* Rood (#dc2626) valt buiten het palet; goud-tekst haalt 5.81:1 op crème.
   SureForms schrijft .srfm-form-container .srfm-form .srfm-* (drie klassen), dus vier. */
.mvd-form .srfm-form-container .srfm-form .srfm-required { color: var(--mvd-gold-text); }
.mvd-form .srfm-form-container .srfm-form .srfm-input-common { border-radius: 0; box-shadow: none; }
/* Focus: de ring van het herontwerp (2px goud), niet SureForms' gloed. */
.mvd-form .srfm-form-container .srfm-form .srfm-input-common:focus,
.mvd-form .srfm-form-container .srfm-form .srfm-input-common:focus-visible {
	outline: 2px solid var(--mvd-gold);
	outline-offset: 1px;
	border-color: transparent;
}
.mvd-form textarea.srfm-input-common { min-height: 7.5rem; }

/* ── footer ────────────────────────────────────────────────────────────── */
.mvd-foot {
	background: var(--mvd-navy);
	color: var(--mvd-band-quiet);
	padding-block: 3rem;
	font-size: var(--mvd-size-body-s);
}
.mvd-foot__in { gap: 1rem 2rem; align-items: center; }
.mvd-foot a { text-decoration: none; letter-spacing: .16em; text-transform: uppercase; font-size: var(--mvd-size-label-s); color: inherit; }
.mvd-foot a:hover { color: var(--mvd-cream-ink); }
.mvd-foot__links a + a { margin-left: 1.25rem; }
.mvd-foot__logo { margin: 0; }

/* ── toegankelijkheid ──────────────────────────────────────────────────── */
:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--mvd-gold);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}