/* ============================================================
   Course and workshop hero (template-parts/offering/hero.php).
   CW v2, desktop y 129-776 and mobile y 127-1238
   (docs/notes/course-page.md 4.3, 5.3 and 6). Flat Secondary Navy.
   - Breadcrumb: the listing hero's trail (page-hero.css); the current
     page is Cream at every width here, as both course artboards draw
     it (the listing's phone design draws it Grey Mid).
   - Phones: stacked as drawn - trail, photos, dots, then the badge,
     H1 (Koulen 48/54), opening line (Poppins SemiBold 18/27), the four
     facts (16/24 on a 35px pitch, Light Orange icons), the price and
     the button, all on the container's edge.
   - The price: drawn "FROM £320 PP" in Koulen 36, White. Set in
     Poppins (QH24: Koulen's "1" is its "I", so "£150" read "£I50"),
     keeping the drawn hierarchy: the amount SemiBold 36, its figures
     as tall as the drawn caps (27px of ink against 26) on the Koulen
     line's baseline, with "From" and "per person" Regular 18 beside
     it, all White.
   - Tablets (768-1023): two columns, photos left and facts right,
     centred on each other; no arrows (swipe, scroll or the dots).
   - Desktop (>= 1024): the drawn split - a 644 : 621 column pair
     15px apart, so at 1440 the facts column starts at x 739 and the
     gallery (arrows, a photo of at most 466 x 379, dots) is centred
     in the left column on x 402, its arrows 40px outside the photo
     (closer on narrower screens). The two columns are centred on each
     other (the photo with its dots against the facts), as drawn.
   - Vertical rhythm measured from the renders (ink positions), e.g.
     desktop: trail caps 43px under the header, badge 36px under the
     trail, H1 caps 14px under the badge, the first fact 41px under
     the opening line, the price's figures 26px under the last fact
     (the Koulen caps were 27), the button 38px under their baseline,
     72px under the button.
   - The button is the global large button (57px tall; drawn 51) with
     the soft halo the design draws round it (.btn--on-photo), and
     .btn--wrap (main.css) so C17's "Enquire about reassessment"
     takes two lines on 320-360px phones.
   - Normalised: the design starts the badge and H1 at x 739 and the
     rest at x 750; one edge here. Badge text is Navy on the level
     colours and White on Leadership Red (the badge tokens, QH5; the
     design draws Cream, 2.8:1 on Foundation Green).
   ============================================================ */

.offering-hero {
	background-color: var(--color-surface-hero);
	color: var(--color-text-on-dark);
}

.offering-hero__inner {
	padding-top: 44px;
	padding-bottom: 78px;
}

.offering-hero__breadcrumb .breadcrumb__current {
	color: var(--color-breadcrumb-current);
}

.offering-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 29.5px;
	margin-top: 34px;
}

/* ---------- Gallery ---------- */

.offering-gallery {
	min-width: 0;
}

/* The scroll-snap track: one photo per view, 16px apart while
   swiping. Rounded like the photos, so the keyboard focus ring (the
   region is focusable) follows the corners. */
.offering-gallery__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--radius-md);
}

.offering-gallery__viewport::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.offering-gallery__viewport {
		scroll-behavior: smooth;
	}
}

