/* ============================================================
   The Mountain Leader Development page (template-ml-development.php):
   the "Mountain Leader Development" design (designs/ML Development/,
   desktop only; docs/design-renders/mld-page), measured at 1440. Phones
   and tablets are not designed: their treatments are working values.
   - Hero: the shared inner-page hero with its button (page-hero.css).
   - The journey: the shared numbered steps (progression.css, with a
     link at each card's foot), then the ticked points under a hairline:
     three columns from 1200px, two on tablets and at 1024-1199 (the
     third under the first), stacked on phones.
   - Workshops: the shared offering cards in a swipe carousel: one and a
     peek on phones, two and a peek on tablets, three to a view at
     1024-1199 and four from 1200 (292px at 1440, as drawn), with
     previous / next double chevrons in the page margins from 1024px and
     dots below.
   - Calendar: Secondary Navy season cards on Primary Navy, three across
     from 1200px (411px at 1440), two on tablets and at 1024-1199 (three
     would wrap most titles to three lines there), stacked on phones.
   - MTA CPD (Sam 2026-11-03, not designed): on Primary Navy just above
     the FAQs, the text with the white MTA logo beside it from 768px,
     above it on phones.
   - Route: the shared label cards in their light version
     (label-cards.css), "MOUNTAIN MENTORING" on two lines as drawn.
   - FAQs: the shared accordion on White (faq.css, .faq-tabs--light).
   - Help: the shared navy CTA panel (cta-panel.css) on a Secondary Navy
     band, the page's last section before the footer.
   Section paddings are the shared --section-pad-y (the file draws less
   under the journey's points). This file loads after cta-panel.css,
   faq.css and label-cards.css and before offering-card.css,
   page-hero.css and progression.css: overrides of those carry one more
   class.
   ============================================================ */

/* ---------- The journey's points ---------- */

/* A hairline 62px under the cards (drawn under the row of three), the
   points 32px under it. */
.ml-points {
	display: grid;
	gap: 24px;
	margin: 56px 0 0;
	padding: 32px 0 0;
	border-top: var(--border-hairline) solid var(--ml-points-rule);
	list-style: none;
}

/* The disc on the title's line, the text 11px after it. */
.ml-points__item {
	display: flex;
	gap: 11px;
}

.ml-points__check {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--icon-check);
	height: var(--icon-check);
	border-radius: 50%;
	background-color: var(--color-check-disc);
	color: var(--color-check-tick);
}

.ml-points__check .icon {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 8px;
	stroke-linejoin: round;
}

.ml-points__body {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.ml-points__title {
	display: block;
	color: var(--color-heading);
	font-weight: var(--fw-bold);
}

.ml-points__text {
	display: block;
}

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

	/* The drawn measure (about 308px), so the lines break as drawn. */
	.ml-points__body {
		max-width: 19.5rem;
	}
}

@media (min-width: 1200px) {
	.ml-points {
		grid-template-columns: repeat(3, minmax(0, 390px));
	}
}

/* ---------- Workshops ---------- */

.ml-workshops {
	--ml-workshops-inset: var(--inset-card-mobile);
	--ml-workshops-gap: 20px;
	--ml-workshops-arrow: 44px;
}

/* The arrows are placed against the track (the cards), not the dots. */
.ml-workshops__track {
	position: relative;
}

/* Full bleed below 1024px, so cards scroll off the screen edge (as the
   steps above); a size container, so card widths follow the visible
   track. The 8px of list padding all round (cancelled by the negative
   margins) keeps the cards' focus rings clear of the scroller's clip
   edge. */
.ml-workshops__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(--ml-workshops-inset);
	scrollbar-width: none;
}

.ml-workshops__viewport::-webkit-scrollbar {
	display: none;
}

.ml-workshops__viewport:focus-visible {
	outline-color: var(--color-focus-light);
	outline-offset: -3px;
}

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

/* One card and a 45px peek on phones (295px at 402). A grid cell, so the
   card stretches to the row's height. */
.ml-workshops__item {
	display: grid;
	flex: none;
	width: 295px;
	width: calc(100cqi - var(--ml-workshops-inset) - var(--ml-workshops-gap) - 45px);
	scroll-snap-align: start;
}

.ml-workshops__dots {
	margin-top: 28px;
	margin-bottom: -16.5px;
}

/* Previous / next: only where the track scrolls from 1024px (the script
   shows them), centred in the page margin beside the cards. Drawn Light
   Orange (2.66:1 on White, under 3:1 for a control): Dark Orange,
   deepening on hover and focus while they slide their own way. */
