/* ============ EENS V2 · rozloženie ============
   Koľajnica, hero pás, pásy titulky a hlavička e-shopu. Poradie v súbore
   ide zhora nadol tak, ako idú stránky. Používa to titulka aj podstránka
   e-shopu, preto to nie je viazané na jednu z nich. */

/* ---------- ľavá koľajnica ----------
   Zvislá čiara s bodom pre každý pás stránky. Čiara sa zaplňuje podľa
   scrollu a pás, na ktorom človek stojí, je pomenovaný. Body sú odkazy,
   takže koľajnica je zároveň obsah stránky.

   Zámerne tu nie je žiadna kresba. Skúšal som v nej viesť jednopólovú
   schému a bola to ozdoba, ktorá s pohybom po stránke nesúvisela. */
.kolajnica{
  position:fixed;top:0;left:0;bottom:0;width:var(--ras);z-index:40;
  background:var(--uhol);border-right:1px solid var(--linka-tma);
  overflow:hidden;
}

/* Dráha. Začína pod lištou, aby cez značku nešlo nič. */
.kolaj{
  position:absolute;left:0;right:0;
  top:calc(var(--lista-v) + 34px);bottom:38px;
}
.kolaj-ciara,.kolaj-presla{
  position:absolute;left:27px;top:0;width:1px;height:100%;
}
.kolaj-ciara{background:var(--linka-tma)}
.kolaj-presla{
  background:linear-gradient(180deg,var(--bordo),var(--cervena));
  transform-origin:top;transform:scaleY(0);
}

/* Putujúca značka. Priečna ryska, aby sa nepliedla s bodmi pásov. */
.kolaj-znacka{
  position:absolute;left:19px;width:17px;height:2px;top:0;
  margin-top:-1px;background:var(--cervena);
  box-shadow:0 0 10px rgba(210,5,30,.55);
}

/* ---------- bod pása ---------- */
.bod{
  position:absolute;left:0;right:8px;top:0;
  transform:translateY(-50%);
  display:flex;align-items:center;gap:12px;
  padding:5px 8px 5px 20px;
  text-decoration:none;color:inherit;
}
/* --t doplní skript: podiel scrollu, pri ktorom sa pás stáva aktuálnym. */
.bod{top:calc(var(--t,0) * 100%)}
.bod-znak{
  flex:none;width:11px;height:11px;border-radius:50%;
  background:var(--uhol);border:1.5px solid var(--linka-tma-silna);
  transition:border-color var(--cas) var(--krivka),
             background var(--cas) var(--krivka),
             transform var(--cas) var(--krivka);
}
.bod-popis{
  display:flex;align-items:baseline;gap:7px;min-width:0;
  font-family:var(--pismo-mono);
  transition:opacity var(--cas) var(--krivka),color var(--cas) var(--krivka);
  opacity:.42;color:var(--text-tma-2);
}
.bod-popis b{font-size:9.5px;font-weight:500;letter-spacing:.12em;
  color:var(--text-tma-3);flex:none}
.bod-popis > span{
  font-size:11px;letter-spacing:.03em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
/* Na užšej obrazovke ide preč najprv poradové číslo, to je v nadpise pása
   aj tak. Popis pása má prednosť. */
@media (max-width:1200px){
  .bod-popis b{display:none}
  .bod{gap:10px;padding-left:19px}
}

/* Pás, ktorý už máme za sebou. */
.bod.presla .bod-znak{border-color:var(--cervena);background:var(--cervena)}
.bod.presla .bod-popis{opacity:.6}

/* Pás, na ktorom stojíme. Jediný, ktorý je čitateľný naplno. */
.bod.tu .bod-znak{
  border-color:var(--cervena);background:var(--cervena);
  transform:scale(1.28);
  box-shadow:0 0 0 4px rgba(210,5,30,.18);
}
.bod.tu .bod-popis{opacity:1;color:var(--text-tma)}
.bod.tu .bod-popis b{color:var(--cervena)}

/* Kam mieri slovo v hero páse, na ktoré človek ukázal. */
.bod.mieri .bod-znak{border-color:var(--med-svetla)}
.bod.mieri .bod-popis{opacity:1;color:var(--med-svetla)}

.bod[href]:hover .bod-popis{opacity:1;color:var(--text-tma)}
.bod[href]:hover .bod-znak{border-color:var(--cervena)}
.bod[href]:focus-visible{outline:2px solid var(--cervena);outline-offset:-2px;
  border-radius:var(--r)}

/* Pod 1024 px sa koľajnica nezmestí, stránka by na ňu doplácala šírkou.
   Nahradí ju vlásková stopa pri ľavej hrane, tá drží tú istú informáciu:
   ako ďaleko po stránke sa človek dostal. */
.stopa{
  position:fixed;top:0;left:0;bottom:0;width:3px;z-index:40;display:none;
  background:var(--linka);
}
.stopa i{
  display:block;width:100%;height:0;
  background:linear-gradient(180deg,var(--bordo),var(--cervena));
}
@media (max-width:1023px){
  .kolajnica{display:none}
  .stopa{display:block}
}

/* ---------- hero ----------
   Celý záber firmy na jednu obrazovku: nadpis s rozsahom napätí a pod ním
   štyri smery s jednou vetou. Predtým tu stáli tri obrovské slová, ktoré
   síce vyzerali dobre, ale nepovedali, čomu sa firma naozaj venuje. */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--lista-v) + clamp(30px,5vh,72px));
  padding-bottom:clamp(40px,6vh,80px);
  overflow:hidden;
}
/* ---- video na pozadí ----
   Pohľad do stožiara. Predlohou bola kresliarska mriežka, video ju
   nahradilo celé.

   Záber je svetlý, obloha zaberá väčšinu plochy, preto sa nedá pustiť tak,
   ako je: biely text by na ňom zmizol. Filter ho odfarbí, otepli a stiahne
   na úroveň tmavého pásu, clona nad ním potom drží ľavú a spodnú časť
   čitateľnú. Sepia je tam kvôli palete: zo sivej oblohy by inak bola modrá
   a modrá na tejto stránke nemá čo robiť.

   Náhľadový obrázok je pozadím tohto prvku, takže je vidieť okamžite,
   kým sa video sťahuje, a ostane jediným pozadím tam, kde sa video
   nepúšťa vôbec. */
