/* ==========================================================================
   Simple Auto DFW — Responsive Overrides
   Breakpoints tested: 360 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   Mobile-first base lives in style.css; this file layers overrides.
   ========================================================================== */

/* --------------------------------------------------------------------------
   >= 1920px — extra breathing room on very large screens
-------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  .container-xl { max-width: 1440px; }
}

/* --------------------------------------------------------------------------
   >= 1024px — a bit more side breathing room once there's room to spare
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .container-xl { padding-left: 32px; padding-right: 32px; }
}

/* --------------------------------------------------------------------------
   <= 1280px
-------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .hero-heading { font-size: clamp(2rem, 4vw, 3.6rem); }
  .floating-card-1 { left: -2%; }
  .floating-card-2 { right: -2%; }
}

/* --------------------------------------------------------------------------
   <= 1024px (tablet landscape) — nav collapses here in Bootstrap's lg tier already,
   but we tune spacing/layout before the lg breakpoint kicks in visuals
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  section { padding: 72px 0; }
  .hero-section { padding-top: calc(var(--header-height) + 40px); }
  .financing-cta-panel { flex-direction: column; text-align: center; }
  .bilingual-inner { flex-direction: column; text-align: center; }
  .bilingual-actions { justify-content: center; }
}

/* --------------------------------------------------------------------------
   < 992px — offcanvas nav takes over (Bootstrap lg breakpoint)
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .navbar-collapse.d-none { display: none !important; }
  .steps-connector { display: none !important; }
  .step-card { margin-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   Car journey — tablet tuning (576px–991.98px)
   Still pinned + curved path (animations.js keeps it in "journey-desktop"
   mode down to 576px), just smaller car, flatter road, shorter pin duration
   (the pin duration itself is tuned in JS via ScrollTrigger.matchMedia).
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) and (min-width: 576px) {
  .journey-bg-text { font-size: clamp(3rem, 16vw, 8rem); }
  .journey-animated.journey-desktop .journey-car { width: clamp(200px, 26vw, 300px); }
  .journey-animated.journey-desktop .journey-intro { top: 10%; max-width: 80%; }
  .journey-animated.journey-desktop .journey-road-wrap { top: 6%; bottom: 6%; }
  .journey-heading { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
  .journey-copy { font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   <= 768px (tablet portrait / large phone)
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
  section { padding: 60px 0; }

  .hero-section { padding-top: calc(var(--header-height) + 24px); padding-bottom: 48px; }
  .hero-heading { font-size: clamp(1.8rem, 6vw, 2.5rem); line-height: 1.15; }
  .hero-paragraph { font-size: 1rem; }
  .hero-trust-bullets { grid-template-columns: 1fr; }
  .hero-cta-group .btn { width: 100%; text-align: center; }
  .hero-cta-group { flex-direction: column; }

  .hero-image-frame { max-width: 380px; }
  .floating-card { font-size: 0.72rem; padding: 8px 12px; }
  .floating-card i { font-size: 0.9rem; }
  .floating-card-1 { top: 4%; left: 2%; }
  .floating-card-2 { bottom: 12%; right: 2%; }
  .floating-card-3 { bottom: -4%; left: 8%; }

  .preapproval-form-card { padding: 28px 20px; }

  .financing-cta-panel { padding: 32px 24px; }
  .financing-cta-buttons { width: 100%; }
  .financing-cta-buttons .btn { flex: 1; }

  .bilingual-inner { padding: 32px 24px; }

  .comparison-table thead th,
  .comparison-table tbody td { padding: 14px 16px; font-size: 0.85rem; }

  .final-cta-buttons { flex-direction: column; align-items: stretch; }
  .final-cta-buttons .btn { width: 100%; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Mobile sticky CTA needs room — pad bottom of last section before footer */
  #site-footer { padding-bottom: 84px; }
}

/* --------------------------------------------------------------------------
   Car journey — mobile (< 576px)
   animations.js switches to "journey-mobile" mode at this breakpoint: no
   pin, no curved path, a simple left-to-right horizontal tween instead.
   These rules keep the stacked layout readable, cap the car at 180–240px,
   and rely on generous section padding (not a forced min-height) to give
   the scrub tween a natural ~160vh scroll window without dead space.
-------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .car-journey-section { padding: 64px 0 96px; overflow: hidden; }

  .journey-bg-text { font-size: clamp(2.4rem, 22vw, 4.5rem); }
  .journey-bg-glow { display: none; } /* heavy parallax disabled on mobile */

  .journey-heading { font-size: clamp(1.7rem, 8vw, 2.2rem); margin: 10px 0 14px; }
  .journey-copy { font-size: 0.95rem; max-width: 100%; }
  .journey-intro { max-width: 100%; }

  .journey-mid-message { margin: 44px 0; }
  .journey-mid-message p { font-size: clamp(1.35rem, 7vw, 1.8rem); }

  .journey-final { margin-top: 44px; }
  .journey-final-buttons { flex-direction: column; align-items: stretch; }
  .journey-final-buttons .btn { width: 100%; }

  .journey-animated.journey-mobile .journey-road-wrap { height: 180px; margin-top: 24px; }
  .journey-animated.journey-mobile .journey-car { width: 200px; bottom: 20px; }
}

/* --------------------------------------------------------------------------
   <= 430px (large phones: iPhone Pro Max etc.)
-------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .brand-logo { height: 36px; }
  .eyebrow { font-size: 0.75rem; }
  .hero-heading { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.18; }

  .section-heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  .step-card { padding: 32px 22px; }

  .category-card-body, .vehicle-card-body { padding: 18px; }

  .location-card-body { padding: 24px; }
  .location-actions { flex-direction: column; align-items: stretch; }
  .location-actions .btn { text-align: center; }

  .thank-you-buttons { flex-direction: column; width: 100%; }
  .thank-you-buttons .btn { width: 100%; }

  .journey-animated.journey-mobile .journey-car { width: 180px; }
  .journey-animated.journey-mobile .journey-road-wrap { height: 160px; }
}

/* --------------------------------------------------------------------------
   <= 390px (iPhone 12/13/14 standard width)
-------------------------------------------------------------------------- */
@media (max-width: 390px) {
  .container-xl { padding-left: 18px; padding-right: 18px; }
  .testimonial-slide { padding: 32px 20px; }
  .testimonial-text { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   <= 360px (small Android)
-------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .hero-heading { font-size: clamp(1.4rem, 8vw, 1.75rem); line-height: 1.2; }
  .btn-lg { padding: 0.85rem 1.6rem; font-size: 0.95rem; }
  .sticky-cta-item span { font-size: 0.62rem; }
}

/* Three.js particle count/parallax is reduced on small screens via JS
   (see three-scene.js) rather than hidden outright, to satisfy the
   "simplified on mobile" requirement while keeping the ambient effect. */