/* =========================================================================
   Priprava firmy (drive Mapa firmy) -- prvky, ktere jsou jen na teto strance.

   Signature blok je STOPA JEDNOHO UDAJE. Vedle hranolu (vejir) a okruhu
   (kruh) musel byt jiny tvar, jinak je z peti scen sablona. Stopa je primka
   se stanicemi: udaj jde zleva doprava a nekde po ceste se zmeni. Prave to
   misto je cela pointa sluzby, takze je jedine barevne (--vada).

   Je to zaroven jedine misto na celem webu, kde navstevnik neco PREPNE
   (tri udaje: mnozstvi, cena, zakaznik; od 8. 9. ctvrta stopa "Kdo to smi"
   sleduje tutez slevu pres ruce lidi -- hodnota v mono je role, ne cislo).
   Chybejici interakce byla nalez z kritiky Antigravity, viz STAV.md.

   POJISTKA jako u vsech scen: bez JavaScriptu se zobrazi vsechny ctyri stopy
   pod sebou i s nadpisy a stranka nic neztrati. Prepinac je v HTML skryty
   a odkryva ho az skript -- tlacitko, ktere bez skriptu nic nedela, je horsi
   nez zadne tlacitko.
   ========================================================================= */

.stopa-sekce h2{max-width:18ch}

/* ---------- Prepinac udaju ---------- */
.stopa-prepinac{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,3.6vw,44px)}
.stopa-prepinac[hidden]{display:none}
.stopa-prepinac button{
  font-family:var(--text);font-size:15px;padding:9px 20px;border-radius:999px;
  background:transparent;color:color-mix(in srgb,var(--papir) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--papir) 20%,transparent);cursor:pointer;
  transition:background .18s var(--krivka-klid),color .18s var(--krivka-klid),
             border-color .18s var(--krivka-klid),transform .16s var(--krivka)}
.stopa-prepinac button:active{transform:scale(.97)}
.stopa-prepinac button[aria-selected="true"]{background:var(--papir);color:var(--inkoust);
  border-color:var(--papir)}
.stopa-prepinac button:focus-visible{outline:2px solid var(--akcent-sv);outline-offset:3px}

/* ---------- Jedna stopa ----------
   Bez skriptu jsou videt vsechny tri i s nadpisem. Se skriptem zustane jedna
   a nadpis se skryje, protoze ho nahradi prepinac. */
.stopa{margin-top:clamp(28px,3.4vw,40px)}
.stopa + .stopa{margin-top:clamp(40px,5vw,64px)}
.stopa-nazev{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akcent-sv);margin-bottom:20px;display:block}
.stopa[hidden]{display:none}

/* Linka je border-top popisku, ne absolutni pruh. Diky nulove mezere v mrizce
   prochazi spojite vsemi stanicemi a bod na ni sedi presne -- absolutni
   pozicovani na pixely tady popisek prekrylo. */
.stanice-rada{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:0;align-items:end;position:relative}

.stanice{position:relative;padding-right:clamp(10px,1.6vw,22px);
  animation:stanice-prichod .5s var(--krivka) backwards}
@keyframes stanice-prichod{from{opacity:0;transform:translateY(10px)}}
.stanice-hodnota{display:block;font-family:var(--mono);font-size:clamp(13px,1.15vw,16px);
  line-height:1.25;padding-bottom:18px;word-break:break-word}
.stanice-misto{display:block;position:relative;padding-top:18px;
  border-top:1px solid color-mix(in srgb,var(--papir) 22%,transparent);
  font-size:13.5px;line-height:1.35;
  color:color-mix(in srgb,var(--papir) 58%,transparent)}
/* Bod na lince. Sedi na hranici popisku, takze se s nim nikdy neprekryje. */
.stanice-misto::before{content:'';position:absolute;left:0;top:-5px;
  width:9px;height:9px;border-radius:50%;background:var(--inkoust);
  border:1.5px solid color-mix(in srgb,var(--papir) 45%,transparent)}
.stanice:last-child .stanice-misto{border-top-color:transparent}
.stanice:last-child .stanice-misto::after{content:'';position:absolute;left:0;right:auto;
  top:-1px;width:10px;height:1px;background:color-mix(in srgb,var(--papir) 22%,transparent)}

/* Rucni prepis mezi stanicemi. Drobnost, ale je to cela pricina problemu. */
.stanice[data-prepis] .stanice-misto{border-top-style:dashed}

/* Misto, kde se hodnota zmenila. Jedina barva v obrazku.
   Na tmavem podkladu se pouziva svetlejsi varianta tonu vady -- tmava
   (#9A3F2B) ma na inkoustu kontrast 2,8:1, tedy pod minimem. */
.stanice.zmena .stanice-hodnota{color:var(--vada-sv)}
.stanice.zmena .stanice-misto::before{background:var(--vada);border-color:var(--vada-sv)}
.stanice.zmena .stanice-misto{color:color-mix(in srgb,var(--papir) 78%,transparent)}

