/* =====================================================================================
   CLUB MED HUB — /club-med/ and its eight sun/ski/region routes.
   Built 2026-08-02 to docs/design/DESIGN_BRIEF_CLUBMED.md (PO-APPROVED 2 Aug).
   Standard: page 596 Scandinavia, 595 Maldives v2, 723 Cruises, 724 Tours.

   SCOPING LAW: every rule in this file is scoped to `.mk-clubmed`. It loads on that body class
   only — the hub and its eight routes — and cascades AFTER home-v2.css (declared dependency), so it
   can never reach /home-v2/, Scandinavia, Maldives, Cruises or Tours.

   THE RATIFIED BAND SYSTEM IS INHERITED, NEVER RE-DERIVED (GLASS-PANEL LAW). `.mkv-band--dark`,
   `.mkv-band--split`, `.mkv-band--feature`, `.mkv-feature-panel`, `.mkv-hero-panel`, `.mkv-review`,
   `.mkv-guide` and `.mk-container--wide` all come from home-v2.css. Copying the glass recipe into
   an `mkcm-` namespace is the exact failure that law records. Only page-specific composition lives
   here.

   PADDING follows the thresholds in force: photographic and dark bands 0–40px, text bands 88px.
   Not uniform — that was the density defect this whole system exists to fix.

   GOLD #d4a853 ON DARK SOLID GROUNDS ONLY. Never over photography. On the light grounds this file
   paints, the darkened #7d5f1f is used (measured 5.95:1 on white during the Maldives v2 pass).

   ===== THE ONE COMPOSITIONAL RULE THIS PAGE ADDS =====
   TEXT DOES NOT SIT ON THE SUN/SKI DOOR PHOTOGRAPHS, OR ON A VILLAGE CARD'S PHOTOGRAPH.
   The two door frames are a Maldivian lagoon from the air and a skier in deep powder — both very
   bright, and the skier is nearly white edge to edge. There were three ways to make a white label
   legible on those: a scrim (which is the full-bleed dim the bright-hero law forbids), a heavier
   halo (which reads as a smudge on white), or MOVE THE TEXT OFF THE PHOTOGRAPH. The third is taken.
   Every label on this page sits either on solid ink, on white, or on the ratified glass panel over
   a frame chosen for having a quiet quadrant. The consequence is measurable and deliberate: this
   page has almost no text-over-photography, which is the case the contrast scorer scores `onPhoto`
   and then excludes from the AA roll-up by construction — the blind spot the brief §9 says hid the
   worst Cruises defect.
   ===================================================================================== */

/* -------------------------------------------------------------------- §1 HERO ------ */
/* ONE frame, full-bleed, bright. No rotation: there is one brand, so a rotation would be
   decoration. BRIGHT-HERO LAW: no full-bleed dim — one LOCAL radial anchored bottom-left that
   reaches zero well inside the frame, seating the glass panel against the frame edge and nothing
   more. The photograph outside that corner is completely untouched. */
.mk-clubmed .mkcm-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #0b1418;
}
.mk-clubmed .mkcm-hero-media { position: absolute; inset: 0; z-index: 0; }
.mk-clubmed .mkcm-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* 2560x1440 master. Desktop crops centred. On mobile the frame is a 0.46 viewport cropped on
	   WIDTH, and the resort — the subject — sits dead centre of the master, so 50% holds it; the
	   vertical nudge to 42% keeps the mountain ridge and its ski runs in frame rather than filling
	   the top half with sky. Checked on the rendered page at 390, not reasoned about. */
	object-position: 50% 50%;
}
@media (max-width: 767px) {
	.mk-clubmed .mkcm-hero-img { object-position: 50% 42%; }
}
.mk-clubmed .mkcm-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		78% 108% at 0% 92%,
		rgba(6, 16, 22, 0.76) 0%,
		rgba(6, 16, 22, 0.50) 34%,
		rgba(6, 16, 22, 0.22) 58%,
		rgba(6, 16, 22, 0.06) 78%,
		rgba(6, 16, 22, 0) 92%
	);
	pointer-events: none;
	z-index: 1;
}
@media (max-width: 767px) {
	/* Mobile is a tall frame with the copy at the foot, so the local gradient anchors to the bottom
	   EDGE — a corner radial on a 0.46 viewport either misses the copy entirely or grows until it
	   is a full-bleed dim wearing a gradient's clothes. */
	.mk-clubmed .mkcm-hero-media::after {
		background: linear-gradient(
			to top,
			rgba(6, 16, 22, 0.90) 0%,
			rgba(6, 16, 22, 0.78) 30%,
			rgba(6, 16, 22, 0.52) 55%,
			rgba(6, 16, 22, 0.20) 78%,
			rgba(6, 16, 22, 0) 96%
		);
	}
}
.mk-clubmed .mkcm-hero-inner {
	position: relative;
	z-index: 2;
	padding-top: 0;
	padding-bottom: 88px;
	max-width: 1440px;
	width: 100%;
}
@media (max-width: 767px) {
	.mk-clubmed .mkcm-hero-inner { padding-bottom: 56px; }
}

/* THE HERO PANEL — the ratified glass recipe, INHERITED from `.mkv-hero-panel`. Nothing about the
   fill, blur or top-edge highlight is restated here (GLASS-PANEL LAW). Only the measure is set.
   IF A FRAME EVER NEEDS MORE CONTRAST the levers are, in order: the type halos below, then the
   hero's own local gradient. NEVER a darker fill — that is a golden-rule-class regression. */
.mk-clubmed .mkcm-hero-panel { max-width: 660px; }
@media (max-width: 767px) {
	/* THE PANEL WAS EATING THE HERO. At 390 the sub ran to seven lines and the panel filled roughly
	   four fifths of the frame — the photograph survived as a strip of cloud at the top and a sliver
	   at the foot, so the band read as a text card with a picture behind it rather than as a
	   photograph. The fix is on the TYPE, not on the panel's fill: the sub steps down to body size
	   and the copy itself was shortened. Re-darkening or resizing the glass is not a lever here
	   (GLASS-PANEL LAW). */
	.mk-clubmed .mkcm-hero-panel { max-width: none; padding: 18px 18px 20px; }
	.mk-clubmed .mkcm-hero-sub { font-size: 1.0625rem; margin-bottom: 20px; }
	.mk-clubmed .mkcm-hero-eyebrow { margin-bottom: 10px; }
	.mk-page .mk-clubmed h1.mkcm-hero-title,
	.mk-clubmed h1.mkcm-hero-title { margin-bottom: 14px; }
	/* Stacked, full-width, in priority order — and the ghost keeps its outline so the two read as
	   two buttons rather than a button and a caption. */
	.mk-clubmed .mkcm-hero-ctas { display: grid; gap: 10px; }
	.mk-clubmed .mkcm-hero-ctas .mk-cta { width: 100%; text-align: center; }
}
.mk-clubmed .mkcm-hero-eyebrow {
	margin: 0 0 14px;
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
}
/* `.mk-page .mk-clubmed h1.mkcm-hero-title`, not a plain single class. The Elementor Global Kit
   prints `.elementor-kit-6 h1 { color:#1a1a1a }` — one class + one element — which OUTRANKS a plain
   single-class rule. This trap has now bitten four times in this build (h1 colour, pill font-size,
   h2 colour, and again here); it is recorded in home-v2.css, cruises.css and tours.css as well.
   Sized explicitly and off the display ramp: inside a panel that costs ~96px of a 390 viewport, the
   display floor breaks this headline to one word a line. */
