/* ==========================================================================
   VenueIQ — mobile / tablet responsive layer (load after style + enhance)
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* ---------- Shared primitives ---------- */
.vx-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

table { max-width: 100%; }

input, select, textarea, button {
  max-width: 100%;
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(28px, 5vw, 42px); }
  .map-layout { gap: 16px; }
  .chat-container { max-width: 100%; }
  .footer-grid { gap: 20px; }
}

/* ---------- Phone / small tablet ---------- */
@media (max-width: 900px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .section { padding: 40px 0; }
  .section-header h2,
  .section-header h1 { font-size: clamp(22px, 6vw, 30px); }

  /* Hero */
  .hero { padding: 48px 0 32px; overflow: hidden; }
  .hero-inner { gap: 28px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .hero-visual { max-width: 100%; margin: 0 auto; }

  /* Cards / lists */
  .feature-card, .promo-card, .shop-card, .kpi-card, .alert-card {
    min-width: 0;
  }
  .promo-actions, .vx-row, .vx-row-between {
    flex-wrap: wrap;
  }
  .vx-row-between { gap: 12px; }

  /* Map */
  .map-layout {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }
  .map-sidebar {
    order: 2;
    max-height: none;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  .map-canvas, .map-stage, .map-svg-wrap {
    min-height: 280px;
    max-height: 55vh;
  }

  /* Cinema seats */
  .seat-map {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  /* Concierge */
  .chat-container {
    height: calc(100dvh - 140px - env(safe-area-inset-bottom));
    max-height: none;
    border-radius: 0;
    margin: 0 -16px;
    width: calc(100% + 32px);
  }

  /* Forms on advanced pages */
  .vx-field input,
  .vx-field select,
  .vx-field textarea,
  .feature-card input,
  .feature-card select,
  .feature-card textarea {
    width: 100%;
    box-sizing: border-box;
  }

  /* Staff / ops public consoles */
  [data-staff-kpis].grid-4,
  .grid.grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Tables */
  .table-responsive,
  .vx-heat-table,
  table.data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer { padding-bottom: calc(24px + 68px + env(safe-area-inset-bottom)); }

  /* PWA install above tab bar */
  .pwa-install {
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* Crowd banners */
  .crowd-banner { font-size: 12px; padding: 8px 12px; text-align: left; }

  /* Auth */
  .auth-card, .auth-box { margin: 16px; width: auto; max-width: 100%; }

  /* Inline flex toolbars */
  .breadcrumb { flex-wrap: wrap; font-size: 13px; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(24px, 7vw, 32px); }
  h2 { font-size: clamp(20px, 6vw, 26px); }

  .grid.grid-4,
  [data-staff-kpis].grid-4 { grid-template-columns: 1fr !important; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .kpi-card .kpi-value,
  .stat-value { font-size: 22px; }

  .promo-banner { min-height: 120px; }
  .promo-percent { font-size: 36px; }

  /* Account tabs */
  .account-tabs, .vx-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }
  .account-tabs a, .vx-tabs a {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Parking / food filters */
  .filter-bar, .chip-row, .vx-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  /* Dashboard heat tables */
  .vx-heat-table { min-width: 480px; }

  /* Bar charts */
  .bar-chart { min-height: 120px; }

  /* AR */
  .ar-panel {
    left: 8px;
    right: 8px;
    bottom: calc(12px + 68px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 400px) {
  .mobile-tabbar a { font-size: 10px; }
  .mobile-tabbar .mt-ico { font-size: 18px; }
  .nav-inner { padding: 10px 12px; }
}

/* Landscape phones: keep map usable */
@media (max-width: 900px) and (orientation: landscape) {
  .map-canvas, .map-stage, .map-svg-wrap { max-height: 70vh; }
  .chat-container { height: calc(100dvh - 96px); }
}

/* Dashboard / analytics public pages */
@media (max-width: 900px) {
  .soft-band, .cta-band { padding-left: 16px; padding-right: 16px; }
  .ticker { font-size: 12px; }
  .shop-filters, .filter-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .shop-filters > *, .filter-pills > * { flex: 0 0 auto; }
}

@media (pointer: coarse) {
  .btn, .nav-links a, .mobile-tabbar a, .claim-btn, .nav-burger {
    min-height: 44px;
  }
}