/* Rodol Editorial — projects map (/projects/map/)
 *
 * Map-only styles. The shared Grid ⇄ Map toggle (.props-head /
 * .props-viewtoggle) lives in inner.css so it stays styled on the grid archive
 * too, where map.css is not loaded.
 */

/* ── Map section ───────────────────────────────────────────────────────────── */
/* The section carries the standard .container, so the map lines up with the
   page header, filters and grid (no bespoke width). The map is framed with the
   same hairline border as the single-property location map, square-cornered to
   match the archive cards. */
.props-map-section { margin-top: 40px; }

.props-map-status {
  margin-bottom: 16px;
  color: var(--muted);
  min-height: 16px;
}

.props-map-wrap {
  position: relative;
  /* Explicit stacking context so Leaflet's internal panes (z-index 200-700)
   * stay contained here instead of stacking over the filter popovers. The
   * .reveal transform used to do this by accident, but reduced-motion strips
   * transforms (tokens.css) and would have let the panes escape. */
  z-index: 0;
  width: 100%;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}

.props-map {
  width: 100%;
  height: clamp(460px, 72vh, 820px);
  background: var(--bone-2);
}

/* Map controls (zoom etc.) — square the default rounded corners to match. */
.props-map .gm-style .gmnoprint,
.props-map .gm-style button { border-radius: 0 !important; }

/* Empty + key-missing fallbacks */
.props-map-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 18px 26px;
  color: var(--ink-soft);
  font-size: 14px;
  pointer-events: none;
  box-shadow: 0 16px 50px rgba(15, 15, 15, 0.12);
}
.props-map-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100%;
  padding: 40px;
  text-align: center;
  color: var(--ink-soft);
}

/* ── Popup card ────────────────────────────────────────────────────────────── */
.rh-mappop-container { position: absolute; }

.rh-mappop {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 50px));
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15, 15, 15, 0.22);
  cursor: default;
}
/* Pointer toward the pin */
.rh-mappop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rh-mappop__img {
  position: relative;
  height: 190px;
  background-size: cover;
  /* Top-anchored so the whole building reads instead of a cropped middle slice
     (matches the card grids). */
  background-position: center top;
  background-color: var(--bone-2);
}
.rh-mappop__img--ph {
  background-image: linear-gradient(135deg, var(--forest), var(--forest-deep));
}

.rh-mappop__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rh-mappop__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(15, 15, 15, 0.72);
  color: #fff;
  backdrop-filter: blur(4px);
}
.rh-mappop__badge--sold { background: var(--gold); }

.rh-mappop__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(15, 15, 15, 0.5);
  backdrop-filter: blur(4px);
  transition: background 0.3s var(--ease-out);
}
.rh-mappop__close:hover { background: rgba(15, 15, 15, 0.8); }

.rh-mappop__body { padding: 16px 18px 18px; }
.rh-mappop__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.rh-mappop__meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.rh-mappop__price {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 14px;
}
.rh-mappop__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.rh-mappop__more:hover { gap: 12px; color: var(--gold); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .props-map { height: clamp(380px, 64vh, 620px); }
  .rh-mappop { width: 240px; }
  /* Hide the popup photo on mobile to keep the card compact; keep the status
     chips by letting them flow at the top instead of overlaying the image. */
  .rh-mappop__img {
    height: auto;
    background: none !important;
  }
  .rh-mappop__badges { position: static; padding: 12px 14px 0; }
  .rh-mappop__title { font-size: 19px; }
}

/* ── Leaflet engine (OpenStreetMap basemap) ──────────────────────────────────
 * Used in place of the Google JS API: free, key-less, multi-pin. The popup card
 * (.rh-mappop) is reused; these rules strip Leaflet's default chrome so the card
 * and pins match the brand, and style the cluster bubble + the Google Maps link. */

/* Brand pin (divIcon) — remove Leaflet's default white box/border. */
.rh-leaflet-pin { background: transparent; border: 0; }
.rh-leaflet-pin svg { display: block; filter: drop-shadow(0 4px 6px rgba(15, 15, 15, 0.3)); }

/* Cluster bubble — gold circle + mono count (mirrors the old Google renderer). */
.rh-leaflet-cluster-wrap { background: transparent; }
.rh-leaflet-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(184, 137, 62, 0.92);
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(15, 15, 15, 0.25);
}

/* Square the Leaflet controls + tidy attribution to match the brand. */
.leaflet-container .leaflet-bar { border: 1px solid var(--line); border-radius: 0; }
.leaflet-container .leaflet-bar a { border-radius: 0; color: var(--ink); }
.leaflet-container .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(250, 248, 244, 0.85);
}

/* Popup: drop Leaflet's default chrome and let .rh-mappop be the card. */
.rh-leaflet-pop .leaflet-popup-content-wrapper {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.rh-leaflet-pop .leaflet-popup-content { margin: 0; width: 280px !important; line-height: 1.4; }
.rh-leaflet-pop .leaflet-popup-tip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 0;
  border-left: 0;
  box-shadow: none;
}
/* The Leaflet wrapper positions the card, so neutralise the card's own absolute
   placement + CSS pointer (Leaflet draws its own tip). */
.rh-leaflet-pop .rh-mappop {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
}
.rh-leaflet-pop .rh-mappop::after { display: none; }

/* Secondary "View on Google Maps" link, stacked under the primary CTA. */
.rh-mappop__gmaps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.3s var(--ease-out);
}
.rh-mappop__gmaps:hover { color: var(--ink); }

/* Single-property location map (Leaflet) inside the .pd-location-split layout —
 * replaces the old Google embed; id selector outranks the layout's height:100%. */
.pd-location-split #rh-map {
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 40vw, 460px);
  background: var(--bone-2);
}