/* ticcom.sk — nadstavba nad `site.css` (dizajnový systém okoloslovenska/2026).
   Pravidlo: `site.css` sa TU NEUPRAVUJE — je to identická kópia zo `web/site/assets/css/`,
   aby sa dala kedykoľvek pretiahnuť znova a diff ukázal iba skutočný drift. Všetko,
   čo firemná stránka potrebuje navyše (časová os, tabuľka údajov, formulár), je v tomto
   súbore a používa tie isté premenné `--ink/--blue/--red/--sky/--line/--card/--graph`. */

/* ---------- hero ---------- */
/* Nadpis je tu KRÁTKY (jedno slovo) — v OS hero ho drží dlhý názov pretekov, preto by
   sám o sebe pôsobil stratene; podnadpis dostáva väčšiu váhu a wordmark stojí nad ním. */
.hero h1{letter-spacing:-.02em}
.hero .claim{font-size:clamp(20px,2.6vw,27px);font-weight:700;color:var(--ink);margin-top:6px;max-width:760px}
.hero .sub{margin-top:12px}

/* ---------- časová os ---------- */
/* Zvislá linka je pseudoelement kontajnera, nie border kariet — inak by sa lámala
   v medzerách medzi nimi. Body sedia na `left:0` mriežky, karta začína za nimi. */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl .mile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;margin-bottom:12px}
.tl .mile::before{content:"";position:absolute;left:-30px;top:20px;width:12px;height:12px;border-radius:50%;
  background:var(--card);border:3px solid var(--blue)}
/* športové míľniky nesú červený bod — tá istá farba ako trať/prémie v mapách,
   takže na stránke nevzniká druhý farebný kód pre „šport" */
.tl .mile.sport::before{border-color:var(--red)}
.tl .mile .y{display:inline-block;font:700 12px 'Cascadia Mono',Consolas,monospace;letter-spacing:.04em;
  background:var(--sky);color:var(--blue);border-radius:5px;padding:2px 8px;margin-bottom:6px}
