/* ============================================================
   Course page: Itinerary (template-parts/offering/itinerary.php).
   Design: CW v2 desktop y 2398-3232, mobile y 4265-5073
   (docs/notes/course-page.md 4.7, 5.7; component 15).
   Cream band (.section--cream, the house padding), the shared
   section header (H2 and the standard intro), then one White card
   per stage - radius 20, a 3px Light Orange bottom edge following
   the corners, no shadow - with a Light Orange double chevron
   centred in each gap (decorative). Card text: the optional label
   Koulen 24-32 Light Orange, the title Koulen 24 navy, the
   description Poppins 16/24 navy (the file's summary line and
   bullets have no copy: Doc 02 gives one description per stage).
   Cards in a row or track share the tallest card's height.
   Doc 02 has 2 or 3 stages; the template adds --stages-N (1-4,
   4 = four or more). The cards make one row where they fit and a
   scroll-snap carousel (assets/js/carousel.js, dots below) only
   where they do not:
   - Phones (< 768): a carousel from two stages - one card and a
     37px peek of the next, 28px apart (the file: 323 wide at 402,
     27 apart), a 17 x 20 chevron in each gap (drawn 17.5 x 21).
   - Tablet (768-1023): two stages make a static row of two; three
     or more a carousel of two cards and a 45px peek. Chevrons
     34 x 42 as on desktop (drawn 35 x 41-42), in gaps of 48 at
     768 rising to 68 at 1440.
   - Desktop (>= 1024): up to three stages a static row of equal
     cards (three across the 1280 container: 381 wide, the file's
     353 left room for a fourth chevron); four or more a carousel
     of three and a peek.
   Where a track fits, carousel.js keeps the dots hidden and drops
   the region role and tab stop. One stage is a plain card.
   Card insets, measured: label caps 37px below the card top (the
   file 34-38), label caps to title caps about 40 (the file 38-42),
   title caps to the description's line top about 21 (the file
   21-22), the last line 28px above the orange edge; text 26px in
   on phones rising to 36 at 1440 (the file 27 and 31-37).
   ============================================================ */

.itinerary {
	--itinerary-inset: var(--gutter);          /* where the first card starts in a track */
	--itinerary-gap: 28px;
	--itinerary-peek: 37px;
	--itinerary-chevron: 33px;                 /* icon box: chevrons 14/24 of it plus the stroke, 17 x 20 (drawn 17.5 x 21) */
	--itinerary-chevron-stroke: 1.2;           /* viewBox units: 1.65px at this size */
	--itinerary-card-pad-x: clamp(26px, 22.13px + 0.9634vw, 36px); /* 26 at 402, 36 at 1440 */
}

/* ---------- Track: a carousel unless the row fits ---------- */

/* Full bleed so cards scroll off the screen edge. A size container,
   so card widths follow the visible track (cqi). The 8px of list
   padding above and below (cancelled by the negative margins) keeps
   the track's own focus ring clear of the cards, which would paint
   over it. */
.itinerary__viewport {
	container-type: inline-size;
	margin: -8px calc(-1 * var(--gutter));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--itinerary-inset);
	scrollbar-width: none;
}

.itinerary__viewport::-webkit-scrollbar {
	display: none;
}

/* The scroller is a tab stop while it scrolls (arrow keys move it):
   the ring inside the screen, Dark Orange on Cream. */
.itinerary__viewport:focus-visible {
	outline-color: var(--color-focus-light);
	outline-offset: -3px;
}

.itinerary__list {
	display: flex;
	gap: var(--itinerary-gap);
	width: max-content;
	margin: 0;
	padding: 8px var(--itinerary-inset);
	list-style: none;
}

/* One snap point per card; fixed fallback width for browsers without
   container units. */
.itinerary__item {
	position: relative;
	display: flex;
	flex: none;
	width: 323px;
	width: calc(100cqi - var(--itinerary-inset) - var(--itinerary-gap) - var(--itinerary-peek));
	scroll-snap-align: start;
}

/* A static row (one stage everywhere; two from 768; three from
   1024, below): no scroller, equal columns in the container. */
.itinerary--stages-1 .itinerary__viewport {
	container-type: normal;
	margin: 0;
	overflow: visible;
	scroll-snap-type: none;
}

.itinerary--stages-1 .itinerary__list {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	width: auto;
	padding: 0;
}

.itinerary--stages-1 .itinerary__item {
	width: auto;
	scroll-snap-align: none;
}

/* Chevron centred in the gap after each card (not the last); clicks
   and swipes pass through. */
