/* ================================================================
   ATG · slidová vrstva — stránka ŠKOLENIA — NASADENÉ 21. 9. 2026
   ----------------------------------------------------------------
   Nadstavba nad assets/slidy.css. Je to TEN ISTÝ vzhľad, aký je na
   schválenom návrhu /design/skolenia/ — súbor z neho vzniká
   strojovo (design/skolenia.css), len sa selektory nascopujú pod
   `body.pslidy`, aby sa nič nevylialo na zvyšok webu.

   Triedu `pslidy` nasadzuje slidy-kino.js. Bez nej (napr. keby skript
   nezbehol) vyzerá stránka ako pôvodná — obsah nikdy nezávisí od skriptu.

   Hlavička `.hdr` a pätička `.ftr` sa NEMENIA, sú mimo `#app`.
   Ručne needituj — uprav design/skolenia.css a pregeneruj.
   ================================================================ */

/* ----------------------------------------------------------------
   1 · OPRAVA, KTORÚ SI SLIDY VYŽIADALI NA METÓDACH (17. 9. 2026)
   `.sl` má v produkt.css `overflow:hidden` kvôli zväčšenej fotografii.
   Lenže rezal aj obsah — na MT ostalo zo slidu 900 px, kým obsah mal
   1002 px. Školenia majú slidy ešte vyššie (kalendár, 7 kariet), takže
   sa to tu prejaví okamžite. Fotografiu si oreže jej vlastná vrstva.
   `flex:0 0 auto` bráni tomu, aby flex stlačil obsah pod jeho výšku.
   ---------------------------------------------------------------- */
body.pslidy .sl{overflow:visible}
body.pslidy .sl > .in{flex:0 0 auto}

/* Keď slide neoreže, musí sa orezať fotografia sama — inak sa jej
   zväčšenie (1,14×) pri nájazde vylieva do susedných slidov a do strany.
   Preto obraz nesie vnútorné <i> a `.foto` je jeho rámom. Toto je presne
   tá istá úprava, aká je nasadená v assets/slidy.css. */
body.pslidy .foto{overflow:hidden}
body.pslidy .foto > i{position:absolute;inset:0;display:block;
  background-size:cover;background-position:center;background-repeat:no-repeat}
body.pslidy .sl.nabehol .foto > i{transform:scale(1);opacity:1}
/* Východiskový stav nábehu (fotografia zmenšená a priehľadná) sa tu
   ZÁMERNE nenastavuje. V assets/slidy.css sú tie pravidlá písané ako
   `body.pslidy .kino …`, lenže triedu `kino` nesie sama <body> — prvok
   sám sebe potomkom nie je, takže sa nepoužijú a nábeh nebeží ani na
   produktoch, ani na metódach (nájdené 21. 9. 2026). Keby sme ho tu
   zapli, Školenia by sa hýbali ako jediná stránka webu. Až sa selektor
   v slidy.css opraví na `body.pslidy.kino`, nabehnú všetky naraz —
   stavba `.foto > i` je na to pripravená. */
