/* Card-Dekho mobile app layer — part 2 of the mobile redesign.
   Loads after mobile-polish.css (part 1) and builds on it:
   — clearance for the fixed bottom tab bar
   — shorter, swipe-first hero carousel
   — compact card layouts and section spacing so screens fit with less scrolling
   — right-sized icons on small screens */

@media (max-width: 767px) {
  /* Room for the bottom tab bar (56px bar + breathing space + iOS safe area) */
  main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
  footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }

  /* The floating compare tray and similar fixed bottom elements must sit
     above the tab bar instead of underneath it */
  .fixed.bottom-6:not(.bottom-tab-nav),
  .fixed.bottom-4:not(.bottom-tab-nav) {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 640px) {
  /* ---------- Compact vertical rhythm: fit more per screen ---------- */
  .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-16 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .pt-12 { padding-top: 2rem !important; }
  .mb-12 { margin-bottom: 1.75rem !important; }
  .mb-16 { margin-bottom: 2rem !important; }
  .mt-12 { margin-top: 1.75rem !important; }
  .space-y-8 > * + * { margin-top: 1.25rem !important; }

  /* ---------- Hero carousel: shorter and thumb-friendly ---------- */
  .h-\[360px\] {
    height: 320px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* ---------- Card layout: full-bleed friendly, tighter padding ---------- */
  #card-grid .grid {
    gap: 0.9rem !important;
  }

  /* ---------- Right-size decorative icons ---------- */
  .w-14.h-14 { width: 2.75rem !important; height: 2.75rem !important; }
  .w-12.h-12 { width: 2.5rem !important; height: 2.5rem !important; }
  .w-10.h-10 { width: 2.25rem !important; height: 2.25rem !important; }

  /* Keep horizontal scrollers on-rails and snappy */
  .overflow-x-auto {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .overflow-x-auto > * {
    scroll-snap-align: start;
  }
}