/* ============================================================
   Mobile responsive overrides — wstrzyknięte do desktopowych
   stron rankingów / map żeby były używalne na telefonie.
   Tymczasowy patch przed pełną mobilną implementacją (Etap 3).
   ============================================================ */
@media (max-width: 768px) {
  /* Layout fundamentals */
  body { overflow-x: hidden; }
  nav {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 54px;
    padding: 6px 12px !important;
    gap: 6px !important;
  }
  .nav-logo { font-size: 0.85rem !important; flex: 0 0 100%; text-align: center; margin: 0 0 4px 0 !important; }
  .nav-btn {
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
    min-height: 36px;
  }
  #nickDisplay { display: none; }

  /* Hero */
  .hero { padding: 18px 14px 12px !important; }
  .hero h1 { font-size: 1.3rem !important; line-height: 1.15; }
  .hero p  { font-size: 0.85rem !important; }

  /* Filters: stack vertically */
  .filters {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .filters > * { width: 100% !important; min-width: 0 !important; }
  .filter-select, .filter-input, .btn-add {
    min-height: 42px !important;
    font-size: 0.95rem !important;
  }

  /* Cards / list items */
  .ranking-list, .venues-list, .whisky-list, .ranking-grid {
    padding: 10px 12px !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
  }
  .ranking-row, .venue-card, .whisky-card, .ranking-item, .pub-card {
    padding: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .pub-card-body, .venue-body, .whisky-body { width: 100% !important; }

  /* Hide niepotrzebne na małym ekranie */
  .desktop-only { display: none !important; }

  /* Modal — bottom sheet style */
  .modal {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 18px 18px 0 0 !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    transform: none !important;
    max-height: 90dvh !important;
  }

  /* Bar switcher footer (na dole stron) — układ pionowy gdy ciasno */
  .bar-switcher, [style*="position: fixed"][style*="bottom"] {
    flex-wrap: wrap !important;
  }

  /* Tables: scrollable */
  table { display: block; overflow-x: auto; max-width: 100vw; }

  /* Bottom-fixed floating buttons */
  .floating-btn, .fab { bottom: env(safe-area-inset-bottom, 0px) !important; }
}