/* =====================================================================================
   MALDIVES HUB v2 — /destinations/maldives/ and its intent routes
   Rebuilt 2026-08-01 to docs/design/DESIGN_BRIEF_MALDIVES_v2.md, after the PO rejected v1.

   SCOPING LAW: every rule in this file is scoped to `.mk-maldives-hub` / `.mk-maldives-intent`.
   It loads on the hub and the intent routes only, and cascades AFTER home-v2.css (declared
   dependency), so it can never reach /home-v2/ or /destinations/scandinavia/. The ratified band
   system (`.mkv-band--dark`, `--split`, `--feature`, `.mkv-review`, `.mkv-guide`, the glass panel)
   is INHERITED from home-v2.css and deliberately not re-declared here — GLASS-PANEL LAW: the
   recipe is inherited, never re-derived.

   WHAT CHANGED FROM v1, AND WHY (the PO's three findings)
   -------------------------------------------------------------------------------------
   1. §2 was the worst section on the page. ROOT CAUSE, found in this file and the template:
      the markup used `.mkv-split-inner` / `.mkv-split-body`, and `.mkm-split-media` was
      `display:grid; gap:18px` with NO column definition and `max-height:340px` on the images.
      Neither `.mkv-split-inner` nor `.mkv-split-body` exists in ANY stylesheet in this codebase.
      So there was no two-column split at all: the copy took the full width, the photographs
      stacked BELOW it as two letterboxed strips, and the right half of the band was empty white.
      This is the same defect class as v1's invented `.mk-btn` — a class that does not exist
      produces no error, and every machine check stays green over a broken layout.
      FIX: use the RATIFIED `.mkv-split` / `.mkv-split-copy` / `.mkv-split-media` from home-v2.css,
      which is what page 596 §2 uses and what the PO passed. Only the column ratio and the
      minimum height are adjusted here, page-scoped. `.mkm-split-media` / `.mkm-split-img` are
      DELETED rather than repaired — the recipe is inherited, not re-derived.
   2. The flat 23-resort list grouped by supplier is CUT. All of `.mkm-portfolio-band`,
      `.mkm-group*` is deleted with it.
   3. The ways-in rail is REPLACED by Browse-by-Style (`.mkm-style*`) — numbered items, vertical
      tab labels, ONE large photograph open at a time, resort names underneath. `.mkm-intent*` on
      the hub is deleted; the intent-ROUTE styles at the foot of this file stay, because the tabs
      link to those real routes.

   PADDING: the thresholds IN FORCE (PO ruling 2026-08-01). Photographic and dark bands 0-40px;
   text bands 88px. Not uniform.

   GOLD: #d4a853 appears ONLY on dark solid grounds. Never over photography — that was the
   Scandinavia S3/S4 AA failure. On light grounds the darkened #7d5f1f is used instead.

   THAT VALUE WAS MEASURED TWICE. The first build of this file used #8a6a24, carried over from v1,
   with a comment asserting it was the AA-safe choice on #f4f1ec. It is not: measured on the
   rendered page it is **4.47:1**, which fails 4.5 by 0.03 — a comment claiming a number is not
   the number, and the scorer caught it on `.mkm-style-more`. #7d5f1f measures 5.28:1 on the
   warm-paper §4 band and 5.95:1 on the white §5 band, so it clears with margin on both grounds
   this file paints on rather than sitting on the boundary.
   ===================================================================================== */

/* ------------------------------------------------------------------ §1 HERO ------- */
/* ROTATING, EXACTLY THREE FRAMES (brief §4 S1). The CTA is fixed — it sits outside
   `.mkm-hero-media` entirely, so nothing about it moves or re-renders with the frames.

   BRIGHT-HERO LAW: no full-bleed dim. One LOCAL gradient anchored bottom-left, doing its falloff
   with a RADIAL ramp that reaches zero well inside the frame. v1's first build sized the element
   to `min(72%,900px) x min(78%,620px)` with a linear ramp; that read as a hard rectangular seam
   across the sky because the box edge cut the ramp before it reached zero. A gradient must fade
   out inside its own box, or the box becomes the edge. */
.mk-maldives-hub .mkm-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #0d1b1e;
}
.mk-maldives-hub .mkm-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.mk-maldives-hub .mkm-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 46%;
	display: block;
}
/* THE ROTATION. One shared keyframe, three negative delays — not three keyframe sets, which is
   three things to keep in sync. 21s cycle, 7s per frame, 1s crossfade.
   Frame 1 is opaque at rest and is the ONLY frame that renders under reduced-motion, so the
   first paint is identical whether the animation runs or not: no CLS, no flash of a second
   photograph, nothing for the LCP to fight with. */
