/**
 * About Us page journey timeline.
 *
 * Loaded only on the About Us template. Colours come from the palette already
 * used across the theme (navy #10233f, orange #ff6214, muted #4f5d6e),
 * declared once here as tokens.
 *
 * Layout: a decorative spine with cards beside it. On wide screens the
 * alternating variant puts the spine down the middle; the single-column variant
 * and every narrow screen keep it on the left. Rows never interleave, so a card
 * can grow to any height without colliding with its neighbour.
 */

.about-timeline {
	--ks-tl-primary: #10233f;
	--ks-tl-accent: #ff6214;
	--ks-tl-muted: #4f5d6e;
	--ks-tl-surface: #fff;
	--ks-tl-border: #e1e8f2;
	--ks-tl-track: #e4eaf3;
	--ks-tl-connector: #ccd8e7;
	--ks-tl-canvas: #f6f8fb;
	--ks-tl-overlay: 0.92;
	--ks-tl-marker: 2.8rem;
	--ks-tl-marker-top: 1.5rem;
	--ks-tl-gutter: 3.25rem;
	--ks-tl-spine: 4px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	background-color: var(--ks-tl-canvas);
}

/* Faint steel hatch, matching the milestone band on the homepage. */
.about-timeline::before {
	content: "";
	position: absolute;
	z-index: -3;
	inset: 0;
	background-image:
		repeating-linear-gradient(135deg, rgba(16, 35, 63, 0.035) 0 2px, rgba(16, 35, 63, 0) 2px 13px),
		radial-gradient(circle at 88% 0%, rgba(255, 98, 20, 0.06), rgba(255, 98, 20, 0) 42%);
}

.about-timeline__backdrop {
	position: absolute;
	z-index: -2;
	inset: 0;
	background-position: center;
	background-size: cover;
}

.about-timeline__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(246, 248, 251, var(--ks-tl-overlay)) 0%, rgba(239, 243, 248, var(--ks-tl-overlay)) 100%);
}

.about-timeline__shell {
	position: relative;
	z-index: 1;
	width: min(100% - 32px, 1180px);
	margin: 0 auto;
}

.about-timeline__header {
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
	text-align: center;
}

.about-timeline__title {
	margin: 0;
	color: var(--ks-tl-primary);
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.about-timeline__title::after {
	content: "";
	display: block;
	width: 3.25rem;
	height: 4px;
	margin: 0.85rem auto 0;
	border-radius: 4px;
	background: var(--ks-tl-accent);
}

.about-timeline__subtitle {
	max-width: 60ch;
	margin: 1rem auto 0;
	color: var(--ks-tl-muted);
	font-size: 1.02rem;
	line-height: 1.65;
	text-align: center;
}

.about-timeline__body {
	position: relative;
}

/* Spine
--------------------------------------------- */
.about-timeline__spine {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--ks-tl-spine);
	border-radius: var(--ks-tl-spine);
	background: var(--ks-tl-track);
}

/*
 * Full by default so the spine reads as complete without JavaScript. The
 * scroll-linked variant below only applies once the script has taken over.
 */
.about-timeline__spine-fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, var(--ks-tl-accent) 0%, #ff8b4d 100%);
	transform: scaleY(1);
	transform-origin: top center;
}

.about-timeline__body.is-tracking .about-timeline__spine-fill {
	transform: scaleY(var(--ks-tl-progress, 0));
}

.about-timeline__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-timeline__item {
	position: relative;
	box-sizing: border-box;
}

.about-timeline__item + .about-timeline__item {
	margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Marker
--------------------------------------------- */
.about-timeline__marker {
	position: absolute;
	top: var(--ks-tl-marker-top);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ks-tl-marker);
	height: var(--ks-tl-marker);
	border: 2px solid var(--ks-tl-border);
	border-radius: 50%;
	background: var(--ks-tl-surface);
	box-shadow: 0 6px 16px rgba(16, 35, 63, 0.1);
	color: var(--ks-tl-primary);
	font-size: 1.05rem;
	transition:
		border-color 0.35s var(--ks-ease, ease),
		background-color 0.35s var(--ks-ease, ease),
		color 0.35s var(--ks-ease, ease);
}

/* Reached by the scroll position, or always on when the script is not running. */
.about-timeline__item.is-reached .about-timeline__marker {
	border-color: var(--ks-tl-accent);
	color: var(--ks-tl-accent);
}

.about-timeline__item.is-highlighted .about-timeline__marker {
	border-color: var(--ks-tl-accent);
	background: var(--ks-tl-accent);
	color: #fff;
}

/* The line bridging the marker and the card. */
.about-timeline__item::after {
	content: "";
	position: absolute;
	top: calc(var(--ks-tl-marker-top) + (var(--ks-tl-marker) / 2) - 1px);
	width: calc(var(--ks-tl-gutter) - (var(--ks-tl-marker) / 2));
	height: 2px;
	background: var(--ks-tl-connector);
}

/* Card
--------------------------------------------- */
.about-timeline__card {
	position: relative;
	padding: clamp(1.4rem, 2vw, 1.85rem);
	border: 1px solid var(--ks-tl-border);
	border-radius: 1.15rem;
	background: var(--ks-tl-surface);
	box-shadow: 0 18px 34px rgba(16, 35, 63, 0.07);
	transition:
		transform 0.3s var(--ks-ease, ease),
		box-shadow 0.3s var(--ks-ease, ease);
}

