/* =========================================================
   Timeline (shared by projects + biography + awards)
   - Each item spans the full width with two columns:
     media column + text column, separated by the central spine.
   - Items alternate which column the media sits in.
   - Year markers act as scroll anchors for the tabs nav.
   ========================================================= */

:root {
	--timeline-brand: #8B1A1A;
	--timeline-line: #8B1A1A;
	--timeline-text: #1f1f1f;
	--timeline-muted: #666;
	--timeline-spine: 120px;
	--timeline-col-gap: 60px;
	/* Height of the site's sticky header — adjust to your header. */
	--header-offset: 130px;
}

.timeline {
	display: grid;
	grid-template-columns: 1fr var(--timeline-spine) 1fr;
	row-gap: 40px;
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0 60px;
}

/* Central spine line */
.timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	background: #B71F39;
	z-index: 0;
}

/* -------- Year / range pill (row marker) -------- */
.timeline__year {
	grid-column: 2;
	justify-self: center;
	align-self: center;
	background: #fff;
	color: #B71F39;
	border: 1px solid #B71F39;
	font-weight: 500;
	font-size: 28px;
	padding: 10px 20px;
	border-radius: 4px;
	text-align: center;
	z-index: 2;
	min-width: 70px;
	line-height: 1.2;
	scroll-margin-top: calc(var(--header-offset) + 20px);
}

.timeline__year--range {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 14px;
}

.timeline__year--range .timeline__year-sep {
	opacity: 0.7;
	line-height: 1;
}

/* -------- Inline per-item marker (awards + biography) --------
   Same pill look as .timeline__year, but lives *inside* each item as its
   last child and sits centred on the spine, vertically aligned to the item. */
.timeline__marker {
	grid-column: 2;
	/* Pin to the first row — the pill is the last child in the DOM, so without
	   this the grid auto-placement cursor (already past col 2) wraps it below. */
	grid-row: 1;
	justify-self: center;
	align-self: center;
	background: #fff;
	color: #B71F39;
	border: 1px solid #B71F39;
	font-weight: 500;
	font-size: 28px;
	padding: 10px 20px;
	border-radius: 4px;
	text-align: center;
	z-index: 2;
	min-width: 70px;
	line-height: 1.2;
	white-space: nowrap;
}

/* Stacked year-range pill (biography) — start year over dash over end year. */
.timeline__marker--range {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 16px;
	white-space: normal;
	line-height: 1.1;
}

.timeline__marker--range .timeline__marker-sep {
	opacity: 0.7;
	line-height: 1;
}

/* -------- Item: spans full row, inner grid for split layout -------- */
.timeline__item {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr var(--timeline-spine) 1fr;
	align-items: start;
	z-index: 1;
	position: relative;
}

.timeline__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-self: center; /* anchor every column to the top of its grid row */
	margin-top: 0;
	padding-top: 0;
}

/* Place columns by DOM order — template-parts render them in visual order.
   Normal item: media (col 1), text (col 3).
   Reverse item: text (col 1), media (col 3). */
.timeline__item .timeline__col:nth-child(1) {
	grid-column: 1;
	padding-right: var(--timeline-col-gap);
	padding-left: 0;
}

.timeline__item .timeline__col:nth-child(2) {
	grid-column: 3;
	padding-left: var(--timeline-col-gap);
	padding-right: 0;
}

/* Kill any inherited top margins from h-tags etc. */
.timeline__col > :first-child {
	margin-top: 0;
}
.timeline__title {
	margin-top: 0;
}

/* -------- Media -------- */
.timeline__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

/* -------- Text -------- */
.timeline__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--timeline-text);
}

.timeline__excerpt,
.timeline__content {
	font-size: 18px;
	line-height: 1.6;
	color: #111;
}

.timeline__content p { margin: 0 0 0.8em; }

/* -------- Button -------- */
.timeline__btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: var(--timeline-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 3px;
	transition: background 0.2s ease;
}

.timeline__btn:hover { background: #6e1414; color: #fff; }
.timeline__btn svg { transition: transform 0.2s ease; }
.timeline__btn:hover svg { transform: translateX(3px); }

.timeline--empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--timeline-muted);
}

/* =========================================================
   Sticky tab navigation
   ========================================================= */