.itinerary__connector {
	position: absolute;
	top: 50%;
	left: calc(100% + var(--itinerary-gap) / 2);
	color: var(--color-accent);
	line-height: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

/* No max-width: the shrink-to-fit span would collapse the icon. */
.itinerary__connector .icon {
	width: var(--itinerary-chevron);
	max-width: none;
	height: var(--itinerary-chevron);
	stroke-width: var(--itinerary-chevron-stroke);
}

/* The dot buttons are 44px tall with the 11px dot centred: the dots
   sit 49px below the cards, as drawn on phones, and the section's
   padding is measured from the visible dot. Global light-background
   colours (Secondary Navy active, Grey Light) - the working value
   for every carousel on White or Cream (design-system 1.4, QH7);
   the file draws this one Light Orange and Grey Mid (2.49 and
   2.05:1 on Cream). */
.itinerary__dots {
	margin-top: 32.5px;
	margin-bottom: -16.5px;
}

/* ---------- Card ---------- */

.itinerary-card {
	flex: 1;
	min-width: 0;
	padding: 32px var(--itinerary-card-pad-x) 28px;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* The label and the title are one H3 ("Days 1 and 2: Mountain
   leadership tasks" to a screen reader), drawn as two lines. */
.itinerary-card__heading {
	color: var(--color-heading);
	font-size: var(--fs-card-title-lg);
	line-height: var(--lh-display);
}

/* Light Orange as drawn (see --itinerary-label-color: QH5). */
.itinerary-card__label {
	display: block;
	margin-bottom: 28px;
	color: var(--itinerary-label-color);
	font-size: var(--itinerary-label-size);
}

/* Its figures in Poppins SemiBold at the label's size and colour (the
   template wraps each run): Koulen's "1" is its "I" (QH24), so "Days 1
   and 2" read "Days I and 2". Poppins' figures stand about as tall as
   Koulen's caps; line-height 1 keeps Poppins' taller line box from
   growing the label's line. */
.itinerary-card__figures {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.itinerary-card__title {
	display: block;
	text-wrap: balance;
}

/* A reading measure for the wide cards (one stage across the
   container); narrower cards never reach it. */
.itinerary-card__description {
	max-width: 40rem;
	margin-top: 15px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

.itinerary-card__description:first-child {
	margin-top: 0;
}

.itinerary-card__description p + p {
	margin-top: 12px;
}

/* ============================================================
   Tablet: two stages in a row, three or more two at a time
   ============================================================ */

@media (min-width: 768px) {
	.itinerary {
		--itinerary-gap: clamp(48px, 2.976vw + 25.14px, 68px); /* 48 at 768, 68 at 1440 */
		--itinerary-peek: 45px;
		--itinerary-chevron: 66px;             /* 34 x 42 chevrons (drawn 35 x 41-42) */
		--itinerary-chevron-stroke: 1.05;      /* 2.9px */
	}

	.itinerary--stages-2 .itinerary__viewport {
		container-type: normal;
		margin: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.itinerary--stages-2 .itinerary__list {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		width: auto;
		padding: 0;
	}

	.itinerary--stages-2 .itinerary__item {
		width: auto;
		scroll-snap-align: none;
	}

	/* Two cards and a peek of the third. */
	.itinerary--stages-3 .itinerary__item,
	.itinerary--stages-4 .itinerary__item {
		width: 300px;
		width: calc((100cqi - var(--itinerary-inset) - 2 * var(--itinerary-gap) - var(--itinerary-peek)) / 2);
	}
}

/* ============================================================
   Desktop: up to three stages in a row, more three at a time
   ============================================================ */

@media (min-width: 1024px) {
	.itinerary-card__label {
		margin-bottom: 30px;
	}

	.itinerary--stages-3 .itinerary__viewport {
		container-type: normal;
		margin: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.itinerary--stages-3 .itinerary__list {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		width: auto;
		padding: 0;
	}

	.itinerary--stages-3 .itinerary__item {
		width: auto;
		scroll-snap-align: none;
	}

	/* Three cards and a peek of the fourth. */
	.itinerary--stages-4 .itinerary__item {
		width: 360px;
		width: calc((100cqi - var(--itinerary-inset) - 3 * var(--itinerary-gap) - var(--itinerary-peek)) / 3);
	}
}

/* ============================================================
   Windows High Contrast: the White card drops to the page colour,
   so a hairline keeps its outline (the orange edge stays below).
   ============================================================ */

@media (forced-colors: active) {
	.itinerary-card {
		outline: var(--border-hairline) solid transparent;
	}
}

/* ============================================================
   Print: every stage on the page (a carousel would clip all but
   the first), the cards outlined (their White drops on paper) and
   kept whole; no chevrons or dots.
   ============================================================ */

@media print {
	.itinerary__header {
		break-after: avoid;
	}

	.itinerary .itinerary__viewport {
		container-type: normal;
		margin: 0;
		overflow: visible;
	}

	.itinerary .itinerary__list {
		display: flex;
		flex-wrap: wrap;
		width: auto;
		padding: 0;
	}

	.itinerary .itinerary__item {
		flex: 1 1 14rem;
		width: auto;
	}

	.itinerary__connector,
	.itinerary__dots {
		display: none;
	}

	.itinerary-card {
		border: var(--border-hairline) solid var(--color-border);
		border-bottom: var(--border-accent) solid var(--color-accent);
		break-inside: avoid;
	}
}