.about-timeline__card:hover {
	transform: translateY(var(--ks-lift-sm, -4px));
	box-shadow: var(--ks-shadow-hover, 0 18px 40px rgba(16, 35, 63, 0.14));
}

/* Notch pointing back at the spine. */
.about-timeline__card::before {
	content: "";
	position: absolute;
	top: calc(var(--ks-tl-marker-top) + (var(--ks-tl-marker) / 2) - 7px);
	width: 12px;
	height: 12px;
	border: 1px solid var(--ks-tl-connector);
	background: var(--ks-tl-surface);
	transform: rotate(45deg);
}

.about-timeline__year {
	margin: 0;
	color: var(--ks-tl-accent);
	font-size: clamp(1.45rem, 2.3vw, 1.95rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-align: left;
}

.about-timeline__tag {
	margin: 0.45rem 0 0;
	color: var(--ks-tl-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
}

.about-timeline__card-title {
	margin: 0.6rem 0 0;
	color: var(--ks-tl-primary);
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.about-timeline__media {
	overflow: hidden;
	margin-top: 1rem;
	border-radius: 0.75rem;
	background: var(--ks-tl-track);
}

.about-timeline__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.about-timeline__text {
	margin: 0.75rem 0 0;
	color: var(--ks-tl-muted);
	font-size: 0.97rem;
	line-height: 1.7;
	text-align: left;
}

.about-timeline__link {
	display: inline-flex;
	align-items: center;
	margin-top: 0.9rem;
	border-bottom: 1px solid transparent;
	color: var(--ks-tl-accent);
	font-size: 0.93rem;
	font-weight: 700;
	text-decoration: none;
}

.about-timeline__link:hover,
.about-timeline__link:focus-visible {
	border-bottom-color: currentColor;
}

/* Single column: spine on the left. Also the shared base every narrow screen
   falls back to, so the alternating rules below only add the two-sided case. */
.about-timeline__spine {
	left: calc((var(--ks-tl-marker) / 2) - (var(--ks-tl-spine) / 2));
}

.about-timeline__item {
	padding-left: calc(var(--ks-tl-marker) + var(--ks-tl-gutter) - (var(--ks-tl-marker) / 2));
}

.about-timeline__marker {
	left: 0;
}

.about-timeline__item::after {
	left: var(--ks-tl-marker);
}

.about-timeline__card::before {
	left: -7px;
	border-width: 0 0 1px 1px;
}

/* Alternating: spine down the middle, cards either side.
--------------------------------------------- */
@media screen and (min-width: 62em) {

	.about-timeline--alternating .about-timeline__spine {
		left: calc(50% - (var(--ks-tl-spine) / 2));
	}

	.about-timeline--alternating .about-timeline__item {
		width: 50%;
		padding-left: 0;
	}

	.about-timeline--alternating .about-timeline__item--left {
		padding-right: var(--ks-tl-gutter);
	}

	.about-timeline--alternating .about-timeline__item--right {
		margin-left: 50%;
		padding-left: var(--ks-tl-gutter);
	}

	/*
	 * Each row keeps its own vertical band rather than being pulled up beside
	 * the previous one: a negative margin would tighten the zig-zag, but a card
	 * that grows (a long description, an image) would then collide with its
	 * neighbour. The gap opposite each card is the cost of never overlapping.
	 */

	.about-timeline--alternating .about-timeline__item--left .about-timeline__marker {
		right: calc(0px - (var(--ks-tl-marker) / 2));
		left: auto;
	}

	.about-timeline--alternating .about-timeline__item--right .about-timeline__marker {
		left: calc(0px - (var(--ks-tl-marker) / 2));
	}

	.about-timeline--alternating .about-timeline__item--left::after {
		right: calc(var(--ks-tl-marker) / 2);
		left: auto;
	}

	.about-timeline--alternating .about-timeline__item--right::after {
		left: calc(var(--ks-tl-marker) / 2);
	}

	.about-timeline--alternating .about-timeline__item--left .about-timeline__card::before {
		right: -7px;
		left: auto;
		border-width: 1px 1px 0 0;
	}

	.about-timeline--alternating .about-timeline__item--right .about-timeline__card::before {
		left: -7px;
		border-width: 0 0 1px 1px;
	}

	/* Right-align the left column so both columns read inward to the spine. */
	.about-timeline--alternating .about-timeline__item--left .about-timeline__year,
	.about-timeline--alternating .about-timeline__item--left .about-timeline__tag,
	.about-timeline--alternating .about-timeline__item--left .about-timeline__card-title,
	.about-timeline--alternating .about-timeline__item--left .about-timeline__text {
		text-align: right;
	}

	.about-timeline--alternating .about-timeline__item--left .about-timeline__card {
		text-align: right;
	}
}

@media screen and (max-width: 37.5em) {

	.about-timeline {
		--ks-tl-marker: 2.4rem;
		--ks-tl-gutter: 2rem;
	}

	.about-timeline__shell {
		width: min(100% - 24px, 1180px);
	}
}

/*
 * Section animation switched off in the Customizer: override the theme-wide
 * reveal hook for this section only. The extra attribute selector is what wins
 * on specificity.
 */
.about-timeline[data-ks-no-anim][data-animate],
.about-timeline[data-ks-no-anim] [data-animate] {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {

	.about-timeline__card,
	.about-timeline__marker {
		transition: none;
	}

	.about-timeline__card:hover {
		transform: none;
	}

	/* Never animate the spine: show it complete straight away. */
	.about-timeline__body.is-tracking .about-timeline__spine-fill {
		transform: scaleY(1);
	}
}