/* ═══════════════════════════════════════════
   responsive.css — Mobile & tablet breakpoints
   Desktop styles are NOT touched here.
   All rules in this file apply ≤768px only.
═══════════════════════════════════════════ */

/* ════════════════════════════════
   TABLET  (≤960px)
════════════════════════════════ */
@media (max-width: 960px) {
  .nav-links { display: none }
  .quick-wrap { grid-template-columns: 1fr 1fr; padding: 0 16px }
  .dest-grid { grid-template-columns: 1fr }
  .feat-overlay { flex-direction: column }
  .feat-right { padding: 0 }
  .testi-grid { grid-template-columns: 1fr }
  .ft-grid { grid-template-columns: 1fr 1fr }
  .social-strip { padding: 18px 24px }
  .stat { padding: 22px 20px }
}

/* ════════════════════════════════
   MOBILE  (≤768px) — main target
════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. GLOBAL: reduce motion, lighter blurs ──────────────────── */

  /* Kill heavy decorative blurs — they cause GPU stutter on mobile */
  .sec .sec-bg,
  .testi-bg {
    filter: brightness(0.35) saturate(1.1) !important;
    transform: none !important;
  }

  /* Kill the large nebula orbs — expensive paint */
  .sec::before,
  .sec::after,
  .testi-orb1,
  .testi-orb2 { display: none !important }

  /* Disable star twinkle animations — GPU cost for zero UX gain */
  .stars::before,
  .stars::after { animation: none !important }

  /* Disable hero logo glow pulse */
  .hero-logo-glow { animation: none !important; opacity: 0.5 }

  /* Reduce logo entrance to simple fade — no scale jank */
  .hero-logo-wrap,
  .hero-logo {
    animation: mobileFadeIn 0.6s ease both !important;
  }
  @keyframes mobileFadeIn {
    from { opacity: 0 }
    to   { opacity: 1 }
  }

  /* Disable q-card glass blur (expensive on iOS) — use solid fallback */
  .q-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(30, 15, 65, 0.85) !important;
  }

  /* ── 2. NAVBAR: stable, no jump ──────────────────────────────── */

  nav {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    background: rgba(8, 2, 22, 0.90) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
    transition: background 0.3s ease !important;
  }

  /* Logo doesn't shrink/grow on scroll — stays stable */
  .logo-img,
  nav.scrolled .logo-img {
    height: 52px !important;
    transition: none !important;
  }

  nav.scrolled {
    padding: 8px 20px !important;
    background: rgba(6, 1, 18, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  /* ── 3. HERO: tighter, no overflow ───────────────────────────── */

  .hero {
    padding: 110px 20px 60px !important;
    min-height: 100svh;
  }

  .hero-logo-wrap {
    padding: 18px 28px !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
    /* lighter glass — backdrop-filter is fine here (single element) */
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .hero-logo { width: 180px !important }

  .hero h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    letter-spacing: -0.5px !important;
  }

  .hero-sub { font-size: 14px !important; margin-bottom: 28px !important }

  /* Search bar: stack vertically, clean */
  .search {
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    max-width: 100%;
  }

  .s-field {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 14px 18px;
  }

  .s-btn {
    border-radius: 0 0 18px 18px;
    margin: 0;
    padding: 15px 24px;
  }

  /* ── 4. QUICK CARDS: 2-col, no hover jank ────────────────────── */

  .quick-wrap {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 16px !important;
    margin-top: -16px !important;
  }

  .q-card {
    padding: 14px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    /* No hover lift on touch — it fires wrong on tap */
    transform: none !important;
  }

  .q-card:hover {
    transform: none !important;
  }

  .q-ico {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }

  .q-card h4 { font-size: 11.5px !important }
  .q-card p  { font-size: 10px !important }
  .q-arrow   { display: none }

  /* ── 5. SECTIONS: less padding, no orb waste ─────────────────── */

  .sec {
    padding: 60px 20px !important;
  }

  .sec-head { margin-bottom: 32px !important }
  .sec-head h2 { font-size: clamp(24px, 6vw, 32px) !important }

  /* ── 6. TOURS COVERFLOW: simpler on mobile ───────────────────── */

  /* Slide width fills screen naturally — JS switches to 'slide' effect */
  .tours-swiper .swiper-slide {
    width: 85vw !important;
    height: 400px !important;
  }

  /* Hide background blur layer on mobile — heavy paint */
  .tours-bg-blur { display: none !important }

  /* Simpler section bg without blur for tours */
  #tours .sec-bg {
    filter: brightness(0.3) saturate(1.1) !important;
    transform: none !important;
  }

  /* Arrows too close on mobile — hide, use swipe */
  .tours-swiper .swiper-button-prev,
  .tours-swiper .swiper-button-next { display: none !important }

  /* ── 7. TESTIMONIALS: stable swipe cards ─────────────────────── */

  .testi { padding: 60px 0 80px !important }
  .testi-inner { padding: 0 !important; overflow: hidden }

  .testi-swiper .swiper-slide {
    width: 88vw !important;
    opacity: 1 !important; /* remove coverflow dimming on mobile */
  }

  /* Stop text fade-in on mobile — causes reflow stutter */
  .t2-text {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .t2-card {
    padding: 24px 20px 20px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .t2-quote { font-size: 64px !important; margin-bottom: 12px !important }

  /* Hide arrows — swipe is the interaction */
  .testi-prev,
  .testi-next { display: none !important }

  /* ── 8. STATS BAR: single column ────────────────────────────── */

  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  .stat { padding: 18px 16px !important }
  .stat h3 { font-size: 13.5px !important }
  .stat p  { font-size: 11px !important }
  .stat-ico { font-size: 22px !important }

  /* ── 9. FOOTER ────────────────────────────────────────────────── */

  .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  footer { padding: 40px 20px 24px !important }

  /* ── 10. MODAL PANELS: full-width on mobile ───────────────────── */

  .pkg-panel,
  .qm-panel {
    border-radius: 20px 20px 0 0 !important;
    padding: 28px 18px 24px !important;
    max-height: 90vh !important;
  }

  .pkg-modal,
  .qm-backdrop {
    align-items: flex-end !important;
  }

  /* ── 11. SOCIAL STRIP ─────────────────────────────────────────── */

  .social-strip {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    text-align: center;
  }

  .strip-left { justify-content: center }
  .strip-right { justify-content: center }
}

/* ════════════════════════════════
   SMALL MOBILE  (≤480px)
════════════════════════════════ */
@media (max-width: 480px) {

  .quick-wrap {
    grid-template-columns: 1fr !important;
  }

  .hero-logo { width: 150px !important }

  .tours-swiper .swiper-slide {
    width: 92vw !important;
    height: 360px !important;
  }

  .testi-swiper .swiper-slide { width: 94vw !important }

  .stats { grid-template-columns: 1fr !important }

  .ft-grid { grid-template-columns: 1fr !important }
}

/* ════════════════════════════════
   REDUCE MOTION (accessibility)
════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}