/* ---------------------------------------------------------
   Contact shortcode.
   Two-column layout: address/details left, Leaflet map right.
   Same pattern as Ciralgo's contact page but stripped to essentials.
--------------------------------------------------------- */

/* Pages that use our full-canvas shortcodes need to (1) hide Kadence's
   default page-hero (which duplicates our H1), (2) drop the big top
   padding/margin that Kadence adds above the content, and (3) break
   out of Kadence's max-width "card in a page" wrapper so our container
   handles its own max-width edge-to-edge. */

/* 1. Hide Kadence's page-hero + ELKE variant van een page-title die
   Kadence, WP, of block-editor kan renderen. Nucleair, want Kadence
   heeft veel per-page settings die deze elementen kunnen tonen. */
body.lotarch-hide-page-hero .entry-hero,
body.lotarch-hide-page-hero .entry-hero-container,
body.lotarch-hide-page-hero .entry-hero-container-inner,
body.lotarch-hide-page-hero .entry-hero-section,
body.lotarch-hide-page-hero .page-hero-section,
body.lotarch-hide-page-hero .above-entry-hero,
body.lotarch-hide-page-hero .above-entry-header,
body.lotarch-hide-page-hero .below-entry-header,
body.lotarch-hide-page-hero .kadence-title-column,
body.lotarch-hide-page-hero .kadence-page-hero,
body.lotarch-hide-page-hero .kadence-inline-title,
body.lotarch-hide-page-hero .page-title-container,
body.lotarch-hide-page-hero .page-title-wrap,
body.lotarch-hide-page-hero .page-title,
body.lotarch-hide-page-hero .entry-header,
body.lotarch-hide-page-hero .entry-header .entry-title,
body.lotarch-hide-page-hero .site-main > .entry-title,
body.lotarch-hide-page-hero .entry-content > .entry-title,
body.lotarch-hide-page-hero article > .entry-title,
body.lotarch-hide-page-hero > .entry-title,
body.lotarch-hide-page-hero .entry-title,
body.lotarch-hide-page-hero .wp-block-post-title,
body.lotarch-hide-page-hero h1.entry-title,
body.lotarch-hide-page-hero h2.entry-title {
	display: none !important;
}

/* 2. Zero out Kadence's default content padding + 3. break max-width */
body.lotarch-hide-page-hero .site-container,
body.lotarch-hide-page-hero .content-container,
body.lotarch-hide-page-hero .content-wrap,
body.lotarch-hide-page-hero .entry-content-wrap,
body.lotarch-hide-page-hero .site-main,
body.lotarch-hide-page-hero .entry-content {
	max-width: 100% !important;
	width: 100% !important;
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
	background: var( --lotarch-bg-primary ) !important;
	box-shadow: none !important;
	border: 0 !important;
}

body.lotarch-hide-page-hero article.page,
body.lotarch-hide-page-hero article.post,
body.lotarch-hide-page-hero .post-inner,
body.lotarch-hide-page-hero .inside-article {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var( --lotarch-bg-primary ) !important;
	box-shadow: none !important;
}

/* ============================================================
   LOT PAGE HEADER — vaste plek voor titel/subtitel/intro op
   ELKE editorial pagina. Gebruikt dezelfde CSS-vars als de
   andere headers zodat de positie identiek is.
   ============================================================ */

.lot-page-header {
	max-width: var( --lotarch-page-content-max-width );
	margin: 0 auto;
	padding: var( --lotarch-page-title-top ) clamp( 1.5rem, 4vw, 3rem ) 0;
}

/* Title en subtitle styling komen uit het gedeelde typografie-blok
   verderop (met de andere page-titles). */

.lot-page-header__intro {
	max-width: 780px;
	margin: var( --lotarch-subtitle-intro-gap ) 0 0;
	font-family: var( --lotarch-font-sans );
	font-size: clamp( 1.05rem, 1.35vw, 1.2rem );
	line-height: 1.7;
	color: #2a2a2a;
}

.lot-page-header__intro p {
	margin: 0 0 1em;
}

.lot-page-header__intro p:last-child {
	margin-bottom: 0;
}

/* Content-blok onder de header (voor custom shortcodes én plain WP content).
   Shortcodes ([vd_thema], [project] etc) regelen hun eigen spacing via
   .vd-row max-width en padding. Voor PLAIN WordPress content (paragrafen,
   headings, lists — bijv. op de algemene voorwaarden pagina) hieronder
   premium typografie die links-uitgelijnd is met de page-title. */

.lot-editorial-content {
	max-width: var( --lotarch-page-content-max-width );
	margin: 0 auto;
	padding: 0 clamp( 1.5rem, 4vw, 3rem );
}

/* Tekstuele direct-children strekken zich uit tot de volledige breedte
   van .lot-editorial-content — dus van links-titel tot rechter-marge.
   (Geen 780px reading-width constraint — zorgt anders dat tekst midden
   op de pagina stopt terwijl de rest van de container leeg blijft.) */

/* Alinea-title typografie geconsolideerd via de --lotarch-alinea-title-*
   variabelen in style.css :root. Elke H2 binnen .lot-editorial-content
   krijgt dezelfde size/weight/line-height/letter-spacing ongeacht of
   'ie via [vd_thema], [vd_sectie] of een gewone Gutenberg heading-block
   is aangemaakt. :where() houdt de specificity laag zodat specialistische
   sub-shortcode headings (bijv. .lotarch-testimonials__title die zelf
   een <h2> is) hun eigen size behouden via hun class-specificity. */
:where( .lot-editorial-content ) h2 {
	font-family: var( --lotarch-font-serif );
	font-size: var( --lotarch-alinea-title-size );
	font-weight: var( --lotarch-alinea-title-weight );
	line-height: var( --lotarch-alinea-title-line-height );
	letter-spacing: var( --lotarch-alinea-title-letter-spacing );
	margin: 2.5rem 0 1rem;
	color: var( --lotarch-fg-primary );
}

:where( .lot-editorial-content ) > h2:first-child {
	margin-top: var( --lotarch-subtitle-intro-gap );
}

.lot-editorial-content > h3 {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.15rem, 1.75vw, 1.4rem );
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 1.75rem 0 0.75rem;
	color: var( --lotarch-fg-primary );
}

.lot-editorial-content > h4 {
	font-family: var( --lotarch-font-sans );
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 1.5rem 0 0.5rem;
	color: #444;
}

.lot-editorial-content > p {
	font-family: var( --lotarch-font-sans );
	font-size: 1.075rem;
	line-height: 1.75;
	color: #2a2a2a;
	margin: 0 0 1.1em;
}

