/* VT Autoservis — svetlý „zákazkový lístok“: papier, petrolejová, signálna oranžová. */
@font-face{font-family:'Bricolage Grotesque';src:url(fonts/bricolage.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Figtree';src:url(fonts/figtree.woff2) format('woff2');font-weight:300 900;font-display:swap}

:root{
  --petrol:#0F3D3E; --petrol-tm:#0A2B2C; --petrol-2:#1E5657; --petrol-sv:#B9C9C6;
  --oranz:#E0561B; --oranz-tm:#B23F0E;
  --papier:#F1EEE6; --papier-2:#FBFAF6; --papier-3:#E2DDD0; --linka:#CFC8B8;
  --text:#14201F; --text-2:#48524F;
  --display:'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --body:'Figtree', system-ui, sans-serif;
  --prst:44px; --nav-h:4.4rem;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:clamp(15px, .45vw + 13.4px, 19px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--text);font:400 1rem/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:760;line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--petrol)}
h2{font-size:clamp(1.9rem, 4.2vw, 3.2rem)}
p{margin:0}
.shell{width:100%;max-width:72rem;margin-inline:auto;padding-inline:clamp(1.1rem, 4vw, 2.5rem)}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--petrol);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem}
:focus-visible{outline:3px solid var(--oranz);outline-offset:3px}
.eyebrow{font:700 .78rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--oranz-tm);margin-bottom:.9rem}
.eyebrow--svetly{color:#F2A27E}

/* značky „doplniť“ — vysoká špecificita, nech ich nič neprebije */
body .doplnit, body span.doplnit, body p.doplnit{
  display:inline-block;background:#FFF1B8;color:#5A4300;border:1.5px dashed #B98B00;
  font:600 .82rem/1.35 var(--body);letter-spacing:0;text-transform:none;
  padding:.3rem .55rem;border-radius:.35rem;margin-top:.8rem}

/* tlačidlá */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--prst);
  padding:.7rem 1.3rem;border-radius:.5rem;font:700 1rem/1.1 var(--body);text-decoration:none;
  border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn--primary{background:var(--petrol);color:#fff}
.btn--primary:hover{background:var(--petrol-tm)}
.btn--ghost{border-color:var(--petrol);color:var(--petrol);background:transparent}
.btn--ghost:hover{background:var(--petrol);color:#fff}
.btn--call{background:var(--oranz-tm);color:#fff}
.btn--call:hover{background:#932F06}
.btn--light{background:var(--papier);color:var(--petrol)}
.btn--light:hover{background:#fff}

/* navigácia */
.nav{position:sticky;top:0;z-index:50;background:var(--papier);border-bottom:1px solid var(--linka)}
.nav__in{display:flex;align-items:center;gap:1.5rem;min-height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;min-height:var(--prst);margin-right:auto}
.nav__logo img{height:2.4rem;width:auto}
.nav__links{display:flex;gap:.3rem}
.nav__links a{display:inline-flex;align-items:center;min-height:var(--prst);padding:0 .8rem;text-decoration:none;font-weight:600;color:var(--petrol);border-radius:.4rem}
.nav__links a:hover{background:var(--papier-3)}
.nav__toggle{display:none;width:var(--prst);height:var(--prst);border:0;background:transparent;cursor:pointer;border-radius:.4rem}
.nav__bars,.nav__bars::before,.nav__bars::after{display:block;width:22px;height:2.5px;background:var(--petrol);border-radius:2px;position:relative;margin:auto;transition:transform .2s}
.nav__bars::before,.nav__bars::after{content:"";position:absolute;left:0}
.nav__bars::before{top:-7px}.nav__bars::after{top:7px}
.nav__toggle[aria-expanded=true] .nav__bars{background:transparent}
.nav__toggle[aria-expanded=true] .nav__bars::before{transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded=true] .nav__bars::after{transform:translateY(-7px) rotate(-45deg)}
.drawer{position:absolute;left:0;right:0;top:100%;background:var(--papier-2);color:var(--petrol);
  border-bottom:1px solid var(--linka);display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem 1rem 1.4rem;box-shadow:0 18px 30px rgba(10,43,44,.12)}
.drawer a{display:flex;align-items:center;justify-content:center;min-height:var(--prst);width:100%;max-width:20rem;text-decoration:none;font-weight:700;font-size:1.1rem;color:var(--petrol)}
.drawer a.btn--call{color:#fff;margin-top:.5rem}
@media (max-width:760px){
  .nav__links,.nav__call{display:none}
  .nav__toggle{display:block}
  .nav__logo img{height:2.1rem}
}

/* hero */
.hero{min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;padding-block:clamp(1.5rem, 5vh, 4rem);
  background:repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), rgba(15,61,62,.06) calc(8.333% - 1px) 8.333%) var(--papier)}
.hero__in{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem, 4vw, 4rem);align-items:center}
.hero__in > *{min-width:0}
.hero h1{font-size:clamp(2.3rem, min(5.6vw, 9.2vh), 5rem)}
.hero__rating{margin-top:clamp(.8rem, 2.4vh, 1.6rem);font-size:1.1rem;color:var(--text-2)}
.hero__rating b{color:var(--petrol);font-size:1.25rem}
.stars{color:var(--oranz)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1rem, 3vh, 2rem)}

/* podpisový moment: zákazkový lístok */
.ticket{position:relative;background:var(--papier-2);color:var(--text);border:1.5px solid var(--petrol);border-radius:.6rem;
  padding:1.2rem 1.3rem 1.3rem;box-shadow:.55rem .55rem 0 var(--petrol);transform:rotate(1.2deg)}
.ticket::before,.ticket::after{content:"";position:absolute;top:3.05rem;width:1rem;height:1rem;border-radius:50%;background:var(--papier);border:1.5px solid var(--petrol)}
.ticket::before{left:-.55rem;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-.55rem;clip-path:inset(0 50% 0 0)}
.ticket__head{display:flex;justify-content:space-between;font:700 .75rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);
  padding-bottom:1rem;border-bottom:1.5px dashed var(--petrol)}
.stamp{display:inline-block;margin:1rem 0 .4rem;padding:.35rem .7rem;border:2.5px solid var(--petrol-2);color:var(--petrol-2);border-radius:.3rem;
  font:800 .95rem/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;transform:rotate(-2deg)}
.stamp.is-open{border-color:#1D6B3A;color:#1D6B3A}
.stamp.is-closed{border-color:var(--oranz-tm);color:var(--oranz-tm)}
.ticket__rows{margin:.4rem 0 0}
.ticket__rows > div{display:grid;grid-template-columns:6rem 1fr;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--papier-3)}
.ticket__rows dt{font:700 .72rem/1.9 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.ticket__rows dd{margin:0;font-weight:600;color:var(--text)}
.ticket__rows a{display:inline-flex;align-items:center;min-height:var(--prst);margin-block:-.6rem;text-decoration:none;color:var(--petrol);font-weight:800;font-size:1.15rem}
.ticket__quote{margin:1rem 0 0;font:500 1.02rem/1.45 var(--display);color:var(--petrol)}
.ticket__quote footer{margin-top:.4rem;font:500 .8rem/1.3 var(--body);color:var(--text-2)}

/* služby */
.sluzby{padding-block:clamp(3.5rem, 9vw, 7rem);background:var(--papier-2);border-block:1px solid var(--linka)}
.sec-head{max-width:44rem;margin-bottom:clamp(1.8rem, 4vw, 3rem)}
.zoznam{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:2px solid var(--petrol)}
@media (min-width:760px){.zoznam{grid-template-columns:1fr 1fr;column-gap:3rem}}
.zoznam li{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--linka);
  font:700 clamp(1.2rem, 2.1vw, 1.6rem)/1.2 var(--display);color:var(--petrol);transition:padding .25s,color .25s}
.zoznam li:hover{padding-left:.5rem;color:var(--petrol-2)}
.zoznam .n{font:700 .8rem/1 var(--body);color:var(--oranz-tm);letter-spacing:.08em;min-width:1.8rem}
.sluzby__cena{margin-top:1.4rem}

/* recenzie */
.recenzie{padding-block:clamp(3.5rem, 9vw, 7rem)}
.recenzie h2 .big{font-size:1.6em;color:var(--oranz-tm)}
.pas{--odsad:max(clamp(1.1rem, 4vw, 2.5rem), calc((100vw - 72rem) / 2 + clamp(1.1rem, 4vw, 2.5rem)));
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--odsad) 1rem;scroll-padding-inline:var(--odsad);scrollbar-width:thin}
.karta{flex:0 0 min(22rem, 82vw);scroll-snap-align:start;margin:0;background:var(--papier-2);color:var(--text);
  border:1.5px solid var(--petrol);border-radius:.6rem;padding:1.3rem;display:flex;flex-direction:column;gap:.8rem}
