/* ==========================================================
   PCI Timeline – Block-Styles (Frontend + Editor)
   Werden automatisch vom Plugin „PCI Timeline“ geladen
   ========================================================== */

.pci-timeline {
	/* Diese Werte an das eigene Design anpassen */
	--tl-accent: #f6f08a;                       /* Linie, Punkte, Jahreszahlen, Überschriften */
	--tl-text: inherit;                         /* Fließtext (übernimmt die umgebende Textfarbe) */
	--tl-line-width: 3px;
	--tl-dot: 18px;
	--tl-year-size: var(--wp--preset--font-size--body-2);
	--tl-icon-size: 3rem;
	--tl-center-gap: clamp(3rem, 8vw, 7rem);    /* Abstand zwischen den beiden Spalten */
	--tl-item-gap: clamp(4rem, 10vw, 8rem);     /* vertikaler Abstand zwischen den Einträgen */

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--tl-item-gap);
	max-width: 1100px;
	margin-inline: auto;
	padding-block: 1rem;
	color: var(--tl-text);
}

/* Die senkrechte Linie: ein Abschnitt pro Eintrag, vom eigenen Punkt bis zum nächsten Punkt.
   Wird pro Eintrag gezeichnet, damit sie unabhängig vom Innenabstand des Blocks ausgerichtet bleibt. */
.pci-timeline .pci-timeline__item::after {
	content: "";
	position: absolute;
	top: calc(var(--tl-year-size) / 2);
	bottom: calc(-1 * var(--tl-item-gap) - var(--tl-year-size) / 2);
	left: 50%;
	width: var(--tl-line-width);
	background: var(--tl-accent);
	transform: translateX(-50%);
	pointer-events: none;
}

/* Letzter Eintrag: Linie läuft weiter und endet in einem Pfeil */
.pci-timeline {
	--tl-end-length: 6rem;   /* wie weit die Linie nach dem letzten Eintrag weiterläuft */
	--tl-arrow-size: 14px;   /* Größe der Pfeilspitze */
}

.pci-timeline .pci-timeline__item:nth-last-child(1 of .pci-timeline__item) {
	padding-bottom: var(--tl-end-length);
}

.pci-timeline .pci-timeline__item:nth-last-child(1 of .pci-timeline__item)::after {
	bottom: calc(var(--tl-arrow-size) * 0.2);
}

.pci-timeline .pci-timeline__item:nth-last-child(1 of .pci-timeline__item) .pci-timeline__content::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: calc(var(--tl-arrow-size) * 1.6);
	height: var(--tl-arrow-size);
	background: var(--tl-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2 2l10 10 10-10' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2 2l10 10 10-10' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateX(-50%);
	pointer-events: none;
}

/* WordPress-Standardabstände (Flow-Layout) innerhalb der Timeline zurücksetzen */
.pci-timeline > *,
.pci-timeline .pci-timeline__item > *,
.pci-timeline .pci-timeline__content > * {
	margin: 0;
}

/* ---------- Eintrag ---------- */
.pci-timeline .pci-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--tl-center-gap);
	align-items: start;
}

.pci-timeline .pci-timeline__item > * {
	grid-row: 1;
}

/* Punkt mit Lichthof, mittig auf der Linie und auf Höhe der Jahreszahl */
.pci-timeline .pci-timeline__item::before {
	content: "";
	position: absolute;
	top: calc(var(--tl-year-size) / 2);
	left: 50%;
	width: var(--tl-dot);
	height: var(--tl-dot);
	border-radius: 50%;
	background: var(--tl-accent);
	transform: translate(-50%, -50%);
	z-index: 1;
	pointer-events: none;
}

/* ---------- Jahreszahl ---------- */
.pci-timeline .pci-timeline__year {
	font-size: var(--tl-year-size);
	line-height: 1;
	color: var(--tl-accent);
	font-weight: 400;
}

/* ---------- Inhalt ---------- */
.pci-timeline .pci-timeline__icon {
	margin-bottom: 1.5rem;
}

.pci-timeline .pci-timeline__icon img {
	display: block;
	width: auto;
	height: var(--tl-icon-size);
}

.pci-timeline .pci-timeline__title {
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--body-2);
	font-weight: 600;
	line-height: 1.35;
	color: var(--tl-accent);
}

.pci-timeline .pci-timeline__text {
	font-size: var(--wp--preset--font-size--body-1);
	color: #FEFEFE;
	line-height: 1.8;
	letter-spacing: 0.02em;
}

/* ---------- Wechsel links/rechts ---------- */

/* Ungerade Einträge: Jahreszahl links, Inhalt rechts */
.pci-timeline .pci-timeline__item:nth-child(odd) .pci-timeline__year {
	grid-column: 1;
	text-align: right;
}
.pci-timeline .pci-timeline__item:nth-child(odd) .pci-timeline__content {
	grid-column: 2;
	text-align: left;
}

/* Gerade Einträge: Inhalt links, Jahreszahl rechts */
.pci-timeline .pci-timeline__item:nth-child(even) .pci-timeline__year {
	grid-column: 2;
	text-align: left;
}
.pci-timeline .pci-timeline__item:nth-child(even) .pci-timeline__content {
	grid-column: 1;
	text-align: right;
}
.pci-timeline .pci-timeline__item:nth-child(even) .pci-timeline__icon img {
	margin-left: auto;
}

/* ---------- Mobil: eine Spalte, Linie links ---------- */
@media (max-width: 781px) {
	.pci-timeline {
		--tl-year-size: 2.25rem;
		--tl-dot: 18px;
		--tl-item-gap: 4.5rem;
		--tl-dot-x: 10px; /* Abstand vom linken Rand bis zur Linie */
	}

	.pci-timeline .pci-timeline__item {
		grid-template-columns: 1fr;
		row-gap: 2.5rem;
		padding-left: calc(var(--tl-dot-x) + 1.75rem);
	}

	.pci-timeline .pci-timeline__item::before,
	.pci-timeline .pci-timeline__item::after,
	.pci-timeline .pci-timeline__item:nth-last-child(1 of .pci-timeline__item) .pci-timeline__content::after {
		left: var(--tl-dot-x);
	}

	.pci-timeline .pci-timeline__item:nth-child(n) .pci-timeline__year {
		grid-column: 1;
		grid-row: 1;
		text-align: left;
	}

	.pci-timeline .pci-timeline__item:nth-child(n) .pci-timeline__content {
		grid-column: 1;
		grid-row: 2;
		text-align: left;
	}

	.pci-timeline .pci-timeline__item:nth-child(even) .pci-timeline__icon img {
		margin-left: 0;
	}
}