/* ═══════════════════════════════════════════════════════
   PSPR UPGRADES v5.0 — Shared CSS for all PSPR pages
   Load with: <link rel="stylesheet" href="/css/pspr-upgrades.css" media="print" onload="this.media='all'">

   What this file provides:
   - Scroll reveal animations (.reveal)
   - Film strip carousel (gallery-section, film-strip, etc.)
   - Lightbox overlay (.lightbox, .lb-close, .lb-nav, .lb-counter)
   - Exit intent popup (.exit-overlay, .exit-popup) — base styles
   - Micro-interactions (card hover, button press, FAQ icon)
   - Discover Series banner and grid
   - Internal link strip
   - Itinerary / what-to-bring card components

   Note: Pages define their own inline <style> blocks for core
   layout, typography, and design tokens. This file provides
   shared enhancement layers only. Inline page CSS always wins
   the cascade when conflicts exist (inline appears after this
   link tag in the document head).

   REMOVED from earlier versions:
   - Duplicate film strip block (caused .strip-btn { display:none }
     override that hid the overlay nav buttons on all pages).
   - .lightbox-overlay / .lightbox-close / .lightbox-nav — replaced
     with .lightbox / .lb-close / .lb-nav matching the v3.9 pattern.
   - Calendar skeleton — no page uses #fh-calendar anymore.
   ═══════════════════════════════════════════════════════ */


/* ─── SCROLL REVEAL ─────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ─── FILM STRIP GALLERY ────────────────────────────── */
.gallery-section {
  background: var(--night, #0A1F14);
  padding: 28px 0;
  overflow: hidden;
}
.gallery-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 14px;
}

/* Wrap provides positioning context for overlay buttons
   and clips the overflow */
.film-strip-wrap {
  position: relative;
  overflow: hidden;
}

/* Fade edges on desktop */
@media (min-width: 768px) {
  .film-strip-wrap::before,
  .film-strip-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
  }
  .film-strip-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--night, #0A1F14), transparent);
  }
  .film-strip-wrap::after {
    right: 0;
    background: linear-gradient(-90deg, var(--night, #0A1F14), transparent);
  }
}

.film-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth; /* for drag/swipe — programmatic uses auto */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 20px;
  cursor: grab;
}
.film-strip::-webkit-scrollbar { display: none; }
.film-strip.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
@media (min-width: 768px) {
  .film-strip { padding: 0 32px; }
}

.film-item {
  flex: 0 0 auto;
  width: 280px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  background: var(--forest, #0D4F3C);
}
@media (min-width: 768px) { .film-item { width: 360px; } }

.film-item.portrait {
  aspect-ratio: 3/4;
  width: 210px;
}
@media (min-width: 768px) { .film-item.portrait { width: 270px; } }

.film-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, filter .35s ease;
}
.film-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,31,20,0);
  transition: background .3s ease;
  pointer-events: none;
}
.film-zoom svg {
  color: #fff;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .3s ease, transform .3s ease;
}
@media (hover: hover) {
  .film-item:hover img { transform: scale(1.06); filter: brightness(.72); }
  .film-item:hover .film-zoom { background: rgba(10,31,20,.38); }
  .film-item:hover .film-zoom svg { opacity: 1; transform: scale(1); }
}
.film-item:focus-visible {
  outline: 3px solid var(--amber, #E8A040);
  outline-offset: 2px;
}

/* Overlay nav buttons — absolute-positioned inside film-strip-wrap */
.strip-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10,31,20,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 10;
  flex-shrink: 0;
}
.strip-btn:hover { background: rgba(10,31,20,.8); }
.strip-btn#stripPrev { left: 8px; }
.strip-btn#stripNext { right: 8px; }
@media (min-width: 768px) {
  .strip-btn#stripPrev { left: 16px; }
  .strip-btn#stripNext { right: 16px; }
}

/* Dots row — below film-strip-wrap, dots only, no buttons */
.strip-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 0 20px;
  flex-wrap: wrap;
}
.strip-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;          /* REQUIRED — prevents dot overflow clipping */
  justify-content: center;
}
.strip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transition: background .2s, transform .2s;
  cursor: pointer;
  border: none;
  padding: 0;
}
.strip-dot.active {
  background: var(--amber, #E8A040);
  transform: scale(1.3);
}


/* ─── LIGHTBOX ──────────────────────────────────────── */
/* Class names match pspr-upgrades.js v5.0.
   .lightbox is the overlay. .lb-* are the controls. */
.lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 10001;
}
.lb-close:hover { background: rgba(255,255,255,.24); }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 10001;
}
.lb-nav:hover { background: rgba(255,255,255,.24); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

.lb-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-size: 14px;
  font-family: var(--sans, system-ui, sans-serif);
}