.hero-video{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:var(--uhol);
}
/* Filter patrí len na obraz, nie na obal. Na obale by prefarbil aj clonu
   a tá by prestala robiť to, kvôli čomu tam je. Preto má náhľadový obrázok
   vlastnú vrstvu a nie je pozadím obalu. */
.hero-video::before,
.hero-video video{
  filter:grayscale(1) sepia(.42) brightness(.46) contrast(1.06);
}
.hero-video::before{
  content:"";position:absolute;inset:0;
  background:url(../video/eens-cover.jpg) center/cover no-repeat;
}
.hero-video video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* Clona. Vľavo hustá kvôli sadzbe, vpravo redšia, nech je z videa
   niečo vidieť. Dole opäť hustá, tam sedia štyri smery a tlačidlo. */
.hero-video::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(20,16,16,.94) 0%, rgba(20,16,16,.86) 32%,
      rgba(20,16,16,.58) 64%, rgba(20,16,16,.44) 100%),
    linear-gradient(180deg,
      rgba(20,16,16,.82) 0%, rgba(20,16,16,.30) 22%,
      rgba(20,16,16,.54) 58%, rgba(20,16,16,.93) 100%);
}
/* Teplá žiara v pravom hornom rohu. Jediný farebný zdroj v tmavom páse. */
.hero-ziara{
  position:absolute;top:-22%;right:-12%;width:min(72vw,900px);aspect-ratio:1;
  pointer-events:none;
  background:radial-gradient(circle,rgba(210,5,30,.20) 0%,
             rgba(122,10,24,.10) 38%,transparent 68%);
}
.hero .obal{position:relative;width:var(--obal)}

.hero-hlavicka{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(20px,3.4vh,40px);
}

.hero-nadpis{
  font-size:clamp(34px,5vw,74px);line-height:1.03;letter-spacing:-.032em;
  font-weight:800;color:var(--text-tma);max-width:16ch;
}
.hero-nadpis .zvyraz{color:var(--cervena)}

.hero-claim{
  margin-top:clamp(18px,2.6vh,30px);max-width:56ch;color:var(--text-tma-2);
  font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;
}
.hero-claim b{color:var(--text-tma);font-weight:650}

/* ---- päť smerov ----
   Stĺpce oddelené vlásovou linkou. Nie karty: karta by z toho spravila
   dlaždicový rozcestník a hero pás má ostať jedným celkom.

   Päť stĺpcov je na hranici čitateľnosti, preto sa pod 1240 px prelomia
   do troch a pod 900 px do dvoch. Piaty potom sedí sám na riadku, čo je
   lepšie než pretečený popis. */
.hero-smery{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;margin-top:clamp(26px,4vh,52px);
  border-top:1px solid var(--linka-tma);
}
.hero-sluzba{
  /* Odsadenie je v premenných, lebo ho potrebuje aj šraf pripravovanej karty:
     ten musí siahať po vonkajšiu hranu stĺpca a nie po hranu textu. */
  --hs-y:clamp(16px,2vh,24px);
  --hs-x:clamp(14px,1.6vw,26px);
  position:relative;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  padding:var(--hs-y) var(--hs-x) var(--hs-y) 0;
  transition:padding-left var(--cas) var(--krivka);
}
/* Popis a šípka v jednom obale. Bez neho by šraf ležal na dvoch samostatných
   obdĺžnikoch a medzi nimi aj pod nimi by zostala nešrafovaná diera.
   Obal sa naťahuje do zvyšku výšky stĺpca, takže prekrytie sadne na celú
   plochu pod nadpisom. */
.hero-telo{display:block;flex:1}
/* Zvislá linka medzi stĺpcami. Prvý stĺpec ju nemá, aby nevisela v prázdne. */
.hero-sluzba::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--linka-tma);
}
.hero-sluzba:first-child::before{display:none}
.hero-sluzba:not(:first-child){padding-left:var(--hs-x)}
/* Červená ryska, ktorá pri prejdení dokreslí hornú hranu stĺpca. */
.hero-sluzba::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--cervena);transform:scaleX(0);transform-origin:left;
  transition:transform var(--cas) var(--krivka);
}
.hero-sluzba:hover::after,.hero-sluzba:focus-visible::after{transform:scaleX(1)}
.hero-sluzba .stitok{display:block;margin-bottom:10px}
.hero-sluzba h2{
  font-size:clamp(17px,1.6vw,21px);font-weight:750;letter-spacing:-.012em;
  color:var(--text-tma);margin-bottom:8px;
  transition:color var(--cas) var(--krivka);
}
.hero-sluzba:hover h2{color:var(--cervena)}
/* Nad videom nemôže popis ostať v najtlmenejšom odtieni. Stĺpce sedia
   v spodnej tretine, kde je z obrazu vidieť najviac, a text by sa
   v najsvetlejších záberoch strácal. */
.hero-sluzba p{
  color:var(--text-tma-2);font-size:13.5px;line-height:1.55;max-width:32ch;
}
.hero-sluzba .sip{
  display:inline-block;margin-top:12px;color:var(--text-tma-3);font-size:16px;
  transition:transform var(--cas) var(--krivka),color var(--cas) var(--krivka);
}
.hero-sluzba:hover .sip{transform:translateX(6px);color:var(--cervena)}

