/* ============================================================
   SSP TOURS — template-hero-section.css
   Hero Slideshow v4.3 — Emerald Daylight
   ⚠️  All values reference main.css variables — no hardcoding.
   ⚠️  Works with the existing hero markup inside each page file
       (#hero-slideshow, .hero-bg-layer-0/1, .hero-glow, .container
       with .hero-eyebrow / .hero-title / .hero-subtitle / .hero-badges).
       No page HTML changes are needed.
   ⚠️  No page-specific overrides here — template-level only.

   Layout:
   - Background: the dedicated hero photos (images/slider/), full
     bleed, crossfade + slow zoom, at full brightness. No veil, haze, wash or blur over the photos.
   - Bottom left: the page's text straight on the photo (no card,
     no veil), kept legible by soft letter shadows only.
   - Bottom right: an arched "oval" frame (injected by the JS) slides
     its own photo, always one ahead of the background.
   - Controls: bottom centre. Gold progress bar along the bottom edge.
   - The JS measures the header and sets --hero-header-overlap and
     --hero-doc-top, so the hero clears the header and fits the first
     screen whether the header overlays the hero or sits above it.
   ============================================================ */

/* ── Hero container ───────────────────────────────────────── */
/* Top padding clears the fixed header shell (template-header.js puts
   pages with #hero-slideshow into hero-mode). --tt-util-h and
   --tt-header-h come from main.css section 32. */
.hero-slideshow {
  position: relative;
  width: 100%;
  --hero-edge: clamp(var(--spacing-4), 3vw, var(--spacing-12));
  min-height: max(600px, calc(100svh - var(--hero-doc-top, 0px)));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: calc(var(--hero-header-overlap, 0px) + var(--spacing-10)) 0 calc(var(--hero-edge) + var(--spacing-12));
  margin-bottom: var(--spacing-0);
}

/* ── Background photo layers ──────────────────────────────── */
.hero-bg-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-index-0);
  background-size: cover;
  background-position: center 40%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.hero-bg-layer.is-active {
  opacity: 1;
  z-index: var(--z-index-10);
  animation: heroKenBurns 14s ease-out forwards;
}
/* Before the script starts, keep the first layer visible */
.hero-slideshow:not(.is-ready) .hero-bg-layer-0 { opacity: 1; }

@keyframes heroKenBurns {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.10) translate(-0.8%, -0.6%); }
}

/* ── No veil: the photos stay untouched ───────────────────── */
.hero-slideshow::before { content: none; }
.hero-slideshow::after { content: none; }

/* Legacy ambient layers from v2.2 are not used */
.hero-glow,
.hero-overlay,
.hero-particles,
.hero-rule,
.hero-shimmer-layer,
.hero-slideshow .scroll-indicator,
.hero-slideshow .tg-scroll-indicator { display: none !important; }

/* ── Text, bottom left, straight on the photo ─────────────── */
/* No card, no veil: the photo shows through untouched. Legibility
   comes from soft shadows that hug the letters only. */
.hero-slideshow {
  /* Legibility on any photo, without touching the photo itself:
     a thin dark outline drawn behind each letter (paint-order keeps
     the fill crisp), a tight contact shadow, and a soft glow. */
  --hero-ink-shadow:
    0 1px 1px var(--color-dark-80),
    0 2px 4px var(--color-dark-70),
    0 4px 18px var(--color-dark-70),
    0 8px 36px var(--color-dark-50);
  --hero-ink-shadow-sm:
    0 1px 1px var(--color-dark-90),
    0 1px 3px var(--color-dark-80),
    0 2px 10px var(--color-dark-70),
    0 4px 20px var(--color-dark-50);
  --hero-ink-stroke: 0.6px var(--color-dark-70);
  --hero-ink-stroke-sm: 0.4px var(--color-dark-70);
}
.hero-slideshow .hero-eyebrow,
.hero-slideshow .hero-title,
.hero-slideshow h1,
.hero-slideshow .hero-subtitle,
.hero-slideshow .container p,
.hero-slideshow .hero-badge,
.hero-slideshow .hero-badge-item,
.hero-slideshow .tg-jump-links a {
  paint-order: stroke fill;
}
.hero-slideshow > .container {
  position: relative;
  z-index: var(--z-index-30);
  width: auto;
  max-width: min(540px, 46vw);
  margin: 0 0 0 var(--hero-edge);
  padding: 0;
  background: transparent;
  box-shadow: none;
  text-align: left !important;
}
.hero-slideshow > .container > *,
.hero-slideshow > .container .row,
.hero-slideshow > .container .hero-content { max-width: 100%; }
.hero-slideshow > .container > :last-child { margin-bottom: 0; }
.hero-slideshow > .container .row { margin: 0; justify-content: flex-start !important; }
.hero-slideshow > .container [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
.hero-slideshow > .container.text-center,
.hero-slideshow > .container .text-center { text-align: left !important; }

/* ── Eyebrow: champagne label between gold hairlines ──────── */
.hero-slideshow .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  margin: 0 0 var(--spacing-3);
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold-light);
  -webkit-text-stroke: var(--hero-ink-stroke-sm);
  text-shadow: var(--hero-ink-shadow-sm);
  animation: heroFadeUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s both;
}
.hero-slideshow .hero-eyebrow::before {
  content: '';
  flex: none;
  width: 36px; height: 1px;
  background: var(--sheen-gold);
  box-shadow: 0 1px 6px var(--color-dark-30);
}
.hero-slideshow .hero-eyebrow:empty { display: none; }
.hero-slideshow .hero-eyebrow i { color: var(--color-gold-light); }

