/* =============================================================================
   novy-2026-kalkulacka.css, 26. 8. 2026
   Vzhled vrstvy doporucovaci kalkulacky na /doporucovaci-kalkulacka.
   Patri k js/zs26-kalkulacka.js a js/rady.js.

   PRAVIDLA, KTERA TENHLE SOUBOR DRZI
   - Kazdy selektor zacina body.zs26-kalkulacka (prepis legacy) nebo .zs26-kv
     (vlastni prvky vrstvy). Bez te tridy na body se stranka chova jako dnes.
   - Tokeny --zs-* z novy-2026.css, ktery je na strance uz dnes.
     Zadny hex krome #fff, zadne stiny, breakpointy jen 700 a 1024,
     cteny text min. 16 px, limetka jen na plochy.
   - Sdilene komponenty .zs-tlacitko, .zs-karta, .zs-pole, .zs-zaskrtavatko,
     .zs-h2, .zs-h3, .zs-perex, .zs-popisek, .zs-stitek, .zs-cena,
     .zs-cena-velka se nedefinuji znovu, jen se dolaďuji uvnitr .zs26-kv.
   - Nikdy em dash ani en dash, ani v komentarich.

   PREDLOHA
   Pro tuhle stranku Figma neexistuje. Vzhled se drzi hotovych komponent
   ZS26 a rozvrzeni podstranky (hlavicka pulka sirky, jedno tlacitko).
   Kdyz vznikne Figma, ma prednost.

   PROC #online_kalk NENI display: none
   Legacy skript spust na konci vola jQuery("#online_kalk").offset(). U prvku
   schovaneho pres display: none je to 0 a stranka po odeslani skoci nahoru.
   Proto vizualni skryti s geometrii. Vrstva si po 600 ms odscrolluje sama.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. Legacy pod tridou zs26-kalkulacka. Nic se nemaze, jen schovava.
   --------------------------------------------------------------- */
body.zs26-kalkulacka #sidebar,
body.zs26-kalkulacka #prepinac_sidebar { display: none; }

/* Odstavec o rovnici Mifflin-St Jeor. Vrstva ho prebira do rozbaleni
   "Jak to pocitame" pod vysledkem, tady uz nema co delat. */
body.zs26-kalkulacka #clanek > p { display: none; }

/* Hero modul 263: veta "Staci vyplnit 7 hodnot" (vrstva ma ctyri kroky)
   a klipartova tuzka. H1 zustava, je v serverovem HTML. */
body.zs26-kalkulacka .pas.m263 h3,
body.zs26-kalkulacka .pas.m263 .flex-flex-start-top-wrap > div:first-child { display: none; }

/* Dva prazdne odstavce <p>&nbsp;</p> z editoru na konci modulu 263.
   Delaly pod perexem 82 px prazdna navic (2 x 25 px vysky a 2 x 16 px margin,
   mereno 31. 8. 2026), takze pas mel nahore 16 px a dole 98 px a nebyl svisle
   vyvazeny. Marek 31. 8.: "neni to hezky vycentrovane zhora a odspodu."
   Do obsahu modulu se nesaha, resi to vrstva. Perex vrstvy ma tridu,
   prazdne odstavce ne, proto se daji zacilit bez :has. */
body.zs26-kalkulacka .pas.m263 .flex-flex-start-top-wrap > div + div > p:not([class]) { display: none; }

/* Svisly vzduch se pocita na jednom miste, na obalu pasu. Vlastni odsazeni
   drobecku nahore a perexu dole se nuluje, jinak by se scitalo a symetrie
   by zavisela na tom, co zrovna legacy sablona nastavi.

   !important je tady nutne, ne lenost. Padding sraz na nulu pravidlo
   `#obsah > .pas.bezlimitu > .main_limit` v novy-2026-obsah.css, ktere nese
   ID, a selektor ze samych trid ID neprebije. Tentyz duvod je zapsany
   u tmavych hlavicek v novy-2026.css. Mereno 31. 8. 2026 pres CSSOM:
   bez !important zustaval padding 0 px a hero melo nahore 0 a dole 16 px. */