.ml-workshops__arrow {
	display: none;
}

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

	/* Two cards and a 45px peek. */
	.ml-workshops__item {
		width: 330px;
		width: min(400px, calc((100cqi - var(--ml-workshops-inset) - 2 * var(--ml-workshops-gap) - 45px) / 2));
	}
}

@media (min-width: 1024px) {
	.ml-workshops__viewport {
		margin: -8px;
		scroll-padding-inline: 8px;
	}

	.ml-workshops__list {
		padding: 8px;
	}

	/* Three to a view at 1024-1199 (about 290px). */
	.ml-workshops__item {
		width: 290px;
		width: calc((100cqi - 16px - 2 * var(--ml-workshops-gap)) / 3);
	}

	.ml-workshops__arrow {
		position: absolute;
		top: 50%;
		z-index: 1;
		display: grid;
		place-items: center;
		width: var(--ml-workshops-arrow);
		height: var(--ml-workshops-arrow);
		padding: 0;
		border: 0;
		border-radius: var(--radius-pill);
		background: none;
		color: var(--color-arrow-hover-on-light);
		transform: translateY(-50%);
		transition: color var(--transition);
	}

	.ml-workshops__arrow[hidden] {
		display: none;
	}

	.ml-workshops__arrow--prev {
		right: calc(100% + (var(--gutter) - var(--ml-workshops-arrow)) / 2);
	}

	.ml-workshops__arrow--next {
		left: calc(100% + (var(--gutter) - var(--ml-workshops-arrow)) / 2);
	}

	.ml-workshops__arrow .icon {
		width: var(--ml-workshops-arrow);
		height: var(--ml-workshops-arrow);
		transition: transform var(--transition);
	}

	.ml-workshops__arrow--prev .icon {
		transform: scaleX(-1);
	}

	.ml-workshops__arrow:focus-visible {
		outline-color: var(--color-focus-light);
		outline-offset: 0;
		color: var(--color-link-hover-on-light);
	}

	.ml-workshops__arrow[aria-disabled="true"] {
		color: var(--color-grey-mid);
		cursor: default;
	}
}

@media (min-width: 1200px) {
	.ml-workshops {
		--ml-workshops-gap: var(--gap-cards);
		--ml-workshops-arrow: 56px;
	}

	/* Four to a view: 292px at 1440, as drawn. */
	.ml-workshops__item {
		width: calc((100cqi - 16px - 3 * var(--ml-workshops-gap)) / 4);
	}
}

@media (min-width: 1024px) and (hover: hover) {
	.ml-workshops__arrow:not([aria-disabled="true"]):hover {
		color: var(--color-link-hover-on-light);
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.ml-workshops__arrow--prev:not([aria-disabled="true"]):focus-visible .icon {
		transform: scaleX(-1) translateX(var(--arrow-nudge));
	}

	.ml-workshops__arrow--next:not([aria-disabled="true"]):focus-visible .icon {
		transform: translateX(var(--arrow-nudge));
	}
}

@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ml-workshops__arrow--prev:not([aria-disabled="true"]):hover .icon {
		transform: scaleX(-1) translateX(var(--arrow-nudge));
	}

	.ml-workshops__arrow--next:not([aria-disabled="true"]):hover .icon {
		transform: translateX(var(--arrow-nudge));
	}
}

/* ---------- The calendar ---------- */

.ml-calendar__seasons {
	display: grid;
	gap: 20px;
	align-items: stretch;
}

/* 24px in, 20px corners; the season's name and months over a rule. */
.ml-season {
	padding: 21px 24px 12px;
	border-radius: var(--radius-lg);
	background-color: var(--ml-calendar-card-bg);
}

.ml-season__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: var(--border-hairline) solid var(--ml-calendar-rule);
}

.ml-season__title {
	color: var(--color-heading-on-dark);
	font-size: var(--fs-ml-season);
	line-height: 1;
}

.ml-season__months {
	flex: none;
	color: var(--ml-calendar-months);
	font-size: var(--fs-label);
	line-height: 1.5;
}

.ml-season__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A date: its line and title, the button beside them (12px under the
   rule, at the right). Rows 66px tall with a one-line title, as drawn. */
.ml-date {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0 12px;
}

.ml-date + .ml-date {
	border-top: var(--border-hairline) solid var(--ml-calendar-rule);
}

.ml-date__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ml-date__meta {
	color: var(--ml-calendar-type);
	font-size: var(--fs-ml-date-meta);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
}

