/* ================================================================ ATG · slidová vrstva — ODVETVOVÉ podstránky — NASADENÉ 21. 9. 2026 /produkty/// ---------------------------------------------------------------- Nadstavba nad assets/slidy.css, generovaná z design/odvetvie.css (návrh schválený 21. 9. 2026). Selektory sú scopované pod `body.pslidy` — triedu nasadzuje až slidy-kino.js, takže keď skript nezbehne, stránka vyzerá ako pôvodná a je celá čitateľná. Všetko spoločné nesie slidy.css: `.sl`, `.dis`, `.lead`, `.tx`, `.odr`, `.tech`, `.akcie`, `.btn`, `.kt`, lišta sekcií `.met-pas`. Tu je len to, čo ostatné slidové stránky nepotrebovali: pás dvoch osí, rozpis zostáv, sadzba jednej zostavy, karty dielov, galéria a prázdny stav. GENERALIZOVANÉ. Nie je tu ani jedno meno odvetvia a žiadny rozmer viazaný na počet položiek: mriežky sa skladajú samy (`auto-fit`). Stránka so siedmimi zostavami aj stránka bez jedinej vyzerá rovnako správne. POZOR pri ďalšom generovaní: scopuje sa PARSEROM, nie riadok po riadku — pravidlá sú písané na jednom riadku s deklaráciami a riadkové hľadanie ich minie. A do @keyframes sa nesiaha: predpona pred kľúčovou snímkou ju zneplatní a prehliadač celú animáciu zahodí (to sa 17. 9. 2026 stalo v slidy.css). Hlavička `.hdr` a pätička `.ftr` sa NEMENIA, sú mimo `#app`. ================================================================ */ /* Nábeh fotografie, orezanie rámu aj `dych` v hero už rieši slidy.css a rieši ich SPRÁVNE (`body.pslidy.kino …`, nie `body.pslidy .kino …`). Návrhová vrstva design/odvetvie.css ich má vlastné, lebo tam triedu `kino` nesie ; sem sa NEPREBERAJÚ. Keby sa prebrali, boli by to mŕtve pravidlá — presne tá chyba, ktorá sa v slidy.css opravovala 21. 9. 2026. Jediné, čo z toho bloku platí aj tu: slide nesmie orezávať obsah, lebo zostava so siedmimi parametrami býva vyššia než okno. */ body.pslidy .sl{overflow:visible} body.pslidy .sl > .in{flex:0 0 auto} /* svetlá platňa — produkt.css pozná len tmavú */ 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} /* Číslo sekcie v lepiacej lište. */ 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)} /* ---------------------------------------------------------------- 1 · PÁS DVOCH OSÍ — kde presne na webe stojím Na živej stránke je pod úvodom rad štítkov s odvetviami TEJ ISTEJ metódy. Chýba druhá os: to isté odvetvie inou metódou. Na železnici sú v dátach dve (MT aj UT), ale z MT/železnice sa na UT/železnice nedá dostať inak než cez dva medzikroky. Pás preto nesie obe osi a vždy hovorí, ktorá vetva je tá moja. ---------------------------------------------------------------- */ body.pslidy .osi{display:grid;gap:18px;margin-top:26px} body.pslidy .os{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap} body.pslidy .os > .k{flex:0 0 auto;min-width:132px;padding-top:9px;font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--dim-d)} body.pslidy .svetlo .os > .k{color:var(--ink3)} body.pslidy .os > .v{display:flex;flex-wrap:wrap;gap:2px;flex:1 1 320px} body.pslidy .os a, body.pslidy .os span.tu{display:inline-flex;align-items:center;min-height:38px;padding:0 14px; border:1px solid rgba(255,255,255,.2);border-radius:4px;text-decoration:none; font-size:13px;letter-spacing:.02em;color:#d3d9ee} body.pslidy .svetlo .os a, body.pslidy .svetlo .os span.tu{border-color:rgba(5,10,48,.18);color:var(--ink2)} body.pslidy .os a:hover{border-color:var(--acc);color:var(--acc)} body.pslidy .os a:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* Kde práve stojím, nie je odkaz — odkaz sám na seba je slepý cieľ. */ body.pslidy .os span.tu{border-color:var(--acc);color:var(--acc);background:rgba(16,185,129,.1);font-weight:700} body.pslidy .os .met{font-family:var(--mono);letter-spacing:.1em} /* ---------------------------------------------------------------- 2 · ROZPIS ZOSTÁV — prehľad pred podrobnosťou Na živej stránke ide rovno prvá karta zariadenia a koľko ich je sa dozviete až dorolovaním na koniec. Tu je najprv rozpis: čo tu je, v jednej vete a s parametrom, a každá dlaždica skáče na svoj slide. ---------------------------------------------------------------- */ body.pslidy .zi-mriezka{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,252px),1fr)); gap:2px;margin-top:26px} body.pslidy .zi{position:relative;display:flex;flex-direction:column;min-height:44px; background:rgba(10,16,67,.72);border:1px solid rgba(255,255,255,.14);border-radius:8px; overflow:hidden;text-decoration:none;color:inherit; transition:border-color .16s ease,transform .16s ease} body.pslidy .svetlo .zi{background:rgba(255,255,255,.88);border-color:rgba(5,10,48,.12)} body.pslidy .zi:hover{border-color:var(--acc);transform:translateY(-2px)} body.pslidy .zi:focus-visible{outline:2px solid var(--acc);outline-offset:3px} body.pslidy .zi-foto{display:block;height:116px;background-size:cover;background-position:center; border-bottom:1px solid rgba(255,255,255,.12)} body.pslidy .zi-plat{background-color:rgba(5,10,48,.6); background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0); background-size:14px 14px} body.pslidy .svetlo .zi-plat{background-color:#eef0f5; background-image:radial-gradient(circle at 1px 1px,rgba(5,10,48,.16) 1px,transparent 0)} body.pslidy .svetlo .zi-foto{border-bottom-color:rgba(5,10,48,.1)} body.pslidy .zi-in{display:flex;flex-direction:column;flex:1 1 auto;padding:15px 17px 17px} body.pslidy .zi-c{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim-d)} body.pslidy .svetlo .zi-c{color:var(--ink3)} body.pslidy .zi-n{display:block;font-size:14.5px;font-weight:700;color:#fff;margin:9px 0 0;line-height:1.3} body.pslidy .svetlo .zi-n{color:var(--ink)} body.pslidy .zi-l{display:block;font-size:12.5px;line-height:1.5;color:#c6cde6;margin:8px 0 0} body.pslidy .svetlo .zi-l{color:var(--ink2)} body.pslidy .zi-p{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto; padding-top:13px;font-size:12px;letter-spacing:.06em;color:var(--dim-d)} body.pslidy .svetlo .zi-p{color:var(--ink3)} body.pslidy .zi-p .sip{font-size:15px;color:var(--acc)} /* ---------------------------------------------------------------- 3 · SLIDE JEDNEJ ZOSTAVY Dva stĺpce: vľavo text a parametre, vpravo fotografia. Keď fotografia NIE JE (v dátach je to bežné — z 36 zostáv ju má 14), stĺpec sa nezúži na prázdno: sadzba prejde na jeden stĺpec a parametre sa rozložia do dvoch. Na živej stránke ostávala v takom prípade polovica šírky prázdna. ---------------------------------------------------------------- */ body.pslidy .zs{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px; align-items:start;margin-top:26px} body.pslidy .zs.samotext{grid-template-columns:1fr} body.pslidy .zs figure{margin:0;border:1px solid rgba(255,255,255,.14);border-radius:8px;overflow:hidden; background:rgba(10,16,67,.55)} body.pslidy .svetlo .zs figure{border-color:rgba(5,10,48,.12);background:#fff} body.pslidy .zs figure img{width:100%;height:auto;display:block} body.pslidy .zs figcaption{padding:10px 14px;font-size:11.5px;line-height:1.45;color:var(--dim-d); border-top:1px solid rgba(255,255,255,.1)} body.pslidy .svetlo .zs figcaption{color:var(--ink3);border-top-color:rgba(5,10,48,.1)} /* Parametre. Bez fotografie by text aj odrážky ostali úzkym pásom pri ľavom okraji a polovica slidu prázdna — presne to, čo tento návrh opravuje. Preto sa v režime `samotext` uvoľní strop šírky a odrážky sa rozložia do toľkých stĺpcov, koľko sa zmestí. POZOR: `.odr` je v produkt.css `display:grid`, takže CSS `columns` na ňu NEPLATÍ (prvý pokus 21. 9. 2026 nič neurobil). Delí sa cez `grid-template-columns` — a `auto-fit`, aby to nebolo viazané na počet odrážok. */ body.pslidy .zs .odr{margin-top:18px} body.pslidy .zs.samotext .lead{max-width:76ch} body.pslidy .zs.samotext .odr{max-width:none; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));column-gap:40px} @media(max-width:900px){ body.pslidy .zs{grid-template-columns:1fr;gap:26px} } /* ---------------------------------------------------------------- 4 · ČO SA TÝM SKÚŠA — diely a materiály Na živej stránke stojí až za všetkými zostavami. Pritom je to prvá otázka návštevníka: „skúšam nápravy — som tu správne?" Preto je hneď za úvodom. ---------------------------------------------------------------- */ body.pslidy .dl-mriezka{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,282px),1fr)); gap:2px;margin-top:26px} body.pslidy .dl{display:flex;flex-direction:column;background:rgba(10,16,67,.72); border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:20px} body.pslidy .svetlo .dl{background:rgba(255,255,255,.88);border-color:rgba(5,10,48,.12)} body.pslidy .dl b{display:block;font-size:15px;color:#fff;line-height:1.3} body.pslidy .svetlo .dl b{color:var(--ink)} body.pslidy .dl p{margin:10px 0 0;font-size:13px;line-height:1.55;color:#c6cde6} body.pslidy .svetlo .dl p{color:var(--ink2)} body.pslidy .dl .mat{display:flex;flex-wrap:wrap;gap:2px;margin-top:auto;padding-top:14px} body.pslidy .dl .mat span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px; border:1px solid rgba(255,255,255,.18);border-radius:3px;font-size:11.5px;color:var(--dim-d)} body.pslidy .svetlo .dl .mat span{border-color:rgba(5,10,48,.16);color:var(--ink3)} /* ---------------------------------------------------------------- 5 · Z PREVÁDZKY — galéria Popis pod fotografiou je povinný a je v troch jazykoch: záber zariadenia nesie informáciu, nie je to ozdoba. ---------------------------------------------------------------- */ body.pslidy .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:18px;margin-top:26px} body.pslidy .gal figure{margin:0;border:1px solid rgba(255,255,255,.14);border-radius:8px;overflow:hidden; background:rgba(10,16,67,.55)} body.pslidy .svetlo .gal figure{border-color:rgba(5,10,48,.12);background:#fff} body.pslidy .gal img{width:100%;height:auto;display:block} body.pslidy .gal figcaption{padding:11px 14px;font-size:11.5px;line-height:1.45;color:var(--dim-d); border-top:1px solid rgba(255,255,255,.1)} body.pslidy .svetlo .gal figcaption{color:var(--ink3);border-top-color:rgba(5,10,48,.1)} /* ---------------------------------------------------------------- 6 · PRÁZDNY STAV Odvetvie bez vypísanej zostavy existuje (UT × automobilový priemysel). Radšej to povedzme rovno, než aby po úvode nasledovalo ničoho. ---------------------------------------------------------------- */ body.pslidy .niet{margin-top:24px;padding:18px 20px;border:1px dashed rgba(255,255,255,.28);border-radius:8px; font-size:13.5px;line-height:1.6;color:#c6cde6} body.pslidy .svetlo .niet{border-color:rgba(5,10,48,.26);color:var(--ink2)} /* Kontaktné dlaždice na svetlom slide — produkt.css počíta len s tmavým a telefón by bol biely na svetlom (nález 21. 9. 2026). */ 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)}