/* Calidat Barbershop · Poprad — čierna prevádzka, kriedový text, neónová ružová z ich IG.
   Tokeny sú zdistilované do brand/index.html. */
@font-face{font-family:"Big Shoulders Display";src:url(fonts/BigShouldersDisplay-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/InstrumentSans-var.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{
  --ink-950:#0E0D10; --ink-900:#17151A; --ink-800:#221F26; --ink-700:#36313B; --ink-500:#6E6773;
  --chalk-50:#F3EFE8; --chalk-200:#DED8CF; --chalk-400:#B9B2AA;
  --neon-500:#FF2E88; --neon-600:#E0156E; --neon-700:#B0104F; --neon-100:#FFE0EE;
  --bg:var(--ink-950); --text:var(--chalk-50); --muted:var(--chalk-400);
  --display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:"Instrument Sans", system-ui, sans-serif;
  --prst:44px; --nav-h:72px; --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:clamp(15px, .45vw + 13px, 19px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:.01em;margin:0}
h2{font-size:clamp(2.4rem, 5.4vw, 4.6rem)}
h3{font-size:1.6rem}
p{margin:0}
:focus-visible{outline:3px solid var(--neon-500);outline-offset:3px}
section[id]{scroll-margin-top:var(--nav-h)}
.wrap{width:min(100% - 2.5rem, 76rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--neon-500);color:var(--ink-950);padding:.8rem 1rem;z-index:100}
.skip:focus{left:1rem}

.eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.95rem;color:var(--neon-500);margin-bottom:.9rem}
.eyebrow--dark{color:var(--neon-700)}
.neon{color:var(--neon-500)}
.link{display:inline-flex;align-items:center;min-height:var(--prst);font-weight:600;text-decoration:underline;text-decoration-color:var(--neon-500);text-decoration-thickness:2px;text-underline-offset:.3em}
.link:hover{color:var(--neon-500)}
.doplnit{display:inline-block;background:var(--neon-100);color:var(--neon-700);border:2px dashed var(--neon-700);font:700 .72rem/1 var(--body);text-transform:uppercase;letter-spacing:.1em;padding:.35rem .5rem;border-radius:6px;margin-right:.5rem;vertical-align:.15em}

/* tlačidlá */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--prst);padding:.7rem 1.4rem;border-radius:999px;font:700 1rem/1 var(--body);text-decoration:none;letter-spacing:.01em;transition:transform .2s ease, background-color .2s ease, color .2s ease;border:2px solid transparent}
.btn--neon{background:var(--neon-500);color:var(--ink-950)}
.btn--neon:hover{background:var(--chalk-50);color:var(--ink-950);transform:translateY(-2px)}
.btn--line{border-color:var(--chalk-50);color:var(--chalk-50);background:transparent}
.btn--line:hover{background:var(--chalk-50);color:var(--ink-950)}

/* navigácia — rozostrenie na pseudoprvku, nie na .nav (fixed drawer, pepek) */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,13,16,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-800)}
.nav__in{display:flex;align-items:center;gap:1.5rem;height:100%}
.nav__logo{display:inline-flex;align-items:center;min-height:var(--prst);margin-right:auto}
.nav__logo img{height:34px;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(--chalk-200)}
.nav__links a:hover{color:var(--neon-500)}
.nav__burger{display:none;width:var(--prst);height:var(--prst);border:0;background:transparent;color:var(--chalk-50);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:7px}
.nav__burger span{display:block;width:24px;height:2px;background:currentColor;transition:transform .25s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.drawer{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--ink-950);color:var(--chalk-50);border-bottom:1px solid var(--ink-700);display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:1rem 1.25rem 1.6rem}
.drawer a{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;max-width:22rem;text-decoration:none;font:800 1.6rem/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.drawer a.btn--neon{font:700 1rem/1 var(--body);text-transform:none;margin-top:.6rem;color:var(--ink-950)}
@media (max-width:860px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:inline-flex}
}
@media (min-width:861px){.drawer{display:none !important}}