.lot-editorial-content > p:first-child {
	margin-top: var( --lotarch-subtitle-intro-gap );
}

.lot-editorial-content > ul,
.lot-editorial-content > ol {
	font-family: var( --lotarch-font-sans );
	font-size: 1.075rem;
	line-height: 1.75;
	color: #2a2a2a;
	padding-left: 1.5rem;
	margin: 0 0 1.5em;
}

.lot-editorial-content > ul li,
.lot-editorial-content > ol li {
	margin: 0 0 0.5em;
}

.lot-editorial-content > ul li:last-child,
.lot-editorial-content > ol li:last-child {
	margin-bottom: 0;
}

.lot-editorial-content > blockquote {
	font-family: var( --lotarch-font-serif );
	font-style: italic;
	font-size: clamp( 1.1rem, 1.5vw, 1.3rem );
	line-height: 1.55;
	color: #333;
	border-left: 3px solid rgba( 0, 0, 0, 0.15 );
	padding: 0.25rem 0 0.25rem 1.5rem;
	margin: 2rem 0;
}

.lot-editorial-content > blockquote p {
	margin: 0 0 0.5em;
}

.lot-editorial-content > blockquote p:last-child {
	margin-bottom: 0;
}

/* Links in plain content: subtiel onderstreept, geen kleur-verandering. */
.lot-editorial-content > p a,
.lot-editorial-content > ul a,
.lot-editorial-content > ol a,
.lot-editorial-content > blockquote a {
	color: var( --lotarch-fg-primary );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.lot-editorial-content > p a:hover,
.lot-editorial-content > ul a:hover,
.lot-editorial-content > ol a:hover,
.lot-editorial-content > blockquote a:hover {
	opacity: 0.6;
}

/* Horizontal rule als subtiele section-divider — full-width. */
.lot-editorial-content > hr {
	margin: clamp( 2rem, 4vw, 3rem ) 0;
	border: 0;
	border-top: 1px solid rgba( 0, 0, 0, 0.1 );
}

/* Original: Content-blok onder de header (voor custom shortcodes).
   Geen eigen top-padding — shortcodes ([vd_thema], [project] etc)
   regelen hun eigen spacing. */


/* ============================================================
   UNIFIED PAGE TITLE + SUBTITLE
   Elke pagina-titel (vd_hero, contact, projecten, over, proces)
   gebruikt EXACT dezelfde typografie. Bijna alle Kadence H1-rules
   en WordPress-defaults worden hier overruled met !important +
   hoge specificiteit — zodat we niet meer per-pagina hoeven te
   tweaken.
   Verander de CSS-vars in :root om het overal in één klap aan
   te passen.
   ============================================================ */

body .vd-hero__title,
body .lotarch-contact__title,
body .lotarch-projecten__title,
body .lot-page-header__title,
body .site-main .vd-hero__title,
body .site-main .lotarch-contact__title,
body .site-main .lotarch-projecten__title,
body .site-main .lot-page-header__title,
body .entry-content .vd-hero__title,
body .entry-content .lotarch-contact__title,
body .entry-content .lotarch-projecten__title,
body .entry-content .lot-page-header__title {
	font-family: var( --lotarch-page-title-family ) !important;
	font-size: var( --lotarch-page-title-size ) !important;
	font-weight: var( --lotarch-page-title-weight ) !important;
	line-height: var( --lotarch-page-title-line-height ) !important;
	letter-spacing: var( --lotarch-page-title-letter-spacing ) !important;
	color: var( --lotarch-page-title-color ) !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	text-align: left;
	text-transform: none !important;
}

body .vd-hero__tagline,
body .lotarch-contact__subtitle,
body .lot-page-header__subtitle {
	font-family: var( --lotarch-page-subtitle-family ) !important;
	font-size: var( --lotarch-page-subtitle-size ) !important;
	font-weight: var( --lotarch-page-subtitle-weight ) !important;
	line-height: var( --lotarch-page-subtitle-line-height ) !important;
	color: var( --lotarch-page-subtitle-color ) !important;
	/* Gap van titel → subtitel via CSS-var, overal identiek. */
	margin: var( --lotarch-title-subtitle-gap ) 0 0 !important;
	max-width: 640px;
	text-align: left;
	text-transform: none !important;
}

/* Uitzondering: hero MET foto-background → titel en subtitle zijn wit
   voor leesbaarheid op de gradient overlay. */
body .vd-hero--has-image .vd-hero__title,
body .vd-hero--has-image .vd-hero__tagline {
	color: #ffffff !important;
}

/* ============================================================
   EDITORIAL PAGES (shortcode-based rows)
   Layout systeem voor de Verduurzamen EN Over LOTarchitectuur
   pagina. Elke rij op de pagina komt uit een shortcode
   ([vd_hero], [vd_intro], [vd_thema], [vd_cta], [vd_lijst]).
   Templates die deze look gebruiken krijgen de class
   .lot-editorial-page op de <main>.
   ============================================================ */

.lot-editorial-page {
	background: var( --lotarch-bg-primary );
	color: var( --lotarch-fg-primary );
}

/* Kadence page hero + entry padding weghalen voor deze templates. */
body.page-template-page-verduurzamen .entry-hero,
body.page-template-page-verduurzamen .entry-header,
body.page-template-page-verduurzamen .page-title,
body.page-template-page-over-lotarchitectuur .entry-hero,
body.page-template-page-over-lotarchitectuur .entry-header,
body.page-template-page-over-lotarchitectuur .page-title,
body.page-template-page-proces .entry-hero,
body.page-template-page-proces .entry-header,
body.page-template-page-proces .page-title {
	display: none !important;
}
body.page-template-page-verduurzamen .site-main,
body.page-template-page-verduurzamen .entry-content,
body.page-template-page-verduurzamen article.page,
body.page-template-page-over-lotarchitectuur .site-main,
body.page-template-page-over-lotarchitectuur .entry-content,
body.page-template-page-over-lotarchitectuur article.page,
body.page-template-page-proces .site-main,
body.page-template-page-proces .entry-content,
body.page-template-page-proces article.page {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
}

/* Generieke row wrapper: alle vd_* secties zitten in .vd-row of .vd-hero.
   Standaard reading container, met vaste horizontale marges. */
.vd-row {
	max-width: var( --lotarch-page-content-max-width );
	margin: 0 auto;
	/* Verticale padding via var (kan globaal aangepast worden in :root). */
	padding: var( --lotarch-row-spacing ) clamp( 1.5rem, 4vw, 3rem );
}

/* Als .vd-row binnen .lot-editorial-content staat, dan is de horizontale
   padding al door de parent gezet. Dubbele padding zou de content 48px
   naar rechts duwen ten opzichte van de titel (die op container-left+48
   staat). Deze override zorgt dat shortcode-content EXACT op zelfde x
   start als de titel. */
.lot-editorial-content .vd-row {
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Hero row ----------
   Twee modes:
   1. --has-image  : full-width foto-band met titel-overlay bovenaan.
   2. --placeholder: geen foto → gewoon een tekstblok met titel +
      tagline, ZELFDE achtergrond als de rest van de pagina. Geen
      lege gekleurde band, geen forced height. */

.vd-hero {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var( --lotarch-bg-primary );
}

/* --- Mode 1: mét foto (banner) --- */
.vd-hero--has-image {
	height: clamp( 300px, 42vh, 480px );
	overflow: hidden;
}

.vd-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	z-index: 1;
}

.vd-hero--has-image .vd-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	z-index: 3;
}

