/* map-dossier — the "good-map" pattern for placing a facility in a location dossier.
   Three composable primitives, themed off each surface's local CSS vars (hard fallbacks):
     .rollimg   — mouse-over image reveal (base sets the box; .rollup overlays on hover)
     .svfacade  — click-to-load live embed facade (defer the 3P until intent)
     .embed3d   — always-on inline embed box (when the embed IS the point)
   Lifted from the bespoke visuals on srvc.gf.cx/transit/. v0.1.0 · 2026-07-13 */

/* ---- always-on inline embed (Street View / 3D aerial iframe, or a fixed image) ---- */
.embed3d {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 10;
  margin: 6px 0;
  border: 1px solid var(--line, #d9d4c8);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-warm, #f4f1ea);
}
.embed3d iframe,
.embed3d img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* ---- mouse-over reveal — base image sets the box; hover image is an EXACT-size overlay ----
   CRUX: the .rollup image must be the same pixel dimensions as the base, so the inset:0
   overlay lands pixel-perfect (no object-fit guesswork). For MAPS, reverse the generic
   default: base = the close-up (pinned hall), .rollup = the wider context → "hover · zoom out". */
.rollimg {
  position: relative;
  display: block;
  width: min(100%, 520px);
  margin: 6px 0;
  border: 1px solid var(--line, #d9d4c8);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-warm, #f4f1ea);
  cursor: help;
}
a.rollimg,
.svfacade {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.rollimg > img {
  display: block;
  width: 100%;
  height: auto;
}
.rollimg > .rollup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .3s ease;
}
.rollimg:hover > .rollup,
.rollimg:focus-within > .rollup {
  opacity: 1;
}
.rollimg .rollhint {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  font: 600 10px/1 var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(20, 20, 22, .7);
  color: #fff;
  padding: 4px 7px;
  border-radius: 4px;
  pointer-events: none;
  transition: opacity .2s;
}
.rollimg:hover .rollhint,
.rollimg:focus-within .rollhint {
  opacity: 0;
}

/* injected facade iframe (by map-dossier.js on click) sits above the hover still */
.svfacade > iframe { z-index: 5; }

@media print {
  .rollimg .rollhint { display: none; }
}