/* Responsive layer for the live site. Inline styles carry the desktop design;
   container queries on [data-site-frame] reflow it for tablets and phones.
   Shared components (header, footer, cards, chat) are marked data-keep and handle their own layout. */
[data-site] img, [data-site] iframe, [data-site] video { max-width: 100%; }
[data-site-frame] { container: site / inline-size; }

@container site (max-width: 1180px) {
  [data-site] :is([style*="repeat(4"], [style*="repeat(5"], [style*="repeat(6"]):not([data-keep], [data-keep] *) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@container site (max-width: 1023px) {
  [data-site] [style*="grid-template-columns"]:not([data-keep], [data-keep] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-site] :is([style*="fr) minmax"], [style*="grid-template-columns: 2"], [style*="grid-template-columns: 3"]):not([style*="repeat("]):not([data-keep], [data-keep] *) { grid-template-columns: minmax(0, 1fr) !important; }
  [data-site] h1:not([data-keep] *) { font-size: clamp(40px, 7vw, 72px) !important; }
}

@container site (max-width: 819px) {
  [data-site] [style*="grid-template-columns"]:not([data-keep], [data-keep] *) { grid-template-columns: minmax(0, 1fr) !important; }
  [data-site] [data-m2]:not([data-keep] *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-site] h1:not([data-keep] *) { font-size: clamp(36px, 10.5vw, 52px) !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; }
  [data-site] h2:not([data-keep] *) { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.08 !important; }
  [data-site] h3:not([data-keep] *) { font-size: 20px !important; }
  [data-site] [data-big]:not([data-keep] *) { font-size: clamp(40px, 17vw, 64px) !important; line-height: .95 !important; }
  [data-site] :is([style*="font-size: 5"], [style*="font-size: 6"], [style*="font-size: 7"]):not([style*="font-size: 5px"], [style*="font-size: 6px"], [style*="font-size: 7px"], [style*="font-size: 5."], [style*="font-size: 6."], [style*="font-size: 7."]):not([data-big]):not([data-keep], [data-keep] *) { font-size: clamp(28px, 10.4vw, 40px) !important; line-height: 1 !important; overflow-wrap: break-word; }
  [data-site] [style*="font-size: 4"]:not([style*="font-size: 4px"], [style*="font-size: 4."]):not([data-keep], [data-keep] *) { font-size: clamp(26px, 8.6vw, 32px) !important; line-height: 1.05 !important; overflow-wrap: break-word; }
  /* Small tags above a heading ("Venta o intercambio · …"): wrap instead of running past the column. */
  [data-site] :is(span, div)[style*="align-self: flex-start"][style*="white-space: nowrap"]:not([data-keep], [data-keep] *) { white-space: normal !important; max-width: 100%; }
  [data-site] :is([style*="padding: 3"], [style*="padding: 4"], [style*="padding: 5"], [style*="padding: 6"], [style*="padding: 7"], [style*="padding: 8"]):not([style*="padding: 3px"], [style*="padding: 4px"], [style*="padding: 5px"], [style*="padding: 6px"], [style*="padding: 7px"], [style*="padding: 8px"]):not([data-keep], [data-keep] *) { padding: 22px 16px !important; }
  [data-site] [style*="padding: 20px"]:not([data-keep], [data-keep] *) { padding: 12px !important; }
  [data-site] [style*="margin: 0 20px"]:not([data-keep], [data-keep] *) { margin-left: 10px !important; margin-right: 10px !important; }
  [data-site] :is([style*="gap: 4"], [style*="gap: 5"], [style*="gap: 6"]):not([style*="gap: 4px"], [style*="gap: 5px"], [style*="gap: 6px"]):not([data-keep], [data-keep] *) { gap: 24px !important; }
  [data-site] [style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="border-radius: 999px"], [style*="border-radius: var(--r-pill)"], [style*="999px"] *, [style*="var(--r-pill)"] *):not([data-nowrap], [data-carousel], [data-marquee-row]):not([data-keep], [data-keep] *) { flex-wrap: wrap; }
  [data-site] [data-tall]:not([data-keep] *) { height: auto !important; min-height: 0 !important; }
  [data-site] [data-tall][style*="position: relative"]:not([data-keep] *) { height: 340px !important; }
  /* the site header stays sticky on phones too (engine 1.10): its wrapper holds the header itself */
  [data-site] [style*="position: sticky"]:not([data-keep], [data-keep] *):not(:has(> header)) { position: static !important; }
  [data-site] :is([style*="border-radius: 999px"], [style*="border-radius: var(--r-pill)"]):not([data-keep], [data-keep] *) { white-space: nowrap; max-width: 100%; }
  [data-site] [data-desk-only], [data-site] [data-mfilters][data-open="0"] { display: none !important; }
  [data-site] [data-carousel] { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px !important; grid-template-columns: none !important; scroll-behavior: smooth; }
  [data-site] [data-carousel]::-webkit-scrollbar { display: none; }
  [data-site] [data-carousel] > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
}
@container site (max-width: 1023px) {
  [data-site] [data-vd-main] { display: flex !important; flex-direction: column; gap: 12px !important; }
  [data-site] [data-vd-left] { display: contents !important; }
  [data-site] [data-vd-left] > * { order: 3; width: 100%; }
  [data-site] [data-vd-left] > [data-vd-gal] { order: 1; }
  [data-site] [data-vd-left] > [data-vd-thumbs] { order: 1; }
  [data-site] [data-vd-aside] { order: 2; width: 100%; }
  /* stacked layout: the side panel must not stay sticky, or it floats over Equipment / Similar vehicles while scrolling (seen at 892px) */
  [data-site] [data-vd-aside], [data-site] [data-vd-aside] [style*="position: sticky"] { position: static !important; top: auto !important; }
}
@container site (max-width: 819px) {
  [data-site] [data-vd-thumbs] { display: flex !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; margin-top: -4px; }
  [data-site] [data-vd-thumbs]::-webkit-scrollbar { display: none; }
  [data-site] [data-vd-thumbs] > button { flex: 0 0 calc((100% - 16px) / 3) !important; aspect-ratio: 4/3; border-radius: var(--r-sm) !important; }
}
@container site (min-width: 820px) {
  [data-site] [data-mob-only] { display: none !important; }
}
@container site (max-width: 819px) {
  [data-site] [data-qs-go] { min-height: 56px; padding: 0 22px !important; font-size: 16px !important; justify-content: center; margin-top: 6px; border-radius: var(--r-md) !important; }
}
@keyframes asMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


