/*!
 * Angkor Asia Adventures — Polish Layer (responsive hardening + animation art)
 * Loaded after style.css / journey-map.css. Purely additive: every rule here
 * either prevents a layout/stacking failure across devices or adds a clean,
 * reduced-motion-safe brand animation. Nothing here changes the information
 * architecture — remove this file and the theme still works exactly as before.
 * ========================================================================= */

/* =========================================================================
   1. Layout crash-proofing — kill horizontal scroll, flex/grid blow-outs and
      overflowing media on every device. These are the usual causes of the
      "layer/layout breaks on mobile" class of bug.
   ========================================================================= */

/* Flex & grid children default to min-width:auto, so one long word or a wide
   image can force a track wider than the screen. Resetting to 0 lets tracks
   shrink and is the single highest-impact overflow fix. */
*, *::before, *::after { min-width: 0; }

/* No element may push the page wider than the viewport. `clip` (not `hidden`)
   keeps position:sticky working. */
html, body { overflow-x: clip; max-width: 100%; }

/* Media never overflows its container. */
img, video, iframe, embed, object, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }
/* …but don't let height:auto squash fixed-size UI icons. */
.icon, svg.icon, .wa-float svg, .header-cart svg, [class*="__icon"] svg { height: auto; }

/* Long unbroken strings (URLs, hashtags) wrap instead of blowing out a card. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, .eyebrow, .btn { overflow-wrap: anywhere; }

/* Wide content (tables, code, pasted blocks) scrolls inside itself. */
.entry-content :where(table, pre) { display: block; max-width: 100%; overflow-x: auto; }
table { max-width: 100%; }

/* Any grid can shrink its tracks rather than overflow. */
[class*="grid"] { min-width: 0; }

/* Fluid embeds keep aspect ratio without JS. */
.entry-content :where(iframe, embed, object) { aspect-ratio: 16 / 9; width: 100%; height: auto; }

/* Comfortable touch targets on coarse pointers (accessibility + no mis-taps). */
@media (pointer: coarse) {
	.btn, .primary-nav a, .header-cart, .nav-toggle, .chip, .cat-chip { min-height: 44px; }
}

/* =========================================================================
   2. Clean z-index scale — one documented ladder so overlays never collide.
      Fixes the two real collisions in the base sheet:
        • header (60) vs dropdown submenu (60)
        • mobile booking bar (70) vs WhatsApp float (80) overlapping bottom-right
   ========================================================================= */
:root {
	--z-sticky-rail: 40;   /* category chip rail */
	--z-header:      60;   /* sticky site header */
	--z-dropdown:    65;   /* header submenus — must sit above the header */
	--z-mbook:       70;   /* mobile fixed booking bar */
	--z-wa:          80;   /* WhatsApp float */
	--z-drawer:      90;   /* mobile nav drawer */
	--z-skip:      1000;   /* skip link, always on top */
}
.site-header            { z-index: var(--z-header); }
.primary-nav .sub-menu  { z-index: var(--z-dropdown); }
.cat-rail-wrap          { z-index: var(--z-sticky-rail); }
.mbook                  { z-index: var(--z-mbook); }
.wa-float               { z-index: var(--z-wa); }
.skip-link              { z-index: var(--z-skip); }
.site-header.nav-open .primary-nav { z-index: var(--z-drawer); }

/* Stop the WhatsApp float from sitting on top of the mobile booking bar. When
   the fixed booking bar is present on phones, lift the float clear of it. */
@media (max-width: 860px) {
	body.single-tour .wa-float,
	body.single-activity .wa-float,
	body.single-signature_tour .wa-float { bottom: calc(20px + 68px); }
}

