/* ==========================================================================
   X3von Cars — Responsive Layer
   Breakpoints: 1440 / 1200 / 1024 / 860 / 640 / 420
   Loaded after style.css so these declarations win at equal specificity.
   ========================================================================== */

/* Large desktop ------------------------------------------------------------ */
@media (min-width: 1600px) {
  :root { --shell: 1440px; }
  .hero__content { max-width: 66rem; }
}

/* Desktop ------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .detail__layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .inventory { grid-template-columns: 264px 1fr; }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }

  .calc { grid-template-columns: 1fr 330px; }
  .review { flex: 0 0 calc((100% - var(--gap)) / 2); }
}

/* Small laptop / large tablet ---------------------------------------------- */
@media (max-width: 1024px) {
  :root { --nav-h: 68px; }

  .nav__links { display: none; }
  .burger { display: grid; order: 99; }
  .nav__actions .btn--primary { display: none; }

  .hero { min-height: 92svh; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }

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

  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; gap: 2rem; }

  /* Inventory: filters become a full-screen sheet */
  .inventory { grid-template-columns: 1fr; }
  .filter-trigger { display: inline-flex; }
  .filters {
    position: fixed;
    inset: 0;
    z-index: 100;
    max-height: none;
    border: 0;
    border-radius: 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow) var(--ease-out);
    padding-top: env(safe-area-inset-top, 0);
  }
  .filters.is-open { transform: none; visibility: visible; }
  .filters__foot { display: grid; grid-template-columns: 1fr 1.4fr; }
  .filters__head h2 { font-size: 1.05rem; letter-spacing: 0.06em; text-transform: none; color: var(--text); }

  /* Vehicle detail becomes single column, panel un-sticks. The main column's
     wrapper dissolves so the price panel can be ordered straight after the
     gallery instead of trailing every content block. */
  .detail__layout { grid-template-columns: 1fr; gap: 0; }
  .detail__layout > div { display: contents; }
  .detail__title-row { order: -3; }
  .detail__layout [data-gallery] { order: -2; }
  .buy-panel { position: static; order: -1; margin-top: 1.25rem; }

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

  .mosaic { grid-auto-rows: 160px; }

  .compare-bar { bottom: 5rem; }
  .fab-whatsapp { bottom: 5.25rem; }
  .toast-stack { bottom: 5.25rem; }
  .mobile-bar { display: grid; }
  body { padding-bottom: 62px; }
}

/* Tablet ------------------------------------------------------------------- */
@media (max-width: 860px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }

  .results-grid.is-list .car-card { flex-direction: column; }
  .results-grid.is-list .car-card__media { width: 100%; aspect-ratio: 16 / 10; }
  .results-grid[data-featured] > :nth-child(n+5) { display: none; }

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

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  .review { flex: 0 0 100%; }

  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic figure:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .mosaic figure:nth-child(4) { grid-column: span 2; }

  .detail__title-row { flex-direction: column; }
  .spec-list dt, .spec-list dd { font-size: 0.86rem; }
}

/* Tablet & below: horizontal reveal offsets would push content past the
   viewport edge before they animate in — reveal vertically instead. */