@container site (max-width: 819px) {
  [data-site] [data-budget-pills] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; gap: 8px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
  [data-site] [data-budget-pills] > a { display: flex !important; justify-content: space-between !important; align-items: center !important; min-height: 44px !important; padding: 10px 16px !important; background: var(--color-surface) !important; border: 1px solid var(--color-divider) !important; border-radius: var(--r-pill) !important; }
  [data-site] [data-budget-pills] { margin-top: 4px; }
}

[data-marquee-row] { flex-wrap: nowrap !important; width: max-content !important; }
[data-marquee-row] > * { flex: none; white-space: nowrap; }

@container site (max-width: 819px) {
  [data-site] [data-seg][data-seg][data-seg][style] { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; gap: 4px !important; border-radius: var(--r-md) !important; }
  [data-site] [data-seg][data-seg][data-seg][style] > * { min-height: 44px; }
}

/* Cards: two per row from tablets up to 1183px (three were too narrow next to the filter column, one per row left big empty gaps) */
@container site (min-width: 600px) and (max-width: 1183px) {
  [data-site] [data-results][style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Home "Latest arrivals": 2 x 2 grid on tablets instead of a one-card slider */
@container site (min-width: 600px) and (max-width: 819px) {
  [data-site] [data-carousel][style*="grid-template-columns"]:not([data-keep], [data-keep] *) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; flex-wrap: initial !important; }
  [data-site] [data-carousel] > * { flex: none; }
  [data-site] [data-slider-ctl] { display: none !important; }
}
/* Side column that stays sticky only while the page is two-column; stacked (<= 1023px) it must scroll with the page or it floats over the form */
@container site (max-width: 1023px) {
  [data-site] [data-unstick] { position: static !important; top: auto !important; }
}
/* While the site header component loads, its placeholder takes the real header height (78px compact header < 892px, 103px desktop), so the page below does not jump when it appears */
.sc-placeholder[title="Site Header"] { height: 103px !important; }
@media (max-width: 891.98px) { .sc-placeholder[title="Site Header"] { height: 78px !important; } }

/* Home hero above the fold on desktop and laptop (engine 1.12; window 1040 px wide or more, 125 % zoom included; below that the search bar breaks
   into two rows, the tablet layout, and the hero keeps its own height). The hero is as tall as the window minus the header and the part of the
   search bar that hangs below it (--hero-gap = header 103 + hero padding 20 + 38 px of the search bar), its text follows the window height, and
   the search bar ends before the chat button (--as-chat-room: the width the chat button needs, measured by the chat widget). The rating badge
   sits above the buttons (DOM order). src/page-shell.js draws the first paint with the same numbers. !important: the template sets these
   properties inline. */
@media (min-width: 1040px) {
  [data-hero-media] { --hero-gap: 161px; min-height: clamp(440px, calc(100vh - var(--hero-gap)), 1000px) !important; min-height: clamp(440px, calc(100svh - var(--hero-gap)), 1000px) !important; align-items: center !important; }
  [data-hero-content] { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 14px !important; row-gap: clamp(8px, 1.6vh, 20px) !important; padding-top: clamp(16px, 3.5vh, 56px) !important; padding-bottom: calc(52px + clamp(12px, 3vh, 48px)) !important; }
  [data-hero-content] > * { grid-column: 1 / -1; }
  [data-hero-content] > [data-google-rating] { justify-self: start; }
  [data-hero-h1] { font-size: clamp(32px, min(7vw, 8vh), 86px) !important; }
  [data-hero-sub] { font-size: clamp(16px, 2.4vh, 22px) !important; }
  [data-hero-text] { font-size: clamp(14.5px, 2.1vh, 19px) !important; line-height: 1.5 !important; }
  [data-hero-media] + div { padding-right: max(clamp(12px, 3vw, 40px), calc(var(--as-chat-room, 270px) - max(0px, (100vw - 1440px) / 2))) !important; }
}
/* short laptop windows (1366 x 768 at 125 % = 1093 x 615): the longer French hero still fits */
@media (min-width: 1040px) and (max-height: 660px) {
  [data-hero-content] { padding-top: clamp(12px, 3vh, 56px) !important; padding-bottom: calc(52px + clamp(10px, 2.6vh, 48px)) !important; }
  [data-hero-h1] { font-size: clamp(30px, min(7vw, 6.8vh), 86px) !important; }
}

/* Contact cards: with four cards (call, WhatsApp, email, visit) a 1024-1180 px window shows them two by two, not three plus one alone */
@container site (min-width: 1024px) and (max-width: 1180px) {
  [data-site] [data-ch-grid][style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Accordions (engine 1.12): the sign follows the state, "+" closed, "−" open, in every <details> accordion (FAQ, landing and extra pages);
   the Financing page's own accordion switches its sign in the template. */
details[open] > summary > span[aria-hidden="true"] { font-size: 0 !important; }
details[open] > summary > span[aria-hidden="true"]::after { content: "−"; font-size: 22px; line-height: 1; }

/* Phone: the "latest arrival" caption on the Home hero is hidden (it covers the photo and does not help); desktop and tablet keep it. */
@media (max-width: 819px) { [data-hero-car] { display: none !important; } }
/* Vehicle page: a long word or address in the dealer's description breaks inside the card instead of widening the page. */
[data-vd-desc], [data-vd-desc] > div { min-width: 0; max-width: 100%; }
[data-vd-desc] * { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }

/* Home about block: on desktop the left column (badge, heading, facts) stays under the header while the long text at the right scrolls, so no empty gap shows below it. */
@media (min-width: 1024px) { [data-about-left] { position: sticky; top: 112px; align-self: start; } }

/* Very narrow phones (320 px class): logo and the heart button shrink a little so logo, heart, search and menu fit in the header without overlap or side scroll. */
@media (max-width: 359px) {
  img[data-as-logo] { height: 24px !important; }
  header button[aria-expanded] { width: 40px !important; height: 40px !important; }
  [data-fav-btn] { width: 40px !important; height: 40px !important; }
}