/* ==========================================================================
   Widget — History Timeline
   Figma nodes 163:443 (Story Intro) and 164:441 (History Timeline), About
   page. The heading is the shared .o-section-heading, a size up because it
   opens the page; below it, year tabs between << >> arrows, a rail with one
   dot per milestone, and the milestones in a horizontal scroller.
   ========================================================================== */

.o-section--history-timeline {
	--o-timeline-gap: 20px;
	--o-timeline-per-view: 1.15;
	--o-timeline-rule: var(--o-rule-cool);
}

@media (min-width: 768px) {
	.o-section--history-timeline {
		--o-timeline-gap: 32px;
		--o-timeline-per-view: 2;
	}
}

@media (min-width: 1025px) {
	.o-section--history-timeline {
		--o-timeline-gap: 48px;
		--o-timeline-per-view: 3;
	}
}

/* --------------------------------------------------------------------------
   Heading — the page's title, so it runs at display size in bold.
   -------------------------------------------------------------------------- */
.o-section--history-timeline .o-section-heading {
	max-width: 54rem;
	margin-bottom: var(--o-section-y);
}

.o-section--history-timeline .o-section-heading__title {
	margin-top: var(--o-space-md);
	color: var(--o-navy);
	font-size: var(--o-fs-display);
	font-weight: var(--o-fw-bold);
	line-height: var(--o-lh-tight);
	text-transform: uppercase;
}

.o-section--history-timeline .o-section-heading__intro {
	color: var(--o-ink-mist);
}

/* --------------------------------------------------------------------------
   Bar: << arrow, year tabs, >> arrow.
   Placed on explicit columns so the tabs stay centred whether or not the
   arrows are showing.
   -------------------------------------------------------------------------- */
.o-timeline__bar {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 48px;
	align-items: center;
	gap: var(--o-space-md);
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* Nothing is showing without the script - take no room at all. */
.o-timeline:not(.is-enhanced) .o-timeline__bar {
	display: none;
}

.o-timeline__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--o-navy);
	border-radius: 50%;
	background-color: transparent;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: 0.9375rem;
	line-height: 1;
	transition: background-color var(--o-transition), color var(--o-transition), opacity var(--o-transition);
}

.o-timeline__arrow[hidden] {
	display: none;
}

.o-timeline__arrow--prev {
	grid-column: 1;
}

.o-timeline__arrow--next {
	grid-column: 3;
}

.o-timeline__arrow:hover,
.o-timeline__arrow:focus-visible {
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* The global focus ring squares its corners; this one should stay round. */
.o-timeline__arrow:focus-visible {
	border-radius: 50%;
}

/*
 * aria-disabled rather than disabled, so a keyboard user sitting on the
 * arrow keeps their place when the row reaches its end.
 */
.o-timeline__arrow[aria-disabled="true"] {
	opacity: 0.3;
	cursor: default;
}

.o-timeline__arrow[aria-disabled="true"]:hover {
	background-color: transparent;
	color: var(--o-navy);
}

/*
 * Years scroll sideways on their own when there are more than fit, rather
 * than wrapping under the arrows.
 */
.o-timeline__years {
	grid-column: 2;
	display: flex;
	justify-content: safe center;
	gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
	overflow-x: auto;
	scrollbar-width: none;
}

.o-timeline__years::-webkit-scrollbar {
	display: none;
}

.o-timeline__years[hidden] {
	display: none;
}

.o-timeline__year {
	flex: 0 0 auto;
	padding: 10px 0;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--o-ink-mist);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.094em;
	line-height: 1.25;
	text-transform: uppercase;
	transition: color var(--o-transition), border-color var(--o-transition);
}

.o-timeline__year:hover,
.o-timeline__year:focus-visible {
	color: var(--o-navy);
}

.o-timeline__year[aria-pressed="true"] {
	border-bottom-color: var(--o-orange);
	color: var(--o-navy);
}

/* --------------------------------------------------------------------------
   Track — a native horizontal scroller, snapping card by card.
   -------------------------------------------------------------------------- */
.o-timeline__track {
	display: flex;
	gap: var(--o-timeline-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.o-timeline__track:focus-visible {
	outline-offset: 4px;
}

.o-timeline__item {
	--o-timeline-accent: var(--o-orange);

	position: relative;
	flex: 0 0 calc((100% - (var(--o-timeline-per-view) - 1) * var(--o-timeline-gap)) / var(--o-timeline-per-view));
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

.o-timeline__item[hidden] {
	display: none;
}

.o-timeline__item--teal {
	--o-timeline-accent: var(--o-teal);
}

.o-timeline__item--navy {
	--o-timeline-accent: var(--o-navy);
}

/*
 * The rail. Each card draws its own stretch of line, reaching back across the
 * gap to the card before, so the line scrolls with the cards and always has a
 * dot centred over each one. Reaching back rather than forward matters: the
 * first card's overhang lands before the scroller's start, which is clipped,
 * where the last card's would have added a gap's worth of phantom scrolling.
 */
.o-timeline__item::before {
	content: "";
	position: absolute;
	top: 8px;
	left: calc(-1 * var(--o-timeline-gap));
	width: calc(100% + var(--o-timeline-gap));
	height: 2px;
	background-color: var(--o-timeline-rule);
}

.o-timeline__dot {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 auto clamp(2rem, 1rem + 3vw, 4rem);
	border-radius: 50%;
	background-color: var(--o-timeline-accent);
}

.o-timeline__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--o-ice);
}

.o-timeline__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.o-timeline__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: var(--o-space-lg);
}

.o-timeline__date {
	margin: 0;
	color: var(--o-timeline-accent);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: clamp(2rem, 1.6rem + 1.1vw, 2.5rem);
	line-height: 1.1;
}

.o-timeline__title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.25;
	text-transform: uppercase;
}

.o-timeline__location {
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
}

.o-timeline__text {
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body);
	line-height: 1.625;
}

@media (prefers-reduced-motion: reduce) {
	.o-timeline__arrow,
	.o-timeline__year {
		transition: none;
	}
}