@keyframes mkmHeroFrame {
	0%      { opacity: 1; }
	28.57%  { opacity: 1; }   /*  6s  — hold */
	33.33%  { opacity: 0; }   /*  7s  — crossfade out */
	95.24%  { opacity: 0; }   /* 20s  — off */
	100%    { opacity: 1; }   /* 21s  — crossfade back in */
}
.mk-maldives-hub .mkm-hero-frame {
	opacity: 0;
	animation: mkmHeroFrame 21s linear infinite;
	will-change: opacity;
}
.mk-maldives-hub .mkm-hero-frame--1 { opacity: 1; animation-delay:   0s; }
.mk-maldives-hub .mkm-hero-frame--2 { animation-delay: -14s; }
.mk-maldives-hub .mkm-hero-frame--3 { animation-delay:  -7s; }

/* The 01/02/03 marks. They are DECORATIVE and aria-hidden in the markup — the photographs carry
   no information the copy does not already state, so this is a rhythm cue, not a control. */
.mk-maldives-hub .mkm-hero-marks {
	position: absolute;
	right: var(--mk-pad-x, 20px);
	bottom: 88px;
	z-index: 2;
	display: flex;
	gap: 14px;
	align-items: center;
}
.mk-maldives-hub .mkm-hero-mark {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	color: #ffffff;
	opacity: 0.34;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	animation: mkmHeroMark 21s linear infinite;
}
@keyframes mkmHeroMark {
	0%, 31.5%   { opacity: 0.92; border-bottom-color: rgba(255, 255, 255, 0.92); }
	33.33%, 98% { opacity: 0.34; border-bottom-color: rgba(255, 255, 255, 0.28); }
	100%        { opacity: 0.92; border-bottom-color: rgba(255, 255, 255, 0.92); }
}
.mk-maldives-hub .mkm-hero-mark--1 { animation-delay:   0s; }
.mk-maldives-hub .mkm-hero-mark--2 { animation-delay: -14s; }
.mk-maldives-hub .mkm-hero-mark--3 { animation-delay:  -7s; }

.mk-maldives-hub .mkm-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		78% 108% at 0% 92%,
		rgba(6, 20, 24, 0.74) 0%,
		rgba(6, 20, 24, 0.48) 34%,
		rgba(6, 20, 24, 0.21) 58%,
		rgba(6, 20, 24, 0.06) 78%,
		rgba(6, 20, 24, 0) 92%
	);
	pointer-events: none;
	z-index: 1;
}
.mk-maldives-hub .mkm-hero-inner {
	position: relative;
	z-index: 2;
	padding-top: 0;
	padding-bottom: 88px;
	max-width: 1440px;
	width: 100%;
}
.mk-maldives-hub .mkm-hero-eyebrow {
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #ffffff;
	opacity: 0.86;
	margin: 0 0 14px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
/* Element+class pinned, and a colour declared on the element itself — the Elementor Kit's own
   h1/h2 selectors have silently overridden headings over photography three times (L-12). */
h1.mk-maldives-hub .mkm-hero-title,
.mk-maldives-hub h1.mkm-hero-title {
	color: #ffffff;
	font-size: clamp(2.3rem, 5.4vw, 4.05rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
	margin: 0 0 20px;
	max-width: 16ch;
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.mk-maldives-hub .mkm-hero-sub {
	color: #ffffff;
	font-size: clamp(1rem, 1.5vw, 1.16rem);
	line-height: 1.55;
	max-width: 46ch;
	margin: 0 0 30px;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.mk-maldives-hub .mkm-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}
/* Hero CTAs use the site's real `.mk-cta` component. v1 invented `.mk-btn` / `.mk-btn--primary`,
   classes that do not exist anywhere in this codebase, so both CTAs rendered as bare links over
   the photograph while contrast, h-scroll and density all stayed green. */
.mk-maldives-hub .mkm-hero-ctas .mk-cta {
	background: #ffffff;
	color: #1a1a1a !important;
	border-color: #ffffff;
	font-weight: 700;
}
.mk-maldives-hub .mkm-hero-ctas .mk-cta:hover {
	background: #f4f1ec;
	border-color: #f4f1ec;
	color: #1a1a1a !important;
}

/* ----------------------------------------------------------- §2 POSITIONING ------- */
/* The band that was rebuilt. Structure is the RATIFIED `.mkv-split` from home-v2.css — the same
   markup page 596 §2 uses. Only two things are adjusted, both page-scoped and both because this
   band has to carry a genuine half of photography rather than a decorative sliver:
     - the media column moves from 0.82fr to 0.95fr, so the split reads as halves;
     - the images get a taller floor so they fill the band rather than letterboxing.
   Nothing else about the recipe is touched. */
@media (min-width: 900px) {
	.mk-maldives-hub .mkv-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	}
	.mk-maldives-hub .mkv-split-media img {
		min-height: 480px;
	}
}
.mk-maldives-hub .mkm-lines {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.mk-maldives-hub .mkm-lines li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 15px;
	font-size: 1.03rem;
	line-height: 1.6;
	max-width: 52ch;
}
.mk-maldives-hub .mkm-lines li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 2px;
	background: #d4a853; /* on white — a ground we control */
}
.mk-maldives-hub .mkm-lines-note {
	font-size: 0.95rem;
	line-height: 1.6;
	opacity: 0.78;
	max-width: 52ch;
	margin: 0;
}

/* -------------------------------------------------- §3 SIX FEATURED — SIGNATURE --- */
/* The band the page is judged on. Boldness is spent here; every other band stays disciplined. */
.mk-maldives-hub .mkm-featured-band {
	padding-top: 40px;
	padding-bottom: 40px;
}
.mk-maldives-hub .mkm-featured-intro {
	color: rgba(255, 255, 255, 0.76);
	max-width: 56ch;
	margin: 0 0 34px;
	font-size: 1.02rem;
	line-height: 1.6;
}
.mk-maldives-hub .mkm-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.mk-maldives-hub .mkm-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	overflow: hidden;
	transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.mk-maldives-hub .mkm-card:hover,
.mk-maldives-hub .mkm-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(212, 168, 83, 0.55);
	background: rgba(255, 255, 255, 0.075);
}
/* 3:2 rather than 4:3. Every one of the six frames is a wide aerial; a 4:3 crop was cutting the
   lagoon out of the sides of the very photographs the band exists to show. */