.mk-page .mk-clubmed h1.mkcm-hero-title,
.mk-clubmed .mk-page h1.mkcm-hero-title,
.mk-clubmed h1.mkcm-hero-title {
	color: #ffffff;
	font-weight: 700;
	font-size: clamp(1.9rem, 4.2vw, 3.5rem);
	line-height: var(--mk-lh-display);
	letter-spacing: var(--mk-track-display);
	max-width: 18ch;
	margin: 0 0 18px;
	text-wrap: balance;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.86), 0 0 20px rgba(0,0,0,0.70), 0 0 38px rgba(0,0,0,0.46);
}
.mk-clubmed .mkcm-hero-sub {
	max-width: 52ch;
	margin: 0 0 26px;
	font-size: var(--mk-fs-lead);
	line-height: var(--mk-lh-body);
	color: #ffffff;
	background: none;
	padding: 0;
	border-radius: 0;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 5px rgba(0,0,0,0.86), 0 0 16px rgba(0,0,0,0.66);
}
.mk-clubmed .mkcm-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Primary CTA inverted on the dark hero — a solid white fill with ink text. The site's ink-fill
   primary disappears against a photograph; same ruling as home-v2, cruises and tours. */
.mk-clubmed .mkcm-hero-ctas .mk-cta {
	background: #ffffff;
	color: var(--mk-ink) !important;
	border-color: #ffffff;
	font-weight: 700;
}
.mk-clubmed .mkcm-hero-ctas .mk-cta:hover {
	background: var(--mk-alt-surface);
	border-color: var(--mk-alt-surface);
}
/* Ghost secondary — a jump to the signature band. Outlined white on the photograph, halo for
   legibility, never a second solid fill competing with ENQUIRE.
   `border:` IN FULL, NOT `border-color:`. The first build set only the colour, and `.mk-cta` in the
   shared sheet declares no border width for this variant — so the button rendered as bare bold text
   floating beside the white ENQUIRE fill, with no shape at all. Caught by LOOKING at the hero crop:
   contrast, geometry, class resolution and h-scroll were all green while the secondary CTA was not
   a button. Same failure home-v2.css records for `.mkv-cta--ghost`, which is why that rule carries
   an explicit `border-width`. */
.mk-clubmed .mkcm-hero-ctas .mkcm-cta--ghost {
	background: transparent;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.62);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 2px rgba(0,0,0,0.72);
}
.mk-clubmed .mkcm-hero-ctas .mkcm-cta--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
}

/* --------------------------------------------- §2 HOW CLUB MED WORKS (the split) --- */
/* Prose left at a readable measure, two frames BESIDE it bleeding right — the ratified
   `.mkv-split`. NEVER BELOW, NEVER AN EMPTY RIGHT HALF. */
.mk-clubmed .mkcm-explain-band { background: var(--mk-white); }
.mk-clubmed .mkcm-explain-band .mkv-split-media img { min-height: 520px; }
@media (max-width: 899px) {
	/* Below 900 the ratified split stacks copy-then-media. ON THIS BAND, ON MOBILE ONLY, THE MEDIA
	   GOES FIRST.
	   Measured reason: this band's copy is the longest on the page (three explanations, and the
	   brief says §2 carries more weight here than on any other hub), so stacked underneath it the
	   photographs land ~1,400px down. The second mobile sample screen was therefore a FULL 844px
	   VIEWPORT OF TEXT at 0% photography — the "page never empties" defect, on the one band that
	   holds two good frames.
	   Design reason, which is why this is a fix and not a workaround: photograph-then-heading is
	   the normal mobile reading order for an image-led band, and it puts something to look at
	   immediately under the hero instead of a wall of prose. Desktop is untouched — there the
	   photography is BESIDE the copy, which is the composition the brief asks for.
	   340px, not the inherited 210: at 210 the kids-club room and the sunset deck are both
	   letterboxed with their subject cropped away. */
	.mk-clubmed .mkcm-explain-band .mkv-split-media { order: -1; }
	.mk-clubmed .mkcm-explain-band .mkv-split-media img { min-height: 340px; }
}
/* THE THREE EXPLANATIONS. Numbered by a gold rule rather than by a digit — three items is not a
   procedure and numerals would imply an order that does not exist. */
.mk-clubmed .mkcm-explain { display: grid; gap: 26px; margin-top: 4px; }
.mk-clubmed .mkcm-explain-item { border-top: 2px solid #7d5f1f; padding-top: 16px; }
.mk-page .mk-clubmed .mkcm-explain-item h3,
.mk-clubmed .mkcm-explain-item h3 {
	margin: 0 0 8px;
	font-size: var(--mk-fs-h3);
	font-weight: 700;
	line-height: var(--mk-lh-heading);
	letter-spacing: var(--mk-track-tight);
	color: var(--mk-ink);
}
.mk-clubmed .mkcm-explain-item p {
	margin: 0;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
	max-width: 56ch;
}
.mk-clubmed .mkcm-explain-item strong { color: var(--mk-ink); }
.mk-clubmed .mkcm-explain-item em { font-style: italic; }

/* ------------------------------------- §3 SUN OR SKI — THE SIGNATURE ELEMENT ------ */
/* "What the page is judged on" (brief §2). TWO DOORS at equal weight, with the portal's own regions
   as the browse underneath them — both on one screen, so the visitor sees the shape of the whole
   portfolio without a click. */
.mk-clubmed .mkcm-split-band { padding-block: clamp(56px, 6vw, 88px); }
.mk-clubmed .mkcm-split-lede {
	margin: -20px 0 var(--mk-space-lg);
	max-width: 62ch;
	font-size: var(--mk-fs-lead);
	line-height: var(--mk-lh-body);
	color: rgba(255, 255, 255, 0.82);
}

.mk-clubmed .mkcm-doors {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 768px) {
	.mk-clubmed .mkcm-doors { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.mk-clubmed .mkcm-door {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	border-radius: var(--mk-r-card);
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: transform var(--mk-dur) var(--mk-ease),
	            border-color var(--mk-dur) var(--mk-ease),
	            background var(--mk-dur) var(--mk-ease);
}
.mk-clubmed .mkcm-door:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.42);
	background: rgba(255, 255, 255, 0.10);
}
.mk-clubmed .mkcm-door:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 3px; }