/* ── Title: white serif + champagne italic last word ──────── */
.hero-slideshow .hero-title,
.hero-slideshow h1 {
  position: relative;
  margin: 0 0 var(--spacing-3);
  padding-bottom: var(--spacing-3);
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal) !important;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(var(--text-2xl), 2.9vw, var(--text-4xl)) !important;
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  color: var(--color-white) !important;
  -webkit-text-stroke: var(--hero-ink-stroke);
  text-shadow: var(--hero-ink-shadow);
  text-transform: none;
  text-wrap: balance;
  animation: heroFadeUp 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s both;
}
.hero-slideshow .hero-title em,
.hero-slideshow h1 em {
  font-style: italic;
  font-weight: var(--font-weight-normal);
  color: var(--color-gold-light);
  -webkit-text-stroke: var(--hero-ink-stroke);
  text-shadow: var(--hero-ink-shadow);
}
.hero-slideshow .hero-title::after,
.hero-slideshow h1::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--sheen-gold);
  box-shadow: 0 1px 8px var(--color-dark-30);
  animation: heroRuleGrow 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s forwards;
}
@keyframes heroRuleGrow { to { width: 64px; } }

/* ── Subtitle and any plain paragraph ─────────────────────── */
.hero-slideshow .hero-subtitle,
.hero-slideshow p.hero-subtitle,
.hero-slideshow .container p:not(.hero-eyebrow) {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-normal);
  font-size: clamp(var(--text-sm), 1.05vw, var(--text-base)) !important;
  line-height: var(--leading-snug);
  color: var(--color-white) !important;
  -webkit-text-stroke: var(--hero-ink-stroke-sm);
  text-shadow: var(--hero-ink-shadow-sm);
  max-width: 46ch;
  animation: heroFadeUp 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
}
.hero-slideshow .hero-subtitle:empty { display: none; }
.hero-slideshow .text-white { color: var(--color-white) !important; }

/* ── Badges: clear glass pills with a white hairline ──────── */
.hero-slideshow .hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-1-5);
  margin-top: 0;
  animation: heroFadeUp 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.55s both;
}
.hero-slideshow .hero-badge,
.hero-slideshow .hero-badge-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  background: var(--color-dark-30);
  border: 1px solid var(--color-white-60);
  box-shadow: 0 2px 10px var(--color-dark-30);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  line-height: 1.2;
  -webkit-text-stroke: var(--hero-ink-stroke-sm);
  text-shadow: var(--hero-ink-shadow-sm);
  backdrop-filter: none;
  opacity: 1;
  transition: var(--transition-elegant);
}
.hero-slideshow .hero-badge i,
.hero-slideshow .hero-badge-item i { color: var(--color-gold-light); filter: none; }
.hero-slideshow .hero-badge:hover,
.hero-slideshow .hero-badge-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold-light);
  background: var(--color-dark-50);
}