body.zs26-kalkulacka .pas.m263 .main_limit {
  padding-block: var(--zs-odstup-sekce-mobil) !important;
}
body.zs26-kalkulacka .pas.m263 .breadcrumbC {
  padding-top: 0 !important;
  padding-bottom: var(--zs-odstup-base) !important;
}

body.zs26-kalkulacka #online_kalk {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Po schovani #sidebaru a #online_kalk uz z bloku nezbyva nic, co by se melo
   kreslit, zbylo by po nem 178 px prazdna (mereno 26. 8. 2026: padding 64 px
   nahore i dole a dve prazdne DIV v #clanek po 25 px). Nemaze se, je v nem
   #system-message-container, ktery Joomla pouziva na hlasky, a hlavne
   #online_kalk, ktery vrstva porad obsluhuje.
   !important je nutne, legacy pravidlo na .main_limit.obsah ma prednost. */
body.zs26-kalkulacka #obsah > .main_limit.obsah {
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

/* Legacy prosaky, ktere musi prebit i tenhle soubor (viz KONTRAKT-noc.md):
   body { text-align: center }, p { padding: 6px }, h1 { padding-top: 2.5em }. */
.zs26-kv { text-align: left; }
/* Reset proti legacy content2024.css (p { padding: 6px }). Nesmi ale trefit
   vlastni tridy vrstvy: .zs26-kv p ma specificitu 0,1,1 a prebijelo to
   napriklad .zs26-kv__linka (0,1,0), ktere tim prislo o odsazeni nad linkou.
   Marek 27. 8.: "tlacitko pokracovat je moc nalepene na lince." */
.zs26-kv p:not([class*="zs26-kv__"]) { padding: 0; }

/* ---------------------------------------------------------------
   2. Perex v hero
   --------------------------------------------------------------- */
.zs26-kv__hero-perex {
  max-width: 34em;
  margin: var(--zs-odstup-md) 0 0;
  padding: 0;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}
/* Spodni vzduch pasu drzi .main_limit, perex si zadny nepridava.
   Legacy prebiji u p margin, proto !important, stejne jako u odstavcu
   uvnitr vrstvy. */
body.zs26-kalkulacka .zs26-kv__hero-perex { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------
   3. Obal vrstvy
   --------------------------------------------------------------- */
.zs26-kv {
  padding: var(--zs-odstup-sekce-mobil) 0;
  background: var(--zs-barva-pozadi-stranka);
}
@media (min-width: 700px) {
  .zs26-kv { padding: var(--zs-odstup-sekce) 0; }
}

/* Ram formulare. Zmizi ve chvili, kdy je vysledek hotovy. */
/* Obrys prisel 31. 8. 2026. Do te doby byl ram jen svetle zelena plocha
   a hned pod nim stoji kremova plocha poradny. Dve barevne plochy pod sebou
   nerekly, ktera z nich se vyplnuje. Marek 31. 8.: "ted jak jsou ty dva bloky
   nad sebou, tak bychom meli zvyraznit, ze jde o formular."
   Obrys je v barve doporucene karty, tedy tomtez signalu "tohle je ta hlavni
   vec", ktery uz web pouziva v ceniku. Stin by to resil taky, ale kontrakt
   ho zakazuje a obrys drzi i v tmavem rezimu prohlizece. */
.zs26-kv__ram {
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-sekce);
  border: 2px solid var(--zs-barva-ramecek-doporucena);
  border-radius: var(--zs-radius-karta);
}
/* Ram drzi plnou sirku .zs-obsah, tedy stejnou levou hranu jako H1 v hero,
   nadpis "Nebo zvazte" i paticka. Vycentrovany ram o sirce 760 px nesedel
   s nicim. Marek 26. 8.: "mame spatne zarovnane komponenty". */
@media (min-width: 700px) {
  .zs26-kv__ram { padding: var(--zs-odstup-2xl); }
}
.zs26-kv--hotovo .zs26-kv__ram { display: none; }

/* ---------------------------------------------------------------
   4. Postup
   --------------------------------------------------------------- */
 /* Ukazatel kroku je druhy signal, ze jde o formular, a jediny prvek, ktery
    rika "tohle ma ctyri kroky". Do 31. 8. byl 12 px tlumene sedy, tedy slabsi
    nez popisek pod nadpisem. Ted nese barvu nadpisu a 14 px. */
.zs26-kv__postup-text {
  margin: 0 0 var(--zs-odstup-sm);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-barva-text-nadpis);
}
.zs26-kv__postup-pruh {
  height: 6px;
  margin-bottom: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-karta);
  border-radius: var(--zs-radius-pill);
  overflow: hidden;
}
.zs26-kv__postup-vypln {
  height: 100%;
  background: var(--zs-barva-akce-primarni);
  border-radius: var(--zs-radius-pill);
  transition: width 0.2s ease-out;
}

