/* Tablet (640–1023 px): map on top (45vh), the column below scrolls as one; card is a right panel of 400 px. */
@media (min-width: 640px) and (max-width: 1023px) {
  .app { flex-direction: column; }
  .map { order: 0; flex: none; width: 100%; height: 45vh; }
  .side { order: 1; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; overflow-y: auto; border-right: 0; border-top: 1px solid var(--bhm-line); }
  .side__header, .side__hero, .side__ask, .side__search, .side__try, .side__filters { padding-left: 24px; padding-right: 24px; }
  .tabs { padding-left: 24px; padding-right: 24px; }
  .chips { flex-wrap: wrap; }
  .map-legend { display: none; }
  .map-demo { max-width: calc(100% - 200px); }
  .card { position: fixed; right: 0; top: 0; bottom: 0; width: min(400px, 100%); border-radius: var(--bhm-r-panel) 0 0 var(--bhm-r-panel); }
  .chrome--card .map-controls, .chrome--card .map-note { right: 16px; }
}