/* ============================================================================
   ČÍSLOVANIE (Dada, 2026-08-14): klientke idú DVA koncepty, `koncept-1`
   („Plagát", tento súbor) a `koncept-2` („Spojenie"). Prieskumných konceptov
   však bolo pôvodne viac a poznámky v kóde sa odvolávajú na ICH čísla —
   1 „Filmový", 2 „Plagát", 3 „2026", 4 „Spojenie". Tri z nich už na disku
   nie sú. Kde teda v komentároch stojí „koncept 1/2/3/4", ide o pôvodné
   prieskumné číslo, nie o názov súboru: dnešný `koncept-1` = pôvodný 2,
   dnešný `koncept-2` = pôvodný 4.
   ============================================================================
   („KONCEPT 3" v tejto hlavičke bolo zastarané už pred premenovaním — súbor sa
   volal `koncept-2` a vo výbere pre klientku stál ako „Koncept 2".)
   ============================================================================
   KONCEPT 1 — „PLAGÁT"
   Art direction: plagát zápasu. Všetko je vycentrované na jednu zvislú os,
   oddelené vlasovými linkami a posadené na zrnitý papier — tak sa sádžu
   plagáty na bojové večery. Sadzba na stred je tu zámer, nie reflex:
   je to nosný princíp formátu, nie výplň prázdneho miesta.
   Písmo: Anton (displej, len verzálky) + Figtree (text).
   ========================================================================== */

:root{
  --ink:#0A0A0C;
  --ink-2:#121215;
  --panel:#17171B;
  --line:#33302B;
  --line-soft:#232227;
  --paper:#F2EFE9;
  --muted:#9A9287;
  --muted-2:#7E776C;
  --aqua:#00A1E3;
  --ok:#3FBF7F;
  --warn:#E8B04B;
  --rail:min(72rem, 90vw);
  --nav-h:4.5rem;
}

html{font-size:clamp(15px,.42vw + 12.4px,20px);-webkit-text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:'Figtree',system-ui,sans-serif;font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;position:relative}
/* Pozri koncept-2.css: `overflow-x:hidden` na `body` z neho spraví scrollovací
   kontajner a v Safari tým prestane fungovať `loading="lazy"`. Na koreni a ako
   `clip` reže rovnako, ale kontajner nevytvára. */
html{overflow-x:clip}
/* zrno cez celú stránku — drží papierový, tlačený pocit */
body::after{content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}

h1,h2,h3{font-family:'Anton',Impact,sans-serif;font-weight:400;margin:0;
  text-transform:uppercase;line-height:.86;letter-spacing:.005em}

.rail{width:var(--rail);margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.rule{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent)}
.eyebrow{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin:0}
.tracked{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(10,10,12,.88);color:var(--paper);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.nav__in{width:var(--rail);margin-inline:auto;height:100%;display:flex;align-items:center;gap:1.4rem}
.nav__logo{margin-right:auto;display:flex;align-items:center;text-decoration:none;padding-block:.3rem}
.nav__logo img{height:2.7rem;width:auto;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 1px 6px rgba(0,161,227,.25))}
.nav__links{display:flex;gap:1.5rem;align-items:center}
.nav__links a{text-decoration:none;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);padding:.6rem 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.nav__links a:hover,.nav__links a[aria-current]{border-bottom-color:var(--aqua);color:var(--aqua)}
.nav__cta{display:inline-flex;align-items:center;background:var(--paper);color:var(--ink);
  text-decoration:none;font-weight:800;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.75rem 1.15rem;min-height:3rem;transition:background .2s,color .2s}
.nav__cta:hover{background:var(--aqua);color:var(--ink)}
.burger{display:none;background:transparent;color:var(--paper);border:1px solid var(--line);
  width:3rem;height:3rem;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:1.2rem;height:2px;background:var(--paper);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:1.2rem;height:2px;background:var(--paper)}
.burger span::before{top:-.4rem}.burger span::after{top:.4rem}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:calc(100svh - var(--nav-h));display:flex;overflow:hidden;
  background:var(--ink);color:var(--paper)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:grayscale(1) contrast(1.15)}
.hero__bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(10,10,12,.28) 0%,rgba(10,10,12,.9) 66%,var(--ink) 100%)}
/* Rozostupy v úvode sú viazané na VÝŠKU okna, nie len na rem. Úvod má podľa
   pravidla /design č. 2 držať prvú obrazovku a na úzkom telefóne (320×568) sa
   eyebrow, tlačidlá aj pásik pod nimi lámu do viacerých riadkov — pri pevných
   odsadeniach prerastal fold o 114 px (Dada, 2026-08-14). */
.hero__in{position:relative;z-index:5;margin:auto;width:var(--rail);text-align:center;
  padding-block:clamp(1.6rem,5svh,4rem) clamp(1.2rem,4svh,3rem)}
.hero h1 .s1{display:block;font-size:clamp(1.4rem,4.2vw,3rem);color:var(--muted);
  margin-bottom:.28em;letter-spacing:.06em}
/* Meno je obmedzené šírkou aj výškou okna. Samotné 14.5vw je na nízkom okne
   (notebook 1440×500, mobil na šírku) to, čo úvod naťahuje pod fold — meno
   rastie so šírkou, ale miesto naň dáva výška. */
.hero h1 .s2{display:block;font-size:clamp(4rem,min(14.5vw,30svh),11rem);color:var(--paper);
  text-shadow:0 0 4rem rgba(0,161,227,.22)}
/* ---------- KREDO KLUBU ----------
   „Tvoje miesto. Tvoj cieľ. Tvoj úspech." — majiteľ ho chce viditeľne na
   stránke (14. 8. 2026); klub ho má vytlačené na cenníku aj na ponukovom liste.
   V plagáte je to podnadpis pod menom: tri vety Antonom na jednej osi.
   Zvislé deliace linky medzi vetami odtiaľto vypadli (Dada, 14. 8. 2026) —
   vety oddeľuje už len medzera, a preto musí byť väčšia než predtým: linka
   niesla polovicu tej práce a pri pôvodných 1.1em by sa vety zliali. */
.kredo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.25em 1.6em;margin:clamp(.7rem,2svh,1.3rem) 0 0;padding:0;list-style:none}
.kredo span{position:relative;font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.05em;line-height:1.05}
.kredo__z{color:var(--aqua)}
/* Farba poslednej vety sa musí prebiť cez `.hero__kredo span` — `.kredo__z`
   má nižšiu špecifickosť a inak by ostala biela. */
.hero__kredo span{font-size:clamp(.95rem,2.4vw,1.7rem);color:var(--paper)}
.hero__kredo .kredo__z{color:var(--aqua)}
.foot__kredo{margin:0 0 1rem}
.foot__kredo span{font-size:clamp(.72rem,1.6vw,.92rem);color:var(--muted)}
.foot__kredo .kredo__z{color:var(--aqua)}

