/**
 * Angkor Asia Adventures — journey map (Signature Hook, merged feature).
 *
 * 4.0.0 — carved-stone redesign. Same markup, same tabs/panels/rail/trust/
 * cta structure as 3.9.x (see history below, preserved for context) — this
 * pass is visual only. The old look was a generic "gold pill on cream
 * card" treatment with no real point of view. The new signature is a
 * bas-relief stone tablet: the map stage reads as an inscribed panel with
 * carved corner motifs and a recessed groove border (double-line, one
 * raised hairline + one inset shadow, the way temple stone is lit from
 * one side); the stop rail becomes eight numbered inscription tablets
 * with a lotus-medallion index instead of a plain number; the trust strip
 * uses round bas-relief medallions instead of squared icon tiles; the CTA
 * band gets a pediment top edge (a repeating triangular frieze, the same
 * silhouette as a temple gable) instead of a flat rounded rule. Tabs move
 * from a pill segmented-control (a UI-kit default) to two stone plaques
 * divided by a carved diamond, the way twin inscriptions sit side by side
 * on a lintel.
 *
 * No new classes were introduced beyond what the ::before/::after motifs
 * need — every selector below still targets the existing
 * `.journey-map__*` / `.adv-map__*` hooks from prefect-signature-trail.php,
 * so this file is a drop-in replacement; the PHP and JS are untouched.
 *
 * ---- prior history (unchanged content, retained for context) ----------
 * 3.3.0 — structural rebuild: stage / rail / trust / cta as four stacked
 * full-width bands instead of a fixed-width map + sidebar "showcase" grid.
 * 3.5.0 — merge: prefect-tours-journey.php + prefect-cambodia-trail.php
 * became one section with a `.journey-map__tabs` control switching two
 * `.journey-map__panel`s. 3.7.0 briefly folded Special Highlight Tours in
 * here; 3.8.0 moved it back out. "Choose your journey" (the four IA
 * pillars) is now `<aside class="journey-map__pillars">`, the second
 * column of `.journey-map__layout`, next to `.journey-map__main`.
 *
 * @package AngkorAsiaAdventures
 */

.journey-map { background: var(--paper); }

/* Frame width — extending pass: previously capped at 1160px, narrower
   than every other section on the page (hero, header, homepage bands all
   use `.wrap-wide` at 1360px — see front-page.php/header.php). That
   1160px cap dated back to when `.journey-map__layout` was a two-column
   grid (trail + a 300px sticky pillar sidebar); now that the pillars sit
   full-width below the trail instead, there's no narrower column to
   protect and the frame can use the same 1360px width as everything
   else around it. This also gives the animated map stage more room to
   grow on large screens — see the fluid `max-height` on
   `.journey-map__stage` below, which scales with it. No separate media
   query needed here: `.wrap-wide` (style.css) already goes 100%-minus-
   padding below 1360px, so this stays responsive for free. */
.journey-map__frame { max-width: 1360px; margin-inline: auto; }

/* ---- Layout — one column: tabbed trail, then pillars stacked below it.
   Previously a two-column grid (trail + 300px sticky pillar sidebar);
   merged back to a single column so the pillars render as a full-width
   band under the rail/trust/CTA instead of beside them.

   Responsive-space pass: the frame's internal vertical rhythm (this gap,
   plus tabs/rail/trust/cta/pillars margins below) now scales on a fluid
   clamp() curve instead of jumping between a handful of fixed pixel
   values at hard breakpoints — the same fluid-spacing approach `.section`
   already uses in style.css (`clamp(48px, 8vw, 96px)`), applied at the
   frame's own, tighter scale. Fewer discrete `@media` spacing overrides
   below as a result; the ones that remain are structural (column counts,
   flex-direction), not spacing. ---------------------------------------- */
.journey-map__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(22px, 4vw, 34px);
}

/* Signature-panel frame — the closing tablet of the same carved bas-relief
   sequence the map stage opens with. Same recipe as `.journey-map__stage`:
   a groove border (raised hairline outside, two nested insets reading as
   temple stone lit from one side) plus carved corner lotus marks, so
   "stage → pillars" reads as one inscribed tablet rather than a stage
   followed by a separately-headed section. The visible eyebrow/heading/
   lead this block used to open with is gone; `#journey-pillars-heading`
   is screen-reader-only (see prefect-signature-trail.php), so all the
   spacing below is driven by the panel's own padding, not a text block. */
