@charset "UTF-8";
/* =============================================================================
   AUTO DASPOL — designový systém
   =============================================================================

   Nahrazuje framework „Around" (theme.min.css, 316 kB) i Bootstrap CSS.
   Třídy rozvržení (container / row / col-* / utility) mají ZÁMĚRNĚ stejné názvy
   jako v Bootstrapu, aby se nemusely přepisovat šablony — jen se výrazně
   zeštíhlily a doplnily o vlastní komponenty.

   Kaskáda je řízená přes @layer, ne přes !important. Pořadí níže určuje, kdo
   koho přebíjí — pozdější vrstva vyhrává bez ohledu na specificitu selektoru.
   Díky tomu není nikde v souboru potřeba jediné !important.
   ========================================================================== */

/* Pořadí je podstatné: utility jsou ZÁMĚRNĚ poslední, aby přebily komponenty.
   Bez toho by např. .btn (komponenta) přebilo .d-none (utilita) a tlačítko
   označené jako skryté na mobilu by se stejně zobrazilo. */
@layer reset, tokens, base, grid, components, sections, utilities;

/* =============================================================================
   FONTY — hostované lokálně (rychlejší než Google Fonts a neposílá IP
   návštěvníků třetí straně, což je i vstřícnější ke GDPR)
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================================
   TOKENY
   ========================================================================== */