/*
 * Sticky-with-stop: the tabs' Elementor Shortcode widget is made position:sticky
 * so it sticks within its parent container (which also holds the timeline) and
 * scrolls away once the section ends — instead of floating over content below.
 *
 * Requirement: turn OFF Elementor Pro's own "Sticky" Motion Effect on this
 * widget (the two conflict). No CSS class needed — :has() targets the right
 * widget. The parent container must not use overflow:hidden, or sticky breaks.
 */
.elementor-widget.elementor-widget-shortcode:has(.timeline-tabs) {
	position: sticky;
	top: var(--header-offset, 130px);
	z-index: 10;
	align-self: stretch;
}

.timeline-tabs {
	z-index: 10;
	background: rgb(255 255 255);
	padding: 16px 0;
	border: 1px solid #B71F39;
	border-radius: 5px;
	overflow: hidden;
}

/* Back-compat: if Elementor's own sticky is left on, keep the bar full width. */
.elementor-sticky--effects .timeline-tabs {
	width: 100%;
}

.timeline-tabs__inner {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

body button.timeline-tabs__btn {
	font: inherit;
	background: #f3f3f3;
	color: var(--timeline-text);
	border: 0;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s ease;
	white-space: nowrap;
	cursor: pointer;
}

.timeline-tabs__btn:hover {
	border-color: #B71F39;
	color: #B71F39;
}

.timeline-tabs__btn.is-active {
	background: #B71F39;
	border-color: #B71F39;
	color: #fff;
}

/* =========================================================
   Tablet (769–1100px): tighten the spine so two columns still fit
   ========================================================= */
@media (max-width: 1100px) and (min-width: 769px) {
	.timeline {
		--timeline-spine: 84px;
		--timeline-col-gap: 32px;
	}

	.timeline__title { font-size: 26px; }

	.timeline__excerpt,
	.timeline__content { font-size: 16px; }

	.timeline__year,
	.timeline__marker { font-size: 22px; }
}

/* =========================================================
   Mobile (≤768px): full-width single column.
   Spine is dropped; a horizontal date chip leads every item,
   then the image, then the title + text — same order on every
   item regardless of which side it alternates to on desktop.
   ========================================================= */
@media (max-width: 768px) {
	.timeline {
		display: flex;
		flex-direction: column;
		gap: 28px;
		max-width: 100%;
		padding: 24px 0 40px;
	}

	/* Drop the central spine entirely on mobile. */
	.timeline::before { content: none; }

	/* Row markers (single year / range) → left-aligned date chip heading a group. */
	.timeline__year,
	.timeline__year--range {
		grid-column: auto;
		flex-direction: row;
		align-self: flex-start;
		justify-self: start;
		gap: 6px;
		min-width: 0;
		margin: 0;
		padding: 6px 12px;
		font-size: 15px;
	}

	/* Each item: single-column stack. */
	.timeline__item,
	.timeline__item--reverse {
		grid-column: auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	/* Reset the desktop two-column padding / placement (matches its specificity). */
	.timeline__item .timeline__col:nth-child(1),
	.timeline__item .timeline__col:nth-child(2) {
		grid-column: auto;
		padding: 0;
	}

	.timeline__col {
		align-self: stretch;
		gap: 10px;
	}

	/* Consistent visual order on every item: date chip → image → title + text. */
	.timeline__marker { order: -1; }
	.timeline__col--media { order: 1; }
	.timeline__col--text { order: 2; }

	/* Inline marker (awards / biography) → horizontal date chip at the top. */
	.timeline__marker,
	.timeline__marker--range {
		grid-column: auto;
		grid-row: auto;
		flex-direction: row;
		align-self: flex-start;
		justify-self: start;
		gap: 6px;
		min-width: 0;
		padding: 6px 12px;
		font-size: 15px;
		white-space: nowrap;
	}

	.timeline__media img { border-radius: 4px; }

	.timeline__title { font-size: 20px; line-height: 1.3; }
	.timeline__excerpt,
	.timeline__content { font-size: 15px; line-height: 1.65; }

	/* Sticky tabs: horizontal scroll, slightly tighter. */
	.timeline-tabs { padding: 12px 0; }
	.timeline-tabs__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding: 0 16px 4px;
		-webkit-overflow-scrolling: touch;
	}
	.timeline-tabs__btn { padding: 10px 16px; }
}