.hero-akcie{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,4vh,44px)}
.hero .tlacidlo.tichy{color:var(--text-tma);border-color:var(--linka-tma-silna)}
.hero .tlacidlo.tichy::before{background:var(--text-tma)}
.hero .tlacidlo.tichy:hover{color:var(--uhol)}

/* Nábeh. Nadpis, claim, stĺpce a tlačidlá idú za sebou, nie naraz. */
.hero-nadpis,.hero-claim,.hero-smery,.hero-akcie{
  opacity:0;transform:translateY(18px);
}
.nabehnute .hero-nadpis,.nabehnute .hero-claim,
.nabehnute .hero-smery,.nabehnute .hero-akcie{
  opacity:1;transform:none;
  transition:opacity .8s var(--krivka),transform .8s var(--krivka);
}
.nabehnute .hero-claim{transition-delay:.10s}
.nabehnute .hero-smery{transition-delay:.20s}
.nabehnute .hero-akcie{transition-delay:.30s}

@media (max-width:1240px){
  .hero-smery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-sluzba:nth-child(3n+1)::before{display:none}
  .hero-sluzba:nth-child(3n+1){padding-left:0}
  .hero-sluzba:nth-child(n+4){border-top:1px solid var(--linka-tma)}
}
@media (max-width:900px){
  .hero{align-items:flex-end}
  .hero-smery{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Pri dvoch stĺpcoch nemá linku prvý ani tretí. */
  .hero-sluzba:nth-child(3n+1)::before{content:"";display:block}
  .hero-sluzba:nth-child(odd)::before{display:none}
  .hero-sluzba:nth-child(odd){padding-left:0}
  .hero-sluzba:nth-child(even){padding-left:clamp(14px,1.6vw,26px)}
  .hero-sluzba:nth-child(n+3){border-top:1px solid var(--linka-tma)}
}
/* Na telefóne rieši hero pás blok TELEFÓN na konci tohto súboru. Päť smerov
   sa tam mení na vodorovný rad, ktorý sa prstom odsúva. */
@media (max-width:560px){
  .hero-akcie .zamknuty{display:none}
  .hero-sluzba .stitok{margin-bottom:7px}
  .hero-sluzba h2{margin-bottom:4px;font-size:16px}
  .hero-sluzba p{font-size:12.5px;line-height:1.45}
  .hero-sluzba .sip{margin-top:8px;font-size:14px}
}

/* ---------- hlavička e-shopu ----------
   Podstránka nemá celoobrazovkový hero. Katalóg má byť vidieť hneď, nie až
   po odscrolovaní jednej obrazovky. */
.eshop-hlava{
  position:relative;overflow:hidden;
  padding-top:calc(var(--lista-v) + clamp(34px,6vh,72px));
  padding-bottom:clamp(38px,6vh,72px);
}
.eshop-hlava .obal{position:relative;width:var(--obal)}
.eshop-nadpis{
  font-size:clamp(30px,4.4vw,62px);line-height:1.05;letter-spacing:-.03em;
  font-weight:800;color:var(--text-tma);max-width:18ch;
}
.eshop-nadpis .zvyraz{color:var(--cervena)}
.eshop-hlava .hero-claim{margin-top:clamp(16px,2.4vh,26px)}
.eshop-hlava .hero-hlavicka{margin-bottom:clamp(14px,2.4vh,26px)}
/* Katalóg má byť vidieť hneď za hlavičkou. Plný pás by ho odsunul o ďalších
   170 px a na e-shope je to práve tá vec, kvôli ktorej človek prišiel. */
.eshop-hlava + main > section:first-child{padding-top:clamp(44px,5vw,84px)}
/* Cesta späť. Musí byť po ruke, e-shop je odbočka z hlavnej stránky. */
.spat{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--pismo-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-tma-3);text-decoration:none;
  margin-bottom:clamp(20px,3vh,34px);
  transition:color var(--cas) var(--krivka);
}
.spat:hover{color:var(--cervena)}
.spat .sip{transition:transform var(--cas) var(--krivka)}
.spat:hover .sip{transform:translateX(-4px)}
/* Nábeh rovnaký ako v hero páse titulky. */
.eshop-nadpis{opacity:0;transform:translateY(18px)}
.nabehnute .eshop-nadpis{
  opacity:1;transform:none;
  transition:opacity .8s var(--krivka),transform .8s var(--krivka);
}

/* ---------- päť smerov na páse 01 ----------
   Veľké bloky, jeden pod druhým. Vľavo číslo a názov, vpravo popis
   a rozsah. Riadok sa pri prejdení myšou celý zdvihne a jeho kresba ožije. */
