/* AUTOBAZAR HORIZONT — ukázkový web pro webpj.cz.
   Světlý prémiový vzhled: bílá a jemně šedá základna, velká typografie,
   hodně prostoru, měkce zaoblené plochy bez rámečků a stínů. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bila:#fff;
  --seda:#f5f5f7;
  --seda2:#ececee;
  --inkoust:#1d1d1f;
  --text2:#6e6e73;
  --text3:#86868b;
  --modra:#0066cc;
  --modra2:#0055aa;
  --linka:#e3e3e6;
  --zelena:#1a8b4a;
  --jantar:#b06d00;
}
html{scroll-behavior:smooth;background:var(--bila)}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',Segoe UI,Roboto,Arial,sans-serif;color:var(--inkoust);background:var(--bila);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;font-feature-settings:'tnum' 1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:600;line-height:1.06;letter-spacing:-.032em}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.siroky{max-width:1320px;margin:0 auto;padding:0 24px}
.odkaz{display:inline-flex;align-items:center;gap:5px;color:var(--modra);text-decoration:none;font-size:17px}
.odkaz:hover{text-decoration:underline}
.odkaz::after{content:'›';font-size:20px;line-height:1;position:relative;top:-1px}

.demo{background:var(--seda);color:var(--text2);font-size:12.6px;text-align:center;padding:11px 18px}
.demo a{color:var(--modra);text-decoration:none}

/* hlavička */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--linka)}
.nav .row{display:flex;align-items:center;gap:34px;height:56px}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;line-height:1}
.logo b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.logo small{font-size:11px;color:var(--text3);letter-spacing:.02em}
.nav nav{margin-left:auto;display:flex;gap:30px}
.nav nav a{text-decoration:none;font-size:13.4px;color:var(--inkoust);opacity:.85}
.nav nav a:hover{opacity:1}
.nav nav a.on{opacity:1;font-weight:500}
.navtel{font-size:13.4px;color:var(--inkoust);text-decoration:none;opacity:.85}
.navtel:hover{opacity:1}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:20px;cursor:pointer;color:var(--inkoust)}
.mm{display:none;border-top:1px solid var(--linka);background:var(--bila)}
.mm.open{display:block}
.mm a{display:block;padding:15px 24px;text-decoration:none;border-bottom:1px solid var(--linka);font-size:16px}
@media(max-width:1120px){.nav nav,.navtel{display:none}.burger{display:block}}