/* Buttons and links that some pages place inside the hero */
.hero-slideshow .hero-write-review-wrap,
.hero-slideshow .tg-jump-links,
.hero-slideshow .filter-buttons { margin-top: var(--spacing-4); text-align: left; justify-content: flex-start; }
.hero-slideshow .tg-jump-links { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.hero-slideshow .tg-jump-links a {
  display: inline-flex;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  background: var(--color-dark-30);
  border: 1px solid var(--color-white-60);
  box-shadow: 0 2px 10px var(--color-dark-30);
  color: var(--color-white);
  text-shadow: var(--hero-ink-shadow-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}
.hero-slideshow .tg-jump-links a:hover { border-color: var(--color-gold-light); background: var(--color-dark-50); color: var(--color-white); }

/* ── Arched frame (injected by JS) ────────────────────────── */
.hero-arch {
  position: absolute;
  z-index: var(--z-index-30);
  /* bottom right corner, lifted just enough to clear the floating
     WhatsApp button that sits in the same corner of the screen */
  right: calc(var(--hero-edge) + 8px);
  bottom: calc(var(--hero-edge) + var(--spacing-16));
  width: clamp(240px, 24vw, 380px);
  aspect-ratio: 4 / 4.9;
  margin: 0;
  border-radius: var(--radius-arch-card);
  box-shadow: 0 0 0 7px var(--color-white), 0 0 0 8px var(--color-royal), var(--shadow-2xl);
  background: var(--bg-secondary);
  animation: heroArchIn 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s both;
}
.hero-arch-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* The arch photo drifts slowly inside the frame (background-position,
   so it never spills past the white and silver rings) */
.hero-arch-layer.is-active {
  opacity: 1;
  animation: heroArchDrift 12s ease-out forwards;
}
@keyframes heroArchDrift {
  from { background-position: 50% 45%; }
  to   { background-position: 50% 60%; }
}
@keyframes heroArchIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Caption chip on the arch, lower left */
.hero-caption {
  position: absolute;
  left: calc(-1 * var(--spacing-10));
  top: var(--spacing-12);
  display: grid;
  gap: 2px;
  max-width: 240px;
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-royal-light), var(--shadow-lg);
}
.hero-caption.is-in { animation: heroCaptionIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both; }
.hero-caption-place {
  font-size: 0.66rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
.hero-caption-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.15;
  color: var(--text-primary);
}
@keyframes heroCaptionIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Controls: arrows + dots, under the arch ──────────────── */
.hero-dock {
  position: absolute;
  z-index: var(--z-index-30);
  left: 50%;
  bottom: var(--hero-edge);
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.hero-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1-5);
  border-radius: var(--radius-full);
  background: var(--color-white-90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--color-white-60), var(--shadow-md);
}
.hero-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--sheen-silver);
  box-shadow: inset 0 1px 0 var(--color-white), 0 0 0 1px var(--color-royal);
  color: var(--color-navy);
  font-size: var(--text-sm);
  transition: var(--transition-fast);
}
.hero-nav:hover { background: var(--sheen-emerald); color: var(--color-white); box-shadow: var(--shadow-metal); }
.hero-nav:focus-visible,
.hero-dot:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.hero-dots { display: flex; align-items: center; gap: var(--spacing-1-5); padding: 0 var(--spacing-1); }
.hero-dot {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--color-royal);
  transition: width 400ms cubic-bezier(0.165, 0.84, 0.44, 1), background 300ms ease;
}
.hero-dot:hover { background: var(--color-royal-dark); }
.hero-dot.is-active { width: 26px; background: var(--sheen-gold); }

/* ── Gold progress bar (injected by JS) ───────────────────── */
.hero-progress-bar {
  position: absolute;
  left: 0; bottom: 0;
  z-index: var(--z-index-50);
  width: 0%;
  height: 3px;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: var(--sheen-gold);
  box-shadow: none;
  transition: width 0.12s linear;
}

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive — Tablet ──────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-slideshow > .container { max-width: min(460px, 54vw); }
  .hero-arch { width: clamp(220px, 28vw, 300px); }
  .hero-caption { left: calc(-1 * var(--spacing-6)); }
  /* centre dock would sit between card and arch; tuck it under the card */
  .hero-dock { left: var(--hero-edge); transform: none; bottom: var(--spacing-3); }
}

/* ── Responsive — Mobile and small tablet ─────────────────── */
/* Photo fills the hero untouched. Arch shrinks into the top right
   corner; the text card stays in the bottom left, full width. */
@media (max-width: 860px) {
  .hero-slideshow {
    --hero-edge: var(--spacing-4);
    min-height: max(560px, calc(100svh - var(--hero-doc-top, 0px)));
    padding: calc(var(--hero-header-overlap, 0px) + 42vw + var(--spacing-10)) 0 calc(var(--spacing-16));
  }
  .hero-slideshow > .container {
    max-width: none;
    margin: 0 var(--hero-edge);
  }
  .hero-arch {
    top: calc(var(--hero-header-overlap, 0px) + var(--spacing-5));
    bottom: auto;
    right: var(--spacing-5);
    width: 34vw;
    max-width: 170px;
    animation: none;
    box-shadow: 0 0 0 4px var(--color-white), 0 0 0 5px var(--color-royal), var(--shadow-lg);
  }
  .hero-caption { display: none; }
  .hero-dock { left: var(--hero-edge); right: var(--hero-edge); width: auto; transform: none; bottom: var(--spacing-3); justify-content: flex-start; }
  .hero-slideshow .hero-title,
  .hero-slideshow h1 { font-size: clamp(var(--text-2xl), 7.4vw, var(--text-3xl)) !important; }
  .hero-slideshow .hero-subtitle,
  .hero-slideshow .container p:not(.hero-eyebrow) { font-size: var(--text-sm) !important; }
  .hero-slideshow .hero-badge,
  .hero-slideshow .hero-badge-item { font-size: 0.66rem; padding: var(--spacing-1) var(--spacing-2-5); }
}

@media (max-width: 420px) {
  .hero-dots { display: none; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-layer,
  .hero-bg-layer.is-active,
  .hero-arch-layer,
  .hero-arch-layer.is-active { animation: none !important; transform: none !important; transition: opacity 200ms linear !important; }
  .hero-arch,
  .hero-slideshow > .container { animation: none !important; }
  .hero-slideshow .hero-eyebrow,
  .hero-slideshow .hero-title,
  .hero-slideshow h1,
  .hero-slideshow .hero-subtitle,
  .hero-slideshow p,
  .hero-slideshow .hero-badges,
  .hero-caption.is-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-slideshow .hero-title::after,
  .hero-slideshow h1::after { animation: none !important; width: 64px; }
  .hero-progress-bar { transition: none !important; }
}