/* =====================================================================================
   TOURS HUB — /tours/
   Built 2026-08-02 to the session task brief.
   Standard: page 596 Scandinavia (d91678f), page 595 Maldives v2 (6c78103), page 723 Cruises.

   SCOPING LAW: every rule in this file is scoped to `.mk-tours`. It loads on that slug only and
   cascades AFTER home-v2.css (declared dependency), so it can never reach /home-v2/, the Scandinavia,
   Maldives or Cruises hubs.

   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
   `mkt-` 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.

   GOLD #d4a853 on dark solid grounds ONLY. Never over photography. On the one light ground this file
   paints, the darkened #7d5f1f is used (measured 5.95:1 on white during the Maldives v2 pass).
   ===================================================================================== */

/* ------------------------------------------------------------------- §1 HERO ------- */
/* ROTATING, EXACTLY THREE FRAMES (brief S1), three brands. The CTA sits outside `.mkt-hero-media`
   entirely, so nothing about it moves or re-renders with the frames. BRIGHT-HERO LAW: no full-bleed
   dim — one LOCAL radial anchored bottom-left that reaches zero well inside the frame. */
.mk-tours .mkt-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #0b1418;
}
.mk-tours .mkt-hero-media { position: absolute; inset: 0; z-index: 0; }
.mk-tours .mkt-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* PER-FRAME `object-position`. Desktop crops centred (all three hold at 16:10). Mobile is a 0.46
   viewport cropped on WIDTH, so each landscape master is nudged to keep its subject:
     frame 1 Santorini 2559x1706 — the domes cluster left of centre; 38% keeps them in frame.
     frame 2 Machu Picchu 2559x1706 — the citadel sits centre-left; 44% keeps it off the edge.
     frame 3 Bangkok 2559x1707 — the temple is right, travellers foreground; 60% keeps the temple. */
.mk-tours .mkt-hero-frame--1 { object-position: 50% 50%; }
.mk-tours .mkt-hero-frame--2 { object-position: 50% 50%; }
.mk-tours .mkt-hero-frame--3 { object-position: 50% 46%; }
@media (max-width: 767px) {
	.mk-tours .mkt-hero-frame--1 { object-position: 38% 50%; }
	.mk-tours .mkt-hero-frame--2 { object-position: 44% 50%; }
	.mk-tours .mkt-hero-frame--3 { object-position: 60% 50%; }
}

/* THE ROTATION. One shared keyframe, three negative delays. 21s cycle, 7s per frame, 1s crossfade.
   Frame 1 is opaque at rest and the ONLY frame under reduced motion, so first paint is identical
   whether the animation runs or not: no CLS, no flash of a second photograph, nothing fighting LCP. */
@keyframes mktHeroFrame {
	0%      { opacity: 1; }
	28.57%  { opacity: 1; }
	33.33%  { opacity: 0; }
	95.24%  { opacity: 0; }
	100%    { opacity: 1; }
}
.mk-tours .mkt-hero-frame {
	opacity: 0;
	animation: mktHeroFrame 21s linear infinite;
	will-change: opacity;
}
.mk-tours .mkt-hero-frame--1 { opacity: 1; animation-delay:   0s; }
.mk-tours .mkt-hero-frame--2 { animation-delay: -14s; }
.mk-tours .mkt-hero-frame--3 { animation-delay:  -7s; }
@media (prefers-reduced-motion: reduce) {
	.mk-tours .mkt-hero-frame { animation: none; }
	.mk-tours .mkt-hero-frame--2,
	.mk-tours .mkt-hero-frame--3 { opacity: 0; }
	.mk-tours .mkt-hero-mark { animation: none; }
}

