/* ---------------------------------------------------------
   Projecten page: grid of project cards + lightbox modal.
   Body scroll is NOT locked when modal is open, so users can
   scroll behind it to see other cards and click any of them
   to swap the modal content.
--------------------------------------------------------- */

/* ---------- Single project detail page ----------
   Layout matcht verduurzamen/over/proces (zelfde .lot-editorial-content
   max-width = --lotarch-page-content-max-width = 1400px).

   Kadence past op single-post/CPT-pagina's een smallere content-width toe
   via z'n root-wrappers (#wrapper, #inner-wrap, .content-container etc)
   die niet volledig worden opgeruimd door de generieke .lotarch-hide-page-hero
   reset in editorial.css. Daarom hier expliciet: alle parent-containers
   op max-width 100% zetten, zodat .lot-editorial-content zelf z'n
   1400px-max mag pakken en gecentreerd wordt. Zelfde patroon als
   .lotarch-projecten-page (zie onder). */
/* WordPress block-editor + Kadence CSS variabelen die de content-breedte
   bepalen — overrulen naar 100% zodat GEEN enkele parent ons constraint.
   Dit is de bron van de ~800px narrow layout op single posts:
   Kadence's .entry-content krijgt .is-layout-constrained welke via
   --wp--style--global--content-size (default 842px) alle children
   inperkt tenzij ze .alignwide of .alignfull hebben. */
body.single-project {
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
	--global-content-width: 100%;
	--global-content-narrow-width: 100%;
	--global-content-boxed-width: 100%;
	--global-calc-content-width: 100%;
}

/* Alle Kadence/WordPress root-wrappers op single-project resetten naar
   100% breedte, geen padding, overflow visible. Dan mag onze
   .lot-editorial-content zelf z'n --lotarch-page-content-max-width
   pakken en gecentreerd worden. */
body.single-project .wp-site-blocks,
body.single-project .is-layout-constrained,
body.single-project .is-layout-flow,
body.single-project #wrapper,
body.single-project #inner-wrap,
body.single-project #primary,
body.single-project #primary.content-area,
body.single-project .site-container,
body.single-project .content-container,
body.single-project .content-wrap,
body.single-project .entry-content-wrap,
body.single-project .site-main,
body.single-project .entry-content,
body.single-project article.post,
body.single-project article.single,
body.single-project .post-inner,
body.single-project .inside-article,
body.single-project main.site-main,
body.single-project main.lot-editorial-page,
body.single-project main.lotarch-project-single {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: var( --lotarch-bg-primary ) !important;
	box-shadow: none !important;
	border: 0 !important;
	overflow: visible !important;
}

/* Force .lot-editorial-content op single-project zelf ook expliciet naar
   1400px met max prioriteit — als een parent-selector alsnog een narrow
   width oplegt, wint deze regel via de body.single-project prefix. */
body.single-project .lot-editorial-content,
body.single-project .lot-page-header {
	max-width: var( --lotarch-page-content-max-width ) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp( 1.5rem, 4vw, 3rem ) !important;
	padding-right: clamp( 1.5rem, 4vw, 3rem ) !important;
}

/* ============================================================
   HORIZONTALE LAYOUT voor single-project pagina's.
   ============================================================
   Geen verticale scroll — pagina lees je door horizontaal te scrollen
   door de opeenvolgende shortcode-blokken ([vd_thema], [vd_split],
   [vd_cta], enz). Elke direct-child van .lot-editorial-content wordt
   een "slide" die naast de vorige staat. Wheel/trackpad verticaal
   scroll wordt door de JS (projecten-modal.js NIET; aparte snippet
   hieronder in dezelfde file als script tag zou kunnen, of via
   scroll-behavior en shift+wheel). Voor NU: browser doet dat native
   via shift+wheel, trackpad two-finger, of horizontal-scroll.

   .lot-editorial-content krijgt display: contents zodat z'n children
   direct flex-items worden van de parent .lot-editorial-page — dus
   alle shortcode-blokken vormen samen 1 horizontale reeks slides
   naast de .lot-page-header (die dan de eerste slide is).

   Op mobile (≤700px) valt de layout terug op verticaal want
   horizontal scrollen op een klein scherm met een hand is klote. */

body.single-project {
	overflow-x: auto;
	overflow-y: hidden;
	height: 100vh;
	height: 100dvh;
	max-width: 100vw;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
	/* scroll-behavior: smooth blijft aan voor programmatic scrolls
	   (Volgende foto knop) — vrije wheel/trackpad scroll is direct
	   zonder animatie via de JS handler in projecten-modal.js. */
	scroll-behavior: smooth;
	/* scroll-snap UIT: proximity + wheel-per-tick smooth animaties
	   botsten en gaven schokkerige scroll. Free-scroll is vloeiender. */
	scroll-snap-type: none;
}

/* Alle Kadence-wrappers -> tot aan onze main een normale block-flow
   houden. Onze main.lot-editorial-page wordt het horizontale flex-blok. */
body.single-project #wrapper,
body.single-project #inner-wrap,
body.single-project #primary,
body.single-project .site-container,
body.single-project .content-container,
body.single-project .content-wrap,
body.single-project .entry-content-wrap,
body.single-project .site-main,
body.single-project article.post,
body.single-project article.single,
body.single-project .post-inner,
body.single-project .inside-article {
	height: 100% !important;
	overflow: visible !important;
}

/* main.lot-editorial-page: gewoon een container die de .lot-gallery
   omhult. Gallery zelf regelt de horizontale flex. */
body.single-project main.lot-editorial-page {
	display: block !important;
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var( --lotarch-bg-primary ) !important;
}

/* Full-bleed hero was 100vw met negatieve marges — in horizontal
   layout gewoon binnen slide-hoogte houden. Content moet fit'en zodat
   er geen scroll nodig is. */
body.single-project .lotarch-project-single__hero-fullwidth {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 clamp( 1rem, 2vw, 1.5rem ) 0 !important;
	height: auto !important;
	max-height: 55vh;
	overflow: hidden;
}

body.single-project .lotarch-project-single__hero-fullwidth img {
	max-height: 55vh;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Titel-slide (eerste): geen border-right op de header ook niet als het
   de allereerste slide is voor de fotografie-header. */
body.single-project main.lot-editorial-page > .lot-page-header {
	background: transparent;
}

body.single-project .lot-page-header__title {
	line-height: 1.05 !important;
}

/* Content-sizing binnen horizontale slides — foto/tekst begrensd op
   slide-hoogte zodat er nooit verticale scroll nodig is. */
body.single-project .vd-thema,
.lotarch-project-modal .vd-thema {
	column-gap: clamp( 1rem, 2vw, 2rem );
	align-items: center;
	row-gap: 1rem;
	width: 100%;
	max-height: 100%;
}

body.single-project .vd-thema__photos,
body.single-project .vd-photo,
body.single-project .vd-photo img,
.lotarch-project-modal .vd-thema__photos,
.lotarch-project-modal .vd-photo,
.lotarch-project-modal .vd-photo img {
	max-height: 70vh !important;
	object-fit: cover;
}

body.single-project .vd-thema__title,
.lotarch-project-modal .vd-thema__title {
	font-size: clamp( 1.35rem, 2.2vw, 2rem ) !important;
	line-height: 1.15 !important;
	margin: 0 0 0.75rem !important;
}

body.single-project .vd-thema__body,
.lotarch-project-modal .vd-thema__body {
	font-size: clamp( 0.9rem, 1.05vw, 1rem ) !important;
	line-height: 1.55 !important;
	max-height: 100%;
	overflow: hidden;
}

body.single-project .vd-thema__body p,
.lotarch-project-modal .vd-thema__body p {
	margin: 0 0 0.6em;
}

/* Modal (smaller): iets nog compacter font-size. */
.lotarch-project-modal .vd-thema__title {
	font-size: clamp( 1.15rem, 1.8vw, 1.6rem ) !important;
}

.lotarch-project-modal .vd-thema__body {
	font-size: clamp( 0.85rem, 0.95vw, 0.95rem ) !important;
}

/* Mobile fallback: gewoon verticaal scrollen (horizontaal op smal
   scherm is niet workable met één hand). */
@media ( max-width: 700px ) {
	body.single-project {
		overflow-x: hidden;
		overflow-y: auto;
		height: auto;
	}
	body.single-project main.lot-editorial-page {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}
	body.single-project main.lot-editorial-page > .lot-editorial-content {
		display: block !important;
	}
	body.single-project main.lot-editorial-page > .lot-page-header,
	body.single-project main.lot-editorial-page > .lot-editorial-content > * {
		width: 100% !important;
		height: auto !important;
		border-right: 0 !important;
		display: block !important;
	}
}

/* ---------- Project photo lightbox ----------
   Klik op een foto in .lot-editorial-content -> overlay met de foto op
   75vw x 75vh (aspect-ratio behouden via object-fit: contain). Subtiele
   close-knop rechtsboven, donkere semi-transparante achtergrond,
   soft fade-in. JS in assets/js/project-lightbox.js, alleen enqueue'd
   op single-project (functions.php). */
.lotarch-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba( 15, 15, 15, 0.86 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	opacity: 0;
	transition: opacity 0.28s ease;
	padding: clamp( 1rem, 3vw, 2rem );
	box-sizing: border-box;
	cursor: zoom-out;
}

.lotarch-lightbox.is-open {
	display: flex;
	opacity: 1;
}

/* Stage = wrapper voor caption + img zodat beide gecentreerd staan als
   één blok. Caption zit boven de foto met kleine marge; als er geen
   caption is blijft de img op dezelfde plek via visibility: hidden. */
.lotarch-lightbox__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: 75vw;
	max-height: 85vh;
	cursor: default;
}