#lbImg {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
}

@media (max-width: 767px) {
  .lb-nav { display: none; }
}


/* ─── EXIT INTENT ───────────────────────────────────── */
/* Base styles only — pages define their own variants inline.
   These provide fallback for any page that does not inline them. */
.exit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10,31,20,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(6px);
}
.exit-overlay.show,
.exit-overlay.active { display: flex; }

.exit-popup {
  background: var(--cream, #FBF5EB);
  border-radius: var(--radius-lg, 32px);
  max-width: 440px;
  width: 100%;
  padding: 40px 36px;
  text-align: center;
  position: relative;
  transform: translateY(24px) scale(0.96);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 32px 80px rgba(10,31,20,.25);
}
.exit-overlay.show .exit-popup,
.exit-overlay.active .exit-popup { transform: translateY(0) scale(1); }

.exit-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border, rgba(10,31,20,.10));
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #5C6B65);
  transition: background .2s;
}
.exit-popup-close:hover { background: var(--border-mid, rgba(10,31,20,.15)); }

.exit-popup h3 {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 600;
  color: var(--ink, #12120E);
  line-height: 1.15;
  margin-bottom: 12px;
}
.exit-popup p {
  color: var(--muted, #5C6B65);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.exit-dismiss {
  color: var(--muted, #5C6B65);
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--sans, system-ui, sans-serif);
  padding: 4px 8px;
}
.exit-dismiss:hover { text-decoration: underline; }


/* ─── MICRO-INTERACTIONS ────────────────────────────── */
.glass-card,
.tour-card {
  transition: transform .28s cubic-bezier(.16,1,.3,1),
              box-shadow .28s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) {
  .glass-card:hover,
  .tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(10,31,20,.14);
  }
}
.btn { transition: all .2s ease; }
.btn:active { transform: scale(.96); }

.faq-icon { transition: transform .3s cubic-bezier(.16,1,.3,1); display: inline-flex; }
.faq-q[aria-expanded="true"] .faq-icon,
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }


/* ─── DISCOVER SERIES BANNER ────────────────────────── */
.discover-banner {
  background: var(--night, #0A1F14);
  padding: 56px 20px 40px;
  text-align: center;
}
@media (min-width: 768px) { .discover-banner { padding: 72px 32px 48px; } }

.discover-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,160,64,.15);
  border: 1px solid rgba(232,160,64,.35);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 16px;
}
.discover-banner-badge span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber, #E8A040);
}
.discover-banner h3 {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.discover-banner h3 em { font-style: italic; color: var(--amber, #E8A040); }
.discover-banner p {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 24px;
}
.discover-banner-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.discover-banner-trust span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.discover-banner-trust svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--amber, #E8A040);
}
.discover-grid { grid-template-columns: 1fr !important; }
@media (min-width: 480px) { .discover-grid { grid-template-columns: repeat(2,1fr) !important; } }


/* ─── INTERNAL LINK STRIP ───────────────────────────── */
.internal-link-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.internal-link-strip a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--leaf, #1A7A5A);
  background: rgba(26,122,90,.08);
  transition: background .2s, color .2s;
  text-decoration: none;
}
.internal-link-strip a:hover {
  background: rgba(26,122,90,.15);
  color: var(--forest, #0D4F3C);
}


/* ─── ITINERARY / WHAT-TO-BRING CARDS ───────────────── */
.iti-card {
  background: var(--white, #fff);
  border-radius: var(--radius, 20px);
  padding: 24px;
  border: 1px solid var(--border, rgba(10,31,20,.10));
}
.iti-card h4 {
  font-family: var(--serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink, #12120E);
}
.iti-card p { font-size: 14px; color: var(--muted, #5C6B65); line-height: 1.6; }
.bring-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin-top: 16px;
  padding: 0;
}
.bring-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted, #5C6B65);
}
.bring-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--leaf, #1A7A5A);
  flex-shrink: 0;
}
.iti-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) { .iti-cards-grid { grid-template-columns: 1fr; } }


/* ─── TOURS INDEX PAGE UTILITIES ────────────────────── */
.page-header-top { text-align: center; }
.page-header-top .page-header-sub { margin-left: auto; margin-right: auto; }
.page-header-top .btn { margin: 0 auto; }
.proof-strip { justify-content: center; }
.proof-pill { text-align: center; }