.smery{margin-top:clamp(28px,4vw,52px)}
.smer{
  display:grid;gap:clamp(20px,3.4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto auto;
  align-items:start;
  padding-block:clamp(36px,5vw,64px);
  border-top:1px solid var(--linka);
  text-decoration:none;color:inherit;position:relative;isolation:isolate;
  transition:padding-inline var(--cas) var(--krivka);
}
.smer:last-of-type{border-bottom:1px solid var(--linka)}
/* Podfarbenie pri prejdení. Nabieha zľava, ako keď sa zapne pole. */
.smer::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--papier-2);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--cas) var(--krivka);
}
.smer:hover::before{transform:scaleX(1)}
.smer:hover{padding-inline:clamp(12px,2vw,28px)}
.smer-nazov{
  font-family:var(--pismo-nadpis);font-size:clamp(30px,4.4vw,58px);
  font-weight:800;line-height:1.02;letter-spacing:-.03em;
  transition:color var(--cas) var(--krivka);
}
.smer:hover .smer-nazov{color:var(--cervena)}
.smer-cislo{display:block;margin-bottom:14px}
.smer-popis{color:var(--text-2);max-width:46ch}
.smer-rozsah{
  list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;
}
.smer-rozsah li{
  font-family:var(--pismo-mono);font-size:11.5px;letter-spacing:.08em;
  padding:5px 11px;border:1px solid var(--linka-silna);border-radius:999px;
  color:var(--text-3);white-space:nowrap;
}
/* Kresba smeru. V pokoji je to obrys, pri prejdení sa rozsvieti červenou. */
.smer-kresba{
  width:clamp(84px,9vw,128px);flex:none;color:var(--linka-silna);
  transition:color var(--cas) var(--krivka),transform var(--cas) var(--krivka);
}
.smer:hover .smer-kresba{color:var(--cervena);transform:translateX(6px)}
.smer-sip{
  align-self:center;font-size:26px;color:var(--text-3);
  transition:transform var(--cas) var(--krivka),color var(--cas) var(--krivka);
}
.smer:hover .smer-sip{transform:translateX(10px);color:var(--cervena)}

@media (max-width:900px){
  .smer{grid-template-columns:1fr;gap:18px}
  .smer-kresba{width:96px}
  .smer-sip{display:none}
}

/* ---------- položky pása ----------
   Jedna mriežka na všetky činnosti. Predtým tu boli tri komponenty pre tú
   istú vec: dvojstĺpec so zoznamom v revíziách a inžinieringu, stĺpce
   v predaji a stĺpce v hero páse. Vyzeralo to ako tri stránky zlepené
   dokopy, tak z toho ostal jeden.

   Stĺpce sú oddelené vlásovou linkou, rovnako ako v hero páse. Počet je
   pevný, nie auto-fit: vlásky sa skrývajú cez nth-child a to potrebuje
   vedieť, koľko stĺpcov riadok má. */
.polozky{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(20px,2.4vw,32px);
  border-top:1px solid var(--linka);
}
.polozka{
  position:relative;
  padding:clamp(20px,2.4vw,30px) clamp(14px,1.8vw,28px) clamp(20px,2.4vw,30px) 0;
}
.polozka::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--linka);
}
.polozka:not(:nth-child(4n+1)){padding-left:clamp(14px,1.8vw,28px)}
.polozka:nth-child(4n+1)::before{display:none}
/* Druhý a ďalší riadok potrebuje vlastnú hornú linku. */
.polozka:nth-child(n+5){border-top:1px solid var(--linka)}
.polozka .stitok{display:block;margin-bottom:11px}
.polozka h3{font-size:clamp(16.5px,1.55vw,20px);margin-bottom:8px}
.polozka p{color:var(--text-3);font-size:14.5px;line-height:1.58}
.polozka p b{color:var(--text-2);font-weight:650}

@media (max-width:1000px){
  .polozky{grid-template-columns:repeat(2,minmax(0,1fr))}
  .polozka:nth-child(4n+1)::before{display:block}
  .polozka:not(:nth-child(4n+1)){padding-left:0}
  .polozka:nth-child(odd)::before{display:none}
  .polozka:nth-child(even){padding-left:clamp(14px,2.4vw,26px)}
  .polozka:nth-child(n+3){border-top:1px solid var(--linka)}
}
@media (max-width:900px) and (min-width:641px){
  .polozky{grid-template-columns:1fr}
  .polozka::before{display:none}
  .polozka{padding-left:0;border-top:1px solid var(--linka)}
  .polozka:first-child{border-top:0}
}

/* ---------- uzatváracia výzva pása ----------
   Každá činnosť končí rovnako: linka, tlačidlo dopytu a jedna veta o tom,
   čo do dopytu napísať. Predtým mali dva pásy textový odkaz, dva tlačidlo
   a jeden nemal nič. */
.pas-akcia{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;
  margin-top:clamp(24px,2.8vw,36px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--linka);
}
.pas-akcia .drobne{max-width:48ch}
/* Odkaz na postup pása. Je to podčiarknutý text a nie tretie tlačidlo:
   vedľa dopytu a katalógu by tretia výzva zobrala váhu obom. */
.pas-akcia .drobne a{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linka-silna);
}
.pas-akcia .drobne a:hover{color:var(--cervena);text-decoration-color:var(--cervena)}

/* Veta hneď pod úvodkou, ktorá ju spresňuje. */
.pod-uvodkou{margin-top:16px;max-width:62ch}

/* ---------- vnorený pás ----------
   Dva svetlé pásy za sebou by splynuli. Ten druhý sadne o odtieň nižšie. */
.vnorena{background:var(--papier-2)}

/* ---------- rozsah projekcie ----------
   Deväť položiek v troch napäťových hladinách, zdola nahor: NN, VN, VVN.
   Poradie je zámerne od 230 V, lebo tam začína väčšina zákaziek, a 110 kV
   stojí na konci ako to najvyššie, čo firma robí.

   Riadok je <details>. Bez skriptu sa otvorí rovnako a jeho obsah je v HTML,
   takže ho vidí aj vyhľadávač. Rozbaľovanie rieši prehliadač sám. */
.rozsah{margin-top:clamp(28px,4vw,52px)}

/* Hlavička napäťovej hladiny. Značka, rozsah a linka až po okraj. */
.hladina{
  display:flex;align-items:baseline;gap:14px;
  margin:clamp(30px,4vw,52px) 0 0;
  font-family:var(--pismo-mono);font-weight:500;letter-spacing:.16em;
  font-size:13px;text-transform:uppercase;color:var(--cervena);
}
.hladina:first-child{margin-top:0}
.hladina b{font-weight:500;font-size:13px}
.hladina span{color:var(--text-3);letter-spacing:.12em;font-size:11.5px}
.hladina i{flex:1;height:1px;background:var(--linka);display:block}