.lotarch-lightbox__caption {
	color: rgba( 255, 255, 255, 0.85 );
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 0.95rem, 1.35vw, 1.15rem );
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: center;
	max-width: 75vw;
	pointer-events: none;
	user-select: none;
}

.lotarch-lightbox__img {
	display: block;
	max-width: 75vw;
	max-height: 75vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, 0.5 );
	cursor: default;
	background: #111;
	animation: lotarch-lightbox-in 0.34s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

@keyframes lotarch-lightbox-in {
	from {
		opacity: 0;
		transform: scale( 0.96 );
	}
	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

/* Gedeelde stijl voor alle iconen-buttons in de lightbox (close + nav):
   dunne witte cirkel, minimalistische look, transparant met border.
   Hover geeft subtiele fill. Positioning per role apart hieronder. */
.lotarch-lightbox__close,
.lotarch-lightbox__nav {
	position: absolute;
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 50%;
	color: rgba( 255, 255, 255, 0.85 );
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.lotarch-lightbox__close:hover,
.lotarch-lightbox__close:focus-visible,
.lotarch-lightbox__nav:not( .is-disabled ):hover,
.lotarch-lightbox__nav:not( .is-disabled ):focus-visible {
	background: rgba( 255, 255, 255, 0.12 );
	border-color: rgba( 255, 255, 255, 0.75 );
	color: #ffffff;
	transform: scale( 1.05 );
	outline: none;
}

.lotarch-lightbox__close svg,
.lotarch-lightbox__nav svg {
	display: block;
	pointer-events: none;
}

/* Close-knop rechtsboven. */
.lotarch-lightbox__close {
	top: clamp( 1rem, 2.5vw, 2rem );
	right: clamp( 1rem, 2.5vw, 2rem );
}

/* Prev/next-knoppen midden-verticaal, links/rechts. Nav-transform op
   translateY(-50%) blijft ook op hover-scale door de scale te STACKEN
   op de existing translateY (anders spring 'ie naar boven). */
.lotarch-lightbox__nav {
	top: 50%;
	transform: translateY( -50% );
}

.lotarch-lightbox__nav--prev {
	left: clamp( 1rem, 2.5vw, 2rem );
}

.lotarch-lightbox__nav--next {
	right: clamp( 1rem, 2.5vw, 2rem );
}

.lotarch-lightbox__nav:not( .is-disabled ):hover,
.lotarch-lightbox__nav:not( .is-disabled ):focus-visible {
	transform: translateY( -50% ) scale( 1.05 );
}

/* Disabled state: gefaded, geen pointer-events, geen hover-fill. */
.lotarch-lightbox__nav.is-disabled {
	opacity: 0.25;
	cursor: default;
	pointer-events: none;
}

/* Counter onderaan gecentreerd — subtiele witte tekst, monospace-achtig
   (tabular nums) zodat het cijfer niet danst tussen 1/12 en 10/12. */
.lotarch-lightbox__counter {
	position: absolute;
	bottom: clamp( 1rem, 2.5vw, 2rem );
	left: 50%;
	transform: translateX( -50% );
	color: rgba( 255, 255, 255, 0.75 );
	font-family: var( --lotarch-font-sans );
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	user-select: none;
}

/* Body-scroll lock zolang de lightbox open is. */
body.lotarch-lightbox-open {
	overflow: hidden;
}

/* Mobile: iets meer schermruimte pakken want 75vw op smal scherm oogt
   veel kleiner in absolute pixels. Nav-knoppen dichter naar de rand
   zodat ze niet over de foto vallen. */
@media ( max-width: 700px ) {
	.lotarch-lightbox__img {
		max-width: 92vw;
		max-height: 78vh;
	}

	.lotarch-lightbox__close,
	.lotarch-lightbox__nav {
		width: 40px;
		height: 40px;
	}

	.lotarch-lightbox__close {
		top: 0.75rem;
		right: 0.75rem;
	}

	.lotarch-lightbox__nav--prev {
		left: 0.5rem;
	}

	.lotarch-lightbox__nav--next {
		right: 0.5rem;
	}

	.lotarch-lightbox__counter {
		bottom: 0.75rem;
		font-size: 0.8rem;
	}
}

/* Full-bleed hero image — 100vw truc met negatieve margins zodat hij
   uit z'n container breekt en van rand tot rand loopt. */
.lotarch-project-single__hero-fullwidth {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	margin-top: clamp( 1.5rem, 3vw, 2.5rem );
	margin-bottom: clamp( 2rem, 4vw, 3rem );
	overflow: hidden;
	padding: 0;
	border-radius: 0;
}

.lotarch-project-single__hero-fullwidth img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: cover;
}

/* Legacy: oude .lotarch-project-single__hero class (bounded) — behouden
   voor als de template ergens anders wordt hergebruikt. */
.lotarch-project-single__hero {
	margin: 0 0 clamp( 2rem, 4vw, 3rem );
	padding: 0;
	border-radius: 0;
	overflow: hidden;
}

.lotarch-project-single__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: cover;
}

.lotarch-project-single__body {
	font-family: var( --lotarch-font-sans );
	font-size: 1.075rem;
	line-height: 1.75;
	color: #2a2a2a;
	max-width: 780px;
	margin: 0 0 clamp( 2rem, 4vw, 3rem );
}

.lotarch-project-single__body p {
	margin: 0 0 1.1em;
}

.lotarch-project-single__meta {
	margin: clamp( 2rem, 4vw, 3rem ) 0;
	padding: 0;
	max-width: 640px;
	border-top: 1px solid rgba( 26, 26, 26, 0.12 );
}

.lotarch-project-single__meta-row {
	display: grid;
	grid-template-columns: 10rem 1fr;
	gap: 1.5rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba( 26, 26, 26, 0.12 );
	font-family: var( --lotarch-font-sans );
}

.lotarch-project-single__meta-row dt {
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #777;
	margin: 0;
	line-height: 1.5;
}

.lotarch-project-single__meta-row dd {
	font-size: 1rem;
	line-height: 1.5;
	color: var( --lotarch-fg-primary );
	margin: 0;
}

.lotarch-project-single__back {
	margin: clamp( 2rem, 4vw, 3rem ) 0 0;
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
}

.lotarch-project-single__back a {
	color: var( --lotarch-fg-primary );
	text-decoration: none;
	border-bottom: 1px solid rgba( 26, 26, 26, 0.3 );
	transition: border-color 0.2s ease;
}

.lotarch-project-single__back a:hover {
	border-color: var( --lotarch-fg-primary );
}

