/* ============================================================
   AIRLINKS — RESPONSIVE BREAKPOINTS
   All media queries collected here so designers can tweak in
   one place. Loaded LAST so it overrides component defaults.
   ============================================================ */

/* ---------- MOBILE BROWSER HARDENING (Chrome / Edge / Safari) ---------- */
/* Prevent horizontal overflow that breaks layout on mobile Chrome & Edge */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(24,95,165,0.15); }
/* Honor iOS safe areas (notch) */
.site-header { padding-top: env(safe-area-inset-top, 0); }
/* Inputs: 16px min font stops mobile Safari/Chrome from auto-zooming on focus */
@media (max-width: 768px) {
  input, select, textarea, .input, .select, .textarea { font-size: 16px !important; }
  /* Tap targets at least 44px tall (Apple/Google guidance) */
  .btn, .nav-btn, .chip[onclick], .toggle, .icon-btn, .hamburger-btn { min-height: 40px; }
  /* Images & media never exceed viewport width */
  img, video, .hero, .search-card, .card, table { max-width: 100%; }
  /* Smooth momentum scrolling for any scrollable region */
  .reel-container, .modal, .drawer-content, .layout-sidebar aside { -webkit-overflow-scrolling: touch; }
  /* Sticky sidebars become static so they don't overlap content */
  .layout-detail aside .card, .layout-sidebar aside .card { position: static !important; }
  /* Mega-menu fully disabled on touch (hamburger drawer used instead) */
  .nav-item-wrap:hover .mega-menu { display: none !important; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .icon-btn { display: none; }
  .nav-actions .btn-sm { display: none; }
  .nav-actions .avatar { display: flex; }
  .hamburger-btn { display: flex; }
  .nav-container { padding: 0 16px; }

  .promo-strip { flex-direction: column; gap: 4px; }
  .promo-strip-meta { margin-left: 0; }
  .mega-menu { display: none !important; }

  .stat-grid, .service-grid, .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .layout-sidebar, .layout-detail { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
  .footer-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hero h1 { font-size: 32px; }
  .hero { padding: 48px 24px 80px !important; }
  .hero p { font-size: 16px; }
  .row, .row-3 { grid-template-columns: 1fr; }
  .search-card { margin-top: -40px; padding: 16px; }
  .search-tabs { margin: -16px -16px 16px; padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .search-tabs button { padding: 12px 14px; font-size: 13px; flex-shrink: 0; }
  .container { padding: 24px 16px; }

  /* Mobile-friendly tables */
  table thead { display: none; }
  table tr { display: block; padding: 14px 0; border-bottom: 0.5px solid var(--color-border); }
  table td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 16px; border: none; text-align: right;
  }
  table td::before {
    content: attr(data-label);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-text-secondary); font-weight: 600;
    margin-right: 12px; flex-shrink: 0;
  }
  table td:not([data-label])::before { content: none; }

  .vehicle-card, .plan-card { flex-wrap: wrap; }

  .reel-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
  .reel-strip > * { min-width: 60vw; flex-shrink: 0; }

  .stat-card .value { font-size: 22px; }
  .modal { padding: 20px; max-width: 100%; }

  .reel-overlay { padding: 32px 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .reel-side { flex-direction: row; }
  .reel-city { font-size: 44px !important; }
  .reel-tagline { font-size: 18px; }
}

@media (max-width: 600px) {
  .stat-grid, .service-grid, .grid-4, .grid-3, .grid-2, .grid-6 { grid-template-columns: 1fr; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dest-card { font-size: 14px; padding: 12px; }
  .footer-inner, .footer-trust-inner { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-newsletter form { flex-direction: column; }
  .container, .container-narrow, .container-form { padding: 20px 16px; }
  .flight-row { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .reel-strip > * { min-width: 70vw; }

  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
  .hero h1 { font-size: 28px !important; }
  .hero { padding: 40px 16px 60px !important; }
  .hero p { font-size: 15px; }

  .nav-container { height: 56px; padding: 0 12px; }
  .brand { font-size: 16px; }
  .brand .logo { width: 26px; height: 26px; }

  .card { padding: 16px; }
  .drawer-content { width: 100%; max-width: 100%; }

  .vehicle-card, .plan-card {
    grid-template-columns: 1fr;
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .vehicle-card .btn, .plan-card .btn { width: 100%; }

  .setting-row { flex-wrap: wrap; }
  .setting-row .info { flex-basis: 60%; }

  .layout-detail aside .card { position: static !important; }

  .reel-city { font-size: 36px !important; }
  .reel-overlay { padding: 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .reel-side { flex-direction: row; gap: 8px; }
  .reel-actions { flex-direction: column; width: 100%; }
  .reel-actions .btn { width: 100%; }
}