/* =================================================================
   HPC Timeline Widget – nur Layout, keine Farben/Fonts (Elementor)
   ================================================================= */

.hpc-timeline {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 0;
}

/* Scroll-animierte Linie (per JS erzeugt) */
.hpc-timeline__thread {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	z-index: 1;
	pointer-events: none;
}

/* Lead-in: gestrichelte Linie vor erstem Kreis */
.hpc-timeline__thread--lead-in {
	-webkit-mask-image: repeating-linear-gradient(
		to bottom,
		black 0,
		black 8px,
		transparent 8px,
		transparent 20px
	);
	mask-image: repeating-linear-gradient(
		to bottom,
		black 0,
		black 8px,
		transparent 8px,
		transparent 20px
	);
}

/* Einzelner Eintrag — 3 Spalten, 2 Reihen */
.hpc-timeline__entry {
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	grid-template-rows: auto auto;
	column-gap: 80px;
	row-gap: 0;
	position: relative;
	margin-bottom: 80px;
}

.hpc-timeline__entry:last-child {
	margin-bottom: 0;
}

/* --left: Bild + Text links, Kreis Mitte */
.hpc-timeline__entry--left .hpc-timeline__media {
	grid-column: 1;
	grid-row: 1;
}

.hpc-timeline__entry--left .hpc-timeline__content {
	grid-column: 1;
	grid-row: 2;
}

.hpc-timeline__entry--left .hpc-timeline__year {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	transform: translateY(calc(50% - 0.25em));
}

/* --right: Bild + Text rechts, Kreis Mitte */
.hpc-timeline__entry--right .hpc-timeline__media {
	grid-column: 3;
	grid-row: 1;
}

.hpc-timeline__entry--right .hpc-timeline__content {
	grid-column: 3;
	grid-row: 2;
}

.hpc-timeline__entry--right .hpc-timeline__year {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	transform: translateY(calc(50% - 0.25em));
}

/* Jahreszahl-Kreis */
.hpc-timeline__year {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background-color: transparent;
	border: 2px solid currentColor;
	z-index: 2;
	position: relative;
	justify-self: center;
}

/* Gefuellter Kreis (per JS gesetzt) */
.hpc-timeline__year--filled {
	color: var(--e-global-color-1e65a15);
}

/* Bild */
.hpc-timeline__media {
	overflow: hidden;
	padding-right: 20px;
}

.hpc-timeline__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Content */
.hpc-timeline__content {
	text-align: left;
	padding: 16px 20px 0 0;
}

.hpc-timeline__eyebrow {
	display: block;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.hpc-timeline__heading {
	margin: 0 0 12px;
}

.hpc-timeline__text {
	margin: 0;
}

/* Slide-toward-line Animation */
.hpc-timeline__fade {
	opacity: 0;
}

.hpc-timeline__entry--left .hpc-timeline__fade {
	transform: translateX(-15px);
}

.hpc-timeline__entry--right .hpc-timeline__fade {
	transform: translateX(15px);
}

.hpc-timeline__entry--left .hpc-timeline__fade--visible,
.hpc-timeline__entry--right .hpc-timeline__fade--visible {
	opacity: 1;
	transform: translateX(0);
}

/* Statische Fallback-Linien (ohne JS) */
.hpc-timeline__entry::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: -80px;
	width: 2px;
	transform: translateX(-50%);
	z-index: 1;
}

.hpc-timeline__entry:first-child::before {
	top: 0;
}

.hpc-timeline__entry:last-child::before {
	bottom: 0;
}

.hpc-timeline__entry:only-child::before {
	display: none;
}

/* Wenn JS aktiv: statische Linien ausblenden */
.hpc-timeline--animated .hpc-timeline__entry::before {
	display: none !important;
}

/* =================================================================
   Responsive — Mobile (single column, Linie links)
   ================================================================= */

@media (max-width: 767px) {
	.hpc-timeline__thread {
		left: 30px !important;
		transform: none !important;
	}

	.hpc-timeline__entry,
	.hpc-timeline__entry--left,
	.hpc-timeline__entry--right {
		grid-template-columns: 60px 1fr;
		grid-template-rows: auto auto auto;
		align-items: start;
		column-gap: 16px;
		row-gap: 0;
		margin-bottom: 40px;
	}

	.hpc-timeline__entry--left .hpc-timeline__year,
	.hpc-timeline__entry--right .hpc-timeline__year {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: start;
		transform: none;
	}

	.hpc-timeline__entry--left .hpc-timeline__media,
	.hpc-timeline__entry--right .hpc-timeline__media {
		grid-column: 2;
		grid-row: 1;
	}

	.hpc-timeline__entry--left .hpc-timeline__content,
	.hpc-timeline__entry--right .hpc-timeline__content {
		grid-column: 2;
		grid-row: 2;
	}

	.hpc-timeline__year {
		width: 52px;
		height: 52px;
	}

	.hpc-timeline__entry--left .hpc-timeline__fade,
	.hpc-timeline__entry--right .hpc-timeline__fade {
		transform: translateY(15px);
	}

	.hpc-timeline__entry--left .hpc-timeline__fade--visible,
	.hpc-timeline__entry--right .hpc-timeline__fade--visible {
		transform: translateY(0);
	}
}