.tl .mile.sport .y{background:#FBE3E0;color:var(--red)}
.tl .mile h3{font-size:15.5px;font-weight:700;margin-bottom:3px}
.tl .mile p{font-size:13.5px;color:var(--graph)}

/* ---------- tabuľka firemných údajov ---------- */
table.udaje{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;font-size:14.5px}
table.udaje td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.udaje tr:last-child td{border-bottom:none}
table.udaje td:first-child{color:var(--graph);width:34%;white-space:nowrap}
/* 404 „roadbook" — km stĺpec úzky a číselne zarovnaný, ako v rozpise */
table.rb404 td:first-child{width:1%;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* 404 — pás z 3D animácie s prekryvom „mimo trate". SVG má viewBox = rozmer
   obrázka a je natiahnuté cez celý pás, preto súradnice bodky a čiary sedia
   pri každej šírke okna. */
.offroute{position:relative;margin:0;background:var(--dark);border-bottom:1px solid var(--line);overflow:hidden}
.offroute img{width:100%;height:auto;display:block;max-height:520px;object-fit:cover;object-position:center bottom}
.offroute svg{position:absolute;inset:0;width:100%;height:100%}
.offroute .back{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:10 9;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}
.offroute .tip{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}
.offroute .you{fill:#fff;stroke:var(--blue);stroke-width:3}
.offroute .pulse{fill:none;stroke:#fff;stroke-width:2;opacity:.9;transform-box:fill-box;transform-origin:center;animation:offroute-pulse 2.2s ease-out infinite}
.offroute .tag rect{fill:rgba(15,27,46,.82);stroke:rgba(255,255,255,.35)}
.offroute .tag text{fill:#fff;font:700 15px 'Segoe UI',system-ui,sans-serif;text-anchor:middle}
.offroute .tag-m{display:none}
.offroute figcaption{position:absolute;left:12px;bottom:8px;max-width:calc(100% - 24px);font-size:11px;line-height:1.35;color:rgba(255,255,255,.85);background:rgba(15,27,46,.55);padding:3px 8px;border-radius:6px}
@keyframes offroute-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@media (max-width:640px){
  .offroute .tag-d{display:none}.offroute .tag-m{display:block}.offroute .tag-m text{font-size:40px}
  .offroute .you{r:16px;stroke-width:6}.offroute .pulse{r:22px;stroke-width:4}
  .offroute .back,.offroute .tip{stroke-width:7}.offroute .back{stroke-dasharray:24 20}
  /* atribúcia pod obrázok, nie cez stužku */
  .offroute figcaption{position:static;max-width:none;background:none;color:rgba(255,255,255,.75);padding:5px 16px 7px;border-radius:0;font-size:10px}
}
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:18px;align-items:start}
.factgrid .card p{font-size:14.5px;color:var(--graph);margin-bottom:11px}
.factgrid .card p:last-child{margin-bottom:0}

/* ---------- kontaktný formulár ---------- */
form.cf{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:620px}
form.cf label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px}
form.cf label:first-of-type{margin-top:0}
form.cf input,form.cf textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font:inherit;font-size:15px;background:var(--bg);color:var(--ink)}
form.cf input:focus,form.cf textarea:focus{outline:2px solid var(--blue);outline-offset:1px;background:var(--card)}
form.cf textarea{min-height:130px;resize:vertical}
/* honeypot — pole musí ostať vyplniteľné pre robota, preto sa iba odsúva mimo plátno
   (`display:none` časť botov preskočí a pasca prestane fungovať) */
.hp{position:absolute;left:-9999px;top:-9999px}
form.cf button{margin-top:18px;background:var(--blue);color:#fff;font:700 15px 'Segoe UI',system-ui,Arial,sans-serif;
  border:none;border-radius:999px;padding:12px 28px;cursor:pointer}
form.cf button:hover{background:#0E568F}
form.cf button:disabled{opacity:.55;cursor:default;background:var(--blue)}
.formnote{font-size:12px;color:var(--graph);margin-top:12px}
.flash{display:none;margin-bottom:16px;padding:13px 17px;border-radius:12px;font-size:14px;max-width:620px}
.flash.ok{background:#E9F6EF;border:1px solid #BFE3C8;color:#1D5E2C}
.flash.err{background:#FBEBEB;border:1px solid #F0C4C4;color:#8A1F1F}

/* ---------- odkazy na referencie ---------- */
/* Vizuál preberá `a.dl` zo `site.css` (rovnaká dlaždica ako súbory na stiahnutie);
   `.ref` len prehodí odznak z modrej výplne na jemný `--sky`, lebo tu nejde o formát
   súboru ale o druh spolupráce — modrý blok by ťahal pozornosť viac než názov partnera.
   ⚠ Odznak nesie DRUH spolupráce, nie doménu: `visegrad4bicyclerace.com` je taký dlhý,
   že by v odznaku zožral šírku a názov partnera by sa zlomil do troch riadkov.
   Doména patrí doprava do `.sz` — a preto je aj mriežka širšia než pri súboroch.
   ⚠ `min(…,100%)`: holé `minmax(400px,…)` je na mobile širšie než obrazovka →
   vodorovné rolovanie (446 px pri 375 px, zistené smoke testom 2026-10-08).
   Na úzkej šírke ide doména pod text — vedľa by ho stlačila na 15 px. */
.dlgrid.refs{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
a.dl.ref .fmt{background:var(--sky);color:var(--blue);font-weight:700}
a.dl.ref .sz{font-size:12px;white-space:nowrap}
@media (max-width:520px){
  a.dl.ref{flex-wrap:wrap;row-gap:4px}
  a.dl.ref .sz{flex-basis:100%;text-align:right}
}

/* ---------- hlavička na úzkych šírkach ---------- */
/* OS má v navigácii tri položky a na mobile sa zmestia; tu ich je päť a flexbox
   ich zalomil do druhého riadku — logo pritom scvrklo na nulovú šírku a z hlavičky
   úplne zmizlo. `flex:none` mu šírku zamkne, `nowrap` + `overflow-x` nechá lištu
   vodorovne posúvateľnú, takže sa nestratí ani jedna položka a výška ostane 62 px
   (na ktorú je naviazané `section[id]{scroll-margin-top}` v `site.css`). */
@media (max-width:760px){
  .topbar .wrap{gap:10px}
  .topbar .logo{flex:none}
  .topbar nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{white-space:nowrap}
}

/* ---------- zoznam podujatí ---------- */
/* Ročníkový odznak je zámerne tá istá monospace „plaketa" ako v časovej osi — obe
   veci sú rok, takže by bolo mätúce dať im dva rôzne tvary. Mriežka je trojstĺpcová
   (rok · názov · čo sme dodali), lebo zarovnané roky sa čítajú ako os. */
.evlist{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 20px 10px}
/* Deliaca čiara patrí SKUPINE, nie riadku: jedno podujatie môže mať viac období
   (Okolo Slovenska dve, Dni cyklistiky tri) a linka medzi nimi by ich roztrhla
   na samostatné položky — pritom je to jeden vzťah s prestávkou. */
.evgrp{border-bottom:1px solid var(--line);padding:10px 0}
.evgrp:last-child{border-bottom:none}
.ev{display:grid;grid-template-columns:96px 250px 1fr;gap:4px 16px;align-items:baseline;
  padding:2px 0}
/* Názov sa píše len pri prvom období skupiny; v ďalších riadkoch je bunka prázdna,
   aby roky aj popisy ostali zarovnané v tých istých stĺpcoch. */
.ev .n:empty{min-height:1px}
.ev .y{font:700 11.5px 'Cascadia Mono',Consolas,monospace;background:var(--sky);color:var(--blue);
  border-radius:5px;padding:2px 7px;text-align:center;white-space:nowrap}
/* Jedno podujatie môže mať dve obdobia s jedným spoločným popisom (Dni cyklistiky) —
   vtedy sa do bunky roka vloží `.ys` s dvoma odznakmi pod sebou. Grid, nie zalomenie
   textu v jednom odznaku: dva rozsahy sú dva údaje a majú tak aj vyzerať. */
.ev .ys{display:grid;gap:4px}
.ev .n{font-size:14.5px;font-weight:700}
.ev .d{font-size:13px;color:var(--graph)}

/* ---------- certifikačný odkaz (EFPA) ---------- */
/* Samostatný textový odkaz pod kartou pôsobil ako prilepený navyše. Logo
   certifikačnej autority ho ukotví: čitateľ hneď vidí, KAM odkaz vedie, a blok
   sa číta ako súčasť karty, nie ako dodatok.
   ⚠ Nie je to logo klienta (tie na webe zámerne nie sú) — je to značka
   certifikačnej autority, teda doklad, nie referencia.
   Šírka 118 px ≈ 31 mm zodpovedá najmenšej veľkosti, ktorú pripúšťa manuál
   EFPA pre krajinovú verziu loga; nižšie by prestal byť čitateľný podtitul. */
/* Stohované, nie vedľa seba: karta činnosti je široká ~210 px a logo vedľa textu
   ostávalo stlačené, kým sa popis lámal do troch riadkov. Takto má logo celú
   šírku a popis je jeden riadok. */
.cert{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin-top:14px;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);
  text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.cert:hover{border-color:var(--blue);background:var(--sky)}
.cert img{width:132px;height:auto}
.cert span{font-size:12.5px;color:var(--graph);line-height:1.4}
.cert b{color:var(--ink)}

/* ---------- lišta súhlasu ---------- */
/* Drží sa dole a neprekrýva obsah natrvalo — po voľbe sa z DOM odstráni.
   `position:fixed` a nie sticky: musí byť viditeľná bez ohľadu na to, kde
   v stránke návštevník je, lebo pýtame súhlas skôr, než sa niečo načíta. */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--dark);color:#D7E0EA;
  border-top:3px solid var(--red);box-shadow:0 -6px 24px rgba(9,14,21,.25)}
.cbar-in{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;gap:20px;
  align-items:center;flex-wrap:wrap}
.cbar p{font-size:13.5px;line-height:1.55;flex:1;min-width:280px;margin:0}
.cbar b{color:#fff}
.cbar a{color:#7FB4E0}
.cbar-b{display:flex;gap:10px;flex:none}
.cbar button{font:700 14px 'Segoe UI',system-ui,Arial,sans-serif;border:none;border-radius:999px;
  padding:10px 22px;cursor:pointer}
.cbar .yes{background:var(--blue);color:#fff}
.cbar .yes:hover{background:#1a83d4}
.cbar .no{background:transparent;color:#B9C3D2;border:1px solid #35485F}
.cbar .no:hover{background:rgba(255,255,255,.06);color:#fff}

/* ---------- právne stránky ---------- */
/* Vlastný blok, lebo tu ide o čítanie dlhého textu, nie o prehľad kariet:
   užšia miera riadku a väčší rozostup než v sekciách na úvodnej stránke. */
.legal h3{font-size:16px;font-weight:700;margin:26px 0 8px}
.legal p{max-width:760px;margin-bottom:12px}
.legal table.udaje{max-width:900px;margin-bottom:6px}
.legal table.udaje td:first-child{width:26%}
.legal .note{font-size:13px;color:var(--graph);max-width:760px}
.legal ul.ul{max-width:800px;margin:0 0 12px 20px}
.legal ul.ul li{margin-bottom:7px}
.consentbox{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:12px;padding:16px 20px;margin:18px 0;max-width:760px}
.consentbox p{margin-bottom:8px}
.consentbox button{margin-top:6px;background:var(--blue);color:#fff;
  font:700 14px 'Segoe UI',system-ui,Arial,sans-serif;border:none;border-radius:999px;
  padding:10px 22px;cursor:pointer}
.consentbox button:hover{background:#0E568F}
.consentbox button:disabled{background:#B4C0CC;cursor:default}

/* Stredný stĺpec padá ako prvý — názov podujatia a popis sa zlomia pod seba,
   rok si drží vlastný stĺpec, aby os rokov ostala čitateľná čo najdlhšie. */
@media (max-width:900px){
  .ev{grid-template-columns:96px 1fr}
  .ev .d{grid-column:2}
}
@media (max-width:700px){
  .ev{grid-template-columns:1fr}
  .ev .y{justify-self:start}
  .ev .d{grid-column:1}
  table.udaje td:first-child{width:42%;white-space:normal}
  .tl{padding-left:26px}
  .tl .mile::before{left:-23px}
  .tl::before{left:6px}
}