.journey-map__pillars {
	position: relative;
	margin-top: clamp(2px, .5vw, 6px);
	padding: clamp(28px, 5vw, 40px) clamp(18px, 4vw, 30px) clamp(20px, 4vw, 32px);
	border-radius: 6px;
	background: var(--paper-2);
	box-shadow:
		0 0 0 1px var(--line),
		inset 0 0 0 6px var(--paper),
		inset 0 0 0 7px var(--gold-deep),
		0 20px 44px -28px rgba(24, 11, 2, .35);
}
.journey-map__pillars::before {
	content: "";
	position: absolute; inset: clamp(10px, 2vw, 14px);
	pointer-events: none;
	background-image:
		radial-gradient(circle, var(--gold-deep) 0 2px, transparent 2.4px),
		radial-gradient(circle, var(--gold-deep) 0 2px, transparent 2.4px),
		radial-gradient(circle, var(--gold-deep) 0 2px, transparent 2.4px),
		radial-gradient(circle, var(--gold-deep) 0 2px, transparent 2.4px);
	background-repeat: no-repeat;
	background-size: 14px 14px;
	background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0;
	opacity: .55;
}

/* ---- "Book the trail" / Special Highlight Tours — merged in one level
   deeper than the pillar cards above (see the doc comment near the top
   of prefect-signature-trail.php for the full merge history). A hairline
   divider marks it as the next layer rather than a new section — the
   same "layer, not section" treatment `.journey-map__pillars` itself
   already got relative to the stage above it. Card styling
   (`.htours__*`) is untouched from the old standalone section; only
   this wrapper and its top divider/spacing are new. -------------------- */
.journey-map__pillars-highlights {
	margin-top: clamp(28px, 5vw, 40px);
	padding-top: clamp(22px, 4vw, 30px);
	border-top: 1px solid var(--line);
}

/* ---- "More ways to browse" — merged in from the old standalone
   Browse-by-experience section; a compact strip of the six non-pillar
   experience terms, sitting directly under the pillar cards (and now,
   the merged highlight tours above them). Reuses `.exp-rail` /
   `.exp-tile` from style.css at a smaller scale rather than introducing
   a second tile component. ---------------------------------------------- */
.journey-map__pillars-more { margin-top: clamp(16px, 3vw, 22px); }
.journey-map__pillars-more-label {
	display: block;
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 10px;
}
/* One row, always — arranged flat instead of the previous 2-column
   grid (3 rows of 2). Fixed 6-across grid down to tablet width; below
   that a single scrollable row (same horizontal-rail treatment
   `.exp-rail` itself already uses at 680px in style.css) rather than
   squeezing six columns down to an unreadable width on a phone. */
.exp-rail--mini {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}
.exp-tile--mini { padding: 10px 6px; gap: 6px; border-radius: var(--radius-sm); }
.exp-tile--mini .exp-tile__chip { width: 34px; height: 34px; border-radius: 10px; }
.exp-tile--mini .exp-tile__chip .ts-icon { width: 18px; height: 18px; }
.exp-tile--mini .exp-tile__label { font-size: .72rem; }

@media (max-width: 560px) {
	.exp-rail--mini {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: minmax(84px, 84px);
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.exp-rail--mini::-webkit-scrollbar { display: none; }
	.exp-tile--mini { scroll-snap-align: start; }
}

.journey-map__main { min-width: 0; }

/* ---- 0. Tabs — two stone plaques, divided by a carved diamond --------- */

.journey-map__tabs {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0 auto clamp(18px, 3vw, 26px);
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--card);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(24,11,2,.04);
	position: relative;
}
.journey-map__tab {
	flex: 1 1 auto;
	white-space: nowrap;
	padding: 14px 22px 12px;
	font-family: var(--font-display);
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: transparent;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	transition: color .18s ease, background .18s ease;
}
/* carved divider between the two plaques */
.journey-map__tab + .journey-map__tab::before {
	content: "";
	position: absolute;
	left: 0; top: 20%;
	width: 1px; height: 60%;
	background: var(--line);
}
.journey-map__tab + .journey-map__tab::after {
	content: "◆";
	position: absolute;
	left: -5px; top: 50%;
	transform: translate(-50%, -50%) scale(.42);
	color: var(--gold-deep);
	font-size: 12px;
	line-height: 1;
}
.journey-map__tab:hover { color: var(--ink); background: var(--paper-2); }
.journey-map__tab.is-active {
	color: var(--forest);
	background: var(--paper-2);
	box-shadow: inset 0 2px 5px -2px rgba(24,11,2,.28), inset 0 -1px 0 rgba(255,255,255,.5);
}
.journey-map__tab.is-active::after,
.journey-map__tab.is-active + .journey-map__tab::before { opacity: .5; }
/* gold underline strike, only on the active plaque */
.journey-map__tab.is-active {
	background-image: linear-gradient(var(--gold), var(--gold));
	background-repeat: no-repeat;
	background-size: 28px 2px;
	background-position: center 38px;
}
.journey-map__tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

