/* ============================================================
   CTA band "Your next mountain is waiting" - homepage (Page
   Sections layout "cta_band", brief 4.12; notes home-desktop
   3.14 and home-mobile 3.14; design desktop y 7744-8164, mobile
   y 12417-13037). Rendered by template-parts/components/
   cta-band.php, so FAQ and 404 reuse it.
   Full-bleed photo under the navy overlay; a centred H2 (Koulen,
   --fs-h1: 48 on phones to 60 at 1440, line-height 1.125), the
   SemiBold 18 paragraph, the large button and "Get In Touch" with
   the hero's arrow (sizes, weights and gaps mirror the hero's
   secondary link; never underlined, as designed; on hover and focus
   the arrow turns Light Orange and slides right, label Cream).
   - Phones (< 768): 620px at 402: heading on two lines (box top
     118px down), body 18/27, button then link stacked and centred
     (the file sits them about 10px right of centre: normalised),
     link line box 107px off the bottom.
   - Tablet (768-1023): the desktop composition - heading on one
     line at the clamp size (53px at 834), the paragraph in three
     balanced lines, actions on one row (about 441px tall at 834).
   - Desktop (>= 1024): 421px at 1440: heading caps 124px below
     the top, body 18/28 in two lines, centred (the file draws it
     28px left of centre: normalised), button bottom 73px off the
     bottom, link 34px after the button; the row is centred as a
     group (the file sits it 12px left of centre: normalised).
   A spaced hyphen in the paragraph ("courses - or") is tied to the
   word before it in the template, so no line starts with "-".
   The photo is decorative (alt="") and named __bg, not __media, so
   the tablet media guard in main.css never caps it.
   ============================================================ */

.cta-band {
	position: relative;
	isolation: isolate;
	padding-block: 118px 107px;
	background-color: var(--color-surface-dark); /* shows only if there is no photo */
	color: var(--color-text-on-photo);
	text-align: center;
}

.cta-band__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden; /* the photo box can be wider than the band (below) */
}

.cta-band__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--overlay-cta);
}

/* The photos are uploaded at each design's framing (desktop 1440 x
   421, phones 402 x 620, both at 2x). Phones: plain cover (the phone
   crop fits; without one, the wide photo is trimmed hard but stays a
   light download). From 768 see below. */
.cta-band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The main photo's focus point (--focus-x / --focus-y, inc/image-focus.php)
   positions it; a phone crop (in a <picture>) keeps its own framing. */
.cta-band__bg > .cta-band__img {
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

/* ---------- Heading and paragraph ---------- */

/* pretty: "YOUR NEXT MOUNTAIN / IS WAITING", never "... IS / WAITING"
   (430-600px). Not balance: 402 keeps the designed break. */
.cta-band__title {
	color: var(--color-heading-on-dark);
	font-size: var(--fs-h1);
	line-height: var(--lh-display);
	text-wrap: pretty;
}

/* 20px under the heading box: 37px from the caps to the text, as
   designed. 60rem keeps the desktop's two lines at 1440. */
.cta-band__body {
	max-width: 60rem;
	margin: 20px auto 0;
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

.cta-band__body p + p {
	margin-top: 16px;
}

/* ---------- Actions: button + "Get In Touch" ---------- */

/* Phones: the button 21px under the text, then the link's line box
   27px under the button (34px to its caps), as designed. */
.cta-band__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 27px;
	margin-top: 21px;
}

/* Phones: Bold 18 with the bolder, larger icon arrow, as on the
   hero (home-mobile 2.7); the 12px gap puts the arrow 14px after
   "Touch", as drawn. */
.cta-band__link {
	gap: 12px;
	color: var(--color-link-on-dark);
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-body);
}

.cta-band__link .icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.4;
}

/* Hover and keyboard focus, the treatment for links on photos (the
   hero's "Browse Pathways" matches): the label STAYS Cream - Light
   Orange text over the photo is only about 3.3:1 at 18px - while the
   arrow turns Light Orange and slides right (the arrow-link rule in
   main.css). No underline is added (this link has none; the hero
   keeps its designed one). */
.cta-band__link:hover .icon,
.cta-band__link:focus-visible .icon {
	color: var(--color-link-hover-on-dark);
}

/* ============================================================
   Tablet and up: the desktop composition
   ============================================================ */

@media (min-width: 768px) {
	.cta-band {
		padding-block: 114px 73px;
	}

	/* The box takes the band's height and the photo's own width (never
	   narrower than the band), centred: the same crop as cover, but
	   WordPress's sizes="auto" then fetches a file wide enough for the
	   trimmed photo (1536w at 834 rather than 1024w); the template's
	   fallback sizes describes the same width for browsers without
	   "auto". Once the band is wider than the photo (beyond 1440 for
	   the placeholder) cover trims top and bottom: anchored at the top
	   to keep the climber's helmet (QH13: retune with the real photo). */
	.cta-band__bg .cta-band__img {
		inset: 0 auto auto var(--focus-x, 50%);
		width: auto;
		min-width: 100%;
		max-width: none;
		object-position: var(--focus-x, 50%) var(--focus-y, 0%);
		transform: translateX(calc(-1 * var(--focus-x, 50%)));
	}

	/* 18/28. 16.5px under the 67.5px heading box: 38px from the caps
	   to the text, and the band totals 421px at 1440, as designed.
	   Tablets set it in three lines: balance them (desktop goes back
	   to the designed long first line below). */
	.cta-band__body {
		margin-top: 16.5px;
		line-height: calc(28 / 18);
		text-wrap: balance;
	}

	/* One row, centred as a group; 40px from the text to the button. */
	.cta-band__actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px 34px;
		margin-top: 37px;
	}

	/* SemiBold with the thin 18px arrow, 10px after the label, as on
	   the hero (13-14px of clear space, as drawn). */
	.cta-band__link {
		gap: 10px;
		font-weight: var(--fw-semibold);
	}

	.cta-band__link .icon {
		width: 18px;
		height: 18px;
		stroke-width: 2;
	}
}

/* ============================================================
   Desktop: two lines at 1440 - 917px then 675px, as designed
   ============================================================ */

@media (min-width: 1024px) {
	.cta-band__body {
		text-wrap: pretty;
	}
}