/**
 * JS Timeline.
 *
 * The story timeline (Figma 21843:8747): a vertical line with gold year pills
 * on it, and an entry at each pill made of a heading, body copy and one or more
 * photos. On desktop the entries alternate — text one side of the line, photos
 * the other; below desktop the line moves to the left edge and every entry
 * stacks in a single column (pill, heading, body, photos).
 *
 * Mirrors the CCI Timeline widget in the sibling repo, including its behaviour
 * (js-timeline.js): the line runs only between the first and last pill rather
 * than the full height of the track, a highlight fill grows down it as the
 * timeline scrolls past, and each entry fades in when it enters view.
 *
 * The media column carries one to three photos and the design gives each count
 * its own arrangement: one photo fills the box, two sit corner to corner on a
 * diagonal, three stagger across it. Every plate is placed as a percentage of
 * the box — width, height, x, y — so an arrangement scales with its column
 * instead of coming apart at a width nobody tested, the same way the Photo
 * Collage widget places its cluster. Four or more falls back to a plain grid:
 * past three the design has nothing to say, and a pile is not a composition.
 *
 * No outer padding is baked in — the Elementor container owns the gutters,
 * consistent with the other widgets.
 */

/* Fill the container even inside a flex parent that would shrink to content. */
.elementor-widget-js_timeline {
	width: 100%;
}