/* hero */
.hero{min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;padding-block:clamp(1.5rem, 4vh, 3rem);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(1.5rem, 4vw, 4rem);align-items:center}
.hero__text{min-width:0}
.hero__h{font-size:clamp(3.2rem, min(10.5vw, 15vh), 9.6rem);font-weight:900;line-height:1.02;letter-spacing:-.005em}
.hero__lead{max-width:34rem;margin-top:clamp(.9rem, 2.4vh, 1.6rem);font-size:1.12rem;color:var(--chalk-200)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1rem, 3vh, 2rem)}
.rating{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--prst);margin-top:clamp(.6rem, 2vh, 1.4rem);text-decoration:none;color:var(--chalk-200);font-size:.95rem}
.rating b{font:900 1.6rem/1 var(--display);color:var(--chalk-50)}
.stars{color:var(--neon-500);letter-spacing:.1em}
.hero__photo{position:relative;margin:0;justify-self:end;width:100%;max-width:27rem}
.hero__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);max-height:calc(100svh - var(--nav-h) - 4rem)}
/* točiaci sa holičský stĺp — pruhy sa smerom hore stenčujú (fade), rovnaký motív ako v logu */
.pole{position:absolute;left:-1.1rem;top:12%;bottom:12%;width:1.5rem;border-radius:999px;border:3px solid var(--chalk-50);background:var(--ink-950);overflow:hidden;box-shadow:0 0 0 4px var(--ink-950)}
.pole__stripes{position:absolute;inset:-60px 0 0 0;background:repeating-linear-gradient(-32deg, var(--neon-500) 0 9px, transparent 9px 22px);-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 100%)}
@media (prefers-reduced-motion:no-preference){
  .pole__stripes{animation:tocit 2.4s linear infinite}
  @keyframes tocit{to{transform:translateY(26px)}}
}
@media (max-width:860px){
  .hero{min-height:auto;padding-block:1.6rem 3rem}
  .hero__grid{grid-template-columns:1fr}
  .hero__photo{justify-self:stretch;max-width:none}
  .hero__photo img{aspect-ratio:4/3;max-height:none}
  .pole{left:auto;right:1rem;top:-1.4rem;bottom:auto;height:5.5rem}
}

/* sekcie */
.sec-head{margin-bottom:clamp(1.8rem, 4vw, 3rem);max-width:48rem}
.sec-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;max-width:none}
.sec-lead{margin-top:.8rem;color:var(--muted);font-size:1.1rem}

/* služby — svetlá sekcia */
.sluzby{background:var(--chalk-50);color:var(--ink-950);padding-block:clamp(4rem, 9vw, 7rem)}
.list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink-950)}
.list li{display:grid;grid-template-columns:5rem minmax(0,16rem) minmax(0,1fr);gap:1rem 2rem;align-items:baseline;padding-block:1.6rem;border-bottom:1px solid var(--chalk-200);transition:background-color .25s}
.list li:hover{background:#fff}
.list__n{font:800 1.1rem/1 var(--display);color:var(--neon-700);letter-spacing:.08em}
.list h3{font-size:clamp(1.8rem, 3vw, 2.5rem)}
.list p{color:#3A353E;max-width:40rem}
.cennik{display:grid;grid-template-columns:5rem minmax(0,16rem) minmax(0,1fr);gap:1rem 2rem;align-items:baseline;padding-top:1.6rem;color:var(--ink-950)}
.cennik h3{grid-column:2;font-size:clamp(1.8rem, 3vw, 2.5rem)}
.cennik p{color:#3A353E}
@media (max-width:760px){
  .list li,.cennik{grid-template-columns:1fr;gap:.4rem}
  .cennik h3{grid-column:auto}
}

/* pred / po — podpisový moment */
.predpo{padding-block:clamp(4rem, 9vw, 7rem);background:
  radial-gradient(60rem 30rem at 85% 50%, rgba(255,46,136,.12), transparent 70%), var(--ink-950)}
.predpo__grid{display:grid;grid-template-columns:1fr minmax(0, 26rem);gap:clamp(2rem, 5vw, 5rem);align-items:center}
.predpo__text p{color:var(--chalk-200);margin-top:1rem;max-width:30rem}
.predpo__text .link{margin-top:.8rem}
.compare{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:254/342;background:var(--ink-800);user-select:none;touch-action:pan-y;color:var(--chalk-50)}
.compare__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare__po{clip-path:inset(0 0 0 var(--pos))}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--neon-500);pointer-events:none}
.compare__handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--neon-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0D10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.compare__tag{position:absolute;top:.8rem;font:800 .95rem/1 var(--display);text-transform:uppercase;letter-spacing:.14em;padding:.45rem .7rem;border-radius:6px;background:rgba(14,13,16,.82);color:var(--chalk-50);pointer-events:none}
.compare__tag--l{left:.8rem}
.compare__tag--r{right:.8rem;background:var(--neon-500);color:var(--ink-950)}
.compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.compare:has(.compare__range:focus-visible){outline:3px solid var(--neon-500);outline-offset:3px}
@media (max-width:860px){.predpo__grid{grid-template-columns:1fr}.compare{max-width:26rem;width:100%}}

/* rezervácia — traja barberi ako veľké typografické riadky */
.rez{padding-block:clamp(4rem, 9vw, 7rem);border-top:1px solid var(--ink-800)}
.barberi{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-700)}
.barberi a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--prst);padding:1.1rem .2rem;border-bottom:1px solid var(--ink-700);text-decoration:none;color:var(--chalk-50);position:relative;overflow:hidden;isolation:isolate}
.barberi a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--neon-500);transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.barberi a:hover,.barberi a:focus-visible{color:var(--ink-950)}
.barberi a:hover::before,.barberi a:focus-visible::before{transform:scaleY(1)}
.barberi__name{font:900 clamp(3rem, 9vw, 7rem)/1.02 var(--display);text-transform:uppercase;letter-spacing:-.005em;padding-left:.2rem}
.barberi__go{font-weight:700;font-size:1.05rem;white-space:nowrap;padding-right:.4rem}
.barberi__go i{font-style:normal;display:inline-block;transition:transform .3s}
.barberi a:hover .barberi__go i{transform:translateX(6px)}
.rez__more{margin-top:1.6rem;color:var(--chalk-200);display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .4rem}