/* Jediný `eyebrow`, ktorý nie je verzálkový — adresa sa píše tak, ako sa píše
   (Dada, 14. 8. 2026). Zvyšok stránky prestrkané verzálky používa ďalej. */
.hero__adresa{text-transform:none;letter-spacing:.02em;
  font-size:clamp(.76rem,1.5vw,.9rem);color:#B8B0A4}

.hero__disc{font-size:clamp(.66rem,1.5vw,.84rem);letter-spacing:.3em;text-transform:uppercase;
  color:#B8B0A4;margin:clamp(.7rem,2svh,1.4rem) 0 0}
.hero__ctas{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(1rem,3svh,2.2rem)}
.hero__meta{margin-top:clamp(1rem,3svh,2.2rem);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)}
.hero__stav{margin-top:clamp(.8rem,2.4svh,1.6rem)}
.hero .rule{margin:clamp(.5rem,1.6svh,1.2rem) 0}

.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.9rem 1.6rem;min-height:3rem;border:1px solid transparent;
  transition:transform .18s,background .2s,color .2s,border-color .2s}
.btn--fill{background:var(--paper);color:var(--ink)}
.btn--fill:hover{background:var(--aqua);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--paper)}
.btn--ghost:hover{border-color:var(--aqua);color:var(--aqua);transform:translateY(-2px)}

/* stav otvorenia */
.pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.45rem .85rem;
  border:1px solid var(--line);background:var(--ink-2);color:var(--paper)}
.pill .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--muted)}
.pill[data-stav="otvorene"]{border-color:rgba(63,191,127,.5);color:#CDF3E0;background:rgba(63,191,127,.09)}
.pill[data-stav="otvorene"] .dot{background:var(--ok);box-shadow:0 0 0 4px rgba(63,191,127,.16)}
.pill[data-stav="zatvorene"] .dot{background:#E06C5A}
.pill[data-stav="nezname"]{border-color:rgba(232,176,75,.45);color:#F3DDAF;background:rgba(232,176,75,.08)}
.pill[data-stav="nezname"] .dot{background:var(--warn)}

/* ---------- SEKCIE ---------- */
.sec{padding-block:clamp(3.5rem,7vw,6.5rem);background:var(--ink);color:var(--paper)}
.sec--alt{background:var(--ink-2);color:var(--paper)}
/* Titulok sekcie ako hlavička plagátu: linka — nadpis — linka, všetko na osi. */
.sec__head{text-align:center;margin-bottom:2.8rem}
.sec__head .eyebrow{margin-bottom:1rem}
.sec__head h2{font-size:clamp(2.2rem,6vw,4.4rem)}
.sec__head h2 em{font-style:normal;color:var(--aqua)}
.sec__head p{color:var(--muted);max-width:52ch;margin:1.1rem auto 0;font-size:.95rem}
.sec__head .rule{margin:1.2rem 0}

/* dvojica hál */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem)}
.hall{background:var(--panel);color:var(--paper);border:1px solid var(--line-soft);
  text-align:center;transition:border-color .3s}
.hall:hover{border-color:var(--line)}
.hall figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.hall figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.75) contrast(1.08);
  transition:filter .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.hall:hover figure img{filter:grayscale(0) contrast(1.08);transform:scale(1.04)}
.hall__b{padding:clamp(1.4rem,2.6vw,2.2rem)}
.hall h3{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:.4rem}
/* Tri názvy tréningov oddelené bodkou. Anton je úzky a globálny `line-height:.86`
   je pre nadpis, ktorý sa láme na dva riadky, pritesný — mená sa zliali do jednej
   šedej hmoty (Dada, 14. 8. 2026). Rozostup medzi slovami aj medzi riadkami
   preto povolí, aby bolo vidieť, že sú to TRI veci, nie jeden dlhý názov. */