.js-timeline {
	--js-tl-line: var(--js-color-border, #b0bed2);
	--js-tl-line-w: 1px;
	--js-tl-fill-gradient: linear-gradient(180deg, var(--js-color-highlight, #b28b2c) 0%, #d9b45a 100%);
	--js-tl-rail: 80px;
	--js-tl-col-gap: 40px;
	--js-tl-item-gap: 0px;
	--js-tl-text-gap: 40px;
	--js-tl-stack-gap: 24px;
	--js-tl-row-min: 400px;
	--js-tl-media-ratio: 64.231%; /* 334 / 520 — the design's media box. */
	--js-tl-radius: 24px;
	--js-tl-plate-radius: var(--js-tl-radius);
	--js-tl-plate-border: 2px;
	--js-tl-media-bg: #282828;

	/* Set by js-timeline.js from the measured pill positions. */
	--js-tl-line-top: 0px;
	--js-tl-line-length: 0px;
	--js-tl-fill: 0px;

	width: 100%;
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.js-timeline *,
.js-timeline *::before,
.js-timeline *::after {
	box-sizing: border-box;
}

.js-timeline__track {
	position: relative;
}

/* The line itself — first pill to last pill, not the full track. The design
   draws it as a segment per row for the same reason: above the first pill and
   below the last one there is nothing for it to connect. */
.js-timeline__track::before {
	content: "";
	position: absolute;
	top: var(--js-tl-line-top);
	left: 50%;
	width: var(--js-tl-line-w);
	height: var(--js-tl-line-length);
	transform: translateX(-50%);
	background: var(--js-tl-line);
	border-radius: var(--js-tl-line-w);
}

/* The scroll fill. Height comes from JS via --js-tl-fill; at rest it is zero,
   which is the flat line the design shows. */
.js-timeline__progress {
	position: absolute;
	top: var(--js-tl-line-top);
	left: 50%;
	width: var(--js-tl-line-w);
	height: var(--js-tl-fill);
	max-height: var(--js-tl-line-length);
	transform: translateX(-50%);
	background: var(--js-tl-fill-gradient);
	border-radius: var(--js-tl-line-w);
	will-change: height;
	pointer-events: none;
}

.js-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--js-tl-rail) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--js-tl-col-gap);
}

/* The row rhythm is a desktop idea: below the breakpoint an entry is as tall as
   its own content. Scoped to a min-width query rather than unset lower down,
   because Elementor emits a control's desktop value unconditionally and at a
   specificity this stylesheet can't outrank. Same reason every other variable a
   control owns gets its tablet and mobile values from that control. */
@media (min-width: 1025px) {
	.js-timeline__item {
		min-height: var(--js-tl-row-min);
	}
}

.js-timeline__item + .js-timeline__item {
	margin-top: var(--js-tl-item-gap);
}

/* -------- The rail -------- */

.js-timeline__marker {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
}

.js-timeline__year {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	padding: 12px 20px;
	border-radius: 100px;
	background: var(--js-color-highlight, #b28b2c);
	color: var(--js-color-white, #fff);
	font-size: 14px;
	font-weight: 700;
	line-height: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 8px 6px rgba(0, 0, 0, 0.15), 0 4px 2px rgba(0, 0, 0, 0.3);
}

/* -------- Text -------- */

.js-timeline__text {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--js-tl-text-gap);
	min-width: 0;
}

.js-timeline__heading {
	margin: 0;
	color: var(--js-color-primary, #111827);
	font-size: 32px;
	font-weight: 600;
	line-height: 40px;
}

.js-timeline__body {
	color: var(--js-color-text, #475569);
	font-size: var(--js-font-body-lg-size, 18px);
	line-height: var(--js-font-body-lg-line, 28px);
}

.js-timeline__body > *:first-child {
	margin-top: 0;
}

.js-timeline__body > *:last-child {
	margin-bottom: 0;
}

/* -------- Media -------- */

.js-timeline__media {
	grid-column: 3;
	grid-row: 1;
	position: relative;
	min-width: 0;
}

/* The media box's height, as a ratio of its width. padding-top rather than
   aspect-ratio so the absolutely-positioned plates have a resolved height to
   position against — the same reason the Photo Collage does it this way. */
.js-timeline__media::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: var(--js-tl-media-ratio);
}

.js-timeline__plate {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: var(--js-tl-plate-radius);
}

/* Two classes on purpose. Elementor's base stylesheet carries
   `.elementor img { height: auto }` at (0,1,1), which outranks a single class
   and silently defeats object-fit: the box auto-sizes to the file's own aspect,
   so `cover` has nothing to crop against. A portrait photo then overflows the
   plate and anchors to the top — all sky, subjects pushed off the bottom edge —
   and a wide one under-fills and shows the backing through. Nothing about the
   markup looks wrong when it happens, and a harness without Elementor's CSS
   renders it correctly, so it only shows up on a real page. */
.js-timeline .js-timeline__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* One photo: fills the box. The backing colour is what shows through when the
   file's own shape doesn't match the box. */
.js-timeline__media--single .js-timeline__plate {
	inset: 0;
	border-radius: var(--js-tl-radius);
	background: var(--js-tl-media-bg);
}

/* Two photos: corner to corner on a diagonal, each 305.377 x 196.313 in the
   520 x 334 box, the second offset by 214.62 x 137.68. */
.js-timeline__media--pair .js-timeline__plate {
	width: 58.726%;
	height: 58.777%;
	border: var(--js-tl-plate-border) solid var(--js-color-white, #fff);
}

.js-timeline__media--pair .js-timeline__plate:nth-child(1) {
	left: 0;
	top: 0;
	z-index: 1;
}

.js-timeline__media--pair .js-timeline__plate:nth-child(2) {
	left: 41.273%;
	top: 41.222%;
	z-index: 2;
}

/* Three photos: 264 x 170 plates staggered down the box, the middle one behind
   the other two — the arrangement in the 2024 row of the design. */
.js-timeline__media--trio .js-timeline__plate {
	width: 50.769%;
	height: 50.898%;
	border: var(--js-tl-plate-border) solid var(--js-color-white, #fff);
}

.js-timeline__media--trio .js-timeline__plate:nth-child(1) {
	left: 2.692%;
	top: 3.892%;
	z-index: 2;
}

.js-timeline__media--trio .js-timeline__plate:nth-child(2) {
	left: 46.538%;
	top: 19.760%;
	z-index: 1;
}

.js-timeline__media--trio .js-timeline__plate:nth-child(3) {
	left: 21.154%;
	top: 45.210%;
	z-index: 3;
}

/* Four or more: the design stops here, so the overlap is dropped for a grid. */
.js-timeline__media--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.js-timeline__media--grid::before {
	display: none;
}

.js-timeline__media--grid .js-timeline__plate {
	position: static;
	aspect-ratio: 520 / 334;
	border: var(--js-tl-plate-border) solid var(--js-color-white, #fff);
}

/* An odd photo out spans the row rather than leaving a hole beside it. */
.js-timeline__media--grid .js-timeline__plate:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* -------- Alternating rows: text right, photos left -------- */

.js-timeline__item--flip .js-timeline__text {
	grid-column: 3;
}

.js-timeline__item--flip .js-timeline__media {
	grid-column: 1;
}

/* -------- Scroll reveal (text and photos; the pill stays put) -------- */

.js-timeline__text,
.js-timeline__media {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-timeline__item.is-visible .js-timeline__text,
.js-timeline__item.is-visible .js-timeline__media {
	opacity: 1;
	transform: none;
}

/* Before JS runs, and when it never does, show everything. */
.js-timeline:not(.is-init) .js-timeline__text,
.js-timeline:not(.is-init) .js-timeline__media {
	opacity: 1;
	transform: none;
}

/* -------- Below desktop: one column beside the rail --------------------- */
/* Figma 21997:17917 (tablet) and 21994:17055 (mobile). The alternation stops:
   the line moves to the left edge and every entry sits to the right of it,
   photos first and the copy under them — the reverse of the order the desktop
   grid puts them in. The pill centres on the photo frame rather than on the
   whole entry, which is what the mobile frame does exactly and the tablet frame
   approximately (its pills are placed by hand, a little above the frame's
   middle, and not consistently between rows).

   The gaps and type sizes here are carried as tablet / mobile defaults on the
   controls that own them too. Elementor's emitted values outrank this
   stylesheet, so an editor's override has to come from the control; these are
   the floor under that, and the two agree. */

@media (max-width: 1024px) {
	.js-timeline {
		--js-tl-rail: 58px;
		--js-tl-col-gap: 40px;
		--js-tl-text-gap: 28px;
		--js-tl-stack-gap: 28px;
		--js-tl-item-gap: 40px;
	}

	.js-timeline__track::before,
	.js-timeline__progress {
		left: calc(var(--js-tl-rail) / 2);
		transform: none;
	}

	.js-timeline__item,
	.js-timeline__item--flip {
		grid-template-columns: var(--js-tl-rail) minmax(0, 1fr);
		align-items: start;
	}

	.js-timeline__item .js-timeline__marker,
	.js-timeline__item--flip .js-timeline__marker {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
	}

	.js-timeline__item .js-timeline__media,
	.js-timeline__item--flip .js-timeline__media {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.js-timeline__item .js-timeline__text,
	.js-timeline__item--flip .js-timeline__text {
		grid-column: 2;
		grid-row: 2;
		margin-top: var(--js-tl-stack-gap);
	}

	/* An entry with no photos has no first row for the pill to centre against,
	   so the copy takes it instead. */
	.js-timeline__item--no-media .js-timeline__text,
	.js-timeline__item--no-media.js-timeline__item--flip .js-timeline__text {
		grid-row: 1;
		margin-top: 0;
	}

	.js-timeline__heading {
		font-size: 20px;
		line-height: 28px;
	}

	.js-timeline__body {
		font-size: 16px;
		line-height: 24px;
	}
}

@media (max-width: 767px) {
	.js-timeline {
		--js-tl-col-gap: 20px;
		--js-tl-plate-radius: 12px;
		--js-tl-plate-border: 1px;
	}

	.js-timeline__body {
		font-size: 14px;
		line-height: 20px;
	}
}

/* -------- Reduced motion -------- */

@media (prefers-reduced-motion: reduce) {
	.js-timeline__text,
	.js-timeline__media {
		opacity: 1;
		transform: none;
		transition: none;
	}
}