/* ==========================================================================
   responsive.css — layout changes per breakpoint
   Desktop 1200+ · Tablet 768–1199 · Mobile 320–767
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --container: 1560px; }
}

/* ---------- ≤1199: tablet and below ---------- */
@media (max-width: 1199px) {
  :root { --header-h: 76px; }
  .primary-nav { display: none; }
  .menu-toggle { display: inline-block; margin-left: 6px; }
  .site-header__actions { margin-left: auto; }
  .primary-nav + .site-header__actions { margin-left: auto; }

  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calc__intro { grid-column: 1 / -1; position: static; }

  .hero__title { font-size: clamp(3rem, 10vw, 7rem); }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-tiles { grid-template-columns: repeat(2, 1fr); }
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partners__inner { grid-template-columns: 1fr; }
}

/* ---------- ≤1023: small tablet ---------- */
@media (max-width: 1023px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }

  /* Category rail: horizontal swipe */
  .cat-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cat-rail::-webkit-scrollbar { display: none; }
  .cat-grid { display: flex; width: max-content; max-width: none; padding-bottom: 8px; }
  .cat-card { width: clamp(220px, 34vw, 300px); flex: none; scroll-snap-align: start; }

  .why { grid-template-columns: 1fr; }
  .why__head { position: static; }

  .showrooms__grid, .booking, .trade, .story, .contact, .faq, .specs, .detail { grid-template-columns: 1fr; }
  .spec-table { grid-column: auto; }
  .detail__summary, .contact__aside { position: static; }
  .booking__visual { min-height: 420px; }
  .map { min-height: 420px; }
  .trade__result { min-height: 0; }
  .plans { grid-template-columns: 1fr; max-width: 640px; }

  /* Inventory: filters become a drawer */
  .inventory__layout { grid-template-columns: 1fr; }
  .filters {
    position: fixed; z-index: 120; inset: 0 auto 0 0; top: 0; width: min(380px, 92vw); max-height: none;
    padding: 24px var(--gutter) 24px; background: var(--bone); box-shadow: var(--shadow-pop);
    transform: translateX(-105%); transition: transform 0.55s var(--ease); visibility: hidden;
  }
  .filters.is-open { transform: none; visibility: visible; }
  .filters__close, .filters__open { display: inline-flex; }
  .filters__apply { display: inline-flex; position: sticky; bottom: 0; }
  .filters__scrim { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(13, 13, 12, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
  .filters.is-open ~ .filters__scrim, .inventory.filters-open .filters__scrim { opacity: 1; pointer-events: auto; }

  .auth { grid-template-columns: 1fr; }
  .auth__visual { display: none; }
}

/* ---------- ≤767: mobile ---------- */
@media (max-width: 767px) {
  :root { --header-h: 68px; --section-y: 80px; }
  .site-header.is-solid { --header-h: 64px; }
  .logo__sub { display: none; }
  .site-header__cta { display: none; }
  .site-header__actions .icon-btn { width: 40px; height: 40px; }
  .menu-toggle { width: 44px; height: 44px; }
  .menu-toggle span { left: 12px; right: 12px; }
  .menu-toggle span:first-child { top: 17px; }
  .menu-toggle span:last-child { top: 25px; }
  .menu-open .menu-toggle span:first-child, .menu-open .menu-toggle span:last-child { top: 21px; }

  .btn { --btn-h: 52px; padding: 0 22px; }

  /* Hero recomposed for portrait screens: car on top, copy below */
  .hero { min-height: auto; flex-direction: column; align-items: stretch; }
  .hero__media { position: relative; inset: auto; height: 62svh; min-height: 380px; max-height: 560px; }
  .hero__media { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .hero__img { object-position: 58% 60%; }
  .hero__shade { background: linear-gradient(180deg, rgba(13, 13, 12, 0.55) 0%, rgba(13, 13, 12, 0) 26%, rgba(13, 13, 12, 0) 40%, var(--ink) 62%); height: 62svh; min-height: 380px; max-height: 560px; }
  .hero__inner { grid-template-columns: 1fr; padding-top: 0; margin-top: -120px; padding-bottom: 56px; gap: 28px; }
  .hero__title { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .hero__lede { font-size: 1.2rem; }
  .hero__price { gap: 16px 28px; margin-top: 24px; padding-top: 20px; }
  .hero__price p:last-child { grid-column: 1 / -1; }
  .hero__ctas { display: grid; grid-template-columns: 1fr; }
  .hero__aside { justify-items: start; grid-template-columns: 1fr auto; align-items: center; width: 100%; padding-top: 20px; border-top: 1px solid var(--line-light); }
  .hero__specs { grid-auto-flow: column; gap: 20px; text-align: left; }
  .hero__specs strong { font-size: 1.6rem; }
  .hero__360 > span:last-child { display: none; }
  .hero__360-ring { width: 52px; height: 52px; }
  .hero__scroll { display: none; }

  .page-hero { min-height: 440px; }
  .h-display { font-size: clamp(2.4rem, 11vw, 3.6rem); }

  .cat-card { width: 70vw; }

  .why__grid { grid-template-columns: 1fr; }
  .why-card { min-height: 0; }

  .stats__grid { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .stat { padding: 0 0 0 16px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }

  .featured__item { width: 84vw; }
  .featured__item--end { width: 70vw; }
  .featured__all { min-height: 300px; }

  /* Process becomes a vertical timeline */
  .process__line { top: 0; bottom: 0; left: 9px; right: auto; width: 1px; height: auto; }
  .process__line span { transform-origin: top; }
  .process__steps { grid-template-columns: 1fr; gap: 36px; }
  .step { padding: 0 0 0 48px; }
  .step__num { font-size: 2.5rem; }

  .calc { grid-template-columns: 1fr; }
  .calc__monthly { font-size: 3.2rem; }

  .form__row { grid-template-columns: 1fr; }
  .segmented__opt span { font-size: 0.8125rem; min-height: 42px; }
  .drivers li { grid-template-columns: 96px 1fr 60px; }

  .testimonials__head { margin-bottom: 36px; }
  .testimonials__meta { justify-items: start; }

  .showrooms__list { grid-template-columns: repeat(2, 1fr); }
  .map { min-height: 340px; }
  .map__pin-label { display: none; }
  .map__pin.is-active .map__pin-label { display: block; }
  .booking__visual { min-height: 360px; }
  .booking__visual-copy { left: 22px; right: 22px; bottom: 22px; }

  .partners__grid { grid-template-columns: 1fr 1fr; }
  .partner { padding: 20px 16px; gap: 10px; }
  .partner__mark { width: 38px; height: 38px; font-size: 0.7rem; }
  .partner__name { font-size: 0.875rem; }

  .cta { min-height: 560px; }
  .cta__inner { padding-block: 96px; }
  .cta__buttons { display: grid; width: 100%; }

  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .site-footer__cols > :last-child { grid-column: 1 / -1; }
  .newsletter__field { flex-direction: column; border-radius: var(--r-lg); }
  .newsletter__field input { min-height: 48px; }
  .site-footer__bottom { padding-bottom: 96px; } /* room for sticky CTA */

  .sticky-cta {
    position: fixed; z-index: 80; left: 12px; right: 12px; bottom: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px; border-radius: 999px; background: rgba(251, 250, 247, 0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px -12px rgba(13, 13, 12, 0.4); border: 1px solid var(--line);
    transform: translateY(140%); transition: transform 0.5s var(--ease);
  }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta .btn { flex: 1; }
  .sticky-cta--detail p { padding-left: 14px; display: grid; line-height: 1.2; }
  .sticky-cta--detail strong { font-family: var(--f-display); font-stretch: 112%; font-size: 1.1rem; }
  .sticky-cta--detail span { font-size: 0.75rem; color: var(--muted); }
  .sticky-cta--detail .btn { flex: 0 0 auto; }
  .menu-open .sticky-cta { transform: translateY(140%); }

  .vgrid, .vgrid--3 { grid-template-columns: 1fr; }
  .inventory__bar { flex-wrap: wrap; }
  .inventory__tools { width: 100%; }
  .inventory__tools .select { flex: 1; min-width: 0; }

  .detail__nav { display: none; }
  .detail__price strong { font-size: 1.4rem; }
  .spec-table { grid-template-columns: 1fr; }
  .spec-tiles li { padding: 18px; }
  .spec-tiles strong { font-size: 1.3rem; }

  .story__facts { grid-template-columns: 1fr 1fr; }
  .policy-grid { grid-template-columns: 1fr; }
  .contact-list { grid-template-columns: 1fr; }
  .auth__body { padding: 32px 20px; }
  .toast-region { bottom: 88px; }
}

@media (max-width: 380px) {
  .hero__specs { gap: 14px; }
  .hero__specs strong { font-size: 1.35rem; }
  .showrooms__list { grid-template-columns: 1fr 1fr; }
  .segmented__opt span { font-size: 0.75rem; }
}

/* Pointer-specific affordances */
@media (hover: none) {
  .cursor-follow { display: none; }
  .vcard:hover, .cat-card a:hover, .plan:hover, .tcard:hover { transform: none; box-shadow: none; }
}

/* Plans 2-up between tablet sizes */
@media (min-width: 768px) and (max-width: 1023px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding-inline: 16px; }
  .stat dd { font-size: clamp(2.4rem, 6vw, 3.4rem); }
}