.hall__zoznam{word-spacing:.22em;line-height:1.04}
.hall .eyebrow{color:var(--aqua);margin-bottom:1.1rem}
.hall ul{list-style:none;margin:0;padding:0}
.hall li{padding:.55rem 0;border-top:1px solid var(--line-soft);font-size:.9rem;color:#D7D1C7}

/* ---------- PREHĽAD: register údajov ----------
   Tú istú úlohu plní bento v koncepte 4 — všetko podstatné hneď za úvodom.
   Tu je z toho tlačený register: jeden rám, bunky oddelené vlasovou linkou,
   hodnoty Antonom, popisky preloženými verzálkami. Ostré hrany, žiadne karty. */
.reg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.reg__c{display:flex;flex-direction:column;text-align:center;
  padding:1.5rem 1.1rem;background:transparent;color:var(--paper);
  border-left:1px solid var(--line-soft);transition:background .25s}
.reg__c:first-child{border-left:0}
.reg__c:hover{background:var(--ink-2)}
.reg__k{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.reg__v{font-family:'Anton',sans-serif;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;
  color:var(--aqua);margin-top:.5rem;font-variant-numeric:tabular-nums}
.reg__v i{font-style:normal;font-size:.42em;vertical-align:.35em;margin-left:.1em}
/* Slovo namiesto čísla nesmie v Antone prerásť susedné hodnoty. Menšie písmo
   ale znamená aj nižší riadok, takže slovo sadalo k hornej hrane, kým čísla
   vedľa zaberali celú výšku. Bunka si preto drží výšku veľkej hodnoty
   (riadkovanie je 1, čiže výška = font-size) a slovo v nej stojí v strede. */
.reg__v--slovo{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--paper);letter-spacing:.02em;
  min-height:clamp(2.4rem,5vw,3.6rem);display:flex;align-items:center;justify-content:center}
.reg__n{font-size:.78rem;color:var(--muted);margin-top:auto;padding-top:.9rem;line-height:1.5}

/* dnešný deň na 24-hodinovej osi — jediná otázka, na ktorú tu odpovedáme */
.dnes{margin-top:1rem;border:1px solid var(--line);background:var(--panel);color:var(--paper);
  padding:clamp(1.4rem,3vw,2.2rem);text-align:center}
.dnes h3{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.6rem 0 0}
.dnes__h{font-size:1rem;color:var(--paper);font-variant-numeric:tabular-nums;margin:.5rem 0 0}
.dnes__note{font-size:.64rem;color:var(--muted-2);margin:.5rem 0 0;letter-spacing:.02em}
.shift__t{position:relative;height:2.6rem;background:var(--ink);color:var(--paper);
  border:1px solid var(--line);margin-top:1.2rem}
.shift__t i{position:absolute;top:0;bottom:0;background:var(--aqua);opacity:.85}
.shift__t b{position:absolute;top:-.35rem;bottom:-.35rem;width:2px;background:var(--paper);
  box-shadow:0 0 0 3px rgba(242,239,233,.16)}
.shift__ax{position:relative;height:1.1rem;margin-top:.45rem;
  font-size:.66rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.shift__ax span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.shift__ax span:first-child{transform:none}
.shift__ax span:last-child{transform:translateX(-100%)}

/* ---------- ROZVRH: týždenná mriežka ----------
   Sedem stĺpcov vedľa seba, deň Antonom v hlavičke — celý týždeň je vidieť
   naraz. Prevzaté z bývalej podstránky rozvrhu, ktorá zanikla. */
.week{display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid var(--line);border-right:0}
.day{background:transparent;color:var(--paper);min-height:12rem;padding:0 0 .8rem;
  border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.5rem}
.day--today{background:rgba(0,161,227,.07)}
/* Hlavička dňa nesie už len jeho názov — otváracie hodiny z rozvrhu vypadli
   (Dada, 14. 8. 2026), takže netreba ani `min-height`, ktorá zarovnávala deň
   s dvoma zmenami s víkendom, čo mal jednu. */
.day__hd{padding:.9rem .7rem;border-bottom:1px solid var(--line-soft);text-align:center}
.day__n{font-family:'Anton',sans-serif;text-transform:uppercase;display:block;
  font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1;color:var(--muted)}
.day--today .day__n{color:var(--aqua)}
/* Tréning je TLAČIDLO — otvára okno s detailom (`trening-okno.js`). Preto
   nulujeme tlačidlový vzhľad prehliadača a dopĺňame `text-align`, inak by
   Chrome text vycentroval. Že sa dá kliknúť, hovorí šípka v rohu a to, že sa
   karta pri prejdení myšou zosvetlí — nie veta s návodom. */
.ev{margin:0 .5rem;background:var(--aqua);color:var(--ink);padding:.55rem 1.5rem .55rem .6rem;
  display:flex;flex-direction:column;gap:.1rem;position:relative;
  border:0;font:inherit;text-align:left;width:auto;cursor:pointer;
  transition:background .2s,transform .2s}
.ev:hover{background:#26B7F0;transform:translateY(-2px)}
.ev:active{transform:none}
.ev .t{font-family:'Anton',sans-serif;font-size:1.05rem;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ev .n{font-weight:700;font-size:.8rem;line-height:1.25;margin-top:.25rem;color:var(--ink)}
.ev__sip{position:absolute;right:.5rem;top:.5rem;font-size:.8rem;line-height:1;
  color:rgba(10,10,12,.55);transition:transform .2s,color .2s}
.ev:hover .ev__sip{transform:translateX(2px);color:var(--ink)}
.day__empty{color:var(--muted-2);font-size:.72rem;text-align:center;margin-top:auto;padding:.4rem}

/* zoznam ponuky ako menovky na plagáte */
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.tags span{border:1px solid var(--line);background:var(--ink-2);color:#D7D1C7;
  padding:.55rem .95rem;font-size:.78rem;font-weight:600;letter-spacing:.04em}

/* ---------- CENNÍK ----------
   Rozloženie je z konceptu 4 (karty vedľa seba, pásik úspory), prevedenie
   ostáva plagátové: jeden spoločný rám, karty oddelené vlasovou linkou, žiadne
   oblé rohy, ceny Antonom a obsah na osi — ako stĺpce v tlačenom cenníku
   (Dada, 2026-08-14). Predchádzajúce riešenie boli riadky pod sebou.
   11rem je najmenšia šírka, pri ktorej sa všetkých päť kariet ešte zmestí do
   jedného radu na 1280 px. */
.cen{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  border:1px solid var(--line)}
.cen__i{display:flex;flex-direction:column;text-align:center;
  padding:1.5rem 1.1rem;background:transparent;color:var(--paper);
  border-left:1px solid var(--line-soft);transition:background .25s}
.cen__i:first-child{border-left:0}
.cen__i:hover{background:var(--ink-2)}
.cen__k{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.cen__v{font-family:'Anton',sans-serif;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1;
  color:var(--aqua);font-variant-numeric:tabular-nums;margin-top:.55rem;white-space:nowrap}
.cen__n{font-size:.78rem;color:var(--muted);margin-top:auto;padding-top:.9rem;line-height:1.5}
.cen__n .usp{color:var(--paper);font-weight:800;white-space:nowrap;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
/* Panel sám o sebe nestačí: sekcia stojí na `--ink-2` (#121215) a `--panel`
   (#17171B) je od nej na oko nerozoznateľný. Kartu preto označí tlačená linka
   navrchu — v plagáte je to prirodzenejšie než tieň. */
.cen__i--hi{background:var(--panel);color:var(--paper);
  box-shadow:inset 0 .2rem 0 var(--aqua)}
.cen__i--hi:hover{background:#1E1E23}
.cen__i--hi .cen__v{color:var(--paper)}

/* Cenník sa netlačí naraz: rám sa objaví prázdny a stĺpce doň nabehnú ťahom
   zľava, jeden po druhom — tá istá reč ako meno klubu, ktoré sa v úvode
   „vytlačí" jedným ťahom. Doteraz tu ako jediný pohyb boli pásiky úspory
   a tie sa medzi sebou líšia o desatinu šírky, takže sekcia pôsobila statická.
   Kontajner preto sám nevystupuje — `.rise` je na ňom už len spúšťač; inak by
   sa posun celku a ťah stĺpcov prekryli a nebolo by vidieť ani jedno. */
.js .cen.rise{opacity:1;transform:none;transition:none}
.js .cen .cen__i{clip-path:inset(0 100% 0 0);
  transition:clip-path .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),background .25s}
.js .cen.in .cen__i{clip-path:inset(0 0 0 0)}
.cen__i:nth-child(1){--d:0s}
.cen__i:nth-child(2){--d:.1s}
.cen__i:nth-child(3){--d:.2s}
.cen__i:nth-child(4){--d:.3s}
.cen__i:nth-child(5){--d:.4s}
@media (prefers-reduced-motion:reduce){
  .js .cen .cen__i{clip-path:none;transition:background .25s}
}
/* Karta bez úspory drží miesto po pásiku, aby popisy všetkých kariet sedeli
   na jednej linke. Prázdny šedý pásik by tam klamal, že úspora je nulová. */
.save--prazdny{visibility:hidden}
/* Pásik nekreslí odhad — je to pomer ceny za jeden vstup k jednorazovému. */
.save{display:block;margin-top:.9rem;height:.25rem;background:var(--line-soft)}
/* Pásik čaká, kým sa jeho stĺpec dotlačí (`--d` dedí z `.cen__i`), a až potom
   sa vykreslí — inak by bežal cez ešte odrezanú kartu. */
.save i{display:block;height:100%;width:100%;background:var(--aqua);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .5s)}
.rise.in .save i{transform:scaleX(var(--w,1))}
@media (prefers-reduced-motion:reduce){.save i{transition:none}}

.note{color:var(--muted);font-size:.82rem;max-width:56ch;margin-inline:auto;text-align:center}

/* ---------- PONUKOVÝ LIST (občerstvenie) ----------
   Klub predáva na recepcii nápoje, kávu a proteín a má na to vlastný tlačený
   „ponukový list" (majiteľ, 14. 8. 2026) — názov je preto jeho, nie náš.
   Sadzba je tlačený cenník: názov vľavo, cena vpravo, medzi nimi bodkovaná
   linka. Bodky sú `repeating-linear-gradient` na pružnom prvku medzi textami,
   takže sa naťahujú podľa dĺžky názvu a nikdy nie sú „domaľované" znakmi,
   ktoré by čítačka obrazovky prečítala nahlas.
   Dva stĺpce: šesť položiek pod sebou by bolo zbytočne dlhé pod cenníkom,
   ktorý je v jednom rade. */
.ponukovy{margin-top:clamp(2.4rem,5vw,3.6rem)}
.ponukovy__hd{text-align:center;margin-bottom:1.6rem}
.ponukovy__hd h3{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:.9rem 0}
.ponukovy__hd .eyebrow{margin-top:.9rem}
.pl{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:0 clamp(1.4rem,4vw,3.5rem)}
.pl li{display:flex;align-items:baseline;gap:.6rem;
  padding:.75rem 0;border-bottom:1px solid var(--line-soft)}
.pl__n{color:#D7D1C7;font-size:.92rem}
/* Bodkovaná linka medzi názvom a cenou — vyplní všetko, čo ostane. */
.pl li::after{content:'';order:1;flex:1;height:1px;align-self:flex-end;
  margin-bottom:.32em;min-width:1.5rem;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 5px)}
.pl__c{order:2;font-family:'Anton',Impact,sans-serif;font-size:1.15rem;line-height:1;
  color:var(--aqua);font-variant-numeric:tabular-nums;white-space:nowrap}

/* galéria */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.grid4 figure{margin:0;aspect-ratio:1;overflow:hidden;background:var(--ink-2)}
.grid4 img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) contrast(1.06);
  transition:filter .55s,transform .8s cubic-bezier(.2,.7,.2,1)}
.grid4 figure:hover img{filter:grayscale(0) contrast(1.06);transform:scale(1.06)}

/* kontakt */
.two-c{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.kv{border:1px solid var(--line-soft);background:var(--panel);color:var(--paper)}
.kv__r{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.9rem 1.1rem;
  border-bottom:1px solid var(--line-soft);align-items:baseline;font-size:.92rem}
.kv__r:last-child{border-bottom:0}
.kv__r .k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.kv__r a{color:var(--aqua);text-decoration:none}
.kv__r a:hover{text-decoration:underline}
.hours{border:1px solid var(--line-soft);background:var(--panel);color:var(--paper)}
.hours__r{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1.1rem;
  border-bottom:1px solid var(--line-soft);font-size:.92rem}
.hours__r:last-child{border-bottom:0}
.hours__r .d{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hours__r .t{font-variant-numeric:tabular-nums}
.hours__r--now{background:rgba(0,161,227,.12);color:var(--paper)}
.hours__r--now .d{color:var(--aqua)}
.hours__r--unknown .t{color:var(--warn)}
.map{border:1px solid var(--line-soft);aspect-ratio:16/10;background:var(--ink-2)}
.map iframe{width:100%;height:100%;border:0;display:block;
  filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.9)}

/* Kontaktný formulár tu NIE JE (Dada, 2026-08-14) — do posilňovne sa nikto
   neobjednáva, takže vľavo sú údaje a hodiny, vpravo mapa cez celú výšku. */

/* obe strany kontaktu končia na rovnakej linke */
#kontakt .two-c{align-items:stretch}
#kontakt .two-c > div{display:flex;flex-direction:column}
#kontakt .two-c .hours{flex:1}
#kontakt .two-c .map{flex:1;aspect-ratio:auto;min-height:16rem}

/* ---------- HODNOTENIE: jeden riadok, číslo vedľa nadpisu ---------- */
.hodn{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
/* Nadpisy majú `line-height:.86`, čiže riadkový box je NIŽŠÍ než písmo a všetko,
   čo trčí nad verzálky — mäkčeň nad „Č", dĺžeň nad „Á" — vyčnieva hore z boxu.
   `.sec__head` na to má odsadenie, `.hodn__t` ho nemalo, takže sa eyebrow
   a nadpis prekrývali. Vidno to bolo až pri „ČO O NÁS HOVORIA"; „HODNOTENIE"
   nemá nad verzálkami nič (Dada, 2026-08-14). */
.hodn__t .eyebrow{margin-bottom:1.1rem}
.hodn__t h2{margin:0;font-size:clamp(2.2rem,6vw,4.4rem)}
.hodn__v{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.hodn__c{line-height:.85}
.hodn__s{letter-spacing:.14em}
.hodn__p{font-size:.85rem}
/* Pod sebou treba viac miesta než vedľa seba: „4,6" má `line-height:.85`,
   čiže jeho glyf trčí nad vlastný riadkový box a opticky si časť medzery zje. */
@media (max-width:760px){.hodn{grid-template-columns:1fr;gap:3rem}}

.hodn{text-align:center;justify-items:center}
.hodn__t{text-align:center}
.hodn__c{font-family:'Anton',sans-serif;font-size:clamp(3.4rem,7vw,5.2rem);color:var(--aqua)}
.hodn__s{color:var(--aqua);font-size:1.05rem}
.hodn__p{color:var(--muted)}
.hodn__p a{color:var(--aqua);text-decoration:none}
.hodn__p a:hover{text-decoration:underline}
@media (max-width:760px){.hodn{justify-items:center}}

/* ---------- VIDEO PÁS ----------
   Video beží ticho v slučke ako pozadie; iframe sa vloží až keď sa sekcia
   priblíži k obrazovke (video-pozadie.js). Pod ním leží fotka, takže pás
   vyzerá dobre aj kým sa video nenačíta, aj keď ho návštevník má vypnuté. */
.vpas{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(30rem,70vh,44rem);display:flex;align-items:center}
.vpas__bg{position:absolute;inset:0;z-index:0}
.vpas__bg img{width:100%;height:100%;object-fit:cover}
/* Prehrávač si svoje ovládanie (pauza, šípky) kreslí do STREDU rámu a robí to
   aj vtedy, keď hlási, že video beží — po pretočení slučky to preblikne. Preto
   rám nielen zväčšíme, ale aj posunieme nabok, takže jeho stred leží mimo
   viditeľnej plochy. Šírka 260 % (a aspoň 178 vh, aby to krylo aj vysoké úzke
   displeje) so stredom posunutým o 24 % vlastnej šírky doľava znamená, že
   viditeľné okno ukazuje vždy len ľavú časť záberu — ovládanie sa doň nedostane. */
.vpas__bg iframe{position:absolute;top:50%;left:50%;
  width:max(260%,178vh);aspect-ratio:16/9;height:auto;
  transform:translate(-74%,-50%);border:0;pointer-events:none;
  opacity:0;transition:opacity .09s linear}
.vpas__bg.bezi iframe{opacity:1;transition:opacity 1.1s ease}
.vpas__in{position:relative;z-index:2;width:var(--rail);margin-inline:auto;padding-block:3.5rem}
.vpas__credit{position:absolute;right:1rem;bottom:.7rem;z-index:2;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase}

.vpas{background:var(--ink);color:var(--paper);text-align:center;justify-content:center}
.vpas__bg img{filter:grayscale(1) contrast(1.1)}
.vpas__bg iframe{filter:grayscale(1) contrast(1.1)}
.vpas__bg::after{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 50% 50%,rgba(10,10,12,.55) 0%,rgba(10,10,12,.9) 72%,var(--ink) 100%)}
/* Nadpis je Anton s dĺžňami a mäkčeňmi („VÁŠ TRÉNING") a tie pri tesnom
   riadkovaní prerastajú svoj riadkový box nahor. Odstupy okolo neho preto
   nesmú byť len optické minimum. */
.vpas .eyebrow{margin-bottom:1.6rem}
/* Globálny `line-height:.86` na nadpisoch je stavaný na jednoslovné mená
   („CENNÍK", „AQUA"). Tento nadpis sa na počítači láme na dva riadky a pri
   .86 sa dolné dĺžne horného riadka („Váš tréning") dotýkali verzálok
   spodného — riadkovanie tu preto povolí (Dada, 14. 8. 2026). */
.vpas h2{font-size:clamp(2rem,5.4vw,3.8rem);line-height:1.06}
.vpas p{color:#B8B0A4;max-width:44ch;margin:1.5rem auto 0}
.vpas__credit{color:var(--muted-2)}

/* footer */
.foot{background:var(--ink-2);color:var(--paper);border-top:1px solid var(--line-soft);
  padding-block:3rem 1.6rem;font-size:.87rem;text-align:center}
.foot img{height:3.2rem;width:auto;margin:0 auto 1rem}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;margin:1.4rem 0}
.foot nav a{color:var(--muted);text-decoration:none;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.foot nav a:hover{color:var(--aqua)}
.foot__b{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line-soft);
  color:var(--muted-2);font-size:.72rem;letter-spacing:.1em}
.foot__b a{color:var(--aqua)}

/* reveal */
.rise{opacity:0;transform:translateY(1.2rem)}
.js .rise{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rise.in{opacity:1;transform:none}
html:not(.js) .rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise,.js .rise{opacity:1!important;transform:none!important;transition:none}}

/* ---------- MOBIL ---------- */
@media (max-width:900px){
  #kontakt .two-c .map{flex:none;min-height:0;aspect-ratio:16/10}
  #kontakt .two-c .hours{flex:none}
  :root{--rail:min(72rem, 88vw)}
  .nav__links{position:fixed;top:var(--nav-h);left:0;right:0;
    background:rgba(10,10,12,.97);color:var(--paper);backdrop-filter:blur(16px);
    flex-direction:column;gap:0;padding:1rem 0 1.6rem;border-bottom:1px solid var(--line-soft);
    display:none;text-align:center}
  .nav__links.open{display:flex}
  .nav__links a{padding:.95rem 0;width:100%;font-size:.9rem;border-bottom:0}
  .burger{display:inline-flex}
  .nav__cta{display:none}
  .two,.two-c{grid-template-columns:1fr}
  /* Register sa na mobile láme na dvojicu — štyri stĺpce by z hodnôt v Antone
     spravili úzke prúžky. Vnútorné linky musia prejsť aj medzi riadkami. */
  .reg{grid-template-columns:1fr 1fr}
  .reg__c:nth-child(odd){border-left:0}
  .reg__c:nth-child(n+3){border-top:1px solid var(--line-soft)}
  /* ---------- KONTAKTNÝ LIST NA MOBILE: VŠETKÝCH OSEM ----------
     VÝNIMKA z pravidla /design č. 8 (na mobile najviac 4 fotky), vyžiadaná
     výslovne pre tento koncept (Dada, 2026-08-14) — rovnako ako v koncepte 4.
     Galéria je kontaktný list, a ten má zmysel jedine celý.
     Linky sa musia prepočítať na dva stĺpce: pravú hranu stráca každá druhá
     dlaždica (nie štvrtá) a spodnú posledné dve (nie posledné štyri). */
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid4 figure:nth-child(4n){border-right:1px solid var(--line-soft)}
  .grid4 figure:nth-child(2n){border-right:0}
  .grid4 figure:nth-last-child(-n+4){border-bottom:1px solid var(--line-soft)}
  .grid4 figure:nth-last-child(-n+2){border-bottom:0}
  .kv__r{grid-template-columns:6rem 1fr}
  /* ---------- ÚVOD NA MOBILE ----------
     Obsah je vystredený na výšku (Dada, 2026-08-14). Predtým visel zhora,
     lebo vycentrovaný nechával nad nadpisom hluché miesto — lenže tým sa
     presunulo pod obsah, kde ho bolo ešte viac vidieť. Ostáva teda `margin:auto`
     zo základného pravidla; voľná plocha sa rozdelí rovnako hore aj dole. */
  /* Presný čas otvorenia v kapsule je na mobile navyše — to isté číslo je
     o kúsok nižšie v Prehľade, aj s časovou osou dňa. Ostáva len stav. */
  .pill__det{display:none}
  /* V pätičke ostáva na mobile len právny odkaz (Dada, 2026-08-14). Názvy
     sekcií tam boli tretíkrát — sú v menu aj v samotnej stránke — a robili
     z konca stránky ďalší dlhý zoznam. */
  /* Odkaz na ochranu súkromia z pätičky vypadol (stránka nemá formulár), a bol
     to jediný, ktorý tu na mobile ostával — zvyšok sú názvy sekcií, ktoré sú
     v menu aj v samotnej stránke. Pätičkové menu preto na telefóne odpadá celé.
     POZOR: pôvodné pravidlo znelo `a:not(.foot__pravne)`, čo po odstránení toho
     odkazu začalo skrývať úplne všetko — teda to isté, len okľukou. */
  .foot nav{display:none}
}
/* Kapsula stavu potrebuje od riadka nad sebou poriadny odstup — pri 19 px
   pôsobila ako jeho pokračovanie. Rastie až od 640 px výšky okna: na nižšom
   mobile nie je odkiaľ to miesto vziať bez toho, aby úvod prerástol fold. */
@media (max-width:900px) and (min-height:640px){
  .hero__stav{margin-top:clamp(1.6rem,4.5svh,2.6rem)}
}

/* Mobil NA ŠÍRKU: výšky je tak málo, že plagátové meno v plnej mierke aj so
   všetkými riadkami pod ním prerastie prvú obrazovku. Meno sa preto viaže na
   výšku a dva riadky idú preč — oba sú doslova o pár centimetrov nižšie
   v Prehľade (druhy cvičenia aj vstup/hodnotenie/MultiSport). */
@media (max-height:520px){
  .hero h1 .s1{font-size:clamp(1rem,3.4vw,1.6rem);margin-bottom:.2em}
  .hero h1 .s2{font-size:min(14.5vw,20svh)}
  .hero__disc,.hero__meta{display:none}
}
/* Medzistupeň — široké a stredne nízke okno (1920×600). Riadky ostávajú,
   povoliť musí len mierka mena; 30 svh je tam ešte priveľa. */
@media (min-height:521px) and (max-height:660px){
  .hero h1 .s1{font-size:clamp(1.1rem,3.4vw,2rem)}
  .hero h1 .s2{font-size:min(14.5vw,22svh)}
}

@media (max-width:560px){
  /* Meno klubu bolo na telefóne pridrobné (Dada, 2026-08-14) — 17vw dávalo
     na 375 px len 64 px. Stĺpec je úzky, plagát z toho musí vyťažiť viac. */
  .hero h1 .s1{font-size:clamp(1.5rem,5.2vw,3rem)}
  .hero h1 .s2{font-size:clamp(3.8rem,min(21vw,26svh),6.4rem)}
  /* Cenník ide na dvojicu — päť kariet pod sebou by bol stĺpec na pol obrazovky.
     Piata karta („Doplnky") ostáva sama v poslednom rade, preto dostane linku
     zhora ako každý ďalší riadok. */
  .cen{grid-template-columns:1fr 1fr}
  .cen__i:nth-child(odd){border-left:0}
  .cen__i:nth-child(n+3){border-top:1px solid var(--line-soft)}
  /* Piata karta by ostala sama v rade a rám by mal dieru — dostane celý riadok. */
  .cen__i:last-child{grid-column:1 / -1}
}

/* ============================================================================
   MODERNIZÁCIA — 2026
   Plagátový register ostáva, ale plagát prestáva byť obrázok a stáva sa
   tlačiarňou: meno klubu je vytlačené fotkou haly, na okrajoch sedia
   pasovacie značky, za každou sekciou stojí obrovské duté slovo, ktoré sa
   pri rolovaní posúva inak než obsah — a cenník končí odtrhávacími
   ústrižkami s telefónnym číslom, ako plagát na nástenke.
   ========================================================================== */

/* ---------- pasovacie značky a bočné popisky (tlačiarenský register) ---------- */
.znacky{position:fixed;inset:0;z-index:180;pointer-events:none;display:none}
@media (min-width:1180px){.znacky{display:block}}
.znacky i{position:absolute;width:1.4rem;height:1.4rem;opacity:.4}
.znacky i::before,.znacky i::after{content:'';position:absolute;background:var(--muted-2)}
.znacky i::before{left:50%;top:0;bottom:0;width:1px}
.znacky i::after{top:50%;left:0;right:0;height:1px}
.znacky i:nth-child(1){left:1rem;top:1rem}
.znacky i:nth-child(2){right:1rem;top:1rem}
.znacky i:nth-child(3){left:1rem;bottom:1rem}
.znacky i:nth-child(4){right:1rem;bottom:1rem}
.znacky b{position:absolute;font-weight:400;font-size:.58rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted-2);opacity:.55;white-space:nowrap}
.znacky b:nth-of-type(1){left:1.5rem;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.znacky b:nth-of-type(2){right:1.5rem;top:50%;writing-mode:vertical-rl;transform:translateY(-50%)}

/* zrno mierne „dýcha" — tlačený papier, nie statická textúra */
body::after{animation:zrno 6s steps(6,end) infinite}
@keyframes zrno{
  0%{transform:translate(0,0)}     16%{transform:translate(-2%,1%)}
  33%{transform:translate(1%,-2%)} 50%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,1%)}  83%{transform:translate(-2%,-1%)}
  100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* ---------- HERO: meno vytlačené fotkou haly ----------
   Výplň písma je fotka + gradient, takže sa nikde nestratí do čierna;
   obrys drží písmeno čitateľné aj nad najtmavším miestom fotky. */
.hero h1 .s2{
  /* Meno je vytlačené fotkou haly s vrecami. Fotka je predpripravená ako
     duotón (assets/img/vypln-mena.jpg) — v origináli sú vrecia čierne a
     v písme by sa stratili do čierneho pozadia. Duotón má aj v tieňoch
     dosť svetla, takže meno drží kontrast a textúra ostane vidieť. */
  background-image:url(assets/img/vypln-mena.jpg);
  background-size:150% auto;
  background-position:center 46%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:dych 28s ease-in-out infinite alternate}
@keyframes dych{from{background-size:150% auto}to{background-size:178% auto}}
@media (prefers-reduced-motion:reduce){.hero h1 .s2{animation:none}}

/* písmená nabiehajú po jednom — plagát sa „vytlačí" */
/* meno sa „vytlačí" zľava doprava — jeden ťah tlačiarenského valca */
.js .hero h1 .s2{clip-path:inset(0 100% 0 0);
  animation:dych 28s ease-in-out infinite alternate,
            tlac 1.05s .22s cubic-bezier(.62,.02,.2,1) forwards}
@keyframes tlac{to{clip-path:inset(0 -.06em 0 0)}}
.js .hero h1 .s1,.js .hero__kredo,.js .hero__disc,.js .hero__ctas,.js .hero__meta,.js .hero .eyebrow{
  opacity:0;animation:vstup .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .eyebrow{animation-delay:.05s}
.js .hero h1 .s1{animation-delay:.12s}
/* Kredo nabieha hneď po mene — je to jeho podnadpis, nie ďalší údaj v poradí. */
.js .hero__kredo{animation-delay:.5s}
.js .hero__disc{animation-delay:.62s}
.js .hero__ctas{animation-delay:.74s}
.js .hero__meta{animation-delay:.86s}
@keyframes vstup{from{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .hero h1 .s1,.js .hero__kredo,.js .hero__disc,.js .hero__ctas,
  .js .hero__meta,.js .hero .eyebrow{animation:none;opacity:1;transform:none}
  .js .hero h1 .s2{animation:none;clip-path:none}}

/* ---------- duté slovo za sekciou ----------
   Beží pomalšie než obsah, takže stránka dostane hĺbku bez toho, aby
   niečo prekrylo text — leží úplne vzadu a je len obrysové. */
.sec{position:relative;overflow:hidden}
.sec > .rail{position:relative;z-index:2}
.duch{position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;user-select:none;
  transform:translate(-50%,-50%);white-space:nowrap;
  font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(7rem,22vw,17rem);line-height:.8;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px var(--line);opacity:.5}
@media (max-width:700px){.duch{opacity:.32;-webkit-text-stroke-width:1px}}

/* ---------- fotky ako tlačený rastr ----------
   Bodový rastr nad fotkou drží tlačený charakter; pod kurzorom sa stratí
   a fotka nabehne do plnej farby. */
.hall figure,.grid4 figure{position:relative}
.hall figure::after,.grid4 figure::after{content:'';position:absolute;inset:0;z-index:2;
  background-image:radial-gradient(circle at 50% 50%,rgba(10,10,12,.9) 34%,transparent 36%);
  background-size:3px 3px;opacity:.5;transition:opacity .55s;pointer-events:none}
.hall:hover figure::after,.grid4 figure:hover::after{opacity:0}

/* galéria ako kontaktný list — očíslované okienka s vlasovým popisom */
.grid4{gap:0;border:1px solid var(--line-soft)}
.grid4 figure{aspect-ratio:1;border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.grid4 figure:nth-child(4n),.grid4 figure:last-child{border-right:0}
.grid4 figure:nth-last-child(-n+4){border-bottom:0}
.grid4 figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:space-between;gap:.6rem;
  padding:.5rem .6rem;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:linear-gradient(transparent,rgba(10,10,12,.9))}
.grid4 figcaption b{color:var(--aqua);font-weight:400}

/* ---------- hodnotenie: číslo dobehne ---------- */
.hodn__c{font-variant-numeric:tabular-nums}

/* ---------- VYSKAKOVACIE OKNO S DETAILOM TRÉNINGU ----------
   Značky vyrába `trening-okno.js`, ktorý je spoločný pre oba koncepty —
   vzhľad si každý rieši sám. Tu je to výstrižok plagátu: ostré hrany, vlasové
   linky, nadpis Antonom, aqua akcenty. Žiadne oblé rohy.
   Zrno (`body::after`) je na `z-index:200` a `position:fixed`, takže leží NAD
   bežným obsahom — natívny `<dialog>` sa však kreslí do vrstvy navrchu (top
   layer) a zrno je pod ním. Preto ho okno má aj samo pre seba, inak by ako
   jediné miesto na stránke pôsobilo hladko. */
.tokno{border:0;padding:0;margin:auto;background:transparent;color:var(--paper);
  width:min(40rem,92vw);max-height:min(86svh,54rem);overflow:visible}
.tokno::backdrop{background:rgba(6,6,8,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tokno__k{position:relative;overflow:auto;max-height:min(86svh,54rem);
  background:var(--panel);color:var(--paper);
  border:1px solid var(--line);box-shadow:inset 0 .25rem 0 var(--aqua);
  padding:clamp(1.5rem,4vw,2.6rem)}
/* zrno aj vo vnútri okna — bez neho by karta vyzerala ako z inej stránky */
.tokno__k::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.tokno__k > *{position:relative;z-index:1}
.tokno__x{position:absolute;top:.6rem;right:.6rem;z-index:3;
  width:2.75rem;height:2.75rem;display:grid;place-items:center;
  background:transparent;color:var(--muted);border:1px solid var(--line-soft);
  cursor:pointer;transition:color .2s,border-color .2s}
.tokno__x:hover{color:var(--aqua);border-color:var(--aqua)}
.tokno__x svg{width:1.1rem;height:1.1rem}
.tokno__kick{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--aqua);margin:0 2.5rem 0 0}
.tokno__n{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3rem);line-height:.92;margin:.7rem 0 0}
.tokno__lead{color:#D7D1C7;margin:.9rem 0 0}
.tokno h3{font-family:inherit;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 .7rem}
.tokno__casy{margin-top:1.8rem;border-top:1px solid var(--line-soft);padding-top:1.4rem}
.tokno__casy ul{list-style:none;margin:0;padding:0}
.tokno__casy li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--line-soft)}
.tokno__casy li:last-child{border-bottom:0}
.tokno__den{font-size:.88rem;color:#D7D1C7}
.tokno__cas{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:1.15rem;line-height:1;
  color:var(--aqua);font-variant-numeric:tabular-nums;white-space:nowrap}
.tokno__trener{margin-top:1.6rem;border-top:1px solid var(--line-soft);padding-top:1.4rem}
.tokno__meno{font-weight:800;margin:0 0 .3rem}
.tokno__popis{color:var(--muted);font-size:.92rem;margin:1.4rem 0 0}
.tokno__fakty{margin:1.4rem 0 0;padding:0;border-top:1px solid var(--line-soft)}
.tokno__f{display:grid;grid-template-columns:9rem 1fr;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--line-soft)}
.tokno__f dt{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);
  padding-top:.2em}
.tokno__f dd{margin:0;font-size:.9rem;color:#D7D1C7}
/* --- Škola, ktorá tréning v klube vedie (gymnastika, 14. 8. 2026) ---
   Cudzie logo je stavané na biely papier, preto stojí na svetlej tabuľke a nie
   priamo na tmavej karte — inak by z neho fialový nápis takmer zmizol. Tabuľka
   je ostrá a bez rádiusu, tak ako všetko ostatné na tomto koncepte. */
.tokno__partner{margin-top:1.6rem;border-top:1px solid var(--line-soft);padding-top:1.4rem}
/* Logo sedí na výškovom strede textu vedľa seba (Dada, 14. 8. 2026) — nie
   zarovnané na prvý riadok; text je vyšší ako tabuľka a zhora to „padalo". */
.tokno__pk{display:flex;align-items:center;gap:1.2rem}
.tokno__pznak{flex:0 0 auto;width:6.5rem;background:var(--paper);
  border:1px solid var(--line);padding:.7rem;display:block}
.tokno__pznak img{width:100%;height:auto;display:block}
.tokno__pt{min-width:0}
.tokno__pz{margin:.15rem 0 0;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--aqua)}
.tokno__po{margin:.5rem 0 0;font-size:.9rem;color:#D7D1C7}
.tokno__pkont{margin:.35rem 0 0;display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.9rem}
.tokno__pl{color:var(--muted);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;transition:color .2s}
.tokno__pl:hover{color:var(--aqua)}
/* Odrážky z letáka. Odškrtnutie je nakreslené dvoma hranami, nie znakom — znak
   by v inom písme vyzeral zakaždým inak. */
.tokno__zisk{margin-top:1.6rem;border-top:1px solid var(--line-soft);padding-top:1.4rem}
.tokno__zisk ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.tokno__zisk li{position:relative;padding-left:1.7rem;font-size:.92rem;color:#D7D1C7}
.tokno__zisk li::before{content:'';position:absolute;left:.2rem;top:.32em;
  width:.55rem;height:.3rem;border-left:2px solid var(--aqua);border-bottom:2px solid var(--aqua);
  transform:rotate(-45deg)}
.tokno__piliere{list-style:none;margin:1.2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.tokno__piliere li{border:1px solid var(--line-soft);padding:.9rem;background:var(--ink-2)}
.tokno__piliere b{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.3}
.tokno__piliere span{display:block;margin-top:.35rem;font-size:.82rem;color:var(--muted)}
@media (max-width:560px){
  .tokno__piliere{grid-template-columns:1fr}
  /* Na telefóne logo NAD text, nie vedľa neho — vedľa ostalo textu asi 55 %
     šírky a meno aj riadok o zápise sa lámali do troch riadkov. */
  .tokno__pk{flex-direction:column;align-items:flex-start;gap:.9rem}
}

/* Kým klub text nepotvrdí, okno to povie nahlas — tá istá reč ako pri hodinách. */
.tokno__navrh{margin:1.4rem 0 0;border:1px solid rgba(232,176,75,.4);
  background:rgba(232,176,75,.07);color:#F3DDAF;padding:.9rem 1.1rem;font-size:.82rem}
.tokno__akcie{margin-top:1.6rem}
.tokno__b{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  background:var(--paper);color:var(--ink);font-weight:800;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.9rem 1.6rem;min-height:3rem;
  transition:background .2s,transform .18s}
.tokno__b:hover{background:var(--aqua);transform:translateY(-2px)}
/* Stránka pod otvoreným oknom sa nesmie rolovať spolu s ním. */
body.tokno-otvorene{overflow:hidden}
@media (max-width:560px){
  .tokno__f{grid-template-columns:1fr;gap:.2rem}
  .tokno__f dt{padding-top:0}
}
@media (prefers-reduced-motion:no-preference){
  .tokno[open]{animation:toknoVstup .28s cubic-bezier(.2,.7,.2,1)}
  @keyframes toknoVstup{from{opacity:0;transform:translateY(.8rem)}to{opacity:1;transform:none}}
}

/* ============================================================================
   ŽIVOT NA STRÁNKE (Dada, 14. 8. 2026 — „skús tam pridať pár zaujímavých vecí")
   ----------------------------------------------------------------------------
   Všetko nižšie je v reči plagátu: linky, pečiatky, tlačová farba. Žiadne
   poskakovanie. Pravidlá, ktoré platia pre celý blok:
     · pohyb pri odkrývaní beží LEN so `.js` a LEN pri `no-preference` — bez
       skriptu aj pri vypnutom pohybe je všetko rovno v koncovom stave;
     · zmeny pri prejdení kurzorom sú v `(hover:hover)`, aby na dotykovom
       displeji nezostali „zaseknuté" po ťuknutí.
   ========================================================================== */

/* --- 1. Vlasové linky sa dokresľujú od stredu ---
   Sekcia sa pri odkrytí najprv „nalinajkuje" a až potom v nej stojí nadpis —
   presne to robí sadzač, keď stavia plagát. Stojí to jeden `transform`. */
@media (prefers-reduced-motion:no-preference){
  .js .rise .rule{transform:scaleX(0);transform-origin:center;
    transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .rise.in .rule{transform:none}
  /* Druhá linka ide o chlp neskôr, aby sa nekreslili ako jedna vec. */
  .js .rise .rule + h2 + .rule{transition-delay:.12s}
}

/* --- 2. Menovky ponuky sa pri prejdení „opečiatkujú" ---
   Z obrysu sa stane plná plocha v tlačovej farbe. Je to to isté gesto ako
   pri tlačidle v úvode, len potichu. */
@media (hover:hover){
  .tags span{transition:background .25s,color .25s,border-color .25s,transform .25s}
  .tags span:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);
    transform:translateY(-2px)}
}

/* --- 3. Register údajov reaguje na kurzor ---
   Bunka posvetlie a jej číslo sa nadvihne. Ukazuje, že sú to štyri samostatné
   údaje, nie jedna tabuľka. */
@media (hover:hover){
  .reg__c{transition:background .25s}
  .reg__c:hover{background:var(--ink-2)}
  .reg__v{transition:transform .25s cubic-bezier(.2,.7,.2,1),color .25s}
  .reg__c:hover .reg__v{transform:translateY(-2px);color:var(--aqua)}
}

/* --- 4. Cenníková karta dostane pri prejdení tlačenú linku navrchu ---
   Tú istú, akou je označená karta s jednorazovým vstupom — takže hover
   naznačuje „aj toto je voľba", nie iba že sa niečo deje. */
@media (hover:hover){
  .cen__i{box-shadow:inset 0 .2rem 0 transparent;transition:background .25s,box-shadow .3s}
  .cen__i:hover{box-shadow:inset 0 .2rem 0 var(--line)}
  .cen__i--hi:hover{box-shadow:inset 0 .2rem 0 var(--aqua)}
  .cen__v{transition:color .25s}
  .cen__i:hover .cen__v{color:var(--paper)}
  .cen__i--hi:hover .cen__v{color:var(--aqua)}
}

/* --- 5. Galéria: popiska sa pri prejdení rozjasní ---
   Fotka sa už pod kurzorom zbavuje tlačeného rastra (vyššie v hárku); toto
   k tomu dopĺňa popisku, aby bolo jasné, na čo sa pozerám.
   POZOR na to, čo tu bolo predtým: popiska sedí `bottom:0` v dlaždici, takže
   posun nadol ju vysunul VON z fotky a text sa dotýkal ďalšieho radu. Preto sa
   nehýbe vôbec — mení sa len sýtosť, prestrkanie a farba čísla. */
@media (hover:hover){
  .grid4 figcaption{opacity:.78;transition:opacity .35s}
  .grid4 figure:hover figcaption{opacity:1}
  .grid4 figcaption span{transition:letter-spacing .35s}
  .grid4 figure:hover figcaption span{letter-spacing:.24em}
  .grid4 figcaption b{transition:color .35s}
  .grid4 figure:hover figcaption b{color:var(--paper)}
}

/* ---------- ROZVRH NA UŽŠOM OKNE: DENNÍK, NIE MRIEŽKA ----------
   Vlastná hranica 1200 px, nie 900 ako zvyšok mobilných pravidiel (Dada,
   14. 8. 2026). Pri 1024 px na šírku (iPad) sa síce sedem stĺpcov ešte vošlo,
   ale stĺpec mal ~130 px: čas „17:00-18:30" sa lámal na dva riadky a šípka
   ležala naň. Zoznam je na tej šírke čitateľnejší než mriežka, do ktorej sa
   nič nezmestí. */
@media (max-width:1200px){
  /* Týždeň sa skladá pod seba: názov dňa do riadka, tréningy pod ním.
     Filter po dňoch tu nie je — dni sú dosť kompaktné. */
  .week{grid-template-columns:1fr;border-right:1px solid var(--line)}
  .day{min-height:0;border-right:0;border-bottom:1px solid var(--line-soft);padding-bottom:.7rem}
  .day:last-child{border-bottom:0}
  .day__hd{display:flex;flex-direction:row;align-items:baseline;
    gap:1rem;text-align:left;border-bottom:0;padding-block:.7rem}
  /* Deň bez tréningu je JEDEN riadok — nie blok s pomlčkou v prázdne.
     Neskrýva sa (ako v koncepte 2), aby bolo vidieť celý týždeň vrátane toho,
     kedy sa NEcvičí. */
  .day--prazdny{padding-bottom:0;gap:0}
  .day--prazdny .day__empty{display:none}
  /* Deň s tréningom dostane linku pod hlavičkou späť — oddeľuje ju od kariet. */
  .day:not(.day--prazdny) .day__hd{border-bottom:1px solid var(--line-soft);
    margin-bottom:.5rem}
  /* Čas a názov na stred karty. Vľavo zarovnané sa na širokej karte tlačili
     k hrane a zvyšok ostal prázdny; vypchávka je na oboch stranách rovnaká,
     aby text sedel v skutočnom strede a nie v strede plochy po šípke. */
  .ev{align-items:center;text-align:center;padding:.6rem 1.5rem}
}