/**
 * Steps style: Timeline
 *
 * A heading beside its pager, then one 43px marker per year across the container with the open
 * year's panel expanded between its own marker and the next. The markers are the row's fixed
 * measure and the panel takes what is left, so the panel width is derived from the year count
 * rather than stated — and it is the same number wherever the open year sits.
 *
 * The row is a fade carousel whose markers are excluded from the track; the library's classes
 * are the state and everything below is layout.
 */

.module.steps.style-timeline .container {
	row-gap: var(--module-spacing-medium);
}

.module.steps.style-timeline .container > .heading-3 {
	align-self: end;
	grid-column: 1 / span 7;
	grid-row: 1;
	margin-block: 0;
}

.module.steps.style-timeline .arrows {
	align-self: end;
	display: flex;
	gap: 12px;
	grid-column: 8 / -1;
	grid-row: 1;
	justify-content: flex-end;
	margin-bottom: var(--text-spacing-xsmall);
}

.module.steps.style-timeline:has(.jazzy-static) .arrows {
	display: none;
}

/** Years **/

.module.steps.style-timeline .years {
	--marker-width: 43px;
	--year-count: 2;
	align-items: stretch;
	container-type: inline-size;
	display: flex;
	grid-column: 1 / -1;
	grid-row: 2;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(3)) {
	--year-count: 3;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(4)) {
	--year-count: 4;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(5)) {
	--year-count: 5;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(6)) {
	--year-count: 6;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(7)) {
	--year-count: 7;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(8)) {
	--year-count: 8;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(9)) {
	--year-count: 9;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(10)) {
	--year-count: 10;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(11)) {
	--year-count: 11;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(12)) {
	--year-count: 12;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(13)) {
	--year-count: 13;
}

.module.steps.style-timeline .years:has(> .marker:nth-of-type(14)) {
	--year-count: 14;
}

.module.steps.style-timeline .marker {
	align-items: flex-start;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex: none;
	gap: var(--text-spacing-xsmall);
	padding: 0;
	text-align: left;
	width: var(--marker-width);
}

.module.steps.style-timeline .marker:not(:first-child) {
	margin-left: var(--text-spacing-large);
}

.module.steps.style-timeline .rule {
	align-self: stretch;
	background: var(--charcoal);
	flex: none;
	opacity: 0.15;
	width: 1px;
}

.module.steps.style-timeline .marker:hover .rule {
	opacity: 0.5;
}

.module.steps.style-timeline .marker .eyebrow {
	rotate: 180deg;
	writing-mode: vertical-rl;
}

/** Panel **/

.module.steps.style-timeline .panel {
	display: flex;
	flex: 0 0 0;
	flex-direction: column;
	gap: var(--text-spacing-small);
	min-width: 0;
	opacity: 0;
	overflow: hidden;
	padding-bottom: var(--text-spacing-xsmall);
}

.module.steps.style-timeline .panel.is-active,
.module.steps.style-timeline .years:not(.jazzy-carousel) > .panel:first-of-type {
	flex: 1 1 0;
	margin-left: var(--text-spacing-xlarge);
	margin-right: var(--text-spacing-small);
	opacity: 1;
}

.module.steps.style-timeline .panel > * {
	flex: none;
	width: calc(100cqw - var(--year-count) * var(--marker-width) - (var(--year-count) - 1) * var(--text-spacing-large) - var(--text-spacing-xlarge) - var(--text-spacing-small));
}

.module.steps.style-timeline .panel .media {
	border-radius: 10px;
}

.module.steps.style-timeline .text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-inline: var(--text-spacing-xsmall);
}

.module.steps.style-timeline .text > * {
	margin-block: 0;
}

