/* ============================================================
   Offering card - one course or workshop
   (template-parts/components/offering-card.php). Homepage brief 4.5,
   notes home-desktop 3.7 / home-mobile 3.7, listing-pages section 5:
   the same card serves Popular Courses & Workshops, the listing page
   and "Your next step" on course pages.
   - The card fills its grid cell (it is a size container, so give it
     a definite width: a grid or flex cell, never shrink-to-fit).
   - White, 1px Border Warm inside the 292 x 458 (desktop) or
     318 x 458 (phone) box, radius 16. Photo inside the border with the
     top corners rounded: 290 x 215 from 768px (the desktop ratio, kept
     on tablets), 316 x 215 on phones. Level badge 12px in from the
     card's top-left corner.
   - Text inset 18px from both edges (the designed divider ran 18 / 13
     px in: made symmetric, brief 12). Vertical rhythm measured on
     both artboards (identical): category caps 25px under the photo,
     title caps 29px lower, summary 14/21 straight under the title,
     meta row 9px under it, divider, price row, 29px under the price
     (card 458 tall with a one-line title and three summary lines).
   - Equal heights (QH25): in a row of cards the meta row, divider and
     price row are pinned to the bottom; long titles wrap. The price
     line always keeps one 18px line (even with no price), so the
     dividers in a row stay level.
   - Narrow cards (container queries on the card's own width, so any
     grid gets them): under 312px wide (the four desktop columns,
     phones under 396px) the CTA drops its format word ("View", as
     designed) so the per-person price and the CTA keep one line;
     under 240px the CTA moves under the price.
   - Grids: give the list the class .offering-card-grid and a "From"
     price no longer leaves its card's divider out of line (below).
   - Hover / focus: the "View" arrow turns Dark Orange and slides right
     and the photo zooms in slowly (no underlines); the focus ring is
     drawn round the whole card.
   - Guided days (.offering-card--guiding, the guiding list page: Guiding
     - list page v2): the season badge (SUMMER Light Orange, WINTER
     Primary Navy, as drawn; the summer text Navy for AA), no pathway
     line, "Guiding" beside the duration, "View" alone, and the body on
     Grey Faint #F2F2F2 as drawn (course cards stay White). The title
     sits 33px under the photo and 14px over the summary, as drawn:
     where the pathway line and the title were, so the summary and the
     price row keep their places.
   ============================================================ */

.offering-card {
	container: offering-card / inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* ---------- Photo (shown first; last in the source) ---------- */

/* Always the card's full width: the card itself is sized by its grid,
   so main.css's tablet guard on [class*="__media"] (640px cap, auto
   margins) must not shrink a photo-less placeholder to its icon. */
.offering-card__media {
	order: -1;
	width: 100%;
	max-width: none;
	overflow: hidden;
	aspect-ratio: 316 / 215;
	border-radius: calc(var(--radius-md) - var(--border-hairline)) calc(var(--radius-md) - var(--border-hairline)) 0 0;
	background-color: var(--color-surface-dark-alt); /* no photo: a quiet navy block */
	isolation: isolate; /* keeps the zoomed photo inside the rounded corners (Safari) */
}

/* Zooms in slowly on hover and keyboard focus (below). The box is a
   little wider than the 4:3 crop: the photo's focus point (--focus-x /
   --focus-y, inc/image-focus.php) decides what is trimmed. */
.offering-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
	transition: transform var(--transition-zoom);
}

/* Tone on tone: a mountain mark in the darker navy surface colour. */
.offering-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--color-surface-dark);
}

.offering-card__placeholder .icon {
	width: 56px;
	height: 56px;
}

/* ---------- Level badge, over the photo ---------- */

/* 12px from the card's outer edge = 11px inside the border. z-index
   keeps it above the photo (an isolated layer that zooms); clicks and
   hovers pass through to the card's stretched link. */
.offering-card__badge {
	position: absolute;
	top: calc(12px - var(--border-hairline));
	left: calc(12px - var(--border-hairline));
	z-index: 1;
	pointer-events: none;
	display: flex;
	align-items: center;
	height: 25px;
	padding-inline: 10px;
	border-radius: var(--radius-pill);
	color: var(--color-badge-text);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tag);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

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

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

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

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

