/* Map only — everything else on this page is styled with Tailwind utilities.
   The map's size/positioning lives here (not in Tailwind) so the container
   always has a definite height for Mapbox to render into. */

.map-container {
  position: relative;
  height: 250px;
  width: 100%;
}

.map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

/* Mapbox popup */
.mapboxgl-popup-content {
  font-family: Arial, sans-serif;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.mapboxgl-popup-content h4 {
  margin: 0 0 5px;
  font-size: 18px;
}

.mapboxgl-popup-content p {
  margin: 0;
  font-size: 14px;
}

@media (min-width: 1024px) {
  .map-container {
    height: 600px;
    overflow: hidden;
  }
}