@layer tokens {
  :root {
    /* --- Barvy: inkoust --------------------------------------------------- */
    --ink:        #0B0C0E;   /* nadpisy, primární tlačítka */
    --ink-2:      #3D424B;   /* běžný text */
    --ink-3:      #6B7280;   /* sekundární text, popisky */
    --ink-4:      #9CA3AF;   /* nejtišší text, placeholdery */

    /* --- Barvy: plochy ---------------------------------------------------- */
    --canvas:     #F4F5F7;   /* pozadí stránky */
    --surface:    #FFFFFF;   /* karty, panely */
    --surface-2:  #FAFAFB;   /* jemně odsazená plocha uvnitř karty */
    --surface-3:  #EFF1F4;   /* placeholder obrázku, neaktivní stav */
    --inverse:    #0B0C0E;   /* tmavé sekce */

    /* --- Barvy: linky ----------------------------------------------------- */
    --line:       #E5E7EB;
    --line-2:     #D6DAE0;
    --line-soft:  rgba(11, 12, 14, 0.06);

    /* --- Barvy: akcenty --------------------------------------------------- */
    /* Vzaté přímo z loga B of B Cars (files/bob/logo-bob.svg): indigo a červená. */
    --accent:       #312782;   /* odkazy, aktivní stavy, fokus */
    --accent-ink:   #241C63;   /* accent po najetí */
    --accent-soft:  #ECEAF6;   /* podbarvení aktivního filtru */

    --sale:         #E20613;   /* slevové odznaky */
    --sale-deep:    #A80410;
    --sale-soft:    #FDECEE;

    --success:      #0F8A4C;
    --success-soft: #E8F6EE;

    /* --- Typografie ------------------------------------------------------- */
    --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

    /* Plynulá škála – roste se šířkou okna, žádné skoky na breakpointech */
    --fs-display: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
    --fs-h1:      clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
    --fs-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
    --fs-h3:      clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
    --fs-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-lead:    clamp(1rem, 0.96rem + 0.25vw, 1.1875rem);
    --fs-body:    1rem;
    --fs-sm:      0.875rem;
    --fs-xs:      0.8125rem;
    --fs-2xs:     0.75rem;

    --lh-tight:   1.08;
    --lh-snug:    1.25;
    --lh-normal:  1.6;

    /* Záporné prostrkání u velkých stupňů — bez něj působí displeje rozsypaně */
    --tracking-display: -0.035em;
    --tracking-head:    -0.022em;
    --tracking-wide:    0.08em;

    /* --- Odsazení (krok 4 px) --------------------------------------------- */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* Vertikální rytmus sekcí – na mobilu těsnější, na desktopu vzdušnější */
    --section-y: clamp(3rem, 1.75rem + 5vw, 6.5rem);

    /* --- Rádiusy ---------------------------------------------------------- */
    --r-xs:   8px;
    --r-sm:   12px;
    --r-md:   16px;
    --r-lg:   22px;
    --r-xl:   28px;
    --r-2xl:  36px;
    --r-pill: 999px;

    /* --- Stíny: vrstvené, měkké ------------------------------------------- */
    --sh-xs: 0 1px 2px rgba(11, 12, 14, 0.05);
    --sh-sm: 0 1px 2px rgba(11, 12, 14, 0.04), 0 2px 8px -2px rgba(11, 12, 14, 0.06);
    --sh-md: 0 1px 2px rgba(11, 12, 14, 0.04), 0 8px 24px -8px rgba(11, 12, 14, 0.10);
    --sh-lg: 0 2px 4px rgba(11, 12, 14, 0.04), 0 16px 40px -12px rgba(11, 12, 14, 0.14);
    --sh-xl: 0 4px 8px rgba(11, 12, 14, 0.04), 0 32px 64px -16px rgba(11, 12, 14, 0.18);
    --sh-focus: 0 0 0 3px rgba(11, 92, 246, 0.28);

    /* --- Pohyb ------------------------------------------------------------ */
    --ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:  0.15s;
    --dur:       0.25s;
    --dur-slow:  0.45s;

    /* --- Rozvržení -------------------------------------------------------- */
    --container:  1280px;
    --gutter:     clamp(1rem, 0.5rem + 2vw, 2rem);
    --header-h:   72px;

    /* --- Vrstvy ----------------------------------------------------------- */
    --z-sticky:  100;
    --z-header:  200;
    --z-overlay: 300;
    --z-modal:   400;
  }

  /* Kdo si přeje omezený pohyb, ten ho dostane omezený. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0.01ms;
      --dur:      0.01ms;
      --dur-slow: 0.01ms;
    }
  }
}


/* =============================================================================
   RESET
   ========================================================================== */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Kotvy nesmí zmizet pod lepivou hlavičkou */
    scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd,
  ul, ol {
    margin: 0;
  }

  ul[class], ol[class] {
    padding: 0;
    list-style: none;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  img { height: auto; }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button { background: none; border: 0; }

  /* Dlouhá slova (VIN, e-maily) nesmí rozjet layout */
  p, h1, h2, h3, h4, li, td, th, dd { overflow-wrap: break-word; }

  table { border-collapse: collapse; width: 100%; }

  [hidden] { display: none; }
}


/* =============================================================================
   ZÁKLAD
   ========================================================================== */

@layer base {
  body {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--ink-2);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
    /* Vodorovné přetečení je na mobilu nejčastější vada — tady se utne */
    overflow-x: clip;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-head);
    font-weight: 700;
    text-wrap: balance;   /* nadpis se nezlomí na osamocené slovo */
  }

  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-h2); line-height: 1.15; }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); }

  p { text-wrap: pretty; }

  a {
    color: inherit;
    text-decoration-color: var(--line-2);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease),
                text-decoration-color var(--dur-fast) var(--ease);
  }

  a:hover { color: var(--accent); text-decoration-color: currentColor; }

  /* Obrys jen pro klávesnici, ne po kliknutí myší */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  ::selection { background: var(--ink); color: #fff; }

  hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: var(--sp-8) 0;
  }

  strong, b { font-weight: 650; color: var(--ink); }

  small { font-size: var(--fs-sm); }
}


/* =============================================================================
   MŘÍŽKA — náhrada Bootstrap gridu se stejnými názvy tříd
   ========================================================================== */

