/* --- Short landscape (phones rotated: 667×320, 568×320, etc.) -------------
   The header must not consume the whole viewport, and the map must not
   overlap the footer. The page already scrolls (body height:auto above);
   here the chrome is compacted so the map is usable with little scrolling.
   Placed last so its map override wins over the max-width:900 rule. */
@media (orientation: landscape) and (max-height: 500px) {
  header {
    padding: 0.5rem 1rem;
    gap: 0.35rem;
  }

  header h1 {
    font-size: 1.15rem;
  }

  /* Drop the subtitle to reclaim a row; keep "About this data" available as
     a collapsed disclosure. */
  .header-subtitle {
    display: none;
  }

  .header-about {
    font-size: 0.82rem;
  }

  .header-about summary {
    font-size: 0.82rem;
  }

  .header-about p {
    margin-top: 0.35rem;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  /* Column layout (through max-width:1024px, where the fixed shell begins):
     a viewport-relative map height that fits the short screen instead of the
     tall min-height, so the footer follows in flow. Runs to 1024px so the
     901–1024px band is compacted too, not just phone widths. */
  #map {
    flex: 0 0 auto;
    height: 62dvh;
    min-height: 200px;
    max-height: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 1025px) {
  /* Row layout with the fixed shell: the map fills the flex-1 middle row, but
     its min-height:400px floor exceeds that row on a short viewport (≈395px
     at 500px tall), so the map overflowed and the footer overlapped again.
     Drop the floor here so the map fills exactly the space available. */
  #map {
    min-height: 0;
  }
}