.offering-gallery__list {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 466 x 379 at 1440, 370 x 301 at 402: the same 1.23:1 frame. The
   navy shows only while a photo loads. */
.offering-gallery__slide {
	flex: 0 0 100%;
	aspect-ratio: 466 / 379;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-surface-dark);
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* The photo's focus point (--focus-x / --focus-y, inc/image-focus.php)
   decides what the box trims from the 4:3 crop. */
.offering-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

/* Dots: 11px, White when active (as drawn), on the 24px pitch of the
   global dots. Their row is held open while the script builds them,
   so nothing below moves (the facts sit under the photos on phones). */
.offering-gallery__dots {
	min-height: var(--tap-target);
	margin-top: 10.5px; /* the dots 27px under the photo, as drawn on phones */
}

.offering-gallery__dots[hidden] {
	display: block;
	visibility: hidden;
}

.offering-gallery__dots .carousel-dots__dot:hover {
	color: var(--offering-hero-dot-hover);
}

.offering-gallery__dots .carousel-dots__dot.is-active {
	color: var(--offering-hero-dot-active);
}

/* Previous / next: thin Cream chevrons, 16 x 29 drawn, in 48px
   buttons - desktop only (display set from 1024px). The icon's stroke
   (hero.php: 1.5, so 3px at 48px) matches the drawn weight. */
.offering-gallery__arrow {
	display: none;
}

/* ---------- Facts column ---------- */

/* A column so the badge, second in the reading order (after the H1),
   is drawn first. */
.offering-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* "Foundation" pill: 26px tall, Poppins 16 in sentence case. Painted
   above the H1 (z-index): drawn first by `order`, it would otherwise
   paint under the H1, whose text backplate in Windows High Contrast
   covers it (Koulen's tall line box reaches up over the badge). */
.offering-hero__badge {
	order: -1;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 1px 11px 0;
	border-radius: var(--radius-pill);
	color: var(--color-badge-text);
	font-size: var(--fs-body);
	line-height: 1.25;
}

.offering-hero__badge--foundation {
	background-color: var(--color-level-foundation);
}

.offering-hero__badge--progression {
	background-color: var(--color-level-progression);
}

.offering-hero__badge--development {
	background-color: var(--color-level-development);
}

.offering-hero__badge--leadership {
	background-color: var(--color-leadership);
	color: var(--color-badge-text-leadership);
}

.offering-hero__title {
	max-width: 100%;
	margin-top: 12.5px;
	color: var(--color-text-on-dark);
	line-height: 1.125; /* 48/54 on phones as drawn */
	overflow-wrap: break-word;
	text-wrap: balance;
}

.offering-hero__summary {
	max-width: 35rem;
	margin-top: 4px;
	font-size: var(--fs-intro);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

/* Format, duration, pathway, group: a 24px icon box, the text 14px
   after it; long values wrap beside the icon. */
.offering-hero__facts {
	display: grid;
	row-gap: 11px;
	margin: 26.5px 0 0;
}

.offering-hero__fact-text {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	line-height: var(--lh-body);
}

.offering-hero__fact-icon {
	width: 24px;
	height: 24px;
	color: var(--color-accent);
}

/* Poppins, not Koulen (see the header): "From" and "per person" 18/27
   on the amount's baseline. The amount's 36/40 line sets the line box
   (40px, as the Koulen line was); its baseline sits 1px lower in it
   than Koulen's did, so the margins here and on the button below
   (-1 / +1) keep the baseline and the button where they were. */
.offering-hero__price {
	margin-top: 33.5px;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-ui-lg);
	line-height: var(--lh-body);
	text-wrap: balance; /* "From £1,250 / per person" rather than a lone word, should it ever wrap */
}

.offering-hero__amount {
	font-size: var(--fs-h3-static);
	font-weight: var(--fw-semibold);
	line-height: 1.111;
}

.offering-hero__action {
	max-width: 100%;
	margin-top: 18.5px;
}

/* The formal Mountain Training courses (Sam 2026-11-03; not designed): the
   white Mountain Training logo beside the button, 48px tall, centred on
   it, after a thin Cream rule from 1024px; below that the logo wraps
   under the button where the two do not fit side by side (phones, the
   tablet column), without the rule. */
.offering-hero__actions--logo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 24px;
	margin-top: 18.5px;
}

.offering-hero__actions--logo .offering-hero__action {
	margin-top: 0;
}

.offering-hero__logo {
	margin: 0;
	line-height: 0;
}

.offering-hero__logo-img {
	display: block;
	width: auto;
	height: var(--hero-course-logo-h);
}

@media (min-width: 1024px) {
	.offering-hero__actions--logo .offering-hero__action + .offering-hero__logo {
		padding-left: 24px;
		border-left: var(--border-hairline) solid var(--hero-course-logo-rule);
	}
}

/* ---------- Tablets: two columns ---------- */

@media (min-width: 768px) {
	.offering-hero__inner {
		padding-top: 39px;
		padding-bottom: 72px;
	}

	.offering-hero__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		align-items: center;
		margin-top: 33px;
	}

	.offering-hero__grid--no-photos {
		grid-template-columns: minmax(0, 1fr);
	}

	.offering-hero__title {
		margin-top: 5px;
	}

	.offering-hero__summary {
		margin-top: 10.5px;
	}

	.offering-hero__facts {
		margin-top: 41px;
	}

	.offering-hero__price {
		margin-top: 21px;
	}

	.offering-hero__action {
		margin-top: 30px;
	}

	.offering-hero__actions--logo {
		margin-top: 30px;
	}
}

/* ---------- Desktop: the drawn split, arrows ---------- */

@media (min-width: 1024px) {
	.offering-hero__grid {
		grid-template-columns: minmax(0, 644fr) minmax(0, 621fr);
		column-gap: 15px;
	}

	.offering-gallery {
		--offering-gallery-gap: clamp(8px, 3.846vw - 31.38px, 24px); /* arrow box to photo: 8 at 1024, 24 from 1440 (the chevron 40px from the photo, as drawn) */
		display: grid;
		grid-template-columns: 48px minmax(0, 466px) 48px;
		grid-template-areas:
			"prev view next"
			". dots .";
		column-gap: var(--offering-gallery-gap);
		justify-content: center;
		align-items: center;
	}

	.offering-gallery__viewport {
		grid-area: view;
	}

	.offering-gallery__dots {
		grid-area: dots;
		margin-top: 28.5px; /* the dots 46px under the photo, as drawn */
	}

	.offering-gallery__arrow {
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: var(--radius-pill);
		background: none;
		color: var(--color-text-on-dark);
		transition: color var(--transition);
	}

	.offering-gallery__arrow[hidden] {
		display: none;
	}

	.offering-gallery__arrow--prev {
		grid-area: prev;
	}

	.offering-gallery__arrow--next {
		grid-area: next;
	}

	.offering-gallery__arrow .icon {
		width: 48px;
		height: 48px;
		transition: transform var(--transition);
	}

	.offering-gallery__arrow:focus-visible {
		outline-offset: 0;
		color: var(--offering-hero-arrow-hover);
	}

	.offering-gallery__arrow[aria-disabled="true"] {
		color: var(--offering-hero-arrow-disabled);
		cursor: default;
	}
}

/* The arrows slide 4px their own way (previous left, next right) on
   hover and keyboard focus, never at an end or under reduced motion,
   and turn Light Orange: the cue without motion. */
@media (min-width: 1024px) and (hover: hover) {
	.offering-gallery__arrow:not([aria-disabled="true"]):hover {
		color: var(--offering-hero-arrow-hover);
	}
}

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

	.offering-gallery__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) {
	.offering-gallery__arrow--prev:not([aria-disabled="true"]):hover .icon {
		transform: translateX(calc(-1 * var(--arrow-nudge)));
	}

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

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

@media (forced-colors: active) {
	.offering-hero__badge {
		border: var(--border-hairline) solid var(--offering-hero-forced-line);
	}

	/* The icons follow the system text colour like their labels. */
	.offering-hero__fact-icon {
		forced-color-adjust: auto;
	}

	.offering-gallery__arrow[aria-disabled="true"] {
		color: var(--offering-hero-forced-disabled);
	}

	/* The dots: main.css (Carousel dots) rings them for this mode. */
}