/* bacalarallinone.tours — design tokens + base */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Caveat+Brush&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* Tropical (default) */
  --bone: #f5f0e6;
  --bone-2: #ece5d5;
  --ink: #0c2a2e;
  --ink-2: #1a4348;
  --ink-soft: #4a6a6e;
  --lagoon: #2fb8c9;          /* bacalar turquoise */
  --lagoon-deep: #1a6d7a;
  --lagoon-pale: #b8e8ee;
  --lagoon-darkest: #1d3a5c;  /* navy from the logo's "bacalar" script */
  --lagoon-mid: #4cc8d4;      /* between pale and turquoise */
  --jungle: #1f4a2e;
  --jungle-2: #2d6b41;
  --sun: #e89a3c;             /* sunset amber */
  --sun-2: #d4722a;
  --sun-pale: #f7d28b;        /* lighter amber for gradients/fills */
  --clay: #b35a3c;
  --line: rgba(12, 42, 46, 0.14);
  --line-strong: rgba(12, 42, 46, 0.28);
  --shadow: 0 1px 2px rgba(12,42,46,0.06), 0 8px 24px rgba(12,42,46,0.08);
  --radius: 14px;
  --radius-lg: 22px;
}

[data-theme="earthy"] {
  --bone: #f4ede0;
  --bone-2: #e8ddc8;
  --ink: #2a1810;
  --ink-2: #4a2d1f;
  --ink-soft: #6b4a3a;
  --lagoon: #8b6a3a;
  --lagoon-deep: #5a3f22;
  --lagoon-pale: #d9c8a8;
  --jungle: #3a3320;
  --jungle-2: #5a5035;
  --sun: #c4651e;
  --sun-2: #a04f18;
  --clay: #8b3a2a;
  --line: rgba(42,24,16,0.14);
}

[data-theme="dark"] {
  --bone: #0a1a1e;
  --bone-2: #0f2428;
  --ink: #f0ebe0;
  --ink-2: #d4cdb8;
  --ink-soft: #9ab0b4;
  --lagoon: #3fd4e8;
  --lagoon-deep: #1a8fa0;
  --lagoon-pale: #14444c;
  --jungle: #4fb86a;
  --jungle-2: #6bd488;
  --sun: #f4b84c;
  --sun-2: #e89a3c;
  --clay: #e88a5a;
  --line: rgba(240,235,224,0.14);
  --line-strong: rgba(240,235,224,0.28);
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  overflow-x: hidden;    /* prevents any stray inline width from producing page-level horizontal scroll */
}
img { max-width: 100%; height: auto; }

/* subtle paper grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.16  0 0 0 0 0.18  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.15; }

.display {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.editorial {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}
/* Brush-script accent — echoes the "bacalar" wordmark in the logo.
   Only for short pull-quotes / decorative callouts, never body or
   primary headings. The logo carries this energy already; we want
   matching bursts of it scattered, not a flood. */
.script {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1;
}

/* Google Places Autocomplete dropdown — bump z-index above sticky
   header (50) and any modal scaffolding so suggestions never get
   clipped by parent overflow:hidden / lower stacks. */
.pac-container {
  z-index: 99999;
  font-family: 'Inter', -apple-system, sans-serif;
  border-radius: 10px;
  margin-top: 4px;
  box-shadow: 0 12px 32px rgba(12, 42, 46, 0.18);
}

/* Top-nav links — sized for legibility, with a soft hover that
   lifts the icon and shifts the label color toward ink. The
   underline stays reserved for the current page indicator. */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  text-decoration: none;
  padding: 8px 4px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color 160ms ease, transform 160ms ease;
}
.nav-link.is-current { color: var(--ink); }
.nav-link svg {
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), color 160ms ease;
  color: var(--lagoon-deep);
}
.nav-link.is-current svg { color: var(--ink); }
.nav-link:hover { color: var(--ink); }
.nav-link:hover svg {
  transform: translateY(-2px) rotate(-3deg);
  color: var(--clay);
}
.nav-link:hover.is-current svg {
  /* current page already has ink color; hover keeps it but still wiggles */
  color: var(--ink);
}
/* Logo hover wiggle — short tropical micro-bounce, fires once on
   hover. Keeps the brand mark feeling alive without being noisy. */