/* 16:10 rather than 4:3 — these are landscape frames of a place, and a squarer box crops the
   lagoon's horizon and the skier's snow spray off the sides. The sun frame is a 1440px browser
   rendition (brief §4: "usable for tiles, NOT for a full-bleed hero"), and this box tops out at
   ~46vw = ~660 CSS px, so it is inside its source resolution at 2x. That constraint is why the
   doors are a two-up and not a full-bleed pair. */
.mk-clubmed .mkcm-door-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #10171b;
	aspect-ratio: 16 / 10;
}
.mk-clubmed .mkcm-door-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms var(--mk-ease-out);
}
.mk-clubmed .mkcm-door:hover .mkcm-door-img { transform: scale(1.03); }

/* THE LABEL SITS HERE, ON SOLID INK, NOT ON THE PHOTOGRAPH. See the file header: the powder frame
   is nearly white edge to edge and no halo survives that honestly. */
.mk-clubmed .mkcm-door-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 24px;
}
.mk-clubmed .mkcm-door-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
}
.mk-clubmed .mkcm-door-name {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--mk-track-tight);
	color: #ffffff;
}
.mk-clubmed .mkcm-door-count {
	font-size: var(--mk-fs-small);
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: var(--mk-gold);   /* gold on solid ink — permitted ground */
}
.mk-clubmed .mkcm-door-line {
	display: block;
	margin-bottom: 16px;
	font-size: var(--mk-fs-body);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.80);
	max-width: 44ch;
}
.mk-clubmed .mkcm-door-link {
	display: block;
	margin-top: auto;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-cta);
	text-transform: uppercase;
	color: var(--mk-gold);
}
.mk-clubmed .mkcm-door:hover .mkcm-door-link { text-decoration: underline; }

/* THE REGIONS RAIL. The doors are the split; this is the browse under it. Deliberately quieter than
   the doors — a hairline list, not a second row of cards — because two competing card systems in
   one band is what turns a signature element into a grid of options. */
.mk-clubmed .mkcm-regions { margin-top: clamp(36px, 4vw, 56px); }
.mk-clubmed .mkcm-regions-head {
	margin: 0 0 18px;
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}
.mk-clubmed .mkcm-regions-note {
	margin: 26px 0 0;
	max-width: 92ch;
	font-size: var(--mk-fs-small);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------ §4 FOUR FEATURED VILLAGES ------- */
/* On WHITE, between two dark bands (§3 signature above, §5 reviews below), so the page alternates
   rather than running three ink bands together. */
.mk-clubmed .mkcm-featured-band { background: var(--mk-white); padding-block: clamp(56px, 6vw, 88px); }
.mk-clubmed .mkcm-featured-intro {
	margin: 0 0 var(--mk-space-lg);
	max-width: 62ch;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}
.mk-clubmed .mkcm-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 680px)  { .mk-clubmed .mkcm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mk-clubmed .mkcm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mk-clubmed .mkcm-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--mk-white);
	border: 1px solid var(--mk-border);
	border-radius: var(--mk-r-card);
	transition: transform var(--mk-dur) var(--mk-ease),
	            box-shadow var(--mk-dur) var(--mk-ease),
	            border-color var(--mk-dur) var(--mk-ease);
}
.mk-clubmed .mkcm-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--mk-shadow);
	border-color: #d8dde0;
}
.mk-clubmed .mkcm-tile:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 3px; }
.mk-clubmed .mkcm-tile-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--mk-alt-surface);
	aspect-ratio: 4 / 3;
}
.mk-clubmed .mkcm-tile-img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform 620ms var(--mk-ease-out);
}
.mk-clubmed .mkcm-tile:hover .mkcm-tile-img { transform: scale(1.04); }

/* THE EXCLUSIVE COLLECTION MARK. Sits on the photograph, so it is INK-BACKED rather than gold — the
   gold accent never goes over photography, and a translucent gold chip on a bright lagoon would be
   both a law breach and unreadable. Small, upper-left, one per tile at most. */
.mk-clubmed .mkcm-tile-ec,
.mk-clubmed .mkcm-card-ec {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 5px 9px;
	border-radius: var(--mk-r-pill);
	background: rgba(10, 13, 15, 0.82);
	color: #ffffff;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	line-height: 1;
}
.mk-clubmed .mkcm-tile-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 18px 20px;
}
.mk-clubmed .mkcm-tile-meta {
	display: block;
	margin-bottom: 7px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: #7d5f1f;   /* gold, darkened for AA on white — 5.95:1 measured */
}
.mk-page .mk-clubmed h3.mkcm-tile-name,
.mk-clubmed h3.mkcm-tile-name {
	margin: 0 0 8px;
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--mk-track-tight);
	color: var(--mk-ink);
}
.mk-clubmed .mkcm-tile-line {
	margin: 0 0 16px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--mk-grey);
}
.mk-clubmed .mkcm-tile-link {
	display: block;
	margin-top: auto;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-cta);
	text-transform: uppercase;
	color: var(--mk-teal-text);
}
.mk-clubmed .mkcm-tile:hover .mkcm-tile-link { text-decoration: underline; }
.mk-clubmed .mkcm-featured-note {
	margin: var(--mk-space-lg) 0 0;
	max-width: 74ch;
	font-size: var(--mk-fs-small);
	line-height: 1.7;
	color: var(--mk-grey);
}
.mk-clubmed .mkcm-featured-note strong { color: var(--mk-ink); }
.mk-clubmed .mkcm-featured-note a {
	color: var(--mk-teal-text);
	font-weight: 600;
	/* `font-size: inherit` is load-bearing. The Elementor Kit sizes `a` globally, so this link
	   rendered visibly LARGER than the 13px sentence it sits inside — "our Maldives page" set at
	   body size mid-caption, which reads as a broken paste rather than a link. Caught in the §4
	   crop; no machine check would ever have flagged it. */
	font-size: inherit;
	line-height: inherit;
}