/* ---------------------------------------------------------------
   5. Krok
   --------------------------------------------------------------- */
.zs26-kv__nadpis { margin: 0 0 var(--zs-odstup-xs); }
/* .zs-popisek ma 14,5 px, kontrakt chce u cteneho textu nejmene 16 px.
   Selektor musi mit dve tridy, aby prebil .zs26 .zs-popisek z novy-2026.css. */
.zs26-kv .zs26-kv__napoveda {
  margin: 0 0 var(--zs-odstup-xl);
  font-size: 16px;
  line-height: 1.55;
}

.zs26-kv__skupina {
  margin: 0 0 var(--zs-odstup-xl);
  padding: 0;
  border: 0;
}
.zs26-kv__skupina:last-child { margin-bottom: 0; }
.zs26-kv__legenda {
  padding: 0;
  margin-bottom: var(--zs-odstup-md);
  font-size: 16px;
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}

/* JEDNA OSA, ZADNE VYJIMKY.
   Predchozi verze mrizku vysunula o 18 px ven, aby text volby sedl na osu
   nadpisu. Bylo to spatne: ramecky voleb pak nesedely s poli ani s tlacitky
   (mereno 26. 8. 2026: volba L=164, pole L=182, tlacitko R=1258, volba R=1276).
   Ramecek a text v nem nemuzou byt na stejne ose zaroven. Na ose stoji
   RAMECKY, text uvnitr je odsazeny, stejne u dlazdic i u poli. */
.zs26-kv__volby {
  display: grid;
  gap: var(--zs-odstup-md);
}
@media (min-width: 700px) {
  .zs26-kv__volby--2 { grid-template-columns: repeat(2, 1fr); }
  .zs26-kv__volby--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Volba je nativni radio, jen skryty. Klavesnice i odecitac tim funguji
   bez jedineho radku JS, sipky prepinaji skupinu. */
.zs26-kv__volba {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  min-height: 64px;
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-karta);
  border: 2px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-male);
  cursor: pointer;
}
.zs26-kv__volba-telo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.zs26-kv__volba input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Znak, ze se to da zakliknout. Radiove dvojce k .zs-zaskrtavatko
   z css-partials/20-komponenty.css: stejne tokeny, jen kulate.
   KANDIDAT DO DESIGN SYSTEMU, az bude radio potreba i jinde. */
.zs26-kv__znak {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: var(--zs-barva-pozadi-karta);
  border: 2px solid var(--zs-barva-ramecek-pole);
}
.zs26-kv__znak--kolecko { border-radius: var(--zs-radius-pill); }
.zs26-kv__volba:has(input:checked) .zs26-kv__znak {
  background: var(--zs-barva-akce-primarni);
  border-color: var(--zs-barva-akce-primarni);
}
/* Tecka uprostred vybraneho kolecka. Kresli se rameckem, ne pozadim,
   aby fungovala i pri vynucenych barvach prohlizece. */