.karta__hv{color:var(--oranz-tm);letter-spacing:.15em;font-size:1rem}
.karta blockquote{margin:0;font:500 1.08rem/1.5 var(--display);color:var(--petrol);flex:1}
.karta figcaption{font-weight:700;color:var(--text-2);font-size:.9rem}
.odkaz{display:inline-flex;align-items:center;min-height:var(--prst);margin-top:1rem;font-weight:700;color:var(--petrol)}

/* dielňa (bez fotiek, zámerne) */
.dielna{padding-block:clamp(3rem, 7vw, 5.5rem);background:var(--papier-3);color:var(--text)}
.dielna__in{display:grid;gap:2rem}
@media (min-width:900px){.dielna__in{grid-template-columns:1fr 1.6fr;align-items:center}}
.dielna h2{font-size:clamp(1.6rem, 3vw, 2.4rem);margin-bottom:.8rem}
.dielna__foto{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:.8rem}
@media (min-width:600px){.dielna__foto{grid-template-columns:repeat(3,1fr)}}
.doplnit-foto{aspect-ratio:4/3;border:2px dashed var(--petrol-2);border-radius:.6rem;display:flex;align-items:center;justify-content:center;padding:.8rem;text-align:center;background:var(--papier)}

/* kontakt */
.kontakt{background:var(--petrol);color:#EAF0EE;padding-block:clamp(3.5rem, 9vw, 7rem)}
.kontakt h2{color:#fff}
.kontakt__in{display:grid;gap:2.5rem}
@media (min-width:900px){.kontakt__in{grid-template-columns:1.3fr 1fr;align-items:start}}
.kontakt__in > *{min-width:0}
.tel{display:inline-flex;align-items:center;min-height:var(--prst);margin:1.2rem 0 .4rem;font:800 clamp(2rem, 5.5vw, 3.6rem)/1.05 var(--display);color:#fff;text-decoration:none;letter-spacing:-.01em}
.tel:hover{color:#F2A27E}
.kontakt__adr{font-size:1.15rem;font-weight:600}
.kontakt .btn--light{margin-top:1.4rem}
.hodiny{background:var(--petrol-tm);color:#EAF0EE;border-radius:.6rem;padding:1.4rem}
.hodiny h3{color:#fff;font-size:1.3rem;margin-bottom:.8rem}
.hodiny table{width:100%;border-collapse:collapse}
.hodiny th,.hodiny td{text-align:left;padding:.55rem .4rem;border-bottom:1px solid rgba(234,240,238,.16);font-weight:500}
.hodiny td{text-align:right;white-space:nowrap}
.hodiny tr.dnes{background:#E0561B;color:#1B0A02}
.hodiny tr.dnes th,.hodiny tr.dnes td{font-weight:800;color:#1B0A02}

/* pätička */
.foot{background:var(--petrol-tm);color:var(--petrol-sv);padding-block:2.5rem;font-size:.88rem}
.foot__in{display:grid;gap:1rem}
.foot img{height:2.6rem;width:auto}
.foot .foot__links{display:flex;gap:1.2rem}
.foot .foot__links a{display:inline-flex;align-items:center;min-height:var(--prst);color:#fff;font-weight:700}

/* pohyb: len s JS a len keď ho návštevník nevypol */
@media (prefers-reduced-motion:no-preference){
  .js .odhal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .js .odhal.je{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticket{transform:none}
  *{transition:none !important}
}

@media (max-width:900px){
  .hero{min-height:auto}
  .hero__in{grid-template-columns:1fr}
  .ticket{transform:none;max-width:30rem}
}
@media (max-width:760px){
  .hero{padding-top:1.2rem}
  .hero h1{font-size:clamp(2rem, 9vw, 2.6rem)}
  .hero__cta .btn{flex:1 1 12rem}
}