.mk-maldives-hub .mkm-card-media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #12262b;
}
.mk-maldives-hub .mkm-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.mk-maldives-hub .mkm-card:hover .mkm-card-img {
	transform: scale(1.04);
}
.mk-maldives-hub .mkm-card-body {
	display: flex;
	flex-direction: column;
	padding: 20px 22px 22px;
	flex: 1;
}
.mk-maldives-hub .mkm-card-eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #d4a853; /* dark solid band — AA-safe ground, never over photography */
	margin-bottom: 9px;
	display: block;
}
.mk-maldives-hub .mkm-card-dot {
	margin: 0 7px;
	opacity: 0.6;
}
.mk-maldives-hub h3.mkm-card-name,
.mk-maldives-hub .mkm-card-name {
	color: #ffffff;
	font-size: 1.2rem;
	line-height: 1.28;
	margin: 0 0 9px;
	font-weight: 600;
}
/* TWO LINES, NOT FIVE. The clamp is a guard rail, not the fix — the copy itself is two lines. */
.mk-maldives-hub .mkm-card-line {
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.93rem;
	line-height: 1.55;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mk-maldives-hub .mkm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 16px;
}
.mk-maldives-hub .mkm-badge {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: rgba(255, 255, 255, 0.86);
	white-space: nowrap;
}
/* "Personally visited" is the strongest badge on the page and the one claim no competitor can
   copy. It gets the gold, on a dark solid ground. */
.mk-maldives-hub .mkm-badge--visited {
	border-color: rgba(212, 168, 83, 0.7);
	color: #e8c98a;
}
.mk-maldives-hub .mkm-card-link {
	margin-top: auto;
	font-size: 0.84rem;
	letter-spacing: 0.05em;
	color: #ffffff;
	opacity: 0.9;
}

/* ------------------------------------------------- §4 BROWSE BY STYLE ------------- */
/* REPLACES the ways-in rail (brief §2 B / §4 S4). Numbered items, vertical tab labels, ONE large
   photograph open at a time, resort names underneath.

   NO JAVASCRIPT. The open/closed state is hidden radio inputs plus a sibling selector, so:
     - every panel is in the DOM and in the source order a crawler reads, whether open or not;
     - every resort name and every category route is a real <a> that works with JS disabled;
     - there is no hydration, no flash of all-panels-open, and nothing to keep in sync with PHP.
   The tab itself is a <label>, not a link, because clicking it must OPEN the panel rather than
   navigate; the route link lives inside the panel where the customer can see what they are about
   to commit to. Each category is still a real indexable route — /destinations/maldives/for/<slug>/
   — rendered by templates/maldives-intent.php, which is what "indexable route, not a client-side
   filter" requires. The tabs are a way to LOOK; the routes are the pages. */
.mk-maldives-hub .mkm-style-band {
	padding-top: 40px;
	padding-bottom: 40px;
	background: #f4f1ec;
}
.mk-maldives-hub .mkm-style-note {
	max-width: 56ch;
	margin: 0 0 30px;
	font-size: 1rem;
	line-height: 1.6;
	opacity: 0.82;
}
.mk-maldives-hub .mkm-style {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
}
/* Visually hidden, never `display:none` — a display-none radio is removed from the tab order and
   the panel becomes unreachable by keyboard. This keeps it focusable, and `:focus-visible` on the
   input paints a ring on its own label below. */
.mk-maldives-hub .mkm-style-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-maldives-hub .mkm-style-tabs {
	display: flex;
	flex-direction: column;
	border-right: 1px solid rgba(26, 26, 26, 0.16);
}
/* NUMBER ABOVE NAME, not below. The first render used `column-reverse`, which put "01" underneath
   HONEYMOON — and because the tabs stretch to fill the rail, the gap between a tab's numeral and
   the NEXT tab's name was smaller than the gap inside the tab itself. Every numeral therefore read
   as labelling the category below it. Caught on the rendered crop; no check measures which label a
   numeral appears to belong to. */