.vd-hero--has-image .vd-hero__overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg,
		rgba( 0, 0, 0, 0.55 ) 0%,
		rgba( 0, 0, 0, 0.25 ) 40%,
		rgba( 0, 0, 0, 0 ) 100% );
	z-index: 2;
	pointer-events: none;
}

.vd-hero--has-image .vd-hero__inner {
	position: relative;
	z-index: 3;
	max-width: var( --lotarch-page-content-max-width );
	width: 100%;
	margin: 0 auto;
	/* Zelfde top-offset als alle andere page-titles → uniforme y-positie. */
	padding: var( --lotarch-page-title-top ) clamp( 1.5rem, 4vw, 3rem );
	color: #ffffff;
}

/* --- Mode 2: placeholder (geen foto) --- */
.vd-hero--placeholder {
	background: var( --lotarch-bg-primary );
	height: auto;
	overflow: visible;
}

.vd-hero--placeholder .vd-hero__overlay {
	position: static;
	display: block;
}

.vd-hero--placeholder .vd-hero__inner {
	max-width: var( --lotarch-page-content-max-width );
	width: 100%;
	margin: 0 auto;
	/* Zelfde top-offset als alle andere page-titles → uniforme y-positie.
	   Geen bottom-padding zodat intro naadloos volgt. */
	padding: var( --lotarch-page-title-top ) clamp( 1.5rem, 4vw, 3rem ) 0;
	color: var( --lotarch-fg-primary );
}

/* Title/subtitle sizing komt uit de gedeelde .lotarch-page-title en
   .lotarch-page-subtitle blokken (zie onder). Hier alleen elementen
   die specifiek zijn voor de hero-mode (bijv. opacity op tagline). */
.vd-hero__tagline {
	max-width: 640px;
	opacity: 0.9;
}

.vd-hero__tagline p {
	margin: 0 0 0.5em;
}

.vd-hero__tagline p:last-child {
	margin-bottom: 0;
}

/* ---------- Intro row ----------
   Padding-top bepaalt de afstand tussen hero-subtitle en intro-tekst.
   Gebruikt --lotarch-subtitle-intro-gap zodat het op ELKE pagina
   dezelfde afstand is. */

.vd-intro {
	padding-top: var( --lotarch-subtitle-intro-gap );
	padding-bottom: clamp( 2rem, 4vw, 3rem );
}

.vd-intro__inner {
	max-width: 780px;
	/* Links uitgelijnd binnen de container ipv gecentreerd. */
	margin: 0;
	font-family: var( --lotarch-font-sans );
	font-size: clamp( 1.15rem, 1.5vw, 1.35rem );
	line-height: 1.65;
	color: #2a2a2a;
	text-align: left;
}

.vd-intro__inner p {
	margin: 0 0 1em;
}

.vd-intro__inner p:last-child {
	margin-bottom: 0;
}

/* ---------- Thema row ----------
   Alterneert automatisch: 1e thema = foto's RECHTS (text links),
   2e = foto's LINKS (text rechts), enz. Bepaald door class
   .vd-thema--photos-right of .vd-thema--photos-left op de section. */

.vd-thema {
	display: grid;
	column-gap: clamp( 2rem, 4vw, 4rem );
	row-gap: clamp( 1.5rem, 3vw, 2.5rem );
	align-items: start;
}

/* Geen foto's opgegeven → text-only, tekst pakt de volle breedte.
   Kolom-grid uitgeschakeld zodat er niks reserved is voor een photo-kolom.
   Handig voor puur tekstuele thema's zonder placeholder-vervuiling. */
.vd-thema--count-0 {
	grid-template-columns: 1fr;
}
.vd-thema--count-0 .vd-thema__text {
	grid-column: 1;
	max-width: 780px;
}

/* Foto's RECHTS: text-kolom smaller (5fr), photo-kolom breder (7fr).
   Expliciete grid-row: 1 op beide items zodat ze GEGARANDEERD in
   dezelfde rij zitten — anders kan grid auto-flow (sparse mode) een
   item naar row 2 sturen als een eerder item een niet-volgende kolom
   claimt (zoals bij photos-left waar text→col2 komt vóór photos→col1). */
.vd-thema--photos-right {
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
}
.vd-thema--photos-right .vd-thema__text {
	grid-column: 1;
	grid-row: 1;
}
.vd-thema--photos-right .vd-thema__photos {
	grid-column: 2;
	grid-row: 1;
}

/* Foto's LINKS: mirrored. */
.vd-thema--photos-left {
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
}
.vd-thema--photos-left .vd-thema__text {
	grid-column: 2;
	grid-row: 1;
}
.vd-thema--photos-left .vd-thema__photos {
	grid-column: 1;
	grid-row: 1;
}

/* Foto's CENTER: stacked layout — tekst boven (met leesbreedte),
   foto('s) gecentreerd eronder in eigen rij. Bij 1 foto krijgt die
   een aangename middengrootte; bij 2 foto's staan ze naast elkaar
   gecentreerd in de rij. */
.vd-thema--photos-center {
	grid-template-columns: 1fr;
}
.vd-thema--photos-center .vd-thema__text {
	grid-column: 1;
	grid-row: 1;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}
.vd-thema--photos-center .vd-thema__photos {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
	margin-top: clamp( 1.5rem, 3vw, 2.5rem );
}
.vd-thema--photos-center.vd-thema--count-1 .vd-thema__photos {
	width: clamp( 400px, 55vw, 780px );
}
.vd-thema--photos-center.vd-thema--count-2 .vd-thema__photos {
	width: clamp( 500px, 75vw, 1100px );
}