/* ------------------------------------------- §7 WHY AN AGENT (split, one frame) --- */
/* Was a plain text band; the first density run measured a FULL DESKTOP VIEWPORT at 0% photography
   here. The fix is the ratified `.mkv-split` with the ONE frame this copy is already about — a
   Kiroro Peak guest room, against the Kiroro Grand family photography two bands above (see the
   template comment). Not padding: the second bullet names both villages by name.

   ONE frame, not the pair §2 uses. `.mkv-split-media` is a 1fr 1fr grid by default and a single
   child in it would sit in the left half with a hole beside it — the empty-right-half defect, just
   inside the media column. Collapsed to one column here. */
.mk-clubmed .mkcm-agent-band { background: var(--mk-white); }
.mk-clubmed .mkcm-agent-media { grid-template-columns: 1fr; }
.mk-clubmed .mkcm-agent-media img { min-height: 560px; }
@media (max-width: 899px) {
	/* Stacked below the copy. 300px rather than the inherited 210: this is a ROOM, and at 210 out
	   of a 3:2 landscape master the bed and the window wall — the whole subject — crop away. */
	.mk-clubmed .mkcm-agent-media img { min-height: 300px; }
}
.mk-clubmed .mkcm-agent-lead {
	margin: 0 0 24px;
	max-width: var(--mk-measure);
	font-size: var(--mk-fs-lead);
	line-height: var(--mk-lh-body);
	color: var(--mk-ink);
}
.mk-clubmed .mkcm-agent-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 18px;
	max-width: var(--mk-measure);
}
.mk-clubmed .mkcm-agent-list li {
	position: relative;
	padding-left: 22px;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}
.mk-clubmed .mkcm-agent-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 10px;
	height: 2px;
	background: #7d5f1f;
}
.mk-clubmed .mkcm-agent-list li strong { color: var(--mk-ink); }
.mk-clubmed .mkcm-agent-close {
	margin: 0;
	max-width: var(--mk-measure);
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}

/* --------------------------------------------------------- §8 FINAL CTA (glass) --- */
/* `.mkv-band--feature` + `.mkv-feature-panel` inherited from home-v2.css, panel LEFT. Only the
   type is styled here; the glass recipe is never restated (GLASS-PANEL LAW). */
.mk-page .mk-clubmed h2.mkcm-cta-title,
.mk-clubmed h2.mkcm-cta-title {
	margin: 0 0 14px;
	font-size: var(--mk-fs-h2);
	font-weight: 700;
	letter-spacing: var(--mk-track-tight);
	line-height: var(--mk-lh-heading);
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.88), 0 0 18px rgba(0,0,0,0.72);
}
.mk-clubmed .mkcm-cta-line {
	margin: 0 0 22px;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 5px rgba(0,0,0,0.88), 0 0 14px rgba(0,0,0,0.74);
}
.mk-clubmed .mkcm-cta-note {
	margin: 14px 0 0;
	font-size: var(--mk-fs-small);
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.8);
}
.mk-clubmed .mkv-feature-panel .mk-cta {
	background: #ffffff;
	color: var(--mk-ink) !important;
	border-color: #ffffff;
	font-weight: 700;
}
.mk-clubmed .mkv-feature-panel .mk-cta:hover {
	background: var(--mk-alt-surface);
	border-color: var(--mk-alt-surface);
}
/* The panel's eyebrow sits on glass over photography, so it is WHITE, not gold. */
.mk-clubmed .mkv-feature-panel .mk-section-eyebrow {
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.82);
}

/* =====================================================================================
   THE ROUTE PAGES — /club-med/<sun|ski|region>/
   Same body class, so everything above still applies; these rules are the listing view only.
   ===================================================================================== */

/* ---- ROUTE HEADER ------------------------------------------------------------------
   Shorter than the hub hero (it is a section head, not a front door) and it has TWO forms:
   photographic where the route's own set holds photography, typographic where it does not.
   Four of the six regions hold ZERO Club Med frames, and a Hokkaido photograph over "Club Med
   villages in the Caribbean" would be a real image telling a false story — the GR6 breach. So the
   typographic form is not a fallback, it is the correct rendering of an honest absence. */
.mk-clubmed .mkcm-rhero {
	position: relative;
	min-height: clamp(360px, 46vh, 480px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #0b1418;
}
.mk-clubmed .mkcm-rhero-media { position: absolute; inset: 0; z-index: 0; }
.mk-clubmed .mkcm-rhero-img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block; object-position: 50% 50%;
}
.mk-clubmed .mkcm-rhero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		78% 116% at 0% 96%,
		rgba(6, 16, 22, 0.78) 0%,
		rgba(6, 16, 22, 0.52) 34%,
		rgba(6, 16, 22, 0.22) 60%,
		rgba(6, 16, 22, 0) 92%
	);
	pointer-events: none;
	z-index: 1;
}
/* The typographic header: a calm ink field with one soft light source — the same composed treatment
   the tours hub gives an assetless tile, so an absent photograph reads as deliberate rather than as
   a failed load. */
