/* ============================================================
   Your progression - homepage (Page Sections layout
   "progression_steps", brief 4.4; notes home-desktop 3.6 and
   home-mobile 3.6)
   Navy section (#progression: the hero's "Browse Pathways" link
   lands here), the shared section header, then the levels as an
   ordered list of Secondary Navy cards with a 3px bottom edge in
   the level colour. Each card is ONE link - "See courses &
   workshops", stretched over the card and pinned to its bottom; a
   Light Orange double chevron (decorative) joins neighbours.
   - Phones (< 768): a swipe carousel (assets/js/carousel.js):
     cards 295 x 281 at the 42px card inset with a 45px peek of the
     next card (width = track - 107px, so the peek stays 45px on
     wider phones too), gap 20, the chevrons (35px tall) overlapping
     both card edges, dots 70px below on navy (one per card) and
     88px above the section end. Card text: padding 27.5 top, 30
     left, 18 right, 22 bottom; number 30; description 14/21.
   - Tablet (768-1023): the same carousel from the gutter with two
     desktop-size cards in view (323 at 768, 354 at 834, 442 at
     1023) plus a 45px peek, phone-size chevrons, dots below (one
     per page: two positions).
   - Desktop (>= 1024): a static row of equal cards (354 at 1440)
     with 108px gaps (60 at 1024) and a 36 x 42 chevron centred in
     each gap. The track fits, so the script hides the dots and
     drops the region's role and tab stop.
   Desktop card text (also tablet): padding 35 top, 34 left, 26
   right, 29 bottom; number 32 (no arrow beside it: Miles 2026-11-01,
   the design's faint navy one is not meant to show); title 27.5 below,
   description 16/24 13.5 below that, and at least 42px above the
   link. Heights: 336 desktop, 281 phones, as designed.
   ============================================================ */

.progression {
	--progression-inset: var(--inset-card-mobile);
	--progression-gap: 20px;
}

/* ---------- Track: a swipe carousel below 1024 ---------- */

/* 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 cards' focus rings clear of the scroller's clip edge. */
.progression__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(--progression-inset);
	scrollbar-width: none;
}

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

/* The scroller is a tab stop (arrow keys scroll it): keep its ring
   inside the screen. */
.progression__viewport:focus-visible {
	outline-offset: -3px;
}

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

/* One snap point per card. Fixed fallback width for browsers
   without container units. */
.progression__item {
	position: relative;
	display: flex;
	flex: none;
	width: 295px;
	width: calc(100cqi - var(--progression-inset) - var(--progression-gap) - 45px);
	scroll-snap-align: start;
}

/* Chevron centred in the gap after each card (not the last), over
   the card edges on phones; clicks pass through to the cards. */
.progression__connector {
	position: absolute;
	top: 50%;
	left: calc(100% + var(--progression-gap) / 2);
	z-index: 2;
	color: var(--color-accent);
	line-height: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

/* The double-chevron icon draws its chevrons 14/24 of its box tall:
   a 55.5px box gives the designed 35px (34.9 with the stroke). No
   max-width: the shrink-to-fit span would collapse it to 0. */
.progression__connector .icon {
	width: 55.5px;
	max-width: none;
	height: 55.5px;
}

/* The dot buttons are 44px tall with the 11px dot centred (16.5px of
   button above and below it): the visible dots sit 70px below the
   cards and, with the section's 80px padding, 88px above its end,
   as designed. */
.progression__dots {
	margin-top: 53.5px;
	margin-bottom: -8.5px;
}

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

/* The drawn text box runs closer to the right edge than the left
   (phones 30 / about 18, desktop about 35 / 26): keeping that keeps
   the designed line breaks, so the description fills 4 lines at
   most and cards stay 281 / 336 tall. */
.progression-card {
	--progression-level: var(--color-level-foundation);
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 27.5px 18px 22px 30px;
	border-bottom: var(--border-accent) solid var(--progression-level);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-dark-alt);
	color: var(--color-text-on-dark);
}

/* The hover border (Miles 2026-10-11): a ring in the level colour over
   the card's whole edge, faded in on hover / focus. A separate layer, so
   the resting card keeps its drawn bottom edge (which tapers into the
   rounded corners) and nothing moves. */