.mk-maldives-hub .mkm-style-tab {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 12px 0;
	cursor: pointer;
	color: #1a1a1a;
	opacity: 0.5;
	transition: opacity 0.22s ease;
	-webkit-user-select: none;
	user-select: none;
}
.mk-maldives-hub .mkm-style-tab:hover { opacity: 0.8; }
.mk-maldives-hub .mkm-style-n {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	opacity: 0.7;
}
/* The vertical label. `vertical-rl` + 180deg reads bottom-to-top, which is the direction the
   reference set uses and the one that stays legible with the numeral at the bottom. */
.mk-maldives-hub .mkm-style-name {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 0.86rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: 600;
}
.mk-maldives-hub .mkm-style-panels {
	min-width: 0;
	padding-left: 26px;
}
.mk-maldives-hub .mkm-style-panel { display: none; }

/* ONE OPEN AT A TIME. Seven pairs, written out rather than generated, because a nth-child
   relationship between an input and a panel silently breaks the moment a category is hidden for
   matching fewer than two resorts — which is exactly what All-inclusive does today. */
.mk-maldives-hub #mkm-style-honeymoon:checked     ~ .mkm-style-panels .mkm-style-panel--honeymoon,
.mk-maldives-hub #mkm-style-family:checked        ~ .mkm-style-panels .mkm-style-panel--family,
.mk-maldives-hub #mkm-style-adults-only:checked   ~ .mkm-style-panels .mkm-style-panel--adults-only,
.mk-maldives-hub #mkm-style-diving:checked        ~ .mkm-style-panels .mkm-style-panel--diving,
.mk-maldives-hub #mkm-style-water-villas:checked  ~ .mkm-style-panels .mkm-style-panel--water-villas,
.mk-maldives-hub #mkm-style-great-value:checked   ~ .mkm-style-panels .mkm-style-panel--great-value,
.mk-maldives-hub #mkm-style-all-inclusive:checked ~ .mkm-style-panels .mkm-style-panel--all-inclusive {
	display: block;
}
.mk-maldives-hub #mkm-style-honeymoon:checked     ~ .mkm-style-tabs [for="mkm-style-honeymoon"],
.mk-maldives-hub #mkm-style-family:checked        ~ .mkm-style-tabs [for="mkm-style-family"],
.mk-maldives-hub #mkm-style-adults-only:checked   ~ .mkm-style-tabs [for="mkm-style-adults-only"],
.mk-maldives-hub #mkm-style-diving:checked        ~ .mkm-style-tabs [for="mkm-style-diving"],
.mk-maldives-hub #mkm-style-water-villas:checked  ~ .mkm-style-tabs [for="mkm-style-water-villas"],
.mk-maldives-hub #mkm-style-great-value:checked   ~ .mkm-style-tabs [for="mkm-style-great-value"],
.mk-maldives-hub #mkm-style-all-inclusive:checked ~ .mkm-style-tabs [for="mkm-style-all-inclusive"] {
	opacity: 1;
}
.mk-maldives-hub .mkm-style-radio:focus-visible ~ .mkm-style-tabs .mkm-style-tab {
	outline: 2px solid #7d5f1f;
	outline-offset: -4px;
}

/* THE LARGE PHOTOGRAPH. 16:9 on desktop — the band's whole purpose is one big frame.
   IT WAS 21:9, AND THAT LEFT A HOLE. The vertical tab rail's natural height is set by six rotated
   labels (~150px each, ~900px total); at 21:9 the panel beside it came to only ~870px, so the grid
   row took the rail's height and the panel's shortfall rendered as a ~210px empty rectangle under
   the resort names, bottom-left of the band — the empty-quadrant defect this rebuild exists to
   remove, arriving from the one direction no threshold looks at. 16:9 makes the panel the taller
   of the two, so the rail stretches to the photograph instead of the photograph leaving a gap.
   It is also the better crop: 21:9 was slicing the sky and the lagoon off these aerials. */
.mk-maldives-hub .mkm-style-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #dfe6e4;
	border-radius: 2px;
}
.mk-maldives-hub .mkm-style-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* RESORT NAMES UNDERNEATH — the brief's words, and the only way into the full portfolio now that
   the flat supplier-grouped list is cut. */