@media (max-width: 480px) {
	.journey-map__tabs { width: 100%; }
	.journey-map__tab { padding: 12px 10px 10px; font-size: .74rem; letter-spacing: .03em; }
}

/* ---- Panel — one full trail (stage + rail + trust + cta) --------------- */

.journey-map__panel[hidden] { display: none; }

/* ---- 1. Map stage — inscribed stone tablet, carved corner motifs ------ */

.journey-map__stage {
	position: relative;
	overflow: hidden;
	/* Explicit width — visual-QA fix. Without this, a block box with only
	   `aspect-ratio` + `max-height` set (no `width`) doesn't reliably fill
	   its container: once `max-height` clamps the height that `aspect-ratio`
	   would otherwise derive from 100% width, the browser resolves the
	   *width* from that clamped height instead of from the container —
	   shrinking the whole stage to a small square stuck at the left edge
	   of `.journey-map__frame` on any viewport tall enough for max-height
	   to bind (confirmed at 1440px; 375px was unaffected since max-height
	   doesn't bind at mobile heights). `width: 100%` pins the box to the
	   frame width first, so `aspect-ratio` only ever derives height from
	   it — `overflow: hidden` above plus `.journey-scene`'s existing
	   `object-fit: cover` handle the resulting crop when max-height caps
	   that derived height. */
	width: 100%;
	background:
		radial-gradient(circle at 28% 14%, rgba(238,174,5,.16), transparent 55%),
		var(--paper-2);
	aspect-ratio: 660 / 720;
	max-height: clamp(440px, 74vh, 820px);
	border-radius: 6px;
	/* Groove border: a raised hairline outside, a recessed shadow inside —
	   reads as carved stone rather than a flat card ring. */
	box-shadow:
		0 0 0 1px var(--line),
		inset 0 0 0 6px var(--paper),
		inset 0 0 0 7px var(--gold-deep),
		0 26px 54px -28px rgba(24,11,2,.45);
	padding: 6px;
	background-clip: padding-box;
	contain: layout paint;
}
.journey-map__stage::after {
	content: "";
	position: absolute; inset: 6px; border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(238,174,5,.45);
	pointer-events: none;
}
/* Carved lotus corner marks — one per corner, sitting just inside the
   groove border. Pure CSS, no image asset. */
.journey-map__stage::before {
	content: "";
	position: absolute; inset: 10px;
	pointer-events: none;
	background-image:
		radial-gradient(circle, var(--gold-deep) 0 2px, transparent 2.4px),
		radial-gradient(circle, var(--gold-deep) 0 2px, transparent 2.4px),
		radial-gradient(circle, var(--gold-deep) 0 2px, transparent 2.4px),
		radial-gradient(circle, var(--gold-deep) 0 2px, transparent 2.4px);
	background-repeat: no-repeat;
	background-size: 14px 14px;
	background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0;
	opacity: .55;
	z-index: 1;
}

.journey-scene {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: geometricPrecision;
	object-fit: cover;
	object-position: 50% 18%;
}

.journey-scene path,
.journey-scene rect,
.journey-scene circle,
.journey-scene line {
	vector-effect: non-scaling-stroke;
}

.journey-scene__wordmark { pointer-events: none; }
.journey-scene__wordmark-title {
	font-family: var(--font-display);
	font-size: 30px;
	letter-spacing: .16em;
	text-transform: uppercase;
	fill: var(--gold);
	text-anchor: middle;
}
.journey-scene__wordmark-tag {
	font-family: var(--font-body);
	font-size: 14px;
	fill: var(--ink-soft);
	text-anchor: middle;
}