@keyframes logoWiggle {
  0%   { transform: rotate(0deg)   translateY(0); }
  18%  { transform: rotate(-3.5deg) translateY(-1px); }
  38%  { transform: rotate(3deg)    translateY(-1px); }
  56%  { transform: rotate(-2deg)   translateY(0); }
  76%  { transform: rotate(1.4deg)  translateY(0); }
  100% { transform: rotate(0deg)    translateY(0); }
}
.logo-img {
  transition: transform 200ms ease;
  transform-origin: 50% 70%;
}
.logo-img:hover { animation: logoWiggle 620ms ease; }
/* White silhouette variant — for use on dark backgrounds (footer)
   where the multicolor wordmark would lose contrast. */
.logo-img--light { filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) {
  .logo-img:hover { animation: none; }
}

/* Taxi tile micro-bounce — fires once when the option appears + on
   hover. Same vocabulary as the logo wiggle so the brand voice stays
   coherent. */
@keyframes taxiJiggle {
  0%   { transform: rotate(0deg)   scale(1);    }
  20%  { transform: rotate(-7deg)  scale(1.05); }
  45%  { transform: rotate(6deg)   scale(1.05); }
  70%  { transform: rotate(-3deg)  scale(1.02); }
  100% { transform: rotate(0deg)   scale(1);    }
}
.taxi-tile {
  animation: taxiJiggle 720ms cubic-bezier(.36,.07,.19,.97) both;
  transform-origin: 50% 60%;
}
.taxi-tile:hover {
  animation: taxiJiggle 540ms cubic-bezier(.36,.07,.19,.97);
}
@media (prefers-reduced-motion: reduce) {
  .taxi-tile, .taxi-tile:hover { animation: none; }
}

/* Footer wave header — 4 stacked SVG bands drift left/right at
   different speeds, creating a layered oleaje effect at the top
   of the footer. The zone bg matches the footer body (deep navy
   lagoon) so the front-most wave blends invisibly into the body,
   making the footer feel like a continuous mass of water. The
   topmost wave (pale) sits against the dark Why Us section above. */
@keyframes waveDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes waveDriftReverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.footer-waves {
  position: relative;
  width: 100%;
  /* Bg is transparent so the parent footer's navy bleeds through
     wherever no wave paints. Everything above the highest wave
     crest reads as navy continuous with the footer body, rather
     than as a flat pale slab that looked like a static / malformed
     SVG artifact. Cream Why Us section transitions to navy at
     the zone top edge — the wave crests soften that boundary. */
  height: 100px;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  margin-bottom: -1px; /* hide subpixel seam against footer body */
}
.footer-wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 80px;
  display: block;
  will-change: transform;
}
/* Upper wave anchors at the floor with a tall SVG and phase-shifted
   path so its peaks line up with the topmost layer's trough valleys.
   The zone bg is lagoon-pale, providing the topmost layer color, so
   no separate pale wave SVG is needed. */
.footer-wave--upper  { bottom:  0px; height: 130px; z-index: 2; animation: waveDrift 17s linear infinite; }
/* Lower wave sinks all the way to the zone floor so its body sits
   behind the bottom navy wave — no cream gap can peek through between
   them. The curve still lands around its original CSS height because
   the SVG itself is grown to compensate. */
.footer-wave--lower  { bottom:  0px; height: 130px; z-index: 3; animation: waveDriftReverse 13s linear infinite; }
.footer-wave--bottom { bottom:  0px; height: 100px; z-index: 4; animation: waveDrift 28s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .footer-wave { animation: none !important; }
}

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Layout */
.app { position: relative; z-index: 2; min-height: 100vh; }
.container { max-width: 1340px; margin: 0 auto; padding: 0 32px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--bone); }
.btn-primary:hover { background: var(--ink-2); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: var(--sun-2); }
.btn-lagoon { background: var(--lagoon); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-outline:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--bone-2); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 16px 26px; font-size: 15px; }

/* Cards */
.card {
  background: var(--bone-2);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* Image placeholder */
.ph {
  position: relative;
  background-color: var(--lagoon-pale);
  background-image:
    repeating-linear-gradient(135deg, rgba(26,67,72,0.08) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, var(--lagoon-pale), var(--bone-2));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph.jungle { background-color: var(--jungle); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 18px), linear-gradient(180deg, var(--jungle-2), var(--jungle)); }
.ph.sun { background-color: var(--sun); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 18px), linear-gradient(180deg, var(--sun), var(--sun-2)); }
.ph.clay { background-color: var(--clay); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 18px), linear-gradient(180deg, var(--clay), var(--sun-2)); }
.ph.deep { background-color: var(--lagoon-deep); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 18px), linear-gradient(180deg, var(--lagoon-deep), var(--ink-2)); }
.ph-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(12,42,46,0.45);
  padding: 4px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chips / pills */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bone-2);
  color: var(--ink);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.chip.active { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.chip.lagoon { background: var(--lagoon); color: var(--ink); border: none; }
.chip.sun { background: var(--sun); color: var(--ink); border: none; }
.chip.jungle { background: var(--jungle); color: var(--bone); border: none; }

/* Inputs */
.input, .select, textarea.input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line-strong);
  background: var(--bone);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}