.vd-thema__text {
	/* GEEN position: sticky — die zorgt dat tekst bij scrollen naar
	   viewport-top plakt terwijl foto's op hun grid-positie blijven,
	   wat visueel misalignment veroorzaakt. Tekst blijft nu gewoon
	   in z'n grid-cel en is dus perfect top-aligned met de foto's. */
	align-self: start;
	margin-top: 0;
	font-family: var( --lotarch-font-sans );
}

/* Foto-kolom expliciet top-aligned + geen top-marge zodat eerste
   foto en eerste tekstregel op exact dezelfde y-positie starten. */
.vd-thema__photos {
	align-self: start;
	margin-top: 0;
}

.vd-thema__title {
	font-family: var( --lotarch-font-serif );
	font-size: var( --lotarch-alinea-title-size );
	font-weight: var( --lotarch-alinea-title-weight );
	line-height: var( --lotarch-alinea-title-line-height );
	letter-spacing: var( --lotarch-alinea-title-letter-spacing );
	margin: 0 0 1rem;
	color: var( --lotarch-fg-primary );
}

.vd-thema__body {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #2a2a2a;
}

.vd-thema__body p {
	margin: 0 0 1em;
}

.vd-thema__body p:last-child {
	margin-bottom: 0;
}

.vd-thema__body a {
	color: var( --lotarch-fg-primary );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.vd-thema__body a:hover {
	opacity: 0.6;
}

/* --- Premium list-styling voor <ul> / <ol> / [vd_lijst] ---
   Marker = dunne horizontale lijn (architectural mark, past bij het
   domein). Hanging indent zodat wrapped tekst netjes onder de eerste
   regel uitlijnt. High specificity + !important op de resets zodat
   Kadence / browser defaults zeker verslagen worden. */

.lot-editorial-page .vd-thema__body ul,
.lot-editorial-page .vd-thema__body ol,
.lot-editorial-page ul.vd-lijst,
.lot-editorial-page ol.vd-lijst {
	list-style: none !important;
	margin: 1.5em 0 !important;
	padding: 0 !important;
}

.lot-editorial-page .vd-thema__body li,
.lot-editorial-page .vd-lijst li {
	position: relative;
	list-style: none !important;
	padding: 0 0 0 2.5rem !important;
	margin: 0 0 0.9em !important;
	line-height: 1.7;
	font-size: 1.05rem;
	color: #2a2a2a;
	font-family: var( --lotarch-font-sans );
}

.lot-editorial-page .vd-thema__body li:last-child,
.lot-editorial-page .vd-lijst li:last-child {
	margin-bottom: 0 !important;
}

/* Marker: 20px x 1px horizontale lijn, muted color, verticaal
   uitgelijnd met midden van eerste regel. Architectonisch en subtiel. */
.lot-editorial-page .vd-thema__body ul > li::before,
.lot-editorial-page ul.vd-lijst > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 1.25rem;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
}

/* Ordered list: serif nummer + punt, past bij de site typografie. */
.lot-editorial-page .vd-thema__body ol,
.lot-editorial-page ol.vd-lijst {
	counter-reset: vd-lijst-counter;
}

.lot-editorial-page .vd-thema__body ol > li,
.lot-editorial-page ol.vd-lijst > li {
	counter-increment: vd-lijst-counter;
	padding-left: 2.75rem !important;
}

.lot-editorial-page .vd-thema__body ol > li::before,
.lot-editorial-page ol.vd-lijst > li::before {
	content: counter( vd-lijst-counter ) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: rgba( 0, 0, 0, 0.55 );
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	line-height: 1.7;
	font-family: var( --lotarch-font-serif );
	font-size: 1.05rem;
}

/* Nested lists: subtiel inspringen. */
.lot-editorial-page .vd-thema__body ul ul,
.lot-editorial-page .vd-thema__body ol ol,
.lot-editorial-page .vd-thema__body ul ol,
.lot-editorial-page .vd-thema__body ol ul {
	margin: 0.5em 0 0.5em 1rem !important;
}

/* Als [vd_lijst] LOS staat (niet binnen vd_thema) — bijvoorbeeld direct
   in de intro of los in de content — geef 'm dezelfde container-marges. */
.lot-editorial-page > ul.vd-lijst,
.lot-editorial-page > ol.vd-lijst {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp( 1.5rem, 4vw, 3rem ) !important;
	padding-right: clamp( 1.5rem, 4vw, 3rem ) !important;
}

/* De foto's in dit thema: grid met 1 OF 2 kolommen, 4:3 aspect, sharp
   corners. Aantal kolommen wordt bepaald door de count-modifier op de
   parent section (.vd-thema--count-1 of .vd-thema--count-2). Bij 1
   foto wordt die dus 2x zo breed als bij 2 foto's naast elkaar. */
.vd-thema__photos {
	display: grid;
	gap: clamp( 1rem, 2vw, 1.5rem );
}

/* Bij 1 foto: vaste absolute breedte via clamp op viewport. Zo heeft
   ELKE single-photo thema exact dezelfde afmeting — ongeacht of het
   in een photos-left of photos-right variant zit, en ongeacht welke
   grid-cel het inneemt. Aspect-ratio 4:3 op .vd-photo geeft dan ook
   dezelfde hoogte. Aligned naar de OUTER edge (weg van tekst) voor
   editorial gevoel. */
.vd-thema--count-1 .vd-thema__photos {
	grid-template-columns: 1fr;
	width: clamp( 300px, 32vw, 460px );
	max-width: 100%;
}

/* Single-photo alignment: HORIZONTAAL en VERTICAAL gecentreerd op de
   helft van de pagina waar de foto staat. Kolom stretcht mee met de
   rij-hoogte (matcht de tekst-kolom ernaast) en de foto zit exact in
   het midden — niet linksboven, niet aan de buitenrand. */
.vd-thema--count-1.vd-thema--photos-right .vd-thema__photos,
.vd-thema--count-1.vd-thema--photos-left .vd-thema__photos {
	justify-self: center;
	align-self: center;
}

.vd-thema--count-2 .vd-thema__photos {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

/* ---------- Photo blocks (gebruikt in vd_thema) ---------- */

.vd-photo {
	position: relative;
	width: 100%;
	/* Aspect-ratio komt uit --vd-photo-ratio custom property (default 4/3).
	   Kan per [vd_thema] worden overschreven via foto_ratio="3/4" etc. */
	aspect-ratio: var( --vd-photo-ratio, 4 / 3 );
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.04 );
	border-radius: 0;
}

