/* ----------------------------------------------------------------------------
   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: 8rem;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: 2rem;
  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: 0.1rem solid var(--color-brand);
  box-shadow: var(--shadow-2);
}
.btn-primary svg { width: 2.4rem; height: 2.4rem; }
.btn-primary:active { transform: scale(0.96); box-shadow: var(--shadow-1); }

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

/* ── SVG Hotspots ────────────────────────────────────────────────── */
.hotspots { pointer-events: auto; }
.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;
  transition: opacity var(--t-base) var(--ease-out);
}
.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 0.15rem 0.2rem rgba(0, 0, 0, 0.30));
  transition: r var(--t-fast) var(--ease-out);
}
.hotspot__pin {
  fill: var(--cat-color, #B89149);
  stroke: #ffffff;
  stroke-width: 3;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.28));
}
.hotspot__pin-icon {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.hotspot__label {
  font-family: var(--font-label), sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  fill: #232830;
  paint-order: stroke fill;
  stroke: #fffef4;
  stroke-width: 4;
  stroke-linejoin: round;
  pointer-events: auto;
  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; }
.hotspot:active .hotspot__pin { transform: translateY(-0.1rem); }

/* ── Category filter — basemap stays bright, non-matching pins fade
 *   almost out, matching pins pulse + grow + label is always shown. */
.app[data-filter-active="true"] .hotspot { opacity: 0.06; }
.app[data-filter-active="true"] .hotspot { pointer-events: none; }
.app[data-filter-active="true"] .hotspot[data-filter-match="false"] * {
  pointer-events: none !important;
}
.app[data-filter-active="true"] .hotspot[data-filter-match="true"] {
  opacity: 1;
  pointer-events: auto;
}
.app[data-filter-active="true"] .hotspot[data-filter-match="true"] .hotspot__dot {
  r: 16;
  stroke-width: 4;
}
.app[data-filter-active="true"] .hotspot[data-filter-match="true"] .hotspot__pin {
  stroke-width: 4;
}
.app[data-filter-active="true"] .hotspot[data-filter-match="true"] .hotspot__halo {
  r: 34;
  opacity: 0.55;
  animation: hotspot-pulse 1600ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.app[data-filter-active="true"] .hotspot[data-filter-match="true"] .hotspot__ring {
  opacity: 0.9;
  stroke-width: 3.2;
}
.app[data-filter-active="true"] .hotspot[data-filter-match="true"] .hotspot__label {
  opacity: 1;
}
@keyframes hotspot-pulse {
  0%   { transform: scale(0.7); opacity: 0.65; }
  100% { transform: scale(1.6); opacity: 0;    }
}

.hotspot[data-selected="true"] .hotspot__dot { r: 14; }
.hotspot[data-selected="true"] .hotspot__pin { transform: translateY(-0.1rem); }
.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 0.3rem 0.5rem rgba(0, 0, 0, 0.30));
}
.you-are-here__pin-dot { fill: #ffffff; }
.you-are-here__label-bg {
  fill: var(--cat-yourehere, #6F4E7C);
  stroke: #ffffff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.25));
}
.you-are-here__label {
  font-family: var(--font-label), sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: #ffffff;
  pointer-events: none;
}

@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 {
  /* absolute (anchored to #kiosk-stage) — see note in layout.css .attract */
  position: absolute;
  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: 92rem;
  max-width: calc(100vw - 8rem);
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: 0 3rem 6rem rgba(0,0,0,0.30);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-5);
  transform: scale(0.94) translateY(2rem);
  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: 36rem;
  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: 1.4rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.poi-modal__swatch {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--cat-color, var(--color-brand-gold));
}
.poi-modal__name {
  font-family: var(--font-serif);
  font-size: 4.4rem;
  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: 2.2rem;
  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: 1.4rem;
  right: 1.4rem;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 0.1rem 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: 2.6rem; height: 2.6rem; }

html[data-stage-mode="responsive"] .poi-modal__card {
  width: min(92rem, calc(100vw - 2.8rem));
  padding: clamp(1.8rem, 4vw, 2.8rem);
}

html[data-stage-mode="responsive"] .poi-modal__image {
  height: clamp(22rem, 34vh, 32rem);
}

/* ── 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: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 2;
  pointer-events: auto;
}
.slider__dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 254, 244, 0.45);
  box-shadow: 0 0.1rem 0.3rem 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: 2.8rem;
  border-radius: 99.9rem;
  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 {
  /* absolute (anchored to #kiosk-stage) — see note in layout.css .attract */
  position: absolute;
  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;
}

