/* SoHG Timeline — mirrors the original hand-built Elementor timeline on
   Our Origins & History: two columns split by a hairline, right-hand entries
   staggered down, a connector line + marker reaching the center line. */

.sohg-tl {
	--sohg-tl-offset: 183px;
	--sohg-tl-gutter: 50px;
	--sohg-tl-rule-width: 475px;
	--sohg-tl-center: #00000026;
	--sohg-tl-accent: var(--e-global-color-astglobalcolor0, var(--ast-global-color-0));
	--sohg-tl-icon: 8px;
	--sohg-tl-reach: calc(var(--sohg-tl-gutter) + 5px); /* connector overshoots the gutter so the marker sits on the center line */
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.sohg-tl__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sohg-tl__item--left {
	align-items: flex-end;
	text-align: right;
	padding-right: var(--sohg-tl-gutter);
	border-right: 1px solid var(--sohg-tl-center);
}

.sohg-tl__item--right {
	align-items: flex-start;
	text-align: left;
	padding-left: var(--sohg-tl-gutter);
	margin-top: var(--sohg-tl-offset);
}

.sohg-tl .sohg-tl__year,
.sohg-tl .sohg-tl__text {
	margin: 0;
}

.sohg-tl__rule {
	display: flex;
	align-items: center;
	width: var(--sohg-tl-rule-width);
	max-width: calc(100% + var(--sohg-tl-reach));
	padding-block: 5px;
	margin-bottom: 25px;
}

.sohg-tl__item--left .sohg-tl__rule {
	margin-right: calc(var(--sohg-tl-reach) * -1);
}

.sohg-tl__item--right .sohg-tl__rule {
	flex-direction: row-reverse;
	margin-left: calc(var(--sohg-tl-reach) * -1);
}

.sohg-tl__line {
	flex: 1 1 auto;
	border-top: 1px solid var(--sohg-tl-accent);
}

.sohg-tl__marker {
	display: inline-flex;
	flex: none;
	font-size: var(--sohg-tl-icon);
	line-height: 1;
	color: var(--sohg-tl-accent);
}

.sohg-tl__marker svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

@media (max-width: 1024px) {
	.sohg-tl {
		--sohg-tl-reach: calc(var(--sohg-tl-gutter) + 4px);
	}
}

/* Mobile: single centered column, entries separated by a bottom hairline. */
@media (max-width: 767px) {
	.sohg-tl {
		grid-template-columns: 1fr;
	}

	.sohg-tl__item--left,
	.sohg-tl__item--right {
		align-items: center;
		text-align: center;
		margin-top: 0;
		padding: 50px 25px 40px;
		border-right: 0;
		border-bottom: 1px solid var(--sohg-tl-center);
	}

	/* Original layout: left entries' padding had no sides, right entries' divider used the accent color. */
	.sohg-tl__item--left {
		padding-inline: 0;
	}

	.sohg-tl__item--right {
		border-bottom-color: var(--sohg-tl-accent);
	}

	.sohg-tl__item .sohg-tl__rule {
		width: auto;
		margin: 0;
		padding-block: 10px;
	}

	.sohg-tl__line {
		display: none;
	}
}