/* Property-site maps (sites/controllers/map_controller.js, sections/_location).
   The controller sets --map-* from the style's palette (MapStyle::Palette) once the map loads; the fallbacks
   below are the page's own tokens, so the pins and cards read correctly even before that. Cards and controls
   use the site's typography; the map labels themselves are drawn by MapLibre. */

.location {
  --map-accent: var(--color-accent);
  --map-accent-ink: var(--color-accent-contrast, #fff);
  --map-marker: var(--color-surface, #fff);
  --map-marker-ink: var(--color-text);
  --map-marker-ring: var(--color-accent);
  --map-land: var(--color-bg-alt);
  --map-label: var(--color-text);
  --map-label-muted: var(--color-muted);
}

/* the stage: a quiet frame that matches the band, never a white flash */
.location__map { background: var(--map-land); isolation: isolate; }
.location__map .maplibregl-canvas { outline: none; }
.location__map .maplibregl-canvas:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.location.is-loaded .location__fallback { display: none; }

/* no-JS / no-WebGL fallback: the address on a soft street grid, with a way out to Google Maps */
.location__fallback { gap: 0.6rem; justify-items: center; }
.location__fallback p { margin: 0; }
.location__fallback-pin { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-contrast, #fff); box-shadow: 0 0 0 4px var(--color-surface, #fff), 0 6px 18px rgba(0, 0, 0, 0.18); font-size: 1.05rem; }
.location__fallback-address { font-family: var(--font-display); font-size: 1.15rem; max-width: 22ch; text-wrap: balance; }

/* markers ----------------------------------------------------------------------------------------- */
.map-pin { display: grid; place-items: center; padding: 0; border: 0; font: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.map-pin :is(i, svg) { font-size: 0.95em; }

/* the house: the accent, ringed in the marker surface, with a slow pulse */
.map-pin--home { position: relative; width: 44px; height: 44px; z-index: 2; cursor: default; }
.map-pin--home .map-pin__body { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--map-accent); color: var(--map-accent-ink); font-size: 17px;
  box-shadow: 0 0 0 3px var(--map-marker), 0 0 0 4.5px var(--map-marker-ring), 0 8px 18px rgba(0, 0, 0, 0.28); }
.map-pin__pulse { position: absolute; inset: 2px; border-radius: 50%; background: var(--map-accent); opacity: 0; animation: map-pulse 2.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
.map-pin__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--map-marker-ring); opacity: 0.6; }
@keyframes map-pulse {
  0% { transform: scale(1); opacity: 0.38; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

/* places: a small disc in the marker surface with the category icon (or the school's logo) */
.map-pin--place { width: 32px; height: 32px; border-radius: 50%; background: var(--map-marker); color: var(--map-marker-ink); font-size: 13px;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--map-marker-ink) 22%, transparent), 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.map-pin--logo { overflow: hidden; background: #fff; }
.map-pin--logo img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; }
.map-pin--place:hover, .map-pin--place:focus-visible, .map-pin--place.is-active {
  transform: scale(1.18); background: var(--map-accent); color: var(--map-accent-ink); z-index: 3;
  box-shadow: 0 0 0 2px var(--map-marker), 0 0 0 3.5px var(--map-marker-ring), 0 6px 16px rgba(0, 0, 0, 0.28); }
.map-pin--logo:is(:hover, :focus-visible, .is-active) { background: #fff; }
.map-pin--place:focus-visible { outline: none; }
.maplibregl-marker:has(.is-active, :hover, :focus-visible) { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .map-pin__pulse { animation: none; opacity: 0.18; transform: scale(1.55); }
  .map-pin--place { transition: none; }
}

/* hover / tap cards in the site's typography --------------------------------------------------------- */
.map-card-popup { z-index: 4; }
.map-card-popup .maplibregl-popup-content { padding: 0.85rem 1rem 0.9rem; border-radius: var(--radius-md, 6px); background: var(--color-surface, #fff);
  color: var(--color-text); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent); }
.map-card-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .map-card-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.map-card-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--color-surface, #fff); }
.map-card-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip, .map-card-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.map-card-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--color-surface, #fff); }
.map-card-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--color-surface, #fff); }
.map-card-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--color-surface, #fff); }
.map-card { display: grid; gap: 0.2rem; min-width: 11rem; font-family: var(--font-body); }
.map-card p { margin: 0; }
.map-card__kicker { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.map-card__name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; color: var(--color-text); text-wrap: balance; }
.map-card__meta, .map-card__distance { font-family: var(--font-ui); font-size: 0.84rem; color: var(--color-muted); }
.map-card__link { margin-top: 0.35rem; justify-self: start; font-family: var(--font-ui); font-size: 0.84rem; font-weight: 600; color: var(--color-text); text-underline-offset: 0.25em; }
.map-card__link::after { content: " \2197"; }

/* the list beside the map follows the map: the hovered place, and the rows of the active layer */
.place-highlight { position: relative; cursor: pointer; transition: background-color 160ms ease; }
.place-highlight::before { content: ""; position: absolute; left: -0.75rem; top: 0.7rem; bottom: 0.7rem; width: 2px; border-radius: 2px; background: var(--color-accent); opacity: 0; transition: opacity 160ms ease; }
.place-highlight.is-active::before, .place-highlight.is-current::before { opacity: 1; }
.place-highlight.is-active .place-highlight__name { text-decoration: underline; text-underline-offset: 0.25em; }
@media (prefers-reduced-motion: reduce) { .place-highlight, .place-highlight::before { transition: none; } }

/* controls and attribution in the site's UI font (doubled class: maplibre-gl.css loads later) ------- */
.location .location__map .maplibregl-ctrl-group { border-radius: var(--radius-sm, 4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); background: var(--color-surface, #fff); }
.location .location__map .maplibregl-ctrl-group button + button { border-top-color: var(--color-rule); }
.location .location__map .maplibregl-ctrl-attrib { font: 0.68rem/1.4 var(--font-ui); background: color-mix(in srgb, var(--map-land) 82%, transparent); color: var(--map-label-muted); }
.location .location__map .maplibregl-ctrl-attrib a { color: inherit; }
.location .location__map .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--color-surface, #fff); color: var(--color-text); }
.location .location__map .maplibregl-cooperative-gesture-screen { font: 500 0.95rem/1.4 var(--font-ui); background: color-mix(in srgb, var(--color-dark, #111) 62%, transparent); }

/* maps on a dark band: controls and cards follow the band */
.location[data-map-scheme="dark"] .location__map .maplibregl-ctrl-group { background: color-mix(in srgb, var(--map-land), #fff 14%); }
.location[data-map-scheme="dark"] .location__map .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.1); }

/* fullscreen: the whole map area (layer chips, map, Street View) on the band's colour */
.location__map-area:fullscreen, .location__map-area.maplibregl-pseudo-fullscreen {
  display: flex; flex-direction: column; gap: 0; padding: clamp(0.75rem, 2vw, 1.5rem); background: var(--color-bg); color: var(--color-text); }
.location__map-area.maplibregl-pseudo-fullscreen { position: fixed; inset: 0; z-index: 1000; }
.location__map-area:is(:fullscreen, .maplibregl-pseudo-fullscreen) .location__stage { flex: 1; min-height: 0; }
.location__map-area:is(:fullscreen, .maplibregl-pseudo-fullscreen) .location__map { height: 100%; }
.location__map-area:is(:fullscreen, .maplibregl-pseudo-fullscreen) .location__actions { display: none; }

@media print {
  .map-card-popup, .maplibregl-control-container { display: none !important; }
}