/* ============================================================
   WHAT'S ON — LANDING & DETAIL PAGES

   ⚠ STATIC FILE — served directly, never processed by Razor.
   Always plain @media / @keyframes. @@media produces literal "@@media"
   in the browser: invalid CSS, every breakpoint fails silently. (CLAUDE §7)
   ============================================================ */

/* ── DELETED 2026-07-29 — the old `.sc-wo-filter*` dropdown filter bar ──
   18 selectors removed after the Phase 0b grep proved no caller: the only
   repo reference left is id="sc-wo-filters" on the new <details> rail, and
   an *id* never matches the `.sc-wo-filters` *class* selector. site.js has
   zero `sc-wo` references. Superseded by the left rail (.sc-wo-rail) below.
   Old copy preserved at _backups/css-2026-06-09/whatson.css.
   ────────────────────────────────────────────────────────────────────── */

/* ============================================================
   LISTING LAYOUT — left filter rail + results column (2026-07-29)
   ============================================================ */

.sc-wo-listing { padding-top: 32px; }

.sc-wo-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* ── Left rail ───────────────────────────────────────────── */
.sc-wo-rail { position: sticky; top: calc(var(--sc-nav-height) + 24px); }

/* The rail ships as an OPEN <details> so a no-JS visitor still gets working
   filters; site JS closes it on small screens only. Desktop hides the summary
   entirely, so <details> behaves as a plain container. */
.sc-wo-rail__panel { border: 0; }
.sc-wo-rail__summary { display: none; }
.sc-wo-rail__title {
	font: 800 13px/1.2 var(--sc-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sc-text);
	margin: 0 0 22px;
}

.sc-wo-group { margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid #e8e8e8; }
.sc-wo-group:last-of-type { border-bottom: 0; }
.sc-wo-group__label {
	font: 700 11px/1 var(--sc-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin: 0 0 12px;
}

.sc-wo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sc-wo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sc-white);
	border: 1px solid #d8d8d8;
	border-radius: var(--sc-radius-btn);
	padding: 7px 14px;
	font: 700 11px/1 var(--sc-font);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sc-plum);
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}
.sc-wo-chip:hover { border-color: var(--sc-plum); }
.sc-wo-chip:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 2px; }
.sc-wo-chip.is-active {
	background: var(--sc-plum);
	border-color: var(--sc-plum);
	color: var(--sc-white);
}
.sc-wo-chip__icon { font-size: 15px; line-height: 1; }
.sc-wo-chip__label { line-height: 1; }