.zs26-kv__volba:has(input:checked) .zs26-kv__znak--kolecko {
  border-width: 6px;
  border-color: var(--zs-barva-text-na-limetce);
}

.zs26-kv__volba-nazev {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
.zs26-kv__volba-popis {
  font-size: 16px;
  line-height: 1.45;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-kv__volba:hover { border-color: var(--zs-barva-ramecek-pole); }
.zs26-kv__volba:has(input:checked) {
  background: var(--zs-barva-akcent-limetka-plo);
  border-color: var(--zs-barva-akce-primarni);
}
.zs26-kv__volba:has(input:focus-visible) {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   6. Ciselna pole
   --------------------------------------------------------------- */
.zs26-kv__pole-mrizka { display: grid; gap: var(--zs-odstup-base); }
@media (min-width: 700px) {
  .zs26-kv__pole-mrizka { grid-template-columns: repeat(3, 1fr); }
}
.zs26-kv__pole-popisek {
  display: block;
  margin-bottom: var(--zs-odstup-xs);
  font-size: 16px;
  font-weight: 600;
  color: var(--zs-barva-text-nadpis);
}
/* Jednotka je pripona UVNITR ramecku. Kdyz stala za nim, ujidala z pole
   ruzne siroky kus (mereno 26. 8. 2026: let 18 px, cm 26 px, kg 18 px),
   takze tri pole mela sirky 322, 314 a 322 px a posledni koncilo na 1232
   misto na 1258. Uvnitr jsou vsechna tri stejne siroka a posledni sedi na ose.
   .zs-pole ma v novy-2026.css padding s !important, prepis ho proto potrebuje. */
.zs26-kv__pole-radek { position: relative; display: block; }
.zs26-kv .zs26-kv__pole-radek .zs-pole {
  width: 100%;
  padding-right: 52px !important;
}
.zs26-kv__pole-jednotka {
  position: absolute;
  top: 50%;
  right: var(--zs-odstup-base);
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--zs-barva-text-tlumeny);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   7. Zaskrtavatka
   --------------------------------------------------------------- */
.zs26-kv__zaskrtavatka { display: grid; gap: var(--zs-odstup-md); }
@media (min-width: 700px) {
  .zs26-kv__zaskrtavatka { grid-template-columns: repeat(2, 1fr); }
}
/* Stejna dlazdice jako u volby, aby krok 4 nevypadal jako jiny formular.
   Sdilena komponenta .zs-zaskrtavatko se nedefinuje znovu, drzi si svuj
   kresleny ctverecek, jen se okolo prida plocha, ramecek a odsazeni.
   Sdilena komponenta ma 14,5 px, kontrakt chce u cteneho textu min. 16 px. */
.zs26-kv__zaskrtavatko {
  align-items: center;
  gap: var(--zs-odstup-md);
  min-height: 64px;
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-karta);
  border: 2px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-male);
  font-size: 16px;
  line-height: 1.35;
  color: var(--zs-barva-text-zakladni);
}
.zs26-kv__zaskrtavatko:hover { border-color: var(--zs-barva-ramecek-pole); }
.zs26-kv__zaskrtavatko--vybrane {
  background: var(--zs-barva-akcent-limetka-plo);
  border-color: var(--zs-barva-akce-primarni);
}
.zs26-kv__zaskrtavatko:has(input:focus-visible) {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}
/* Ctverecek ze sdilene komponenty ma 20 px a 1,5 px ramecek, kolecko u volby
   22 px a 2 px. Srovnano na stejnou velikost, at kroky 1 az 4 drzi jeden rastr. */
.zs26-kv .zs26-kv__zaskrtavatko input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border-width: 2px !important;
}

