/* =========================================================================
   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). Chybejici interakce byla nalez
   z kritiky Antigravity, viz STAV.md.

   POJISTKA jako u vsech scen: bez JavaScriptu se zobrazi vsechny tri 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{background:var(--inkoust);color:var(--papir);position:relative;overflow:hidden}
.stopa-sekce::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 62% at 22% 8%,
    color-mix(in srgb,var(--akcent) 20%,transparent), transparent 64%)}
.stopa-sekce .obsah{position:relative}
.stopa-sekce h2{max-width:18ch}
.stopa-lead{color:color-mix(in srgb,var(--papir) 64%,transparent);
  margin-top:16px;max-width:56ch}

/* ---------- 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}
}
@media (prefers-reduced-motion:reduce){
  .stopa-sekce.pripravena .stanice{opacity:1;transform:none}
}

/* =========================================================================
   Schody nabidky: kde v ceste ctenar stoji a co ho co stoji.
   Neni to retez (ten nese nasledek) -- schody nesou CENU.
   ========================================================================= */
.schody{margin-top:clamp(32px,4vw,48px);display:grid;
  grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
.schod{border:1px solid var(--linka);border-radius:var(--r-l);
  padding:clamp(20px,2.4vw,28px);background:var(--papir)}
.schod:nth-child(1){margin-top:44px}
.schod:nth-child(2){margin-top:22px}
.schod-kdy{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tlum)}
.schod h3{margin-top:10px}
.schod-cena{font-family:var(--display);font-size:clamp(20px,2vw,27px);
  letter-spacing:-.03em;color:var(--akcent);margin-top:14px;display:block}
.schod p{font-size:14.5px;color:var(--tlum);margin-top:8px}
.schod.tady{background:var(--inkoust);color:var(--papir);border-color:var(--inkoust)}
.schod.tady .schod-kdy{color:var(--akcent-sv)}
.schod.tady .schod-cena{color:var(--papir)}
.schod.tady p{color:color-mix(in srgb,var(--papir) 68%,transparent)}
.schod-dal{font-size:14.5px;color:var(--tlum);margin-top:8px}

.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:11.5px;
  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)}

/* =========================================================================
   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}

@media (max-width:900px){
  .schody{grid-template-columns:1fr;gap:12px}
  .schod:nth-child(1),.schod:nth-child(2){margin-top:0}
  .vypis-radek{grid-template-columns:1fr;gap:4px}
  .vypis-cislo{text-align:left}
}