/* ---------- Proces timeline ([proces] + [stap]) ----------
   Verticale timeline met stappen die om beurten links/rechts van
   een centrale lijn staan. Elke stap heeft een circle-cropped foto
   + nummer badge op de lijn. */

.lot-proces-wrap {
	max-width: 1200px;
	/* Negative top-margin: schuift de hele timeline 1.5cm omhoog richting
	   de page-header, zodat de eerste stap dichter bij de intro-tekst
	   staat en er minder witruimte onder de titel zit. */
	margin: -1.5cm auto 0;
	padding: clamp( 2rem, 5vw, 4rem ) clamp( 1.5rem, 4vw, 3rem );
}

.lot-proces {
	/* --- Tweakbare hoogte per stap-rij (uniform voor alle rijen). Fixed
	       height (geen minmax) zodat de badges op de centrale lijn EXACT
	       op gelijke verticale afstand van elkaar staan, ongeacht de
	       hoeveelheid tekst in individuele stappen. Content dat langer is
	       overloopt visueel — verhoog dan de var. --- */
	--proces-step-height: clamp( 440px, 44vw, 560px );
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: var( --proces-step-height );
	row-gap: clamp( 2rem, 4vw, 3rem );
}

/* Centrale verticale lijn — loopt van y=2rem tot de bottom van de tekst
   in de laatste stap (via --proces-line-height CSS-var die door JS wordt
   gezet in de shortcode; fallback = calc(100% - 4rem) voor als JS niet
   geladen is). */
.lot-proces::before {
	content: "";
	position: absolute;
	top: 2rem;
	height: var( --proces-line-height, calc( 100% - 4rem ) );
	left: 50%;
	width: 1px;
	background: rgba( 0, 0, 0, 0.18 );
	transform: translateX( -50% );
	z-index: 1;
}

.lot-proces__step {
	position: relative;
	z-index: 2;
	padding: 0 clamp( 2rem, 4vw, 3.5rem );
	min-height: var( --proces-step-height );
}

.lot-proces__step--left {
	grid-column: 1;
	text-align: right;
}

.lot-proces__step--right {
	grid-column: 2;
	text-align: left;
}

/* Badge op de lijn — bovenaan elke stap. Bevat het stap-nummer (01, 02, ...).
   Opaque bg zodat de badge cleanly op de timeline zit. Was voorheen ::before
   pseudo-element, nu HTML-element voor consistente styling.

   Defensive round-checks:
   - padding/margin expliciet 0 (voor het geval Kadence of WP een default
     padding op spans zet die de shape asymmetrisch maakt)
   - aspect-ratio 1/1 als belt-and-suspenders naast expliciete width/height
   - flex-shrink 0 zodat een parent flex-container 'em niet kan uitrekken
   - line-height 1 op zowel badge als num, plus tabular-nums op num zodat
     "01" en "02" dezelfde optische breedte hebben en visueel gecentreerd
     staan in de cirkel. */
.lot-proces__badge {
	position: absolute;
	top: 0;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	background: var( --lotarch-bg-primary );
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	color: var( --lotarch-fg-primary );
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	z-index: 3;
	box-sizing: border-box;
	transition: transform 0.3s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
	            border-color 0.3s ease,
	            box-shadow 0.3s ease;
}

.lot-proces__step:hover .lot-proces__badge {
	transform: scale( 1.08 );
	border-color: #FD9606;
	box-shadow: 0 4px 14px rgba( 253, 150, 6, 0.25 );
}

.lot-proces__step--left .lot-proces__badge {
	right: -23px; /* half width, zit op de centrale lijn */
}

.lot-proces__step--right .lot-proces__badge {
	left: -23px;
}

/* Nummer binnen de badge — serif, netjes gecentreerd via flex parent.
   tabular-nums zorgt dat "01", "02" en "03" allemaal exact dezelfde
   glyph-breedte krijgen, zodat de horizontale centrering per stap
   identiek uitpakt (geen wobble bij hover-scale). */
.lot-proces__num {
	font-family: var( --lotarch-font-serif );
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1;
	color: var( --lotarch-fg-primary );
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
	padding: 0;
	margin: 0;
	display: block;
}