.journey-map__caption {
	position: absolute;
	left: 14px; top: 14px;
	padding: 8px 16px;
	background: rgba(24,11,2,.8);
	border-radius: 3px;
	border-left: 2px solid var(--gold);
	pointer-events: none;
	z-index: 2;
}
.journey-map__caption-text {
	display: block;
	color: var(--white);
	font-family: var(--font-display);
	font-size: .82rem;
	letter-spacing: .02em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: .5s;
}
.journey-map__stage.is-inview .journey-map__caption-text {
	opacity: 1;
	transform: none;
}

/* ---- 2. Stop rail — eight inscription tablets, medallion index -------- */

.journey-map__rail {
	list-style: none;
	counter-reset: none;
	margin: clamp(20px, 3vw, 30px) 0 0;
	padding: 4px 4px 10px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(150px, 1fr);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}
.journey-map__rail-item {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 16px 14px;
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold-deep);
	border-radius: 3px;
	box-shadow: var(--shadow-sm);
	position: relative;
}
.journey-map__rail-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--paper-2);
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 600;
	color: var(--gold-deep);
}
.journey-map__rail-name {
	font-weight: 600;
	font-size: .95rem;
	color: var(--ink);
	line-height: 1.25;
}
.journey-map__rail-country {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .76rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.journey-map__rail-country .adv-map__swatch { width: 8px; height: 8px; border-radius: 50%; }

@media (min-width: 860px) {
	.journey-map__rail { grid-auto-flow: row; grid-template-columns: repeat(8, 1fr); overflow-x: visible; }
}

/* ---- 3. Trust strip — round bas-relief medallions ---------------------- */

.journey-map__trust {
	list-style: none;
	margin: clamp(18px, 3vw, 26px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.journey-map__trust-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px 16px;
	text-align: left;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 3px;
}
.journey-map__trust-icon {
	flex: none; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center;
	background: radial-gradient(circle at 34% 30%, var(--paper-2), var(--paper) 72%);
	box-shadow: inset 0 0 0 1px var(--line), inset 0 -2px 3px rgba(24,11,2,.12), inset 0 2px 2px rgba(255,255,255,.7);
	color: var(--gold-deep);
}
.journey-map__trust-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.journey-map__trust-copy { display: flex; flex-direction: column; gap: 2px; }
.journey-map__trust-item strong { font-family: var(--font-display); font-size: .92rem; color: var(--ink); }
.journey-map__trust-item span span { font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }

@media (max-width: 860px) {
	.journey-map__trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.journey-map__trust { grid-template-columns: 1fr; }
}

/* ---- 4. CTA band — pediment top edge (triangular frieze) -------------- */

.journey-map__cta {
	margin: clamp(18px, 3vw, 26px) 0 0;
	padding: clamp(24px, 4vw, 32px) clamp(18px, 4vw, 28px) clamp(18px, 3vw, 26px);
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--forest);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	position: relative;
}
/* Triangular frieze — the pediment silhouette, repeated across the top
   edge in the gold accent. */
.journey-map__cta::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: -9px;
	height: 9px;
	background-image: linear-gradient(135deg, var(--gold) 25%, transparent 25.5%),
	                   linear-gradient(-135deg, var(--gold) 25%, transparent 25.5%);
	background-size: 18px 9px;
	background-repeat: repeat-x;
	opacity: .9;
}
.journey-map__cta-text {
	margin: 0;
	max-width: 52ch;
	font-size: .86rem;
	font-style: italic;
	color: color-mix(in srgb, var(--paper) 78%, transparent);
}
@supports not (color: color-mix(in srgb, red 10%, white)) {
	.journey-map__cta-text { color: var(--paper-2); }
}
.journey-map__cta-button {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: .95rem;
	color: #241a06;
	background: var(--gold);
	padding: 13px 24px;
	border-radius: 3px;
	transition: background .18s ease, transform .15s ease;
}
.journey-map__cta-button:hover { background: var(--gold-deep); color: #fff; transform: translateY(-1px); }
.journey-map__cta-button::after { content: "→"; }

@media (max-width: 640px) {
	.journey-map__stage { aspect-ratio: 660 / 780; max-height: clamp(360px, 68vh, 620px); }
	.journey-scene__wordmark-title { font-size: 22px; }
	.journey-scene__wordmark-tag { font-size: 11px; }
	.journey-map__cta { flex-direction: column; align-items: stretch; text-align: center; }
	.journey-map__cta-text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.journey-map__caption-text { transition: none; opacity: 1; transform: none; }
}