.sc-wo-rail__clear {
	display: inline-block;
	margin-top: 4px;
	font: 700 12px/1 var(--sc-font);
	letter-spacing: .06em;
	color: var(--sc-plum);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sc-wo-rail__clear:hover { color: var(--sc-text); }

/* ── Results column ──────────────────────────────────────── */
.sc-wo-count {
	font: 700 12px/1 var(--sc-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6a6a6a;
	margin: 0 0 18px;
}

/* ── Tile grid — CSS Grid (equal height rows) ─────────────── */
.sc-wo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* ── Featured panel — full-width child of the tile grid ──── */
.sc-wo-feature {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	background: var(--sc-plum);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	margin: 8px 0;
}
.sc-wo-feature--nomedia { grid-template-columns: minmax(0, 1fr); }
.sc-wo-feature__media { position: relative; min-height: 260px; }
.sc-wo-feature__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sc-wo-feature__body {
	padding: 40px clamp(24px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.sc-wo-feature__eyebrow {
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sc-gold);
	margin: 0 0 12px;
}
.sc-wo-feature__heading {
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	line-height: 1.15;
	color: var(--sc-white);
	margin: 0 0 12px;
}
.sc-wo-feature__text {
	font: 400 15px/1.7 var(--sc-font);
	color: rgba(255,255,255,.82);
	margin: 0 0 24px;
	max-width: 46ch;
}
/* The CTA is a global `.sc-btn`, which is `white-space: nowrap`. Inside a
   SINGLE-COLUMN panel a long label ("Join now — it's free") is wider than the
   body, and `.sc-wo-feature`'s `overflow: hidden` (there for the image's rounded
   corner) CLIPS it rather than letting it overflow visibly — so it reads as a
   half-drawn button, not as a layout error. Allow wrapping and cap the width. */
.sc-wo-feature__cta { margin-top: 0; max-width: 100%; white-space: normal; }

/* Filling a row alongside tiles — drop the band's vertical margin so its top and
   bottom edges line up with the tiles beside it. (Spans are per-breakpoint and
   live in the Responsive section; margin is not, so it belongs here.) */
.sc-wo-feature--fill3-1,
.sc-wo-feature--fill3-2,
.sc-wo-feature--fill2-1 { margin: 0; }

/* ── Tile — flex column so body stretches to fill height ─── */
.sc-wo-tile {
	display: flex;
	flex-direction: column;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: var(--sc-white);
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
	text-decoration: none;
	color: var(--sc-text);
	transition: transform .2s, box-shadow .2s;
	height: 100%;
}
.sc-wo-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.sc-wo-tile__img-wrap { position: relative; overflow: hidden; flex-shrink: 0; }
.sc-wo-tile__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s; }
.sc-wo-tile__badge {
	position: absolute; top: 12px; left: 12px;
	background: var(--sc-gold); color: var(--sc-text);
	font: 700 10px/1 var(--sc-font); letter-spacing: .08em;
	padding: 4px 10px; border-radius: 50px; text-transform: uppercase;
}
/* ── BADGE COLOUR MAP — design refresh 2026-08 ───────────────────────────────
   Four variants, colour-coded by kind. All four share the base rule above for
   geometry (position, 50px pill, 10px/700 uppercase) and set fill + label only.

   🔴 THE BASE RULE'S COLOUR IS DELIBERATELY UNCHANGED, and --featured is applied
   ALONGSIDE it, never instead of it. As of 2026-08-20 all four "Featured" render
   points (WhatsOnLanding:861 and :961, _WhatsOnWidget:188, _WhatsOnTile:165) emit
   `class="sc-wo-tile__badge sc-wo-tile__badge--featured"`.
   ⚠️ ANY NEW RENDER POINT MUST EMIT BOTH CLASSES. A bare .sc-wo-tile__badge lands
   on gold — which is --offer's fill — so a Featured badge that forgets the modifier
   reads as an Offer. That is precisely the collision this modifier exists to end
   (it recurred on 2026-08-20 when --offer was repointed to gold ahead of this
   markup, putting 11 of 15 live badges on the wrong fill). Do NOT "fix" a future
   collision by repointing the base rule.

   🔴 #C4232B IS A DELIBERATE LOCAL HEX — not --sc-red, and deliberately not a
   :root token. --sc-red #E0373F is the brand red and is UNCHANGED; it simply
   cannot carry 10px text at AA — white on --sc-red is 4.39:1, and --sc-red on
   white is also 4.39:1, so red on ANY white-based tint is structurally
   unreachable, not a tint-choice problem. #C4232B is a legibility darkening of it
   used in TWO roles here: --featured's FILL and --category's LABEL. One value,
   two uses, one file — so it stays a literal. Promote it to a token in site.css
   only if a third consumer appears.
   ⚠️ This is a legibility fix, not a repalette. Do not chase --sc-red elsewhere,
   and do NOT touch .sc-btn--gold — its 1.93:1 is a brand-signed exception
   (CLAUDE.md §2).

   Contrast, RE-MEASURED from the values actually shipped below, 2026-08-20 (badge
   text is 10px/700 = SMALL text, so the AA floor is 4.5:1 — the 3:1 large-text
   floor does not apply):
     --featured           white   #FFFFFF on #C4232B                   = 5.80:1  ✅
     --offer              plum    #440B22 on --sc-gold #DCB741         = 8.27:1  ✅
     --category           red     #C4232B on rose      #FBE7E8         = 4.89:1  ✅
     --category-onimage   white   #FFFFFF on --sc-plum #440B22         = 15.95:1 ✅
     (base, unchanged)    #333333 on --sc-gold #DCB741                 = 6.55:1  ✅
   ⚠ The two AA misses this replaces — --featured 4.39:1 and --category 3.70:1 —
   were the agency comp's colours, shipped as specified earlier on 2026-08-20 and
   corrected the same day with Adam's approval. docs/CHANGELOG.md 2026-08-20.
   ⚠ The rose tint is OPAQUE (#FBE7E8 = --sc-red at 12% flattened onto white), not
   rgba(224,55,63,.12): the tile is white today but a card surface may not stay white.

   ⚠ FREE is deliberately absent — the comp shows one, but it is not an option in
   our data (Adam, 2026-08-20). Do not add it.
   ────────────────────────────────────────────────────────────────────────────── */
.sc-wo-tile__badge--featured        { background: #C4232B;        color: var(--sc-white); }
.sc-wo-tile__badge--offer           { background: var(--sc-gold); color: var(--sc-plum); }
.sc-wo-tile__badge--category        { background: #FBE7E8;        color: #C4232B; }
.sc-wo-tile__badge--category-onimage { background: var(--sc-plum); color: var(--sc-white); }
/* .sc-wo-tile__r20 (age badge on the tile image) REMOVED 2026-08-10 — the badge was
   retired from the markup on 2026-07-30, leaving the rule unreachable. Verified before
   deleting by dumping five live What's On / attractions pages across AKL, HAM and ADL:
   zero occurrences of the class in any served HTML, so no editor-authored raw HTML was
   relying on it either. Do not re-add: RG/age copy lives in the footer bar and in each
   event's own body text. ⚠️ .sc-wo-r20-block below is a DIFFERENT class — left in place. */

/* Body grows to fill remaining card height */
.sc-wo-tile__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sc-wo-tile__title { font: 700 15px/1.3 var(--sc-font); margin: 0 0 6px; color: var(--sc-text); }
.sc-wo-tile__date { font: 500 12px/1.4 var(--sc-font); color: var(--sc-plum); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }

/* Summary grows to push CTA to bottom */
.sc-wo-tile__summary { font: 400 13px/1.5 var(--sc-font); color: #555; margin: 0 0 12px; flex: 1; }
.sc-wo-tile__cta { display: flex; align-items: center; gap: 4px; font: 700 12px/1 var(--sc-font); color: var(--sc-plum); letter-spacing: .04em; margin-top: auto; }

/* ── Empty / error states ────────────────────────────────── */
.sc-wo-error,
.sc-wo-empty { font: 400 15px/1.6 var(--sc-font); color: #666; text-align: center; padding: 40px 0; }

/* ── Detail page ─────────────────────────────────────────── */
.sc-wo-rich-content { width: 100%; max-width: 100%; overflow-x: hidden; padding: 0 40px !important; box-sizing: border-box !important; }
.sc-wo-detail { max-width: 800px; }
.sc-wo-detail__date { font: 700 13px/1.4 var(--sc-font); color: var(--sc-plum); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.sc-wo-detail__time { font: 500 14px/1.4 var(--sc-font); color: #555; margin: 0 0 16px; }
.sc-wo-detail__locations { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; }
.sc-wo-detail__location-link { font: 600 13px/1 var(--sc-font); color: var(--sc-plum); text-decoration: none; }
.sc-wo-detail__location-link:hover { text-decoration: underline; }

/* ── Detail page: When (date + time) — sits above Location ───
   Date (calendar) + time (clock), each its own icon, no separator.
   Either part renders on its own; nothing renders when no date/time. */
.sc-wo-when { display: block; margin: 0 0 18px; }
.sc-wo-when__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-when__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-when__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sc-wo-when__pair { display: inline-flex; align-items: center; gap: 8px; }
.sc-wo-when__icon { font-size: 22px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-when__v { font: 700 20px/1.25 var(--sc-font); color: var(--sc-text); }

/* ── Detail page: Location(s) — editorial eyebrow ────────────
   Sits directly under the When block, above the body copy.
   Single venue: large standfirst. 2+ venues (.sc-wo-loc--multi):
   stepped-down, gold middot-separated, wrapping list. */
.sc-wo-loc { display: block; text-decoration: none; margin: 0 0 28px; }
.sc-wo-loc__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-loc__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-loc__row { display: flex; align-items: flex-start; gap: 10px; }
.sc-wo-loc__pin { font-size: 26px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-loc__venues { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.sc-wo-loc__venue {
	font: 700 24px/1.25 var(--sc-font);
	letter-spacing: -.01em;
	color: var(--sc-text);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .18s;
}
.sc-wo-loc__venue:hover { border-bottom-color: var(--sc-gold); }
.sc-wo-loc__sep { color: var(--sc-gold); font: 600 20px/1 var(--sc-font); padding: 0 2px; user-select: none; }

/* multi-venue: tidier, stepped-down list */
.sc-wo-loc--multi .sc-wo-loc__pin { font-size: 22px; transform: translateY(2px); }
.sc-wo-loc--multi .sc-wo-loc__venue { font-size: 19px; }
.sc-wo-loc--multi .sc-wo-loc__sep { font-size: 16px; }

/* ── Detail page: Price + Booking (paired) — sits under Location ───
   Price reuses the When/Location eyebrow + gold-icon language; the booking
   button rides the same row (price left, CTA right) and wraps under on narrow
   screens. Booking-only (no price) renders the button alone, no eyebrow.
   Each part self-suppresses when absent (graceful degradation). */
.sc-wo-pricing { display: block; margin: 0 0 28px; }
.sc-wo-pricing__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-pricing__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-pricing__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 24px;
}
.sc-wo-price { display: inline-flex; align-items: center; gap: 10px; }
.sc-wo-price__icon { font-size: 24px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-price__v { font: 700 22px/1.25 var(--sc-font); color: var(--sc-text); }
.sc-wo-pricing__cta { flex: none; }

/* ── Detail page: Tags — eyebrow + plum-tint pills (brand on-light accent) ── */
.sc-wo-tagblock { display: block; margin: 0 0 28px; }
.sc-wo-tagblock__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-tagblock__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sc-wo-tag {
	display: inline-block;
	background: rgba(68, 11, 34, .07);
	color: var(--sc-plum);
	font: 700 10px/1 var(--sc-font);
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 50px;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.sc-wo-tag:hover { background: var(--sc-plum); color: var(--sc-white); }

/* raw-HTML embed block (3rd-party iframes / widgets pasted into Body HTML raw) */
.sc-wo-embed { margin: 0 0 32px; }
.sc-wo-embed iframe { max-width: 100%; }

.sc-wo-detail__body { margin-bottom: 32px; }
.sc-wo-r20-block { border-top: 1px solid #e8e8e8; padding-top: 16px; margin-top: 24px; font: 400 12px/1.6 var(--sc-font); color: var(--sc-text); }
.sc-wo-r20-block p { margin: 0 0 4px; }
.sc-wo-detail__terms { margin-top: 32px; border-top: 1px solid #e8e8e8; padding-top: 16px; }
.sc-wo-detail__terms-toggle { font: 700 13px/1.4 var(--sc-font); cursor: pointer; color: var(--sc-text); letter-spacing: .03em; list-style: none; }
.sc-wo-detail__terms-toggle::-webkit-details-marker { display: none; }
.sc-wo-detail__terms-body { margin-top: 16px; font: 400 13px/1.6 var(--sc-font); color: #555; }

/* ── Responsive ──────────────────────────────────────────── */

/* Narrower rail before the grid gives up a column */
@media (max-width: 1180px) {
	.sc-wo-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 1024px) { .sc-wo-rich-content { padding: 0 24px !important; } }

/* Three columns beside the rail runs out of room LONG before the rail stacks:
   at ~950px a tile computes to roughly 190px, too narrow for a 4:3 image plus
   title, date, summary and CTA. Drop to 2 columns at 1100px — while the rail is
   still alongside — rather than holding 3 all the way down to 900px.

   ⚠️ THE --fill3-* / --fill2-* SPAN RANGES AT THE FOOT OF THIS FILE ARE SCOPED TO
   NON-OVERLAPPING WIDTHS AND MUST MOVE WITH THIS BREAKPOINT. Change one without
   the other and a panel tries to span 2 of 3 columns inside a 2-column grid. */
@media (max-width: 1100px) {
	.sc-wo-grid { grid-template-columns: repeat(2, 1fr); }
	.sc-wo-feature { grid-template-columns: minmax(0, 1fr); }
	.sc-wo-feature__media { min-height: 200px; }
	.sc-wo-feature__body { padding: 28px 24px 32px; }
}

/* Rail stacks above the grid and becomes a collapsible disclosure */
@media (max-width: 900px) {
	.sc-wo-layout { grid-template-columns: 1fr; gap: 24px; }
	.sc-wo-rail { position: static; }
	.sc-wo-rail__panel {
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		background: var(--sc-white);
	}
	.sc-wo-rail__summary {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 18px;
		cursor: pointer;
		list-style: none;
		font: 700 12px/1 var(--sc-font);
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--sc-plum);
	}
	.sc-wo-rail__summary::-webkit-details-marker { display: none; }
	.sc-wo-rail__summary .material-symbols-outlined { font-size: 20px; }
	.sc-wo-rail__chevron { margin-left: auto; transition: transform .2s; }
	.sc-wo-rail__panel[open] .sc-wo-rail__chevron { transform: rotate(180deg); }
	.sc-wo-rail__inner { padding: 0 18px 18px; }
	.sc-wo-rail__title { display: none; }
}

@media (max-width: 600px) {
	.sc-wo-when__v { font-size: 18px; }
	.sc-wo-loc__venue { font-size: 20px; }
	.sc-wo-loc--multi .sc-wo-loc__venue { font-size: 17px; }
	.sc-wo-price__v { font-size: 18px; }
}

@media (max-width: 560px) {
	.sc-wo-grid { grid-template-columns: 1fr; }
	.sc-wo-rich-content { padding: 0 16px !important; }
	.sc-wo-feature__cta { width: 100%; text-align: center; }
}

/* ── Featured panel: fill the tail of the last row, never orphan below it ─────
   Default is a full-width band (grid-column: 1 / -1), which is right when the
   panel sits MID-grid after tile 6 with tiles still to follow. When it lands
   after the FINAL tile, WhatsOnLanding emits --fill3-N / --fill2-N telling us
   how many columns are free, so 4 results render as
   [tile][tile][tile] / [tile][ panel spanning 2 ] instead of a lone tile beside
   a gap with the panel stranded underneath.

   Deliberately scoped to NON-OVERLAPPING width ranges rather than layering
   max-width overrides: the two classes can BOTH be present (5 results ⇒ 1 free
   column at 3-col AND at 2-col), so each range must apply only its own and
   ignore the other outright. Overriding instead of scoping would mean every new
   breakpoint had to remember to neutralise the previous one's span.
   ≤1100px is now the 2-column range and ≤560px needs no rule at all — at one
   column every child is already full width. */
@media (min-width: 1101px) {
	.sc-wo-feature--fill3-2 { grid-column: span 2; }
	/* A single column is too narrow for the side-by-side image/body split: stack
	   it and give the media a tile's 4:3 ratio so the row height stays even. */
	.sc-wo-feature--fill3-1 {
		grid-column: span 1;
		grid-template-columns: minmax(0, 1fr);
	}
	.sc-wo-feature--fill3-1 .sc-wo-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
	.sc-wo-feature--fill3-1 .sc-wo-feature__body { padding: 24px 22px 26px; }
	/* Tile-width panel — same treatment the ≤560px rule gives the full-width one. */
	.sc-wo-feature--fill3-1 .sc-wo-feature__cta { width: 100%; text-align: center; }
}

@media (min-width: 561px) and (max-width: 1100px) {
	/* 2-col grid: already stacked by the max-width:1100px block above. */
	.sc-wo-feature--fill2-1 { grid-column: span 1; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__body { padding: 24px 22px 26px; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__cta { width: 100%; text-align: center; }
}

/* ============================================================
   IMAGE-LINK HOVER — CARD LIFT SUPPRESSION (What's On tiles, 2026-07-03)
   Matches site.css: no lift, no growing shadow. The resting shadow is
   preserved. Appended last so it wins.
   🔴 The image half was DELETED 2026-08-07 (Adam) — both the zoom above
   and the `opacity: .85` fade that had merely MASKED it. Tile images now
   have no hover treatment at all. 📖 docs/LESSONS.md §L7.
   ============================================================ */
.sc-wo-tile:hover {
	transform: none;
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ============================================================
   DETAIL BODY — RTE CTA BUTTON SPACING (2026-07-08)
   ContentAPI What's On detail bodies (PrivateEventPage.cshtml) embed a
   "Book Now" .btn inline in the migrated RTE copy, which renders squished
   against the paragraphs above/below. Give it vertical breathing room.
   Scoped to the detail body so it can't affect buttons elsewhere.
   ============================================================ */
.sc-wo-detail__body .btn,
.sc-wo-detail__body .sc-btn {
	display: inline-block;
	margin: 24px 0 8px;
}

/* ==========================================================================
   APPENDED 2026-08-04 — _WhatsOnWidget row balancing

   House rule (Adam): never more than 4 across, rows balanced rather than left
   with an orphan. The partial computes rows = ceil(n/4), cols = ceil(n/rows)
   and emits .sc-wo-grid--cols-{1..4}. Uniform grid + CSS auto-flow then gives:
     1-4 = one row · 5 = 3+2 · 6 = 3+3 · 7 = 4+3 · 8 = 4+4 · 9 = 3+3+3
     11 = 4+4+3 · 12 = 4+4+4     (n = 10 renders 4+4+2 — documented deviation)

   SCOPED TO THE WIDGET ONLY. Bare .sc-wo-grid is shared with WhatsOnLanding,
   where a FIXED 3-up is correct — that page lists dozens of items and consistent
   columns are the point. These modifiers are only ever emitted by the widget, so
   the landing is untouched. Do not move them onto .sc-wo-grid itself.

   Plain @media, never @@media — this is a STATIC file, not Razor.
   ========================================================================== */

/* 🔴 SUPERSEDED 2026-08-20 (Adam) — ALL FOUR NOW MAP TO FOUR TRACKS.
   Tiles are capped at 1/4 of the container; short rows fill from the left and leave
   the remainder empty: 1 = 1/4 · 2 = 2×1/4 · 3 = 3×1/4 · 5 = 4+1 · 8 = 4+4.
   ⚠️ n = 5 renders 4+1, an ORPHAN, and the row-balancing described above no longer
   happens. Accepted deliberately: option (a), natural wrap, chosen over reinstating
   balancing because it is a one-line reversal and the call needed a real render to settle.
   ⛔ THE 2026-08-04 HALF-WIDTH n = 1 RULE IS DEAD — do not reinstate it. Its instinct
   (a lone tile must not stretch) is preserved and tightened: one of FOUR, not one of
   two. The image-left/text-right variant rejected on 2026-08-04 stays rejected.
   🔴 The Razor's cols calculation is now inert. Left in place deliberately — changing it
   means re-pasting a partial six templates render, for no visual gain. Tidy it in spec
   06/07 when that file is open anyway. */
.sc-wo-grid--cols-1,
.sc-wo-grid--cols-2,
.sc-wo-grid--cols-3,
.sc-wo-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── n = 1 — ONE tile, at QUARTER width ───────
   ⚠️ This block described the HALF-width rule until 2026-08-20. That rule is dead
   (see the superseded banner above); the reasoning is kept because it still holds —
   only the fraction changed.

   A single tile at FULL width stretches its image across the whole 1400px content
   column and reads as a poster, not a listing (Adam, 2026-08-04). A horizontal
   image-left/text-right variant was tried and rejected the same day — it invented a
   second tile treatment for one edge case.

   The rule is simply: render it as ONE of the four tiles the n = 4 case would give.
   The grid is 4 columns and the single tile takes the first, so it has identical
   width and identical treatment to every other tile; the rest of the row stays empty.
   No tile-level overrides at all — that is the point.

   Scoped to the `--cols-*` modifiers, which only `_WhatsOnWidget` ever emits, so the
   landing is unaffected even when a filter narrows it to a single result (it uses the
   bare
   `.sc-wo-grid`, which stays 3-up). ────────────────────────────────── */
/* Tablet — 4-up is too tight below ~1100px; drop to 2 and let rows re-flow.
   3-up stays 3 down to the mobile breakpoint. */
@media (max-width: 1100px) {
	.sc-wo-grid--cols-1,
	.sc-wo-grid--cols-2,
	.sc-wo-grid--cols-3,
	.sc-wo-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	/* 🔴 REDUNDANT since 2026-08-20 — the 1100px rule above already puts every variant on
	   two tracks. Left as a no-op rather than deleted so the breakpoint's intent survives;
	   safe to remove on a cleanup pass. */
	.sc-wo-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — single column for every variant, n = 1 included (a quarter-width tile
   on a phone is unreadable). */
@media (max-width: 600px) {
	.sc-wo-grid--cols-1,
	.sc-wo-grid--cols-2,
	.sc-wo-grid--cols-3,
	.sc-wo-grid--cols-4 { grid-template-columns: 1fr; }
}