/* =========================================================================
   3. Animation art — clean, brand-specific, and only when motion is welcome.
      Every keyframe lives inside prefers-reduced-motion: no-preference so it
      never plays for users who opt out, and nothing here is required for the
      content to be legible.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

	/* 3a. Eyebrow dash "draws" in, with a slow travelling gold sheen — the
	   signature little accent above every section heading. */
	.eyebrow::before {
		transform-origin: left center;
		animation: aaa-dash-draw .7s cubic-bezier(.2,.8,.2,1) both;
	}
	@keyframes aaa-dash-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

	/* 3b. Gold buttons get a single diagonal light sweep on hover — premium,
	   subtle, GPU-friendly (transform only). */
	.btn--gold, .btn--forest, .btn--light { position: relative; overflow: hidden; isolation: isolate; }
	.btn--gold::after, .btn--forest::after, .btn--light::after {
		content: ""; position: absolute; inset: 0; z-index: -1;
		background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
		transform: translateX(-120%); transition: transform .6s ease;
	}
	.btn--gold:hover::after, .btn--forest:hover::after, .btn--light:hover::after { transform: translateX(120%); }

	/* 3c. Section h2 grows a gold underline as it enters (paired with the
	   theme's existing .reveal). Uses a pseudo-element so headings are
	   untouched structurally. */
	.section h2 { position: relative; }
	.section h2::after {
		content: ""; position: absolute; left: 0; bottom: -.28em; height: 3px; width: 0;
		background: linear-gradient(90deg, var(--gold), var(--gold-deep));
		border-radius: 3px; transition: width .8s cubic-bezier(.2,.8,.2,1);
	}
	.section .reveal.is-visible h2::after,
	.section h2.reveal.is-visible::after,
	.reveal.is-visible .section h2::after { width: clamp(48px, 12%, 120px); }
	/* Fallback: if this heading isn't inside a reveal wrapper, draw on hover. */
	.section h2:hover::after { width: clamp(48px, 12%, 120px); }

	/* 3d. Cards & tiles lift gently and their image eases in on hover. */
	.dest-tile, .tour-card, .card, .pillar, .plan-step {
		transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
	}
	.dest-tile:hover, .tour-card:hover, .card:hover, .pillar:hover {
		transform: translateY(-6px); box-shadow: var(--shadow);
	}

	/* 3e. The search card gets a soft, slow gold aura — an "art" focal point
	   without motion sickness (opacity pulse, no movement). */
	.searchbar {
		position: relative;
		animation: aaa-aura 6s ease-in-out infinite;
	}
	@keyframes aaa-aura {
		0%, 100% { box-shadow: var(--shadow); }
		50%      { box-shadow: 0 18px 50px -20px rgba(238,174,5,.45), var(--shadow); }
	}

	/* 3f. A thin animated gold seam along the top of deep-brown panels — a
	   unique, quiet brand flourish that reads as temple gilding. */
	.section--forest { position: relative; }
	.section--forest::before {
		content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
		background: linear-gradient(90deg, transparent, var(--gold) 20%, #fff2c0 50%, var(--gold) 80%, transparent);
		background-size: 200% 100%;
		animation: aaa-seam 8s linear infinite;
		opacity: .8;
	}
	@keyframes aaa-seam { from { background-position: 200% 0; } to { background-position: -200% 0; } }

	/* 3g. In-content links get an underline that draws left-to-right on hover. */
	.entry-content a:not(.btn) {
		background-image: linear-gradient(var(--gold), var(--gold));
		background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
		transition: background-size .3s ease; text-decoration: none;
		padding-bottom: 1px;
	}
	.entry-content a:not(.btn):hover,
	.entry-content a:not(.btn):focus-visible { background-size: 100% 2px; }
}

/* =========================================================================
   4. Focus polish — a consistent, visible gold focus ring (accessibility),
      shown regardless of motion preference.
   ========================================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 3px;
}

/* =========================================================================
   5. Journey-map intro — highlighted frame around the merged paragraph.
      Gives the (now heading-less) intro real presence: a taller, gold-
      accented callout built on the brand tokens, responsive and overflow-safe.
   ========================================================================= */
.journey-intro-frame {
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: 40px;
	padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px);
	background: linear-gradient(140deg, var(--paper-2), var(--card) 70%);
	border: 1px solid var(--line);
	border-left: 5px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.journey-intro-frame .lead {
	margin: 0;
	max-width: none;
	font-size: clamp(1.06rem, 1.5vw, 1.3rem);
	line-height: 1.75;
	color: var(--ink);
}
/* A quiet gilded top seam echoes the brand's temple-gold accent. */
@media (prefers-reduced-motion: no-preference) {
	.journey-intro-frame { position: relative; overflow: hidden; }
	.journey-intro-frame::before {
		content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
		background: linear-gradient(90deg, transparent, var(--gold) 20%, #fff2c0 50%, var(--gold) 80%, transparent);
		background-size: 200% 100%; animation: aaa-seam 8s linear infinite; opacity: .85;
	}
}
@media (max-width: 560px) {
	.journey-intro-frame { border-left-width: 4px; }
}

/* =========================================================================
   6. Responsive fixes for hard-coded 3-column grids that shipped without
      breakpoints — the "Choose your journey" pillars (History / Culture /
      Adventure) and the seven "Special Highlight Tours". Both stayed 3-across
      on every screen and overflowed on tablet/phone. `:not(--4/--stacked)`
      keeps the separate four-pillar grid (which has its own breakpoints)
      untouched. minmax(0,1fr) lets tracks shrink instead of blowing out.
   ========================================================================= */
.pillar-grid:not(.pillar-grid--4):not(.pillar-grid--stacked) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
	.pillar-grid:not(.pillar-grid--4):not(.pillar-grid--stacked) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.pillar-grid:not(.pillar-grid--4):not(.pillar-grid--stacked) { grid-template-columns: 1fr; }
}

.htours__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .htours__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .htours__grid { grid-template-columns: 1fr; } }

/* The highlight-tours frame and its cards must never exceed the viewport. */
.htours__frame { max-width: 100%; }
.htours__card, .pillar-card { min-width: 0; }
.htours__card * , .pillar-card * { max-width: 100%; }

/* "More ways to browse" chips: wrap on desktop, scroll cleanly on small
   screens — never a cramped fixed row. */
.exp-rail, .browse-rail, .exp-tiles {
	display: flex; flex-wrap: wrap; gap: 10px;
}
@media (max-width: 560px) {
	.exp-rail, .browse-rail, .exp-tiles {
		flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.exp-rail::-webkit-scrollbar, .browse-rail::-webkit-scrollbar, .exp-tiles::-webkit-scrollbar { display: none; }
}