/* SVG icoon in de GROTE foto-cirkel (placeholder-variant, wanneer er
   geen foto is ingesteld). Groot en zwart, gecentreerd. Vervangt de
   voorheen unieke gradient-placeholder met een expressief icoon dat
   de stap-inhoud visualiseert.

   Zoom-functie: --icoon-zoom is een multiplier (default 1). Zet 'm
   globaal op de .lot-proces-wrap ("--icoon-zoom: 1.5" = 150% grootte)
   of per-stap via de [stap icoon_grootte="1.5"] shortcode attribute
   (zet inline style op de step). Werkt op zowel width/height als
   max-width/max-height zodat het icoon proportioneel schaalt. */
.lot-proces {
	--icoon-zoom: 1;
}

.lot-proces__photo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var( --lotarch-fg-primary );
}

.lot-proces__photo-icon svg {
	display: block;
	width: calc( 40% * var( --icoon-zoom, 1 ) );
	height: calc( 40% * var( --icoon-zoom, 1 ) );
	max-width: calc( 96px * var( --icoon-zoom, 1 ) );
	max-height: calc( 96px * var( --icoon-zoom, 1 ) );
	stroke: currentColor;
	stroke-width: 1.25;
}

/* Custom image variant — icoon="URL" of icoon="attachment-id". Wordt in
   icon-formaat gerenderd (zelfde afmetingen als SVG variant, respecteert
   --icoon-zoom), gecontained zodat transparante PNG-icoons niet gestrekt
   worden en de cirkel-bg zichtbaar blijft. */
.lot-proces__photo-icon--img img {
	display: block;
	width: calc( 40% * var( --icoon-zoom, 1 ) );
	height: calc( 40% * var( --icoon-zoom, 1 ) );
	max-width: calc( 96px * var( --icoon-zoom, 1 ) );
	max-height: calc( 96px * var( --icoon-zoom, 1 ) );
	object-fit: contain;
	object-position: center center;
}

/* Standard sizing als de photo-icon zelf een img zou zijn (edge case). */
.lot-proces__photo-icon > img {
	display: block;
	width: calc( 40% * var( --icoon-zoom, 1 ) );
	height: calc( 40% * var( --icoon-zoom, 1 ) );
	object-fit: contain;
}

/* Placeholder met icoon: witte achtergrond zoals de default cirkel
   (voorheen kreeg 'em een extra oranje-tint, maar de icoon voelde
   daardoor te druk. Rustig wit + zwart icoon leest cleaner). */
.lot-proces__photo--has-icon {
	background: #ffffff;
}

.lot-proces__content {
	padding-top: 3.5rem; /* ruimte voor de badge bovenin */
}

/* Circle-cropped foto. Rustige default: witte achtergrond, dunne grijze
   rand — icoon binnenin blijft zwart, dus alle drie de cirkels zijn
   herkenbaar als "cirkel met icoon" zonder dat ze om aandacht schreeuwen.
   Op hover krijgt de rand het site-oranje accent + soft glow, zelfde
   patroon als de kleine badge-cirkels op de timeline (zie hover-block
   verderop). */