@media ( max-width: 600px ) {
	.lotarch-project-single__meta-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* ---------- Projecten grid page ---------- */

.lotarch-projecten {
	background: var( --lotarch-bg-primary );

	/* --- Tweakable spacing ---
	   --projecten-title-map-gap: afstand tussen titelgebied en de kaart.
	     Iets kleiner dan de map-bottom-gap voor editorial ritme: titel
	     "hangt" wat dichter bij het element dat 'ie introduceert (de kaart),
	     onderaan meer lucht voor overgang naar de volgende sectie (grid).
	   --projecten-map-bottom-gap: afstand tussen kaart en het projecten-grid. */
	--projecten-title-map-gap: clamp( 0.75rem, 1.5vw, 1.25rem );
	--projecten-map-bottom-gap: clamp( 3rem, 6vw, 5rem );
}

/* Reliable body-class trigger — .lotarch-projecten-page wordt via body_class
   filter gezet in page-projecten.php. Elke Kadence-container wrapper krijgt
   max-width 100% en alle padding 0, zodat de map-full echt tot aan de
   browser-rand kan lopen zonder parent-constraints. */
body.lotarch-projecten-page .entry-hero,
body.lotarch-projecten-page .entry-hero-container-inner,
body.lotarch-projecten-page .above-entry-hero,
body.lotarch-projecten-page .page-title,
body.lotarch-projecten-page .entry-header {
	display: none !important;
}

/* KRITIEKE toevoeging: Kadence's root-wrappers #wrapper en #inner-wrap
   zitten BOVEN alle andere containers in de DOM en hebben by default
   overflow-management dat de negatieve marge van .map-full afknipt.
   Zonder deze twee selectors kan de map fysiek niet buiten de content-
   area komen ongeacht hoeveel we op de kinderen resetten. */
body.lotarch-projecten-page #wrapper,
body.lotarch-projecten-page #inner-wrap,
body.lotarch-projecten-page #primary,
body.lotarch-projecten-page #primary.content-area,
body.lotarch-projecten-page .site-container,
body.lotarch-projecten-page .content-container,
body.lotarch-projecten-page .content-wrap,
body.lotarch-projecten-page .entry-content-wrap,
body.lotarch-projecten-page .site-main,
body.lotarch-projecten-page .entry-content,
body.lotarch-projecten-page article.page,
body.lotarch-projecten-page .post-inner,
body.lotarch-projecten-page .inside-article,
body.lotarch-projecten-page main.lotarch-projecten {
	max-width: 100% !important;
	width: 100% !important;
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: var( --lotarch-bg-primary ) !important;
	box-shadow: none !important;
	border: 0 !important;
	min-height: 0 !important;
	/* KRITIEK: overflow visible zodat de map-full (met negatieve marges)
	   niet geklemd wordt door een parent die overflow: hidden heeft. */
	overflow: visible !important;
}

/* Voorkom horizontal scroll — safety net voor als iets in de map toch
   viewport-width overschrijdt. */
body.lotarch-projecten-page,
html:has( body.lotarch-projecten-page ) {
	overflow-x: hidden;
	max-width: 100vw;
}

.lotarch-projecten__container {
	max-width: 1750px;
	margin: 0 auto;
	/* Alleen vertikale padding op de container. Horizontale padding en
	   max-width van header en grid worden per element geregeld zodat de
	   TITEL op exact dezelfde x-positie staat als op andere pagina's
	   (via var(--lotarch-page-content-max-width)) maar de GRID breder
	   mag (via container's 1750px). */
	padding: var( --lotarch-page-title-top ) 0 clamp( 3rem, 6vw, 5rem );
}

/* Header container: alleen top-padding, geen bottom (spatie tussen
   header en free-content of grid komt uit die elementen). */
.lotarch-projecten__container:has( .lotarch-projecten__header ) {
	padding-bottom: 0;
}

/* Grid container komt na free-content of direct na header: geen
   top-padding want de vorige elementen hebben al bottom-margin. */
.lotarch-projecten__container:not( :first-of-type ) {
	padding-top: 0;
}

/* Full-bleed map — apart blok ONDER de titel-container, loopt echt tot
   aan de browser-randen (edge-to-edge). Combinatie van 100vw + negatieve
   margin trick + margin auto voor centering; parent-resets (hierboven)
   zorgen dat GEEN Kadence-wrapper 'm alsnog constraint. */
.lotarch-projecten__map-full {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	/* Verticale spacing via CSS-vars — override in style.css of hier
	   voor een andere afstand titel <-> kaart of kaart <-> grid. */
	margin-top: var( --projecten-title-map-gap );
	margin-bottom: var( --projecten-map-bottom-gap );
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.03 );
	/* Nieuwe stacking context zodat Leaflet's interne z-indexen (controls
	   staan op 1000, panes 200-700) NIET buiten deze container lekken en
	   over de site-header komen te staan. Zonder isolation zag je bij
	   scroll-up de kaart over de header schuiven omdat Kadence z-index
	   ~20-99 heeft en Leaflet 1000 wint. */
	isolation: isolate;
	z-index: 0;
}

/* Geen grijze banden boven en onder de kaart.

   Oorzaak: de shortcode sluit af met de Leaflet <link> en <script> tags,
   en wpautop wrapt die in een <p>. Zo'n paragraaf rendert niks maar
   houdt wel z'n marges, en die ruimte liet de lichtgrijze achtergrond
   van deze container zien als een band. Marges op nul bij elke <p> hier
   (de zoom-hint heeft die al en staat absolute, dus die raakt dit niet).

   Daarnaast de achtergrond gelijk aan de pagina: valt er onverhoopt
   toch ergens ruimte, dan loopt die naadloos door in de pagina in
   plaats van als een rand op te vallen. De Leaflet-container heeft zelf
   al een eigen achtergrond tijdens het laden van de tiles. */
.lotarch-projecten__map-full > p:not( .lotarch-projecten__zoom-hint ) {
	margin: 0;
	padding: 0;
}

.lotarch-projecten__map-full,
.lotarch-projecten__map-full .lotarch-map-standalone {
	background: var( --lotarch-bg-primary );
}

/* De map-shortcode ([lotarch_kaart]) rendert een .lotarch-map-standalone
   div. Binnen de map-full container willen we dat die 100% van de
   full-bleed breedte pakt. */
.lotarch-projecten__map-full .lotarch-map-standalone {
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* Projecten header block: title + optional subtitle + optional intro.
   Gedraagt zich exact als .vd-hero__inner op verduurzamen/over/proces:
   zelfde max-width, zelfde horizontale padding → titel op exact
   dezelfde x-positie op de pagina. */
.lotarch-projecten__header {
	max-width: var( --lotarch-page-content-max-width );
	/* Ondermarge klein houden: direct onder de filter-pills begint de
	   kaart, en die twee horen bij elkaar. De totale afstand wordt
	   bepaald door deze marge en --projecten-title-map-gap samen. */
	margin: 0 auto clamp( 0.75rem, 1.5vw, 1.25rem );
	padding: 0 clamp( 1.5rem, 4vw, 3rem );
}

/* Title/subtitle sizing komt uit de gedeelde .lotarch-page-title en
   .lotarch-page-subtitle blokken hieronder. */

.lotarch-projecten__intro {
	max-width: 780px;
	margin: var( --lotarch-subtitle-intro-gap ) 0 0;
	font-family: var( --lotarch-font-sans );
	font-size: 1.05rem;
	line-height: 1.65;
	color: #333;
	text-align: left;
}

.lotarch-projecten__intro p {
	margin: 0 0 1em;
}

.lotarch-projecten__intro p:last-child {
	margin-bottom: 0;
}

/* Categorie filter pills — horizontale rij onder de subtitle. Elke pill
   linkt naar /projecten/{slug}/ (categorie-archief). "Alle" pill linkt
   terug naar /projecten/. Active pill (huidige categorie) krijgt oranje
   achtergrond zodat de gebruiker ziet welke filter aan staat.

   Doel: interne navigatie ZIJN + Google-crawlable interne links naar
   de categorie-archieven zodat die pagina's snel geindexeerd worden.

   Mobile: pills scrollen horizontaal als ze niet passen (geen wrap
   naar meerdere regels — dat oogt rommelig). */
.lotarch-projecten__filters {
	margin: clamp( 1.25rem, 2vw, 1.75rem ) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.lotarch-projecten__filter {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.95rem;
	font-family: var( --lotarch-font-sans );
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1;
	color: #333;
	background: transparent;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lotarch-projecten__filter:hover,
.lotarch-projecten__filter:focus-visible {
	background: rgba( 0, 0, 0, 0.05 );
	border-color: rgba( 0, 0, 0, 0.4 );
	color: #000;
}

.lotarch-projecten__filter.is-active,
.lotarch-projecten__filter.is-active:hover,
.lotarch-projecten__filter.is-active:focus-visible {
	background: #FD9606;
	border-color: #FD9606;
	color: #fff;
}

/* Zoom-hint midden in de kaart. De kaart heeft scrollWheelZoom: false
   (anders pikt hij de page-scroll in) en zoomt op dubbelklik, en dat is
   niet vanzelf duidelijk. Daarom een label precies in het midden, waar
   het oog bij een kaart het eerst landt.

   pointer-events: none is hier essentieel: de dubbelklik, de pin-klikken
   en de zoom-knoppen moeten er dwars door gaan. Zonder dat zou de hint
   precies de interactie blokkeren die hij aanprijst.

   z-index boven Leaflet's eigen lagen (panes 200-700, controls 1000).
   De container heeft isolation: isolate, dus dit lekt niet over de
   site-header. */
.lotarch-projecten__zoom-hint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	z-index: 1100;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.6rem 1.05rem;
	max-width: calc( 100% - 2rem );
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.94 );
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.14 );
	font-family: var( --lotarch-font-sans );
	font-size: 0.9rem;
	font-weight: 500;
	/* Donkere tekst op de witte pill: oranje op wit haalt geen leesbaar
	   contrast. Het oranje accent zit in het icoon. */
	color: var( --lotarch-fg-primary );
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lotarch-projecten__zoom-hint.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.lotarch-projecten__zoom-hint-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	color: #FD9606;
}