.input:focus, .select:focus { border-color: var(--lagoon-deep); }
label.field { display: block; }
label.field > .mono { display: block; color: var(--ink-soft); margin-bottom: 6px; }
/* Bolder, brand-tinted form labels with inline icons. Used in the
   transfers form to set a clearer visual hierarchy than the muted
   ink-soft default mono labels. */
.field-label {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: var(--lagoon-deep);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* Scrollbar soft */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* Utility */
.row { display: flex; gap: 16px; }
.col { display: flex; flex-direction: column; gap: 16px; }
.between { justify-content: space-between; align-items: center; }
.center { align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.hidden { display: none !important; }

.divider { height: 1px; background: var(--line); margin: 0; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--sun); color: var(--ink);
}
.badge.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.lagoon { background: var(--lagoon); }
.badge.jungle { background: var(--jungle); color: var(--bone); }
.badge.clay { background: var(--clay); color: var(--bone); }
.badge.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }

/* Animate fade */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: slideUp 0.35s ease both; }

/* Map pins pulse */
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}
.pin-pulse { animation: pulseDot 2s ease-in-out infinite; }

/* ============================================================= */
/*  Hero entrance + collage hover                                 */
/* ============================================================= */

/* Staggered text entrance. Parent sets .hero-stagger; children  */
/* get .hero-item + nth-of-type delay.                            */
@keyframes heroRise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-item { opacity: 0; animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-item.d0 { animation-delay:   0ms; }
.hero-item.d1 { animation-delay: 100ms; }
.hero-item.d2 { animation-delay: 200ms; }
.hero-item.d3 { animation-delay: 320ms; }
.hero-item.d4 { animation-delay: 440ms; }
.hero-item.d5 { animation-delay: 560ms; }

/* Collage photo cards — pop in with scale while preserving rotation.
   Rotation is applied via --tilt custom property so hover can override it
   without losing the resting rotation. */
@keyframes heroCardPop {
  0%   { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(0.9) translateY(16px); }
  100% { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1)   translateY(0); }
}

/* Transfers page hero: two stacked background images that cross-fade.
   Both layers tick on a 14s cycle (50%/50% visible). The B layer is
   delayed 7s so they alternate. Slow Ken-Burns scale gives subtle
   motion without being distracting. */