.mk-clubmed .mkcm-rhero--type {
	min-height: clamp(280px, 34vh, 380px);
	background-color: var(--mk-ink-canvas);
	background-image:
		radial-gradient(120% 90% at 82% 6%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 62%),
		linear-gradient(152deg, #161c1f 0%, #0e1214 46%, #0a0d0f 100%);
}
.mk-clubmed .mkcm-rhero-inner {
	position: relative; z-index: 2; width: 100%;
	max-width: 1440px;
	padding-top: 0; padding-bottom: clamp(32px, 4vw, 56px);
}
.mk-clubmed .mkcm-rhero-panel { max-width: 700px; }
@media (max-width: 767px) {
	.mk-clubmed .mkcm-rhero-panel { max-width: none; padding: 20px; }
}
.mk-clubmed .mkcm-rhero-plain { max-width: 700px; }
.mk-clubmed .mkcm-rhero-crumb {
	margin: 0 0 12px;
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
}
.mk-clubmed .mkcm-rhero-crumb a {
	color: var(--mk-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 168, 83, 0.42);
}
/* On the photographic header the crumb sits on the glass panel over a photograph, where gold is
   forbidden — it goes white with a halo instead. Gold survives only on the typographic header,
   which is a solid ground. */
.mk-clubmed .mkcm-rhero-panel .mkcm-rhero-crumb a {
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.5);
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.8);
}
.mk-page .mk-clubmed h1.mkcm-rhero-title,
.mk-clubmed h1.mkcm-rhero-title {
	margin: 0 0 14px;
	color: #ffffff;
	font-weight: 700;
	font-size: clamp(1.7rem, 3.6vw, 2.9rem);
	line-height: var(--mk-lh-heading);
	letter-spacing: var(--mk-track-display);
	max-width: 20ch;
	text-wrap: balance;
}
.mk-clubmed .mkcm-rhero-panel .mkcm-rhero-title,
.mk-clubmed .mkcm-rhero-panel .mkcm-rhero-lede,
.mk-clubmed .mkcm-rhero-panel .mkcm-rhero-count {
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.86), 0 0 18px rgba(0,0,0,0.66);
}
.mk-clubmed .mkcm-rhero-lede {
	margin: 0 0 14px;
	max-width: 56ch;
	font-size: var(--mk-fs-lead);
	line-height: var(--mk-lh-body);
	color: rgba(255, 255, 255, 0.92);
}
.mk-clubmed .mkcm-rhero-count {
	margin: 0;
	font-size: var(--mk-fs-small);
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: var(--mk-gold);
}
.mk-clubmed .mkcm-rhero-panel .mkcm-rhero-count { color: #ffffff; }   /* never gold over photography */

/* ---- THE LIST --------------------------------------------------------------------- */
.mk-clubmed .mkcm-list-band { padding-block: clamp(48px, 5vw, 72px); }

/* THE ALPS NOTE — and any future partial set. Loud enough to be read before the list, quiet enough
   not to read as an error state. Gold left rule on solid ink: a permitted ground. */
.mk-clubmed .mkcm-partial {
	margin: 0 0 var(--mk-space-lg);
	max-width: 74ch;
	padding: 16px 20px;
	border-left: 3px solid var(--mk-gold);
	background: rgba(255, 255, 255, 0.055);
	border-radius: 0 var(--mk-r-card) var(--mk-r-card) 0;
	font-size: var(--mk-fs-body);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.84);
}
.mk-clubmed .mkcm-partial strong { color: #ffffff; }
.mk-clubmed .mkcm-empty {
	margin: 0;
	font-size: var(--mk-fs-body);
	color: rgba(255, 255, 255, 0.8);
}
.mk-clubmed .mkcm-empty a { color: var(--mk-gold); }

.mk-clubmed .mkcm-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 600px)  { .mk-clubmed .mkcm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mk-clubmed .mkcm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

.mk-clubmed .mkcm-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--mk-r-card);
	transition: transform var(--mk-dur) var(--mk-ease),
	            border-color var(--mk-dur) var(--mk-ease),
	            background var(--mk-dur) var(--mk-ease);
}
.mk-clubmed .mkcm-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.40);
	background: rgba(255, 255, 255, 0.10);
}
.mk-clubmed .mkcm-card:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 3px; }
.mk-clubmed .mkcm-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #10171b;
	aspect-ratio: 16 / 9;
}
.mk-clubmed .mkcm-card-img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform 620ms var(--mk-ease-out);
}
.mk-clubmed .mkcm-card:hover .mkcm-card-img { transform: scale(1.04); }

/* THE TYPOGRAPHIC CARD — 45 of the 51 villages. A composed ink field with the country set small and
   wide-tracked under a short gold rule. Never blank, never an outlined box, and never a borrowed
   photograph. It has to survive being seen 22 times down one page, which is why it is quiet:
   contrast is bought with size and tracking, not with brightness. */
.mk-clubmed .mkcm-card--type .mkcm-card-media {
	display: grid;
	place-items: center;
	padding: 18px;
	aspect-ratio: 16 / 9;
	background-color: #0d1519;
	background-image:
		radial-gradient(120% 92% at 76% 6%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(152deg, rgba(23,32,36,0) 0%, #0c1215 52%, #090e11 100%);
}
.mk-clubmed .mkcm-card-mark {
	display: block;
	text-align: center;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.56);   /* ~5.9:1 on #0d1519 */
}
.mk-clubmed .mkcm-card-mark::before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	margin: 0 auto 12px;
	background: var(--mk-gold);
	opacity: 0.72;
}
.mk-clubmed .mkcm-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 15px 17px 18px;
}
.mk-clubmed .mkcm-card-meta {
	display: block;
	margin-bottom: 6px;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: var(--mk-gold);
}
/* `h2` because on a listing page each village IS a heading, and the route title is the h1. Pinned
   element+class against the Elementor Kit's `h2 { color:#1a1a1a }`, which would otherwise paint
   every one of these near-black on near-black — the exact defect home-v2.css records. */
.mk-page .mk-clubmed h2.mkcm-card-name,
.mk-clubmed h2.mkcm-card-name {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--mk-track-tight);
	color: #ffffff;
}
.mk-clubmed .mkcm-card-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.mk-clubmed .mkcm-chip {
	display: inline-block;
	padding: 4px 9px;
	border-radius: var(--mk-r-pill);
	border: 1px solid rgba(255, 255, 255, 0.20);
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.6875rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.82);
}
.mk-clubmed .mkcm-card-link {
	display: block;
	margin-top: auto;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-cta);
	text-transform: uppercase;
	color: var(--mk-gold);
}
.mk-clubmed .mkcm-card:hover .mkcm-card-link { text-decoration: underline; }

/* ---- CROSS-NAV -------------------------------------------------------------------- */
.mk-clubmed .mkcm-crossnav {
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.mk-clubmed .mkcm-crossnav-head {
	margin: 0 0 14px;
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}
.mk-clubmed .mkcm-crossnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
}
.mk-clubmed .mkcm-crossnav a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--mk-r-pill);
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-size: var(--mk-fs-small);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	transition: border-color var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}
.mk-clubmed .mkcm-crossnav a:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.10); }
.mk-clubmed .mkcm-crossnav a:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 2px; }

/* ---- ROUTE CTA (text band, not a second glass feature) ----------------------------- */
.mk-clubmed .mkcm-route-cta { background: var(--mk-white); }
.mk-clubmed .mkcm-route-cta-line {
	margin: 0 0 26px;
	max-width: var(--mk-measure);
	font-size: var(--mk-fs-lead);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}

/* ---- PER-DOOR CROP ----------------------------------------------------------------
   The two door frames are different shapes and different subjects going into the same 16:10 box,
   so one shared `object-position` cannot serve both. Set from the rendered page, not from the
   aspect arithmetic:
     SUN  2952 is 1440x1200 (6:5) — the tallest source on the page, so 16:10 takes the biggest bite
          out of it. The island and its overwater rows run from upper-left to lower-right, and the
          top of the frame is open sea; 50% 56% drops the empty water and keeps the villas.
     SKI  2913 is 2560x1708 (3:2). The skier sits centre-left with the spray below, and the top
          quarter is bare birch; 50% 58% holds the skier and the spray, which is the whole frame.
   These are the same lever the tours hero uses per rotating frame, for the same reason. */
