/* =====================================================
   Car X — Responsive Stylesheet
   Mobile-first refinements
   ===================================================== */

/* Large desktop */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
  .cards-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop */
@media (max-width: 1199px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 56px 0 48px; }
}

/* Tablet */
@media (max-width: 991px) {
  .section { padding: 48px 0; }
  .section-sm { padding: 32px 0; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero .row { grid-template-columns: 1fr; text-align: start; gap: 28px; }
  .hero .visual { aspect-ratio: 16/10; }
  .hero .stats { max-width: 100%; }
  .quick-search .grid { grid-template-columns: 1fr 1fr 1fr; }
  .filters { position: relative; top: 0; }
}

/* Mobile */
@media (max-width: 767px) {
  body { padding-bottom: 60px; } /* room for mobile cta bar */
  .container { padding-inline: 14px; }
  .section { padding: 36px 0; }
  .section-head { margin-bottom: 24px; }
  .cards-grid { grid-template-columns: 1fr; gap: 14px; }
  .hero { padding: 36px 0 28px; }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero .actions .btn { flex: 1 1 calc(50% - 5px); }
  .hero .stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero .stats strong { font-size: 1.25rem; }
  .quick-search { margin-top: -22px; padding: 14px; }
  .quick-search .grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .car-card .actions { grid-template-columns: 1fr 1fr; }
  .car-card .actions .wa-btn { grid-column: 1 / -1; }

  /* Card layout becomes horizontal-friendly */
  .car-card .body { padding: 14px; gap: 8px; }
  .car-card .actions { padding: 0 14px 14px; gap: 6px; }
  .car-card h3.title { font-size: 1rem; }

  .why-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .why-card { padding: 18px; }

  .timeline { grid-template-columns: 1fr 1fr; gap: 12px; }
  .timeline .step { padding: 18px 14px; }

  .cta-banner { padding: 36px 22px; border-radius: var(--r-lg); }
  .cta-banner h2 { font-size: 1.5rem; }
  .cta-banner .actions .btn { flex: 1 1 100%; }

  .footer { padding: 40px 0 16px; }

  .chat-window {
    bottom: 80px;
    inset-inline-end: 10px;
    width: calc(100% - 20px);
    height: calc(100vh - 110px);
    max-height: none;
    border-radius: var(--r-md);
  }
  .chat-fab { bottom: 14px; inset-inline-end: 14px; }
  .chat-fab.with-cta { bottom: 70px; }

  .fab-btn { width: 52px; height: 52px; }
}

/* Small phones */
@media (max-width: 380px) {
  .hero .stats { grid-template-columns: 1fr 1fr; }
  .hero .stats div:last-child { grid-column: 1 / -1; }
  .why-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .quick-search .grid { grid-template-columns: 1fr; }
}

/* iOS notch handling */
@supports (padding: max(0px)) {
  .footer, .mobile-cta-bar {
    padding-bottom: max(env(safe-area-inset-bottom), 12px);
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print */
@media print {
  .desktop-header, .mobile-header, .footer, .chat-fab, .chat-window, .mobile-cta-bar { display: none !important; }
  .car-card { break-inside: avoid; }
}