/* ============================================================
   Explore SkyCity — explore.css
   Loaded globally via _Layout.cshtml (after news.css).
   Static file: plain @media only (never @@media).
   Scoped to .sc-explore-* / .sc-skybridge-* — reuses global
   .sc-section, .sc-container, .sc-hp-inner, .sc-prose,
   .sc-hero* and .sc-explorer-accordion* from site.css.
   ============================================================ */

/* ── Opening blurb ───────────────────────────────────────── */
.sc-explore-intro {
	max-width: 880px;
}
.sc-explore-intro p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* ── Blended mosaic ──────────────────────────────────────── */
.sc-explore-mosaic {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sc-explore-mosaic__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--sc-radius-card);
	background-color: var(--sc-plum);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: var(--sc-white);
	isolation: isolate;
	transition: transform .35s ease;
}
.sc-explore-mosaic__item:hover {
	transform: translateY(-3px);
}
.sc-explore-mosaic__item:focus-visible {
	outline: 3px solid var(--sc-gold);
	outline-offset: 3px;
}

.sc-explore-mosaic__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(68,11,34,.78) 0%, rgba(68,11,34,.30) 45%, rgba(68,11,34,0) 75%);
	transition: background .3s ease;
}
.sc-explore-mosaic__item:hover .sc-explore-mosaic__overlay {
	background: linear-gradient(to top, rgba(68,11,34,.85) 0%, rgba(68,11,34,.45) 55%, rgba(68,11,34,.08) 100%);
}

.sc-explore-mosaic__body {
	position: relative;
	z-index: 2;
	height: 100%;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .5rem;
}

.sc-explore-mosaic__badge {
	align-self: flex-start;
	display: inline-block;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 4px;
}

.sc-explore-mosaic__title {
	margin: 0;
	font-weight: 800;
	line-height: 1.15;
	font-size: 1.25rem;
}
.sc-explore-mosaic__title--hero {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}
.sc-explore-mosaic__title--sm {
	font-size: 1.0625rem;
}

.sc-explore-mosaic__summary {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(255,255,255,.9);
	max-width: 60ch;
}
.sc-explore-mosaic__summary--sm {
	font-size: .875rem;
}

/* Hero (row 1) */
.sc-explore-mosaic__hero {
	min-height: clamp(340px, 46vw, 560px);
}

/* Duo (row 2) */
.sc-explore-mosaic__duo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.sc-explore-mosaic__duo-item {
	min-height: 300px;
}

/* ── Row-balanced grid (rows 3+) — ONE GRID PER ROW ──────────────────────────
   House rule (Adam, 2026-08-04): never more than 4 across, rows balanced rather
   than left with an orphan. ExplorePage chunks the tiles remaining AFTER the hero
   and duo into rows — rows = ceil(n/4), base = n/rows, rem = n%rows, the first
   `rem` rows taking base+1 — and emits ONE .sc-explore-mosaic__grid per row,
   carrying .sc-explore-mosaic__grid--cols-{1..4} for that row's own count:
     1-4 = one row · 5 = 3+2 · 6 = 3+3 · 7 = 4+3 · 8 = 4+4 · 9 = 3+3+3
     10 = 4+3+3 · 11 = 4+4+3 · 12 = 4+4+4

   🔴 PER-ROW, NOT ONE UNIFORM GRID — changed 2026-08-13. A single grid can only have
   ONE column count, so a short last row left its remaining cells EMPTY: a visible gap
   at the right, against a left-aligned block. Sizing each row to its own contents
   removes the gap, and retires the old n = 10 deviation with it — that was never a
   design choice, only a constraint of uniform auto-flow. n = 10 now renders as the
   house rule above states.

   🔴 DELIBERATELY DIVERGES FROM _WhatsOnWidget (whatson.css:517-570), which keeps the
   uniform grid AND the n = 10 deviation. It is a CARD grid, where equal tile size is
   the point; this is a MOSAIC, where it is not (Adam: "they should be treated
   differently"). Do NOT port this back, and do not raise the divergence as a defect.

   📌 WHY THE BREAKPOINT HANDLING BELOW IS COMPLETE, not merely tested: row sizes can
   only ever be 1, 2, 3 or 4. base = 4 requires n = 4·rows exactly, which forces
   rem = 0, so a row of 5 is unreachable. Every possible row is therefore covered by
   the four --cols-N modifiers.

   The hero stays FULL-WIDTH and the duo row stays at 2 — only rows 3+ balance.
   Plain @media, never @@media — this is a STATIC file, not Razor. */
.sc-explore-mosaic__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

/* --cols-1 spreads FULL width (changed 2026-08-13). It previously rendered at half
   width, ported from _WhatsOnWidget on the grounds that a lone tile at full width
   reads as a second hero. That holds for the widget, which has no hero above it —
   here the tile sits below a full-width hero AND a half-width duo, so a half-width
   third row reads as an orphaned duo tile instead. "Short rows spread full width" now
   holds for every row, with no exception. Its 4.4:1 ratio below is what keeps it a
   banner rather than a slab. */