/* The 01/02/03 marks — DECORATIVE, aria-hidden. A rhythm cue, not a control. */
.mk-tours .mkt-hero-marks {
	position: absolute;
	right: var(--mk-pad-x, 24px);
	bottom: 88px;
	z-index: 2;
	display: flex;
	gap: 14px;
	align-items: center;
}
.mk-tours .mkt-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: mktHeroMark 21s linear infinite;
}
@keyframes mktHeroMark {
	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-tours .mkt-hero-mark--1 { animation-delay:   0s; }
.mk-tours .mkt-hero-mark--2 { animation-delay: -14s; }
.mk-tours .mkt-hero-mark--3 { animation-delay:  -7s; }

.mk-tours .mkt-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 is anchored to the
	   bottom EDGE — a corner radial on a 0.46 viewport either misses the copy or grows into a
	   full-bleed dim wearing a gradient's clothes. */
	.mk-tours .mkt-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-tours .mkt-hero-inner {
	position: relative;
	z-index: 2;
	padding-top: 0;
	padding-bottom: 88px;
	max-width: 1440px;
	width: 100%;
}
@media (max-width: 767px) {
	.mk-tours .mkt-hero-inner { padding-bottom: 56px; }
	.mk-tours .mkt-hero-marks { bottom: 20px; }
	.mk-tours .mkt-hero-sub { font-size: 1.0625rem; margin-bottom: 22px; }
}

/* 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, not a nudge. */
.mk-tours .mkt-hero-panel { max-width: 640px; }
@media (max-width: 767px) {
	.mk-tours .mkt-hero-panel { max-width: none; padding: 20px; }
}

.mk-tours .mkt-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-tours h1.mkt-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 (bitten repeatedly across this build; recorded in cruises.css and home-v2.css).
   The title is sized here explicitly and off the shared display ramp: inside a panel that costs ~96px
   of a 390 viewport, the display floor breaks the headline to one word per line. 1.85rem sets it as
   two lines on mobile and two on desktop. */
.mk-page .mk-tours h1.mkt-hero-title,
.mk-tours .mk-page h1.mkt-hero-title,
.mk-tours h1.mkt-hero-title {
	color: #ffffff;
	font-weight: 700;
	font-size: clamp(1.85rem, 4.2vw, 3.5rem);
	line-height: var(--mk-lh-display);
	letter-spacing: var(--mk-track-display);
	max-width: 19ch;
	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-tours .mkt-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-tours .mkt-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 and cruises). */
.mk-tours .mkt-hero-ctas .mk-cta {
	background: #ffffff;
	color: var(--mk-ink) !important;
	border-color: #ffffff;
	font-weight: 700;
}
.mk-tours .mkt-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. */
.mk-tours .mkt-hero-ctas .mkt-cta--ghost {
	background: transparent;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.62);
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0,0,0,0.72);
}
.mk-tours .mkt-hero-ctas .mkt-cta--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
}

/* --------------------------------------------------------- §2 POSITIONING --------- */
/* Prose left at a readable measure, two portraits BESIDE it bleeding right — the ratified
   `.mkv-split`. NEVER BELOW, NEVER AN EMPTY RIGHT HALF (scripts/mkm_classcheck.py is the harness for
   that failure mode and runs before every deploy). */
.mk-tours .mkt-intro-band { background: var(--mk-white); }
.mk-tours .mkt-intro-band .mkv-split-media img { min-height: 460px; }
@media (max-width: 899px) {
	/* 320px, not the inherited 210px. Below 900 the split stacks: copy full width, then the two
	   portraits side by side beneath it. At 210px each is a letterbox out of a 1706x2560 PORTRAIT
	   master — the frame's whole subject cropped to a band. 320px keeps a mild trim, and is the honest
	   lever on the mobile density figure (this band lands in the second sample window). */
	.mk-tours .mkt-intro-band .mkv-split-media img { min-height: 360px; }
}
.mk-tours .mkt-lines {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 16px;
}
.mk-tours .mkt-lines li {
	position: relative;
	padding-left: 20px;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}
.mk-tours .mkt-lines li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 2px;
	background: #7d5f1f;   /* gold, darkened for AA on white — 5.95:1 measured */
}
.mk-tours .mkt-lines li strong { color: var(--mk-ink); }
.mk-tours .mkt-lines-note {
	margin: 0;
	font-size: var(--mk-fs-small);
	line-height: 1.6;
	color: var(--mk-grey);
	max-width: 52ch;
}

/* ------------------------------------------------- §3 THE SEVEN BRANDS — SIGNATURE - */
/* "What the page is judged on" (brief S3). Photo-led tiles on the ink band: TILES, NOT A CATALOGUE.
   SEVEN IS A PRIME, so the grid is composed to never orphan:
     <680px    1 column, tile turns HORIZONTAL (photo left, copy right) — seven stacked 4:3 cards is
               a wall of scrolling for a band meant to read as a set.
     680px+    2 columns; the 7th tile spans both so the last row FILLS.
     1024px+   a 12-col grid: the first four tiles span 3 (a row of four) and the last three span 4
               (a row of three) — a clean 4-over-3 with no trailing gap. The wider bottom-row tiles
               are where AAT's Uluru and Uniworld's river ship want the room. */
.mk-tours .mkt-brands-band { padding-block: clamp(56px, 6vw, 88px); }
.mk-tours .mkt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media (min-width: 680px) {
	.mk-tours .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.mk-tours .mkt-tile:nth-child(7) { grid-column: span 2; }
}
@media (min-width: 1024px) {
	.mk-tours .mkt-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
	.mk-tours .mkt-tile:nth-child(-n+4) { grid-column: span 3; }
	.mk-tours .mkt-tile:nth-child(n+5)  { grid-column: span 4; }
}