/* ---------------------------------------------------------------
   8. Chyba a navigace
   --------------------------------------------------------------- */
.zs26-kv__chyba {
  display: none;
  margin: var(--zs-odstup-base) 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--zs-barva-stav-chyba);
}
.zs26-kv__chyba--vidi { display: block; }

.zs26-kv__navigace {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-md);
  margin-top: var(--zs-odstup-xl);
}
.zs26-kv__navigace .zs26-kv__dal { order: -1; }
@media (min-width: 700px) {
  .zs26-kv__navigace .zs26-kv__dal { order: 0; margin-left: auto; }
}
.zs26-kv__dal[disabled] { opacity: 0.7; cursor: default; }

/* .zs26-kv__linka je od 31. 8. 2026 pryc i s pravidlem. Byl to posledni radek
   v ramu formulare, "Nevite, co vybrat? Zavolejte, poradime. +420 ...", a od
   chvile, kdy pod ramem stoji cely blok poradny, nabizel tentyz telefon
   podruhe 30 px nize. Otazku prevzal nadpis toho bloku. Duvod, proc mela
   dve tridy a !important, zustava zapsany v komentari u p:not() vys: legacy
   content2024.css prebiji u p margin i padding a plati to i na dalsi tridy. */
.zs26-kv__telefon {
  font-weight: 700;
  color: var(--zs-barva-text-odkaz);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   9. Vysledek: doporuceni
   --------------------------------------------------------------- */
.zs26-kv__vysledek:focus { outline: none; }
.zs26-kv__vysledek > * + * { margin-top: var(--zs-odstup-sekce-mobil); }
@media (min-width: 700px) {
  .zs26-kv__vysledek > * + * { margin-top: var(--zs-odstup-sekce); }
}
/* Rozbaleni jsou jedna komponenta o dvou radcich, mezi nimi drzi linka,
   ne mezera. Od okoli je ale oddeluje plna mezera sekce. */
.zs26-kv__vysledek > .zs26-kv__rozbal + .zs26-kv__rozbal { margin-top: 0; }

.zs26-kv__stitek { display: inline-block; margin: 0 0 var(--zs-odstup-md); }

/* Panel doporuceni. Ctyri prvky: nazev, rada, cena, akce. Foto je ikona
   programu, ne paty textovy prvek. */
.zs26-kv__hlavni {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-sekce);
  border: 2px solid var(--zs-barva-akce-primarni);
  border-radius: var(--zs-radius-karta);
}
@media (min-width: 700px) {
  .zs26-kv__hlavni {
    flex-direction: row;
    align-items: center;
    gap: var(--zs-odstup-2xl);
    padding: var(--zs-odstup-2xl);
  }
}
/* Na mobilu je ikona nad textem, 96 px z ni delalo prazdny pas.
   Od 700 px stoji vedle textu, tam muze byt vetsi. */
.zs26-kv__ikona {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
@media (min-width: 700px) {
  .zs26-kv__hlavni > .zs26-kv__ikona { width: 96px; height: 96px; }
}
.zs26-kv__hlavni-telo { flex: 1 1 auto; }
.zs26-kv__hlavni-nazev { margin: 0 0 var(--zs-odstup-xs); }
.zs26-kv__hlavni-rada {
  margin: 0;
  font-size: 17.5px;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-kv__hlavni-akce {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-xs);
  width: 100%;
}
@media (min-width: 700px) {
  .zs26-kv__hlavni-akce {
    align-items: flex-end;
    width: auto;
    text-align: right;
  }
}
.zs26-kv__hlavni-cena { display: block; margin: 0; color: var(--zs-barva-text-nadpis); }
.zs26-kv__hlavni-cena-popis {
  margin: 0 0 var(--zs-odstup-md);
  font-size: 16px;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-kv__hlavni-tlacitko { margin: 0; }
.zs26-kv__hlavni-tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-md);
}
@media (min-width: 700px) {
  .zs26-kv__hlavni-tlacitka { justify-content: flex-end; }
}