/* A guided day's season. */
.offering-card__badge--summer {
	background-color: var(--color-badge-summer);
	color: var(--color-badge-summer-text);
}

.offering-card__badge--winter {
	background-color: var(--color-badge-winter);
	color: var(--color-badge-winter-text);
}

/* ---------- Text ---------- */

/* 20px top: Chrome sets Poppins and Koulen baselines about 1px below
   their exact metrics, so this lands the category and title caps
   where the designs draw them: about 241 and 271px below the card's
   top edge (24-25.5 and 54-55px under the photo, which is 0.7px
   taller than drawn at 1440). */
.offering-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px calc(var(--card-pad) - var(--border-hairline)) 21px;
}

/* Pathway: shown above the title (it follows the title in the source). */
.offering-card__category {
	order: -1;
	margin-bottom: 10px;
	color: var(--color-accent-text-light);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tag);
	line-height: var(--lh-body);
	text-transform: uppercase;
}

.offering-card__title {
	color: var(--color-heading);
	font-family: var(--font-display);
	font-size: var(--fs-card-title);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: var(--lh-card-title);
	text-transform: uppercase;
	text-wrap: balance;
}

/* The hover underline (Miles 2026-10-11): a line drawn in from the
   left under every line of the title (a background, so it follows a
   wrapped title line by line and can animate; set on hover / focus
   below). */
.offering-card__link {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--color-card-title-underline), var(--color-card-title-underline));
	/* Koulen's line box runs well below its caps: lifted to sit just
	   under the letters. */
	background-position: 0 calc(100% - 0.34em);
	background-repeat: no-repeat;
	background-size: 0 var(--card-title-underline-h);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
	.offering-card__link {
		transition: background-size var(--transition-underline);
	}
}

