/* ----------------------------------------------------------------------------
   Components
   - SVG hotspots, "You Are Here" pin
   - POI preview modal — CENTRED (not bottom-sheet) so action buttons
     land in the comfort tap band
   - Detail landing view — no top header; back button is a side-mounted
     floating circle (.nav-back, see layout.css)
   - Buttons
   ----------------------------------------------------------------------------*/

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary {
  height: 80px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.btn-primary {
  background: var(--color-brand);
  color: #fff;
  border: 1px solid var(--color-brand);
  box-shadow: var(--shadow-2);
}
.btn-primary svg { width: 24px; height: 24px; }
.btn-primary:active { transform: scale(0.96); box-shadow: var(--shadow-1); }

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}
.btn-secondary:active { transform: scale(0.96); background: var(--color-surface-soft); }

/* ── SVG Hotspots ────────────────────────────────────────────────── */
.hotspots { pointer-events: none; }
.hotspot {
  cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--t-base) var(--ease-out);
}
.hotspot__halo {
  fill: var(--cat-color, #B89149);
  opacity: 0.18;
  transform-box: fill-box;
  transform-origin: center;
}
.hotspot__ring {
  fill: none;
  stroke: var(--cat-color, #B89149);
  stroke-width: 2.5;
  opacity: 0.6;
}
.hotspot__dot {
  fill: var(--cat-color, #B89149);
  stroke: #ffffff;
  stroke-width: 3;
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.30));
  transition: r var(--t-fast) var(--ease-out);
}
.hotspot__label {
  font-family: var(--font-label), sans-serif;
  font-size: 16px;
  fill: var(--color-ink, #45443F);
  paint-order: stroke fill;
  stroke: #fffef4;
  stroke-width: 4;
  stroke-linejoin: round;
  pointer-events: none;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.hotspot:active .hotspot__dot { r: 14; }
.hotspot:active .hotspot__halo { opacity: 0.34; }

.app[data-filter-active="true"] .hotspot { opacity: 0.15; }
.app[data-filter-active="true"] .hotspot[data-filter-match="true"] { opacity: 1; }
.app[data-filter-active="true"] .hotspot[data-filter-match="true"] .hotspot__label { opacity: 1; }

.hotspot[data-selected="true"] .hotspot__dot { r: 14; }
.hotspot[data-selected="true"] .hotspot__halo { opacity: 0.45; }
.hotspot[data-selected="true"] .hotspot__label { opacity: 1; }

/* ── "You Are Here" pin ──────────────────────────────────────────── */
.you-are-here { pointer-events: none; }
.you-are-here__pulse {
  fill: var(--cat-yourehere, #6F4E7C);
  opacity: 0.36;
  transform-origin: center;
  transform-box: fill-box;
  animation: yah-pulse 1900ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.you-are-here__pin {
  fill: var(--cat-yourehere, #6F4E7C);
  stroke: #ffffff;
  stroke-width: 3;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.30));
}
.you-are-here__pin-dot { fill: #ffffff; }

@keyframes yah-pulse {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   POI PREVIEW MODAL — centred, sits in the comfort tap band
   Card centred vertically; action buttons land near 70% from top → reachable.
   ────────────────────────────────────────────────────────────────────── */
.poi-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--t-slow);
}
.poi-modal[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}
.poi-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 30, 15, 0.45);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.poi-modal[data-open="true"] .poi-modal__backdrop { opacity: 1; }

.poi-modal__card {
  position: relative;
  width: 920px;
  max-width: calc(100vw - 80px);
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 60px rgba(0,0,0,0.30);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-5);
  transform: scale(0.94) translateY(20px);
  opacity: 0;
  transition:
    transform var(--t-slow) var(--ease-out),
    opacity var(--t-slow) var(--ease-out);
}
.poi-modal[data-open="true"] .poi-modal__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.poi-modal__image {
  width: 100%;
  height: 360px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg,
      var(--cat-color, #B89149) 0%,
      color-mix(in srgb, var(--cat-color, #B89149) 60%, #fff) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.poi-modal__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.12), transparent 70%);
  pointer-events: none;
}
.poi-modal__body { display: grid; gap: var(--s-3); }
.poi-modal__category {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.poi-modal__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cat-color, var(--color-brand-gold));
}
.poi-modal__name {
  font-family: var(--font-serif);
  font-size: 44px;
  color: var(--color-brand);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.05;
}
.poi-modal__tagline {
  font-family: var(--font-sans);
  font-size: 22px;
  color: var(--color-ink);
  line-height: 1.4;
  margin: 0;
  max-width: 92%;
}
.poi-modal__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.poi-modal__actions .btn-primary { width: 100%; }

/* Small × close in the top-right corner of the modal card (replaces the
 * old bottom Close button, which fought the Explore CTA for attention). */
.poi-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  cursor: pointer;
  z-index: 2;
  transition: transform var(--t-fast) var(--ease-out);
}
.poi-modal__close:active { transform: scale(0.92); }
.poi-modal__close svg { width: 26px; height: 26px; }

/* ── Media (image OR video) inside placeholders ──────────────────── */
.media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────
   UNIVERSAL SLIDER (js/slider.js)
   Used by attract carousel, POI modal hero, detail view hero, and any
   future gallery. Crossfade-only — transform/opacity for perf. No chrome
   when slider has a single slide.
   ────────────────────────────────────────────────────────────────────── */
.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider__track {
  position: absolute;
  inset: 0;
}
.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
  pointer-events: none;
}
.slider__slide[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
}
.slider__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dot pagination — only rendered when slides > 1. Sits in the comfort
 * band (inside the surface), gold dots with a subtle cream backdrop. */
.slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
  pointer-events: auto;
}
.slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 254, 244, 0.45);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
  transition:
    width var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}