.polozka-rozsahu{border-bottom:1px solid var(--linka)}
.polozka-rozsahu:first-of-type{border-top:1px solid var(--linka)}
/* Prvá položka za hlavičkou hladiny hornú linku nepotrebuje, tú už kreslí
   samotná hlavička. */
.hladina + .polozka-rozsahu{border-top:0}

.polozka-rozsahu > summary{
  display:grid;grid-template-columns:clamp(92px,10vw,136px) 1fr auto;
  gap:clamp(14px,2.6vw,36px);align-items:baseline;
  padding-block:clamp(17px,2.2vw,26px);
  cursor:pointer;list-style:none;position:relative;
  transition:padding-inline var(--cas) var(--krivka);
}
.polozka-rozsahu > summary::-webkit-details-marker{display:none}
.polozka-rozsahu > summary::marker{content:""}
.polozka-rozsahu > summary:hover{padding-inline:clamp(8px,1.4vw,18px)}
.polozka-rozsahu > summary:focus-visible{outline:2px solid var(--cervena);
  outline-offset:-3px}
/* Položka bez podrobností sa neotvára, tak sa ani netvári klikateľne. */
.polozka-rozsahu.ticha > summary{cursor:default}
.polozka-rozsahu.ticha > summary:hover{padding-inline:0}

.rozsah-napatie{
  font-family:var(--pismo-mono);font-size:clamp(13.5px,1.4vw,16px);
  font-weight:600;letter-spacing:.02em;color:var(--cervena);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* Označenie normy je dlhšie než napäťová úroveň, inak by v úzkom stĺpci
   pretieklo. */
.rozsah-napatie.norma{font-size:clamp(11px,1.1vw,13px);letter-spacing:0}
.rozsah-nazov{font-weight:650;font-size:clamp(16.5px,1.6vw,20px);
  letter-spacing:-.01em;display:block;
  transition:color var(--cas) var(--krivka)}
.polozka-rozsahu > summary:hover .rozsah-nazov{color:var(--cervena)}
.rozsah-veta{display:block;color:var(--text-3);font-size:14.5px;
  line-height:1.55;margin-top:5px;max-width:56ch}

/* Prepínač. Vodorovná čiarka ostáva, zvislá pri otvorení zmizne, teda
   z plus sa stane mínus. Je to drobnosť, ale je to jediný pohyb v páse. */
.rozsah-prepinac{
  position:relative;width:16px;height:16px;flex:none;align-self:center;
  color:var(--text-3);transition:color var(--cas) var(--krivka);
}
.rozsah-prepinac::before,.rozsah-prepinac::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;
  background:currentColor;transform:translateY(-50%);
  transition:transform var(--cas) var(--krivka),opacity var(--cas) var(--krivka);
}
.rozsah-prepinac::after{transform:translateY(-50%) rotate(90deg)}
.polozka-rozsahu[open] .rozsah-prepinac{color:var(--cervena)}
.polozka-rozsahu[open] .rozsah-prepinac::after{transform:translateY(-50%) rotate(0);opacity:0}
.polozka-rozsahu > summary:hover .rozsah-prepinac{color:var(--cervena)}

/* Podrobnosti. Sú to pilulky, rovnaké ako pri troch smeroch, nech si pás
   nezakladá vlastný jazyk. */
.rozsah-detail{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:0 0 clamp(20px,2.4vw,28px) clamp(92px,10vw,136px);
  margin-top:-6px;
}
@media (max-width:700px){
  .rozsah-detail{padding-left:0}
}
.rozsah-detail li{
  list-style:none;
  font-family:var(--pismo-mono);font-size:11.5px;letter-spacing:.06em;
  padding:6px 12px;border:1px solid var(--linka-silna);border-radius:999px;
  color:var(--text-2);
}

@media (max-width:700px){
  .polozka-rozsahu > summary{grid-template-columns:1fr auto;gap:4px 14px}
  .rozsah-napatie{grid-column:1;grid-row:1}
  .polozka-rozsahu > summary > .telo{grid-column:1;grid-row:2}
  .rozsah-prepinac{grid-column:2;grid-row:1/3}
}

/* ---------- čo nerobíme ----------
   Vymedzenie patrí na stránku rovnako ako ponuka. Zákazník, ktorý hľadá
   vedenie 110 kV, sa to má dozvedieť tu a nie na tretej schôdzke. */
.nerobime{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--linka);
  color:var(--text-3);font-size:14.5px;line-height:1.6;
}
.nerobime b{
  font-family:var(--pismo-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);flex:none;
  padding-top:3px;
}
.nerobime p{max-width:62ch}

/* ---------- stupne dokumentácie ----------
   Štyri stupne v rade. Pod novým názvom stojí ten starý, lebo zákazník aj
   úrad ich roky volali DÚR a DSP a ešte dlho budú. */
.stupne{
  margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--linka);
}
.stupne h3{margin-bottom:8px}
.stupne .drobne{max-width:64ch}
.stupne-zoznam{
  list-style:none;display:grid;gap:1px;margin:22px 0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--linka);border:1px solid var(--linka);
}
.stupne-zoznam li{
  background:var(--papier);padding:16px 18px;
  display:flex;flex-direction:column;gap:5px;position:relative;
}
/* Poradové číslo stupňa vo výkresovom písme, v rohu. */
.stupne-zoznam li::before{
  counter-increment:stupen;content:"0" counter(stupen);
  position:absolute;top:10px;right:12px;
  font-family:var(--pismo-mono);font-size:10px;letter-spacing:.1em;
  color:var(--cervena);
}
.stupne-zoznam{counter-reset:stupen}
.stupen-novy{font-weight:650;font-size:15.5px;line-height:1.3;
  padding-right:22px}