@layer grid {
  .container,
  .container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container { max-width: var(--container); }

  .row {
    --gap-x: var(--sp-6);
    --gap-y: var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    /* Záporný okraj nesmí přesáhnout odsazení kontejneru, jinak řádek vyleze
       ze stránky. Týká se to g-5 na úzkých displejích: půlka mezery je 20 px,
       ale --gutter se pod 576 px zastaví na 16 px — a ty 4 px navíc na každé
       straně způsobily vodorovné posouvání. */
    margin-inline: calc(min(var(--gap-x) / 2, var(--gutter)) * -1);
    row-gap: var(--gap-y);
  }

  .row > * {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding-inline: calc(var(--gap-x) / 2);
  }

  /* Rozestupy g-0 … g-5 */
  .g-0 { --gap-x: 0; --gap-y: 0; }
  .g-1 { --gap-x: var(--sp-1); --gap-y: var(--sp-1); }
  .g-2 { --gap-x: var(--sp-2); --gap-y: var(--sp-2); }
  .g-3 { --gap-x: var(--sp-4); --gap-y: var(--sp-4); }
  .g-4 { --gap-x: var(--sp-6); --gap-y: var(--sp-6); }
  .g-5 { --gap-x: var(--sp-10); --gap-y: var(--sp-10); }

  .col     { flex: 1 0 0%; width: auto; }
  .col-auto { width: auto; }

  .col-1  { width: 8.3333%; }
  .col-2  { width: 16.6667%; }
  .col-3  { width: 25%; }
  .col-4  { width: 33.3333%; }
  .col-5  { width: 41.6667%; }
  .col-6  { width: 50%; }
  .col-7  { width: 58.3333%; }
  .col-8  { width: 66.6667%; }
  .col-9  { width: 75%; }
  .col-10 { width: 83.3333%; }
  .col-11 { width: 91.6667%; }
  .col-12 { width: 100%; }

  @media (min-width: 576px) {
    .col-sm     { flex: 1 0 0%; width: auto; }
    .col-sm-3   { width: 25%; }
    .col-sm-4   { width: 33.3333%; }
    .col-sm-6   { width: 50%; }
    .col-sm-12  { width: 100%; }
  }

  @media (min-width: 768px) {
    .col-md     { flex: 1 0 0%; width: auto; }
    .col-md-3   { width: 25%; }
    .col-md-4   { width: 33.3333%; }
    .col-md-5   { width: 41.6667%; }
    .col-md-6   { width: 50%; }
    .col-md-7   { width: 58.3333%; }
    .col-md-8   { width: 66.6667%; }
    .col-md-12  { width: 100%; }
  }

  @media (min-width: 992px) {
    .col-lg     { flex: 1 0 0%; width: auto; }
    .col-lg-2   { width: 16.6667%; }
    .col-lg-3   { width: 25%; }
    .col-lg-4   { width: 33.3333%; }
    .col-lg-5   { width: 41.6667%; }
    .col-lg-6   { width: 50%; }
    .col-lg-7   { width: 58.3333%; }
    .col-lg-8   { width: 66.6667%; }
    .col-lg-9   { width: 75%; }
    .col-lg-10  { width: 83.3333%; }
    .col-lg-12  { width: 100%; }
  }

  @media (min-width: 1200px) {
    .col-xl-3   { width: 25%; }
    .col-xl-4   { width: 33.3333%; }
    .col-xl-6   { width: 50%; }
    .col-xl-8   { width: 66.6667%; }
  }
}


/* =============================================================================
   UTILITY — jen ty, které šablony reálně používají
   ========================================================================== */