.lot-proces__photo {
	width: clamp( 180px, 22vw, 260px );
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #ffffff;
	/* Zelfde grijze rand als de kleine badge-cirkels (.lot-proces__badge)
	   voor visuele consistency — beide cirkelvormen op dezelfde pagina
	   moeten dezelfde default rand-tint hebben. */
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	box-shadow: none;
	margin: 0 0 1.5rem;
	box-sizing: border-box;
	transition:
		background 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

/* Hover-state op de hele stap → grote cirkel krijgt een oranje rand +
   subtiele oranje glow. Achtergrond blijft wit zodat het icoon binnenin
   zijn zwart contrast houdt. Matcht het hover-patroon van de kleine
   badge-cirkels op de timeline én de flow-markers op de contactpagina:
   grijze rand default, oranje op hover. */
.lot-proces__step:hover .lot-proces__photo {
	border-color: #FD9606;
	box-shadow: 0 6px 20px rgba( 253, 150, 6, 0.28 );
}

.lot-proces__step:hover .lot-proces__photo--has-icon {
	border-color: #FD9606;
}

/* Icoon binnen de cirkel behoudt z'n eigen kleur bij hover — alleen de
   ring/cirkel-omkadering krijgt de oranje tint, wat "inside content"
   (SVG icoontjes, foto's, nummers) neutraal laat. */

.lot-proces__step--left .lot-proces__photo {
	margin-left: auto;
	margin-right: 0;
}

.lot-proces__step--right .lot-proces__photo {
	margin-left: 0;
	margin-right: auto;
}

.lot-proces__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform 0.5s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.lot-proces__photo:hover img {
	transform: scale( 1.04 );
}

/* Placeholder (geen foto) — warm oranje-getinte gradient ipv beige,
   past bij het site-accent (#FD9606) op andere elementen zonder
   dominant te worden. Subtiel genoeg dat een echt foto ernaast niet
   competeert met de placeholder-styling. */
.lot-proces__photo--placeholder {
	background: linear-gradient( 135deg, rgba( 253, 150, 6, 0.18 ) 0%, rgba( 253, 150, 6, 0.32 ) 100% );
}

/* Titel + body typografie */
.lot-proces__title {
	font-family: var( --lotarch-font-serif );
	font-size: clamp( 1.35rem, 2vw, 1.75rem );
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	color: var( --lotarch-fg-primary );
}

.lot-proces__body {
	font-family: var( --lotarch-font-sans );
	font-size: 1.05rem;
	line-height: 1.7;
	color: #2a2a2a;
	max-width: 400px;
}

.lot-proces__step--left .lot-proces__body {
	margin-left: auto;
}

.lot-proces__step--right .lot-proces__body {
	margin-right: auto;
}

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

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

/* Mobile: stack verticaal, lijn schuift naar links, alle content
   uitgelijnd rechts van de lijn. */
@media ( max-width: 780px ) {
	.lot-proces {
		grid-template-columns: 1fr;
		row-gap: clamp( 2rem, 5vw, 3rem );
	}
	.lot-proces::before {
		left: 24px;
		transform: none;
	}
	.lot-proces__step,
	.lot-proces__step--left,
	.lot-proces__step--right {
		grid-column: 1;
		text-align: left;
		padding: 0 0 0 4rem;
	}
	.lot-proces__step--left .lot-proces__badge,
	.lot-proces__step--right .lot-proces__badge {
		right: auto;
		left: 1px;
	}
	.lot-proces__step--left .lot-proces__photo,
	.lot-proces__step--right .lot-proces__photo,
	.lot-proces__step--left .lot-proces__body,
	.lot-proces__step--right .lot-proces__body {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ---------- Mobile ---------- */
@media ( max-width: 900px ) {
	/* Alle themas stacken verticaal, tekst boven foto's — ongeacht of
	   ze photos-left of photos-right zijn op desktop. */
	.vd-thema,
	.vd-thema--photos-right,
	.vd-thema--photos-left {
		grid-template-columns: 1fr;
	}
	.vd-thema--photos-right .vd-thema__text,
	.vd-thema--photos-left .vd-thema__text,
	.vd-thema--photos-right .vd-thema__photos,
	.vd-thema--photos-left .vd-thema__photos {
		grid-column: 1;
	}
	.vd-thema__text {
		position: static;
	}
}

@media ( max-width: 600px ) {
	/* Ook 2-foto themas stacken op smalle mobile. */
	.vd-thema--count-2 .vd-thema__photos {
		grid-template-columns: 1fr;
	}
	.vd-hero {
		height: clamp( 220px, 38vh, 340px );
	}
}

/* ---------------------------------------------------------
   Premium scroll-hint op de proces pagina.
   Vaste positie rechts, verticaal gecentreerd. Editorial
   compositie: klein "SCROLL" label bovenaan, dunne verticale
   lijn eronder, chevron pijltje onderaan. Gentle bounce op
   het chevron zodat de hint direct als "scroll indicator"
   herkend wordt zonder gimmicky te voelen.

   Alleen zichtbaar op de proces pagina (rendert alleen daar
   via wp_footer hook in functions.php). Fadet uit na 30% van
   viewport gescrolled — dan is duidelijk dat er meer content
   is en heeft de hint z'n werk gedaan. Verdwijnt volledig
   bij bottom-of-page.
--------------------------------------------------------- */

/* Positioned FIXED zodat de hint blijft staan tijdens scrollen, maar
   horizontaal net RECHTS van de verticale timeline-lijn (die op
   50% van de viewport zit, want .lot-proces-wrap is horizontaal
   gecentreerd tot 1200px en de ::before-lijn zit op left:50% van
   .lot-proces daarbinnen). Verticaal op 50% van de viewport zodat
   het pijltje op eye-level staat — het midden van waar een badge
   op de lijn natuurlijk in beeld komt. Offset van 42px van het
   line-center = badge-radius 23px + 19px gap, zodat de hint netjes
   naast een badge past zonder 'em te overlappen. */
.lot-scroll-hint {
	position: fixed;
	left: calc( 50% + 42px );
	/* Verticaal ~3cm onder viewport-center — landt op eye-level bij
	   waar een badge natuurlijk in beeld komt (badge-height inclusief
	   step-padding valt dan onder de hint), zonder concurrent te
	   worden met de content bovenin. */
	top: calc( 50% + 3cm );
	transform: translateY( -50% );
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: 0.5rem 0.35rem;
	text-decoration: none;
	color: rgba( 26, 26, 26, 0.55 );
	background: transparent;
	border-radius: 999px;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		opacity 0.5s ease,
		visibility 0.5s ease,
		transform 0.5s ease,
		color 0.25s ease;
	pointer-events: auto;
	will-change: opacity, transform;
}

/* Link-states nadrukkelijk vastpinnen — <a> heeft anders browser-default
   :visited (kan paars zijn) en :focus (blauwe outline op sommige
   browsers). Alleen twee kleuren toegestaan: grijs idle, oranje op
   interactie/focus. */
.lot-scroll-hint:link,
.lot-scroll-hint:visited {
	color: rgba( 26, 26, 26, 0.55 );
}

/* Klein SCROLL label — Fraunces small caps voor editorial gevoel,
   tight tracking, muted color zodat het niet dominant is. */
.lot-scroll-hint__label {
	font-family: var( --lotarch-font-serif );
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	line-height: 1;
	color: inherit;
	writing-mode: horizontal-tb;
	text-transform: uppercase;
}

/* Dunne verticale lijn tussen label en chevron — 1px hairline die
   subtiel "hier begint een indicator" signaleert zonder een echte
   knop-look. */
.lot-scroll-hint__line {
	display: block;
	width: 1px;
	height: 28px;
	background: currentColor;
	opacity: 0.5;
}

.lot-scroll-hint__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	animation: lot-scroll-hint-bounce 2.2s ease-in-out infinite;
	transform-origin: center;
}

.lot-scroll-hint__chevron svg {
	display: block;
}

/* Gentle bounce — subtiel op-en-neer bewegen zodat het pijltje
   uitnodigt tot scrollen zonder afleiding. Loopt continu. */
@keyframes lot-scroll-hint-bounce {
	0%, 100% { transform: translateY( 0 ); opacity: 1; }
	50%      { transform: translateY( 5px ); opacity: 0.6; }
}

/* Hover / focus / active: oranje. Alle interactie-states gebruiken
   #FD9606 zodat er nooit een browser-default blauw of paars kleurtje
   doorheen schemert. :focus (niet alleen :focus-visible) ivm click-
   sticky state waarin de <a> na click focus behoudt tot een andere
   click elders. */
.lot-scroll-hint:hover,
.lot-scroll-hint:focus,
.lot-scroll-hint:focus-visible,
.lot-scroll-hint:active {
	color: #FD9606 !important;
	outline: none !important;
	background: transparent;
	text-decoration: none;
}

.lot-scroll-hint:hover .lot-scroll-hint__chevron,
.lot-scroll-hint:focus .lot-scroll-hint__chevron,
.lot-scroll-hint:focus-visible .lot-scroll-hint__chevron,
.lot-scroll-hint:active .lot-scroll-hint__chevron {
	animation-play-state: paused;
	transform: translateY( 2px );
}

/* Gefadet-uit state — na ~30% scroll. Klein-vervangend zodat het
   pijltje niet abrupt verdwijnt maar rustig wegglijdt naar rechts
   (weg van de timeline-lijn) voor een natural exit. */
.lot-scroll-hint.is-faded {
	opacity: 0;
	transform: translateY( -50% ) translateX( 20px );
	pointer-events: none;
}

/* Bijna aan de bottom: hint volledig verwijderd + display none om
   layout-flicker te voorkomen. */
.lot-scroll-hint.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Reduced motion: geen bounce, geen slide-uit — alleen opacity fade. */
@media ( prefers-reduced-motion: reduce ) {
	.lot-scroll-hint__chevron {
		animation: none;
	}
	.lot-scroll-hint.is-faded {
		transform: translateY( -50% );
	}
	.lot-scroll-hint {
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}
}

/* Mobile: hide de scroll-hint volledig — touch users scrollen
   intuïtief en het pijltje concurreert met de content in de
   krappere viewport. */
@media ( max-width: 780px ) {
	.lot-scroll-hint {
		display: none;
	}
}

/* ---------- Bouwanimatie SVG (icoon="bouwanimatie") ----------
   User's originele huis+kraan icoon met per-groep animatie. Verdeeld
   over 10 bouwfases (achtergrond-gebouw → hoofdgebouw → ramen → deur
   → steiger → kraan-basis → kraan-toren → kraan-kabel → kraan-top →
   kraan-jib), elk met eigen delay. Iedere <path> is filled met
   currentColor en fade-in via opacity transition — dit is de veilige
   animatietechniek voor filled shapes (stroke-dasharray werkt alleen
   voor open lijnen).

   Trigger via .is-building class die door de proces-anim.js
   IntersectionObserver wordt gezet zodra > 40% van de icoon-container
   zichtbaar is, en weer verwijderd wordt zodra het icoon volledig uit
   beeld is. Zo bouwt het icoon zich elke keer opnieuw op wanneer
   bezoekers ernaar toe scrollen.

   Reduced motion: bezoekers met prefers-reduced-motion krijgen alle
   delen direct getoond, geen animatie. Toegankelijkheidsvereiste. */
.lot-proces-anim--build .lpa-p {
	opacity: 0;
	transition: opacity 0.45s ease-out;
	transition-delay: var( --build-delay, 0s );
}

.lot-proces-anim--build.is-building .lpa-p {
	opacity: 1;
}

/* Delays per bouwfase — totale sequentie ~2.2s. Volgorde volgt de
   echte bouwlogica: eerst wordt de hijskraan opgezet (basis → toren
   → counterweight → jib arm → kabel), pas dan wordt met behulp van
   die kraan het huis gebouwd (klein achtergrond-gebouw → hoofdgebouw
   → steiger eromheen → ramen → deur als laatste). */
/* Bouwanimatie (huis + kraan): kraan eerst, dan huis. */
.lpa-p--crane-base    { --build-delay: 0.00s; }
.lpa-p--crane-tower   { --build-delay: 0.15s; }
.lpa-p--crane-top     { --build-delay: 0.45s; }
.lpa-p--crane-jib     { --build-delay: 0.60s; }
.lpa-p--crane-cable   { --build-delay: 0.85s; }
.lpa-p--bg-building   { --build-delay: 1.05s; }
.lpa-p--main-building { --build-delay: 1.25s; }
.lpa-p--scaffolding   { --build-delay: 1.45s; }
.lpa-p--windows       { --build-delay: 1.65s; }
.lpa-p--door          { --build-delay: 1.80s; }

/* Kennismakinganimatie: poppetjes eerst, dan tekstvakken. */
.lpa-p--figure-left   { --build-delay: 0.00s; }
.lpa-p--figure-right  { --build-delay: 0.30s; }
.lpa-p--bubble-left   { --build-delay: 0.60s; }
.lpa-p--bubble-right  { --build-delay: 0.90s; }

/* Programma van eisen animatie: klembord verschijnt eerst, dan de clip. */
.lpa-p--clipboard-body { --build-delay: 0.00s; }
.lpa-p--clipboard-clip { --build-delay: 0.35s; }

@media ( prefers-reduced-motion: reduce ) {
	.lot-proces-anim--build .lpa-p {
		opacity: 1;
		transition: none;
	}
}