/* ==========================================================================
   ABY LUXURY CARS — Responsive
   ========================================================================== */

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; gap: 60px; }
  .hero-fleet{ justify-self: center; max-width: 460px; height: 460px; margin-top: 20px; }
  .hero-copy{ max-width: 100%; text-align: center; }
  .hero-actions{ justify-content: center; }
  .eyebrow{ justify-content: center; }

  .about-grid{ grid-template-columns: 1fr; gap: 60px; }
  .about-media{ max-width: 460px; margin: 0 auto; }
  .about-media-tag{ right: 10px; bottom: -20px; }

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

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

  .why-grid{ grid-template-columns: 1fr; gap: 50px; }
  .why-head{ position: static; }

  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-item.g-tall{ grid-row: span 1; }

  .booking-grid{ grid-template-columns: 1fr; gap: 50px; }
  .booking-form-wrap{ padding: 36px; }

  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile Nav (≤880px) ---------- */
@media (max-width: 880px){
  .nav-links{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 340px);
    background: var(--charcoal-2);
    border-left: 1px solid var(--hairline);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    padding: 40px var(--pad);
    transform: translateX(100%);
    transition: transform .5s var(--ease-out);
    z-index: 105;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-link{ font-size: 17px; }
  .nav-phone{ display: none; }
  .nav-actions .btn-small{ padding: 9px 16px; font-size: 11px; }
  .nav-burger{ display: flex; }

  .nav-links::before{
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
  }
}

/* ---------- Small tablet / large phone (≤768px) ---------- */
@media (max-width: 768px){
  .section-inner{ padding: 0 22px; }

  .hero{ padding-top: 110px; }
  .hero-title{ font-size: clamp(38px, 11vw, 56px); }
  .hero-actions{ flex-direction: column; width: 100%; }
  .hero-actions .btn{ width: 100%; }
  .hero-fleet{ height: 340px; max-width: 320px; margin: 40px auto 0; }
  .hero-car-back{ display: none; }
  .hero-car-mid{ top: 0; height: 230px; }
  .hero-car-front{ bottom: 0; width: 70%; height: 170px; }
  .hero-badge{ font-size: 10px; padding: 7px 12px; }
  .hero-badge-1{ top: -14px; left: 6px; }
  .hero-badge-2{ bottom: -14px; right: 6px; left: auto; }

  .about{ padding: 100px 0 80px; }
  .about-stats{ flex-wrap: wrap; gap: 28px; }

  .services{ padding: 90px 0; }
  .services-grid{ grid-template-columns: 1fr; border-radius: var(--radius-m); }
  .service-card{ padding: 34px 26px; }

  .fleet{ padding: 20px 0 90px; }
  .fleet-grid{ grid-template-columns: 1fr; }
  .fleet-tabs{ overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .fleet-tabs::-webkit-scrollbar{ display: none; }
  .fleet-tab{ flex-shrink: 0; }

  .why-us{ padding: 90px 0; }
  .why-item{ grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; }

  .gallery{ padding: 90px 0; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }

  .booking{ padding: 90px 0; }
  .booking-form-wrap{ padding: 26px; border-radius: var(--radius-m); }
  .form-row, .form-row-3{ grid-template-columns: 1fr; }
  .info-card{ padding: 28px; border-radius: var(--radius-m); }

  .footer-grid{ grid-template-columns: 1fr; padding-bottom: 40px; gap: 36px; }
  .site-footer{ padding-top: 70px; }
  .footer-bottom-inner{ flex-direction: column; text-align: center; }

  .whatsapp-float{ bottom: 18px; right: 18px; }
  .whatsapp-float a{ width: 50px; height: 50px; }
}

/* ---------- Small phone (≤400px) ---------- */
@media (max-width: 400px){
  .nav-logo-text{ font-size: 14px; }
  .hero-title{ font-size: 34px; }
  .hero-sub{ font-size: 15.5px; }
  .stat-num{ font-size: 34px; }
  .gallery-grid{ grid-template-columns: 1fr; }
}