/* ═══════════════════════════════════════════════════════════
   GearLink — Responsive hardening
   public/css/responsive.css
   Loaded on every page (after the page-specific CSS) to fix
   phone rendering across the app.
   ═══════════════════════════════════════════════════════════ */

/* Never let anything cause horizontal page scroll on phones. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }

/* ── Mobile nav menu (driven by .nav-open on the list) ───── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }

  /* The top bar should only hold the logo + hamburger on mobile.
     Auth buttons (Log In / Sign Up / Log Out) move into the dropdown. */
  .nav-cta { display: none; }

  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 68px;
    left: 0; right: 0;
    background: #fff;
    padding: 1rem 5vw;
    gap: .35rem;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(7,24,40,.12);
    z-index: 150;
  }
  .nav-links.nav-open li { width: 100%; }
  .nav-links.nav-open a {
    display: block;
    padding: .65rem .25rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.nav-open li:last-child a { border-bottom: none; }

  /* When the menu is open, the auth buttons render inside the dropdown
     (the JS appends .nav-cta into the open .nav-links list). */
  .nav-links.nav-open .nav-cta {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
    margin-top: .25rem;
  }
  .nav-links.nav-open .nav-cta .btn { width: 100%; }

  /* Keep the logo from being crowded */
  .nav-logo span { font-size: 1.1rem; }
  .nav-logo img  { height: 30px; }
}

/* ── Tablet / large phone ────────────────────────────────── */
@media (max-width: 768px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .form-row  { grid-template-columns: 1fr; }
}

/* ── Phones ──────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Modals: tighter padding, full-height friendly, room for the
     close button and the Stripe card field. */
  .modal {
    width: 94vw;
    max-height: 92vh;
    padding: 1.5rem 1.25rem;
    border-radius: 18px;
  }
  .modal-backdrop > .modal { width: 94vw; padding: 1.5rem 1.25rem; }
  .modal-close { top: .8rem; right: 1rem; }
  .modal-title { font-size: 1.25rem; padding-right: 1.5rem; }
  .modal-img   { height: 180px; }
  .gallery-slide { height: 180px; }

  /* Booking modal: keep date inputs and the pay button usable */
  .date-row { flex-direction: column; gap: .6rem; }
  .date-row input { width: 100%; }
  #payment-element { margin-top: .25rem; }

  /* Single-column stat cards on small phones */
  .stat-grid { grid-template-columns: 1fr; }

  /* Card management grid on supplier page → one column */
  .listing-grid,
  .listings-grid { grid-template-columns: 1fr !important; }

  /* Admin / supplier / bookings tables: allow horizontal scroll
     and hint it's scrollable. table-wrap already has overflow-x. */
  .table-wrap { -webkit-overflow-scrolling: touch; overflow-x: auto; }
  .admin-table { min-width: 560px; }   /* keep columns legible; scroll instead of squashing */

  /* Decorative hero/section circles must never create page-width overflow */
  .hero, .list-section, section { overflow-x: clip; }
  .hero::before, .list-section::before { max-width: 80vw; max-height: 80vw; }

  /* Headers stack cleanly */
  .admin-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .admin-badge  { align-self: flex-start; }
  .section-header { flex-wrap: wrap; gap: .5rem; }

  /* Page padding tightened */
  .admin-page { padding: 1.25rem 4vw 2.5rem; }

  /* Hero actions go full width so buttons are tappable */
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; text-align: center; }

  /* Toast shouldn't run off-screen */
  .toast { left: 4vw; right: 4vw; transform: translateY(80px); width: auto; max-width: none; }
  .toast.show { transform: translateY(0); }
}

/* Tap targets: ensure buttons/inputs are at least ~44px tall on touch */
@media (max-width: 560px) {
  .btn, .btn-sm, input, select, textarea { min-height: 42px; }
  .btn-sm { min-height: 36px; }
}