.lotarch-projecten__zoom-hint-icon svg {
	display: block;
	width: 1.15em;
	height: 1.15em;
}

/* Touch-tekst alleen op coarse pointers (telefoon/tablet) en de
   dubbelklik-tekst alleen op apparaten met een echte muis. Zelfde
   boodschap, maar met het juiste woord voor het apparaat. */
.lotarch-projecten__zoom-hint-touch {
	display: none;
}

@media ( hover: none ) and ( pointer: coarse ) {
	.lotarch-projecten__zoom-hint-mouse {
		display: none;
	}

	.lotarch-projecten__zoom-hint-touch {
		display: inline;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lotarch-projecten__zoom-hint {
		transition: none;
	}
}

/* Grid van projecten: verticale stack, elk project = eigen rij. */
.lotarch-projecten__grid {
	/* Geen eigen padding of max-width — kaarten regelen dat zelf zodat
	   ze exact op dezelfde plek uitgelijnd staan als het page-header
	   blok. list-style: none reset browser UL default (geen bullets). */
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --lotarch-project-card-spacing );
}

.lotarch-projecten__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Standalone project-cards (via [project] shortcode op editorial pages).
   Zelfde verticale spacing als de UL-grid op page-projecten.php.
   ~ (general sibling) ipv + (adjacent sibling): wpautop wrapt shortcodes
   soms in <p> waardoor cards niet DIRECT naast elkaar staan als siblings.
   ~ selecteert elke standalone card met een eerdere standalone card als
   sibling, dus spacing werkt ongeacht wat wpautop ertussen zet. */
.lotarch-project-card--standalone ~ .lotarch-project-card--standalone {
	margin-top: var( --lotarch-project-card-spacing );
}

/* Kaart = 3-koloms CSS grid: [titel | foto | tekst].
   Max-width en padding matchen exact met de page-header (.lotarch-projecten__header)
   zodat de linker rand van de kaart PRECIES op de linker rand van "Projecten"
   uitgelijnd staat. Symmetrische 1fr sides = foto perfect gecentreerd.
   Grid-kolommen zijn ALTIJD dezelfde breedte — nooit animeren. Alles wat
   groeit gebruikt transform: scale (GPU accelerated, geen reflow). */
.lotarch-project-card {
	position: relative;
	background: transparent;
	width: 100%;
	max-width: var( --lotarch-page-content-max-width );
	margin: 0 auto;
	padding: 0 clamp( 1.5rem, 4vw, 3rem );
	display: grid;
	grid-template-columns: 1fr clamp( 300px, 34vw, 500px ) 1fr;
	align-items: start;
	/* Symmetrische column-gap: afstand linker-kolom ↔ foto is dus altijd
	   gelijk aan afstand foto ↔ rechter-kolom. Pas --lotarch-project-card-gap
	   in :root aan om overal tegelijk aan te passen. */
	column-gap: var( --lotarch-project-card-gap );
}

/* Reset margin-top op grid children — kinderen (h2, div, button) hebben
   default browser margins die de top-alignment kunnen breken. Class-
   specificiteit (11) is hoger dan browser default op elementen (1). */
.lotarch-project-card > *,
.lotarch-project-card__stage > * {
	margin-top: 0;
	align-self: start;
}

.lotarch-project-card__stage {
	display: contents;
}

.lotarch-project-card__side {
	min-width: 0;
	align-self: start;
	/* Flex layout binnen de linker/rechter kolom om exacte positionering
	   ten opzichte van de foto af te dwingen. */
	display: flex;
	flex-direction: column;
}

/* Linker kolom: titel-block LINKS uitgelijnd zodat titel-tekst begint
   op EXACT dezelfde x-positie als de "Projecten" page-title. */
.lotarch-project-card__side--left {
	grid-column: 1;
	align-items: flex-start;
	text-align: left;
}

.lotarch-project-card__side--right {
	grid-column: 3;
	align-items: flex-start;
	text-align: left;
}

/* Foto = middenkolom, aspect-ratio 4:3. Width is 100% van de kolom.
   Groeit via transform: scale, zodat er GEEN reflow ontstaat. */
.lotarch-project-card__photo-btn {
	grid-column: 2;
	position: relative;
	z-index: 2;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	display: block;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
}

/* De lijn die boven de foto verscheen na een klik: dit is een <button>,
   en het parent-thema tekent daar een focus-rand omheen. Die rand staat
   op de breedte van de knop, terwijl de foto bij het uitklappen groter
   schaalt, dus zag je er een streep van boven de foto uitsteken.

   Weghalen op :focus (muisklik) en teruggeven op :focus-visible, zodat
   wie met het toetsenbord navigeert nog steeds ziet waar hij is. */
.lotarch-project-card__photo-btn:focus {
	outline: none;
	box-shadow: none;
	border: 0;
}

.lotarch-project-card__photo-btn:focus-visible {
	outline: 2px solid #FD9606;
	outline-offset: 4px;
}

.lotarch-project-card__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* Dekkend en gelijk aan de placeholder: een semi-transparante kleur
	   laat de knop-styling van het parent-thema doorschemeren, en bij het
	   schalen kan een afwijkende randkleur als haarlijn opduiken. */
	background: #efece5;
	border-radius: 0;
	width: 100%;
	transform: translate3d( 0, 0, 0 ) scale( 1 );
	box-shadow: 0 0 0 rgba( 0, 0, 0, 0 );
	transition: transform 0.55s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
	            box-shadow 0.55s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	/* Origin center-top: bij scale groeit de foto alleen naar BENEDEN en
	   naar de zijkanten, top blijft VAST op zijn plek. Zo blijven titel,
	   foto en tekst allemaal top-aligned in zowel de collapsed als de
	   expanded state, en overlapt de foto nooit de header. */
	transform-origin: center top;
	backface-visibility: hidden;
}

.lotarch-project-card[ data-expanded="true" ] .lotarch-project-card__photo {
	transform: translate3d( 0, 0, 0 ) scale( 1.18 );
	box-shadow: 0 24px 64px rgba( 0, 0, 0, 0.18 ),
	            0 8px 20px rgba( 0, 0, 0, 0.08 );
}

/* --- Titel links: ALTIJD zichtbaar, groeit via transform (geen font-size
   animatie = geen reflow bij elke frame). --- */

