/*
  Nová podoba — webové stránky pro firmy.

  Záměrně jeden světlý vzhled, ne přepínání motivů: stránka se posílá
  v odkazu z e-mailu a otevírá se na telefonu majitele autoservisu.
  Ten nemá nastavený tmavý režim a nechceme, aby mu hrdina stránky
  vyšel jinak, než jsme ho navrhli. Všechny barvy jsou proto uvedené
  napevno, nic se nedědí z prohlížeče.
*/

:root {
    --papir:     #f3f2ef;
    --plocha:    #ffffff;
    --plocha-2:  #faf9f7;
    --inkoust:   #16181c;
    --inkoust-2: #41464f;
    --tlumeny:   #6d727c;
    --linka:     #dedcd7;
    --linka-2:   #eceae6;
    --znacka:    #9b5a18;
    --znacka-t:  #8a5015;
    --znacka-s:  #f4e7d6;
    --dobre:     #1f6b4e;
    --stin:      0 1px 2px rgba(20, 24, 28, .05), 0 12px 32px -16px rgba(20, 24, 28, .22);

    --sirka:     1140px;
    --text:      70ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--papir);
    color: var(--inkoust);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .zn {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-variation-settings: "wdth" 110;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
}

p { margin: 0 0 1em; color: var(--inkoust-2); }
p:last-child { margin-bottom: 0; }
strong { color: var(--inkoust); font-weight: 600; }

a { color: var(--znacka-t); text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--znacka);
    outline-offset: 3px;
    border-radius: 2px;
}

.obal { max-width: var(--sirka); margin-inline: auto; padding-inline: 22px; }

/* ---------- hlavička ---------- */

.hlavicka {
    border-bottom: 1px solid var(--linka);
    background: var(--plocha);
}
.hlavicka .obal {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: 72px; flex-wrap: wrap;
}
.zn {
    font-variation-settings: "wdth" 80;
    font-weight: 800; font-size: 19px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--znacka-t); text-decoration: none;
}
.hlavicka nav { display: flex; gap: 22px; font-size: 15.5px; }
.hlavicka nav a { color: var(--inkoust-2); text-decoration: none; }
.hlavicka nav a:hover { color: var(--inkoust); text-decoration: underline; }

/* ---------- úvodní blok ---------- */

.uvod { padding: 64px 0 20px; }
h1 {
    font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.5rem);
    font-weight: 800;
    font-variation-settings: "wdth" 94;
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 19ch;
}
h1 em { font-style: normal; color: var(--znacka-t); }
.perex {
    margin-top: 20px; max-width: 58ch;
    font-size: 1.17rem; line-height: 1.55; color: var(--inkoust-2);
}

/* ---------- posuvník před a po ---------- */

.posuvnik-blok { padding: 34px 0 10px; }

.posuvnik {
    position: relative;
    width: 100%;
    /* Poměr drží proměnná, kterou přepisuje skript na snímky — rám se tak
       vždycky shoduje s tím, co je na obrázku, a nic se neořízne. */
    aspect-ratio: var(--pomer-snimku, 1000 / 640);
    overflow: hidden;
    border: 1px solid var(--linka);
    border-radius: 6px;
    box-shadow: var(--stin);
    background: var(--plocha);
    touch-action: pan-y;
    cursor: ew-resize;
    user-select: none;
}
.posuvnik img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: top center;
    display: block;
    pointer-events: none;
}
/* Nová podoba leží pod starou; odkrývá se ořezem té horní. */
.posuvnik .vrstva-pred {
    z-index: 2;
    clip-path: inset(0 calc(100% - var(--deleni, 50%)) 0 0);
}
.posuvnik .tahlo {
    position: absolute; top: 0; bottom: 0;
    left: var(--deleni, 50%);
    width: 2px; margin-left: -1px;
    background: var(--znacka);
    z-index: 3;
}
.posuvnik .tahlo::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: var(--znacka);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.posuvnik .tahlo::before {
    content: "‹ ›";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff; font-size: 19px; letter-spacing: .1em;
    font-family: "IBM Plex Sans", sans-serif;
}
.posuvnik .stitek {
    position: absolute; top: 14px; z-index: 4;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 11px; border-radius: 3px;
    background: rgba(22, 24, 28, .84); color: #fff;
    pointer-events: none;
}
.posuvnik .stitek-pred { left: 14px; }
.posuvnik .stitek-po { right: 14px; background: var(--dobre); }

.posuvnik-popis {
    margin-top: 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12.5px; color: var(--tlumeny);
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* ---------- oddíly ---------- */

section { padding: 60px 0; }
section + section { border-top: 1px solid var(--linka); }

.nadpis { margin-bottom: 26px; }
.oznaceni {
    display: block; margin-bottom: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--znacka-t);
}
h2 {
    font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem);
    font-weight: 700;
}
.podnadpis { margin-top: 12px; max-width: var(--text); color: var(--tlumeny); }

.mrizka-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 18px; }
.mrizka-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 18px; }

.karta {
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: 5px;
    padding: 26px;
    min-width: 0;
}
.karta h3 { font-size: 1.1rem; margin-bottom: 9px; }
.karta p { font-size: .96rem; }

/* ---------- ceník ---------- */

