/* ============================================================================
   11CARS — Responsive system layer
   ----------------------------------------------------------------------------
   Loaded LAST in the cascade (@import order in style.css:
   bootstrap → modules/cars.css → modules/responsive.css → custom.css), so every
   rule here is the last word at equal specificity — no !important needed except
   against the legacy nav (min-992/max-991) and swiper guards in responsive.css,
   which the homepage does not touch.

   This is the shared FLUID FOUNDATION for the whole site, built page by page.
   Homepage is the first page on it. Principles:

     1. One readable measure (--content-max) + fluid gutters that turn into a
        centering margin past the cap. A single `padding-inline: max(gutter,
        (100% - cap)/2)` per section fixes BOTH the ultra-wide bleed (>1600, no
        container cap existed) AND the small-screen cramping (<640) — the section
        background stays edge-to-edge while its content caps + centers. No wrapper
        element, no per-child max-width.

     2. Fluid vertical rhythm via clamp() instead of the old fixed 48/84/100px
        section padding.

     3. Grids reflow on a clean 1024 / 640 ladder (consistent with the legacy
        desktop-first max-width scheme) — no fixed column counts that overflow on
        phones (process was 5-across, why/reviews/footer never stacked, the
        compare strip used a `calc(50vw - 332px)` track that went negative).

   Section HEADINGS already use clamp() in cars.css — we don't redo type here.
   The live latest-cars grid (.api-cars-grid) is an inline <style> in cars.tpl
   (later in document order than this file), so its breakpoints are retuned at
   the template source, not here.
   ========================================================================== */

:root {
  --content-max: 1320px;                     /* readable measure cap */
  --gutter: clamp(20px, 5vw, 64px);          /* fluid horizontal page gutter */
  --section-pad-y: clamp(64px, 9vw, 112px);  /* fluid vertical section rhythm */
}

/* ── Breadcrumbs removed site-wide (per Hayo) ────────────────────────────────
   Hidden across catalog, dealer detail, auction lot, process, and the generic
   page-header. !important because each page defines its breadcrumb as display:flex
   in an inline <style> that loads AFTER this file in document order. */
.api-breadcrumb,
.lst-bc,
.lot-bc,
.proc-breadcrumb,
.pageheader-breadcrumb { display: none !important; }

/* ── Full-bleed background, capped + centered content ───────────────────────
   The max() side padding grows into a centering margin once the viewport passes
   the cap; below the cap it is just the fluid gutter. Backgrounds live on the
   section itself, so they stay edge-to-edge. */
.orient,
.why,
.process,
.listings-preview,
.reviews-section,
.cta-banner,
footer {
  padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
}

.orient,
.why,
.process,
.listings-preview,
.reviews-section,
.cta-banner {
  padding-block: var(--section-pad-y);
}

