/* ============================================================
   Locations - "Course and Workshop locations" (Page Sections layout
   "locations", brief 4.10; notes home-desktop 3.12 and home-mobile
   3.12; renders home-desktop-v4 y 6446-7069, home-mobile-v4
   y 10245-11226)
   Full-bleed photo under a Cream wash; the section header (eyebrow,
   H2, body); two frosted panels (White 60%, no border, no blur,
   QH9), each a Koulen 32 region title over a pin list on a 33px
   row pitch.
   - Phones (< 768): copy, then the panels stacked at the 42px card
     inset (318 wide at 402; 314 drawn at a 44px inset), 28px apart;
     below 402 the inset gives way first (down to the text gutter) so
     the panels keep 318px and THE SCOTTISH HIGHLANDS stays on one
     line, the title easing to about 29px only at 320. The mobile
     file's exact wash: Cream 60% to 65% of the height, clear by 93%,
     tilted 6 degrees.
   - Tablet (768-1023): copy across the top (capped at the desktop
     676px measure), then the two panels side by side; the same
     top-down wash keeps the copy legible.
   - Desktop (>= 1024): copy left (up to 676px), panels right (420
     wide, 26px apart, tops level with the eyebrow rule as drawn);
     the wash runs at 60% to 42px past the centre line (the end of
     the copy column at 1440) and fades out over the next 303px,
     recovered from the render against the placeholder photo
     (QH9: the PDF does not export it).
   Section padding is the standard 112 / 80 (the design's 89 / 74
   on desktop and 59 / 99 on phones are normalised, brief 2.1, 12).
   The photo framing is set for the placeholder (QH13): retune the
   object-position values when the photo changes.
   ============================================================ */

.locations {
	position: relative;
	isolation: isolate;
	background-color: var(--color-surface-warm); /* shows only if there is no photo */
	color: var(--color-text);
}

/* Photo + wash. Named __bg, not __media, so the tablet media guard in
   main.css never caps this full-bleed image. */
.locations__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

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

/* The img is laid out at the size it is drawn - the band's height times
   the photo's aspect, never narrower than the band - instead of being
   stretched over the band with object-fit. WordPress adds sizes="auto"
   to lazy images, and auto means the img's layout width, so this makes
   the browser fetch a file wide enough for the photo actually drawn
   (the landscape photo is about twice the band's width on tablets).
   The left / translate pair anchors it across the way object-position
   would (X% of the overflow on each side); object-fit only crops top
   and bottom on bands wider than the photo's aspect (above 1440).
   Phones without a phone crop: the placeholder's climber (about 58%
   across) kept in view. A photo's focus point (--focus-x / --focus-y,
   inc/image-focus.php) replaces these framings. */
.locations__img {
	position: absolute;
	top: 0;
	left: var(--focus-x, 57%);
	width: auto;
	min-width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% var(--focus-y, 50%);
	transform: translateX(calc(-1 * var(--focus-x, 57%)));
}

/* The phone crop (its own width and height on the <source>, so the img
   takes its portrait aspect) is cut to the mobile framing: centred. */
.locations--mobile-photo .locations__img {
	left: 50%;
	transform: translateX(-50%);
}

/* ---------- Header ---------- */

/* Body end to the first panel: 28px on phones (27 drawn). */
.locations__header {
	margin-bottom: 28px;
}

/* No regions: the section padding closes the band. */
.locations__header:last-child {
	margin-bottom: 0;
}

/* The designed break on desktop and tablet: "Learn in the Lake District
   and / Scottish Highlands"; phones break by width as drawn. */
.locations__header .section-header__title {
	max-width: 14em;
}

/* ---------- Panels ---------- */

/* Phones: stacked at the card inset (x 42-360 at 402). Narrower phones
   keep the 318px panel and shrink the inset instead (36 at 390, 21 at
   360), never past the text gutter (margin 0). */