.mk-maldives-hub .mkm-style-foot {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 30px;
	padding: 22px 0 6px;
}
.mk-maldives-hub h3.mkm-style-title,
.mk-maldives-hub .mkm-style-title {
	font-size: 1.35rem;
	line-height: 1.2;
	margin: 0 0 8px;
	color: #1a1a1a;
	font-weight: 600;
}
.mk-maldives-hub .mkm-style-blurb {
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.78;
	margin: 0 0 14px;
	color: #1a1a1a;
}
.mk-maldives-hub .mkm-style-more {
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	/* darkened gold — #d4a853 does not clear 4.5:1 on #f4f1ec (the Scandinavia S3/S4 failure) */
	color: #7d5f1f;
	text-decoration: none;
	border-bottom: 1px solid rgba(138, 106, 36, 0.45);
	padding-bottom: 2px;
}
.mk-maldives-hub .mkm-style-more:hover {
	border-bottom-color: #7d5f1f;
}
.mk-maldives-hub .mkm-style-resorts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px 22px;
	align-content: start;
}
.mk-maldives-hub .mkm-style-resorts a {
	display: block;
	padding: 6px 0;
	font-size: 0.92rem;
	line-height: 1.35;
	color: #1a1a1a;
	text-decoration: none;
	border-bottom: 1px solid rgba(26, 26, 26, 0.09);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.mk-maldives-hub .mkm-style-resorts a:hover,
.mk-maldives-hub .mkm-style-resorts a:focus-visible {
	color: #7d5f1f;
	border-bottom-color: #7d5f1f;
}

/* ---------------------------------------------------- §5 360 VIRTUAL TOURS -------- */
/* LINK-OUT ONLY. Nothing here is embedded, and nothing here claims the tours are ours — the band
   names the host in its own copy and every row carries an external-link mark plus rel="noopener".
   Until the PO answers the ownership question in brief §5, that is the whole design brief for
   this band: advertise that the tours exist, be explicit about whose they are, and link. */
.mk-maldives-hub .mkm-tours-band {
	padding-top: 88px;
	padding-bottom: 88px;
}
.mk-maldives-hub .mkm-tours-lead {
	max-width: 60ch;
	margin: 0 0 8px;
	font-size: 1.02rem;
	line-height: 1.62;
}
.mk-maldives-hub .mkm-tours-note {
	max-width: 60ch;
	margin: 0 0 30px;
	font-size: 0.9rem;
	line-height: 1.6;
	opacity: 0.72;
}
/* THREE COLUMNS, NOT FOUR, AND THE COUNT IS THE REASON. There are 21 verified tours; a four-column
   grid renders five full rows plus ONE orphan card with three empty cells beside it — a visible
   empty three-quarters at the foot of the band, which is the defect this whole rebuild exists to
   remove. 21 divides exactly by three. The extra width also stops five of the longer resort names
   ("Meeru Maldives Resort Island", "Kuredu Island Resort & Spa") wrapping to a second line, which
   was what made the rows ragged. Both defects, one number. */
.mk-maldives-hub .mkm-tours {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.mk-maldives-hub .mkm-tour {
	min-width: 0;
	display: flex;
	background: #ffffff;
	border: 1px solid rgba(26, 26, 26, 0.1);
	border-radius: 2px;
	overflow: hidden;
}
.mk-maldives-hub .mkm-tour-media {
	flex: 0 0 92px;
	display: block;
	overflow: hidden;
	background: #dfe6e4;
}
.mk-maldives-hub .mkm-tour-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mk-maldives-hub .mkm-tour-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 12px 14px;
	min-width: 0;
	flex: 1;
}
/* TWO affordances per row, deliberately. The resort name goes to OUR page; the small mark opens
   the third party's tour in a new tab. A band of 21 outbound links with no way back into the site
   would be a leak, and the resort page is where the tour will be embedded once ownership is
   confirmed (brief §5). */
.mk-maldives-hub .mkm-tour-name {
	font-size: 0.92rem;
	line-height: 1.3;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
}
.mk-maldives-hub .mkm-tour-name:hover { color: #7d5f1f; }
.mk-maldives-hub .mkm-tour-atoll {
	font-size: 0.76rem;
	opacity: 0.6;
	color: #1a1a1a;
}
.mk-maldives-hub .mkm-tour-link {
	margin-top: 4px;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7d5f1f;
	text-decoration: none;
	align-self: flex-start;
	border-bottom: 1px solid rgba(138, 106, 36, 0.4);
	padding-bottom: 1px;
}
.mk-maldives-hub .mkm-tour-link:hover { border-bottom-color: #7d5f1f; }
.mk-maldives-hub .mkm-tour-ext {
	font-style: normal;
	margin-left: 3px;
}
/* VISUALLY HIDDEN, STILL ANNOUNCED. `.screen-reader-text` is a WordPress core convention but core
   only ships it in themes' own stylesheets — it is NOT defined anywhere in this codebase, and this
   build's class-existence check caught that before deploy. Without this rule, "of Dhigufaru Island
   Resort, opens on maldivesvirtualtour.com in a new tab" would have rendered visibly inside all 21
   tour links: another invented-class defect of exactly the kind that produces no error and passes
   every contrast, density and geometry check. Scoped, so it cannot alter any other surface. */
.mk-maldives-hub .screen-reader-text {
	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;
}

/* ------------------------------------------------------ §10 WHY AN AGENT ---------- */
.mk-maldives-hub .mkm-agent-band {
	padding-top: 88px;
	padding-bottom: 88px;
}
.mk-maldives-hub .mkm-agent-lead {
	font-size: 1.12rem;
	line-height: 1.6;
	max-width: 58ch;
	margin: 0 0 24px;
}
.mk-maldives-hub .mkm-agent-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	max-width: 62ch;
}
.mk-maldives-hub .mkm-agent-list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 14px;
	font-size: 1rem;
	line-height: 1.6;
}
.mk-maldives-hub .mkm-agent-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 2px;
	background: #d4a853;
}
.mk-maldives-hub .mkm-agent-close {
	font-size: 1rem;
	line-height: 1.65;
	max-width: 58ch;
	opacity: 0.82;
	margin: 0;
}