.sc-explore-mosaic__grid--cols-1 { grid-template-columns: 1fr; }
.sc-explore-mosaic__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sc-explore-mosaic__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sc-explore-mosaic__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Tile shape: A RATIO PER COLUMN COUNT — and NO height property at all ──────
   🔴 NEVER ADD min-height OR max-height TO A GRID TILE **WHILE A RATIO IS ACTIVE** —
   i.e. anywhere the rules below apply. The qualifier is load-bearing, not hedging: the
   ≤730px block deliberately sets `aspect-ratio: auto` AND a `min-height`, which is safe
   for the precise reason spelled out there. **The ban is on height properties while a
   ratio is active, not on height properties as such.**
   Both are the same bug in opposite directions, and both were shipped and measured on
   this page on 2026-08-13:

   `aspect-ratio` + `max-height` COLLAPSES THE WIDTH. Height is derived from width, the
   clamp cuts the height, and the browser preserves the ratio by SHRINKING THE WIDTH —
   so the tile renders narrower than its grid cell, left-aligned, with a hole beside it.
   Measured: a --cols-2 tile came out 435 x 300 inside a 692px cell (435/300 = 1.45,
   the ratio held exactly while the width collapsed). --cols-1 was worse: 1320 wide
   wanted 910 tall, clamped to 300, leaving a 435px box in a 1320px cell. **That
   reintroduced the very gap this file exists to remove, from a different cause.**
   A `min-height` does the mirror image: the floor transfers back into width and pushes
   tiles to OVERFLOW their cells at narrow widths.

   ✅ The fix is to state the SHAPE per column count and let width stay authoritative.
   Safe now in a way it was not before: each row is its own grid, so --cols-N scopes to
   the row rather than to the whole mosaic. At the 1400px max width:
     --cols-4  318 x 219   ·  --cols-3  429 x 260  (reproduces the pre-2026-08-13 look)
     --cols-2  652 x 290   ·  --cols-1  1320 x 300 (a banner)
   🔴 Every one lands at or under 300px, so "nothing inside the grid is taller than the
   duo row above it" is satisfied BY THE RATIOS THEMSELVES — which is why there is no
   clamp. Keep that property if you ever retune a ratio.

   📌 No default rule on .sc-explore-mosaic__grid-item is needed, and that is deliberate:
   the template always emits --cols-N with N = the row's own tile count, and row sizes
   can only ever be 1, 2, 3 or 4 (base = 4 forces rem = 0, so a row of 5 is
   unreachable). The four rules below are therefore exhaustive. */
.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item { aspect-ratio: 1.45 / 1; }
.sc-explore-mosaic__grid--cols-3 .sc-explore-mosaic__grid-item { aspect-ratio: 1.65 / 1; }
.sc-explore-mosaic__grid--cols-2 .sc-explore-mosaic__grid-item { aspect-ratio: 2.25 / 1; }
.sc-explore-mosaic__grid--cols-1 .sc-explore-mosaic__grid-item { aspect-ratio: 4.4 / 1; }

/* 🔴 Tablet: ONLY --cols-4 halves. --cols-3 / --cols-2 / --cols-1 keep their own
   count, and that is the whole point — an earlier version sent --cols-3 to 2 columns
   as well, which re-created the gap this file exists to remove (a 3-tile row becomes
   2+1). 4 → 2 is always gap-free; 3, 2 and 1 are gap-free by definition. Combined with
   the row-size proof above, EVERY row shape is gap-free at tablet for every n.
   The narrow 3-across tiles this leaves are handled by the RATIO, not by columns. */
@media (max-width: 1023px) {
	.sc-explore-mosaic {
		padding: 0 1.5rem;
	}
	.sc-explore-mosaic__grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	/* 🔴 --cols-4 renders 2-ACROSS in this band, so its 4-across ratio no longer describes
	   it: at 1023px the cell is 480px and 1.45 gives 331px — 31px TALLER than the duo row,
	   breaking the one invariant the ratios exist to hold. 1.6 keeps it at or under 300
	   right across the band: 1023 → 300, 1000 → 293, 912 → 265, 768 → 220.
	   ⚠️ The class name says 4 and the render is 2 — that mismatch is why this override is
	   needed at all. Any future breakpoint that changes a column count must re-check the
	   ratio for the same reason. */
	.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item {
		aspect-ratio: 1.6 / 1;
	}
}