@keyframes transfersHeroFadeA {
  0%, 45%   { opacity: 1; }
  50%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes transfersHeroFadeB {
  0%, 45%   { opacity: 0; }
  50%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}
.transfers-hero-bg {
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.transfers-hero-bg--a { animation-name: transfersHeroFadeA; }
.transfers-hero-bg--b { animation-name: transfersHeroFadeB; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .transfers-hero-bg { animation: none !important; }
  .transfers-hero-bg--b { display: none; }
}

/* Catalog page hero: three stacked background images that cross-fade
   on a 21s cycle (≈7s per image). Cubic-bezier eases in and out softer
   than ease-in-out, and a parallel zoom gives a subtle Ken Burns feel
   without being distracting. */
@keyframes catalogHeroFadeA {
  0%, 28%   { opacity: 1; }
  35%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes catalogHeroFadeB {
  0%, 28%   { opacity: 0; }
  35%, 61%  { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@keyframes catalogHeroFadeC {
  0%, 61%   { opacity: 0; }
  68%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes catalogHeroZoom {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.08); }
}
.catalog-hero-bg {
  animation-duration: 21s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity, transform;
}
.catalog-hero-bg--a { animation-name: catalogHeroFadeA, catalogHeroZoom; animation-duration: 21s, 21s; }
.catalog-hero-bg--b { animation-name: catalogHeroFadeB, catalogHeroZoom; animation-duration: 21s, 21s; opacity: 0; animation-delay: 0s, -7s; }
.catalog-hero-bg--c { animation-name: catalogHeroFadeC, catalogHeroZoom; animation-duration: 21s, 21s; opacity: 0; animation-delay: 0s, -14s; }
@media (prefers-reduced-motion: reduce) {
  .catalog-hero-bg { animation: none !important; }
  .catalog-hero-bg--b, .catalog-hero-bg--c { display: none; }
}

/* Tour card hover polish: photo zooms gently, card lifts, Book Now
   shifts to the deeper sunset tone with a soft glow. All transforms
   sit on .tour-card-tile / .tour-card-img / .tour-card-cta so the
   inline-style scaffold in components.jsx stays readable. */
.tour-card-tile {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 320ms ease;
}
.tour-card-img {
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.tour-card-cta {
  transition: background-color 200ms ease,
              transform 200ms ease,
              box-shadow 200ms ease;
}
.tour-card-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(12,42,46,0.28);
}
.tour-card-tile:hover .tour-card-img {
  transform: scale(1.07);
}
.tour-card-tile:hover .tour-card-cta,
.tour-card-cta:hover {
  background: var(--sun-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(212,114,42,0.45);
}
.tour-card-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(212,114,42,0.35);
}
@media (prefers-reduced-motion: reduce) {
  .tour-card-tile,
  .tour-card-img,
  .tour-card-cta { transition: none !important; }
  .tour-card-tile:hover { transform: none; }
  .tour-card-tile:hover .tour-card-img { transform: none; }
}

/* Skeleton loaders — same footprint as the real tiles so swapping them
   in / out doesn't shift the layout. The shimmer is a slow gradient
   sweep that signals "loading" without being noisy. */
@keyframes skeletonShimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.skeleton-shimmer {
  background-color: var(--bone-2);
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer { animation: none; }
}

/* DatePicker day-cell hover. Inline styles paint the resting state
   (selected / disabled / off-schedule / blackout colors), CSS handles
   the rollover. !important is needed because inline styles win over
   regular CSS — only pseudo-class rules with !important can override
   them. */
.datepicker-day:not(:disabled):not(.is-selected):hover {
  background-color: var(--lagoon-pale) !important;
  border-color: var(--lagoon) !important;
  color: var(--ink) !important;
  transform: translateY(-1px);
}
.datepicker-day:not(:disabled):not(.is-selected):active {
  transform: translateY(0);
  background-color: var(--lagoon) !important;
  color: var(--bone) !important;
}
.datepicker-day.is-selected:hover {
  background-color: var(--ink-2) !important;
}
@media (prefers-reduced-motion: reduce) {
  .datepicker-day:hover { transform: none !important; }
}

/* Time chips on the tour detail booking panel — same hover language
   as datepicker-day for consistency. */
.time-chip:not(.is-selected):hover {
  background-color: var(--lagoon-pale) !important;
  border-color: var(--lagoon) !important;
  transform: translateY(-1px);
}
.time-chip:not(.is-selected):active {
  transform: translateY(0);
  background-color: var(--lagoon) !important;
  color: var(--bone) !important;
}
.time-chip.is-selected:hover { background-color: var(--ink-2) !important; }

/* Stepper +/- buttons — subtle bone-2 fill on hover to invite the
   click without competing with the larger lagoon-pale used elsewhere. */
.stepper-btn:not(:disabled):hover { background-color: var(--bone-2) !important; }
.stepper-btn:not(:disabled):active { background-color: var(--lagoon-pale) !important; }

/* Add-on rows — checked state already lifts color via inline styles;
   hover bumps the unchecked rows so they read as clickable. */
.addon-row:not(.is-checked):hover {
  background-color: var(--bone-2) !important;
  border-color: var(--line-strong) !important;
}
.addon-row.is-checked:hover {
  background-color: rgba(184,232,238,0.55) !important;
}

/* Gallery photo tiles — slow zoom on the inner Photo image plus a
   subtle dimming overlay so the user knows the tile is interactive. */
.gallery-tile { position: relative; }
.gallery-tile img,
.gallery-tile .ph,
.gallery-tile > * {
  transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gallery-tile:hover img,
.gallery-tile:hover .ph,
.gallery-tile:hover > * {
  transform: scale(1.04);
}
.gallery-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,42,46,0) 60%, rgba(12,42,46,0.18) 100%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.gallery-tile:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .time-chip:hover, .stepper-btn:hover, .addon-row:hover { transform: none !important; }
  .gallery-tile:hover img,
  .gallery-tile:hover .ph,
  .gallery-tile:hover > * { transform: none !important; }
}

/* Home "Pick your path" tiles — color-blocked, no-photo navigation.
   Hover lifts the tile, shifts the ghost glyph out toward the corner,
   and slides the CTA arrow forward so the click target reads "alive"
   without needing a photo zoom or any background motion. */
.path-tile {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 320ms ease;
}
.path-tile-glyph {
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 320ms ease;
}
.path-tile-cta { transition: transform 200ms ease; }
.path-tile-cta svg { transition: transform 220ms ease; }
/* Pure CSS transition — no keyframes. Rest state: hidden + slightly
   shrunk + nudged down. Adding .path-tile-illo--in transitions the
   element to its final state with elastic ease-out, which gives the
   bounce naturally via the easing curve (no separate animation step
   to glitch with). Hover overrides transform on the same property
   so the transition takes care of the rollover too. */
.path-tile-illo {
  opacity: 0;
  transform: scale(0.92) translateY(16px);
  transition: opacity 700ms ease,
              transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 280ms ease;
}
.path-tile-illo--in {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.path-tile:hover .path-tile-illo--in {
  transform: scale(1.06) translateY(-6px) rotate(-1.5deg);
  filter: drop-shadow(0 16px 32px rgba(12,42,46,0.24));
}
.path-tile:active .path-tile-illo--in {
  transform: scale(1.02) translateY(-2px) rotate(-0.5deg);
}
.path-tile:hover .path-tile-cta svg { transform: translateX(8px); }
.path-tile-cta svg {
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .path-tile,
  .path-tile-illo,
  .path-tile-cta,
  .path-tile-cta svg { transition: none !important; }
  .path-tile-illo { opacity: 1; transform: none; }
  .path-tile:hover .path-tile-illo--in { transform: none; filter: none; }
  .path-tile:hover .path-tile-cta svg { transform: none; }
}

.hero-card {
  /* Resting state — explicit so hover can override once the intro animation ends */
  opacity: 1;
  transform: rotate(var(--tilt, 0deg)) scale(1) translateY(0);
  transform-origin: center center;
  transition:
    transform    520ms cubic-bezier(.2,.9,.25,1),
    box-shadow   420ms ease,
    filter       420ms ease,
    opacity      420ms ease;
  will-change: transform, filter;
  cursor: zoom-in;
  box-shadow: 0 10px 24px rgba(12,42,46,0.12);
  /* backwards fill-mode: hides element during animation-delay via 0% keyframe,
     then after animation ends control returns to the regular CSS (so :hover wins). */
  animation: heroCardPop 0.8s cubic-bezier(.2,.8,.2,1) backwards;
}
.hero-card.c1 { --tilt: -3deg; animation-delay: 280ms; z-index: 1; }
.hero-card.c2 { --tilt:  2deg; animation-delay: 420ms; z-index: 2; }
.hero-card.c3 { --tilt: -6deg; animation-delay: 560ms; z-index: 3; }

/* Hover / focus — spotlight behaviour. Keep some of the original tilt (35%) so
   it feels organic instead of snapping flat. Use layered shadow + brightness
   bump for depth. */
.hero-card:hover,
.hero-card:focus-visible {
  transform: rotate(calc(var(--tilt, 0deg) * 0.3)) scale(1.07) translateY(-6px);
  box-shadow:
    0 30px 60px -10px rgba(12,42,46,0.32),
    0 14px 28px -14px rgba(12,42,46,0.22);
  filter: brightness(1.04) saturate(1.05);
  z-index: 10;
}

/* Dim the non-hovered siblings so the active card visually wins. */
.rg-hero-collage:has(.hero-card:hover) .hero-card:not(:hover),
.rg-hero-collage:has(.hero-card:focus-visible) .hero-card:not(:focus-visible) {
  transform: rotate(var(--tilt, 0deg)) scale(0.97);
  opacity: 0.62;
  filter: blur(0.6px) saturate(0.85) brightness(0.95);
  box-shadow: 0 6px 14px rgba(12,42,46,0.08);
}

/* Floating tags recede slightly when any card is being hovered — keeps focus. */
.rg-hero-collage:has(.hero-card:hover) .hero-tag,
.rg-hero-collage:has(.hero-card:focus-visible) .hero-tag {
  opacity: 0.4;
  transition: opacity 300ms ease;
}

/* Floating tags inside the hero collage get their own delays */
.hero-tag { opacity: 0; animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: 720ms; }
.hero-tag.d2 { animation-delay: 840ms; }

/* Generic hover-lift for any Photo the user clicks */
.photo-hover { transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease; }
.photo-hover:hover { transform: translateY(-3px) scale(1.02); z-index: 5; box-shadow: 0 20px 40px rgba(12,42,46,0.18); }

/* ============================================================= */
/*                         Responsive                              */
/* ============================================================= */
/* Strategy: pages apply `rg`, `rg-sidebar`, `rg-cards`, `rg-3`, */
/* `rg-4`, `rg-footer` etc. as className alongside inline grid    */
/* styles. Media queries override with !important below.          */

.mobile-only { display: none; }

@media (max-width: 960px) {
  .container { padding: 0 20px; }

  /* Hide desktop-only bits, show mobile ones */
  .desktop-only { display: none !important; }
  .mobile-only  { display: flex !important; }

  /* Shrinkable: allow grid/flex children to collapse below their intrinsic min size */
  .card, .field, .input, .select, .btn, .chip { max-width: 100%; }
  .card { min-width: 0; }
  .rg-sticky-col > .card { width: 100%; }
  /* Long titles can break */
  .display { overflow-wrap: anywhere; word-break: break-word; }
  /* Critical: grid/flex children need min-width: 0 or they'll refuse to shrink below content */
  .rg > *, .rg-3 > *, .rg-4 > *, .rg-cards > *, .rg-sidebar > *, .rg-gallery > *, .rg-footer > *, .rg-3 > * > *, .rg-stats > * { min-width: 0; }
  /* Force grid columns to use minmax(0, ...) so items can shrink */
  .rg-gallery { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .rg-3       { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .rg-4       { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .rg-cards   { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }

  /* Page-level 2-col sidebars stack at tablet (hero, map section, catalog+map, detail+booking, booking+summary, map-page) */
  .rg,
  .rg-sidebar,
  .rg-map { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Sticky right rails become inline on mobile */
  .rg-sticky-col { position: static !important; top: auto !important; }

  /* 3-col and 4-col grids go to 2-col on tablet (NOT 1-col) so cards keep sane proportions */
  .rg-3 { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .rg-4 { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

  /* Catalog cards: stay 2-col on tablet */
  .rg-cards { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

  /* Footer 4-col → 2-col */
  .rg-footer { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* Reduce vertical rhythm */
  section { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* Port page stepper no longer overlaps the hero on mobile (hero padding shrunk) */
  .port-stepper-wrap { margin-top: 24px !important; }

  /* Typography */
  h1.display { font-size: clamp(36px, 8vw, 56px) !important; }
  h2.display { font-size: clamp(28px, 6vw, 40px) !important; }

  /* Hero collage — keep the rotated/overlapping look (personality), just contain the canvas */
  .rg-hero-collage {
    aspect-ratio: 5 / 6 !important;
    max-width: 440px;
    margin: 0 auto;
    min-height: 420px;
  }

  /* Tour detail gallery — stack to 1 row of 2 + hero, simpler */
  .rg-gallery { grid-template-columns: 1fr 1fr !important; grid-template-rows: 160px 160px 160px !important; gap: 8px !important; }
  .rg-gallery > :first-child { grid-column: span 2; grid-row: span 1 !important; }

  /* Port flow step-3 tour grid → single col */
  .rg-port-tours { grid-template-columns: 1fr !important; }

  /* Cruise lines logo grid: 5-col desktop → 3-col tablet */
  .rg-cruise-logos { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }

  /* Transfers search form → stack */
  .rg-transfers-form { grid-template-columns: 1fr !important; }

  /* Booking confirmation 4-col info → 2-col */
  .rg-confirm-info { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Primary CTAs full-width on mobile */
  .btn-lg { width: auto; }

  /* Header mobile */
  .header-nav-desktop { display: none !important; }
  .header-actions-desktop .lang-text { display: none !important; }
}

/* Footer drops to 1-col earlier than other grids — 2 tall-narrow text columns look bad */
@media (max-width: 768px) {
  .rg-footer { grid-template-columns: 1fr !important; gap: 24px !important; }
}

@media (max-width: 640px) {
  .container { padding: 0 14px; }

  .rg-cards, .rg-3, .rg-form { grid-template-columns: 1fr !important; }
  .rg-4 { grid-template-columns: 1fr 1fr !important; }
  .rg-cruise-logos { grid-template-columns: repeat(2, 1fr) !important; }

  /* Catalog filter bar scrolls horizontally on narrow */
  .rg-filter-bar { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; padding-bottom: 4px; }
  .rg-filter-bar::-webkit-scrollbar { display: none; }

  /* Cards a touch smaller */
  .card { border-radius: 12px; }

  /* Stats row in hero wraps nicely */
  .rg-stats { gap: 16px !important; }
}

@media (max-width: 440px) {
  .rg-4,
  .rg-3,
  .rg-confirm-info { grid-template-columns: 1fr !important; }
  h1.display { font-size: clamp(32px, 9vw, 46px) !important; }
}

/* Cart drawer already uses min(420px, 100vw) — good.       */
/* Lightbox image uses vw/vh — good.                        */
/* Map debug page gets rg-sidebar treatment via page.       */

/* ─────────────────────────────────────── editorial landings */
.landing-article { padding-top: 0; }

/* Outer column allows wide media (tour cards, maps, pull-quotes); inner
   prose stays narrower for comfortable reading line-length. */
.landing-column {
  max-width: 880px;
  margin: 0 auto;
}

.landing-prose {
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  counter-reset: section;
}
.landing-prose p { margin: 0 0 24px; }

/* Inline brand-color accents aligned to the LOGO palette:
   - navy   → "bacalar" script color (--lagoon-darkest)
   - lagoon → "allinone" turquoise (--lagoon-deep, slightly deeper for
              contrast on bone bg)
   - sun    → ".tours" amber (--sun)
   Use as <span class="navy|lagoon|sun">…</span> inside markdown body.
   `.clay` and `.accent` stay as deprecated aliases for `.sun` so existing
   content doesn't break — but new content should use the logo names. */
.landing-prose .navy   { color: var(--lagoon-darkest); font-weight: 600; }
.landing-prose .lagoon { color: var(--lagoon-deep); font-weight: 600; }
.landing-prose .sun,
.landing-prose .clay,
.landing-prose .accent { color: var(--sun); font-weight: 600; }
.landing-prose .script {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  font-size: 1.25em;
  color: var(--sun);
  letter-spacing: 0.01em;
}
.landing-prose h2 {
  font-family: 'Bricolage Grotesque', var(--display-font, sans-serif);
  font-size: clamp(40px, 4.8vw, 60px);
  line-height: 1.04;
  margin: 88px 0 24px;
  letter-spacing: -0.025em;
  font-weight: 700;
  counter-increment: section;
  position: relative;
  color: var(--lagoon-darkest);
}
/* Big oversized section number stacked above each h2, with a wavy squiggle
   underneath — same pattern as the home page path tiles. The number and
   wave rotate through the logo palette: navy → turquoise → amber. */
.landing-prose h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(64px, 7.2vw, 100px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  padding-bottom: 16px;
  width: max-content;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 78px 12px;
  /* default: logo navy */
  color: var(--lagoon-darkest);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 12' preserveAspectRatio='none'><path d='M2 7 Q11 1 20 7 T38 7 T56 7 T74 7' fill='none' stroke='%231d3a5c' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
.landing-prose h2:nth-of-type(3n+2)::before {
  color: var(--lagoon);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 12' preserveAspectRatio='none'><path d='M2 7 Q11 1 20 7 T38 7 T56 7 T74 7' fill='none' stroke='%232fb8c9' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
.landing-prose h2:nth-of-type(3n+3)::before {
  color: var(--sun);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 12' preserveAspectRatio='none'><path d='M2 7 Q11 1 20 7 T38 7 T56 7 T74 7' fill='none' stroke='%23e89a3c' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
/* Match heading color to the number color so each section reads as one block. */
.landing-prose h2:nth-of-type(3n+2) { color: var(--lagoon-deep); }
.landing-prose h2:nth-of-type(3n+3) { color: var(--sun-2); }
.landing-prose h3 {
  font-family: 'Bricolage Grotesque', var(--display-font, sans-serif);
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.18;
  margin: 48px 0 14px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--lagoon-deep);
}
.landing-prose ul,
.landing-prose ol { margin: 0 0 22px; padding-left: 1.4em; }
.landing-prose li { margin: 6px 0; }
.landing-prose strong { font-weight: 700; }
.landing-prose em { font-style: italic; }
.landing-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.28);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease;
  cursor: pointer;
}
.landing-prose a:hover { text-decoration-color: var(--ink); }
.landing-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 28px 0;
  display: block;
}
.landing-prose blockquote {
  border-left: 4px solid var(--line, #e3e0d8);
  padding: 4px 0 4px 18px;
  margin: 28px 0;
  color: var(--ink-soft, #6b6457);
  font-style: italic;
}
.landing-prose hr {
  border: 0;
  height: 28px;
  margin: 56px auto;
  text-align: center;
  position: relative;
  background: none;
}
.landing-prose hr::before {
  content: "✦  ✦  ✦";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sun);
  font-size: 14px;
  letter-spacing: 0.5em;
}
.landing-prose code {
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  font-family: 'JetBrains Mono', monospace;
}

/* Drop-cap on the very first paragraph of the article. */
.landing-prose.has-dropcap > p:first-of-type::first-letter {
  font-family: 'Bricolage Grotesque', var(--display-font, sans-serif);
  font-size: 4.6em;
  line-height: 0.86;
  float: left;
  margin: 8px 12px 0 0;
  font-weight: 700;
  color: var(--ink);
}

/* Pull-quote rendered from {{quote:author|text}} markers. */
.landing-pullquote {
  max-width: 780px;
  margin: 48px auto;
  padding: 16px 0 16px 24px;
  border-left: 4px solid var(--lagoon);
  font-family: 'Bricolage Grotesque', var(--display-font, sans-serif);
  font-size: 24px;
  line-height: 1.35;
  color: var(--lagoon-darkest);
  letter-spacing: -0.005em;
}
.landing-pullquote p { margin: 0; }
.landing-pullquote cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
}

/* Static map embedded mid-article. */
.landing-map {
  max-width: 880px;
  margin: 36px auto;
}

/* Inline horizontal tour card: stacks below 720px so the image goes on top. */
@media (max-width: 720px) {
  .tour-inline { grid-template-columns: 1fr !important; }
  .tour-inline > div:first-child { min-height: 220px !important; }
}

/* Poker stack of horizontal tour cards. All children share the same grid cell,
   then transform into front / back-left / back-right slots. The wrapper owns
   hover, so the inner cards are rendered with `flat` (no internal transform). */
.tour-stack {
  position: relative;
  display: grid;
  margin: 60px 0 88px;
  isolation: isolate;
}
.tour-stack > .tour-stack-card {
  grid-area: 1 / 1;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1), filter 300ms ease;
  transform-origin: 50% 88%;
  will-change: transform;
}
.tour-stack > .tour-stack-card.slot-0 {
  transform: rotate(-1deg);
  z-index: 3;
  filter: drop-shadow(0 6px 18px rgba(12,42,46,0.14));
}
.tour-stack > .tour-stack-card.slot-1 {
  transform: rotate(-5.5deg) translate(-34px, 22px);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(12,42,46,0.10));
}
.tour-stack > .tour-stack-card.slot-2 {
  transform: rotate(4.5deg) translate(36px, 22px);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(12,42,46,0.10));
}
@media (max-width: 720px) {
  .tour-stack { margin: 44px 0 64px; }
  .tour-stack > .tour-stack-card.slot-0 { transform: rotate(-0.5deg); }
  .tour-stack > .tour-stack-card.slot-1 { transform: rotate(-4deg) translate(-12px, 14px); }
  .tour-stack > .tour-stack-card.slot-2 { transform: rotate(3.5deg) translate(14px, 14px); }
}

/* "More tours" rail — sits at the end of an editorial landing. Width matches
   the article column (.landing-column max-width). */
.more-tours {
  margin: 96px 0 0;
}
.more-tours h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  margin: 0 0 28px;
  color: var(--lagoon-darkest);
  letter-spacing: -0.018em;
  font-weight: 700;
}
.more-tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 720px) {
  .more-tours { margin-top: 64px; }
  .more-tours-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
.tour-square-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.tour-square-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(12,42,46,0.10);
  border-color: var(--lagoon);
}
.tour-square-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0c1a2a;
  overflow: hidden;
}
.tour-square-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.tour-square-card:hover .tour-square-image img {
  transform: scale(1.05);
}
.tour-square-body {
  padding: 14px 14px 16px;
}
.tour-square-body h4 {
  margin: 0 0 6px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tour-square-price {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--lagoon-darkest);
}
.tour-square-price span {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 2px;
}
.tour-square-price .tour-square-pp {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-soft);
  margin-left: 4px;
}

@media (max-width: 720px) {
  .landing-prose { font-size: 17px; line-height: 1.7; }
  .landing-prose h2 { margin: 60px 0 18px; }
  .landing-prose h2::before {
    margin-bottom: 12px;
    background-size: 60px 10px;
  }
  .landing-prose h3 { margin: 36px 0 10px; }
  .landing-pullquote { font-size: 20px; padding-left: 18px; }
  .landing-prose.has-dropcap > p:first-of-type::first-letter { font-size: 3.8em; }
}