/* =========================================================
   AUTO CENTAR BIMMER — responsive.css
   Breakpoints: 1400 / 1200 / 1024 / 860 / 600 / 380
   ========================================================= */

html, body { overflow-x: hidden; }

/* ---- Brand text: show alongside logo chip on desktop ---- */
@media (min-width: 960px) {
  .brand__txt { display: inline-block; }
}

/* ---------- Wide: 4-col grids scale naturally ---------- */
@media (max-width: 1400px) {
  .vehicle-grid--feature { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Laptop: drop to 3 cols ---------- */
@media (max-width: 1200px) {
  .vehicle-grid { grid-template-columns: repeat(3, 1fr); }
  .vehicle-grid--feature { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Smaller laptop ---------- */
@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .vehicle-grid,
  .vehicle-grid--feature { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 860px) {
  .nav { display: none; }
  .header__cta .btn--primary { display: none; }
  .burger { display: block; }

  .steps { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; aspect-ratio: 16 / 10; }
  .trust { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery .g-tall { grid-row: span 1; }
  .gallery .g-wide { grid-column: span 2; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  :root {
    --header-h: 66px;
    --gutter: 1.15rem;
  }

  /* More breathing room on mobile */
  .section { padding-block: clamp(4rem, 11vw, 6.5rem); }
  .sec-head { margin-bottom: 2.6rem; }
  .sec-head h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); }

  .feature-grid { grid-template-columns: 1fr; gap: 1.1rem; }

  /* Vehicle cards: single column, good card size */
  .vehicle-grid,
  .vehicle-grid--feature {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  /* Hero */
  .hero { min-height: 90vh; }
  .hero h1 { max-width: 100%; font-size: clamp(2.1rem, 9.5vw, 3.2rem); }
  .hero .lead { font-size: .97rem; max-width: 36ch; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .hero__actions .btn { justify-content: center; padding: 1.15rem 1.6rem; font-size: 1rem; }
  .hero__badges { gap: .4rem; }
  .badge { font-size: .65rem; padding: .3rem .55rem; }
  .scroll-cue { display: none; }

  /* Buttons */
  .btn--lg { padding: 1.1rem 1.7rem; font-size: 1rem; }
  .cta-band__actions { flex-direction: column; gap: .7rem; }
  .cta-band__actions .btn,
  .nf__actions .btn { width: 100%; justify-content: center; }

  /* Cards */
  .vcard__body { padding: 1.3rem 1.4rem 1.5rem; }
  .vcard__body h3 { font-size: 1.12rem; }
  .vcard__price { font-size: 1.28rem; }

  /* Steps */
  .step { padding: 1.6rem 1.4rem 1.4rem; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; gap: .6rem; }

  /* Gallery */
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .gallery .g-wide { grid-column: span 1; }

  /* Data table */
  .data-row { flex-direction: column; gap: .15rem; }
  .data-row dd { text-align: left; }

  /* Misc */
  .trust { padding: 2rem 1.4rem; }
  .trust-strip { padding: 1.5rem 1.4rem; gap: 1rem; }
  .trust-strip .btn { margin-left: 0; width: 100%; justify-content: center; }
  .cta-band { padding: 2.4rem 1.6rem; }
  .to-top { right: 1rem; bottom: 1rem; }
  .page-hero { padding-bottom: 2.4rem; }
  .contact-grid { gap: 1.6rem; }
  .map-wrap { aspect-ratio: 4/3; min-height: 260px; }
}

/* ---------- Very small ---------- */
@media (max-width: 380px) {
  .brand__chip img { height: 26px; }
  .hero h1 { font-size: clamp(1.9rem, 10vw, 2.8rem); }
  .vcard__body { padding: 1.1rem 1.2rem 1.3rem; }
}

/* ---------- Touch / coarse: hide custom cursor + tyre tracks ---------- */
@media (hover: none), (pointer: coarse) {
  .cursor-car,
  .tyre-track { display: none !important; }
  body.has-cursor-car,
  body.has-cursor-car a,
  body.has-cursor-car button { cursor: auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__media img { transform: none; }
  .cursor-car,
  .tyre-track { display: none !important; }
  .vcard__media--ph { animation: none; }
}