.vd-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position via --vd-photo-focus custom prop (default center center).
	   Bepaalt welk deel van de foto zichtbaar blijft bij crop. Bijv. "top",
	   "bottom", "left top", "50% 30%". */
	object-position: var( --vd-photo-focus, center center );
	/* Zoom via --vd-photo-zoom multiplier (default 1). Waarden >1 zoomen in
	   (meer crop naar centrum-of-focus), <1 zoomen uit (kleiner binnen kader). */
	transform: scale( var( --vd-photo-zoom, 1 ) );
	transform-origin: center center;
	transition: transform 0.55s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* Hover behoudt oude zoom-effect maar respecteert de custom zoom-var. */
.vd-photo:hover img {
	transform: scale( calc( var( --vd-photo-zoom, 1 ) * 1.03 ) );
}

/* Natural aspect: foto behoudt eigen verhouding, geen crop.
   Gebruikt door [vd_thema foto_ratio="auto"], bijv. voor een portret-foto
   die niet aan boven+onder afgesneden moet worden. */
.vd-thema--ratio-auto .vd-photo {
	aspect-ratio: auto;
	height: auto;
}
.vd-thema--ratio-auto .vd-photo img {
	height: auto;
	object-fit: contain;
}

/* (Oude .vd-photo:hover img rule verwijderd — nieuwe versie hierboven
   respecteert de --vd-photo-zoom custom prop.) */

/* Link-wrapper voor klikbare foto's ([vd_foto link="..."]). Anchor
   erft de max-width + margin-align van de foto zelf. Foto binnen de
   anchor mag geen dubbele margin krijgen — die zit al op de anchor.
   Position relative zodat de klik-badge absolute-positioned kan worden. */
.vd-foto-link {
	position: relative;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.25s ease;
}
.vd-foto-link:hover {
	opacity: 0.92;
}
.vd-foto-link .vd-foto,
.vd-foto-link .vd-foto-wrap {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

/* Klik-badge: persistent klein wit rondje met ↗ pijltje in rechter-
   onderhoek. Altijd zichtbaar (niet alleen op hover) zodat direct
   duidelijk is dat de foto klikbaar is. Op hover groeit 'ie licht +
   shadow wordt sterker voor extra feedback. Tight in de hoek (6px
   inset) zodat 'ie ook op kleine logo's/icoontjes niet dominant is. */
.vd-foto-link__badge {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --lotarch-fg-primary );
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.18 );
	pointer-events: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.vd-foto-link:hover .vd-foto-link__badge,
.vd-foto-link:focus-visible .vd-foto-link__badge {
	transform: scale( 1.12 );
	background: #ffffff;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.25 );
}

.vd-foto-link__badge svg {
	display: block;
	pointer-events: none;
}

/* --- Icoon-modus ([vd_thema foto_stijl="icoon"]) ---
   Voor PNG's met transparante achtergrond (logo's, symbolen, icons).
   Verwijdert de grijze placeholder-bg, gebruikt object-fit contain zodat
   het icoon NIET wordt uitgesneden, laat het natuurlijk formaat behouden. */
/* Icoon-kolom stretcht mee met de rij-hoogte (matcht de tekst-kolom
   ernaast) en centreert het icoon zowel horizontaal als verticaal. Zo
   staat 'ie precies in het midden van z'n helft van de pagina, ipv
   linksboven of ergens tussenin. */
.vd-thema--stijl-icoon .vd-thema__photos {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
}