.mk-tours .mkt-tile {
	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-tours .mkt-tile:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.40);
	background: rgba(255, 255, 255, 0.10);
}
.mk-tours .mkt-tile:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 3px; }

/* Below 680 the tile is a horizontal row; `align-items: stretch` makes the media column full height
   so the photograph fills its cell rather than floating in it. */
@media (max-width: 679px) {
	.mk-tours .mkt-tile {
		display: grid;
		grid-template-columns: 44% minmax(0, 1fr);
		align-items: stretch;
	}
}

.mk-tours .mkt-tile-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #10171b;
	aspect-ratio: 4 / 3;
}
@media (max-width: 679px) {
	/* 168px, not 128. The horizontal mobile card is where S3's photography lives on a phone, and S3
	   is the tallest band on the mobile page — so this min-height is the honest lever on the mobile
	   photography mean. 168 gives each 44%-wide frame room to read (Uluru, the river ship, the Venice
	   canal all need it) rather than a letterbox, and lifts the whole band's photo share. */
	.mk-tours .mkt-tile-media { aspect-ratio: auto; height: 100%; min-height: 168px; }
}
.mk-tours .mkt-tile-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms var(--mk-ease-out);
}
.mk-tours .mkt-tile:hover .mkt-tile-img { transform: scale(1.04); }

/* THE TYPOGRAPHIC TILE — the media socket with no <img> inside. Not used at launch (all seven
   brands carry a real frame), kept so a future brand with no assets drops in with no markup change,
   composed rather than blank so it never reads as a failed image load. */
.mk-tours .mkt-tile--type .mkt-tile-media {
	display: grid;
	place-items: center;
	padding: 18px;
	background-color: #0d1519;
	background-image:
		radial-gradient(120% 92% at 76% 6%, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(152deg, #17202400 0%, #0c1215 52%, #090e11 100%);
}
.mk-tours .mkt-tile-mark {
	display: block;
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.56);   /* ~5.9:1 on #0d1519 — quiet bought with size/tracking, not contrast */
}
.mk-tours .mkt-tile-mark::before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	margin: 0 auto 12px;
	background: var(--mk-gold);
	opacity: 0.72;
}

.mk-tours .mkt-tile-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 16px 18px;
}
.mk-tours .mkt-tile-group {
	display: block;
	margin-bottom: 7px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: var(--mk-gold);
}
.mk-tours h3.mkt-tile-name,
.mk-page .mk-tours h3.mkt-tile-name {
	margin: 0 0 7px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--mk-track-tight);
	color: #ffffff;
}
.mk-tours .mkt-tile-line {
	margin: 0 0 14px;
	font-size: 0.83rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.80);
}
.mk-tours .mkt-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-gold);
}
.mk-tours .mkt-tile:hover .mkt-tile-link { text-decoration: underline; }

.mk-tours .mkt-brands-intro {
	margin: 0 0 var(--mk-space-lg);
	max-width: 62ch;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: rgba(255, 255, 255, 0.80);
}

/* ------------------------------------------------------- §4 / §9 FEATURE BANDS ---- */
/* Both use the ratified `.mkv-band--feature` + `.mkv-feature-panel` glass recipe from home-v2.css,
   inherited rather than re-declared. §4 puts the panel RIGHT (`.mkv-band--right`) over the cool
   autumn Rhine; §9 puts it LEFT over the warm dusk Tiber, so two feature bands read as variation. */
.mk-tours .mkt-why-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.mk-tours .mkt-why-list li {
	position: relative;
	padding-left: 20px;
	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-tours .mkt-why-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 2px;
	background: rgba(255, 255, 255, 0.85);   /* NOT gold — this sits over photography */
}
.mk-tours .mkt-why-list li strong { font-weight: 700; }

.mk-page .mk-tours h2.mkt-cta-title,
.mk-tours h2.mkt-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-tours .mkt-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-tours .mkt-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-tours .mkv-feature-panel .mk-cta {
	background: #ffffff;
	color: var(--mk-ink) !important;
	border-color: #ffffff;
	font-weight: 700;
}
.mk-tours .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-tours .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);
}

/* ------------------------------------------------- §8 WHY AN AGENT (text band) ---- */
.mk-tours .mkt-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-tours .mkt-agent-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 18px;
	max-width: var(--mk-measure);
}
.mk-tours .mkt-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-tours .mkt-agent-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 10px;
	height: 2px;
	background: #7d5f1f;
}
.mk-tours .mkt-agent-list li strong { color: var(--mk-ink); }
.mk-tours .mkt-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);
}