.stupen-stary{
  font-family:var(--pismo-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
}

/* ---------- typy žiadostí ----------
   Trinásť položiek v pilulkách. Je to zoznam toho, čo vieme podať, nie
   ozdoba, preto sú čitateľné a nie drobné. */
.ziadosti{
  margin-top:clamp(34px,4.4vw,60px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--linka);
}
.ziadosti-hlava{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.ziadosti-hlava .ciarka-plna{flex:1;height:1px;background:var(--linka)}
.ziadosti-zoznam{
  list-style:none;display:flex;flex-wrap:wrap;gap:9px;
}
.ziadosti-zoznam li{
  font-size:13.5px;font-weight:600;
  padding:9px 16px;border:1px solid var(--linka-silna);border-radius:999px;
  color:var(--text-2);background:var(--papier-3);
  transition:border-color var(--cas-rychly) var(--krivka),
             color var(--cas-rychly) var(--krivka);
}
.ziadosti-zoznam li:hover{border-color:var(--cervena);color:var(--cervena)}

/* ---------- právny odkaz ----------
   Paragraf sa nespomína v texte len tak. Keď je uvedený, je overený. */
.pravny{
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--linka);
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  color:var(--text-3);font-size:13.5px;line-height:1.65;
}
.pravny b{
  font-family:var(--pismo-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);flex:none;padding-top:3px;
}
.pravny p{max-width:66ch}
.pravny strong{color:var(--text-2);font-weight:650}

/* ---------- postup ----------
   Štyri kroky vedľa seba. Nad nimi jedna čiara, na nej uzly. Je to opäť
   výkres, nie ikonky. */
.postup{
  display:grid;gap:clamp(20px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:clamp(32px,4vw,56px);
}
.krok{position:relative;padding-top:34px}
/* Vodorovná čiara s uzlom. Posledný krok má čiaru ukončenú šípkou. */
.krok::before{
  content:"";position:absolute;top:7px;left:0;right:-999px;height:1px;
  background:var(--linka-silna);
}
.krok:last-child::before{right:0}
.krok::after{
  content:"";position:absolute;top:2px;left:0;width:11px;height:11px;
  border-radius:50%;background:var(--papier);
  border:2px solid var(--cervena);
}
/* Krok má h4, lebo nad postupom stojí nadpis celého postupu. Prehliadač
   h4 sám nezväčšuje, tak mu treba dať to isté, čo má h3. E-shop používa
   v tom istom rozložení h3, tam žiadny nadradený nadpis nie je. */
.krok h3,.krok h4{
  font-size:var(--v-h3);line-height:1.22;letter-spacing:-.014em;
  font-weight:750;margin-bottom:9px;
}
.krok p{color:var(--text-2);font-size:15.5px;line-height:1.62}
.krok p a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linka-silna)}
.krok p a:hover{color:var(--cervena);text-decoration-color:var(--cervena)}
.krok .stitok{display:block;margin-bottom:12px}
@media (max-width:700px){
  .krok::before{right:0}
}

/* ---------- prepínač postupov ----------
   Pás 07 nesie štyri postupy, každý pre inú činnosť. Pilulky sú tie isté ako
   v katalógu e-shopu, aby stránka nemala dva jazyky na tú istú vec.

   Bez skriptu je prepínač prázdny a nezaberá miesto, postupy stoja pod sebou
   a každý má svoj nadpis. So skriptom nadpis nesie pilulka, blok si ho
   necháva len pre čítačku obrazovky. */
.postup-prepinac{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,36px);
}
.postup-prepinac:empty{display:none}
.postup-zalozka{
  padding:11px 20px;border:1px solid var(--linka-silna);border-radius:999px;
  background:transparent;color:var(--text-2);cursor:pointer;
  font-size:14.5px;font-weight:650;white-space:nowrap;
  transition:background var(--cas-rychly) var(--krivka),
             color var(--cas-rychly) var(--krivka),
             border-color var(--cas-rychly) var(--krivka);
}
.postup-zalozka:hover{border-color:var(--text-3);color:var(--text)}
.postup-zalozka[aria-selected="true"]{
  background:var(--cervena);border-color:var(--cervena);color:#fff;
}

.postup-blok + .postup-blok{margin-top:clamp(40px,5vw,72px)}
.postup-nazov{margin-top:clamp(28px,3.4vw,44px)}
.postup-blok[hidden]{display:none}