.stopa-popis{margin-top:clamp(34px,4vw,48px);font-size:15.5px;max-width:62ch;
  color:color-mix(in srgb,var(--papir) 72%,transparent)}
.stopa-pozn{margin-top:22px;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  max-width:70ch;color:color-mix(in srgb,var(--papir) 54%,transparent)}

/* Zavreny stav nasazuje skript, viz odkryj() v sluzba.js. */
.stopa-sekce.pripravena .stanice{opacity:0;transform:translateY(10px);animation:none}
.stanice{animation-delay:calc(var(--i) * .08s)}

@media (max-width:900px){
  /* Sest stanic na sirku telefonu neni cesta, je to kase. Svisly seznam
     s hodnotou vlevo a mistem vpravo cte tyz pribeh shora dolu -- linka se
     preklopi na svislou a vede levym okrajem. */
  .stanice-rada{grid-auto-flow:row}
  .stanice{padding:0 0 0 26px;
    border-left:1px solid color-mix(in srgb,var(--papir) 22%,transparent)}
  .stanice[data-prepis]{border-left-style:dashed}
  .stanice:last-child{border-left-color:transparent}
  .stanice-hodnota{padding:16px 0 4px}
  .stanice-misto{border-top:0;padding:0 0 16px}
  .stanice-misto::before{left:-31px;top:-26px}
  .stanice:last-child .stanice-misto::after{display:none}
  /* Ctyri volby na sirku telefonu: dve rady po dvou, ne ctyri ruzne dlouhe
     pilulky v jedne rade s jednou zalomenou. */
  .stopa-prepinac button{flex:1 1 calc(50% - 4px)}
}
@media (prefers-reduced-motion:reduce){
  .stopa-sekce.pripravena .stanice{opacity:1;transform:none}
}

/* =========================================================================
   Co na Priprave stoji: ctyri bloky na jednom sirokem podstavci.
   Nahradilo schody s cenou (8. 9.): cenu kroku nesou jejich stranky a mapa
   na homepage, tady se ukazuje jen to, ze Priprava je zaklad pod vsemi.
   Blok Zadani je s podstavcem spojeny kratkou linkou (bezi soubezne).
   Neni to diagram uzlu -- je to rada bloku na zakladu, staticka.
   ========================================================================= */
.vazby-nadpis{display:block;margin-top:clamp(32px,4vw,48px);font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tlum)}
.vazby-mapa{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;row-gap:22px}
.vazba{position:relative;display:block;border:1px solid var(--linka);border-radius:var(--r-l);
  padding:clamp(18px,2.2vw,26px);background:var(--papir);color:inherit;text-decoration:none;
  transition:border-color .2s var(--krivka-klid),transform .16s var(--krivka)}
.vazba:active{transform:scale(.99)}
.vazba h3{font-size:clamp(17px,1.4vw,20px)}
.vazba p{font-size:14.5px;color:var(--tlum);margin-top:8px}
/* Linka od bloku Zadani dolu na podstavec: jedina spojka v obrazku. */
.vazba.soubezne::after{content:'';position:absolute;left:50%;bottom:-23px;
  width:1px;height:23px;background:var(--akcent)}
.podstavec{grid-column:1 / -1;display:flex;align-items:baseline;gap:18px;
  border-radius:var(--r-l);padding:20px clamp(20px,2.4vw,28px);
  background:var(--inkoust);color:var(--papir)}
.podstavec-kdy{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--akcent-sv)}
.podstavec h3{font-size:clamp(19px,1.6vw,23px)}
@media (hover:hover) and (pointer:fine){
  .vazba:hover{border-color:var(--inkoust)}
}
.vazba:focus-visible{outline:2px solid var(--akcent);outline-offset:3px}

.doklad-radek{margin-top:clamp(30px,3.4vw,42px);padding-top:22px;
  border-top:1px solid var(--linka);max-width:74ch}
.doklad-radek p{font-size:15.5px}
.doklad-radek .zdroj{display:block;margin-top:8px;font-family:var(--mono);
  font-size:12px;color:var(--tlum)}
.doklad-radek + .doklad-radek{margin-top:20px}

/* =========================================================================
   Vypis ze strojove kontroly. Ma vypadat jako vystup skriptu, ne jako
   marketingovy seznam -- proto mono, zadne ikony a zadne odrazky.
   ========================================================================= */
.vypis{margin-top:clamp(30px,3.6vw,44px);border:1px solid var(--linka);
  border-radius:var(--r-l);background:var(--papir-tmav);overflow:hidden;
  max-width:840px}
.vypis-radek{display:grid;grid-template-columns:minmax(76px,auto) 1fr;
  gap:clamp(14px,2vw,26px);padding:14px clamp(18px,2.2vw,26px);
  border-top:1px solid var(--linka);font-size:15px;align-items:baseline}