.mk-clubmed .mkcm-door--sun .mkcm-door-img { object-position: 50% 56%; }
.mk-clubmed .mkcm-door--ski .mkcm-door-img { object-position: 50% 58%; }

/* ================================================ §4 BROWSE BY STYLE — the second way in ==
   The Maldives hub's ratified radio/sibling rail (page 595), reused rather than reinvented, WITH
   THE THREE LESSONS THAT FILE RECORDS CARRIED ACROSS — each was a real defect there and would have
   been a real defect here:
     1. NUMERAL ABOVE NAME, never `column-reverse`. With the numeral below, and tabs stretched to
        fill the rail, the gap between a tab's numeral and the NEXT tab's name is smaller than the
        gap inside the tab — so every numeral reads as labelling the category beneath it.
     2. 16:9, NOT 21:9. The vertical tab rail's height is set by its rotated labels; at 21:9 the
        panel beside it is shorter than the rail and the shortfall renders as an empty rectangle
        bottom-left. 16:9 makes the panel the taller of the two, so the rail stretches to the
        photograph instead of the photograph leaving a hole.
     3. EXPLICIT ID PAIRS, never `nth-child`. A positional selector silently breaks the moment a
        style is withheld — and one IS withheld here (`babies-welcome`, no honest photograph), so
        an nth-child rail would have shipped pointing every tab at the wrong panel.

   THE BAND SITS ON --mk-alt-surface, the sanctioned faintest cool grey. NOT the Maldives band's
   hardcoded #f4f1ec: cream/beige is banned as a background site-wide (Phase-R Step 5 A1,
   PO-ratified). That is a pre-existing hardcode on a passed page, not something to copy forward.
   The grey also does the compositional work — it separates this band from the white featured band
   below it without adding a third ink band after the dark signature above. */
/* ---- THE ONE COLOUR THIS BAND CANNOT INHERIT ----------------------------------------
   `--mk-grey` (#6b7280) is the site's muted body colour and it scores 4.834:1 on white — which is
   why it passes on every other band of this page. On `--mk-alt-surface` (#f0f4f5) it drops to
   4.366:1 and FAILS the 4.5 floor for normal text. Three nodes failed on the first render of this
   band: the intro note, the panel blurb and the Winter/Summer qualifier.
   #626976 is the same hue and weight, darkened until it clears with margin — MEASURED 4.988:1 on
   this exact ground. Precisely the move this build already makes for gold, which is darkened to
   #7d5f1f for AA on white rather than being used at its token value.
   THE BAND STAYS GREY. Making it white would have fixed the contrast by deleting the reason the
   band exists: it sits between the dark signature band and the white featured band, and without
   its own ground the style rail and the featured tiles merge into one undifferentiated white run. */
.mk-clubmed .mkcm-style-band {
	background: var(--mk-alt-surface);
	padding-block: clamp(48px, 5vw, 72px);
	--mkcm-grey-on-alt: #626976;
}
.mk-clubmed .mkcm-style-note {
	max-width: 62ch;
	margin: 0 0 30px;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mkcm-grey-on-alt);
}

/* =====================================================================================
   THE BROWSE RAIL — ONE COMPONENT, TWO INSTANCES (PO instruction 2026-08-03)

   §3 regions and §4 styles are now the SAME component: mykish_clubmed_rail() renders the markup,
   these rules style it, and the two call sites differ only in their data and their THEME. Copying
   this block into a second namespace is the failure the GLASS-PANEL LAW records — a recipe that
   lives in one place and is inherited by none.

   THEMING IS BY CUSTOM PROPERTY, NOT BY DUPLICATION. The style rail sits on the faintest grey and
   the region rail on the ink canvas, so every colour the component uses is a variable set by the
   BAND. One structure, two palettes, no second copy of the layout.

   NO ANCESTOR `opacity` ON THE TABS, AND THAT IS A CORRECTION.
   The first style rail dimmed an inactive tab with `opacity: 0.5` — inherited from the Maldives
   rail. Two problems. First, it compounds: the numeral carries its own 0.7, so an inactive numeral
   rendered at 0.35 effective — about 2.2:1 on the light band, a real AA failure on a real
   interactive control. Second, and the reason it survived four verification runs: MY CONTRAST
   SCORER CANNOT SEE ANCESTOR OPACITY. It reads each node's computed `color` and composites the
   background stack; a faded ancestor changes neither. So the instrument reported 0 fails on type
   that was visibly too light. Both states now set an explicit colour, which is measurable — and the
   fix reaches the style rail as well, since there is only one component to fix.
   ===================================================================================== */
.mk-clubmed .mkcm-rail {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	align-items: start;
}
/* ---- theme: the style band, on --mk-alt-surface ---- */
.mk-clubmed .mkcm-style-band .mkcm-rail {
	--rail-rule:       rgba(26, 26, 26, 0.16);
	--rail-name:       var(--mk-ink);
	--rail-name-off:   #5f6673;              /* measured 5.22:1 on #f0f4f5 */
	--rail-muted:      #626976;              /* measured 4.99:1 on #f0f4f5 */
	--rail-village:    var(--mk-ink);
	--rail-village-rule: rgba(26, 26, 26, 0.18);
	--rail-more:       var(--mk-teal-text);
	--rail-media-bg:   #dfe6e4;
}
/* ---- theme: the region rail, on --mk-ink-canvas ---- */
.mk-clubmed .mkcm-regions .mkcm-rail {
	--rail-rule:       rgba(255, 255, 255, 0.16);
	--rail-name:       #ffffff;
	--rail-name-off:   rgba(255, 255, 255, 0.72);
	--rail-muted:      rgba(255, 255, 255, 0.66);
	--rail-village:    rgba(255, 255, 255, 0.86);
	--rail-village-rule: rgba(255, 255, 255, 0.18);
	--rail-more:       var(--mk-gold);       /* gold on solid ink — a permitted ground */
	--rail-media-bg:   #10171b;
}

/* VISUALLY HIDDEN, NEVER `display:none`. A display-none radio leaves the tab order and the panel
   becomes unreachable by keyboard — the rail would be a mouse-only control. */
