/* Responsive map container for the GDS data story page
   - Uses viewport-based heights on small screens
   - Uses an aspect ratio for larger screens for a stable layout
   - Ensures the Mapbox canvas fills the container
   - Styles the small timeline controls above the map */

#map {
  width: 100%;
  /* default for medium/small devices: give substantial viewport height */
  min-height: 45vh;
  max-height: 80vh;
  height: auto; /* let aspect-ratio/viewport rules drive height */
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  background-color: #f6f6f6;
  box-shadow: 0 6px 18px rgba(27,31,35,0.08);
}

/* Make sure Mapbox internals fill the container */
#map .mapboxgl-canvas,
#map .mapboxgl-map,
#map > .mapboxgl-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* On larger screens prefer a 16:9 aspect ratio to avoid overly tall maps */
@media (min-width: 768px) {
  #map {
    aspect-ratio: 16 / 9;
    min-height: auto;
    max-height: 65vh;
  }
}

@media (min-width: 1200px) {
  #map {
    max-height: 70vh;
  }
}

/* Tighten the map height a bit for very small phones */
@media (max-width: 400px) {
  #map { min-height: 40vh; }
}

/* Timeline UI above the map (the play/pause and slider controls) */
#ui {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}


/* Play/pause button - base styling; Bootstrap classes will enhance this if present */
/* #ui button#play-pause {
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  border: none;
} */

/* Improve accessibility spacing for the step label and slider */
/* Keep the month label a fixed width so the slider doesn't shift horizontally */
#step-label { font-weight: 600; margin-left: 0.05rem; margin-right: 0.25rem; min-width: 135px; text-align: left; }

/* By default allow the slider to grow but constrain on large screens */
#step-slider { flex: 1 1 220px; min-width: 120px; }

/* On desktop, don't let the slider expand to full width; keep it a reasonable size */
@media (min-width: 768px) {
  #ui {
    align-items: center;
    /* gap: 0.75rem; */
    justify-content: flex-start;
  }
  #step-slider { flex: 0 0 360px; max-width: 520px; }
}

/* If you want a full-bleed map in the future, move the #map out of .dvp-body-content or override
   the container padding for a full-width section. */