.zs26-kv__pod-panelem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-lg);
  margin: var(--zs-odstup-lg) 0 0;
}
.zs26-kv__odkaz {
  font-size: 16px;
  font-weight: 600;
  color: var(--zs-barva-text-odkaz);
}
.zs26-kv .zs26-kv__poznamka {
  margin: var(--zs-odstup-base) 0 0;
  padding: var(--zs-odstup-base) !important;
  background: var(--zs-barva-pozadi-sekce-2);
  border-radius: var(--zs-radius-male);
  font-size: 16px;
  color: var(--zs-barva-text-zakladni);
}

/* ---------------------------------------------------------------
   10. Vysledek: alternativy
   --------------------------------------------------------------- */
.zs26-kv__podtitulek {
  margin: var(--zs-odstup-xs) 0 0;
  font-size: 16px;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-kv__mrizka {
  display: grid;
  gap: var(--zs-odstup-base);
  margin-top: var(--zs-odstup-xl);
}
@media (min-width: 700px) {
  .zs26-kv__mrizka { grid-template-columns: repeat(3, 1fr); }
}
.zs26-kv__karta {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-base);
  padding: var(--zs-odstup-base);
}
.zs26-kv__karta .zs26-kv__ikona { width: 64px; height: 64px; }
.zs26-kv__karta-telo { flex: 1 1 auto; }
.zs26-kv__karta-telo h3 { margin: 0 0 2px; }
.zs26-kv__karta-popis {
  margin: 0 0 var(--zs-odstup-md);
  font-size: 16px;
  line-height: 1.45;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-kv__karta-cena {
  display: block;
  margin: 0 0 var(--zs-odstup-md);
  color: var(--zs-barva-text-nadpis);
}
/* Karty v rade drzi stejnou vysku, tlacitko sedi dole (Markova preference
   z revize 20. 8. 2026: bloky v rade vzdy stejne vysoke). */
.zs26-kv__mrizka { align-items: stretch; }
.zs26-kv__karta { flex-direction: column; height: 100%; }
.zs26-kv__karta-telo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}
.zs26-kv__karta-tlacitka {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zs-odstup-sm);
  margin-top: auto;
  padding-top: var(--zs-odstup-base);
}

/* ---------------------------------------------------------------
   11. Poradna
   --------------------------------------------------------------- */
/* Dve zakladni tridy, jeden vzhled. Uvodni blok pod formularem nesmi nest
   tridu zs26-kv__poradna: QA skript ji hleda bez scope a uvodni blok stoji
   v DOM pred vysledkem, takze by kontroly mirily na nej. Duvod je v komentari
   u poradnaBlok() v zs26-kalkulacka.js. */
.zs26-kv__poradna,
.zs26-kv__uvodni-poradna {
  display: grid;
  gap: var(--zs-odstup-xl);
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-sekce-2);
  border-radius: var(--zs-radius-karta);
}
@media (min-width: 700px) {
  .zs26-kv__poradna,
  .zs26-kv__uvodni-poradna {
    grid-template-columns: 320px 1fr;
    align-items: center;
    padding: var(--zs-odstup-2xl);
  }
}

/* Uvodni poradna stoji pod ramem formulare, ne v nem, proto vlastni odstup.
   Mizi zaroven s ramem: pod vysledkem uz jedna poradna je. */
.zs26-kv__uvodni-poradna { margin-top: var(--zs-odstup-xl); }
.zs26-kv--hotovo .zs26-kv__uvodni-poradna { display: none; }
/* Zdrojova fotka je 800 x 434 a Katerina stoji vpravo od stredu.
   object-position ji drzi v zaberu i pri uzsim orezu. */
