/* PRECISIS History-Block: vertikale Linie (Laser), Dots, Jahres- & Inhaltsspalte. */

/* Block: precisis/history — Laser token wie Hero (.ray .line / .dot .glow), Strahl hier vertikal. */
.wp-block-precisis-history.history-timeline {
	/* Entspricht --laser-beam-height (Hero: horizontaler Balken = 2px). */
	--ht-line-w: 2px;
	--ht-line-color: #b1d500;
	/* Schattenfarbe = Laserfarbe; Ray-Glow per Spez ~50 % in color-mix (siehe --ht-ray-glow-mix). */
	--ht-line-shadow-blur: 50px;
	/* Ray-Glow-Deckkraft in color-mix(…, transparent): 50 % = 50 % Transparenz-Anteil am Leuchten */
	--ht-ray-glow-mix: 50%;
	--ht-line-center: 1.5rem;
	--ht-track: 3rem;
	/* Wie Tabs-Block: Abstand Label-/Zeitstrahl-Spalte ↔ Content (precisis-tabs: 64px) */
	--ht-label-content-gap: 64px;
	--ht-vert-lift: 12px;
	--ht-dot: 22px;
	--ht-dot-last: 45px;
	--ht-dot-margin: -34px;
	--ht-dot-last-margin: -45.5px;
	/* Wie is-style-precisis-laser: Hintergrund-Scheibe + Puls (--laser-glow-size / --laser-pulse-spread) */
	--ht-glow-size: 280px;
	/* Nur noch für Theme-Overrides dokumentiert; Glow zentriert per calc(dot margin + Breite). */
	--ht-glow-margin: -30px;
	--ht-glow-top-nudge: 20px;
	--ht-pulse-spread: 2em;
	--ht-card-radius: 12px;
	--ht-line-inset-bottom: 0;
	/* Abstand von Eintrag zu Eintrag (Inhaltsspitze ↔ nächster Dot). */
	--ht-item-gap: 50px;
	/*
	 * Abstand Karten-/Inhalts-Oben (Jahr + Dot) – angleichen an Karten-innen,
	 * z. B. 32px, damit erste Textzeile (oft h3) und Jahreszahl optisch auf Linie sitzen.
	 * Theming: z. B. `var(--wp--preset--spacing--40, 2rem)` setzen, wenn sinnvoller als px.
	 */
	--ht-year-align-offset: 32px;
	/* Y: Abstand Obere Kante des Items → Dot-Mitte (Standard-Dot) */
	--ht-dot-center-from-item-top: calc(
		var(--ht-year-align-offset) + 0.65em - var(--ht-vert-lift, 12px) + (var(--ht-dot) * 0.5)
	);
	/* Y: letzter Eintrag, großer Punkt (Mitte) */
	--ht-dot-center-last-from-item-top: calc(
		var(--ht-year-align-offset) + 0.45em - var(--ht-vert-lift, 12px) + (var(--ht-dot-last) * 0.5)
	);
	/* X: Linie deckungsgleich mit Dot-Mitte */
	--ht-line-x: calc(
		var(--ht-line-center) + var(--ht-dot-margin) + (var(--ht-dot) * 0.5) - (var(--ht-line-w) * 0.5)
	);
	/* Oben: Linie ragt aus dem Inhaltsbereich; weicher Einzug per Verlauf + lokal scrollendem Background. */
	--ht-line-top-overhang: 4.5rem;
	/*
	 * Oberer Stub (.wp-block-precisis-history__inner::before): Anteil der Stub-Höhe, in dem die Linie
	 * vollständig transparent bleibt (0% = nur Stop bei 0; höher = weicher Einstieg).
	 */
	--ht-stub-top-transparent-end: 22%;
	/*
	 * Verlauf bis Mitte des letzten (großen) Punkts: Segmente = gleicher Gradient +
	 * background-attachment: fixed (ein durchlaufender Verlauf). Oberer Stub (__inner::before)
	 * nutzt scroll + eigenen oberen Transparenz-Anteil — siehe --ht-stub-top-transparent-end.
	 * Vorletztes Segment: andere Länge (bottom) + optional clip-path.
	 * Bei Scroll-Artefakten bei den Segmenten: --ht-beam-gradient-attachment: scroll.
	 */
	--ht-beam-gradient-attachment: fixed;
	/* Unten am letzten Liniensegment (vorletztes Item) kürzen (z. B. bei Glow) */
	--ht-last-segment-clip-bottom: 0px;

	position: relative;
	isolation: isolate;
	overflow: visible;
	z-index: 0;
	/* Schmal-Layout auch bei breitem Viewport (z. B. Spalte / einspaltig) */
	container: precisis-history / inline-size;
	padding-block: var(--wp--preset--spacing--50, 1.5rem);
	padding-inline: var(--wp--preset--spacing--50, 1.5rem);
}