.nabidka { position: relative; }
.nabidka.doporucena { border-color: var(--znacka); border-width: 2px; padding: 25px; }
.odznak {
    display: inline-block; margin-bottom: 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 3px;
    background: var(--znacka-s); color: var(--znacka-t);
}
.odznak.tlumeny { background: var(--plocha-2); color: var(--tlumeny); }
.cena {
    font-family: Archivo, sans-serif;
    font-variation-settings: "wdth" 86;
    font-weight: 800; font-size: 2.3rem; line-height: 1;
    letter-spacing: -0.03em; color: var(--inkoust);
    font-variant-numeric: tabular-nums;
    margin: 6px 0;
}
.cena small {
    display: block; margin-top: 7px;
    font-family: "JetBrains Mono", monospace;
    font-size: .82rem; font-weight: 400; letter-spacing: 0; color: var(--tlumeny);
}
.nabidka ul { list-style: none; margin: 18px 0 0; padding: 0; font-size: .96rem; }
.nabidka li {
    position: relative; padding: 8px 0 8px 22px;
    border-top: 1px solid var(--linka-2); color: var(--inkoust-2);
}
.nabidka li::before { content: "—"; position: absolute; left: 0; color: var(--znacka); }

/* Tři velikostní hladiny vedle sebe. Karta nese dvě ceny, takže číslo
   musí být menší než u dvousloupcového ceníku — jinak se dva velké
   údaje na jedné kartě perou o pozornost a nevyhraje ani jeden. */

.hladiny .cena { font-size: 1.85rem; margin: 4px 0 0; }
.hladiny .cena-mala { font-size: 1.35rem; color: var(--inkoust-2); }
.hladiny .cena-mala em {
    font-style: normal; font-size: .72em; font-weight: 700;
    color: var(--znacka-t); white-space: nowrap;
}
.hladiny .cena small { margin-top: 5px; font-size: .74rem; }

.kdo {
    margin: 0 0 14px;
    font-size: .88rem; line-height: 1.45; color: var(--tlumeny);
}
/* Popis „pro koho" se v jedné kartě zalomí na dva řádky a v jiné ne.
   Bez rezervy na dva řádky by ceny v sousedních kartách nebyly ve
   stejné výšce a sloupce by se vizuálně rozjely. */
@media (min-width: 760px) {
    .kdo { min-height: 2.9em; }
}

/* Vodorovná linka se slovem „nebo" uprostřed — odděluje obě platby,
   aby si je nikdo nepřečetl jako jednu cenu složenou dohromady. */
.nebo {
    display: flex; align-items: center; gap: 10px;
    margin: 15px 0 11px;
}
.nebo::before, .nebo::after {
    content: ""; flex: 1; height: 1px; background: var(--linka-2);
}
.nebo span {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tlumeny);
}

.hladiny .odznak { white-space: normal; }

/* ---------- co je ve všech variantách ---------- */

.spolecne {
    margin-top: 18px;
    background: var(--plocha-2);
    border: 1px solid var(--linka);
    border-radius: 5px;
    padding: 24px 26px;
}
.spolecne h3 { font-size: 1.02rem; margin-bottom: 14px; }
.spolecne > ul {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 5px 22px;
    font-size: .93rem; color: var(--inkoust-2);
}
.spolecne > ul li { position: relative; padding-left: 20px; }
.spolecne > ul li::before {
    content: "✓"; position: absolute; left: 0;
    color: var(--dobre); font-weight: 700;
}
.spolecne-pozn {
    margin: 0; padding-top: 16px;
    border-top: 1px solid var(--linka);
    font-size: .92rem; max-width: var(--text);
}

/* ---------- postup ---------- */

.kroky { list-style: none; margin: 0; padding: 0; position: relative; }
.kroky::before {
    content: ""; position: absolute; left: 19px; top: 16px; bottom: 16px;
    width: 1px; background: var(--linka);
}
.krok { position: relative; padding: 0 0 26px 58px; }
.krok:last-child { padding-bottom: 0; }
.krok .cislo {
    position: absolute; left: 0; top: 0;
    width: 39px; height: 39px;
    display: grid; place-items: center;
    background: var(--plocha); color: var(--znacka-t);
    border: 1px solid var(--linka); border-radius: 50%;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px; font-weight: 700;
}
.krok h3 { padding-top: 7px; margin-bottom: 6px; font-size: 1.08rem; }
.krok p { font-size: .97rem; }

/* ---------- výzva a patička ---------- */

.vyzva {
    background: var(--inkoust);
    color: #f1efeb;
    border-radius: 6px;
    padding: 40px 34px;
}
.vyzva h2 { color: #fff; }
.vyzva p { color: #bdb9b2; max-width: 58ch; }
.tlacitko {
    display: inline-block; margin-top: 20px;
    background: var(--znacka); color: #fff;
    padding: 15px 28px; border-radius: 4px;
    font-weight: 600; text-decoration: none;
}
.tlacitko:hover { background: var(--znacka-t); }

.paticka {
    border-top: 1px solid var(--linka);
    padding: 30px 0 48px;
    font-size: .9rem; color: var(--tlumeny);
}
.paticka .obal { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    section { padding: 44px 0; }
    .uvod { padding-top: 40px; }
    .karta, .nabidka.doporucena { padding: 20px; }
    .vyzva { padding: 28px 22px; }
    .posuvnik .tahlo::after { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
    .hladiny .cena { font-size: 1.7rem; }
    .spolecne { padding: 20px; }
}