/* ============================================================
   Inner-page hero (template-parts/components/page-hero.php) - the
   courses and workshops listing and the offering pages; reusable by
   any inner page. Flat Secondary Navy, contained, left aligned
   (List v2: desktop y 129-457, mobile y 127-705; design-system 5.11).
   - Breadcrumb: Poppins 16 Grey Mid with the current page Cream from
     768px; 14 and all Grey Mid on phones (as drawn). Small chevron
     separators (aria-hidden). Links turn Cream and underline on hover
     (where the pointer can hover; at rest on touch screens, the Brand
     rule for plain text links).
   - Eyebrow (main.css; its Light Orange through
     --color-eyebrow-on-hero, 4.42:1 here, QH5), the H1 in Koulen Cream
     (--fs-h1: 48 phones, 60 desktop; two lines at 56px on phones as
     drawn), the intro Poppins Medium Cream (--fs-intro: 18/27 phones,
     20/30 desktop; no single word left alone on its last line).
   - Kept modest in height (Sam asked for shallower inner heroes, 18
     Sept): the designed desktop rhythm (39 / 55 / 15 / 87 between
     the spans), 44px under the intro's last line (50 on phones, where
     the drawn 77 is trimmed). Content sits on the site container
     (the mobile design's 24px hero inset is normalised to the
     gutter the header logo and the cards below use).
   ============================================================ */

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

.page-hero__inner {
	padding-top: 33px;
	padding-bottom: 50px;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-breadcrumb);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.breadcrumb__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

@media (hover: hover) {
	.breadcrumb__link:hover {
		color: var(--color-breadcrumb-current);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}

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

/* ">" between the items: 4 x 8 ink, 6px either side (as drawn). */
.breadcrumb__separator {
	flex: none;
	width: 12px;
	height: 12px;
	margin-inline: 3px;
	color: var(--color-breadcrumb);
}

/* ---------- Eyebrow, heading, intro ---------- */

.page-hero__eyebrow {
	margin-top: 16px;
	color: var(--color-eyebrow-on-hero);
}

.page-hero__title {
	margin-top: 16px;
	color: var(--color-text-on-dark);
	font-size: var(--fs-h1);
	line-height: 1.167; /* 48/56 on phones as drawn; one line of 60 on desktop */
	overflow-wrap: break-word;
}

.page-hero__intro {
	margin-top: 15px;
	font-size: var(--fs-intro);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

.page-hero__intro p + p {
	margin-top: 1em;
}

/* ---------- Tablet and desktop: 16px trail, current page Cream ---------- */

@media (min-width: 768px) {
	.breadcrumb__list {
		font-size: var(--fs-body);
	}

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

@media (min-width: 1024px) {
	.page-hero__inner {
		padding-top: 38px;
		padding-bottom: 44px;
	}

	.page-hero__eyebrow {
		margin-top: 33px;
	}

	.page-hero__title {
		margin-top: 2px;
		line-height: 1.25;
	}

	.page-hero__intro {
		margin-top: 6px;
	}
}

@media (forced-colors: active) {
	.breadcrumb__link {
		text-decoration: underline;
	}
}

/* ---------- With a button (the guiding list page's "Enquire now",
   guiding-list-desktop-v2 y 466-522) ----------
   The global large primary button (.btn--lg, 57px), its top 18px under
   the intro's last line box (as drawn at 1440: 54.5px under the text
   line's top), 50px above the hero's foot (as drawn); phones and
   tablets are not designed: the same. The ring of keyboard focus is the
   global Light Orange (6.05:1 on Secondary Navy). The button has the soft
   halo the design draws (.btn--on-photo, as the guided day hero's), and
   the long title balances its lines (no "DAYS" alone on the last). */

.page-hero__actions {
	margin-top: 18px;
}

.page-hero--cta .page-hero__inner {
	padding-bottom: 50px;
}

.page-hero--cta .page-hero__title {
	text-wrap: balance;
}

/* ---------- With a photo (the About page, about-desktop-v3 y 129-692,
   about-mobile-v3 y 127-991) ----------
   Phones: the photo under the trail, full width (370 x 300 at 402, radius
   16), then the text. From 768px: the photo on the left (466 x 379 at
   1440, radius 20), the text beside it from its top, 48px apart (the
   designed 466 : 763 split of the container); the title on two lines of
   60 at 1440 (pitch 65, as drawn). Tablets are not designed: the same split,
   narrower. The photo is framed by its focus point (Media > Photo focus). */

.page-hero--media .page-hero__inner {
	padding-bottom: 50px;
}

.page-hero__split {
	display: grid;
	margin-top: 32px;
}

/* (Grid child named __media: reset main.css's tablet media guard, whose
   auto margins would shrink it.) */
.page-hero__media {
	overflow: hidden;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	aspect-ratio: 370 / 300;
	border-radius: var(--radius-md);
}

.page-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.page-hero--media .page-hero__eyebrow {
	margin-top: 36px;
}

.page-hero--media .page-hero__intro {
	margin-top: 24px;
}

@media (min-width: 768px) {
	.page-hero__split {
		grid-template-columns: minmax(0, 466fr) minmax(0, 763fr);
		column-gap: 48px;
		align-items: start;
		margin-top: 40px;
	}

	.page-hero__media {
		aspect-ratio: 466 / 379;
		border-radius: var(--radius-lg);
	}

	.page-hero--media .page-hero__eyebrow {
		margin-top: 0;
	}

	.page-hero--media .page-hero__title {
		line-height: 1.1;
	}
}

/* Tablets (not designed): in the narrower column the intro runs longer
   than the photo is tall, so the photo takes the text's height instead of
   its own shape (never under 220px). */
@media (min-width: 768px) and (max-width: 1023px) {
	.page-hero__split {
		align-items: stretch;
	}

	.page-hero__media {
		aspect-ratio: auto;
	}

	.page-hero__img {
		min-height: 220px;
	}
}

@media (min-width: 1024px) {
	.page-hero--media .page-hero__inner {
		padding-bottom: 72px;
	}

	.page-hero__split {
		margin-top: 48px;
	}

	.page-hero--media .page-hero__title {
		margin-top: 8px;
		line-height: 1.083;
	}

	.page-hero--media .page-hero__intro {
		margin-top: 28px;
	}
}