.je-prepinac .postup-blok + .postup-blok{margin-top:0}
.je-prepinac .postup-nazov{
  position:absolute;width:1px;height:1px;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Telefónne správanie prepínača rieši blok TELEFÓN na konci súboru:
   pilulky sa zalomia do dvoch riadkov, bočné odsúvanie na tejto stránke
   nie je nikde. */

/* ---------- kontakt ---------- */
.kontakt-mriezka{
  display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:clamp(20px,2.4vw,30px);
}
.kontakt-karta{
  background:var(--papier-3);border:1px solid var(--linka);
  padding:clamp(24px,2.6vw,32px);border-radius:var(--r-velky);
  transition:border-color var(--cas) var(--krivka),
             transform var(--cas) var(--krivka),
             box-shadow var(--cas) var(--krivka);
}
.kontakt-karta:hover{border-color:var(--linka-silna);transform:translateY(-3px);
  box-shadow:var(--tien)}
/* Na karte sú zámerne len dve sadzby a nič medzi nimi:
     1. strojopis verzálkami na popisky (nadpis karty aj názov riadka),
     2. text karty na hodnoty.
   Predtým tu boli tri veľkosti a jedna hodnota bola navyše vysadená veľkým
   polotučným, takže tri karty vedľa seba vyzerali každá inak: jedna mala
   veľký údaj hore, druhá odsek bežného textu, tretia iba tabuľku. */
.kontakt-karta .stitok{display:block;margin-bottom:18px}
.kontakt-karta dl{display:grid;gap:13px}
.kontakt-karta dl > div{display:flex;justify-content:space-between;
  align-items:baseline;gap:16px;flex-wrap:wrap}
.kontakt-karta dt{
  font-family:var(--pismo-mono);font-size:var(--v-stitok);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;flex:none;
}
.kontakt-karta dd{
  font-size:15.5px;font-weight:600;text-align:right;
  word-break:break-word;font-variant-numeric:tabular-nums;
}
.kontakt-karta dd a{text-decoration:none}
.kontakt-karta dd a:hover{color:var(--cervena)}

/* ---------- pás s výzvou pred pätičkou ---------- */
.vyzva{position:relative;overflow:hidden;text-align:center}
.vyzva h2{max-width:18ch;margin-inline:auto}
.vyzva .uvodka{margin:22px auto 34px;text-align:center}
/* Odstup nesie tlačidlová lišta sama a nie odsek nad ňou. Odsek z výzvy
   odišiel a s ním aj celá medzera, takže tlačidlá sadli na dotyk k pätke
   nadpisu, do dotiahov písmen. Keď sa odsek raz vráti, jeho spodný okraj
   sa s týmto zlúči, nesčíta sa. */
.vyzva-akcie{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,46px);
}
.vyzva .tlacidlo.tichy{color:var(--text-tma);border-color:var(--linka-tma-silna)}
.vyzva .tlacidlo.tichy::before{background:var(--text-tma)}
.vyzva .tlacidlo.tichy:hover{color:var(--uhol)}

/* ============================================================
   TELEFÓN
   ============================================================
   Desktopová sadzba ostáva nedotknutá, celý tento blok je pod 640 px.

   Jedno pravidlo drží celý mobil: **rolovať sa smie len zhora nadol**.
   Skúšal som mriežky meniť na vodorovné rady, ktoré sa odsúvajú prstom,
   a bola to chyba. Karta sa v takom rade začína inde než tá vedľa nej,
   takže nadpisy dvoch susedných buniek nesedia v jednej zvislej osi
   a stránka pôsobí rozhádzane. Navyše sa časť obsahu skryje za okraj
   a nikto ju nehľadá. Všetko preto ide pod seba, zarovnané na tú istú
   ľavú hranu.

   Druhé pravidlo je kompaktnosť. Rytmus, ktorý na 27-palcovom monitore
   drží stránku vzdušnú, je na 375 px len prázdne miesto, cez ktoré sa
   treba prerolovať. Pásy, výplne kariet aj medzery medzi nimi sú preto
   výrazne tesnejšie. */
