/* =========================================================
   TripConnect — responsive.css
   Tablet + mobile breakpoints
   ========================================================= */

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; max-width:320px; margin:0 auto; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .why-grid{ grid-template-columns: repeat(3,1fr); row-gap:28px; }
  .steps{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr 1fr; row-gap:32px; }
  .benefit-grid{ grid-template-columns: repeat(2,1fr); }
  .value-grid{ grid-template-columns: repeat(2,1fr); }
  .airline-row{ grid-template-columns: repeat(3,1fr); }
  .form-row{ grid-template-columns: 1fr; }
}

/* ---------- Mobile nav switch (<=900px) ---------- */
@media (max-width: 900px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn{ display:none; }
}

/* ---------- Mobile (<=640px) ---------- */
@media (max-width: 640px){
  section{ padding: 52px 0; }
  .hero{ padding: 36px 0 130px; }
  .hero h1{ font-size: 30px; max-width: none; }
  .search-fields{ grid-template-columns: 1fr 1fr; }
  .search-panels{ padding: 20px 16px 26px; }
  .search-submit .btn{ width:100%; }
  .search-submit{ justify-content:stretch; }
  .grid-4{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .newsletter{ padding: 28px 22px; flex-direction:column; align-items:flex-start; }
  .newsletter-form{ max-width:none; width:100%; }
  .benefit-grid{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr; }
  .airline-row{ grid-template-columns: repeat(2,1fr); }
  .sticky-cta{ display:flex; }
  .page-hero{ padding: 32px 0 70px; }
  .error-page .code{ font-size: 64px; }
  .deal-panel.is-active{ grid-template-columns: 1fr !important; }
  .form-card{ padding:22px; }
}

@media (min-width: 641px){
  .search-fields{ grid-template-columns: repeat(4,1fr); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}