.vypis-radek:first-child{border-top:0}
.vypis-cislo{font-family:var(--mono);font-size:15px;text-align:right;font-weight:500}
.vypis-radek.nalez .vypis-cislo{color:var(--vada)}
.vypis-radek span:last-child{color:var(--tlum)}

/* =========================================================================
   Kde ma ktery udaj zit. Levy sloupec je rozsypany na drobne bloky, pravy
   je jeden pevny -- rozdil ma byt videt driv, nez to clovek precte.
   ========================================================================= */
.bydliste{margin-top:clamp(30px,3.6vw,44px);overflow-x:auto;
  padding:3px 0;margin-bottom:-3px}
.bydliste-tab{width:100%;min-width:720px;border-collapse:collapse}
.bydliste-tab th{text-align:left;font-family:var(--mono);font-weight:400;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tlum);
  padding:0 18px 12px 0;vertical-align:bottom}
.bydliste-tab td{padding:16px 18px 16px 0;border-top:1px solid var(--linka);
  vertical-align:top;font-size:15px}
.bydliste-tab td:first-child{font-weight:600;width:20%}
.rozsypane{display:flex;flex-wrap:wrap;gap:5px}
.rozsypane span{font-size:13px;padding:4px 9px;border-radius:var(--r-s);
  background:var(--papir-tmav);color:var(--tlum);border:1px solid var(--linka)}
.pevne{display:inline-block;font-size:13.5px;padding:6px 12px;border-radius:var(--r-s);
  background:var(--akcent-sv);border:1px solid color-mix(in srgb,var(--akcent) 26%,transparent)}
.kdo{font-family:var(--mono);font-size:13px;color:var(--tlum)}
/* Tabulka Kdo co smi pouziva tytez tridy; cas cekani je jediny barevny prvek. */
.ceka-cas{color:var(--vada)}

/* =========================================================================
   Vystupy: cislovane polozky pod sebou, ne druha mrizka na jedne strance.
   ========================================================================= */
.vystupy{margin-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--linka)}
.vystup{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,34px);padding:22px 0;border-bottom:1px solid var(--linka)}
.vystup-c{font-family:var(--mono);font-size:14px;color:var(--akcent);padding-top:3px}
.vystup p{font-size:15.5px;color:var(--tlum);margin-top:7px;max-width:62ch}
.vystup .zdroj{display:block;margin-top:8px;font-family:var(--mono);font-size:12px}
/* Osm vystupu na stole: dva sloupce plnene po radcich, at sekce neni dvakrat
   delsi nez zbytek. Druhy seznam (kam si to vezmete) zustava v jednom. */
.vystupy.dva{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,56px)}

@media (max-width:900px){
  .vazby-mapa{grid-template-columns:1fr;gap:12px}
  /* Podstavec jde nahoru jako zvyrazneny radek, pod nim seznam ctyr odkazu. */
  .podstavec{order:-1;flex-wrap:wrap;gap:6px 18px}
  .vazba.soubezne::after{display:none}
  .vystupy.dva{display:block}
  .vypis-radek{grid-template-columns:1fr;gap:4px}
  .vypis-cislo{text-align:left}
}

/* ===== Kde data bydli: uzke okno =====
   Ctyri sloupce meri 720 px, takze v okne o 390 px tabulka pretekala na
   dvojnasobek. Radek se stava kartou a hlavicka sloupce popiskem uvnitr
   (data-hlavicka na kazde bunce). Pravidla musi byt v tomhle souboru:
   v sluzba.css je prebijel min-width:720px o par radku vys. */
@media (max-width:900px){
  .bydliste{overflow:visible}
  .bydliste-tab,.bydliste-tab tbody{display:block;width:100%;min-width:0}
  /* Radek je flex sloupec, ne block. Bunka prepnuta na display:block si uvnitr
     tabulky dal drzi sirku podle obsahu (59 px u slova "Zakaznik"), takze
     delici cara pod nadpisem karty koncila v tretine sirky. Jako flex polozka
     se roztahne sama a na tabulkovem layoutu uz nezavisi. */
  .bydliste-tab tr{display:flex;flex-direction:column;width:100%;min-width:0}
  .bydliste-tab td{display:block;width:auto;min-width:0}
  .bydliste-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .bydliste-tab tr{
    border:1px solid var(--linka);border-radius:var(--r);background:var(--papir);
    padding:16px 18px;margin-bottom:12px;
  }
  .bydliste-tab td{border:0;padding:0}
  .bydliste-tab td:first-child{
    /* width:auto prebiji sirku 20 %, kterou ma bunka pro siroke okno; jako
       nadpis karty by jinak merila 59 px a cara pod ni koncila v petine. */
    width:auto;
    font-family:var(--display);font-size:19px;letter-spacing:-.02em;
    padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--linka);
  }
  .bydliste-tab td:not(:first-child){padding-top:12px}
  .bydliste-tab td:not(:first-child)::before{
    content:attr(data-hlavicka);display:block;
    font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--tlum);margin-bottom:5px;
  }
}