/* ===============================================================================
   map.css — public map view
   The map fills the viewport below the fixed nav. Popup styling stays light (the
   USGS tiles are light), unlike the dark site chrome, so popups read clearly.
   =============================================================================== */

.map-wrap {
  position: relative;
  /* Fill the space under the 56px fixed nav. The site footer sits below the map. */
  height: calc(100vh - 56px);
}
#photo-map {
  width: 100%;
  height: 100%;
}

/* Count badge, pinned bottom-left over the map. */
.map-count {
  position: absolute;
  left: 12px;
  bottom: 24px;
  z-index: 500;                 /* above Leaflet panes, below the lightbox (z 400+ is map panes) */
  background: rgba(42, 45, 46, 0.9);
  color: var(--sandstone-light);
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(201, 169, 110, 0.25);
}

/* ---- Popup contents (built in map.js) ---- */
.map-popup { text-align: center; width: 160px; }
.map-popup img {
  width: 160px;
  height: 110px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  margin-bottom: 6px;
}
.map-popup .popup-title {
  font-family: 'Bitter', serif;
  font-size: 0.92rem;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.map-popup button {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--sandstone);
  border: none;
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
}
.map-popup button:hover { background: var(--sandstone-light); }