/* =====================================================================
   responsive.css — Mobile-first breakpoints
   ===================================================================== */

/* ── Hide/show helpers ──────────────────────────────────────────────── */
/* Default: hide desktop-only elements (shown via media query below) */
.desktop-only { display: none; }
.mobile-only  { display: block; }

/* ── Mobile base (< 640px) ──────────────────────────────────────────── */
@media (max-width: 639px) {
  .hero-carousel  { height: 260px; }
  .hero-slide-content { padding: var(--space-md) var(--space-md) var(--space-2xl); }
  .hero-title { font-size: var(--font-size-xl); }
  .hero-meta  { font-size: var(--font-size-xs); gap: var(--space-sm); }
  .hero-arrow { display: none; }

  .events-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-sm);
  }
  .events-row .event-card { min-width: 160px; max-width: 180px; }

  .event-detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
  }
  .booking-sidebar {
    position: static;
    order: 2;
  }

  .event-info-grid { grid-template-columns: 1fr; }
  .event-hero { height: 220px; }

  .profile-layout {
    grid-template-columns: 1fr;
    padding: var(--space-md) 0;
  }
  .profile-sidebar { order: 0; }

  .booking-item { flex-direction: column; }
  .booking-thumb { width: 100%; height: 160px; }

  .form-row { grid-template-columns: 1fr; }

  .hamburger { display: flex; }
  .mobile-search-toggle { display: flex; }

  /* Header — compact so hamburger is never cut off */
  .header-inner { gap: var(--space-sm); }
  .location-btn { padding: 6px 8px; max-width: 110px; gap: 4px; }
  .location-chevron { display: none; }
  .site-header .btn-outline-white { padding: 7px 12px; font-size: var(--font-size-xs); }

  .city-grid { grid-template-columns: repeat(2, 1fr); }

  .toast-container { left: var(--space-md); right: var(--space-md); bottom: var(--space-md); }
  .toast { max-width: 100%; }

  /* Footer mobile */
  .site-footer { padding: var(--space-2xl) 0 var(--space-lg); margin-top: var(--space-2xl); }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-sm); }
}

/* ── Small tablets (≥ 480px) ─────────────────────────────────────────── */
@media (min-width: 480px) {
  .hero-carousel { height: 300px; }
  .hero-title    { font-size: var(--font-size-2xl); }
  .city-grid     { grid-template-columns: repeat(3, 1fr); }
  .events-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Very small phones (< 400px) — hide city name, icon only ─────────── */
@media (max-width: 399px) {
  .location-name { display: none; }
  .location-btn  { max-width: 36px; }
  .desktop-only{display: none;}
}

/* ── Small tablets footer (640–767px) ─────────────────────────────────── */
@media (min-width: 640px) and (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── Tablets (≥ 640px) ────────────────────────────────────────────────── */
@media (min-width: 640px) {
  /* Use revert so each element type gets its natural display (block, inline, etc.) */
  .desktop-only { display: revert; }
  .mobile-only  { display: none; }

  .hero-carousel       { height: 340px; }
  .hero-slide-content  { padding: var(--space-xl) var(--space-2xl) var(--space-3xl); }
  .hero-title          { font-size: var(--font-size-3xl); }
  .hero-arrow          { display: flex; }

  .events-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

  .booking-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-lg)); order: 0; }

  .event-hero { height: 320px; }
  .event-info-grid { grid-template-columns: 1fr 1fr; }

  .profile-layout { gap: var(--space-xl); }
  .booking-item { flex-direction: row; }
  .booking-thumb { width: 80px; height: 80px; }

  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ── Desktop (≥ 768px) ────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hamburger { display: none; }
  .mobile-search-toggle { display: none; }

  .header-search { display: flex; }

  .hero-carousel { height: 380px; }

  .events-grid { grid-template-columns: repeat(3, 1fr); }

  .profile-layout { grid-template-columns: 240px 1fr; }

  .event-detail-layout {
    grid-template-columns: 1fr 320px;
  }
}

/* ── Venue address: hide below 1024px to keep info cards equal height ── */
@media (max-width: 1023px) {
  .venue-address-text { display: none; }
}

/* ── Wide desktop (≥ 1024px) ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --header-height: 68px; }

  .container { padding: 0 var(--space-xl); }

  .hero-carousel { height: 420px; }
  .hero-title    { font-size: var(--font-size-4xl); }

  .events-grid { grid-template-columns: repeat(4, 1fr); }

  .event-detail-layout {
    grid-template-columns: 1fr 360px;
    gap: var(--space-3xl);
  }
  .event-hero  { height: 400px; }
  .event-main-info h1 { font-size: var(--font-size-4xl); }

  .profile-layout { grid-template-columns: 280px 1fr; }
}

/* ── Extra wide (≥ 1280px) ─────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .events-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .hero-section, .category-bar,
  .filters-bar, .pagination, .booking-sidebar, .modal,
  .toast-container { display: none !important; }
  body { background: #fff; color: #000; }
  .page-main { padding-top: 0; }
  .booking-item { border: 1px solid #ccc; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}