/* =========================================================
   Homepage hero — clickable buildings on the town map
   The buildings are already drawn on the map, so nothing
   shows on load. Hovering (or keyboard-focusing) a building:
     1. spotlights it (rest of the map dims, building glows)
     2. pops up its exterior photo + "Click here to go to…"
   Clicking goes to that building's page.

   Each hotspot / preview gets its position from inline vars:
     --x, --y  top-left corner of the building (% of map)
     --w, --h  size of the building (% of map)
========================================================= */

/* ---------- hotspot layer ----------
   overflow:hidden keeps the spotlight's dimming shadow
   inside the map instead of spilling over the page. */
.map-spots {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 3;
}

.map-spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 14px;
  border: 3px solid transparent;
  cursor: pointer;
  /* the huge spread shadow is the "dim everything else" layer */
  box-shadow: 0 0 0 200vmax rgba(10, 20, 17, 0);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.map-spot:hover,
.map-spot:focus-visible {
  z-index: 2;
  outline: none;
  border-color: var(--gold-light);
  backdrop-filter: brightness(1.18) saturate(1.12);
  -webkit-backdrop-filter: brightness(1.18) saturate(1.12);
  box-shadow:
    0 0 0 200vmax rgba(10, 20, 17, 0.5),          /* dim the rest of the map */
    0 0 0 5px rgba(228, 199, 122, 0.35),           /* soft gold ring */
    0 0 34px 8px rgba(228, 199, 122, 0.55),        /* outer glow */
    inset 0 0 26px 4px rgba(255, 236, 180, 0.35);  /* warm inner glow */
  animation: map-spot-glow 1.8s ease-in-out 0.3s infinite alternate;
}

@keyframes map-spot-glow {
  to { border-color: #fff3cf; }
}

/* ---------- preview layer ---------- */
.map-previews {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* never blocks clicks on the hotspots */
  z-index: 20;
}

.map-preview {
  --gap: 14px;
  position: absolute;
  /* centred right on top of the hovered building */
  left: calc(var(--x) + var(--w) / 2);
  top: calc(var(--y) + var(--h) / 2);
  --tx: -50%;
  --ty: -50%;
  width: clamp(170px, 24vw, 340px);
  border-radius: 14px;
  overflow: visible;
  background: var(--spruce);
  border: 3px solid var(--gold-light);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--tx), var(--ty)) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.map-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 11px 11px 0 0;
}

.map-preview-caption {
  display: block;
  padding: 0.55em 0.9em 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.78rem, 1.15vw, 1.02rem);
  line-height: 1.3;
  color: var(--cream);
  text-align: center;
}

/* Gift Shop: no photo, just the message */
.map-preview--text { width: auto; white-space: nowrap; border-radius: 999px; }
.map-preview--text .map-preview-caption { padding: 0.55em 1.2em; }

/* building at the far left edge (Post Office): line the photo up
   with the building's left side so it doesn't run off the map */
.map-preview--start { left: var(--x); --tx: 0%; }

/* ---------- show the preview for the hovered building ---------- */
.hero-map-bg:has(.map-spot[data-spot="post"]:is(:hover, :focus-visible))     .map-preview[data-spot="post"],
.hero-map-bg:has(.map-spot[data-spot="radio"]:is(:hover, :focus-visible))    .map-preview[data-spot="radio"],
.hero-map-bg:has(.map-spot[data-spot="library"]:is(:hover, :focus-visible))  .map-preview[data-spot="library"],
.hero-map-bg:has(.map-spot[data-spot="hall"]:is(:hover, :focus-visible))     .map-preview[data-spot="hall"],
.hero-map-bg:has(.map-spot[data-spot="gift"]:is(:hover, :focus-visible))     .map-preview[data-spot="gift"],
.hero-map-bg:has(.map-spot[data-spot="queenies"]:is(:hover, :focus-visible)) .map-preview[data-spot="queenies"] {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tx), var(--ty)) scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* ---------- small screens / touch ---------- */
@media (max-width: 576px) {
  .map-spot { border-width: 2px; border-radius: 8px; }
  .map-preview { --gap: 8px; border-width: 2px; border-radius: 10px; }
  .map-preview img { border-radius: 8px 8px 0 0; }
}

/* No hover on touch screens — a tap just goes straight to the page */
@media (hover: none) {
  .map-previews { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .map-spot:hover,
  .map-spot:focus-visible { animation: none; }
}