.mk-clubmed .mkcm-rail-radio {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.mk-clubmed .mkcm-rail-tabs {
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--rail-rule);
	/* NOT stretched. `flex: 1 1 auto` on the tabs made the rail take the panel's full height and
	   spread six labels down it — fine when panels are photographic and ~900px tall, wrong here,
	   where five region panels carry no photograph and are half that. Natural height keeps the rail
	   and the shortest panel closer together. */
	align-self: start;
	padding-bottom: 8px;
}
.mk-clubmed .mkcm-rail-tab {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;      /* numeral ABOVE name — the Maldives lesson */
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 0 16px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	color: var(--rail-name-off);
	transition: color 0.22s ease;
}
.mk-clubmed .mkcm-rail-tab:hover { color: var(--rail-name); }
.mk-clubmed .mkcm-rail-n {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: inherit;
}
/* The vertical label. `vertical-rl` + 180deg reads bottom-to-top, which keeps it legible with the
   numeral at the top.
   NO `max-height`, NO ELLIPSIS. The first build capped these at 210px to stop long region names
   making the rail taller than the panels beside it, and it rendered "EUROPE & MEDITERRANE…",
   "CARIBBEAN & NORTH AM…", "CENTRAL & SOUTH AMERI…". A region name is CONTENT — the PO ruled the
   six names and their copy correct — and truncating content to win a layout argument is not a
   trade that was ever on offer. The type is smaller and tighter instead, which buys back some of
   the height honestly. */
.mk-clubmed .mkcm-rail-name {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: 700;
	color: inherit;
}
.mk-clubmed .mkcm-rail-panels { min-width: 0; padding-left: 26px; }
.mk-clubmed .mkcm-rail-panel { display: none; }

/* ONE OPEN AT A TIME — EXPLICIT ID PAIRS, never nth-child. A positional selector breaks the moment
   an item is withheld, and one is: `babies-welcome` has a route but no panel. Eleven pairs written
   out: five styles, six regions. */
.mk-clubmed #mkcm-style-flying-trapeze:checked        ~ .mkcm-rail-panels .mkcm-rail-panel--style-flying-trapeze,
.mk-clubmed #mkcm-style-families-from-two:checked     ~ .mkcm-rail-panels .mkcm-rail-panel--style-families-from-two,
.mk-clubmed #mkcm-style-exclusive-collection:checked  ~ .mkcm-rail-panels .mkcm-rail-panel--style-exclusive-collection,
.mk-clubmed #mkcm-style-adults-and-teens:checked      ~ .mkcm-rail-panels .mkcm-rail-panel--style-adults-and-teens,
.mk-clubmed #mkcm-style-babies-welcome:checked        ~ .mkcm-rail-panels .mkcm-rail-panel--style-babies-welcome,
.mk-clubmed #mkcm-region-asia-indian-ocean:checked    ~ .mkcm-rail-panels .mkcm-rail-panel--region-asia-indian-ocean,
.mk-clubmed #mkcm-region-europe-mediterranean:checked ~ .mkcm-rail-panels .mkcm-rail-panel--region-europe-mediterranean,
.mk-clubmed #mkcm-region-caribbean-north-america:checked ~ .mkcm-rail-panels .mkcm-rail-panel--region-caribbean-north-america,
.mk-clubmed #mkcm-region-africa-middle-east:checked   ~ .mkcm-rail-panels .mkcm-rail-panel--region-africa-middle-east,
.mk-clubmed #mkcm-region-central-south-america:checked ~ .mkcm-rail-panels .mkcm-rail-panel--region-central-south-america,
.mk-clubmed #mkcm-region-european-alps:checked        ~ .mkcm-rail-panels .mkcm-rail-panel--region-european-alps {
	display: block;
}
.mk-clubmed #mkcm-style-flying-trapeze:checked        ~ .mkcm-rail-tabs [for="mkcm-style-flying-trapeze"],
.mk-clubmed #mkcm-style-families-from-two:checked     ~ .mkcm-rail-tabs [for="mkcm-style-families-from-two"],
.mk-clubmed #mkcm-style-exclusive-collection:checked  ~ .mkcm-rail-tabs [for="mkcm-style-exclusive-collection"],
.mk-clubmed #mkcm-style-adults-and-teens:checked      ~ .mkcm-rail-tabs [for="mkcm-style-adults-and-teens"],
.mk-clubmed #mkcm-style-babies-welcome:checked        ~ .mkcm-rail-tabs [for="mkcm-style-babies-welcome"],
.mk-clubmed #mkcm-region-asia-indian-ocean:checked    ~ .mkcm-rail-tabs [for="mkcm-region-asia-indian-ocean"],
.mk-clubmed #mkcm-region-europe-mediterranean:checked ~ .mkcm-rail-tabs [for="mkcm-region-europe-mediterranean"],
.mk-clubmed #mkcm-region-caribbean-north-america:checked ~ .mkcm-rail-tabs [for="mkcm-region-caribbean-north-america"],
.mk-clubmed #mkcm-region-africa-middle-east:checked   ~ .mkcm-rail-tabs [for="mkcm-region-africa-middle-east"],
.mk-clubmed #mkcm-region-central-south-america:checked ~ .mkcm-rail-tabs [for="mkcm-region-central-south-america"],
.mk-clubmed #mkcm-region-european-alps:checked        ~ .mkcm-rail-tabs [for="mkcm-region-european-alps"] {
	color: var(--rail-name);
}
.mk-clubmed .mkcm-rail-radio:focus-visible ~ .mkcm-rail-tabs .mkcm-rail-tab {
	outline: 2px solid var(--mk-gold);
	outline-offset: -4px;
}

/* THE LARGE PHOTOGRAPH — 16:9, and OPTIONAL.
   A panel with no photograph carries NO `.mkcm-rail-media` element at all: not an empty frame, not
   a placeholder, not a composed block standing in for one. Five of the six regions are in that
   state, because all six villages Club Med supplied photography for sit in Asia & Indian Ocean.
   There is no rule here for the absent case — that is the point. The panel starts at its heading. */
.mk-clubmed .mkcm-rail-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rail-media-bg);
	border-radius: var(--mk-r-card);
}
.mk-clubmed .mkcm-rail-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mk-clubmed .mkcm-rail-foot {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 30px;
	padding: 22px 0 6px;
}
/* No photograph above it, so the description does not need to clear one. */
.mk-clubmed .mkcm-rail-panel[data-mkcm-nomedia] .mkcm-rail-foot { padding-top: 0; }
/* A PANEL WITH NO PHOTOGRAPH IS SET LARGER, not padded. With no 16:9 frame above it the panel is a
   third the height of one that has one, so the same 13px type in three tight columns reads as a
   fragment of a page rather than a panel. Larger heading, body-size description and a roomier
   two-column village list use the space with CONTENT — the same words, set to be read — instead of
   leaving it blank or filling it with something invented. */
