/* ============================================================
   Course page: "Your Mountain Leader Pathway" (template-parts/offering/
   ml-pathway.php, 2026-10-24), measured on designs/Course page for ML
   Training (the Leadership course page, desktop y 4096-5435; phones and
   tablets are not designed).
   - A Secondary Navy section (the navy section's colours), the shared
     section header.
   - The steps: Primary Navy cards with a Light Orange bottom edge, three
     across from 1024px (396px at 1440, 42px gaps), two on tablets,
     stacked on phones. Card text 38px in from the left, the number's
     caps 32px under the top; number Koulen 32 Light Orange, title
     Koulen 24 White, text 16/24 Cream, the link SemiBold 14 White at
     the foot (pinned, so links in a row line up). This page's own step:
     "You are here" (a White outline pill with a star) beside its
     number, and no link.
   - Linked steps: the link is stretched over the card; hover and
     keyboard focus light the card's ring in Light Orange and turn the
     arrow Light Orange as it slides (as the homepage's progression).
   - The page's own card under the steps ("Before your training"), 64px
     below: eyebrow, title, text and its links (the first Light Orange).
   ============================================================ */

.ml-pathway.section--navy {
	background-color: var(--color-surface-dark-alt);
}

/* The eyebrow on Secondary Navy (4.42:1 as drawn, QH5). */
.ml-pathway .section-header .eyebrow {
	color: var(--color-eyebrow-on-hero);
}

.ml-pathway .section-header__intro {
	max-width: 74rem;
}

.ml-pathway__steps {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-step {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 28px 24px 26px;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--ml-step-bg);
	color: var(--color-text-on-dark);
}

/* The hover ring: a separate layer over the edge, so the resting card
   keeps its drawn bottom edge. */
.ml-step--link::before {
	content: "";
	position: absolute;
	inset: 0 0 calc(-1 * var(--border-accent));
	border: var(--border-accent) solid var(--color-accent);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}

.ml-step__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	min-height: var(--fs-step-number);
}

.ml-step__number {
	color: var(--color-accent);
	font-size: var(--fs-step-number);
	line-height: 1;
}

/* "You are here": 11px SemiBold capitals, letter-spaced as the eyebrows,
   in a White outline pill, a star in a White disc before it. */
.ml-step__here {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 26px;
	padding: 3px 12px 3px 3px;
	border: var(--border-hairline) solid var(--ml-here-border);
	border-radius: var(--radius-pill);
	color: var(--ml-here-border);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}

.ml-step__here .icon {
	flex: none;
	width: 18px;
	height: 18px;
	padding: 2px;
	border: var(--border-hairline) solid currentColor;
	border-radius: 50%;
}

.ml-step__title {
	margin-top: 26px;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-card-title-lg);
	line-height: var(--lh-card-title);
}

.ml-step__text {
	margin-top: 16px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

.ml-step__text + .ml-step__text {
	margin-top: 12px;
}

/* At the foot: at least 24px under the text, pinned to the bottom. */
.ml-step__link {
	width: fit-content;
	margin-top: auto;
	padding-top: 24px;
	color: var(--color-link-on-card-dark);
	font-size: var(--fs-small);
}

.ml-step__link::after {
	bottom: calc(-1 * var(--border-accent));
	border-radius: var(--radius-md);
}

.ml-step__link:focus-visible {
	outline: none;
}

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

.ml-step__link:hover .icon,
.ml-step__link:focus-visible .icon {
	color: var(--color-accent);
}

.ml-step--link:has(.ml-step__link:focus-visible)::before {
	opacity: 1;
}

@media (hover: hover) {
	.ml-step--link:hover::before {
		opacity: 1;
	}
}

/* ---------- The page's own card ---------- */

.ml-pathway__card {
	margin-top: 48px;
	padding: 30px 24px 28px;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--ml-step-bg);
	color: var(--color-text-on-dark);
}

.ml-pathway__card-title {
	margin-top: 14px;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-card-title-lg);
	line-height: var(--lh-card-title);
}

.ml-pathway__card-text {
	margin-top: 14px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.ml-pathway__card-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin-top: 16px;
}

.ml-pathway__card-link {
	color: var(--color-link-on-dark);
	font-size: var(--fs-small);
}

.ml-pathway__card-link--accent {
	color: var(--color-accent);
}

/* Hover and keyboard focus: White turns Light Orange and Light Orange
   turns White; the arrow slides with it (main.css). */
.ml-pathway__card-link:focus-visible {
	color: var(--color-link-hover-on-dark);
}

.ml-pathway__card-link--accent:focus-visible {
	color: var(--color-link-on-dark);
}

@media (hover: hover) {
	.ml-pathway__card-link:hover {
		color: var(--color-link-hover-on-dark);
	}

	.ml-pathway__card-link--accent:hover {
		color: var(--color-link-on-dark);
	}
}

.ml-pathway__card-link .icon {
	color: inherit;
}

/* ============================================================
   Tablet: two across
   ============================================================ */

@media (min-width: 768px) {
	.ml-pathway__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.ml-step {
		padding: 32px 30px 28px 34px;
	}

	.ml-pathway__card {
		padding: 34px 38px 30px;
	}
}

/* ============================================================
   Desktop: three across
   ============================================================ */

@media (min-width: 1024px) {
	.ml-pathway__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 34px clamp(24px, 4.1vw - 17px, 42px);
	}

	.ml-step {
		padding: 32px 30px 29px 38px;
	}

	.ml-step__title {
		margin-top: 30px;
	}

	.ml-step__text {
		margin-top: 20px;
	}

	.ml-pathway__card {
		margin-top: 64px;
	}
}

/* ---------- Windows High Contrast ---------- */

@media (forced-colors: active) {
	.ml-step,
	.ml-pathway__card {
		outline: var(--border-hairline) solid transparent;
	}
}