/* ── ORIENTATION ─────────────────────────────────────────────────────────── */
.orient-card {
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 60px);
}
.orient-num {
  font-size: clamp(96px, 12vw, 200px);
  top: clamp(24px, 3vw, 36px);
  right: clamp(24px, 4vw, 56px);
}
@media (max-width: 1024px) {
  .orient-grid { grid-template-columns: 1fr; }
  /* the two cards now stack — swap the vertical divider for a horizontal one */
  .orient-grid > .orient-card + .orient-card {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
}

/* Comparison strip — replace the fragile `220px calc(50vw - 332px) 1fr` track
   (the middle column went zero/negative below ~664px) with a robust 3-column
   layout, then fold the header away and stack label-over-values on phones. */
.compare-header,
.compare-row {
  grid-template-columns: minmax(110px, 1.1fr) 1fr 1fr;
  padding-inline: clamp(16px, 3vw, 48px);
}
@media (max-width: 560px) {
  .compare-header { display: none; }
  .compare-row {
    grid-template-columns: 1fr 1fr;
    padding-block: 12px;
  }
  .compare-row-label {
    grid-column: 1 / -1;
    text-align: center;
    padding: 0 0 6px;
  }
  .compare-row > * { padding: 8px 10px; font-size: 14px; }
}

/* ── WHY ─────────────────────────────────────────────────────────────────── */
.why-item {
  padding: clamp(28px, 3.5vw, 40px) clamp(22px, 3vw, 36px);
}
@media (max-width: 980px) {
  .why-header { grid-template-columns: 1fr; gap: clamp(14px, 3vw, 28px); }
}
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ── PROCESS ───────────────────────────────────────────────────────────────
   5 steps across only works as one row; the connector line is a single
   horizontal rule, so hide it the moment the steps wrap. */
@media (max-width: 1024px) {
  .process-steps { grid-template-columns: repeat(3, 1fr); row-gap: clamp(32px, 5vw, 48px); }
  .process-steps::before { display: none; }
}
@media (max-width: 560px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ── LISTINGS PREVIEW header (grid itself is inline in cars.tpl) ───────────── */
@media (max-width: 640px) {
  .listings-header { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── REVIEWS ───────────────────────────────────────────────────────────────── */
.fb-card { padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 26px); }
.rstat-num { font-size: clamp(26px, 3vw, 36px); }
@media (max-width: 1024px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-stats { gap: 24px; }
}

/* ── CTA BANNER ──────────────────────────────────────────────────────────────
   Keep the "11" ghost numeral proportional (it is clipped by the banner's
   overflow:hidden, so a fluid size just keeps it from dominating small screens). */
.cta-banner::after { font-size: clamp(150px, 26vw, 320px); }
@media (max-width: 860px) {
  .cta-banner { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  .cta-actions { min-width: 0; }
}
@media (max-width: 520px) {
  .cta-checklist { grid-template-columns: 1fr; }
}

/* ── FOOTER ──────────────────────────────────────────────────────────────────
   (global — lives in the page template, styled by cars.css site-wide). */
footer { padding-block: clamp(48px, 7vw, 72px) clamp(24px, 4vw, 36px); }
.footer-bottom { flex-wrap: wrap; gap: 16px; }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ── HERO polish ─────────────────────────────────────────────────────────────
   Hero layout already adapts (900px + short-laptop blocks in cars.css); just
   make the submit button height fluid so it matches the field rhythm. */
.hero-qs-btn { height: clamp(48px, 6vh, 52px); }

/* ── HEADER / NAV (global) ────────────────────────────────────────────────────
   The editorial nav had no mobile collapse — on narrow widths the links simply
   overflowed (cut off on the right). Add a burger drawer below 1024px, trim the
   wordmark, and align the bar's gutters to the page content measure. */

/* Bar gutters track the page content edge (logo lines up with section content
   on ultra-wide; comfortable gutter on phones — was a flat 48px). */
nav {
  padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
}

/* Smaller wordmark — was 180×72, filling the whole 72px bar with no breathing room. */
.brand-logo { height: 52px; width: 130px; }

/* Tighten the desktop nav (long localized labels like "КОЛИ ОТ ПРЕДСТАВИТЕЛСТВА"
   only fit ~1440+ at the original 36px gap) so the full row fits cleanly down to
   the 1280 burger line. The drawer below resets gap/size. */
.nav-links { gap: clamp(16px, 1.7vw, 30px); }
.nav-links a { font-size: 12.5px; letter-spacing: 1px; }

/* Burger trigger — hidden on desktop, shown in the drawer breakpoint below. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 210;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--gold-light);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Keep the wordmark + close button above the full-screen drawer overlay (z 120). */
.nav-logo { position: relative; z-index: 210; }
/* Lock the page behind the open full-screen menu. */
body.nav-open { overflow: hidden; }

@media (max-width: 1366px) {
  .nav-burger { display: flex; }

  /* nav's backdrop-filter makes it the containing block for position:fixed
     descendants — which would trap the overlay to the 72px bar. Drop it here so
     the .nav-links overlay is sized against the real viewport (true full-screen). */
  nav { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Solid top-bar strip while the drawer is open. The overlay's items scroll UP
     under the 72px bar, and the logo has a transparent background, so the items
     showed through it. This opaque strip sits ABOVE the overlay (z:120) and BELOW
     the logo/X (z:210), so the bar always reads solid. (Scoped to .is-open so the
     closed sticky header keeps its translucent-on-scroll look.) */
  nav.is-open::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 72px;
    background: var(--black);
    border-bottom: 1px solid rgba(184,151,90,0.15);
    z-index: 150;
    pointer-events: none;
  }

  /* .nav-links becomes a FULL-SCREEN overlay; the bar's space-between now lays
     out [logo | burger], both kept above it via z-index. */
  .nav-links {
    position: fixed;
    inset: 0;                          /* FULL-SCREEN opaque overlay */
    z-index: 120;                      /* above the page, below the bar's logo + X (210) */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: none;
    overflow-y: auto;
    padding: 88px var(--gutter) 40px;  /* clear the 72px bar; links start below it */
    background: var(--black);          /* fully opaque — nothing shows through */
    border: 0;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  nav.is-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .nav-links > li {
    width: 100%;
    align-items: stretch;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links > li:first-child { border-top: 0; }
  .nav-links > li > a {
    width: 100%;
    padding: 15px 4px;
    font-size: 14px;
  }

  /* Account / generic dropdowns expand inline (stacked) instead of floating. */
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    width: 100%;
    padding: 0 0 10px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-dropdown::before { display: none; }
  .has-dropdown:not(.open) > .nav-dropdown { display: none; }

  /* Account dropdown — force the stacked, full-width inline layout in the drawer
     (belt-and-suspenders over the .nav-dropdown reset above). It was rendering as
     a narrow, right-anchored absolute panel that overflowed the screen and clipped
     the longer labels ("Настройки на акаунта" → "…акаун"). */
  .nav-account .nav-dropdown {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }
  .nav-account .nav-dropdown a { white-space: normal; }

  /* The base `.nav-links > li { display:flex }` (desktop row, for vertical
     centring) made the account trigger and its dropdown sit SIDE BY SIDE in the
     drawer (trigger left, menu clipped on the right). Stack has-dropdown items in
     a column so the menu drops full-width BELOW its trigger. */
  .nav-links > li.has-dropdown { flex-direction: column; align-items: stretch; }

  /* Language picker (BG / EN) — the generic `.nav-links > li > a { width:100% }`
     drawer rule above was stretching each option full-width, so BG/EN spread apart
     and the "/" separator sat misaligned. Keep them a tight, vertically-centred
     inline group with auto-width options. */
  .nav-lang { padding: 12px 4px; gap: 12px; align-items: center; }
  .nav-lang .lang-opt { width: auto; padding: 6px 10px; font-size: 15px; }
  .nav-lang .lang-sep { align-self: center; line-height: 1; }
  .nav-auth,
  .nav-account { margin-left: 0; padding-left: 4px; }
  .nav-auth::before,
  .nav-account::before { display: none; }

  .nav-cta {
    display: block !important;
    text-align: center;
    margin-top: 16px;
    padding: 14px 22px !important;
  }

  /* Burger → X */
  nav.is-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 560px) {
  .brand-logo { height: 44px; width: 110px; }
}

/* ── HERO — let the car read through ──────────────────────────────────────────
   The car was buried under a heavy scrim + a dimmed background. Brighten the
   photo and thin the central darkening, while keeping a strong bottom gradient
   so the quick-search dock and headline stay legible (they also carry their own
   text-shadows). */
.hero-bg { filter: saturate(0.96) contrast(1.05) brightness(1.07); background-position: center 48%; }
/* Mobile hero — a portrait crop of the BMW frames the car on tall phone screens
   (the landscape desktop shot crops the car awkwardly under cover). Swap by
   display so each div keeps its own inline image + the shared cover/Ken-Burns. */
.hero-bg-mobile { display: none; }
@media (max-width: 640px) {
  .hero-bg-desktop { display: none; }
  .hero-bg-mobile  { display: block; background-position: center 44%; }
  /* (mobile hero-scrim is lightened in cars.css to suit this portrait crop) */
}
.hero-scrim {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.12) 22%, transparent 42%),
    radial-gradient(ellipse 66% 62% at 50% 45%, rgba(8, 8, 9, 0.28) 0%, rgba(8, 8, 9, 0.10) 55%, transparent 80%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.45) 9%, rgba(10, 10, 10, 0.16) 24%, transparent 44%);
}

/* Gentler ken-burns — the original scaled 1.06 → 1.13 (the car read too tight /
   "zoomed"). Pull it back to a subtle 1.0 → 1.04 breathe so more of the scene
   shows. Same @keyframes name as cars.css → this later definition wins. */
@keyframes heroKb {
  from { transform: scale(1.0); }
  to   { transform: scale(1.04) translate3d(-0.8%, -0.4%, 0); }
}

/* ── Mobile hero (≤768) ───────────────────────────────────────────────────────
   Phones KEEP the car photo — a portrait crop of the BMW (the .hero-bg toggle
   above swaps it in ≤640) + its scrim for headline/search legibility. Only the
   heavier cinematic overlays (spotlight, warm floor, corners, lift, grain, gold
   letterbox) drop out for a cleaner phone stage. */
@media (max-width: 768px) {
  .hero-spot,
  .hero-floor-warm,
  .hero-corners,
  .hero-lift,
  .hero-grain,
  .lbx { display: none; }

  .hero { min-height: auto; }
  .hero-content { padding-top: clamp(104px, 20vh, 156px); }
  .hero-qs { margin-bottom: clamp(40px, 7vh, 64px); }
}

/* ── Eyebrow legibility ── the gold "ВНОС ОТ САЩ · …" tracked label can sit over a
   bright patch of the hero photo (sky / buildings); a tighter dark halo keeps it
   readable on any frame. */
.hero-tag span {
  color: var(--gold-light, #d4b87a);
  text-shadow:
    0 0 4px rgba(0,0,0,1),
    0 0 9px rgba(0,0,0,.95),
    0 0 18px rgba(0,0,0,.85),
    0 1px 3px rgba(0,0,0,1);
}
/* darken the gold connector dashes' surround too so the whole row reads */
.hero-tag::before, .hero-tag::after { filter: drop-shadow(0 0 3px rgba(0,0,0,.9)); }

/* ── Country flags (SVG <img>, not emoji — flag emoji don't render on Windows).
   country_flag() helper outputs <img class="flag-img">. Height tracks the
   surrounding text so it scales in every context (cards, tabs, section icons). ── */
img.flag-img {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -0.14em;
  border-radius: 2px;
  object-fit: contain;
}