/* ---------------------------------------------------------
   Timeline — used by de [tijdlijn] shortcode.
   Verticale rail met SVG-icon per item.
   Kan overal gebruikt worden, bijv. binnen [vd_thema] op de
   over-lotarchitectuur pagina.
--------------------------------------------------------- */

.lotarch-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	border-left: 1px solid rgba( 26, 26, 26, 0.15 );
}

.lotarch-timeline__item {
	position: relative;
	padding: 0 0 1.1rem 2.75rem;
}

.lotarch-timeline__item:last-child {
	padding-bottom: 0;
}

/* Rail-mask: verberg het deel van de rail dat onder het LAATSTE icoon
   doorloopt. Anders "hangt" de border-left doorlopen door het laatste
   item content, wat er visueel afgesneden uitziet. */
.lotarch-timeline__item:last-child::after {
	content: '';
	position: absolute;
	left: -1px;
	top: 14px; /* halverwege de icon (icon is 28px hoog, dus vanaf midden) */
	bottom: 0;
	width: 2px; /* 1px meer dan rail zodat 'em zeker maskt */
	background: var( --lotarch-bg-primary );
}

/* ---------- Compact variant ([tijdlijn compact="yes"]) ----------
   Alle elementen ongeveer 50-60% van default formaat. Bruikbaar in
   een smallere kolom (bijv. rechts naast intro + foto). */

.lotarch-timeline--compact .lotarch-timeline__item {
	padding: 0 0 0.55rem 2rem;
}

.lotarch-timeline--compact .lotarch-timeline__icon {
	left: -10px;
	top: 0;
	width: 20px;
	height: 20px;
}

.lotarch-timeline--compact .lotarch-timeline__icon svg {
	width: 11px;
	height: 11px;
}

.lotarch-timeline--compact .lotarch-timeline__year {
	font-size: 0.72rem;
	margin-bottom: 0.15rem;
}

.lotarch-timeline--compact .lotarch-timeline__name {
	font-size: 1rem;
	margin: 0 0 0.15rem;
}

.lotarch-timeline--compact .lotarch-timeline__desc {
	font-size: 0.82rem;
	line-height: 1.5;
}

/* Compact rail-mask hoogte matcht de kleinere icon. */
.lotarch-timeline--compact .lotarch-timeline__item:last-child::after {
	top: 10px; /* halverwege 20px icon */
}

/* Als de compact tijdlijn binnen een [vd_kolom] staat, centreer hem
   horizontaal binnen de kolom (fit-content + margin: 0 auto). Zo staat
   de tijdlijn netjes in het midden van bijv. de rechter kolom van
   een [vd_split], ongeacht hoe breed die kolom is. */
.vd-kolom > .lotarch-timeline--compact {
	width: fit-content;
	margin: 0 auto;
	max-width: 100%;
}

/* Wanneer de tijdlijn in een [vd_split align="stretch"] kolom staat
   (bijv. naast een intro+foto kolom op de over-pagina), stretcht de
   kolom mee met de neighbor. Items worden nu verdeeld over de volle
   kolom-hoogte via justify-content: space-between zodat het eerste
   item bovenaan de verticale lijn zit, het laatste onderaan, en de
   tussenliggende items regelmatig verdeeld. Zo dekt de reeks items
   exact de lengte van de lijn — geen leeg deel meer onderaan. Als de
   spreiding te ver aanvoelt: maak de foto in de neighbor kolom
   verticaal iets korter, dan schrompelt de kolom en dus de spreiding
   mee. */
.vd-split--stretch .vd-kolom > .lotarch-timeline,
.vd-split--stretch .vd-kolom > .lotarch-timeline--compact {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: 100%;
	width: fit-content;
	margin: 0 auto;
	max-width: 100%;
}

/* Items binnen de stretch-variant behouden hun standaard padding niet
   want space-between regelt de verdeling. Extra padding-bottom zou de
   ruimte onder items dubbel opdrijven. */
.vd-split--stretch .vd-kolom > .lotarch-timeline .lotarch-timeline__item,
.vd-split--stretch .vd-kolom > .lotarch-timeline--compact .lotarch-timeline__item {
	padding-bottom: 0;
}

/* Rail-mask op last-child uitschakelen — we willen dat de border-left
   doorloopt tot de bottom van de kolom (foto bottom), niet stoppen op
   de laatste icoon. */
.vd-split--stretch .vd-kolom > .lotarch-timeline .lotarch-timeline__item:last-child::after {
	display: none;
}

/* SVG icon sits centered on the rail, replacing the plain dot bullet.
   A ring of bg-color around it hides the rail line behind. */
.lotarch-timeline__icon {
	position: absolute;
	left: -14px;
	top: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --lotarch-bg-primary );
	color: var( --lotarch-fg-primary );
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba( 26, 26, 26, 0.15 );
}

.lotarch-timeline__icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

.lotarch-timeline__year {
	font-family: var( --lotarch-font-sans );
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #666;
	margin-bottom: 0.35rem;
}

.lotarch-timeline__name {
	font-family: var( --lotarch-font-serif );
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
	color: var( --lotarch-fg-primary );
}

.lotarch-timeline__desc {
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	line-height: 1.55;
	color: #444;
}

/* Logo variant — als de NAAM in een [tijdlijn] regel begint met "logo:"
   rendert de shortcode een img-element ipv de gewone .lotarch-timeline__name
   heading. Het logo staat op precies dezelfde plek in de flow (year →
   logo → desc) met dezelfde verticale rhythmus als een gewone naam-regel.
   Max-width wordt via inline style op deze container gezet (uit de
   shortcode attribute logo_grootte="120px"), zodat de gebruiker de
   grootte per timeline kan tunen. */
.lotarch-timeline__logo {
	margin: 0 0 0.4rem;
	line-height: 0; /* geen extra hoogte door text-metrics */
}

.lotarch-timeline__logo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Compact-variant: iets krappere onder-marge zodat de proportie past
   bij de kleinere naam-heading in die variant. */
.lotarch-timeline--compact .lotarch-timeline__logo {
	margin-bottom: 0.15rem;
}

.lotarch-timeline__desc p {
	margin: 0 0 0.5em;
}

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

.lotarch-timeline__empty {
	font-family: var( --lotarch-font-sans );
	font-size: 0.95rem;
	color: #666;
	padding: 1.5rem;
	background: rgba( 0, 0, 0, 0.03 );
	border-left: 3px solid rgba( 0, 0, 0, 0.15 );
}