.slider__dot[data-active="true"] {
  width: 28px;
  border-radius: 999px;
  background: var(--color-brand-gold, #B89149);
}
.slider--single .slider__dots { display: none; }

/* ──────────────────────────────────────────────────────────────────────
   DETAIL LANDING VIEW — full-screen, no top header (back button is the
   side-mounted .nav-back floating circle).
   ────────────────────────────────────────────────────────────────────── */
.detail-view {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  transition:
    transform var(--t-slow) var(--ease-out),
    visibility 0s linear var(--t-slow);
}
.detail-view[data-open="true"] {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition:
    transform var(--t-slow) var(--ease-out),
    visibility 0s;
}

.detail-view__hero {
  position: relative;
  height: 880px;       /* top ~46% of a 1920 screen — view zone only */
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-deep);
}
.detail-view__hero-image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      var(--cat-color, var(--color-brand-gold)) 0%,
      color-mix(in srgb, var(--cat-color, var(--color-brand-gold)) 60%, var(--color-brand)) 100%);
  background-size: cover;
  background-position: center;
}
.detail-view__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.62) 100%);
  pointer-events: none;
}
.detail-view__hero-content {
  position: absolute;
  /* Reserve a nav-gutter on both sides so the Home (left) and Back (right)
   * side-mounted circles never overlap the title / tagline. */
  left:   calc(var(--s-7) + var(--nav-gutter));
  right:  calc(var(--s-7) + var(--nav-gutter));
  bottom: var(--s-7);
  color: #fff;
  display: grid;
  gap: var(--s-3);
}
.detail-view__category-badge {
  font-family: var(--font-label);
  font-size: 16px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand-gold);
}
.detail-view__name {
  font-family: var(--font-serif);
  font-size: 68px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.0;
  text-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.detail-view__tagline {
  font-family: var(--font-sans);
  font-size: 26px;
  color: rgba(255,255,255,0.9);
  margin: 0;
  max-width: 80%;
  line-height: 1.35;
}

.detail-view__body {
  flex: 1;
  /* Same gutter-aware padding as the hero — keep clear of the nav circles. */
  padding:
    var(--s-7)
    calc(var(--s-7) + var(--nav-gutter))
    var(--h-footer)
    calc(var(--s-7) + var(--nav-gutter));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-view__copy {
  font-family: var(--font-sans);
  font-size: 26px;
  color: var(--color-ink);
  line-height: 1.55;
  margin: 0 0 var(--s-6) 0;
  max-width: 900px;
}
.detail-view__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-6);
  row-gap: var(--s-3);
  font-family: var(--font-label);
  font-size: 20px;
  color: var(--color-ink);
  margin: 0;
}
.detail-view__facts dt {
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-size: 14px;
}
.detail-view__facts dd { margin: 0; }