/* tlačítka */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:980px;text-decoration:none;font-weight:400;font-size:16px;border:0;cursor:pointer;font-family:inherit;transition:background .18s,color .18s,border-color .18s}
.btn--prim{background:var(--modra);color:#fff}
.btn--prim:hover{background:var(--modra2)}
.btn--lin{background:transparent;color:var(--modra);border:1px solid var(--modra)}
.btn--lin:hover{background:var(--modra);color:#fff}
.btn--tm{background:var(--inkoust);color:#fff}
.btn--tm:hover{background:#000}
.tl{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.stitek{display:block;font-size:19px;color:var(--modra);font-weight:500;margin-bottom:10px;letter-spacing:0}

/* hero — celoplošná fotka s vyhledávačem */
.hero{position:relative;background:var(--seda2);padding:0}
.hero .foto{position:relative;width:100%;height:clamp(380px,58vh,640px);overflow:hidden}
.hero .foto img{width:100%;height:100%;object-fit:cover}
.hero .foto::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 34%,rgba(0,0,0,.34) 100%)}
.hledani{position:absolute;left:0;right:0;bottom:26px;z-index:5;padding:0 24px}
.hledani .in{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(24px);border-radius:20px;padding:10px;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:4px;align-items:center;margin:0 auto;max-width:1120px;box-shadow:0 14px 44px -18px rgba(0,0,0,.4)}
.hledani .f{padding:12px 20px;display:flex;flex-direction:column;gap:3px;border-right:1px solid rgba(0,0,0,.09)}
.hledani .f:nth-child(4){border-right:0}
.hledani label{font-size:12px;color:var(--text2)}
.hledani select{height:26px;border:0;background:transparent;color:var(--inkoust);font-size:16px;font-family:inherit;padding:0;cursor:pointer;appearance:none;font-weight:500}
.hledani .akce{padding-right:6px}
.hledani .btn{width:100%;min-height:52px}
@media(max-width:1000px){
  .hero .foto{height:clamp(300px,44vh,420px)}
  .hledani{position:static;padding:0 24px;margin-top:-30px}
  .hledani .in{grid-template-columns:1fr 1fr;background:var(--bila);box-shadow:0 14px 40px -22px rgba(0,0,0,.4)}
  .hledani .f:nth-child(2n){border-right:0}
  .hledani .f{border-bottom:1px solid var(--seda2)}
  .hledani .akce{grid-column:span 2;padding:8px}
}
@media(max-width:560px){.hledani .in{grid-template-columns:1fr}.hledani .f{border-right:0}.hledani .akce{grid-column:span 1}}

/* úvodní blok pod hero */
.uvodni{padding:76px 0 0;text-align:center;background:var(--bila)}
.uvodni .text{padding-bottom:8px}
.uvodni h1{font-size:clamp(38px,5.6vw,68px);margin-bottom:18px;letter-spacing:-.04em}
.uvodni p{font-size:clamp(19px,2.1vw,24px);color:var(--text2);max-width:36ch;margin:0 auto 26px;letter-spacing:-.01em;line-height:1.35}
.uvodni .tl{justify-content:center}
@media(max-width:800px){.uvodni{padding-top:52px}}

/* pruh čísel */
.cisla{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:72px 0 0}
.cisla div{text-align:center}
.cisla b{display:block;font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.cisla span{font-size:15px;color:var(--text2)}
@media(max-width:800px){.cisla{grid-template-columns:1fr 1fr;gap:32px 20px}.cisla b{font-size:36px}}

section{padding:96px 0}
.sv{background:var(--seda)}
.hl{max-width:660px;margin-bottom:44px}
.hl h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:14px}
.hl p{color:var(--text2);font-size:19px;line-height:1.45}
.hl--stred{margin-left:auto;margin-right:auto;text-align:center}
.hlr{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:44px}
.hlr .hl{margin-bottom:0}

/* karty vozů */
.vozy{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vuz{text-decoration:none;display:flex;flex-direction:column;color:inherit;background:var(--bila);border-radius:20px;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.sv .vuz{background:var(--bila)}
section:not(.sv) .vuz{background:var(--seda)}
.vuz:hover{transform:translateY(-4px)}
.vuz .im{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--seda2)}
.vuz .im img{width:100%;height:100%;object-fit:cover}
.vuz .znacky{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap}
.zn2{font-size:11.6px;font-weight:500;letter-spacing:.01em;padding:5px 11px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);color:var(--inkoust);border-radius:980px}
.zn2--rez{color:var(--jantar)}
.zn2--novy{color:var(--zelena)}
.zn2--top{color:var(--modra)}
.vuz .tx{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.vuz h3{font-size:21px;margin-bottom:7px;letter-spacing:-.025em}
.vuz .par{font-size:14.4px;color:var(--text2);margin-bottom:20px;display:flex;flex-wrap:wrap}
.vuz .par span + span::before{content:'·';margin:0 7px;color:var(--text3)}
.vuz .spod{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:auto}
.vuz .cena{font-size:23px;font-weight:600;letter-spacing:-.03em}
.vuz .cena small{display:block;font-size:13px;font-weight:400;color:var(--text2);letter-spacing:0;margin-top:5px}
.vuz .vic{font-size:15.4px;color:var(--modra);white-space:nowrap}
.vuz .vic::after{content:' ›'}
@media(max-width:1100px){.vozy{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:680px){.vozy{grid-template-columns:1fr}}

/* katalog */
.katalog{display:grid;grid-template-columns:250px 1fr;gap:48px;align-items:start}
.filtry{position:sticky;top:80px;background:var(--seda);border-radius:20px;padding:26px}
.filtry h3{font-size:17px;margin-bottom:20px;letter-spacing:-.02em}
.fsk{margin-bottom:20px}
.fsk .lb{display:block;font-size:13px;color:var(--text2);margin-bottom:7px}
.fsk select,.fsk input{width:100%;height:44px;border:0;background:var(--bila);border-radius:12px;color:var(--inkoust);font-size:15.4px;font-family:inherit;padding:0 14px;appearance:none;cursor:pointer}
.fsk select:focus,.fsk input:focus{outline:2px solid var(--modra);outline-offset:1px}
.fsk .dvoj{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:11px;cursor:pointer;color:var(--inkoust)}
.chk input{width:17px;height:17px;accent-color:var(--modra);flex:0 0 auto;cursor:pointer}
.filtry .reset{background:none;border:0;color:var(--modra);font-family:inherit;font-size:15px;cursor:pointer;padding:0}
.filtry .reset:hover{text-decoration:underline}
.vysledek{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.vysledek .pocet{font-size:16px;color:var(--text2)}
.vysledek .pocet b{color:var(--inkoust);font-weight:600}
.razeni{display:flex;align-items:center;gap:10px}
.razeni label{font-size:14.4px;color:var(--text2)}
.razeni select{height:40px;border:0;background:var(--seda);border-radius:980px;color:var(--inkoust);font-size:15px;font-family:inherit;padding:0 34px 0 16px;cursor:pointer;appearance:none}
.nic{background:var(--seda);border-radius:20px;padding:56px;text-align:center;color:var(--text2)}
@media(max-width:980px){.katalog{grid-template-columns:1fr;gap:28px}.filtry{position:static}}

/* detail vozu */
.detail{display:grid;grid-template-columns:1.4fr .6fr;gap:52px;align-items:start}
.galerie .hlavni{overflow:hidden;background:var(--seda);aspect-ratio:16/10;border-radius:22px}
.galerie .hlavni img{width:100%;height:100%;object-fit:cover}
.galerie .mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.galerie .mini button{border:0;padding:0;background:none;cursor:pointer;aspect-ratio:4/3;overflow:hidden;border-radius:14px;opacity:.5;transition:opacity .2s}
.galerie .mini button.akt,.galerie .mini button:hover{opacity:1}
.galerie .mini img{width:100%;height:100%;object-fit:cover}
.karta{position:sticky;top:80px}
.karta h1{font-size:34px;margin-bottom:8px;letter-spacing:-.035em}
.karta .pod{font-size:16px;color:var(--text2);margin-bottom:26px}
.karta .cena{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1}
.karta .cena small{display:block;font-size:14.4px;font-weight:400;color:var(--text2);letter-spacing:0;margin-top:10px}
.karta .rd{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--linka);font-size:15.4px;color:var(--text2)}
.karta .rd b{color:var(--inkoust);font-weight:500}
.karta .stav{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin-bottom:16px}
.karta .stav::before{content:'';width:8px;height:8px;border-radius:50%}
.stav--k{color:var(--zelena)}
.stav--k::before{background:var(--zelena)}
.stav--r{color:var(--jantar)}
.stav--r::before{background:var(--jantar)}
.parametry{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.pp{background:var(--seda);border-radius:18px;padding:22px 24px}
.pp span{display:block;font-size:13.4px;color:var(--text2);margin-bottom:5px}
.pp b{font-size:21px;font-weight:600;letter-spacing:-.025em}
.vybava{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 28px;margin-top:18px}
.vybava div{display:flex;gap:10px;font-size:16px;align-items:flex-start;color:var(--inkoust)}
.vybava svg{flex:0 0 auto;margin-top:5px;color:var(--modra)}
@media(max-width:980px){.detail{grid-template-columns:1fr;gap:36px}.karta{position:static}.parametry{grid-template-columns:1fr 1fr}.vybava{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.parametry{grid-template-columns:1fr}.vybava{grid-template-columns:1fr}}

/* modal */
.mod{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.42);backdrop-filter:blur(10px);overflow-y:auto}
.mod.open{display:flex}
.mod .box{background:var(--bila);border-radius:22px;max-width:540px;width:100%;padding:38px;position:relative;max-height:92vh;overflow-y:auto}
.mod h3{font-size:28px;margin-bottom:8px}
.mod .zav{position:absolute;top:16px;right:18px;background:var(--seda);border:0;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--text2)}
.mod .zav:hover{background:var(--seda2);color:var(--inkoust)}

/* výkup */
.vykup{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
label{display:block;font-size:13.4px;color:var(--text2);margin-bottom:7px}
.pole{margin-bottom:20px}
.rada{display:grid;grid-template-columns:1fr 1fr;gap:20px}
input,select,textarea{width:100%;max-width:100%;min-height:48px;border:0;background:var(--bila);border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--inkoust)}
.box input,.box select,.box textarea{background:var(--seda)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--modra);outline-offset:1px}
input::placeholder,textarea::placeholder{color:var(--text3)}
select{appearance:none;cursor:pointer}
textarea{min-height:92px;resize:vertical}
.pozn{font-size:13.4px;color:var(--text2);margin-top:12px;line-height:1.5}
.odhad{background:var(--inkoust);color:#fff;border-radius:22px;padding:36px}
.odhad .stitek{color:#7fb5ff;font-size:15px;font-weight:400;margin-bottom:6px}
.odhad .castka{font-size:56px;font-weight:600;letter-spacing:-.045em;line-height:1;margin-bottom:10px}
.odhad .rozsah{font-size:15.4px;color:rgba(255,255,255,.66);margin-bottom:26px}
.odhad .rd{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,.16);font-size:15.4px;color:rgba(255,255,255,.66)}
.odhad .rd b{color:#fff;font-weight:500}
.odhad .pozn{color:rgba(255,255,255,.5)}
.box{background:var(--seda);border-radius:22px;padding:32px}
.hotovo{background:#e8f6ed;border-radius:20px;padding:28px;color:var(--zelena)}
.hotovo b{display:block;font-size:21px;margin-bottom:8px;color:#0d5c33;font-weight:600}
@media(max-width:900px){.vykup{grid-template-columns:1fr;gap:32px}.rada{grid-template-columns:1fr;gap:0}}
@media(max-width:640px){.odhad,.box{padding:26px}.odhad .castka{font-size:44px}}

/* kroky */
.kroky{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kr{background:var(--seda);border-radius:20px;padding:28px}
.sv .kr{background:var(--bila)}
.kr .c{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--modra);color:#fff;font-size:14.4px;font-weight:600;margin-bottom:16px}
.kr h3{font-size:19px;margin-bottom:9px}
.kr p{font-size:15.4px;color:var(--text2)}
.kroky3{grid-template-columns:repeat(3,1fr)}
.kroky2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.kroky,.kroky3,.kroky2{grid-template-columns:1fr}}

/* tabulka */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:13.4px;font-weight:400;color:var(--text2);padding:0 20px 14px 0;border-bottom:1px solid var(--linka)}
.tbl td{padding:20px 20px 20px 0;border-bottom:1px solid var(--linka);font-size:16px;color:var(--text2);vertical-align:top}
.tbl td:first-child{color:var(--inkoust);font-weight:500}
.tbl td.c{white-space:nowrap;text-align:right;padding-right:0;color:var(--inkoust);font-weight:600}
@media(max-width:700px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--linka);padding:16px 0}
  .tbl td{border:0;padding:3px 0}
  .tbl td.c{text-align:left;margin-top:8px}
  .tbl td[data-l]:not(:first-child)::before{content:attr(data-l) ": ";color:var(--text3);font-size:14px}
}

.kont{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.udaj{margin-bottom:24px}
.udaj b{display:block;font-size:13.4px;color:var(--text2);margin-bottom:5px;font-weight:400}
@media(max-width:900px){.kont{grid-template-columns:1fr;gap:32px}}

.predel{max-width:1320px;margin:0 auto;padding:0 24px}
.predel img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:22px}

footer{background:var(--seda);color:var(--text2);padding:56px 0 0}
footer h4{color:var(--inkoust);font-size:13.4px;font-weight:600;margin-bottom:16px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:40px}
footer p{font-size:14.4px;max-width:34ch}
footer ul{list-style:none;font-size:14.4px}
footer li{margin-bottom:10px}
footer a{color:var(--text2);text-decoration:none}
footer a:hover{color:var(--inkoust);text-decoration:underline}
footer .logo{margin-bottom:16px;color:var(--inkoust)}
footer .copy{border-top:1px solid var(--linka);padding:20px 0;font-size:12.6px;color:var(--text3);text-align:center}
footer .copy a{color:var(--modra);text-decoration:none}
@media(max-width:900px){footer .cols{grid-template-columns:1fr;gap:32px}}

.telfab{position:fixed;right:18px;bottom:80px;z-index:70;background:var(--modra);color:#fff;display:none;text-decoration:none;font-size:15px;padding:14px 22px;border-radius:980px}
@media(max-width:1120px){.telfab{display:block}}