/* ── Single column for every grid row below 730px ────────────────────────────
   🔴 MEASURED, not guessed: at ratio 1.65 a --cols-3 tile is 207 × 125 at 700px and
   174 × 105 at 601px, against ~87px of badge+title chrome — i.e. it CLIPPED between
   601px and ~730px. Below 730 every grid row therefore becomes ONE full-width tile.

   Of the two levers available, this is the one that does not undo the task: sending
   --cols-3 to 2 columns would make a 3-tile row render 2+1, re-creating the very gap
   this file exists to remove. One column is gap-free by definition.

   🔴 NO RATIO APPLIES IN THIS BAND — `aspect-ratio: auto` plus a flat `min-height`.
   A ratio cannot serve a ~316px-wide span of single-column widths: measured live, 1.45/1
   gave 662 x 457 at 725px, TALLER than the duo row's 300px, inverting the mosaic's
   hero 560 → duo 300 → grid-smaller scale — the same defect that was removed at desktop,
   reappearing at tablet-portrait. And no single flatter ratio fixes it either: 2.25/1
   suits 662px but collapses to 163px at 414px, against ~87px of badge+title chrome.

   ⚠️⚠️ THIS DOES NOT CONTRADICT THE "NEVER ADD min-height OR max-height" RULE ABOVE, AND
   THE DISTINCTION IS EXACT — get it wrong in either direction and something breaks:
     • The ban applies **while a ratio is ACTIVE**. `aspect-ratio` derives height FROM
       width, so constraining the height makes the browser preserve the ratio by
       COLLAPSING THE WIDTH — the tile then sits narrower than its cell, which is the
       measured 435-in-a-692px-cell defect.
     • Here `aspect-ratio: auto` switches the derivation OFF. Height is no longer a
       function of width, so nothing can be transferred back into width, and a plain
       `min-height` is not merely safe but the correct tool.
   🔴 So: **height properties are banned while a ratio is active — NOT banned as such.**
   Do not reinstate a clamp above where a ratio IS active, and do not strip this one
   because a rule elsewhere says "no height properties".
   Expected: 730px → 662 x 260 · 414px → 366 x 260.

   ⚠️ MUST stay AFTER the ≤1023px block — same specificity, so source order decides.
   ⚠️ The HERO and DUO rows are deliberately NOT touched here; they keep their own
   ≤600px behaviour (scope boundary: only rows 3+ change). */
@media (max-width: 730px) {
	.sc-explore-mosaic__grid--cols-1,
	.sc-explore-mosaic__grid--cols-2,
	.sc-explore-mosaic__grid--cols-3,
	.sc-explore-mosaic__grid--cols-4 {
		grid-template-columns: 1fr;
	}
	.sc-explore-mosaic__grid--cols-1 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-2 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-3 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item {
		aspect-ratio: auto;
		min-height: 260px;
	}
}
/* ≤600px — HERO and DUO only. The grid rows are already single-column from 730px up,
   so their rules live in that block, not here. Keeping the duo's collapse at 600 rather
   than 730 is deliberate: the scope boundary protects the hero and duo rows. */
@media (max-width: 600px) {
	.sc-explore-mosaic__duo {
		grid-template-columns: 1fr;
	}
	.sc-explore-mosaic__hero {
		min-height: 320px;
	}
	/* 🔴 --grid-item is NOT in this min-height rule, and must never be added back — a
	   height floor on a ratio'd tile transfers into WIDTH and overflows the cell. The duo
	   carries no aspect-ratio, so a floor is correct for it. */
	.sc-explore-mosaic__duo-item {
		min-height: 240px;
	}
	.sc-explore-mosaic__body {
		padding: 1.25rem;
	}
}

/* ── Map accordions (reuse .sc-explorer-accordion shell) ─── */
.sc-explore-map {
	margin-bottom: 1rem;
}
.sc-explore-map .sc-explorer-accordion__body {
	padding: 0;
}
.sc-explore-map__frame {
	position: relative; /* establishes containing block for MappedIn's absolutely-positioned #mappedin-map */
	width: 100%;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
	background: #ffffff;
}
@media (max-width: 600px) {
	.sc-explore-map__frame {
		height: 60vh;
		min-height: 420px;
	}
}

/* ── Sky Bridge ──────────────────────────────────────────── */
.sc-skybridge {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 2.5rem;
	align-items: center;
}
.sc-skybridge--full {
	grid-template-columns: 1fr;
}
.sc-skybridge__body {
	margin-bottom: 1.5rem;
	max-width: none;
}
.sc-skybridge__walks {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .25rem 2rem;
}
.sc-skybridge__walk {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.sc-skybridge__walk-dest {
	font-weight: 600;
}
.sc-skybridge__walk-time {
	color: var(--sc-gold);
	font-weight: 700;
	white-space: nowrap;
}
.sc-skybridge__note {
	font-size: .8125rem;
	color: rgba(0,0,0,.55);
	margin: .5rem 0 0;
}
.sc-skybridge__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sc-radius-card);
}

@media (max-width: 768px) {
	.sc-skybridge {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.sc-skybridge__walks {
		grid-template-columns: 1fr;
	}
	.sc-skybridge__media {
		order: -1;
	}
}

/* ============================================================
   IMAGE-LINK HOVER — SIMPLIFIED (Explore mosaic, 2026-07-03)
   Matches the global simplification in site.css: drop the box lift on
   hover. The overlay-gradient shift stays as the tile's hover cue
   (background-image tiles — no <img> to fade). Appended last so it wins.
   ============================================================ */
.sc-explore-mosaic__item:hover { transform: none; }