/* galéria — 3×2 na desktope, max 4 na mobile */
.galeria{padding-block:clamp(4rem, 9vw, 7rem);background:var(--ink-900)}
.gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:.8rem}
.gal li{border-radius:10px;overflow:hidden;background:var(--ink-800)}
.gal img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease}
.gal li:hover img{transform:scale(1.04)}
@media (max-width:760px){
  .gal{grid-template-columns:repeat(2, minmax(0,1fr))}
  .gal li:nth-child(n+5){display:none}
}

/* recenzie — pás na celú šírku, medzera vnútri scrollera */
.recenzie{padding-block:clamp(4rem, 9vw, 7rem)}
.big{color:var(--neon-500)}
.rail{--gut:max(1.25rem, (100vw - 76rem) / 2);list-style:none;margin:0;padding:0 var(--gut) 1rem;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:thin;scrollbar-color:var(--ink-700) transparent}
.rail li{flex:0 0 min(80vw, 22rem);scroll-snap-align:start;min-width:0}
.rail blockquote{margin:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;background:var(--ink-900);color:var(--chalk-50);border:1px solid var(--ink-700);border-radius:var(--r);padding:1.6rem}
.rail blockquote p{font-size:1.08rem}
.rail blockquote p::before{content:"„";display:block;font:900 3rem/.6 var(--display);color:var(--neon-500);margin-bottom:.4rem}
.rail footer{font-weight:700;color:var(--chalk-400)}

/* kontakt */
.kontakt{padding-block:clamp(4rem, 9vw, 7rem);background:var(--ink-900);border-top:1px solid var(--ink-800)}
.kontakt__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem, 5vw, 4rem);align-items:start}
.adr{font-style:normal;display:flex;flex-direction:column;font:800 clamp(1.8rem, 3.2vw, 2.6rem)/1.08 var(--display);text-transform:uppercase;margin-top:1.4rem}
.status{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-weight:700}
.status::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--chalk-400)}
.status.is-open::before{background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.2)}
.hodiny{margin-top:1.2rem;border-collapse:collapse;width:100%;max-width:24rem}
.hodiny th,.hodiny td{padding:.45rem 0;border-bottom:1px solid var(--ink-700);text-align:left;font-weight:400;color:var(--chalk-200)}
.hodiny td{text-align:right}
.hodiny tr.is-today th,.hodiny tr.is-today td{color:var(--neon-500);font-weight:700}
.kanaly{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.kanaly a{display:inline-flex;align-items:center;min-height:var(--prst);font-weight:700;text-decoration:underline;text-decoration-color:var(--neon-500);text-underline-offset:.3em;text-decoration-thickness:2px}
.mapa{border-radius:var(--r);overflow:hidden;border:1px solid var(--ink-700);aspect-ratio:4/3;background:var(--ink-800)}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.9) invert(.92) contrast(.9)}
@media (max-width:860px){.kontakt__grid{grid-template-columns:1fr}}

/* pätička */
.foot{padding-block:2.5rem 3rem;border-top:1px solid var(--ink-800)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.foot__in img{height:30px;width:auto}
.foot__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1rem}
.foot__links a{display:inline-flex;align-items:center;min-height:var(--prst);color:var(--chalk-200)}
.foot__legal{margin-left:auto;color:var(--chalk-400);font-size:.9rem}

/* odhaľovanie — len s JS a len bez zníženého pohybu */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .rise.is-in{opacity:1;transform:none}
}
@media (min-width:861px){
  .compare{justify-self:end;width:min(100%, calc((100svh - var(--nav-h) - 4rem) * 254 / 342))}
}