/* ============================================================
   ParkingUnit · Redesign · Mobile-fix pack
   Patches for narrow viewports (<= 600px) that the original
   per-page stylesheets miss — keeps the original files
   untouched while plugging the gaps audit identified
   (2026-05-28).
   ============================================================ */

/* Header lang/currency popover — full-bleed sheet on small phones */
@media (max-width: 480px) {
  .pu-popover-region { min-width: calc(100vw - 20px) !important; max-height: 80vh; }
}

/* Detail page: 2-col → 1-col below 600px (was only stacking at 720px+) */
@media (max-width: 600px) {
  .pu-detail-layout { grid-template-columns: 1fr !important; }
  /* NB: do NOT force .pu-detail-aside to position:static here — below 960px it
     is the booking bottom-sheet (position:fixed, slid up by the book-bar). */
}

/* Reservation recap: 380 + 1fr → 1fr below 600px */
@media (max-width: 600px) {
  .pu-reservation-layout { grid-template-columns: 1fr !important; }
}

/* Airport-info rows: 200 + 1fr → 1fr below 600px */
@media (max-width: 600px) {
  .pu-airport-info__row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* Touch targets: heart on park-card, sort buttons, datepicker arrows */
.pu-park-row__fav { min-width: 40px; min-height: 40px; }
.pu-sort__btn { padding: 8px 16px !important; }
.flatpickr-prev-month, .flatpickr-next-month { width: 36px; height: 36px; }

/* Breadcrumbs (.crumbs) on phones — keep them on ONE clean line. A long current-
   page title used to wrap the row to two lines with the chevron separators left
   floating mid-height ("crooked"). Pin items to a single line and ellipsize the
   last (current-page) crumb. Loaded last so it beats the per-page .crumbs rules
   (components/geo/info) that don't carry a mobile variant. */
@media (max-width: 600px) {
  .crumbs { gap: 6px !important; font-size: 12px !important; flex-wrap: nowrap; min-width: 0; }
  .crumbs a { white-space: nowrap; flex: none; }
  .crumbs svg { flex: none; }
  .crumbs > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}