.progression-card::before {
	content: "";
	position: absolute;
	inset: 0 0 calc(-1 * var(--border-accent));
	border: var(--border-accent) solid var(--progression-level);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}

.progression-card--progression {
	--progression-level: var(--color-level-progression);
}

.progression-card--development {
	--progression-level: var(--color-level-development);
}

.progression-card--leadership {
	--progression-level: var(--color-leadership);
}

/* The number's line (it holds the line's height when a card has no
   number). */
.progression-card__top {
	display: flex;
	align-items: center;
	min-height: var(--fs-step-number);
}

.progression-card__number {
	color: var(--progression-level);
	font-size: var(--fs-step-number);
	line-height: 1;
}

.progression-card__title {
	margin-top: 23.5px;
	font-size: var(--fs-card-title-lg);
	line-height: var(--lh-card-title);
}

/* margin-bottom is the least space above the link, which takes the
   rest (pinned to the card bottom on every card in the row). pretty
   avoids one-word last lines on the in-between widths; the designed
   1440 and 402 breaks are unchanged. */
.progression-card__description {
	margin: 10px 0 23px;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

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

.progression-card__link {
	display: flex;
	width: fit-content;
	margin-top: auto;
	color: var(--color-link-on-card-dark);
}

/* The arrow rides inline after the last word (kept together), 10px
   after it as in the arrow-link pattern, so a wrapped label reads
   "See courses & / workshops ->". */
.progression-card__link-end {
	white-space: nowrap;
}

.progression-card__link .icon {
	margin-left: 10px;
}

/* Hover (Miles 2026-10-11). Hovering anywhere on the card hovers the
   stretched link. The link's arrow is White at rest, turns Light
   Orange (non-text, 3:1 is enough on Secondary Navy) and slides
   (main.css arrow-link rule); and the border lights all round in the
   level colour. Only on
   cards that have a link (--link), on hover where the pointer can hover
   and on keyboard focus (:focus-visible, so a mouse click leaves nothing
   lit; its own rule, so an engine without :has() keeps the hover). The
   border is the ::before ring above, not the card's own border. The
   label stays White (Light Orange text on Secondary Navy is only 4.42:1)
   and is never underlined. */
.progression-card__link:hover .icon,
.progression-card__link:focus-visible .icon {
	color: var(--color-accent);
}

@media (hover: hover) {
	.progression-card--link:hover::before {
		opacity: 1;
	}
}

.progression-card--link:has(.progression-card__link:focus-visible)::before {
	opacity: 1;
}

/* The stretched area includes the coloured bottom edge, and the
   focus ring goes round the whole card. */
.progression-card__link::after {
	bottom: calc(-1 * var(--border-accent));
	border-radius: var(--radius-md);
}

.progression-card__link:focus-visible {
	outline: none;
}

.progression-card__link:focus-visible::after {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

/* ============================================================
   Tablet: two desktop-size cards in view plus a peek
   ============================================================ */

@media (min-width: 768px) {
	.progression {
		--progression-inset: var(--gutter);
	}

	/* Two cards and a 45px peek at every tablet width (442 at 1023);
	   the cap only matters if this range is ever widened. */
	.progression__item {
		width: 354px;
		width: min(460px, calc((100cqi - var(--progression-inset) - 2 * var(--progression-gap) - 45px) / 2));
	}

	.progression-card {
		padding: 35px 26px 29px 34px;
	}

	.progression-card__title {
		margin-top: 27.5px;
	}

	.progression-card__description {
		margin: 13.5px 0 42px;
		font-size: var(--fs-body);
	}
}

/* ============================================================
   Desktop: a static row, chevrons in the gaps
   ============================================================ */

@media (min-width: 1024px) {
	.progression {
		--progression-gap: clamp(60px, 11.538vw - 58.15px, 108px);
	}

	.progression__viewport {
		container-type: normal;
		margin: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	/* Equal columns, however many steps there are. */
	.progression__list {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		width: auto;
		padding: 0;
	}

	.progression__item {
		width: auto;
		scroll-snap-align: none;
	}

	/* 67px box: chevrons 42px tall (designed 36 x 42, about 3px stroke). */
	.progression__connector .icon {
		width: 67px;
		height: 67px;
	}
}

/* ============================================================
   Numbered steps (.progression--steps, 2026-10-24; template-parts/
   components/progression-steps.php): the Coaching and Mentoring
   pages' "How it works", measured on their v3 designs at 1440
   ============================================================ */

/* The cards in White on Cream: Light Orange numbers and bottom edges,
   Navy text. No link at the foot: the card ends 45px under its text,
   as the guiding steps (guiding-listing.css). */
.progression--steps .progression-card {
	--progression-level: var(--color-accent);
	background-color: var(--color-surface);
	color: var(--color-text);
}

.progression--steps .progression-card__title {
	color: var(--color-heading);
}

@media (min-width: 768px) {
	.progression--steps .progression-card__description {
		margin-bottom: 16px;
	}
}

/* A step with a link (the ML Development page's journey): the label
   Navy SemiBold 14px, centred at the card's foot (drawn 34px under the
   text, 27px over the edge), stretched over the card as on the
   homepage. Hover and keyboard focus light the card's ring in Light
   Orange (above) and turn its arrow Dark Orange as it slides (main.css);
   the ring of light backgrounds (Light Orange is 2.5:1 on Cream). */
.progression--steps .progression-card__link {
	margin-inline: auto;
	color: var(--color-link);
	font-size: var(--fs-small);
	text-align: center;
}

.progression--steps .progression-card__link:hover .icon,
.progression--steps .progression-card__link:focus-visible .icon {
	color: var(--color-arrow-hover-on-light);
}

.progression--steps .progression-card__link:focus-visible::after {
	outline-color: var(--color-focus-light);
}

@media (min-width: 768px) {
	.progression--steps .progression-card--link .progression-card__description {
		margin-bottom: 34px;
	}
}

/* The scroller is a tab stop at every width (the steps never all fit):
   on Cream its ring takes the light-background colour (the default
   Light Orange is about 2.5:1 there). */
.progression--steps .progression__viewport:focus-visible {
	outline-color: var(--color-focus-light);
}

/* Desktop: still a carousel (the homepage's is a static row), with 68px
   gaps and the chevron centred in each. From 1200px three cards to a
   view, each a third of the container less three gaps (359 at 1440,
   drawn 353), so the third card's chevron shows at the edge and the
   fourth card is just out of view, as drawn: dots below. At 1024-1199
   two to a view (about 390px). The track stops at the container's
   edges. */
@media (min-width: 1024px) {
	.progression--steps.progression {
		--progression-gap: 68px;
		--progression-inset: 0px;
	}

	.progression--steps .progression__viewport {
		container-type: inline-size;
		margin: -8px 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
	}

	.progression--steps .progression__list {
		display: flex;
		width: max-content;
		padding: 8px 0;
	}

	.progression--steps .progression__item {
		width: 390px;
		width: calc((100cqi - 2 * var(--progression-gap)) / 2);
		scroll-snap-align: start;
	}
}

@media (min-width: 1200px) {
	.progression--steps .progression__item {
		width: 359px;
		width: calc((100cqi - 3 * var(--progression-gap)) / 3);
	}
}

/* Steps with links (.progression--linked: the ML Development page's
   journey): a focused card's ring is drawn outside it (the stretched
   link's, 3px off), so from 1024px the scroller gets 8px of room at its
   sides too, as above and below; the list starts 8px in, so the cards keep
   their places and widths. */
@media (min-width: 1024px) {
	.progression--linked .progression__viewport {
		margin: -8px;
		scroll-padding-inline: 8px;
	}

	.progression--linked .progression__list {
		padding: 8px;
	}

	.progression--linked .progression__item {
		width: calc((100cqi - 16px - 2 * var(--progression-gap)) / 2);
	}
}

@media (min-width: 1200px) {
	.progression--linked .progression__item {
		width: calc((100cqi - 16px - 3 * var(--progression-gap)) / 3);
	}
}