@media (prefers-reduced-motion: no-preference) {

	.module.steps.style-timeline .panel {
		transition: flex-grow 0.45s cubic-bezier(0.33, 1, 0.68, 1), margin 0.45s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.15s ease-out;
	}

	.module.steps.style-timeline .panel.is-active {
		transition: flex-grow 0.45s cubic-bezier(0.33, 1, 0.68, 1), margin 0.45s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.25s ease-in 0.25s;
	}

	.module.steps.style-timeline .rule {
		transition: opacity 0.3s ease-out;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	/* The years are the pager here — each one jumps to its own panel — so the arrows are a second
	   control for the same thing, and the heading takes the width they were holding. */
	.module.steps.style-timeline .container > .heading-3 {
		grid-column: 1 / -1;
	}

	.module.steps.style-timeline .arrows {
		display: none;
	}

	.module.steps.style-timeline .container {
		row-gap: var(--text-spacing-medium);
	}

	.module.steps.style-timeline .years {
		align-items: flex-start;
		column-gap: var(--text-spacing-xxsmall);
		flex-wrap: wrap;
		row-gap: var(--text-spacing-medium);
	}

	.module.steps.style-timeline .rule {
		display: none;
	}

	/* Tabs rather than a ruled row: the sticky navigation's pill in the same three colours, a
	   size down so the two are not read as the same control. */
	.module.steps.style-timeline .marker {
		align-items: center;
		background: var(--program-pill, var(--teal-pale));
		border-radius: 60px;
		color: var(--text-gray);
		padding: 8px var(--text-spacing-xsmall);
		transition: background-color var(--motion) var(--ease-out), color var(--motion) var(--ease-out);
		width: auto;
	}

	.module.steps.style-timeline .marker:not(:first-child) {
		margin-left: 0;
	}

	.module.steps.style-timeline .marker:not(:has(+ .panel.is-active)):is(:hover, :focus-visible) {
		background: color-mix(in srgb, var(--program-mid, var(--storm)) 12%, var(--program-pill, var(--teal-pale)));
		color: var(--charcoal);
	}

	.module.steps.style-timeline .marker:has(+ .panel.is-active) {
		background: var(--program-mid, var(--storm));
		color: var(--white);
	}

	.module.steps.style-timeline .marker .eyebrow {
		font-size: calc(12rem / 16);
		line-height: calc(16 / 12);
		rotate: none;
		writing-mode: horizontal-tb;
	}

	.module.steps.style-timeline .panel {
		display: none;
	}

	.module.steps.style-timeline .panel > * {
		width: 100%;
	}

	.module.steps.style-timeline .panel.is-active,
	.module.steps.style-timeline .years:not(.jazzy-carousel) > .panel:first-of-type {
		display: flex;
		flex: 0 0 100%;
		margin-inline: 0;
		order: 1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	.module.steps.style-timeline .container > .heading-3,
	.module.steps.style-timeline .arrows {
		grid-column: 1 / -1;
	}

	.module.steps.style-timeline .arrows {
		align-self: start;
		justify-content: flex-start;
		margin-bottom: 0;
	}

	.module.steps.style-timeline .container {
		row-gap: var(--text-spacing-medium);
	}

	/* One row of years, scrolled with a thumb rather than wrapped to three lines of pills — the
	   set reads as a run of dates you move along, and the panel below it keeps its place while you
	   do. A grid, because a wrapping flex row cannot hold the markers on one line and drop the open
	   panel under them: the markers take the auto columns of row one, the panel row two. */
	.module.steps.style-timeline .years {
		column-gap: var(--text-spacing-xxsmall);
		display: grid;
		/* Named rather than implicit, so the panel below can span them all. Placed in a column of
		   its own it set that column's width to the panel's, and the first year was the width of
		   the screen. --year-count is already counted off the markers above. */
		grid-template-columns: repeat(var(--year-count), max-content);
		grid-row: auto;
		grid-template-rows: auto auto;
		/* The run reaches both screen edges: a row that stops at the container reads as a list
		   that ends there rather than one that carries on. The inset moves onto the first and last
		   markers rather than onto the row, so the panel below can hold it in its own margins —
		   a sticky box is pinned by its margin box, and padding on the scrollport puts its resting
		   place and its pinned place in two different columns. */
		margin-inline: calc(-1 * var(--container-outer-padding));
		margin-top: 0;
		overflow-x: auto;
		row-gap: var(--text-spacing-medium);
		scrollbar-width: none;
		/* The row is a carousel as well as a scrollport, and a carousel holds `touch-action: pan-y`
		   so a drag across it reaches the slides rather than the page. This one has drag turned off
		   and nothing to take the gesture — left as it was, a thumb could not move the years. */
		touch-action: pan-x pan-y;
		width: calc(100% + var(--container-outer-padding) * 2);
	}

	.module.steps.style-timeline .years::-webkit-scrollbar {
		display: none;
	}

	.module.steps.style-timeline .years > .marker {
		grid-row: 1;
	}

	.module.steps.style-timeline .years > .marker:first-of-type {
		margin-left: var(--container-outer-padding);
	}

	.module.steps.style-timeline .years > .marker:last-of-type {
		margin-right: var(--container-outer-padding);
	}

	/* Stuck to the scrollport's own left edge and sized to it, so the years travel past a panel
	   that stays where it is. `cqw` because the years are the query container and a percentage
	   here would resolve against the column the panel is placed in. */
	.module.steps.style-timeline .years > .panel {
		grid-column: 1 / -1;
		grid-row: 2;
		left: var(--container-outer-padding);
		margin-inline: var(--container-outer-padding);
		position: sticky;
		width: calc(100cqw - var(--container-outer-padding) * 2);
	}

	.module.steps.style-timeline .container > .heading-3 {
		grid-row: 1;
	}

	.module.steps.style-timeline .arrows {
		grid-row: 2;
	}

	.module.steps.style-timeline .text {
		padding-inline: 0;
	}

}