/* Kein äußerer Stiel; Verlauf-Stub + Segmente bis letzter Punkt; clip nur am letzten Segment. */
.wp-block-precisis-history.history-timeline::before {
	display: none;
}

/* Innen-Wrapper: Verlauf-Stub bis Mitte des ersten Punkts (nur-child: großer Endpunkt). */
.wp-block-precisis-history__inner {
	position: relative;
	overflow: visible;
}

/* Verlauf-Stub: Ray-Glow weich + soft-light wie Hero-.glow; Fill oben weiter transparent. */
.wp-block-precisis-history__inner::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline-start: var(--ht-line-x);
	top: calc(-1 * var(--ht-line-top-overhang, 0px));
	width: var(--ht-line-w);
	height: calc(var(--ht-dot-center-from-item-top) + var(--ht-line-top-overhang, 0px));
	background: linear-gradient(
		180deg,
		transparent 0%,
		transparent var(--ht-stub-top-transparent-end, 22%),
		var(--ht-line-color) 100%
	);
	background-attachment: scroll;
	mix-blend-mode: soft-light;
	box-shadow:
		0 0 var(--ht-line-shadow-blur) 0
		color-mix(in srgb, var(--ht-line-color) var(--ht-ray-glow-mix, 50%), transparent);
	pointer-events: none;
}

.wp-block-precisis-history__inner:has(> .wp-block-precisis-history-item:only-child)::before {
	height: calc(var(--ht-dot-center-last-from-item-top) + var(--ht-line-top-overhang, 0px));
}

/*
 * Alle Segmente bis zum letzten Eintrag (Ende = Mitte großer Punkt): gleicher Verlauf + fixed.
 * Vorletztes Item: überschreibt nur bottom (Strecke zum großen Punkt) + clip-path.
 * (last-child::after = Glow.)
 */
.wp-block-precisis-history
	.wp-block-precisis-history__inner
	.wp-block-precisis-history-item:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline-start: var(--ht-line-x);
	top: var(
		--ht-dot-center-from-item-top,
		calc(var(--ht-year-align-offset) + 0.65em - var(--ht-vert-lift, 12px) + (var(--ht-dot) * 0.5))
	);
	bottom: calc(
		-1 *
			(
				var(--ht-item-gap, 50px) + var(
					--ht-dot-center-from-item-top,
					calc(var(--ht-year-align-offset) + 0.65em - var(--ht-vert-lift, 12px) + (var(--ht-dot) * 0.5))
				)
			)
	);
	width: var(--ht-line-w);
	background: linear-gradient(
		180deg,
		transparent 0%,
		var(--ht-line-color) 100%
	);
	background-attachment: var(--ht-beam-gradient-attachment, fixed);
	mix-blend-mode: soft-light;
	box-shadow:
		0 0 var(--ht-line-shadow-blur) 0
		color-mix(in srgb, var(--ht-line-color) var(--ht-ray-glow-mix, 50%), transparent);
	pointer-events: none;
}

.wp-block-precisis-history
	.wp-block-precisis-history__inner
	.wp-block-precisis-history-item:nth-last-child(2):not(:only-child)::after {
	bottom: calc(
		-1 *
			(
				var(--ht-item-gap, 50px) + var(
					--ht-dot-center-last-from-item-top,
					calc(var(--ht-year-align-offset) + 0.45em - var(--ht-vert-lift, 12px) + (var(--ht-dot-last) * 0.5))
				)
			)
	);
	clip-path: inset(0 0 var(--ht-last-segment-clip-bottom, 0px) 0);
}

/* Item-Zeile: wie Tabs — 1fr : 3fr (ca. 1/4 Zeitstrahl+Label, 3/4 Content) */
.wp-block-precisis-history .wp-block-precisis-history-item {
	--ht-line-center: 1.5rem;

	width: 100%;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	column-gap: var(--ht-label-content-gap, 60px);
	align-items: start;
	position: relative;
	z-index: 2;
	margin-block: 0;
	margin-bottom: var(--ht-item-gap, 50px);
}

.wp-block-precisis-history .wp-block-precisis-history-item:last-child {
	margin-bottom: calc(var(--ht-glow-size) * 0.25);
}

.wp-block-precisis-history .wp-block-precisis-history-item > p.history-item-year {
	grid-column: 1;
	margin-block: 0 !important;
	margin-inline: 0;
	padding-top: var(--ht-year-align-offset, 0px) !important;
	padding-inline-start: var(--ht-track);
	min-width: 0;
}

/* Karten-Container: nur Geometrie; Design im Editor */
.wp-block-precisis-history .wp-block-precisis-history-item > .history-item-content {
	grid-column: 2;
	margin: 0;
	min-width: 0;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-top: 0;
	padding-inline-start: var(--ht-content-padding-start, 0);
	border-radius: var(--ht-card-radius);
	position: relative;
	z-index: 1;
}