.locations__regions {
	display: grid;
	gap: 28px;
	margin: 0 clamp(0px, (100% - 318px) / 2, var(--inset-card-mobile) - var(--gutter));
	padding: 0;
	list-style: none;
}

/* About 420 x 213: title caps 28px under the top edge, the last row
   about 27px above the bottom (ink), 16px side inset. Long unbroken
   strings wrap instead of spilling out. */
.locations__panel {
	padding: 23px 16px 21px;
	border-radius: var(--radius-md);
	background-color: var(--color-surface-frosted);
	overflow-wrap: anywhere;
}

/* Koulen 32, Navy; "the Lake District" renders as THE LAKE DISTRICT.
   32px from 352px up; on the narrowest phones (panel under 318px) it
   eases to 29px at 320 so THE SCOTTISH HIGHLANDS (283.6px at 32) keeps
   one line. Longer titles wrap (36px lines). */
.locations__title {
	color: var(--color-heading);
	font-size: clamp(28px, 9.1vw, var(--fs-location));
	line-height: 1.125;
}

/* Rows on a 33px pitch, indented 11px under the title: pin box (20px,
   about 14 x 17 of ink) then the place 8px after it. */
.locations__places {
	margin: 11px 0 0;
	padding: 0 0 0 11px;
	list-style: none;
}

.locations__place {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.locations__place + .locations__place {
	margin-top: 9px;
}

/* Light Orange filled pin; its light centre is a cut-out showing the
   panel. 4px down so it centres on the place's lowercase letters. */
.locations__pin {
	width: 20px;
	height: 20px;
	margin-top: 4px;
	color: var(--color-accent);
}

/* Places link only when the editor sets a link (QH23): Navy text,
   underlined (interactive text, Brand rule); hover changes the
   underline colour only. */
.locations__link {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color var(--transition);
}

.locations__link:hover {
	text-decoration-color: var(--color-accent);
}

.locations__link:focus-visible {
	outline-color: var(--color-focus-light);
}

/* ============================================================
   Tablet: copy across the top, panels side by side
   ============================================================ */

@media (min-width: 768px) {
	/* The landscape photo again (the phone crop stops at 767px), drawn
	   about twice the band's width: keep the climber (about 58% across)
	   in the frame. */
	.locations__img,
	.locations--mobile-photo .locations__img {
		left: var(--focus-x, 57%);
		transform: translateX(calc(-1 * var(--focus-x, 57%)));
	}

	.locations__header {
		max-width: 42.25rem;
		margin-bottom: 40px;
	}

	.locations__regions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px;
		margin-inline: 0;
	}
}

/* ============================================================
   Desktop: copy left, panels right
   ============================================================ */

@media (min-width: 1024px) {
	/* The photo is cut to the desktop framing (1440 x 624); the band is
	   a little taller here, so the sides trim evenly. */
	.locations__img,
	.locations--mobile-photo .locations__img {
		left: var(--focus-x, 50%);
		transform: translateX(calc(-1 * var(--focus-x, 50%)));
	}

	.locations__bg::after {
		background: var(--overlay-locations-desktop);
	}

	/* Copy column up to 676px (the body's designed 672px measure plus
	   room for Chrome's slightly wider set, so the five lines break as
	   drawn), panel column 420px, pushed apart: at 1440 the copy spans
	   x 80-756 and the panels x 940-1360. Narrower desktops keep the
	   panels at 420 and narrow the copy. */
	.locations__inner {
		display: grid;
		grid-template-columns: minmax(0, 42.25rem) minmax(0, 26.25rem);
		justify-content: space-between;
		align-items: start;
		column-gap: 40px;
	}

	.locations__header {
		max-width: none;
		margin-bottom: 0;
	}

	/* Stacked again, the first panel's top level with the eyebrow rule
	   (8px below the eyebrow's line box, as drawn: 98 against 89). */
	.locations__regions {
		grid-template-columns: none;
		margin-top: 8px;
	}
}