.vd-thema--stijl-icoon .vd-photo {
	background: transparent;
	aspect-ratio: auto;
	height: auto;
	padding: clamp( 0.75rem, 2vw, 1.25rem );
	box-sizing: border-box;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.vd-thema--stijl-icoon .vd-photo img {
	width: 65%;
	height: auto;
	max-height: 200px;
	display: block;
	object-fit: contain;
	object-position: center center;
	/* Zoom-var respecteren maar hover-scale uit (icoontjes hebben geen
	   hover-crop feature). */
	transform: scale( var( --vd-photo-zoom, 1 ) );
}

.vd-thema--stijl-icoon .vd-photo:hover img {
	transform: scale( var( --vd-photo-zoom, 1 ) );
}

/* Placeholder variants: 2 subtiele gradients zodat 2 naast elkaar niet
   identiek zijn. Neutraal genoeg om niet af te leiden. */
.vd-photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vd-photo--placeholder-1 {
	background: linear-gradient( 135deg, #ede6d3 0%, #d9ceb4 100% );
}

.vd-photo--placeholder-2 {
	background: linear-gradient( 135deg, #e2dcc9 0%, #cec3a8 100% );
}

/* Icoon-variant ([vd_thema foto1="icoon:key"]) — subtiele achtergrond
   met hairline border zodat het SVG icoon (bijv. cijferslot) rustig
   in beeld staat zonder gradient-competitie. */
.vd-photo--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 26, 26, 26, 0.03 );
	border: 1px solid rgba( 26, 26, 26, 0.1 );
	width: 100%;
	height: 100%;
	min-height: 100%;
}

/* SVG-icoon kolom stretcht mee met de rij zodat verticaal midden op
   de rij-hoogte gelijk is aan de tekst-kolom ernaast. */
.vd-thema__photos:has( > .vd-photo--icon ) {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
}

.vd-photo--icon svg {
	display: block;
	width: 45%;
	height: 45%;
	max-width: 200px;
	max-height: 200px;
	color: var( --lotarch-fg-primary );
	stroke: currentColor;
}

/* Voorkom dat de scale-hover van gewone foto's op de icoon variant
   triggert (icoon is geen <img>, maar dubbele veiligheid). */
.vd-photo--icon:hover svg {
	transform: none;
}

.vd-photo__placeholder-label {
	font-family: var( --lotarch-font-sans );
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba( 0, 0, 0, 0.35 );
}

/* ---------- CTA row ---------- */

.vd-cta {
	/* CTA blijft iets luxer dan andere rows (want visueel de "afsluiter"
	   van een pagina). Vermenigvuldig standaard row-spacing met factor. */
	padding-top: calc( var( --lotarch-row-spacing ) * 1.3 );
	padding-bottom: calc( var( --lotarch-row-spacing ) * 1.3 );
	text-align: center;
}

.vd-cta__inner {
	max-width: 640px;
	margin: 0 auto;
}

.vd-cta__title {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 1rem;
	color: var( --lotarch-fg-primary );
}

.vd-cta__body {
	font-family: var( --lotarch-font-sans );
	font-size: 1.05rem;
	line-height: 1.65;
	color: #444;
	margin: 0 0 2rem;
}

.vd-cta__body p {
	margin: 0 0 0.75em;
}

.vd-cta__body p:last-child {
	margin-bottom: 0;
}

.vd-cta__button,
.vd-cta__button:link,
.vd-cta__button:visited {
	display: inline-block;
	padding: 1rem 2rem;
	background: var( --lotarch-fg-primary );
	color: var( --lotarch-bg-primary ) !important;
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-radius: 0;
	/* transform + box-shadow via transition zodat de hover-lift smooth is;
	   will-change transform hint zorgt dat de browser 'em promoot naar een
	   composited layer (geen paint op elke frame). */
	transform: translateY( 0 ) scale( 1 );
	box-shadow: 0 0 0 rgba( 0, 0, 0, 0 );
	will-change: transform;
	transition:
		background 0.25s ease,
		color 0.25s ease,
		transform 0.25s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.25s ease;
}

/* Hover/focus: oranje achtergrond + subtiele scale(1.05) lift + soft shadow.
   Scale 1.05 = conversie-sweetspot (Baymard/Nielsen): duidelijk voelbaar
   als interactieve feedback maar niet zo groot dat het als glitch leest.
   translateY(-2px) + shadow = "click me" lift-effect dat Stripe/Airbnb
   ook gebruiken. Cubic-bezier easing is de standaard "ease-out-quart"
   die net wat springerig aanvoelt zonder overshoot. */
.vd-cta__button:hover,
.vd-cta__button:focus-visible,
.vd-cta__button:link:hover,
.vd-cta__button:visited:hover,
.vd-cta__button:link:focus-visible,
.vd-cta__button:visited:focus-visible {
	background: #FD9606;
	color: #fff !important;
	transform: translateY( -2px ) scale( 1.05 );
	box-shadow: 0 10px 24px -8px rgba( 253, 150, 6, 0.45 );
	outline: none;
}

/* Active state: press-in feedback zodat de knop tactiel aanvoelt bij een
   echte klik. Iets minder scale, geen shadow. */
.vd-cta__button:active {
	transform: translateY( 0 ) scale( 1.02 );
	box-shadow: 0 2px 6px -2px rgba( 253, 150, 6, 0.4 );
	transition-duration: 0.08s;
}

/* Prefers-reduced-motion: geen scale/lift, alleen kleurverandering. */
@media ( prefers-reduced-motion: reduce ) {
	.vd-cta__button,
	.vd-cta__button:hover,
	.vd-cta__button:focus-visible,
	.vd-cta__button:active {
		transform: none;
		transition: background 0.2s ease, color 0.2s ease;
	}
}

/* ---------- Sectie row ([vd_sectie]) ----------
   Simpele text-rij met optionele titel. Blok wisselt automatisch links/
   rechts per sectie voor editorial magazine-ritme. Text-blok heeft
   comfortable reading-width (620px, ~55-65 chars per regel — premium
   magazine standaard). */

.vd-sectie__inner {
	max-width: 620px;
}

/* Alignment binnen de .vd-row container: alterneert per sectie
   (auto) of expliciet via align="left|right|center" op de shortcode. */
.vd-sectie--align-left .vd-sectie__inner {
	margin-left: 0;
	margin-right: auto;
}

.vd-sectie--align-right .vd-sectie__inner {
	margin-left: auto;
	margin-right: 0;
}

.vd-sectie--align-center .vd-sectie__inner {
	margin-left: auto;
	margin-right: auto;
}

.vd-sectie__title {
	font-family: var( --lotarch-font-serif );
	font-size: var( --lotarch-alinea-title-size );
	font-weight: var( --lotarch-alinea-title-weight );
	line-height: var( --lotarch-alinea-title-line-height );
	letter-spacing: var( --lotarch-alinea-title-letter-spacing );
	margin: 0 0 1.25rem;
	color: var( --lotarch-fg-primary );
}

.vd-sectie__body {
	font-family: var( --lotarch-font-sans );
	font-size: 1.075rem;
	line-height: 1.75;
	color: #2a2a2a;
}

.vd-sectie__body p {
	margin: 0 0 1.1em;
}

.vd-sectie__body p:last-child {
	margin-bottom: 0;
}

.vd-sectie__body a {
	color: var( --lotarch-fg-primary );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.vd-sectie__body a:hover {
	opacity: 0.6;
}

/* ---------- Split row ([vd_split] + [vd_kolom]) ----------
   Generieke 2-koloms wrapper. Kolommen top-aligned, ratio via
   custom properties (default 1/1). */

.vd-split {
	display: grid;
	grid-template-columns: var( --vd-split-left, 1fr ) var( --vd-split-right, 1fr );
	column-gap: clamp( 2rem, 4vw, 4rem );
	row-gap: clamp( 1.5rem, 3vw, 2.5rem );
	align-items: start;
}

/* [vd_split align="stretch"]: kolommen krijgen gelijke hoogte. Nuttig voor
   bijv. [contact_gegevens] naast [contactformulier] — de gegevens spreiden
   zich verticaal om de form-hoogte te matchen. */
.vd-split--stretch {
	align-items: stretch;
}

.vd-split--stretch > .vd-kolom {
	display: flex;
	flex-direction: column;
}

.vd-split--stretch > .vd-kolom > *:only-child,
.vd-split--stretch > .vd-kolom > *:last-child {
	flex: 1;
}

/* [vd_split align="center"]: kolommen verticaal gecentreerd. De korte
   kolom (bijv. contact-gegevens kader) komt op de midden-lijn van de
   lange kolom (bijv. contactformulier). */
.vd-split--center {
	align-items: center;
}

/* [vd_split align="end"]: kolommen bottom-aligned. De korte kolom heeft
   z'n onderkant tegen dezelfde bodem-lijn als de lange kolom — perfect
   om bijv. het contact-gegevens kader met z'n onderkant tegen de
   Verstuur-knop van het formulier te lijnen. */
.vd-split--end {
	align-items: end;
}

.vd-kolom {
	min-width: 0;
	font-family: var( --lotarch-font-sans );
	font-size: 1.075rem;
	line-height: 1.75;
	color: #2a2a2a;
}

/* Elk direct first-child in een kolom start op y=0 zodat beide kolommen
   in een [vd_split] top-aligned zijn ongeacht wat er in staat (paragraph,
   heading, ol, div, etc.). Vangt alle browser/theme default margins af. */
.vd-kolom > *:first-child {
	margin-top: 0;
}

/* Premium typografie voor tekstuele elementen in een kolom. */
.vd-kolom p {
	margin: 0 0 1.1em;
}

.vd-kolom p:first-child {
	margin-top: 0;
}

.vd-kolom p:last-child {
	margin-bottom: 0;
}

.vd-kolom h2,
.vd-kolom h3 {
	font-family: var( --lotarch-font-serif );
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var( --lotarch-fg-primary );
	margin: 1.5rem 0 0.75rem;
}

.vd-kolom h2 {
	font-size: clamp( 1.35rem, 2vw, 1.75rem );
	line-height: 1.2;
}

.vd-kolom h3 {
	font-size: clamp( 1.1rem, 1.5vw, 1.3rem );
	line-height: 1.25;
}

.vd-kolom h2:first-child,
.vd-kolom h3:first-child {
	margin-top: 0;
}

.vd-kolom a {
	color: var( --lotarch-fg-primary );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.vd-kolom a:hover {
	opacity: 0.6;
}

.vd-kolom ul,
.vd-kolom ol {
	margin: 0 0 1.25em;
	padding-left: 1.5rem;
}

.vd-kolom li {
	margin: 0 0 0.4em;
}

/* Foto's in een kolom: full-width, ademruimte boven als er tekst boven staat. */
.vd-kolom > img,
.vd-kolom img.vd-foto {
	max-width: 100%;
	height: auto;
	display: block;
	margin-top: 1.75rem;
}

.vd-kolom > img:first-child,
.vd-kolom img.vd-foto:first-child {
	margin-top: 0;
}

/* Mobile: stack verticaal. */
@media ( max-width: 780px ) {
	.vd-split {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   Verduurzamen page accents.
   - Titels blijven zwart (default), zoals de rest van de tekst.
   - Streepje onder elke thema-titel is oranje (#FD9606 — site accent
     uit nav/CTA hover), leest als een editorial marker.
   - Icoontjes alterneren om-en-om zwart en oranje via
     .vd-thema--icoon-alt-a (zwart) / --alt-b (oranje) class die de
     [vd_thema] shortcode toevoegt op basis van z'n thema-counter.
--------------------------------------------------------- */

/* Oranje horizontaal streepje onder elke alinea-titel. Matched dezelfde
   selectors als de centrale alinea-title contract-rule aan het einde
   van deze file — dus alleen op "alinea-level" h2s die direct in het
   editorial content-blok staan (of via een Gutenberg wrapper zonder
   __-class), NIET op sub-shortcode headings (testimonials, werkwijze,
   proces etc) die diepere nesting + hun eigen __-class hebben. */
.vd-thema__title::after,
.vd-sectie__title::after,
:where( .lot-editorial-content ) > h2::after,
:where( .lot-editorial-content ) > .wp-block-heading::after,
:where( .lot-editorial-content ) > *:not( [class*="__"] ) > h2::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 2px;
	background: #FD9606;
	margin-top: 0.6rem;
}

/* Even-genummerde thema's krijgen ORANJE SVG icoontjes; odd blijven
   zwart (default). Alleen SVG icoontjes (foto1="icoon:key") worden
   getint — die zijn currentColor-gedreven dus veilig te kleuren zonder
   filter-hacks. PNG's (echte foto's die via foto_stijl="icoon" worden
   getoond) blijven onaangeroerd zodat een warmte-scan of andere content-
   foto z'n oorspronkelijke kleuren behoudt. */
.lot-page-verduurzamen .vd-thema--icoon-alt-b .vd-photo--icon svg {
	color: #FD9606;
}

/* ---------------------------------------------------------
   [vd_cijfers] + [vd_cijfer] — visuele stats-rij.
   Grote Fraunces cijfers met scroll-triggered count-up animatie
   (JS in assets/js/vd-cijfers.js). Iedere stat bestaat uit een
   optioneel prefix, het cijfer zelf, een optionele suffix, en
   een klein label eronder.
--------------------------------------------------------- */

/* .vd-cijfers is een .vd-row (dus krijgt automatisch de row-spacing
   uit :root --lotarch-row-spacing). __inner regelt de grid layout. */
.vd-cijfers__inner {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: clamp( 2rem, 5vw, 4rem );
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp( 1.5rem, 3vw, 2.5rem ) 0;
}

.vd-cijfers--align-left .vd-cijfers__inner {
	margin: 0;
}

.vd-cijfer {
	text-align: center;
	position: relative;
}

.vd-cijfers--align-left .vd-cijfer {
	text-align: left;
}

/* Optioneel: subtiele verticale separator tussen cijfers op desktop.
   Alleen als er meerdere kolommen zijn (grid-column > 1). */
.vd-cijfer + .vd-cijfer::before {
	content: '';
	position: absolute;
	left: calc( -1 * clamp( 1rem, 2.5vw, 2rem ) );
	top: 15%;
	bottom: 15%;
	width: 1px;
	background: rgba( 26, 26, 26, 0.1 );
}

/* Op mobile (single column) verwijderen we de separator. */
@media ( max-width: 640px ) {
	.vd-cijfer + .vd-cijfer::before {
		display: none;
	}
	.vd-cijfers__inner {
		gap: 2rem;
	}
}

/* Cijferwaarde: prefix + number + suffix op één regel, groot in
   Fraunces. tabular-nums (font-variant-numeric) voorkomt dat het
   getal wiebelt tijdens de count-up animatie. */
.vd-cijfer__waarde {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 3rem, 8vw, 5.5rem );
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --lotarch-fg-primary );
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.1em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

.vd-cijfers--align-left .vd-cijfer__waarde {
	justify-content: flex-start;
}

/* Prefix/suffix zijn kleiner dan het hoofdcijfer maar behouden Fraunces
   voor consistentie. Suffix mag een leading space bevatten (bijv.
   " jaar" of " kg") — die space rendert normaal via de gap-tussenruimte
   is niet nodig, dus we hanteren gap: 0.1em die klein genoeg is. */
.vd-cijfer__prefix,
.vd-cijfer__suffix {
	font-family: var( --lotarch-font-serif );
	font-size: 0.42em;
	font-weight: 400;
	color: var( --lotarch-fg-primary );
	opacity: 0.6;
	line-height: 1;
	letter-spacing: 0;
	white-space: pre;
	/* baseline aligned via parent flex align-items: baseline. */
}

/* Op de verduurzamen pagina krijgt het cijfer zelf het site-oranje
   accent — dat is de visuele hook: grote oranje getallen breken de
   tekstwand, en het rijmt met het streepje onder de thema-titels en
   de alternerende SVG icoontjes. */
.lot-page-verduurzamen .vd-cijfer__number {
	color: #FD9606;
}

/* Label onder het cijfer: klein, sans, subtiel — zoals een caption
   onder een editorial statistic. */
.vd-cijfer__label {
	font-family: var( --lotarch-font-sans );
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #666;
	margin-top: 0.85rem;
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
}

.vd-cijfers--align-left .vd-cijfer__label {
	margin-left: 0;
	margin-right: 0;
}

/* Reduced motion: de JS neemt al z'n voorzorg (direct eindwaarde
   ipv animatie), maar een subtiele fade-in laten we ook uit. */
@media ( prefers-reduced-motion: reduce ) {
	.vd-cijfer__number {
		transition: none;
	}
}

/* ============================================================
   CENTRAAL alinea-title contract — LAST WORD op font-size + zichtbaar
   in ÉÉN plek in style.css :root. Overrides eventuele Kadence h2 defaults
   en oude hardcoded font-size regels via !important. font-variation-
   settings gefixeerd zodat Fraunces overal identiek rendert (opsz 96 =
   display optical size, SOFT 30 voor de zachte serif varianten).

   Tune via de --lotarch-alinea-title-* variabelen in style.css :root —
   één cijfer verandert alle alinea-titels op de hele site.

   Specialistische shortcode-titels (testimonials, werkwijze, proces,
   cta) matchen deze selectors NIET (ze hebben eigen classes), dus die
   behouden hun eigen styling automatisch.
   ============================================================ */
.vd-thema__title,
.vd-sectie__title,
:where( .lot-editorial-content ) > h2,
:where( .lot-editorial-content ) > .wp-block-heading,
:where( .lot-editorial-content ) > *:not( [class*="__"] ) > h2 {
	font-family: var( --lotarch-font-serif ) !important;
	font-size: var( --lotarch-alinea-title-size ) !important;
	font-weight: var( --lotarch-alinea-title-weight ) !important;
	line-height: var( --lotarch-alinea-title-line-height ) !important;
	letter-spacing: var( --lotarch-alinea-title-letter-spacing ) !important;
	font-variation-settings: 'opsz' 96, 'SOFT' 30 !important;
	color: var( --lotarch-fg-primary ) !important;
}

/* ---------- [auteur] shortcode — architect-kaartje ----------
   Drie varianten: kaartje (default, horizontal met portret + bio),
   compact (kleiner, portret + naam), vermelding (één regel byline).

   Layout: flex-row met portret links, tekst rechts. Op mobile stapelt
   het naar kolom. Portret is een cirkel — architect-portret in
   editorial style. */
.lot-auteur {
	margin: clamp( 1.5rem, 3vw, 2.5rem ) 0;
	font-family: var( --lotarch-font-sans );
	color: var( --lotarch-fg-primary );
}

.lot-auteur--kaartje {
	display: flex;
	gap: clamp( 1rem, 2vw, 1.75rem );
	align-items: flex-start;
	padding: clamp( 1.25rem, 2.5vw, 2rem );
	background: rgba( 0, 0, 0, 0.03 );
	border-radius: 6px;
	max-width: 780px;
}

@media ( max-width: 640px ) {
	.lot-auteur--kaartje {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

.lot-auteur--compact {
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
}

.lot-auteur__portret {
	flex-shrink: 0;
	width: clamp( 80px, 12vw, 120px );
	height: clamp( 80px, 12vw, 120px );
	object-fit: cover;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.06 );
}

.lot-auteur--compact .lot-auteur__portret {
	width: 48px;
	height: 48px;
}

.lot-auteur__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.lot-auteur__naam {
	margin: 0;
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.15rem, 1.75vw, 1.4rem );
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.lot-auteur__naam a {
	color: inherit;
	text-decoration: none;
}

.lot-auteur__naam a:hover,
.lot-auteur__naam a:focus-visible {
	text-decoration: underline;
	text-decoration-color: #FD9606;
	text-underline-offset: 0.2em;
}

.lot-auteur__titel {
	margin: 0;
	font-size: 0.9rem;
	color: #555;
}

.lot-auteur__bio {
	margin: 0.4rem 0 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #333;
}

.lot-auteur__meer {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
}

.lot-auteur__meer a {
	color: #FD9606;
	text-decoration: none;
	font-weight: 500;
}

.lot-auteur__meer a:hover,
.lot-auteur__meer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lot-auteur--vermelding {
	font-size: 0.9rem;
	color: #666;
	font-style: italic;
	margin: 1rem 0;
}

.lot-auteur--vermelding a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba( 0, 0, 0, 0.3 );
	text-underline-offset: 0.15em;
}

.lot-auteur--vermelding a:hover,
.lot-auteur--vermelding a:focus-visible {
	color: #FD9606;
	text-decoration-color: #FD9606;
}

/* ============================================================
   JURIDISCHE TEKSTPAGINA'S (privacybeleid, algemene voorwaarden)
   ============================================================
   Doorlopende juridische tekst, geen foto's, volle contentbreedte.

   De algemene voorwaarden staan als één tekstblok in de editor: de
   artikel-kopjes zijn daar vette regels binnen de lopende tekst, dus
   op body-grootte (1.075rem Inter) met één witregel erboven en de
   clausule direct op de volgende regel. Privacybeleid gebruikt echte
   <h2>'s, beter voor SEO en screenreaders, maar krijgt hier exact die
   maat en witruimte zodat de twee pagina's identiek lezen.

   !important is hier nodig: de centrale alinea-title regel hierboven
   zet font-family/size/weight zelf met !important, dus specificity
   alleen haalt het daar niet van.
   ------------------------------------------------------------ */
body.lot-page-juridisch .lot-editorial-content h2 {
	font-family: var( --lotarch-font-sans ) !important;
	font-size: 1.075rem !important;
	font-weight: 700 !important;
	line-height: 1.75 !important;
	letter-spacing: 0 !important;
	font-variation-settings: normal !important;
	color: #2a2a2a !important;
	/* 1.875rem = 30px = precies één witregel van de lopende tekst
	   (1.075rem * 1.75 line-height). Onder het kopje geen marge, want
	   in de voorwaarden volgt de clausule direct op de volgende regel.
	   Margin-collapse met de 1.1em onderkant van de vorige alinea
	   houdt de afstand op die 30px. */
	margin: 1.875rem 0 0;
}

/* Eerste kopje sluit strak aan op de intro in de page-header, net als
   de eerste regel van de voorwaarden. */
body.lot-page-juridisch .lot-editorial-content > h2:first-child {
	margin-top: var( --lotarch-subtitle-intro-gap );
}

/* Geen oranje streepje onder een artikel-kopje. Dat accent hoort bij de
   grote alinea-titels; hier zou het elke paar regels terugkomen. */
body.lot-page-juridisch .lot-editorial-content h2::after {
	display: none;
}