/* ============================================================
   "Why choose Lake District Mountaineering?" band - the shared photo
   band near the foot of the course and workshop listings (and later
   the course pages); notes listing-pages 3.10 and 4.7, design
   course-list-desktop-v2 y 3166-3587 and course-list-mobile-v2
   y 5432-6059 (course-desktop-v2 and course-mobile-v2 draw the same
   band). Rendered by template-parts/components/why-band.php; copy
   and photo from Theme Settings > Shared sections.
   Full-bleed photo under a navy overlay (--overlay-why: a flat 60%
   since 2026-10-18, for readability; the file draws 18% > 48%),
   a White Koulen H2 and a list of reasons: a 24px Light Orange disc
   with a White tick, then White Poppins with a SemiBold lead-in.
   The band is not a link.
   - Phones (< 768): 628px at 402, as designed - the heading centred
     on three lines (48 on a 56 pitch, caps 41px below the top), the
     reasons 18/27 from 24px in, the text 12px after the disc and
     ending 36px from the edge (306px at 402: the drawn line breaks),
     16px between reasons, the last line 32px above the foot. The
     space above and below grows with the screen to the tablets' 72,
     and the content keeps to a 600px column, centred, so nothing
     jumps at 768. Below 360 the heading shrinks so "MOUNTAINEERING?"
     still fits.
   - Tablet (768-1023): the phone composition with room - the heading
     on two lines ("WHY CHOOSE LAKE DISTRICT / MOUNTAINEERING?"), the
     reasons two lines each in the 600px column, 72px above and below.
   - Desktop (>= 1024): 422px at 1440, as designed - one left-aligned
     block (the heading on one line, a reason per line) centred as a
     whole (the file sits it 16px left of centre: normalised); heading
     caps 120px below the top, discs on a 41px pitch, the text 6px
     after them, the last line 64.5px above the foot. Reasons are 18px
     at 1024 rising to 20 at 1440 (--fs-why-reason) so each stays on
     one line.
   The disc's height against the text differs between the files (its
   top 3px below the first line box's on phones, 0.5px on desktop -
   the course page files agree): both kept.
   The photo is decorative (alt="") and named __bg, not __media, so
   the tablet media guard in main.css never caps it. Phones and
   tablets show it at full height, centred; on desktop it is anchored
   at 68% of its height, the closest match to the file's crop (which
   stretches the photo 20% taller). QH13: retune with the real photo.
   ============================================================ */

.why-band {
	position: relative;
	isolation: isolate;
	padding-block: clamp(32px, 10.929vw - 11.93px, 72px); /* 32 at 402, 72 from 768 */
	background-color: var(--color-surface-dark); /* the file's base fill; all that shows without a photo */
	color: var(--color-text-on-photo);
}

/* ---------- Photo and overlay ---------- */

.why-band__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden; /* the photo box is wider than the band on phones */
}

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

/* The image 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 for the width actually
   drawn (about 1000px for the 402px band). Where the band is wider
   than the photo's shape (desktop), cover trims top and bottom. */
.why-band__img {
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	min-width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 68%;
	transform: translateX(-50%);
}

/* The main photo's focus point (--focus-x / --focus-y, inc/image-focus.php)
   positions it, as object-position would; a phone crop (in a <picture>)
   keeps the framing above below 768px. */
.why-band__bg > .why-band__img {
	left: var(--focus-x, 50%);
	object-position: var(--focus-x, 50%) var(--focus-y, 68%);
	transform: translateX(calc(-1 * var(--focus-x, 50%)));
}

@media (min-width: 768px) {
	.why-band__bg picture > .why-band__img {
		left: var(--focus-x, 50%);
		object-position: var(--focus-x, 50%) var(--focus-y, 68%);
		transform: translateX(calc(-1 * var(--focus-x, 50%)));
	}
}

/* ---------- Content ---------- */

/* Phones: 24px in from the edges, as drawn (the container gutter is
   14 there); wider screens use the container's own gutter. */
.why-band__inner {
	padding-inline: max(var(--gutter), 24px);
}

.why-band__content {
	max-width: 37.5rem;
	margin-inline: auto;
}

/* Greedy line breaks give the drawn "WHY CHOOSE LAKE / DISTRICT /
   MOUNTAINEERING?" at 402 (balance would move "LAKE" down) and keep
   "LAKE DISTRICT" together on wider screens, where it fits on the
   first line (balance would split it there). The size stops at
   6.35em = "MOUNTAINEERING?" fitting the column on narrow phones; a
   longer word typed in Theme Settings breaks rather than overflow. */
.why-band__title {
	color: var(--color-heading-on-dark);
	font-size: min(var(--fs-h1), 15.7vw - 7.6px);
	line-height: calc(56 / 48);
	text-align: center;
	overflow-wrap: break-word;
}

/* role="list" in the template keeps the semantics. */
.why-band__list {
	display: grid;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0 12px 0 0;
	list-style: none;
}

.why-band__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--fs-why-reason);
	line-height: var(--lh-body); /* 18/27, 20/30 */
}

/* The disc sits on the first line (reasons wrap on phones). */
.why-band__check {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--icon-check);
	height: var(--icon-check);
	margin-top: 3px;
	border-radius: 50%;
	background-color: var(--color-check-disc);
	color: var(--color-check-tick);
}

/* The theme's tick (the split card's checklist uses it too), thickened
   by a hairline stroke (0.5px at this size) towards the weight of the
   files' calligraphic tick, which is also a little taller. */
.why-band__check .icon {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 8px;
	stroke-linejoin: round;
}

.why-band__text {
	flex: 1 1 auto;
	min-width: 0;
}

.why-band__lead {
	font-weight: var(--fw-semibold);
}

/* ============================================================
   Tablet: the phone composition with room
   ============================================================ */

@media (min-width: 768px) {
	.why-band__list {
		margin-top: 32px;
		padding-right: 0;
	}

	/* No one-word last line where no design sets the breaks. */
	.why-band__text {
		text-wrap: pretty;
	}
}

/* ============================================================
   Desktop: one left-aligned block, centred as a whole
   ============================================================ */

@media (min-width: 1024px) {
	/* 110 + the 67.5px heading box + 27 + four 30px lines 11 apart +
	   64.5 = 422 at 1440. */
	.why-band {
		padding-block: 110px 64.5px;
	}

	/* As wide as its longest line (the heading or a reason). */
	.why-band__content {
		width: fit-content;
		max-width: 100%;
	}

	.why-band__title {
		line-height: var(--lh-display);
		text-align: left;
		text-wrap: pretty;
	}

	.why-band__list {
		gap: 11px;
		margin-top: 27px;
	}

	/* The text 6px after the disc, as drawn (12 on phones). */
	.why-band__item {
		gap: 6px;
	}

	.why-band__check {
		margin-top: 0.5px;
	}
}