.lotarch-project-card__side-title {
	font-family: var( --lotarch-font-serif );
	/* KLEIN, adjustable — verander deze clamp om alle titels te schalen. */
	font-size: clamp( 1rem, 1.15vw, 1.2rem );
	font-weight: 500;
	/* 1.25 in plaats van 1: een titel van twee of drie regels plakte met
	   line-height 1 tegen elkaar aan. */
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
	padding: 0;
	color: var( --lotarch-fg-primary );
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
	/* Harde grens van drie regels. De titels zijn redactioneel bedoeld
	   als korte zin, en zonder grens duwt een lange titel de foto naar
	   beneden en lopen de kaarten in het grid uit het ritme. Wat er niet
	   in past eindigt met een ellipsis, dus het is zichtbaar dat er is
	   afgekapt in plaats van dat de titel stil verminkt wordt. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	/* width: fit-content = block wordt exact zo breed als de tekst-regel.
	   Combined met align-items: flex-start op de linker kolom zit het
	   block tegen de LINKER rand van de kolom → titel-tekst start op
	   exact dezelfde x-positie als de "Projecten" page-title. */
	width: fit-content;
	/* Afgeleid van de schaalfactor: 100% / 1.25 = 80% van de kolom. Na
	   het vergroten is de titel dus precies zo breed als zijn kolom en
	   komt hij per definitie niet in de ruimte tussen titel en foto.
	   Een vaste pixelwaarde (was 280px) hield geen rekening met de
	   kolombreedte, waardoor een lange titel bij het uitklappen onder
	   de foto schoof. */
	max-width: calc( 100% / var( --lotarch-card-title-scale ) );
	text-align: left;
	/* Origin top-left: linkerkant van titel blijft VAST bij expand-scale,
	   groeit dus naar rechts + naar onder — startpositie verandert nooit. */
	transform: translate3d( 0, 0, 0 ) scale( 1 );
	transform-origin: left top;
	transition: transform 0.55s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	backface-visibility: hidden;
}

.lotarch-project-card[ data-expanded="true" ] .lotarch-project-card__side-title {
	transform: translate3d( 0, 0, 0 ) scale( var( --lotarch-card-title-scale ) );
}

/* --- Right side: desc + meta hidden till expand, slidet in van rechts. --- */

.lotarch-project-card__desc,
.lotarch-project-card__meta {
	opacity: 0;
	transform: translate3d( 24px, 0, 0 );
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	backface-visibility: hidden;
}

.lotarch-project-card[ data-expanded="true" ] .lotarch-project-card__desc,
.lotarch-project-card[ data-expanded="true" ] .lotarch-project-card__meta {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
	/* Delay = na foto vergroting (0.55s). */
	transition-delay: 0.35s;
}

.lotarch-project-card__desc {
	font-family: var( --lotarch-font-sans );
	font-size: 1rem;
	line-height: 1.65;
	color: #333;
	margin: 0 0 1.5rem;
}

.lotarch-project-card__desc p {
	margin: 0 0 0.85em;
}

.lotarch-project-card__desc p:last-child {
	margin-bottom: 0;
}

.lotarch-project-card__meta {
	margin: 0;
	padding: 0;
	font-family: var( --lotarch-font-sans );
}

.lotarch-project-card__meta-row {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 0.75rem;
	padding: 0.4rem 0;
	border-top: 1px solid rgba( 26, 26, 26, 0.1 );
}

.lotarch-project-card__meta-row:last-child {
	border-bottom: 1px solid rgba( 26, 26, 26, 0.1 );
}

.lotarch-project-card__meta-row dt {
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #666;
	margin: 0;
	line-height: 1.5;
}

.lotarch-project-card__meta-row dd {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var( --lotarch-fg-primary );
	margin: 0;
}

.lotarch-project-card__image,
.lotarch-project-card__sketch {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.35s ease;
}

.lotarch-project-card__sketch {
	opacity: 0;
	background: #ffffff;
}

/* Hover: alleen sketch fade-in, geen extra scale — de photo-scale bij
   expand doet al genoeg. Extra hover-transforms = extra composited
   layers per card = scroll jank. */
.lotarch-project-card__photo-btn:hover .lotarch-project-card__sketch,
.lotarch-project-card__photo-btn:focus-visible .lotarch-project-card__sketch {
	opacity: 1;
}

/* Placeholder voor projecten zonder foto: het LOTarchitectuur-logo op
   een rustige vlakke achtergrond.

   De achtergrond is expliciet dekkend. De foto-container heeft een
   semi-transparante achtergrond, en daar scheen de blauwe knop-styling
   van Kadence doorheen (de placeholder zit in een <button>). Bij een
   kaart met foto zag je dat nooit, bij een placeholder wel: een blauw
   blok. Dekkend maakt dat onmogelijk, ongeacht wat de parent doet. */
.lotarch-project-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #efece5;
	color: #888;
	font-family: var( --lotarch-font-sans );
	font-size: 0.9rem;
}

/* Logo bescheiden en iets ingehouden: het is een lege plek, geen
   merk-statement. object-fit: contain houdt de verhouding intact,
   ongeacht het formaat waarin het logo is geupload. */
.lotarch-project-card__placeholder-logo {
	width: clamp( 90px, 22%, 190px );
	height: auto;
	max-height: 55%;
	object-fit: contain;
	opacity: 0.45;
	/* Laadt zonder de layout te laten springen. */
	display: block;
}

/* Nuke elke browser/Kadence/theme rule die tekst blauw kleurt. */
body .lotarch-project-card,
body .lotarch-project-card *,
body .lotarch-project-card__photo-btn,
body .lotarch-project-card__photo-btn *,
body .lotarch-project-card__photo-btn:hover,
body .lotarch-project-card__photo-btn:hover *,
body .lotarch-project-card__photo-btn:focus,
body .lotarch-project-card__photo-btn:focus *,
body .lotarch-project-card__photo-btn:focus-visible,
body .lotarch-project-card__photo-btn:focus-visible *,
body .lotarch-project-card__photo-btn:active,
body .lotarch-project-card__photo-btn:active *,
body .lotarch-project-card__side-title,
body .lotarch-project-card__side-title:hover {
	color: var( --lotarch-fg-primary ) !important;
	text-decoration: none !important;
}

.lotarch-projecten__empty {
	max-width: 640px;
	padding: 2rem;
	background: rgba( 0, 0, 0, 0.03 );
	border-left: 3px solid rgba( 0, 0, 0, 0.15 );
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	line-height: 1.6;
	color: #444;
}

.lotarch-projecten__empty p {
	margin: 0 0 0.75em;
}

.lotarch-projecten__empty p:last-child {
	margin-bottom: 0;
}

/* ---------- Project side-panel modal ----------
   Alleen actief op de projecten-pagina (JS check op body-class).
   Klik op een /project/{slug}/ link (map-pin of grid) opent het
   project in een fixed panel rechts, zodat de kaart links zichtbaar
   en klikbaar blijft en gebruikers snel tussen projecten kunnen
   switchen. Op mobile (≤768px) valt de modal terug op fullscreen. */

.lotarch-project-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Full-screen: modal beslaat 100% van de viewport zodat het project
	   detail alle ademruimte krijgt. Horizontale foto-scroll blijft
	   intact via de interne .lotarch-project-modal__scroller. Kaart
	   wordt verborgen zolang de modal open is (zie split-view sectie
	   onderaan). */
	width: 100vw;
	background: var( --lotarch-bg-primary );
	box-shadow: none;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	transform: translateX( 100% );
	transition: transform 0.42s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	pointer-events: none;
	/* Isolation zodat interne z-indexen (close-knop) niet lekken. */
	isolation: isolate;
}

.lotarch-project-modal.is-open {
	transform: translateX( 0 );
	pointer-events: auto;
}

/* Close-knop rechtsboven — ZWART rondje met WIT kruis, matcht het
   LOTarchitectuur design-system (dark fg-primary + light bg-primary).
   Positie 0.5cm lager dan de top-hoek zodat 'ie visueel ademruimte
   krijgt van de bovenrand. */