.offering-card__summary {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

/* ---------- Meta, divider, price: pinned to the card's bottom ---------- */

.offering-card__footer {
	margin-top: auto;
	padding-top: 9px;
}

.offering-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	color: var(--color-accent-text-light);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.offering-card__meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* The format stays right-aligned when a long duration ("Afternoon /
   evening") wraps it to its own line, or when there is no duration. */
.offering-card__meta-item--format {
	margin-left: auto;
}

/* Clock ring about 18px, book about 15 x 18 (both drawn inside a 22px
   box): the negative margin lines the ink up with the text edges. */
.offering-card__meta .icon {
	width: 22px;
	height: 22px;
	margin: -2px;
}

/* The divider: 1px Grey Light across the text width. */
.offering-card__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin-top: 9px;
	padding-top: 14px;
	border-top: var(--border-hairline) solid var(--color-divider);
}

/* Always one 18px line tall (27px), even empty or with plain wording,
   so every card's divider sits at the same height. */
.offering-card__price {
	min-height: calc(var(--fs-ui-lg) * var(--lh-body));
	color: var(--color-text);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.offering-card__amount {
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

/* "View course ->": visual only; the title is the card's link. */
.offering-card__cta {
	margin-left: auto;
	color: var(--color-link);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	white-space: nowrap;
}

/* A card without a usable link keeps the CTA's space but hides it. */
.offering-card__cta--placeholder {
	visibility: hidden;
}

/* ---------- Hover and focus ----------
   Hovering anywhere on the card, or keyboard-focusing its link, turns
   the "View" arrow Dark Orange and slides it right, like every arrow on
   a hover target, and zooms the photo in slowly (Miles 2026-10-05);
   the title's underline draws in from the left (Miles 2026-10-11). The colour is the cue under reduced motion,
   when nothing moves; the hover slide and zoom need a pointer that can
   hover (a tap leaves nothing shifted). Focus
   is :has(... :focus-visible), so a mouse click (Ctrl+click to a new
   tab) leaves nothing shifted; it sits inside :is() or in its own rule
   so an engine without :has() still keeps the :hover cue. The CTA is
   an arrow-link span, so main.css transitions it. */

.offering-card:is(:hover, :has(.offering-card__link:focus-visible)) .offering-card__cta .icon {
	color: var(--color-arrow-hover-on-light);
}

/* The title's underline draws in (shown at once under reduced motion). */
@media (hover: hover) {
	.offering-card:hover .offering-card__link {
		background-size: 100% var(--card-title-underline-h);
	}
}

.offering-card:has(.offering-card__link:focus-visible) .offering-card__link {
	background-size: 100% var(--card-title-underline-h);
}

@media (prefers-reduced-motion: no-preference) {
	.offering-card:has(.offering-card__link:focus-visible) .offering-card__cta .icon {
		transform: translateX(var(--arrow-nudge));
	}

	.offering-card:has(.offering-card__link:focus-visible) .offering-card__img {
		transform: scale(var(--image-zoom));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.offering-card:hover .offering-card__cta .icon {
		transform: translateX(var(--arrow-nudge));
	}

	.offering-card:hover .offering-card__img {
		transform: scale(var(--image-zoom));
	}
}

/* Windows High Contrast tells links apart by shape: underline the title. */
@media (forced-colors: active) {
	.offering-card__link {
		background-image: none;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}

/* The ring goes round the card (the link's stretched ::after), not
   round the title text. */
.offering-card__link:focus-visible {
	outline: none;
}

.offering-card__link:focus-visible::after {
	border-radius: calc(var(--radius-md) - var(--border-hairline));
	outline: 2px solid var(--color-focus-light);
	outline-offset: 3px;
}

/* ---------- Narrow cards ---------- */

/* Container widths are inside the 1px border (card width - 2); the
   text column is 34px narrower. "£175 per person" + "View workshop"
   needs about 267px of text column, so below a 312px card the format
   word drops ("View", as designed): the four desktop columns (292 at
   1440) and phones under 396px. */
@container offering-card (width < 310px) {
	.offering-card__cta-format {
		display: none;
	}
}

/* Under a 240px card even "£150 per person" + "View" do not share a
   line: "View" moves under the price, right-aligned, on every card. */
@container offering-card (width < 238px) {
	.offering-card__price {
		flex-basis: 100%;
	}
}

/* A "From" price ("From £500 per person") needs a 274px card to share
   its line with "View". In a grid (.offering-card-grid on the list),
   if any card has one, every card narrower than that puts "View" under
   its price, so the dividers in a row stay level. */
@container offering-card (width < 272px) {
	.offering-card-grid:has(.offering-card--from) .offering-card__price {
		flex-basis: 100%;
	}
}

/* ---------- Guided days ---------- */

.offering-card--guiding {
	background-color: var(--color-card-guiding-bg);
}

/* No pathway line: the title 13px lower than that line would start and
   14px further from the summary (as drawn), so the summary, meta and
   price sit where a course card has them (1px higher). */
.offering-card--guiding .offering-card__body {
	padding-top: 33px;
}

.offering-card--guiding .offering-card__title {
	margin-bottom: 14px;
}

/* "From £350" + "View" (no "per person", no format word) share their
   line down to a 200px card: the "From" rule above is for the course
   cards' longer prices. */
@container offering-card (width >= 200px) {
	.offering-card--guiding .offering-card__price,
	.offering-card-grid:has(.offering-card--from) .offering-card--guiding .offering-card__price {
		flex-basis: auto;
	}
}

/* Two prices in one ("From £290 1:1 / £320 1:2", Sam's guiding cards) do
   not leave room for "View": the price takes the whole line and "View"
   goes under it, right-aligned - on every card of a grid that has one, so
   the dividers in a row stay level (after the rule above, which it
   overrides). The :has() rule stands alone, so an engine without :has()
   still keeps the card's own rule. */
.offering-card--wide-price .offering-card__price {
	flex-basis: 100%;
}

.offering-card-grid:has(.offering-card--wide-price) .offering-card .offering-card__price {
	flex-basis: 100%;
}

/* ---------- Tablet and desktop: the desktop photo ratio ---------- */

@media (min-width: 768px) {
	.offering-card__media {
		aspect-ratio: 290 / 215;
	}
}