/* Dots (!important: Theme-Paragraph/Position-Regeln ansonsten stärker) */
.wp-block-precisis-history .wp-block-precisis-history-item::before {
	content: "" !important;
	position: absolute !important;
	z-index: 2;
	inset-inline-start: var(--ht-line-center) !important;
	top: calc(var(--ht-year-align-offset) + 0.75em - var(--ht-vert-lift, 12px)) !important;
	width: var(--ht-dot) !important;
	height: var(--ht-dot) !important;
	margin: 0 0 0 var(--ht-dot-margin, -34px) !important;
	border-radius: 50%;
	background: var(--ht-line-color);
	pointer-events: none;
}

.wp-block-precisis-history .wp-block-precisis-history-item:last-child::before {
	width: var(--ht-dot-last) !important;
	height: var(--ht-dot-last) !important;
	margin: 0 0 0 var(--ht-dot-last-margin, -45.5px) !important;
	top: calc(var(--ht-year-align-offset) + 0.45em - var(--ht-vert-lift, 12px)) !important;
	border-radius: 999px;
	background: radial-gradient(
		50% 50% at 50% 50%,
		var(--ht-line-color) 34.62%,
		transparent 100%
	);
	filter:
		drop-shadow(0 0 10px rgba(177, 213, 0, 0.9))
		drop-shadow(0 0 22px rgba(177, 213, 0, 0.65));
	pointer-events: none;
	will-change: box-shadow;
	animation: precisis-history-laser-radial-pulse 1.5s ease-out infinite;
}