.lotarch-project-modal__close {
	position: absolute;
	top: calc( 1.25rem + 0.5cm );
	right: 1.25rem;
	width: 42px;
	height: 42px;
	/* padding + line-height nul zodat de flex-centering van de SVG
	   niet wordt beinvloed door text-line-height baseline-offset of
	   door Kadence button padding-defaults. */
	padding: 0;
	margin: 0;
	line-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FD9606;
	border: 0;
	border-radius: 50%;
	color: var( --lotarch-fg-primary );
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 4px 14px rgba( 253, 150, 6, 0.35 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Hover: subtiel groter + iets sterkere oranje glow. Kleur ONGEWIJZIGD:
   oranje bg + zwart kruis. */
.lotarch-project-modal__close:hover,
.lotarch-project-modal__close:focus-visible {
	transform: scale( 1.06 );
	box-shadow: 0 6px 18px rgba( 253, 150, 6, 0.5 );
	outline: none;
	background: #FD9606;
	color: var( --lotarch-fg-primary );
}

/* Op :active (muis vastgehouden): kleur ongewijzigd — voorkomt browser-
   default active-state die de knop soms lichter maakt. */
.lotarch-project-modal__close:active {
	background: #FD9606;
	color: var( --lotarch-fg-primary );
}

.lotarch-project-modal__close svg {
	display: block;
	pointer-events: none;
	transition: transform 0.4s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* Rotate-animatie op click: JS voegt .is-clicked toe bij de click,
   CSS animeert de X 180 graden. Class blijft staan tot de close-
   transitie af is (dan reset via setTimeout in JS). */
.lotarch-project-modal__close.is-clicked svg {
	transform: rotate( 180deg );
}

/* Modal-scroller is horizontaal: geen verticale scroll binnen het
   panel, wel horizontaal door de shortcode-slides. Scroll-snap zorgt
   dat elke scroll precies op de volgende slide klikt zodat je nooit
   half tussen twee blokken staat. */
.lotarch-project-modal__scroller {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	/* scroll-behavior: smooth blijft aan voor PROGRAMMATIC scrolls
	   (bijv. de scroll-hint pijl "Volgende foto" op de cover slide) —
	   die animeren dan van slide naar slide. */
	scroll-behavior: smooth;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
	/* scroll-snap UIT: proximity + wheel-per-tick smooth-animaties
	   botsten met elkaar en gaven een schokkerige scroll. Free-scroll
	   voelt vloeiender omdat elke wheel-tick meteen accumuleert in
	   scrollLeft zonder dat de browser mid-animation snap-detectie doet. */
	scroll-snap-type: none;
}

.lotarch-project-modal__content {
	padding: 0;
	height: 100%;
	width: max-content;
	min-width: 100%;
}

/* Loading + error states — subtiel, gecentreerd. */
.lotarch-project-modal__loading,
.lotarch-project-modal__error {
	padding: 5rem 2rem;
	text-align: center;
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	color: rgba( 26, 26, 26, 0.55 );
	line-height: 1.6;
}

.lotarch-project-modal__loading::after {
	content: "…";
	display: inline-block;
	animation: lotarch-modal-dots 1.4s steps( 4, end ) infinite;
	overflow: hidden;
	vertical-align: bottom;
	width: 0;
}

@keyframes lotarch-modal-dots {
	to { width: 1.2em; }
}

.lotarch-project-modal__error a {
	color: var( --lotarch-fg-primary );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Geinjecteerde .lot-editorial-page: horizontaal flex zoals op de directe
   single-project pagina. lot-editorial-content krijgt display: contents
   zodat z'n children direct flex-items van .lot-editorial-page worden;
   alle blokken vormen samen 1 horizontale rij die de user horizontal
   scrollt door het panel. */
/* Modal is nu een gallery-container. Gallery zelf regelt de horizontal
   flex; main is gewoon een wrapper zonder eigen layout. */
.lotarch-project-modal main.lot-editorial-page {
	display: block !important;
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* ---------- Full-screen mode bij open modal ----------
   Wanneer body.lotarch-project-modal-open actief is neemt de project
   detail modal 100% van de viewport in. Titel/intro/grid/kaart worden
   verborgen zodat de user zich volledig op het project detail kan
   richten — horizontaal scrollen door foto-slides gebeurt binnen de
   modal via .lotarch-project-modal__scroller. */

body.lotarch-project-modal-open {
	overflow: hidden;
}

body.lotarch-project-modal-open .lotarch-projecten {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

/* Verberg alle projecten-pagina content zolang de modal open is —
   user is in detail-mode, niet op de projecten-index. */
body.lotarch-project-modal-open .lotarch-projecten__container,
body.lotarch-project-modal-open .lotarch-projecten__grid,
body.lotarch-project-modal-open .lotarch-projecten__empty,
body.lotarch-project-modal-open .lotarch-projecten__map-full {
	visibility: hidden;
}

/* Mobile: modal is desktop al full-width, hier alleen kleine tweaks
   voor close-knop positie en horizontale scroll die op smal scherm
   niet workable is met één hand. */
@media ( max-width: 768px ) {
	.lotarch-project-modal__close {
		top: 0.75rem;
		right: 0.75rem;
		width: 38px;
		height: 38px;
	}
	/* Mobile: modal terug naar verticaal. Horizontaal scrollen op smal
	   scherm is niet workable met een hand. */
	.lotarch-project-modal__scroller {
		overflow-x: hidden;
		overflow-y: auto;
	}
	.lotarch-project-modal__content {
		padding: 2.5rem 0 3rem;
		height: auto;
		width: 100%;
		min-width: 0;
	}
	.lotarch-project-modal main.lot-editorial-page {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}
	/* Gallery mobile: terug naar verticaal. */
	.lotarch-project-modal .lot-gallery {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}
	.lotarch-project-modal .lot-gallery__slide {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	.lotarch-project-modal .lot-gallery__slide--photo img {
		height: auto !important;
		max-height: 60vh !important;
	}
}

/* ============================================================
   Photo-gallery layout — reeks foto's met captions, horizontaal
   scrollbaar. Gerenderd door lotarch-gallery.js op basis van de
   server-rendered <main.lot-editorial-page> (title + shortcode-
   foto's). Vervangt de eerdere "shortcode-block per slide" layout.
   ============================================================ */

.lot-gallery {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: max-content;
	height: 100%;
	background: var( --lotarch-bg-primary );
}

.lot-gallery__slide {
	flex-shrink: 0;
	flex-grow: 0;
	height: 100%;
	width: 100vw;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: var( --lotarch-bg-primary );
	overflow: hidden;
	position: relative;
}

/* Cover slide: titel + subtitel + intro. Verticaal + horizontaal
   gecentreerd binnen slide. */
.lot-gallery__slide--cover {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp( 2rem, 4vw, 5rem ) clamp( 2rem, 6vw, 6rem );
}

/* CTA slide: laatste slide na de foto's. Overrule de cover slide
   flex-alignment zodat het CTA-blok VOLLEDIG gecentreerd staat
   (horizontaal en verticaal) ipv links-uitgelijnd zoals de titel-cover.
   Tekst binnen het blok ook op text-align: center voor consistente
   editorial look.

   Slide-breedte is smaller dan de foto-slides (die 100vw pakken) —
   de CTA heeft niet veel content nodig, dus een compacte slide voelt
   intentioneel als eindbestemming. clamp() geeft responsive: min 320px
   op mobile, preferred 55vw, max 720px op grote schermen. Padding
   binnen de slide is dezelfde als de cover voor visuele consistentie. */
.lot-gallery__slide--cta {
	background: var( --lotarch-bg-primary );
	align-items: center;      /* horizontaal centreren */
	justify-content: center;  /* verticaal centreren (was al center via cover) */
	text-align: center;
}

/* Width override met dubbele class-selector zodat de specificity (0,2,0)
   de modal-scoped .lotarch-project-modal .lot-gallery__slide { width:
   100vw } regel evenaart. Later in file = wint bij gelijke specificity. */
.lot-gallery__slide.lot-gallery__slide--cta {
	width: clamp( 320px, 55vw, 720px );
	flex-shrink: 0;
}

.lot-gallery__slide--cta .vd-cta {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 680px;
	text-align: center;
}

.lot-gallery__slide--cta .vd-cta__inner {
	max-width: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

/* Titel binnen de gecentreerde CTA-slide moet ook z'n eigen
   text-alignment krijgen (title heeft eigen alinea-title styling die
   default left is via editorial contract). */
.lot-gallery__slide--cta .vd-cta__title {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* Streepje onder de titel gecentreerd via auto-margins op de ::after
   (was left-aligned via display:block default). */
.lot-gallery__slide--cta .vd-cta__title::after {
	margin-left: auto;
	margin-right: auto;
}

.lot-gallery__slide--cta .vd-cta__body {
	margin: 0 auto 2rem;
	max-width: 560px;
}

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

.lot-gallery__title {
	font-family: var( --lotarch-page-title-family );
	font-size: var( --lotarch-page-title-size );
	font-weight: var( --lotarch-page-title-weight );
	line-height: var( --lotarch-page-title-line-height );
	letter-spacing: var( --lotarch-page-title-letter-spacing );
	color: var( --lotarch-page-title-color );
	margin: 0;
	max-width: 100%;
}

.lot-gallery__subtitle {
	font-family: var( --lotarch-page-subtitle-family );
	font-size: var( --lotarch-page-subtitle-size );
	font-weight: var( --lotarch-page-subtitle-weight );
	line-height: var( --lotarch-page-subtitle-line-height );
	color: var( --lotarch-page-subtitle-color );
	margin: var( --lotarch-title-subtitle-gap ) 0 0;
	max-width: 640px;
}

.lot-gallery__intro {
	font-family: var( --lotarch-font-sans );
	font-size: clamp( 0.95rem, 1.1vw, 1.05rem );
	line-height: 1.7;
	color: #333;
	margin: var( --lotarch-subtitle-intro-gap ) 0 0;
	max-width: 640px;
	max-height: 40vh;
	overflow: hidden;
}

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

.lot-gallery__intro p:last-child {
	margin: 0;
}

/* Foto-slide: foto vult volledig, caption in een dunne band onderaan. */
.lot-gallery__slide--photo {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}

.lot-gallery__slide--photo img {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
}

.lot-gallery__caption {
	flex: 0 0 auto;
	padding: 0.9rem clamp( 1.5rem, 3vw, 3rem );
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 0.95rem, 1.1vw, 1.1rem );
	font-style: italic;
	text-align: left;
	color: var( --lotarch-fg-primary );
	background: var( --lotarch-bg-primary );
	letter-spacing: 0.005em;
	line-height: 1.4;
	box-sizing: border-box;
	border-top: 1px solid rgba( 26, 26, 26, 0.08 );
}

/* Modal-scoped: slides matchen exact de modal-panel breedte. Modal is
   full-screen (100vw), dus slides = 100vw en klapt netjes naar de
   volgende foto bij horizontaal scrollen. */
.lotarch-project-modal .lot-gallery__slide {
	width: 100vw;
}

/* ---------- Titel-row + scroll-hint op cover slide ----------
   Titel + scroll-hint pijl staan NAAST elkaar in een flex-row.
   De knop staat stil (geen nudge); alleen de twee ringen eromheen
   pulseren staggered naar buiten (radar-effect). Klik op de knop
   scrollt via JS 1 slide naar rechts. */

.lot-gallery__title-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp( 1rem, 2.5vw, 2rem );
	flex-wrap: wrap;
	max-width: 100%;
}

.lot-gallery__title-row .lot-gallery__title {
	margin: 0;
	flex-shrink: 1;
	min-width: 0;
}

/* Kadence + WP voegen default button styling toe (background, box-shadow,
   border op :hover) die als een blauw vierkant achter de knop zichtbaar
   werd. !important om die op alle states te overrulen. De visuele knop
   is de .lot-gallery__scroll-hint-btn span binnen deze button. */
.lot-gallery__scroll-hint,
.lot-gallery__scroll-hint:hover,
.lot-gallery__scroll-hint:focus,
.lot-gallery__scroll-hint:active,
.lot-gallery__scroll-hint:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	outline: none !important;
	color: inherit;
}

.lot-gallery__scroll-hint {
	position: relative;
	width: 52px;
	height: 52px;
	padding: 0;
	margin: 0;
	font: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* Focus-ring alleen zichtbaar bij keyboard navigatie (focus-visible),
   niet bij muis-hover. Ring om het rondje, geen vierkant. */
.lot-gallery__scroll-hint:focus-visible {
	outline: none;
	box-shadow: none;
}

.lot-gallery__scroll-hint:focus-visible .lot-gallery__scroll-hint-btn {
	box-shadow: 0 0 0 3px var( --lotarch-bg-primary ),
	            0 0 0 5px var( --lotarch-fg-primary );
}

.lot-gallery__scroll-hint-btn {
	position: relative;
	z-index: 2;
	width: 52px;
	height: 52px;
	padding: 0;
	margin: 0;
	line-height: 0;
	border-radius: 50%;
	background: #FD9606;
	color: var( --lotarch-fg-primary );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba( 253, 150, 6, 0.35 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lot-gallery__scroll-hint:hover .lot-gallery__scroll-hint-btn,
.lot-gallery__scroll-hint:focus-visible .lot-gallery__scroll-hint-btn {
	transform: scale( 1.08 );
	box-shadow: 0 6px 18px rgba( 253, 150, 6, 0.5 );
}

.lot-gallery__scroll-hint:focus-visible {
	outline: none;
}

.lot-gallery__scroll-hint-btn svg {
	display: block;
	pointer-events: none;
}

.lot-gallery__scroll-hint-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba( 253, 150, 6, 0.32 );
	animation: lot-gallery-pulse 2.4s cubic-bezier( 0.25, 0.6, 0.3, 1 ) infinite;
	pointer-events: none;
}

/* Tweede ring: zelfde animatie maar 1.2s later gestart voor staggered
   ripple-effect. */
.lot-gallery__scroll-hint-ring--2 {
	animation-delay: 1.2s;
}

@keyframes lot-gallery-pulse {
	0% {
		transform: scale( 1 );
		opacity: 0.55;
	}
	80% {
		opacity: 0;
	}
	100% {
		transform: scale( 2.6 );
		opacity: 0;
	}
}

/* Reduce motion: respecteer prefers-reduced-motion door de pulse-
   ringen uit te schakelen. Statische knop blijft zichtbaar en klikbaar. */
@media ( prefers-reduced-motion: reduce ) {
	.lot-gallery__scroll-hint-ring {
		animation: none !important;
		opacity: 0;
	}
}

.lotarch-project-modal .lot-gallery__slide--cover {
	padding: clamp( 3.5rem, 6vw, 5rem ) clamp( 1.5rem, 3vw, 2.5rem ) clamp( 2rem, 4vw, 3rem );
}

.lotarch-project-modal .lot-gallery__caption {
	padding-left: clamp( 1.5rem, 3vw, 2.5rem );
	padding-right: clamp( 1.5rem, 3vw, 2.5rem );
	font-size: clamp( 0.9rem, 1.05vw, 1rem );
}

/* Related projects strip — verschijnt onderaan elke project detail pagina,
   tussen de galerij en de CTA. Auto-append via priority 23 filter in
   inc/shortcodes/project.php.

   Layout: horizontale row van max 4 kaartjes met thumbnail + titel +
   categorie. Op mobile stapelt de row naar 2 kolommen (of 1 op zeer klein
   scherm). Zelfde max-width + padding als de rest van de project-content
   zodat alignment consistent is. */
.lotarch-related-projects {
	margin: clamp( 3rem, 5vw, 5rem ) 0 clamp( 1.5rem, 3vw, 2rem );
}

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

.lotarch-related-projects__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 0 0 clamp( 1.25rem, 2vw, 1.75rem );
	padding-bottom: clamp( 0.75rem, 1.5vw, 1rem );
	border-bottom: 1px solid rgba( 0, 0, 0, 0.12 );
}

.lotarch-related-projects__heading {
	margin: 0;
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.35rem, 2.2vw, 1.75rem );
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var( --lotarch-fg-primary );
}

.lotarch-related-projects__all {
	flex-shrink: 0;
	font-family: var( --lotarch-font-sans );
	font-size: 0.9rem;
	font-weight: 500;
	color: #FD9606;
	text-decoration: none;
	transition: color 0.15s ease;
}

.lotarch-related-projects__all:hover,
.lotarch-related-projects__all:focus-visible {
	color: #c67304;
	text-decoration: underline;
}

.lotarch-related-projects__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: clamp( 1rem, 2vw, 1.5rem );
}

.lotarch-related-projects__item {
	margin: 0;
	padding: 0;
}

.lotarch-related-projects__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.lotarch-related-projects__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.05 );
}

.lotarch-related-projects__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
	transition: transform 0.4s ease;
}

/* Hover: enkel de foto zoomt in vanuit het midden — kaart zelf blijft
   op z'n plek. */
.lotarch-related-projects__card:hover .lotarch-related-projects__thumb img,
.lotarch-related-projects__card:focus-visible .lotarch-related-projects__thumb img {
	transform: scale( 1.06 );
}

.lotarch-related-projects__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient( 135deg, rgba( 0, 0, 0, 0.03 ), rgba( 0, 0, 0, 0.08 ) );
}

.lotarch-related-projects__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.6rem;
}