body.pslidy .hero.nabehol .foto{animation:none}
body.pslidy .hero.nabehol .foto > i{animation:dych 26s ease-in-out 2.6s infinite alternate}
@media(prefers-reduced-motion:reduce){
  body.pslidy .foto > i{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}

/* Svetlá platňa — produkt.css pozná len tmavú (`.plat`). Kalendár a
   schválenia sú čítanie údajov, nie atmosféra; na svetlom podklade sa
   číslice a dátumy čítajú lepšie a stránka sa medzi fotografiami
   nadýchne. */
body.pslidy .sl.svetlo.plat{background-color:#fff;background-image:none}
body.pslidy .sl.svetlo.plat::after{background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);
  background-size:16px 16px}

/* Podnadpis slidu — jedna veta pod displejovým nadpisom, keď treba
   povedať, podľa čoho sa v tom, čo nasleduje, orientovať. */
body.pslidy .pod{font-size:13px;letter-spacing:.02em;color:var(--dim-d);margin:14px 0 0;max-width:70ch}
body.pslidy .svetlo .pod{color:var(--ink3)}

/* ----------------------------------------------------------------
   2 · STUPNE KVALIFIKÁCIE — tri karty vedľa seba
   Zákazník sa medzi stupňami nerozhoduje postupne, porovnáva ich naraz
   a hľadá, kde končí oprávnenie jeho človeka. Preto rovnaká kostra vo
   všetkých troch kartách: čo robí → čo podpíše → za čo ručí. Posledné
   dve sú zarovnané na spodok karty (`margin-top:auto`), takže sa dajú
   čítať naprieč kartami v jednej linke.
   ---------------------------------------------------------------- */
body.pslidy .st-mriezka{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:2px;margin-top:28px}
body.pslidy .st{display:flex;flex-direction:column;background:rgba(10,16,67,.72);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:20px 22px 22px}
body.pslidy .svetlo .st{background:rgba(255,255,255,.86);border-color:rgba(5,10,48,.12)}
body.pslidy .st .lvl{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc)}
body.pslidy .st .co{display:block;font-family:var(--serif);font-size:25px;line-height:1.12;color:#fff;margin:10px 0 0}
body.pslidy .svetlo .st .co{color:var(--ink)}
body.pslidy .st ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px}
body.pslidy .st ul li{position:relative;padding:9px 0 9px 22px;font-size:13.5px;line-height:1.48;
  color:#c6cde6;border-bottom:1px solid rgba(255,255,255,.1)}
body.pslidy .svetlo .st ul li{color:var(--ink2);border-color:rgba(5,10,48,.1)}
body.pslidy .st ul li::before{content:"";position:absolute;left:2px;top:16px;width:6px;height:6px;
  background:var(--acc);border-radius:2px}
body.pslidy .st .pol{margin-top:18px}
body.pslidy .st .pol + .pol{margin-top:14px}
body.pslidy .st .pol:last-of-type{margin-bottom:0}
body.pslidy .st .pol .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-d)}
body.pslidy .svetlo .st .pol .k{color:var(--ink3)}
body.pslidy .st .pol p{margin:6px 0 0;font-size:13px;line-height:1.5;color:#d3d9ee}
body.pslidy .svetlo .st .pol p{color:var(--ink2)}
/* zodpovednosť ide vždy naspodok karty, aby sa tri karty dali porovnať
   pohľadom po jednej linke, nie skákaním hore-dole */
body.pslidy .st .pol.spodok{margin-top:auto;padding-top:18px}
body.pslidy .st.hlavny{border-color:var(--acc-dim);box-shadow:inset 0 0 0 1px rgba(16,185,129,.18)}

/* Poznámka pod kartami — jedna veta, ktorá v praxi rozhoduje o rozpočte
   kurzu (priamy prístup na stupeň 2). Nesmie splynúť s kartami. */
body.pslidy .pozn{margin-top:26px;padding:18px 22px;border-left:2px solid var(--acc);
  background:rgba(16,185,129,.07);max-width:84ch}
body.pslidy .pozn b{display:block;font-size:14.5px;color:#fff}
body.pslidy .svetlo .pozn b{color:var(--ink)}
body.pslidy .pozn p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:#d3d9ee}
body.pslidy .svetlo .pozn p{color:var(--ink2)}

/* ----------------------------------------------------------------
   3 · DVA SYSTÉMY — porovnanie, nie tabuľka
   Na živej stránke je to tabuľka 3 × 6. Tabuľka predpokladá, že sa číta
   po riadkoch; tu sa pritom rozhoduje medzi dvoma stĺpcami. Preto dva
   panely vedľa seba a otázka stojí NAD odpoveďou v oboch — na telefóne
   sa panely poskladajú pod seba a otázka ostane pri svojej odpovedi
   (v tabuľke by sa od nej odtrhla).
   ---------------------------------------------------------------- */
body.pslidy .por{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:2px;margin-top:28px}
body.pslidy .por-s{background:rgba(10,16,67,.72);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:22px 24px 24px}
body.pslidy .svetlo .por-s{background:rgba(255,255,255,.86);border-color:rgba(5,10,48,.12)}
body.pslidy .por-s > b{display:block;font-family:var(--serif);font-size:27px;line-height:1.1;color:#fff}
body.pslidy .svetlo .por-s > b{color:var(--ink)}
body.pslidy .por-s .norma{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--acc);border:1px solid var(--acc-dim);border-radius:3px;padding:3px 8px}
body.pslidy .por-s dl{margin:18px 0 0}
body.pslidy .por-s dt{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-d);padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
body.pslidy .svetlo .por-s dt{color:var(--ink3);border-color:rgba(5,10,48,.1)}
body.pslidy .por-s dd{margin:7px 0 14px;font-size:13.5px;line-height:1.5;color:#d3d9ee}
body.pslidy .svetlo .por-s dd{color:var(--ink2)}
body.pslidy .por-s dd:last-child{margin-bottom:0}
/* naša rola je jediný riadok, kde ide o nás — preto akcentovaný */
body.pslidy .por-s dd.nasa{color:#fff}
body.pslidy .svetlo .por-s dd.nasa{color:var(--ink)}

/* ----------------------------------------------------------------
   4 · SCHVÁLENIA — zoznam, ktorý sa dá prebehnúť očami
   Kód vľavo v neproporcionálnom písme (dá sa hľadať pohľadom), názov
   a rozsah vpravo. Na telefóne kód preskočí nad názov.
   ---------------------------------------------------------------- */
body.pslidy .schv{display:grid;gap:1px;margin-top:26px}
body.pslidy .schv .r{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:start;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
body.pslidy .svetlo .schv .r{border-color:rgba(5,10,48,.12)}
body.pslidy .schv .kod{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--acc)}
body.pslidy .schv b{display:block;font-size:14px;color:#fff}
body.pslidy .svetlo .schv b{color:var(--ink)}
body.pslidy .schv p{margin:5px 0 0;font-size:13px;line-height:1.5;color:#c6cde6}
body.pslidy .svetlo .schv p{color:var(--ink2)}
body.pslidy .schv .caka{display:inline-block;margin-left:8px;font-family:var(--sans);font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--night);
  background:var(--acc);border-radius:3px;padding:2px 7px}

/* ----------------------------------------------------------------
   5 · PRIEBEH KURZU — číslované kroky
   Šesť kariet s poradovým číslom. Číslo je veľké a serifové: je to
   postupnosť, nie zoznam rovnocenných vlastností.
   ---------------------------------------------------------------- */
body.pslidy .kroky{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:2px;margin-top:28px}
body.pslidy .krok{background:rgba(10,16,67,.72);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:20px 22px 22px;position:relative}
body.pslidy .svetlo .krok{background:rgba(255,255,255,.86);border-color:rgba(5,10,48,.12)}
body.pslidy .krok .c{font-family:var(--serif);font-size:34px;line-height:1;color:var(--acc);display:block}
body.pslidy .krok b{display:block;font-size:14.5px;margin:10px 0 0;color:#fff}
body.pslidy .svetlo .krok b{color:var(--ink)}
body.pslidy .krok p{margin:9px 0 0;font-size:13px;line-height:1.52;color:#c6cde6}
body.pslidy .svetlo .krok p{color:var(--ink2)}

/* Prečo u nás — deväť krátkych viet. V jednom stĺpci by slide vyrástol
   do dvojnásobku obrazovky, preto dva stĺpce od 900 px. */
body.pslidy .odr.dvoj{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:36px;gap:1px 36px}
@media(max-width:900px){.odr.dvoj{grid-template-columns:1fr}}

/* ----------------------------------------------------------------
   6 · KALENDÁR TERMÍNOV — riadky, nie tabuľka
   Na tabuľke 5 × 21 sa na telefóne nedá urobiť nič iné, než ju posúvať
   do strany. Tu je každý termín jeden riadok v mriežke, ktorá sa na
   úzkej obrazovke preskladá na dva stĺpce a potom na jeden — údaj si
   nesie svoj popis so sebou (`data-k` → `::before`), takže sa nestratí
   ani bez hlavičky tabuľky.
   ---------------------------------------------------------------- */
body.pslidy .filt{display:flex;flex-wrap:wrap;gap:2px;margin-top:26px}
body.pslidy .filt button{min-height:38px;padding:0 14px;border:1px solid rgba(5,10,48,.18);border-radius:4px;
  background:transparent;color:var(--ink2);font:inherit;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;cursor:pointer}
body.pslidy .filt button:hover{border-color:var(--acc);color:var(--ink)}
body.pslidy .filt button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--night);font-weight:700}
body.pslidy .filt button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

body.pslidy .kal{margin-top:22px;border-top:1px solid rgba(5,10,48,.16)}
body.pslidy .kal .hl{display:grid;grid-template-columns:150px 1fr 190px 150px 200px;gap:18px;
  padding:10px 0;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);border-bottom:1px solid rgba(5,10,48,.16)}
body.pslidy .kal .t{display:grid;grid-template-columns:150px 1fr 190px 150px 200px;gap:18px;align-items:start;
  padding:15px 0;border-bottom:1px solid rgba(5,10,48,.1)}
body.pslidy .kal .t:hover{background:rgba(16,185,129,.05)}
body.pslidy .kal .m{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}
body.pslidy .kal .m .u{color:var(--acc)}
body.pslidy .kal .nz{font-size:14px;color:var(--ink2)}
body.pslidy .kal .dt{font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
body.pslidy .kal .mi{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px}
body.pslidy .kal .rz{font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
body.pslidy .kal .ak{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
body.pslidy .kal .ak .cena{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
body.pslidy .kal .btn{min-height:40px;padding:0 18px;font-size:11px}
body.pslidy .znac{display:inline-flex;align-items:center;margin:6px 6px 0 0;padding:4px 9px;border-radius:3px;
  font-size:11px;letter-spacing:.04em;background:rgba(5,10,48,.07);color:var(--ink2)}
body.pslidy .znac.priamy{background:var(--acc);color:var(--night);font-weight:700}
body.pslidy .znac.ms{background:transparent;border:1px dashed rgba(5,10,48,.3);color:var(--ink3)}
body.pslidy .znac.sekt{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
body.pslidy .kal .t.skryty{display:none}
body.pslidy .kal-pozn{margin-top:14px;font-size:12.5px;color:var(--ink3);max-width:80ch}
body.pslidy .kal-prazdno{padding:26px 0;font-size:14px;color:var(--ink3)}

@media(max-width:1080px){
  body.pslidy .kal .hl{display:none}
  body.pslidy .kal .t{grid-template-columns:1fr 1fr;gap:10px 18px;padding:18px 0}
  body.pslidy .kal .t > *{min-width:0}
  body.pslidy .kal .nz{grid-column:2/3}
  body.pslidy .kal .dt, body.pslidy .kal .rz{font-size:13px}
  /* bez hlavičky tabuľky si údaj nesie svoj popis */
  body.pslidy .kal .dt::before, body.pslidy .kal .rz::before{content:attr(data-k);display:block;font-size:10px;
    font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
  body.pslidy .kal .ak{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
}
@media(max-width:620px){
  body.pslidy .kal .t{grid-template-columns:1fr}
  body.pslidy .kal .nz{grid-column:auto}
  body.pslidy .schv .r{grid-template-columns:1fr;gap:6px}
  body.pslidy .por-s > b{font-size:23px}
}

/* ----------------------------------------------------------------
   7 · PRIHLÁSENIE — text vľavo, kontakt vpravo
   ---------------------------------------------------------------- */
body.pslidy .dvojica{display:grid;grid-template-columns:1.35fr 1fr;gap:2px;margin-top:28px;align-items:start}
body.pslidy .dvojica .box{background:rgba(255,255,255,.86);border:1px solid rgba(5,10,48,.12);border-radius:8px;
  padding:24px}
body.pslidy .tma .dvojica .box{background:rgba(10,16,67,.72);border-color:rgba(255,255,255,.14)}
body.pslidy .dvojica .box .k{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
body.pslidy .tma .dvojica .box .k{color:var(--dim-d)}
body.pslidy .dvojica .box .kt{margin-top:16px;grid-template-columns:1fr}
/* body.pslidy navyše: inak toto pravidlo prebíja `body.pslidy .dvojica` vyššie a na mobile
   ostávali dva stĺpce — stránka bola na 390 px široká 457 px (oprava 4. 10. 2026) */
@media(max-width:900px){body.pslidy .dvojica{grid-template-columns:1fr}}

/* NÁLEZ 21. 9. 2026: produkt.css dáva kontaktným dlaždiciam `.kt` biele
   písmo a biely rámik — počíta len s tmavým slidom. Na svetlom slide
   (a ten vznikne vždy, keď je fotografia jasnejšia než 168) je telefón
   aj e-mail biely na svetlom podklade, teda nečitateľný. To isté platí
   pre návrhy /design/rt/ a /design/et/, ktoré majú kontakt na svetlom
   slide. Toto je tá chýbajúca svetlá vetva; rovnaké tri riadky patria
   aj do assets/slidy.css, kde chýbajú tiež. */
body.pslidy .svetlo .kt > *{border-color:rgba(5,10,48,.14);color:var(--ink)}
body.pslidy .svetlo .kt span{color:var(--ink3)}
body.pslidy .svetlo .kt b{color:var(--ink)}
body.pslidy .svetlo .kt a:hover{border-color:var(--acc)}

/* Lišta sekcií — tá istá kostra ako lišta metód na produktoch
   (`.met-pas`), len namiesto skratiek metód nesie sekcie stránky.
   Doplnené je číslo sekcie, aby bolo vidieť, že ide o postupnosť. */
body.pslidy .met-in a i{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--dim-d)}
body.pslidy .met-in a.on i{color:var(--acc)}