/* -------------------------------------------------------- §11 FINAL CTA ----------- */
/* `.mkv-feature-panel` carries the RATIFIED GLASS RECIPE from home-v2.css and is NOT redeclared.
   Only page-specific type sits here. Any temptation to add a darker fill for contrast is the
   regression the GLASS-PANEL LAW names explicitly — the levers are halo, gradient ramp, and the
   band's own local gradient, in that order. */
.mk-maldives-hub .mkm-cta-panel {
	max-width: 620px;
}
/* The shared `.mk-section-eyebrow` is teal, correct on white bands and nearly invisible on a glass
   panel over turquoise water — caught by eye on the rendered band, not by any check. Legibility
   here comes from the type's own colour and halo, never from darkening the panel. */
.mk-maldives-hub .mkm-cta-panel .mk-section-eyebrow {
	color: #ffffff;
	opacity: 0.92;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
/* `.mkv-feature-inner` supplies min-height clamp(420px, 56vw, 620px) from home-v2.css — inherited,
   never re-declared here. Nothing in this file may set a height on the feature band. */
.mk-maldives-hub h2.mkm-cta-title,
.mk-maldives-hub .mkm-cta-title {
	color: #ffffff;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height: 1.12;
	margin: 0 0 16px;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
}
.mk-maldives-hub .mkm-cta-line {
	color: #ffffff;
	font-size: 1.03rem;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 46ch;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.mk-maldives-hub .mkm-cta-note {
	margin: 14px 0 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------- INTENT ROUTE PAGES ----------- */
/* KEPT. These are the real, indexable destinations the Browse-by-Style tabs link to. */
.mk-maldives-intent .mkm-intent-hero {
	padding-top: 60px;
	padding-bottom: 22px;
}
.mk-maldives-intent .mkm-crumb {
	font-size: 0.8rem;
	margin-bottom: 18px;
	opacity: 0.72;
}
.mk-maldives-intent .mkm-crumb a {
	color: inherit;
}
.mk-maldives-intent .mkm-crumb span {
	margin: 0 7px;
}
.mk-maldives-intent .mkm-intent-h1 {
	max-width: 20ch;
}
.mk-maldives-intent .mkm-intent-lead {
	font-size: 1.08rem;
	line-height: 1.6;
	max-width: 56ch;
	margin: 0 0 12px;
}
.mk-maldives-intent .mkm-intent-count {
	font-size: 0.96rem;
	opacity: 0.8;
	max-width: 60ch;
}
.mk-maldives-intent .mkm-intent-results {
	padding-top: 0;
	padding-bottom: 88px;
}
.mk-maldives-intent .mkm-result-list {
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.mk-maldives-intent .mkm-result a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	padding: 20px;
	background: #ffffff;
	border: 1px solid rgba(26, 26, 26, 0.1);
	border-radius: 3px;
	text-decoration: none;
	transition: border-color 0.22s ease, transform 0.22s ease;
}
.mk-maldives-intent .mkm-result a:hover,
.mk-maldives-intent .mkm-result a:focus-visible {
	border-color: #d4a853;
	transform: translateY(-3px);
}
.mk-maldives-intent .mkm-result-eyebrow {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #7d5f1f;
	margin-bottom: 8px;
}
.mk-maldives-intent .mkm-result-name {
	display: block;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.3;
	color: #1a1a1a;
	margin-bottom: 12px;
}
.mk-maldives-intent .mkm-badge {
	border-color: rgba(26, 26, 26, 0.2);
	color: #3a3a3a;
}
.mk-maldives-intent .mkm-badge--visited {
	border-color: rgba(212, 168, 83, 0.9);
	color: #7d5f1f;
}
.mk-maldives-intent .mkm-result-link {
	font-size: 0.82rem;
	color: #1a1a1a;
	opacity: 0.75;
}
.mk-maldives-intent .mkm-intent-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.mk-maldives-intent .mkm-intent-cta .mkm-cta-note {
	color: #1a1a1a;
	text-shadow: none;
	opacity: 0.75;
	margin: 0;
}
.mk-maldives-intent .mkm-intent-back a {
	font-size: 0.88rem;
	color: #1a1a1a;
	opacity: 0.75;
}

/* ------------------------------------------------------------- RESPONSIVE --------- */
@media (max-width: 1100px) {
	.mk-maldives-hub .mkm-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.mk-maldives-hub .mkm-style-resorts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mk-maldives-hub .mkm-tours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mk-maldives-intent .mkm-result-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 860px) {
	/* VERTICAL TAB LABELS DO NOT SURVIVE A NARROW COLUMN. Below 860 the rail becomes a horizontal,
	   scrollable row of numbered chips reading left-to-right, and the panel goes full width. The
	   vertical label is the desktop expression of the pattern, not the pattern itself. */
	.mk-maldives-hub .mkm-style {
		grid-template-columns: 1fr;
	}
	.mk-maldives-hub .mkm-style-tabs {
		flex-direction: row;
		border-right: 0;
		border-bottom: 1px solid rgba(26, 26, 26, 0.16);
		overflow-x: auto;
		gap: 4px;
		margin-bottom: 20px;
		-webkit-overflow-scrolling: touch;
	}
	.mk-maldives-hub .mkm-style-tab {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 8px;
		padding: 10px 14px;
	}
	.mk-maldives-hub .mkm-style-name {
		writing-mode: horizontal-tb;
		transform: none;
	}
	.mk-maldives-hub .mkm-style-panels {
		padding-left: 0;
	}
	.mk-maldives-hub .mkm-style-media {
		aspect-ratio: 16 / 10;
	}
	.mk-maldives-hub .mkm-style-foot {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

@media (max-width: 700px) {
	/* 88vh, matching desktop. At 84vh the hero stopped 135px short of the phone viewport, so the
	   first thing below the fold was the top of §2's copy rather than the photograph — a hero that
	   does not fill the first screen on the device most people will open this on. */
	.mk-maldives-hub .mkm-hero {
		min-height: 88vh;
	}
	.mk-maldives-hub .mkm-hero-inner {
		padding-bottom: 56px;
	}
	/* §2's two photographs share the full width on a phone, so at the inherited 210px floor they
	   read as a thin strip pinned under the copy rather than as the half of the band they are on
	   desktop. 300px is the same proportion of a 390 viewport that 480px is of 1440. */
	.mk-maldives-hub .mkv-split-media img {
		min-height: 300px;
	}
	.mk-maldives-hub .mkm-hero-marks {
		bottom: 24px;
	}
	/* The radial ramp is re-anchored at mobile because the type block is taller and centred lower —
	   still local, still fading to zero inside the frame, still not a full-bleed dim. */
	.mk-maldives-hub .mkm-hero-media::after {
		background: radial-gradient(
			120% 82% at 12% 96%,
			rgba(6, 20, 24, 0.78) 0%,
			rgba(6, 20, 24, 0.52) 36%,
			rgba(6, 20, 24, 0.21) 62%,
			rgba(6, 20, 24, 0) 90%
		);
	}
	.mk-maldives-hub .mkm-cards {
		grid-template-columns: 1fr;
	}
	/* ---- MOBILE PHOTOGRAPHY, and why these three numbers moved ------------------------------
	   Measured, not guessed: at 390 the first build came in at 45.5% mean photography against the
	   >=48% floor, with the two weakest sampled screens (25.9%, 31.1%) both landing inside the
	   one-column §3 card stack and the top of §4.
	   The cause is that a 3:2 crop is 260px tall on a 390px phone — small for an island aerial that
	   is the whole reason the card exists — while the body copy beneath it is a fixed ~370px. So
	   the fix is the one the density work has always called for: give the photograph more of the
	   band, rather than shave the threshold. 4:3 reads as a generous phone crop and still keeps the
	   horizontal sweep a square would cut out of these aerials.
	   Same argument for the other two: a "large photograph open at a time" at 16:10 is 244px on a
	   phone, which is not large; and a 92px tour thumbnail is a favicon at this width. */
	.mk-maldives-hub .mkm-card-media {
		aspect-ratio: 4 / 3;
	}
	.mk-maldives-hub .mkm-style-media {
		aspect-ratio: 4 / 3;
	}
	.mk-maldives-hub .mkm-tour-media {
		flex: 0 0 120px;
	}
	.mk-maldives-hub .mkm-style-resorts {
		grid-template-columns: 1fr;
	}
	/* ONE column below 700px. Two columns cannot hold a 92px thumbnail plus a long resort name
	   ("Veligandu Maldives Resort Island") without forcing a min-content width of ~195px per card,
	   which overflowed the viewport by 34px at 390 and 104px at 320 on the v1 portfolio grid.
	   Measured then, and the same geometry applies to these rows. */
	.mk-maldives-hub .mkm-tours {
		grid-template-columns: 1fr;
	}
	.mk-maldives-intent .mkm-result-list {
		grid-template-columns: 1fr;
	}
	.mk-maldives-hub .mkm-style-band,
	.mk-maldives-hub .mkm-tours-band,
	.mk-maldives-hub .mkm-agent-band {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* THE HERO STOPS ON FRAME 1. Frames 2 and 3 stay in the DOM (and stay downloadable) but never
	   become visible, and the marks freeze with 01 lit — so the band is identical to a static hero
	   rather than a broken one. */
	.mk-maldives-hub .mkm-hero-frame,
	.mk-maldives-hub .mkm-hero-mark {
		animation: none;
	}
	.mk-maldives-hub .mkm-hero-frame--2,
	.mk-maldives-hub .mkm-hero-frame--3 {
		opacity: 0;
	}
	.mk-maldives-hub .mkm-hero-mark--1 {
		opacity: 0.92;
		border-bottom-color: rgba(255, 255, 255, 0.92);
	}
	.mk-maldives-hub .mkm-card,
	.mk-maldives-hub .mkm-card-img,
	.mk-maldives-hub .mkm-style-tab,
	.mk-maldives-intent .mkm-result a {
		transition: none;
	}
	.mk-maldives-hub .mkm-card:hover {
		transform: none;
	}
	.mk-maldives-hub .mkm-card:hover .mkm-card-img {
		transform: none;
	}
}

/* ================================================================================
   §COMPARE — the signed-off AEO comparison table (mkm-compare-band)
   Wired 2026-08-06 (PO: "Ship it"). Markup comes from mykish-aeo-compare.php; the
   wrapper (.mk-compare-wrap) carries its own overflow-x, so the page body never
   scrolls sideways — at 390 the TABLE scrolls inside its container. White band,
   solid surfaces (no photography behind — glass law not in play).
   ================================================================================ */
.mk-maldives-hub .mkm-compare-band {
	padding-top: 40px;
	padding-bottom: 40px;
	background: #fff;
}
.mk-maldives-hub .mk-compare-wrap {
	border: 1px solid rgba(26, 26, 26, 0.12);
	border-radius: 10px;
}
.mk-maldives-hub .mk-compare-table {
	width: 100%;
	min-width: 980px; /* columns keep their shape; the wrap scrolls below this */
	border-collapse: collapse;
	font-size: 0.9rem;
	line-height: 1.45;
	text-align: left;
}
.mk-maldives-hub .mk-compare-note {
	max-width: 78ch;
	margin: 22px 0 18px;
	font-size: 0.9rem;
	line-height: 1.55;
	opacity: 0.82;
}
.mk-maldives-hub .mk-compare-note a {
	color: inherit; /* the teal theme link read as an alien accent inside muted note text */
	text-decoration: none;
	border-bottom: 1px solid rgba(26, 26, 26, 0.3);
}
.mk-maldives-hub .mk-compare-table th,
.mk-maldives-hub .mk-compare-table td {
	padding: 11px 12px;
	border-bottom: 1px solid rgba(26, 26, 26, 0.08);
	vertical-align: top;
}
.mk-maldives-hub .mk-compare-table thead th {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
	border-bottom: 1px solid rgba(26, 26, 26, 0.18);
	vertical-align: bottom;
	/* Header cells WRAP — nowrap here forced the table's natural width past the container
	   at 1440 and clipped the last column mid-word (first G-2 capture, 2026-08-06). */
}
.mk-maldives-hub .mk-compare-table tbody tr:last-child th,
.mk-maldives-hub .mk-compare-table tbody tr:last-child td {
	border-bottom: 0;
}
.mk-maldives-hub .mk-compare-table tbody th[scope="row"] {
	font-weight: 600;
	white-space: nowrap;
}
.mk-maldives-hub .mk-compare-table tbody th[scope="row"] a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(26, 26, 26, 0.25);
}
.mk-maldives-hub .mk-compare-table tbody th[scope="row"] a:hover {
	border-bottom-color: rgba(26, 26, 26, 0.7);
}
.mk-maldives-hub .mk-compare-table abbr {
	text-decoration: none;
	border-bottom: 1px dotted rgba(26, 26, 26, 0.35);
	cursor: help;
}
/* Row backgrounds owned HERE, not left to the theme default — the mobile sticky name
   column below needs `background: inherit` to sit over a KNOWN colour, and a theme update
   changing its zebra would silently break the overlay. */
.mk-maldives-hub .mk-compare-table tbody tr {
	background: #fff;
}
.mk-maldives-hub .mk-compare-table tbody tr:nth-child(even) {
	background: #f7f5f1;
}
@media (min-width: 1024px) {
	.mk-maldives-hub .mkm-compare-band {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}
@media (max-width: 700px) {
	/* Second G-2 capture (390): the caption spans the 980px table and was clipped
	   mid-sentence, and scrolling the facts lost the resort names. Both fixed the
	   standard way: the caption pins to the visible viewport, the name column pins
	   left while the fact columns scroll under it. */
	.mk-maldives-hub .mk-compare-table tbody th[scope="row"] {
		position: sticky;
		left: 0;
		z-index: 1;
		background: inherit;
		white-space: normal;
		min-width: 138px;
		max-width: 168px;
		box-shadow: 1px 0 0 rgba(26, 26, 26, 0.14);
	}
	.mk-maldives-hub .mk-compare-table thead th:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: #fff;
		box-shadow: 1px 0 0 rgba(26, 26, 26, 0.14);
	}
}