.lotarch-related-projects__title {
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
	color: var( --lotarch-fg-primary );
}

.lotarch-related-projects__cat {
	font-family: var( --lotarch-font-sans );
	font-size: 0.8rem;
	font-weight: 400;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- [projecten_regio] mini-grid ----------
   Kaart-format identiek aan .lotarch-related-projects zodat locatie-
   landingspagina's visueel aansluiten bij de rest van de site.
   Grid is responsive: 2 kolommen op mobile, 3+ op desktop. */
.lotarch-regio {
	margin: clamp( 2rem, 4vw, 3rem ) 0;
	max-width: var( --lotarch-page-content-max-width );
	margin-left: auto;
	margin-right: auto;
	padding: 0 clamp( 1.5rem, 4vw, 3rem );
}

.lotarch-regio__titel {
	margin: 0 0 clamp( 1.25rem, 2vw, 1.75rem );
	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 );
	color: var( --lotarch-fg-primary );
}

.lotarch-regio__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: clamp( 1rem, 2vw, 1.5rem );
}

.lotarch-regio__item {
	margin: 0;
	padding: 0;
}

.lotarch-regio__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.lotarch-regio__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.05 );
}

.lotarch-regio__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
	transition: transform 0.4s ease;
}

/* Hover-effect: alleen de foto zoomt subtiel in vanuit het midden.
   De kaart zelf beweegt niet omhoog. */