@media (max-width:640px){

  :root{
    --lista-v:56px;
    --pas:56px;
    --pas-maly:38px;
    --v-h2:31px;
    --v-h1:clamp(38px,10vw,50px);
    /* Sivá sa tu zámerne NEVracia. Drobný text má na telefóne rovnaký
       kontrast ako na monitore, sivá patrí výhradne zamknutým častiam. */
  }

  /* ---------- lišta ----------
     Značka vľavo, všetko ostatné vpravo. Tlačidlo e-shopu je pilulka
     a hamburger stratil rámček: na dotykovej obrazovke rámček nič
     nepridáva, dotykový cieľ áno, preto má 44 × 44 px. */
  .lista{padding-inline:14px;gap:10px}
  .lista-znacka{margin-right:auto}
  .lista-znacka .eens-mark{height:22px}
  .lista-znacka b{font-size:15px;letter-spacing:.14em}
  .eshop-tlacidlo{padding:8px 14px;font-size:12.5px;border-radius:999px}
  .menu-tlacidlo{border:0;width:44px;height:44px;margin-right:-10px;gap:6px}
  .menu-tlacidlo i{width:20px;height:2px}

  /* Menu sa vysunie sprava a začína pod lištou. Zvislé centrovanie vyzerá
     dobre pri štyroch položkách, pri siedmich sa horné dostanú mimo dosah
     palca. */
  .menu-panel{
    justify-content:flex-start;
    padding-top:calc(var(--lista-v) + 20px);
    transform:translateX(9%);
    transition:opacity var(--cas) var(--krivka),
               transform var(--cas) var(--krivka),
               visibility var(--cas);
  }
  .menu-je .menu-panel{transform:none}
  .menu-panel a{padding:14px 0}

  /* ---------- hlavička pása ----------
     Číslo nad nadpisom, nie vedľa neho. Vedľa zožralo šírku, ktorú
     nadpis na 375 px potrebuje celú. Čiara ide pod nadpis cez celú šírku. */
  .hlava-pasu{
    flex-direction:column;align-items:stretch;gap:9px;
    margin-bottom:18px;
  }
  .hlava-pasu .ciarka{flex:none;width:100%}

  /* ---------- karty ----------
     Jedna plocha, jeden rám, jeden polomer a rovnaká výplň. Rovnaká výplň
     je tu to podstatné: vďaka nej stoja nadpisy všetkých buniek na tej
     istej zvislej osi. Používa to hero pás, položky pásov aj kroky
     postupu, aby stránka na telefóne držala jeden tvar. */
  .polozka,.krok,.hero-sluzba{
    border:1px solid var(--linka);
    border-radius:var(--r-velky);
    padding:15px 15px 17px;
  }
  .polozka,.krok{background:var(--papier-3)}

  /* Výplň sa musí zopakovať aj s tými istými nth-child selektormi, aké
     používa širokoobrazovkové rozloženie. Tam sa ľavá výplň strieda podľa
     pozície v riadku, lebo oddeľuje stĺpce, a taký selektor má vyššiu
     špecificitu než samotná trieda. Bez tohto zopakovania mali karty pod
     sebou tri rôzne ľavé okraje a nadpisy nestáli v jednej osi: overené
     meraním, 32, 31 a 17 pixelov. */
  .polozka:not(:nth-child(4n+1)),
  .polozka:nth-child(even),
  .polozka:nth-child(odd){padding-left:15px}
  .hero-sluzba:not(:nth-child(3n+1)),
  .hero-sluzba:nth-child(even),
  .hero-sluzba:nth-child(odd){padding-left:12px}

  /* ---------- položky pásov ---------- */
  .polozky{
    display:grid;grid-template-columns:1fr;gap:10px;
    border-top:0;margin-top:20px;
  }
  .polozka::before{display:none}
  .polozka .stitok{margin-bottom:7px}
  .polozka h3{font-size:17px;margin-bottom:5px}
  .polozka p{font-size:14px;line-height:1.5}

  /* ---------- postup ----------
     Uzol si berie ľavý horný roh karty, preto má karta hore o kúsok
     viac miesta. Vodorovná čiara medzi krokmi ide preč, kartu už
     oddeľuje jej vlastný rám. */
  .postup{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}
  .krok{padding-top:32px}
  .krok::before{display:none}
  .krok::after{left:15px;top:14px}
  .krok .stitok{margin-bottom:7px}
  .krok h3,.krok h4{font-size:17px;margin-bottom:5px}
  .krok p{font-size:14px;line-height:1.5}

  /* ---------- hero ----------
     Päť smerov v dvoch stĺpcoch. Pod sebou by päť dlaždíc natiahlo hero
     pás na jeden a pol obrazovky, v dvoch stĺpcoch sa zmestí celý.
     Piaty by ostal sám na riadku, tak si vezme obe polovice. */
  .hero-smery{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    border-top:0;padding-top:0;margin-top:22px;
  }
  .hero-sluzba{
    background:rgba(255,255,255,.055);
    border-color:var(--linka-tma);
    padding:11px 12px 13px;
  }
  .hero-sluzba::before{display:none}
  .hero-sluzba:nth-child(5){grid-column:1 / -1}
  .hero-sluzba .sip{display:none}
  .hero-sluzba .stitok{margin-bottom:5px}
  .hero-sluzba h2{margin-bottom:4px;font-size:15.5px;line-height:1.2}
  /* Popis činnosti sa na telefóne NESKRÝVA. Predtým tu bolo display:none
     a z dlaždice zostal holý nadpis, ktorý sám o sebe nepovie, čo tá činnosť
     obnáša. Radšej drobné písmo než prázdne miesto. */
  .hero-sluzba p{font-size:11.5px;line-height:1.4;letter-spacing:.002em}
  /* Kladka v dlaždici zamknutej činnosti sa zmenší spolu s ňou. */
  .hero-sluzba .zamok-velky{gap:7px;padding:8px 0}
  .hero-sluzba .zamok-kresba{width:26px}
  .hero-sluzba .odznak-chystame{font-size:8px;padding:2px 6px 2px 5px}

  .hero-akcie{flex-direction:column;align-items:stretch;gap:9px;margin-top:22px}
  .hero-akcie .tlacidlo{width:100%;justify-content:center}
  .hero-claim{margin-top:14px}

  /* ---------- výzvy pásov ----------
     Tlačidlo cez celú šírku. Najistejší cieľ pre palec a zároveň
     najbežnejší mobilný vzor, netreba naň prísť. */
  .pas-akcia{
    flex-direction:column;align-items:stretch;gap:12px;
    margin-top:24px;padding-top:20px;
  }
  .pas-akcia .tlacidlo{width:100%;justify-content:center}
  .pas-akcia .drobne{max-width:none}
  .vyzva-akcie{flex-direction:column;align-items:stretch;gap:9px}

  /* ---------- prepínač postupov ----------
     Štyri pilulky sa zalomia do dvoch riadkov. Odsúvanie do strany
     na tejto stránke nie je. */
  .postup-prepinac{flex-wrap:wrap;overflow:visible;margin-top:18px}
  .postup-zalozka{padding:10px 16px;font-size:14px}

  /* ---------- karty smerov ----------
     Pás 01 ostáva stohovaný, sú to celé karty s odsekom. Kresba ide preč,
     na 375 px z nej ostane ikonka bez obsahu. */
  .smer{padding-block:22px;gap:12px}
  .smer-kresba{display:none}
  .smer-nazov{font-size:22px}

  .polozka-rozsahu summary{gap:8px}
  .stupne-zoznam{grid-template-columns:1fr}
  .uvodka{font-size:16.5px;line-height:1.55}
}

/* ---------- podstránka činnosti ----------
   Titulka začína tmavým hero pásom, pod ktorým lišta stojí priehľadná.
   Podstránka hero nemá, začína rovno obsahom, takže lišta musí od začiatku
   sedieť na ploche a obsah pod ňou musí mať miesto. */
body.podstranka{padding-top:var(--lista-v)}
body.podstranka .lista{position:fixed}
body.podstranka section:first-of-type{padding-top:clamp(48px,6vw,88px)}

/* Nadpis podstránky. Je to h1, ale v hlave pása má sedieť rovnako ako h2
   na titulke, inak by na krátkej stránke pôsobil ako plagát. */
.hlava-pasu h1{
  font-size:var(--v-h2);line-height:1.08;letter-spacing:-.022em;
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
}

/* Titulka koľajnicu nemá, takže nemá o čo odsadzovať obsah. */
body.bez-kolajnice .stranka{padding-left:0}