@media (max-width: 860px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translate3d(0, 28px, 0); }
}

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --gap: 0.9rem; }

  h1 { font-size: clamp(2.15rem, 10vw, 3rem); }

  .hero { min-height: 88svh; padding-bottom: 4.5rem; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
  .hero__cta .btn { width: 100%; }
  .hero__stat { padding: 1rem 1.1rem; }

  .grid--4,
  .grid--3,
  .grid--2 { grid-template-columns: 1fr; }

  .steps--4 { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }

  .results-grid { grid-template-columns: 1fr; }
  .results-grid[data-featured] > :nth-child(n+4) { display: none; }

  .inv-toolbar { gap: 0.7rem; }
  .inv-toolbar__count { width: 100%; }
  .search-bar { min-width: 100%; }
  .view-toggle { display: none; }
  .select-wrap { flex: 1; }
  .select-wrap select { width: 100%; }

  /* Vehicle detail: dense phone layout — the same information in far less
     height. Title and tools share a row, the price panel is compact, lists go
     two-up, secondary blocks fold or shrink to rows. */
  .detail__crumbs { padding-block: 0.8rem 0.2rem; font-size: 0.78rem; }
  .detail__title-row { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; }
  .detail__title { min-width: 0; }
  .detail__title .cluster { margin-bottom: 0.5rem !important; }
  .detail__title h1 { font-size: 1.55rem; line-height: 1.1; }
  .detail__title .car-card__variant { font-size: 0.88rem; margin-top: 0.2rem; }
  .detail__key-line { font-size: 0.8rem; gap: 0.3rem 0.6rem; margin-top: 0.6rem; }
  .detail__key-line li + li::before { margin-right: 0.35rem; height: 11px; }
  .detail__tools { flex: none; gap: 0.4rem; }
  .detail__tools .icon-btn { width: 36px; height: 36px; }
  .detail__tools .icon-btn svg { width: 16px; height: 16px; }
  .hide-phone { display: none; }

  .gallery { gap: 0.5rem; }
  .gallery__thumbs { grid-auto-columns: 60px; }
  .gallery__nav { width: 40px; height: 40px; }

  .buy-panel { margin-top: 0.85rem; }
  .buy-panel__price { padding: 0.95rem 1.05rem 0.85rem; }
  .buy-panel__value { font-size: 1.75rem; margin-top: 0.2rem; }
  .buy-panel__finance { margin-top: 0.6rem; padding-top: 0.6rem; font-size: 0.8rem; }
  .buy-panel__actions { padding: 0.85rem 1.05rem; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .buy-panel__actions > :first-child { grid-column: 1 / -1; }
  .buy-panel__actions .btn { min-height: 42px; padding: 0.7rem 0.9rem; font-size: 0.74rem; gap: 0.45rem; }
  .buy-panel__split { grid-template-columns: 1fr; }
  .buy-panel__meta { padding: 0.75rem 1.05rem; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.8rem; font-size: 0.76rem; }
  .buy-panel__meta li { align-items: flex-start; gap: 0.45rem; line-height: 1.35; }
  .buy-panel__meta svg { width: 13px; height: 13px; margin-top: 2px; }

  .detail-block { padding-block: 1.3rem; }
  .detail-block > h2 { font-size: 1.12rem; margin-bottom: 0.8rem; }
  .detail__layout { padding-bottom: 1.25rem; }

  .highlights { grid-template-columns: 1fr 1fr; }
  .highlight { padding: 0.65rem 0.75rem; font-size: 0.76rem; gap: 0.5rem; line-height: 1.3; }
  .highlight svg { width: 15px; height: 15px; }

  .about-card { padding: 1.05rem; }
  .about-card__content { margin-bottom: 0.9rem; }
  .about-card__title { font-size: 1.05rem; margin-bottom: 0.45rem; }
  .about-card__intro { font-size: 0.88rem; line-height: 1.55; }
  .about-card__intro.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }

  .spec-tiles { grid-template-columns: 1fr 1fr; gap: 0.55rem 0.9rem; padding-top: 0.9rem; }
  .spec-tile { display: grid; grid-template-columns: 18px 1fr; column-gap: 0.55rem; align-items: center; }
  .spec-tile svg { grid-row: 1 / 3; width: 18px; height: 18px; margin: 0; }
  .spec-tile dt { font-size: 0.64rem; margin: 0; line-height: 1.2; }
  .spec-tile dd { font-size: 0.84rem; line-height: 1.25; }

  .spec-groups { gap: 1rem; }
  .spec-group h3 { font-size: 0.66rem; padding-bottom: 0.45rem; margin-bottom: 0.15rem; }
  .spec-list dt, .spec-list dd { padding: 0.42rem 0; font-size: 0.8rem; }

  .feature-col { padding: 0.8rem 0.95rem; }
  .feature-col__head { margin-bottom: 0; cursor: pointer; gap: 0.55rem; }
  .feature-col__head h3 { font-size: 0.86rem; }
  .feature-col__head > svg:first-child { width: 15px; height: 15px; }
  .feature-col__head > svg:last-child { display: block; }
  .feature-col[open] .feature-col__head { margin-bottom: 0.7rem; }
  .feature-col[open] .feature-col__head > svg:last-child { transform: rotate(180deg); }
  .feature-col ul { grid-template-columns: 1fr 1fr; gap: 0.38rem 0.7rem; }
  .feature-col li { font-size: 0.76rem; gap: 0.35rem; line-height: 1.35; }
  .feature-col li svg { width: 12px; height: 12px; margin-top: 2px; }

  /* Finance: folded behind one row; the sliders lose their scale captions */
  #finance-calc > .muted { display: none; }
  .fold > .fold__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
  }
  .fold > .fold__summary svg { width: 18px; height: 18px; color: var(--gold); flex: none; transition: transform var(--t) var(--ease); }
  .fold[open] > .fold__summary { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
  .fold[open] > .fold__summary svg { transform: rotate(180deg); }
  .fold[open] > .calc { border-radius: 0 0 var(--r-md) var(--r-md); }
  .calc__inputs, .calc__result { padding: 1rem; }
  .calc__inputs { gap: 1.05rem; }
  .calc__vehicle { padding-bottom: 0.85rem; }
  .calc-field__scale { display: none; }
  .calc-field .field__hint { display: none; }
  .calc__monthly { padding-bottom: 0.85rem; }
  .calc__breakdown { margin-top: 0.7rem; }
  .calc__row { padding: 0.48rem 0; font-size: 0.8rem; }
  .calc__disclaimer { margin-top: 0.85rem; padding: 0.65rem 0.75rem; font-size: 0.68rem; }

  /* Buying steps 2×2, assurance cards become icon rows */
  .detail .steps--4 { grid-template-columns: 1fr 1fr; }
  .detail .step { padding: 0.8rem 0.85rem; }
  .detail .step::before { font-size: 0.64rem; margin-bottom: 0.35rem; }
  .detail .step h3 { font-size: 0.86rem; }
  .detail .step p { font-size: 0.74rem; margin-top: 0.25rem; line-height: 1.45; }
  .detail .grid--3 { gap: 0.55rem; }
  .detail .value-card { display: grid; grid-template-columns: 36px 1fr; column-gap: 0.75rem; align-items: center; padding: 0.8rem 0.9rem; }
  .detail .value-card__icon { width: 36px; height: 36px; margin: 0; grid-row: 1 / 3; }
  .detail .value-card__icon svg { width: 16px; height: 16px; }
  .detail .value-card h3 { font-size: 0.9rem; }
  .detail .value-card p { margin-top: 0.15rem; font-size: 0.76rem; line-height: 1.45; }

  /* Similar stock swipes sideways instead of stacking three full cards */
  .detail .section--alt { padding-block: 1.6rem 1.9rem; }
  .detail .section-head { margin-bottom: 0.9rem; gap: 0.4rem; }
  .detail [data-similar] {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--shell-pad));
    padding: 0 var(--shell-pad) 0.25rem;
  }
  .detail [data-similar]::-webkit-scrollbar { display: none; }
  .detail [data-similar] .car-card { flex: 0 0 74%; scroll-snap-align: start; }
  .lightbox__thumbs { display: none; }

  .form-card { padding: 1.25rem; }

  .modal { padding: 0; place-items: end stretch; }
  .modal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
  }
  .modal.is-open .modal__panel { transform: none; }
  /* The sold / reserved notice stays a centred card on phones rather than
     becoming a bottom sheet like the enquiry form. */
  .modal--status { padding: 1.25rem; place-items: center; }
  .modal--status .modal__panel { width: 100%; max-width: 460px; max-height: none; border-radius: var(--r-lg); transform: translateY(14px); }
  .modal--status.is-open .modal__panel { transform: none; }
  .modal__head { padding: 1.25rem 1.25rem 1rem; }
  .modal__body { padding: 1.25rem; }

  .compare-bar {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    transform: translate(0, 200%);
    padding: 0.75rem;
    gap: 0.6rem;
  }
  .compare-bar.is-visible { transform: none; }
  .compare-bar__label { display: none; }
  .compare-bar__actions .btn span { display: none; }

  .fab-whatsapp span { display: none; }
  .fab-whatsapp { padding: 0.9rem; right: 1rem; gap: 0; }

  .toast-stack { left: 1rem; right: 1rem; }
  .toast { max-width: none; }

  .footer__top { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer__links--columns { grid-template-columns: 1fr; gap: 0.75rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
  .footer__legal { gap: 1rem; }

  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .mosaic figure:nth-child(1),
  .mosaic figure:nth-child(4) { grid-column: span 1; }

  .carousel-dots button { width: 16px; }
  .carousel-dots button[aria-current="true"] { width: 26px; }

  .compare-table tbody th { position: static; width: 130px; }
  .prose h2 { margin-top: 2.25rem; }
}

/* Small mobile ------------------------------------------------------------- */
@media (max-width: 420px) {
  .brand__sub { display: none; }
  .stats-strip { grid-template-columns: 1fr; }
  .radio-row { display: grid; grid-template-columns: 1fr; }
  .mobile-bar a, .mobile-bar button { font-size: 0.6rem; }
}

/* Landscape phones --------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 620px; }
  .hero__stats { display: none; }
  .drawer { overflow-y: auto; }
  .drawer__link { font-size: 1.2rem; padding: 0.7rem 0; }
}

/* Pointer-coarse tuning ---------------------------------------------------- */
@media (hover: none) {
  .btn:hover { transform: none; }
  .car-card:hover { transform: none; }
  .footer__links a:hover { padding-left: 0; }
}

/* Print -------------------------------------------------------------------- */
@media print {
  :root { --bg: #fff; --text: #111; --text-2: #333; --text-3: #666; }
  body { background: #fff; color: #111; padding-bottom: 0; }
  .nav, .drawer, .fab-whatsapp, .mobile-bar, .compare-bar, .toast-stack,
  .marquee, .buy-panel__actions, .filters, .read-progress { display: none !important; }
  .detail__layout { grid-template-columns: 1fr; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #666; }
  .car-card, .value-card, .form-card { border: 1px solid #ddd; break-inside: avoid; }
}