@layer utilities {
  /* --- Display ---------------------------------------------------------- */
  .d-none    { display: none; }
  .d-block   { display: block; }
  .d-inline-block { display: inline-block; }
  .d-flex    { display: flex; }
  .d-grid    { display: grid; }

  @media (min-width: 768px)  { .d-md-none { display: none; } .d-md-block { display: block; } .d-md-flex { display: flex; } }
  @media (min-width: 992px)  { .d-lg-none { display: none; } .d-lg-block { display: block; } .d-lg-flex { display: flex; } }
  @media (min-width: 1200px) { .d-xl-none { display: none; } .d-xl-block { display: block; } .d-xl-flex { display: flex; } }

  /* --- Flex ------------------------------------------------------------- */
  .flex-wrap    { flex-wrap: wrap; }
  .flex-nowrap  { flex-wrap: nowrap; }
  .flex-column  { flex-direction: column; }
  .flex-grow-1  { flex-grow: 1; }
  .flex-shrink-0 { flex-shrink: 0; }

  .justify-content-start   { justify-content: flex-start; }
  .justify-content-center  { justify-content: center; }
  .justify-content-end     { justify-content: flex-end; }
  .justify-content-between { justify-content: space-between; }

  .align-items-start   { align-items: flex-start; }
  .align-items-center  { align-items: center; }
  .align-items-end     { align-items: flex-end; }
  .align-items-stretch { align-items: stretch; }

  .gap-1 { gap: var(--sp-1); }
  .gap-2 { gap: var(--sp-2); }
  .gap-3 { gap: var(--sp-4); }
  .gap-4 { gap: var(--sp-6); }
  @media (min-width: 992px) { .gap-lg-3 { gap: var(--sp-4); } }

  /* --- Rozměry ---------------------------------------------------------- */
  .w-100 { width: 100%; }
  .h-100 { height: 100%; }
  .mw-100 { max-width: 100%; }
  /* Pozor: ZÁMĚRNĚ bez height:auto. Utility jsou v kaskádě poslední, takže by
     height:auto přebilo výšku u komponent, které fotku roztahují na celý
     rámeček (karta vozu). Výchozí height:auto pro <img> dává reset. */
  .img-fluid { max-width: 100%; }

  /* --- Odsazení --------------------------------------------------------- */
  .m-0 { margin: 0; }
  .mb-0 { margin-bottom: 0; }
  .mb-1 { margin-bottom: var(--sp-1); }
  .mb-2 { margin-bottom: var(--sp-2); }
  .mb-3 { margin-bottom: var(--sp-4); }
  .mb-4 { margin-bottom: var(--sp-6); }
  .mb-5 { margin-bottom: var(--sp-10); }

  .mt-0 { margin-top: 0; }
  .mt-2 { margin-top: var(--sp-2); }
  .mt-3 { margin-top: var(--sp-4); }
  .mt-4 { margin-top: var(--sp-6); }
  .mt-5 { margin-top: var(--sp-10); }

  .ms-3 { margin-inline-start: var(--sp-4); }
  .me-2 { margin-inline-end: var(--sp-2); }
  .mx-auto { margin-inline: auto; }

  .my-3 { margin-block: var(--sp-4); }
  .my-5 { margin-block: var(--sp-10); }

  @media (min-width: 992px) { .mb-lg-0 { margin-bottom: 0; } }

  .p-0 { padding: 0; }
  .p-3 { padding: var(--sp-4); }
  .p-4 { padding: var(--sp-6); }
  .p-5 { padding: var(--sp-10); }
  @media (min-width: 992px) { .p-lg-4 { padding: var(--sp-6); } .p-lg-5 { padding: var(--sp-10); } }

  .pt-5 { padding-top: var(--sp-10); }
  .pb-3 { padding-bottom: var(--sp-4); }
  .pb-5 { padding-bottom: var(--sp-10); }
  .py-2 { padding-block: var(--sp-2); }
  .py-3 { padding-block: var(--sp-4); }
  .py-5 { padding-block: var(--section-y); }
  .px-3 { padding-inline: var(--sp-4); }
  .px-4 { padding-inline: var(--sp-6); }

  /* --- Text ------------------------------------------------------------- */
  .text-start  { text-align: left; }
  .text-center { text-align: center; }
  .text-end    { text-align: right; }
  @media (min-width: 768px) { .text-md-start { text-align: left; } }

  .text-white  { color: #fff; }
  .text-dark   { color: var(--ink); }
  .text-muted  { color: var(--ink-3); }
  .text-light  { color: rgba(255, 255, 255, 0.72); }
  .text-accent { color: var(--accent); }
  .text-sale   { color: var(--sale); }

  .text-decoration-none { text-decoration: none; }
  .text-uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wide); }

  .fw-light    { font-weight: 400; }
  .fw-normal   { font-weight: 450; }
  .fw-semibold { font-weight: 600; }
  .fw-bold     { font-weight: 700; }

  .small { font-size: var(--fs-sm); }
  .lead  { font-size: var(--fs-lead); color: var(--ink-3); line-height: 1.55; }

  /* --- Plochy ----------------------------------------------------------- */
  .bg-light   { background: var(--surface-2); }
  .bg-dark    { background: var(--inverse); color: #fff; }
  .bg-white   { background: var(--surface); }
  .bg-canvas  { background: var(--canvas); }

  .position-relative { position: relative; }
  .position-absolute { position: absolute; }
  .overflow-hidden   { overflow: hidden; }

  .rounded     { border-radius: var(--r-md); }
  .rounded-lg  { border-radius: var(--r-lg); }
  .rounded-top { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .rounded-pill { border-radius: var(--r-pill); }

  .shadow-sm { box-shadow: var(--sh-sm); }
  .shadow    { box-shadow: var(--sh-md); }
  .shadow-lg { box-shadow: var(--sh-lg); }

  .border     { border: 1px solid var(--line); }
  .border-0   { border: 0; }
  .border-top { border-top: 1px solid var(--line); }

  /* --- Přístupnost ------------------------------------------------------ */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Odkaz „přeskočit na obsah" – viditelný jen při tabování */
  .skip-link {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: var(--z-modal);
    padding: var(--sp-3) var(--sp-5);
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-pill);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease-out);
  }
  .skip-link:focus { transform: translateY(0); color: #fff; }
}