/* Full-bleed media fills the entire landscape surface. */
.detail-view__hero {
  position: absolute;
  inset: 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;
}
/* Darken toward the right so the floating panel stays legible over any photo. */
.detail-view__hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 32%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 28%, rgba(0,0,0,0.30) 100%);
  pointer-events: none;
}

/* Floating translucent info panel — right-anchored, vertically centred,
 * and clear of the side-mounted Home (left) / Back (right) nav circles. */
.detail-view__panel {
  position: absolute;
  top: 50%;
  right: var(--nav-gutter);
  transform: translateY(-50%);
  width: 66rem;
  max-width: calc(100% - var(--nav-gutter) * 2);
  max-height: calc(100% - 12rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7);
  border-radius: var(--r-xl);
  /* Solid-ish translucent fill (no backdrop-filter — too costly on the
   * 4 GB / Chrome 114 kiosk); the hero-overlay already darkens this side,
   * so the panel stays legible over any photo. */
  background: rgba(16, 20, 26, 0.82);
  border: 0.1rem solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-3);
  color: #fff;
}
.detail-view__category-badge {
  font-family: var(--font-label);
  font-size: 2rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-brand-gold);
}
.detail-view__name {
  font-family: var(--font-serif);
  font-size: 5.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.35);
}
.detail-view__tagline {
  font-family: var(--font-sans);
  font-size: 2.6rem;
  color: rgba(255,255,255,0.9);
  margin: 0;
  line-height: 1.35;
}

.detail-view__body {
  display: grid;
  gap: var(--s-5);
}
.detail-view__copy {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  margin: 0;
}
.detail-view__copy:empty { display: none; }
.detail-view__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 8px;
  font-family: var(--font-label);
  font-size: 2.1rem;
  color: #fff;
  margin: 0;
}
.detail-view__facts dt {
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.8rem;
  font-weight: 600;
  align-self: center;
}
.detail-view__facts dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  color: #fff;
}

/* Responsive (laptop/preview) — keep the full-bleed + floating-panel shape,
 * just make the panel and type fluid so it fits narrower landscape windows. */
html[data-stage-mode="responsive"] .detail-view__panel {
  right: clamp(1.6rem, 4vw, 13rem);
  width: clamp(28rem, 42vw, 66rem);
  max-width: calc(100% - 3.2rem);
  max-height: calc(100% - 6.4rem);
  padding: clamp(2rem, 4vw, 4rem);
  gap: clamp(1.2rem, 2vh, 1.8rem);
}

html[data-stage-mode="responsive"] .detail-view__category-badge {
  font-size: clamp(1.2rem, 1.6vw, 2rem);
}

html[data-stage-mode="responsive"] .detail-view__name {
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: 1.02;
}

html[data-stage-mode="responsive"] .detail-view__tagline {
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  line-height: 1.3;
}

html[data-stage-mode="responsive"] .detail-view__copy {
  font-size: clamp(1.4rem, 1.8vw, 2.2rem);
  line-height: 1.48;
}

html[data-stage-mode="responsive"] .detail-view__facts {
  column-gap: clamp(1rem, 2.4vw, 2rem);
  font-size: clamp(1.4rem, 1.8vw, 2.1rem);
}

html[data-stage-mode="responsive"] .detail-view__facts dt {
  font-size: clamp(1.2rem, 1.5vw, 1.8rem);
  line-height: 1.1;
}