/* Großer Glow / Puls: exakt zentriert auf großem Dot (nicht line-center + ht-glow-margin). */
.wp-block-precisis-history .wp-block-precisis-history-item:last-child::after {
	content: "" !important;
	position: absolute !important;
	z-index: 0;
	inset-inline-start: calc(
			var(--ht-line-center) + var(--ht-dot-last-margin) + (var(--ht-dot-last) * 0.5)
		) !important;
	top: var(--ht-dot-center-last-from-item-top) !important;
	width: var(--ht-glow-size) !important;
	height: var(--ht-glow-size) !important;
	margin: 0 !important;
	transform: translate(var(--ht-last-glow-translate-x, -50%), -50%) !important;
	border-radius: 999px;
	background: radial-gradient(
		circle calc(var(--ht-glow-size) / 2) at 50% 50%,
		rgba(177, 213, 0, 1) 0%,
		rgba(177, 213, 0, 0) 100%
	);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* Editor-Platzhalter */
.editor-styles-wrapper .history-item .history-item-year.is-placeholder-prompt {
	color: var(--wp--preset--color--secondary, #6c7781);
}

/*
 * Schmal-Layout ab max. 782px Viewport (wie precisis-tabs / WP-Editor).
 * Nur Viewport — nicht Container-Breite: Jahreszahl bleibt in der linken Spalte
 * „neben“ der Achse/Punkten, solange der Viewport > 782px (auch in schmalen Spalten).
 * Variablen auf __inner, damit Items/::before sie zuverlässig erben.
 * (container-Name am Block bleibt für künftige Queries nutzbar.)
 */
@media (max-width: 782px) {
	.wp-block-precisis-history__inner {
		--ht-line-center: 0.75rem;
		--ht-track: 1.5rem;
		--ht-year-min: 0;
		--ht-content-padding-start: 0;
		--ht-year-align-offset: 23px;
		--ht-line-top-overhang: 1.125rem;
		--ht-glow-size: 140px;
		--ht-pulse-spread: 2.5em;
		--ht-dot-margin: -40px;
		--ht-dot-last-margin: -40px;
		--ht-dot: 18px;
		--ht-dot-last: 40px;
		--ht-dot-center-from-item-top: calc(
			var(--ht-year-align-offset) + 0.35em - var(--ht-vert-lift, 12px) + (var(--ht-dot) * 0.5)
		);
		--ht-dot-center-last-from-item-top: calc(
			var(--ht-year-align-offset) + 0.35em - var(--ht-vert-lift, 12px) + (var(--ht-dot-last) * 0.5)
		);
		--ht-line-x: calc(
			var(--ht-line-center) + var(--ht-dot-margin) + (var(--ht-dot) * 0.5) - (var(--ht-line-w) * 0.5)
		);
		/* Glow-Mitte: geometrischer Anker weicht auf schmal leicht ab; -60% visuell auf Dot zentriert. */
		--ht-last-glow-translate-x: -60%;
	}

	.wp-block-precisis-history .wp-block-precisis-history-item {
		grid-template-columns: 1.5rem minmax(0, 1fr);
		row-gap: 0.45rem;
	}

	.wp-block-precisis-history .wp-block-precisis-history-item > p.history-item-year {
		grid-column: 2;
		padding-top: var(--ht-year-align-offset) !important;
	}

	.wp-block-precisis-history .wp-block-precisis-history-item > .history-item-content {
		grid-column: 2;
	}

	.wp-block-precisis-history .wp-block-precisis-history-item::before {
		top: calc(var(--ht-year-align-offset) + 0.35em - var(--ht-vert-lift, 12px));
		width: 18px !important;
		height: 18px !important;
		margin: 0 0 0 -40px !important;
	}

	.wp-block-precisis-history .wp-block-precisis-history-item:last-child::before {
		top: calc(var(--ht-year-align-offset) + 0.35em - var(--ht-vert-lift, 12px));
		width: 40px !important;
		height: 40px !important;
		margin: 0 0 0 -40px !important;
		filter:
			drop-shadow(0 0 5px rgba(177, 213, 0, 0.9))
			drop-shadow(0 0 11px rgba(177, 213, 0, 0.65));
	}

	.wp-block-precisis-history .wp-block-precisis-history-item:last-child::after {
		width: var(--ht-glow-size) !important;
		height: var(--ht-glow-size) !important;
	}

	.wp-block-precisis-history.history-timeline
		.wp-block-precisis-history__inner
		> .wp-block-precisis-history-item
		> p.history-item-year {
		padding-top: 23px !important;
	}

	.wp-block-precisis-history.history-timeline
		.wp-block-precisis-history__inner
		> .wp-block-precisis-history-item::before {
		inset-inline-start: 0.75rem !important;
		top: calc(23px + 0.35em - 12px) !important;
		width: 18px !important;
		height: 18px !important;
		margin: 0 0 0 -40px !important;
	}

	.wp-block-precisis-history.history-timeline
		.wp-block-precisis-history__inner
		> .wp-block-precisis-history-item:last-child::before {
		inset-inline-start: 0.75rem !important;
		top: calc(23px + 0.35em - 12px) !important;
		width: 40px !important;
		height: 40px !important;
		margin: 0 0 0 -40px !important;
		filter:
			drop-shadow(0 0 5px rgba(177, 213, 0, 0.9))
			drop-shadow(0 0 11px rgba(177, 213, 0, 0.65));
	}

	.wp-block-precisis-history.history-timeline
		.wp-block-precisis-history__inner
		> .wp-block-precisis-history-item {
		grid-template-columns: 1.5rem minmax(0, 1fr) !important;
	}
}

/*
 * Starke Overrides (lange Selektoren): ab max. 781px Viewport.
 */
@media (max-width: 781px) {
	/* Dot ::before nutzt top: 12px + margin -51px — Variablen für Linienende + Glow-Mitte synchronisieren. */
	.wp-block-precisis-history.history-timeline .wp-block-precisis-history__inner {
		--ht-dot-last-margin: -51px;
		--ht-dot-center-last-from-item-top: calc(12px + (var(--ht-dot-last) * 0.5));
	}

	.wp-block-precisis-history.history-timeline
		.wp-block-precisis-history__inner
		> .wp-block-precisis-history-item
		> p.history-item-year {
		padding-top: 15px !important;
	}

	.wp-block-precisis-history.history-timeline
		.wp-block-precisis-history__inner
		> .wp-block-precisis-history-item::before {
		inset-inline-start: 0.75rem !important;
		top: calc(23px + 0.35em - 12px) !important;
		width: 18px !important;
		height: 18px !important;
		margin: 0 0 0 -40px !important;
	}

	.wp-block-precisis-history.history-timeline
		.wp-block-precisis-history__inner
		> .wp-block-precisis-history-item:last-child::before {
		inset-inline-start: 0.75rem !important;
		top: 12px !important;
		width: 40px !important;
		height: 40px !important;
		margin: 0 0 0 -51px !important;
		filter:
			drop-shadow(0 0 5px rgba(177, 213, 0, 0.9))
			drop-shadow(0 0 11px rgba(177, 213, 0, 0.65));
	}

	.wp-block-precisis-history.history-timeline
		.wp-block-precisis-history__inner
		> .wp-block-precisis-history-item {
		grid-template-columns: 1.5rem minmax(0, 1fr) !important;
	}

	.wp-block-precisis-history .wp-block-precisis-history-item{
		column-gap: 10px;
	}
}

/* Wie precisis-laser (::after Leuchtpunkt); --ht-pulse-spread steuert die Ausbreitung. */
@keyframes precisis-history-laser-radial-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(177, 213, 0, 0.8);
	}

	100% {
		box-shadow: 0 0 0 var(--ht-pulse-spread, 2em) rgba(177, 213, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-precisis-history .wp-block-precisis-history-item:last-child::before {
		animation: none;
	}
}