.mk-clubmed .mkcm-rail-panel[data-mkcm-nomedia] .mkcm-rail-foot {
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: 44px;
}
.mk-page .mk-clubmed [data-mkcm-nomedia] h3.mkcm-rail-title,
.mk-clubmed [data-mkcm-nomedia] h3.mkcm-rail-title { font-size: 1.65rem; margin-bottom: 12px; }
.mk-clubmed [data-mkcm-nomedia] .mkcm-rail-blurb {
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	margin-bottom: 18px;
}
.mk-clubmed [data-mkcm-nomedia] .mkcm-rail-villages {
	columns: 2;
	font-size: 1rem;
	line-height: 1.75;
}
.mk-clubmed [data-mkcm-nomedia] .mkcm-rail-villages li { margin-bottom: 10px; }
.mk-clubmed .mkcm-rail-lead { min-width: 0; }
.mk-page .mk-clubmed h3.mkcm-rail-title,
.mk-clubmed h3.mkcm-rail-title {
	margin: 0 0 8px;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--mk-track-tight);
	color: var(--rail-name);
}
.mk-clubmed .mkcm-rail-blurb {
	margin: 0 0 12px;
	font-size: var(--mk-fs-small);
	line-height: 1.65;
	color: var(--rail-muted);
}
.mk-clubmed .mkcm-rail-more {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-cta);
	text-transform: uppercase;
	color: var(--rail-more);
	text-decoration: none;
}
.mk-clubmed .mkcm-rail-more:hover { text-decoration: underline; }

/* VILLAGE NAMES. Multi-column so twenty-two names read as a set rather than a scroll;
   `break-inside: avoid` because these are proper nouns and a name split across a column boundary is
   the classic CSS-columns defect. */
.mk-clubmed .mkcm-rail-villages {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 26px;
	font-size: var(--mk-fs-small);
	line-height: 1.5;
}
@media (min-width: 1100px) { .mk-clubmed .mkcm-rail-villages { columns: 3; } }
.mk-clubmed .mkcm-rail-villages li { break-inside: avoid; margin-bottom: 7px; }
.mk-clubmed .mkcm-rail-villages a {
	color: var(--rail-village);
	text-decoration: none;
	border-bottom: 1px solid var(--rail-village-rule);
}
.mk-clubmed .mkcm-rail-villages a:hover { border-bottom-color: var(--rail-name); color: var(--rail-name); }
.mk-clubmed .mkcm-rail-villages a:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 2px; }
.mk-clubmed .mkcm-rail-villages a span { color: var(--rail-muted); font-size: 0.9em; }

/* =====================================================================================
   THE REGION RAIL RUNS ITS TABS HORIZONTALLY AT EVERY WIDTH — and this is a deviation from the
   instruction, made deliberately, because the instruction contained two requirements that cannot
   both hold for this data.

   ASKED FOR: vertical tab labels. ALSO ASKED FOR: "a composed panel without a photograph is fine;
   a large empty rectangle is not."

   MEASURED, all six region states at 1440, vertical tabs:

       tab rail          1369px   (six rotated region names; this is its NATURAL height, not padding)
       Asia panel         975px   ->   394px of empty ground
       Caribbean panel    273px   -> 1,096px
       Europe panel       215px   -> 1,154px
       Alps panel         212px   -> 1,157px
       Africa panel       183px   -> 1,186px
       C & S America      183px   -> 1,186px

   A vertical rail's height floor is set by its longest rotated label — "EUROPE & MEDITERRANEAN
   COASTS" alone is ~260px — and six of them come to 1,369px whatever the type size. Five of the six
   panels carry no photograph, so they are 183-273px. The difference is not a tuning problem and
   there is nothing honest to fill it with: filling it would be the padding the brief forbids, and
   leaving it is the large empty rectangle the PO forbade in the same sentence as the request.

   The SAME COMPONENT already runs its tabs horizontally below 860px, where it measures a void of
   ZERO in all six states. Extending that treatment up to desktop for this instance keeps every
   other thing that was asked for — the numbered items, one region open at a time, hidden radios, no
   JavaScript, DOM source order, indexable routes, the optional photograph — and costs exactly one:
   the labels read horizontally.

   THE STYLE RAIL IS UNTOUCHED and keeps its vertical labels: its four panels all carry a 16:9
   photograph and run ~900px against a ~600px rail, so it has no void to solve. Reverting this is
   deleting the one selector below.
   ===================================================================================== */
.mk-clubmed .mkcm-rail--region { grid-template-columns: minmax(0, 1fr); }
.mk-clubmed .mkcm-rail--region .mkcm-rail-tabs {
	flex-direction: row;
	/* WRAP, DO NOT SCROLL. The six region labels come to ~1,560px of tab strip against ~1,392px of
	   container at 1440, so a nowrap row put "06 THE EUROPEAN ALPS" off the right edge behind a
	   horizontal scroll nobody would find on a desktop pointer — a tab that exists and cannot be
	   seen is worse than no tab. Wrapping to a second row keeps all six visible and costs 26px.
	   Mobile keeps nowrap-and-scroll (the rule further down), where a swipe is the native gesture
	   and six stacked rows would push the panel off the screen. */
	flex-wrap: wrap;
	border-right: 0;
	border-bottom: 1px solid var(--rail-rule);
	gap: 4px 26px;
	margin-bottom: 24px;
	padding-bottom: 0;
}
.mk-clubmed .mkcm-rail--region .mkcm-rail-tab {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: baseline;
	gap: 8px;
	padding: 0 0 14px;
}
.mk-clubmed .mkcm-rail--region .mkcm-rail-name {
	writing-mode: horizontal-tb;
	transform: none;
	font-size: 0.8rem;
}
.mk-clubmed .mkcm-rail--region .mkcm-rail-panels { padding-left: 0; }

@media (max-width: 860px) {
	/* THE RAIL GOES HORIZONTAL. Six rotated labels down the side of a 390 viewport cost ~60px of a
	   350px content width and squeeze the panel to nothing. The tabs become a scrollable row above
	   the panel, the labels un-rotate, and the numeral sits inline with the name. */
	.mk-clubmed .mkcm-rail { grid-template-columns: minmax(0, 1fr); }
	.mk-clubmed .mkcm-rail-tabs {
		flex-direction: row;
		border-right: 0;
		border-bottom: 1px solid var(--rail-rule);
		overflow-x: auto;
		gap: 18px;
		margin-bottom: 20px;
		padding-bottom: 0;
		-webkit-overflow-scrolling: touch;
	}
	.mk-clubmed .mkcm-rail-tab {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: baseline;
		gap: 7px;
		padding: 0 0 12px;
	}
	.mk-clubmed .mkcm-rail-name {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 0.78rem;
		max-height: none;
	}
	.mk-clubmed .mkcm-rail-panels { padding-left: 0; }
	.mk-clubmed .mkcm-rail-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.mk-clubmed .mkcm-rail-villages { columns: 2; }
}