/* ==========================================================
   History Timeline — .history-timeline
   ========================================================== */

.history-timeline {
	background: #ede8e3;
	padding: 80px 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	overflow: hidden;
}

/* ── Header: heading + prev/next pagination ── */

.history-timeline__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	gap: 16px;
	flex-wrap: wrap;
}

.history-timeline__heading {
	font-family: 'Gotham', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--Brand-Colors-Text-Colors-Charcoal, #37373e);
	margin: 0;
	white-space: nowrap;
}

/* Pagination: white rounded container wrapping both buttons */

.history-timeline__pagination {
	display: flex;
	gap: 24px;
	align-items: center;
	background: #ffffff;
	padding: 4px;
	border-radius: 8px;
	flex-shrink: 0;
}

.history-timeline__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--brand-colors-background-section-colors-off-white, #f7f7f7);
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.2s ease;
	flex-shrink: 0;
	padding: 0;
}

.history-timeline__btn:hover:not(:disabled) {
	background: var(--brand-colors-strokes-divider-borders-pale-grey, #eaeaea);
}

.history-timeline__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Track wrapper + spine ── */

.history-timeline__track-wrapper {
	position: relative;
	height: 820px;
}

/* Horizontal spine — sits at 50% of wrapper height, behind the badges */

.history-timeline__spine {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: #dad2cb;
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
}

/* Horizontal scrollable track — fills the wrapper exactly */

.history-timeline__track {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 20px;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	padding: 0 24px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	align-items: stretch;
}

.history-timeline__track::-webkit-scrollbar {
	display: none;
}

/* ── Each milestone item ── */

.history-timeline__item {
	flex: 0 0 300px;
	display: grid;
	/*  Row 1 (above): grows to fill half the track height
	    Row 2 (badge): auto — sits exactly on the spine line
	    Row 3 (below): grows to fill the other half          */
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
}

/* ── Above slot: card content for even (.--above) items ── */

.history-timeline__slot-above {
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* card sits flush against the badge */
	padding-bottom: 16px;
	width: 100%;
}

/* ── Below slot: card content for odd (.--below) items ── */

.history-timeline__slot-below {
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* card sits flush against the badge */
	padding-top: 16px;
	width: 100%;
}

/* ── Year badge — always in the middle grid row (on the spine) ── */

.history-timeline__year-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 61px;
	width: 61px;
	align-self: center; /* center badge in its auto row */
	padding: 8px 12px;
	background: var(--Brand-Colors-Primary-Colors-Deep-Red, #be1e2d);
	flex-shrink: 0;
	position: relative;
	z-index: 2; /* sits on top of the spine line */
}

.history-timeline__year-badge span {
	font-family: 'Gotham', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	color: #ffffff;
	white-space: nowrap;
}

/* ── Milestone card ── */

.history-timeline__card {
	width: 100%;
	background: #ffffff;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

.history-timeline__card-image {
	width: 100%;
	overflow: hidden;
	margin: 0;
	flex-shrink: 0;
}

.history-timeline__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.history-timeline__card-text {
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--Brand-Colors-Text-Colors-Charcoal, #37373e);
	text-align: center;
	margin: 0;
	width: 100%;
}

/* ── Mobile: horizontal slider, heading + pagination stacked centred ── */

@media (max-width: 767px) {

	/* Section spacing matches Figma mobile (py-80 gap-48) */
	.history-timeline {
		padding: 80px 0;
		gap: 48px;
	}

	/* Header: stack heading above pagination, both centred */
	.history-timeline__header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 24px;
		padding: 0 16px;
	}

	.history-timeline__heading {
		font-size: 32px;
		white-space: normal;
		text-align: center;
	}

	/* Track wrapper: natural height (no fixed 820px) */
	.history-timeline__track-wrapper {
		height: auto;
	}

	/* Hide spine — not used in mobile slider */
	.history-timeline__spine {
		display: none;
	}

	/* Track: keep horizontal scroll — 300px cards + 14% next-card peek */
	.history-timeline__track {
		flex-direction: row;
		height: auto;
		overflow-x: auto;
		overflow-y: visible;
		gap: 20px;
		padding: 0 16px;
		align-items: flex-start;
	}

	/* Items: flex-col (badge on top, card below) — same width as desktop */
	.history-timeline__item {
		flex: 0 0 300px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: center;
		/* reset desktop grid */
		grid-template-rows: unset;
	}

	/* Slots: natural height, no padding offsets needed */
	.history-timeline__slot-above,
	.history-timeline__slot-below {
		padding: 0;
		justify-content: flex-start;
		width: 100%;
	}

	/* Above items: badge first, then card (from slot-above) */
	.history-timeline__item--above .history-timeline__year-badge { order: 1; }
	.history-timeline__item--above .history-timeline__slot-above  { order: 2; }
	.history-timeline__item--above .history-timeline__slot-below  { display: none; }

	/* Below items: badge first, then card (from slot-below) */
	.history-timeline__item--below .history-timeline__year-badge { order: 1; }
	.history-timeline__item--below .history-timeline__slot-above  { display: none; }
	.history-timeline__item--below .history-timeline__slot-below  { order: 2; }
}

/* ── Desktop heading size ── */

@media (min-width: 768px) {
	.history-timeline__heading {
		font-size: 48px;
	}
}

/* ==========================================================
   V2 — Vertical timeline
   ========================================================== */

.history-timeline--v2 {
	padding: 80px 60px;
	align-items: center;
	gap: 48px;
}

.history-timeline--v2 .history-timeline__heading {
	text-align: center;
	white-space: normal;
}

/* Items wrapper — spine is absolute inside here */

.history-timeline__v2-items {
	position: relative;
	width: 100%;
	max-width: 1152px;
	display: flex;
	flex-direction: column;
}

/* Vertical spine */

.history-timeline__v2-spine {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #dad2cb;
	transform: translateX(-50%);
	border-radius: 1px;
	z-index: 0;
	pointer-events: none;
}

/* Each item row */

.history-timeline__v2-item {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
	z-index: 1;
}

/* Right items: reverse so visual order = spacer | badge | connector | card */

.history-timeline__v2-item--right {
	flex-direction: row-reverse;
}

/* Card wrapper — width ensures badge centers on the spine:
   calc(50% - connector(55px) - half-badge(~30px)) */

.history-timeline__v2-card-wrap {
	width: calc(50% - 85px);
	flex-shrink: 0;
}

/* Horizontal connector line between card and year badge */

.history-timeline__v2-connector {
	width: 55px;
	flex-shrink: 0;
	height: 2px;
	background: #dad2cb;
	align-self: center;
}

/* Spacer fills the opposing half */

.history-timeline__v2-spacer {
	flex: 1;
	min-width: 0;
}

/* ── V2 Mobile ── */

@media (max-width: 767px) {

	.history-timeline--v2 {
		padding: 80px 16px;
	}

	.history-timeline--v2 .history-timeline__heading {
		font-size: 32px;
	}

	.history-timeline__v2-items {
		gap: 20px;
	}

	/* Spine: left-aligned, centered on the 61px badge column
	   (section px-16px puts items 16px in; badge center = 30.5px from items edge) */
	.history-timeline__v2-spine {
		left: 30px;
		transform: none;
	}

	/* All items: badge left, card right — no reversing on mobile */
	.history-timeline__v2-item,
	.history-timeline__v2-item--right {
		flex-direction: row;
		align-items: flex-start;
		gap: 55px;
	}

	/* Badge: left column, fixed width, slight top offset to align with card text */
	.history-timeline__v2-item .history-timeline__year-badge {
		order: 1;
		flex-shrink: 0;
		align-self: flex-start;
		margin-top: 15px;
	}

	/* Card: takes remaining width */
	.history-timeline__v2-item .history-timeline__v2-card-wrap {
		order: 2;
		width: auto;
		flex: 1;
		min-width: 0;
	}

	/* Hide desktop-only layout elements */
	.history-timeline__v2-connector,
	.history-timeline__v2-spacer {
		display: none;
	}
}