.lotarch-regio__card:hover .lotarch-regio__thumb img,
.lotarch-regio__card:focus-visible .lotarch-regio__thumb img {
	transform: scale( 1.06 );
}

.lotarch-regio__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient( 135deg, rgba( 0, 0, 0, 0.03 ), rgba( 0, 0, 0, 0.08 ) );
}

.lotarch-regio__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.6rem;
}

.lotarch-regio__title {
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
	color: var( --lotarch-fg-primary );
}

.lotarch-regio__cat {
	font-family: var( --lotarch-font-sans );
	font-size: 0.8rem;
	font-weight: 400;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Locatiepagina split layout (.lot-locatie-page) ----------
   Op de architect-amersfoort pagina renderen we in een 2-koloms grid:
   linker kolom vult zich met alle tekst-elementen (vd_sectie, vd_thema,
   vd_cta), rechter kolom bevat de [projecten_regio] grid die zichzelf
   binnen die kolom als 2-koloms sub-grid uitschrijft.

   Techniek: CSS grid met impliciete rijen. Alle direct-children van
   .lot-editorial-content krijgen standaard grid-column: 1 (links). De
   .lotarch-regio wordt expliciet naar column 2 gestuurd en spant alle
   rijen (grid-row: 1 / -1 met grid-auto-flow: dense).

   Mobile: onder 900px stapelt het naar 1-koloms — projecten-grid komt
   dan boven de tekst.
   ------------------------------------------------------- */
/* Content-order verwacht:
     vd_sectie 1  (verankerd in Amersfoort)
     vd_sectie 2  (wat maakt LOT anders)
     .lotarch-regio  (projecten grid, 4 projecten)
     vd_thema x4  (FAQ)
     vd_cta       (CTA)

   Grid resultaat:
     row 1: [ vd_sectie 1        | projecten (top 2)    ]
     row 2: [ vd_sectie 2        | projecten (bottom 2) ]
     row 3: [ vd_thema 1  spanning both cols            ]
     row 4: [ vd_thema 2  spanning both cols            ]
     row 5: [ vd_thema 3  spanning both cols            ]
     row 6: [ vd_thema 4  spanning both cols            ]
     row 7: [ vd_cta      spanning both cols            ] */
.lot-locatie-page .lot-editorial-content {
	max-width: var( --lotarch-page-content-max-width );
	margin: 0 auto;
	padding: 0 clamp( 1.5rem, 4vw, 3rem );
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp( 2rem, 4vw, 4rem );
	row-gap: clamp( 1rem, 2vw, 1.75rem );
}

/* Alle direct-children default naar linker kolom. */
.lot-locatie-page .lot-editorial-content > * {
	grid-column: 1;
	max-width: none;
}

/* .lotarch-regio staat in rechter kolom en spant exact de 2 rijen
   die de tekst-secties in de linker kolom bezetten. limit=4 in de
   shortcode maakt precies 2x2 grid dat visueel matched. */
.lot-locatie-page .lot-editorial-content > .lotarch-regio {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
	margin: 0;
	padding: 0;
}

/* [lot_col positie="links"] en [lot_col positie="rechts"] wrappers
   plaatsen hun inhoud (FAQ-blokken of losse project-kaarten) expliciet
   in de linker of rechter kolom. Grid auto-flow vult vervolgens rijen
   op basis van DOM-volgorde. */
.lot-locatie-page .lot-editorial-content > .lot-col--links {
	grid-column: 1;
}
.lot-locatie-page .lot-editorial-content > .lot-col--rechts {
	grid-column: 2;
}

/* CTA staat als laatste block en spant beide kolommen fullwidth. */
.lot-locatie-page .lot-editorial-content > .vd-cta {
	grid-column: 1 / -1;
}

/* Reset horizontale padding op vd_row zodat sections in de linker
   kolom niet extra ingedrukt worden — parent grid regelt spacing. */
.lot-locatie-page .lot-editorial-content > .vd-row {
	padding-left: 0;
	padding-right: 0;
}

/* Verticale vd_row padding kleiner op locatiepagina zodat het ritme
   tussen kop en kopje strakker aanvoelt. Row-gap doet het meeste
   spacing werk. */
.lot-locatie-page .lot-editorial-content > .vd-row {
	padding-top: clamp( 0.5rem, 1vw, 0.75rem );
	padding-bottom: clamp( 0.5rem, 1vw, 0.75rem );
}

/* Projecten binnen het rechter kolom-blok: exact 2-koloms. */
.lot-locatie-page .lotarch-regio__grid {
	grid-template-columns: 1fr 1fr;
	gap: clamp( 0.75rem, 1.5vw, 1.25rem );
}

/* Optionele titel van .lotarch-regio verbergen op de locatiepagina —
   de tekst-secties links vertellen al waarom deze projecten worden
   getoond. */
.lot-locatie-page .lotarch-regio__titel {
	display: none;
}

/* Losse project-kaart (via [project_kaart slug=...]) in dezelfde stijl
   als de grid-tegels, alleen dan als één losse tegel. Gebruikt naast
   een FAQ-blok in de alternerende layout onder het hoofd-projecten-grid. */
.lot-project-kaart {
	margin: 0;
}

/* Op de locatiepagina: schaal de losse project-kaart terug tot ~60% van
   z'n kolombreedte (~1.67x kleiner dan de FAQ-blokken naast zich) en
   centreer horizontaal binnen z'n eigen kolom. */
.lot-locatie-page .lot-col .lot-project-kaart {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.lot-project-kaart__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.lot-project-kaart__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.05 );
}

.lot-project-kaart__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
	transition: transform 0.4s ease;
}

.lot-project-kaart__card:hover .lot-project-kaart__thumb img,
.lot-project-kaart__card:focus-visible .lot-project-kaart__thumb img {
	transform: scale( 1.06 );
}

.lot-project-kaart__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient( 135deg, rgba( 0, 0, 0, 0.03 ), rgba( 0, 0, 0, 0.08 ) );
}

.lot-project-kaart__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.6rem;
}

.lot-project-kaart__title {
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
	color: var( --lotarch-fg-primary );
}

.lot-project-kaart__cat {
	font-family: var( --lotarch-font-sans );
	font-size: 0.8rem;
	font-weight: 400;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* .lot-col wrapper heeft zelf geen visuele styling — puur grid-plaatser.
   Verticale ademruimte rondom komt van de row-gap van het parent grid. */
.lot-col {
	min-width: 0; /* zodat lange titels niet uit de kolom breken */
}

/* Een vd-thema binnen een .lot-col mag geen extra verticale padding
   krijgen — het parent grid regelt spacing. Reset dus de vd-row
   padding en de foto-column-templates (single-col wanneer in lot-col). */
.lot-locatie-page .lot-col .vd-thema {
	padding-top: 0;
	padding-bottom: 0;
	grid-template-columns: 1fr;
	max-width: none;
}

.lot-locatie-page .lot-col .vd-thema__text {
	max-width: none;
}

/* Onder 900px: stack layout. Alles 1-koloms in content-order. */
@media ( max-width: 900px ) {
	.lot-locatie-page .lot-editorial-content {
		grid-template-columns: 1fr;
	}
	.lot-locatie-page .lot-editorial-content > .lotarch-regio {
		grid-column: 1;
		grid-row: auto;
	}
	.lot-locatie-page .lot-editorial-content > .lot-col--links,
	.lot-locatie-page .lot-editorial-content > .lot-col--rechts {
		grid-column: 1;
	}
	.lot-locatie-page .lotarch-regio__grid {
		grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	}
}