.ml-date--assessment .ml-date__meta {
	color: var(--ml-calendar-assessment);
}

.ml-date__title {
	margin-top: 1px;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-ml-date-title);
	font-weight: var(--fw-semibold);
	line-height: 22px;
}

.ml-date__link {
	color: inherit;
	text-decoration: none;
}

.ml-date__link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

@media (hover: hover) {
	.ml-date__link:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}

@media (hover: none) {
	.ml-date__link {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}

.ml-date__action {
	flex: none;
	margin-top: -1px;
}

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

@media (min-width: 1200px) {
	.ml-calendar__seasons {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- MTA Continuing Professional Development ---------- */

/* Not designed (Sam 2026-11-03): a Primary Navy band just above the
   FAQs (after the Cream route cards), the text at most 50rem, the white
   MTA logo beside it from 768px (160px wide, 220 from 1024), centred down
   the text; on phones the logo above the text (it comes first in the
   markup). Paragraphs and the list 20px apart, as the section header's
   intro is from its H2. */
.ml-cpd__inner {
	display: grid;
	gap: 32px;
}

.ml-cpd__body {
	max-width: 50rem;
}

.ml-cpd .ml-cpd__header {
	margin-bottom: 20px;
}

.ml-cpd__text,
.ml-cpd__points {
	margin: 0 0 20px;
}

.ml-cpd__body > :last-child {
	margin-bottom: 0;
}

.ml-cpd__points > li + li {
	margin-top: 8px;
}

.ml-cpd__logo {
	width: 160px;
}

.ml-cpd__logo-img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.ml-cpd__inner--logo {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 64px;
	}

	.ml-cpd__inner--logo .ml-cpd__logo {
		grid-column: 2;
		grid-row: 1;
	}

	.ml-cpd__inner--logo .ml-cpd__body {
		grid-column: 1;
		grid-row: 1;
	}
}

@media (min-width: 1024px) {
	.ml-cpd__logo {
		width: 220px;
	}

	.ml-cpd__inner--logo {
		column-gap: 96px;
	}
}

/* Wide screens: the text keeps its measure and the logo is centred in the
   room beside it (not pushed against the container's edge). */
@media (min-width: 1200px) {
	.ml-cpd__inner--logo {
		grid-template-columns: minmax(0, 50rem) minmax(0, 1fr);
	}

	.ml-cpd__inner--logo .ml-cpd__logo {
		justify-self: center;
	}
}

/* ---------- Want a more individual route? ---------- */

/* The heading column is drawn narrower than the label cards' own (its
   text wraps at about 512px and the H2 takes two lines, as drawn). */
@media (min-width: 1024px) {
	.ml-route .label-cards__header {
		max-width: 32rem;
	}
}

/* ---------- FAQs ---------- */

/* One group: no tabs under the H2, the first question's text about 62px
   under the heading's line box (the question's own padding), as drawn. */
.ml-faqs .section-header {
	margin-bottom: 8px;
}

/* ---------- Not sure where to focus? ---------- */

.ml-help {
	padding-block: var(--ml-help-pad-y);
	background-color: var(--color-surface-dark-alt);
}

.ml-help__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin-top: 24px;
}

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

.ml-help__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-help__link:focus-visible {
	color: var(--color-link-hover-on-dark);
}

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

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

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

.ml-help__link .icon {
	color: inherit;
}

/* No eyebrow above the heading, so none of the room the listing's panel
   keeps for one (cta-panel--lg). */
.ml-help__panel.cta-panel--lg .cta-panel__title {
	margin-top: 0;
}

/* The panel drawn tighter than the listing's: 44px top and bottom, 40px
   sides at 1440; the text and links at the body size. */
@media (min-width: 1024px) {
	.ml-help__panel.cta-panel--lg {
		padding: 44px 40px 46px;
	}

	.ml-help__panel.cta-panel--lg .cta-panel__title {
		line-height: 1.25;
	}

	.ml-help__panel.cta-panel--lg .cta-panel__body {
		margin-top: 14px;
	}
}

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

@media (forced-colors: active) {
	.ml-points__check {
		background-color: var(--color-forced-line);
		forced-color-adjust: none;
	}

	.ml-points__check .icon {
		color: var(--color-forced-backplate);
	}

	.ml-season {
		outline: var(--border-hairline) solid transparent;
	}

	/* The calendar's course links read as links (as the Book page's). */
	.ml-date__link {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}