.zs26-kv__poradna-foto img {
  display: block;
  width: 100%;
  height: auto;
  /* Na mobilu nizky pas, at se nadpis vejde na prvni obrazovku.
     Ctverec 4:3 by na 390 px zabral 640 z 844 px vysky. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 68% center;
  border-radius: var(--zs-radius-male);
}
@media (min-width: 700px) {
  .zs26-kv__poradna-foto img { aspect-ratio: 4 / 3; }
}
.zs26-kv .zs26-kv__poradna-popisek {
  margin: var(--zs-odstup-sm) 0 0;
  font-size: 16px;
  line-height: 1.5;
}
.zs26-kv__poradna-telo > * { margin-top: var(--zs-odstup-md); }
.zs26-kv__poradna-telo > *:first-child { margin-top: 0; }
.zs26-kv__poradna-echo {
  font-size: 16px;
  font-weight: 600;
  color: var(--zs-barva-text-nadpis);
}
.zs26-kv__poradna-doplnek {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-kv__kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zs-odstup-sm) var(--zs-odstup-base);
}
.zs26-kv__kontakt .zs26-kv__telefon { font-size: 20px; }
.zs26-kv__hodiny { font-size: 16px; color: var(--zs-barva-text-tlumeny); }
.zs26-kv__akce { display: flex; flex-wrap: wrap; gap: var(--zs-odstup-md); }

/* ---------------------------------------------------------------
   12. Rozbaleni: Vase cisla a Jak to pocitame
   --------------------------------------------------------------- */
.zs26-kv__rozbal {
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}
.zs26-kv__rozbal:last-of-type { border-bottom: 1px solid var(--zs-barva-ramecek-karta); }
.zs26-kv__rozbal-titulek {
  padding: var(--zs-odstup-lg) 0;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
  cursor: pointer;
  list-style: none;
}
.zs26-kv__rozbal-titulek::-webkit-details-marker { display: none; }
.zs26-kv__rozbal-titulek::after {
  content: "+";
  float: right;
  font-size: 24px;
  line-height: 1;
  color: var(--zs-barva-ikona-vychozi);
}
.zs26-kv__rozbal[open] > .zs26-kv__rozbal-titulek::after { content: "\2212"; }
.zs26-kv__rozbal-telo {
  padding-bottom: var(--zs-odstup-lg);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}

/* Uzly klonovane z enginu (h5 + p). Texty se neprepisuji, jen se sjednoti
   typografie s vrstvou. */
.zs26-kv__rozbal-telo .lin { margin-bottom: var(--zs-odstup-base); }
.zs26-kv__rozbal-telo h5 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}
.zs26-kv__rozbal-telo p { margin: 0; padding: 0; font-size: 16px; }
.zs26-kv__rozbal-telo .fajfka_zelena { margin-right: var(--zs-odstup-md); }

/* Textove tlacitko ma z novy-2026.css padding 0 4px, ktery ho odsazoval
   od leve hrany o ctyri pixely. Zaporny margin ho vrati na osu. */
.zs26-kv__znovu {
  margin-top: var(--zs-odstup-xl);
  margin-left: calc(var(--zs-odstup-xs) * -1);
}

/* ---------------------------------------------------------------
   13. Nouzovy rezim: engine zmenil tvar odpovedi, ukazujeme legacy vysledek
   --------------------------------------------------------------- */
body.zs26-kalkulacka.zs26-kv-nouze #online_kalk {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
body.zs26-kalkulacka.zs26-kv-nouze #obsah > .main_limit.obsah {
  height: auto !important;
  padding: var(--zs-odstup-xl) 0 !important;
  overflow: visible;
}
/* Legacy formular uz je odeslany a schovany vlastnim JS, ukazuje se jen vysledek. */
body.zs26-kalkulacka.zs26-kv-nouze #ajax_vysledek {
  max-width: var(--zs-sirka-obsah);
  margin: 0 auto;
  text-align: left;
}