/* Kontrola webu – jen to, co web nemá. Kategorie jedou na .price-compare,
   nálezy na .faq-list, formulář na .form-group. Vše přes tokeny.
   Komponenty price-compare/faq-list/steps/contact-form jsou z BleskovýchWeb,
   ale naše hlavička je sticky (ne fixed) a má vlastní paddingy — proto tu
   není BW kompenzace .kz-stranka{padding-top} ani .kz-body .nav (smazáno). */

.kz-form { max-width: 620px; margin: 0 auto; }
.kz-radek { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.kz-radek input { flex: 1 1 16rem; }
/* Jakmile se tlačítko zalomí pod pole, patří doprostřed.
   POZOR: ve flex-direction:column je flex-basis VÝŠKA — proto tu pole nesmí
   zůstat na flex:1 1 16rem, jinak naroste na 16rem a pod ním zůstane prázdno. */
@media (max-width: 560px) {
  .kz-radek { flex-direction: column; align-items: center; }
  .kz-radek input { flex: 0 0 auto; width: 100%; }
  .kz-radek .tlacitko { width: auto; }
}
.kz-stav { min-height: 1.5em; margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-muted); text-align: center; }
.kz-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── skóre ── */
.kz-skore-blok { text-align: center; margin-bottom: var(--space-6); }
.kz-znamka {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: var(--font-heading); font-size: var(--text-2xl); line-height: var(--leading-tight);
}
.kz-znamka small { font-size: var(--text-lg); color: var(--text-muted); font-family: var(--font-body); }
.kz-skore-web { display: block; font-size: var(--text-sm); color: var(--text-muted); word-break: break-word; margin-top: var(--space-1); }
.kz-dobre { color: var(--accent); }
.kz-stredni { color: var(--c3); }
/* Bez červené v paletě: špatné skóre se pozná podle tučného textu a okraje
   (viz .kz-pismeno níž), ne podle barvy. */
.kz-spatne { color: var(--text); font-weight: 700; }

/* ── kategorie v řádcích ceníkového srovnání ── */
.kz-kategorie .compare-value { display: flex; align-items: center; gap: var(--space-2); }
.kz-pruh { display: block; width: 84px; height: .4rem; background: var(--bg-section-alt); border-radius: var(--radius-lg); overflow: hidden; }
.kz-pruh-vypln { display: block; height: 100%; background: currentColor; border-radius: var(--radius-lg); }
.kz-procenta { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* ── souhlas ── */
/* souhlas jede na .gdpr-label z webu; jen zarovnání na víc řádků */
.kz-pdf .gdpr-label { align-items: flex-start; text-align: left; }
.kz-pdf .gdpr-label input[type="checkbox"] { margin-top: .15rem; }

.kz-mimo { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading); text-align: center; max-width: 62ch; margin-inline: auto; }

@media (max-width: 480px) {
  .kz-pruh { width: 56px; }
}

/* Slova se nelámou přes řádky – web dělení nikde nepoužívá */
.kz-stranka, .kz-stranka p, .kz-stranka li,
.kz-stranka .compare-label, .kz-stranka .compare-value,
.kz-stranka .faq-question, .kz-stranka .faq-answer {
  hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
}
/* jediná výjimka: dlouhá adresa kontrolovaného webu se zalomit musí */
.kz-skore-web { overflow-wrap: anywhere; }

/* tlumený řádek sráží hodnotu do šedé – barva podle skóre ji musí přebít */
.compare-others .compare-value.kz-dobre { color: var(--accent); }
.compare-others .compare-value.kz-stredni { color: var(--c3); }
.compare-others .compare-value.kz-spatne { color: var(--text); font-weight: 700; }

/* Hláška o chybě musí být vidět, ne šedý drobnopis */
.kz-stav.kz-chyba { color: var(--text); font-size: var(--text-base); font-weight: 600; }

/* Výsledek potřebuje vzduch — jinak skóre, nálezy a poptávka splývají */
#kzVysledek > * + * { margin-top: var(--space-7); }
.kz-kategorie { margin-bottom: 0; }

/* Výzva a PDF vedle sebe. Sloupce musí začínat i končit na stejné lince,
   proto obě poloviny sdílejí stejné odsazení, zarovnání i předěl nahoře. */
.kz-dvojice { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 860px) {
  .kz-dvojice { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}
.kz-dvojice > * { margin-top: 0; display: flex; flex-direction: column; }
.kz-dvojice > *::before {
  content: ""; display: block; height: 4px; border-radius: 2px;
  margin-bottom: var(--space-6);
  background: linear-gradient(90deg, var(--c1), var(--c3) 50%, var(--accent));
  opacity: .6;
}
/* v úzkém sloupci se velký nadpis lámal uprostřed vazby */
.kz-dvojice h3 {
  font-size: var(--text-lg); margin-bottom: var(--space-2);
  text-align: left; text-wrap: balance;
}
.kz-dvojice .perex {
  margin: 0 0 var(--space-4); text-align: left; font-size: var(--text-base);
}
.kz-vyzva .tlacitka { margin-top: var(--space-2); justify-content: flex-start; }
.kz-pdf { border-top: 0; padding-top: 0; max-width: none; }
.kz-pdf .form-group { margin-bottom: var(--space-2); }
.kz-pdf .gdpr-label span { font-size: var(--text-sm); }
.kz-pdf button[type="submit"] { align-self: flex-start; }

/* Poslední nález a poznámka pod ním se lepily na sebe */
#jak-pocitame .faq-list { margin-bottom: var(--space-7); }
.kz-mimo { margin-top: var(--space-6); }

/* Tabulky na mobilu: style.css skládá řádky pod sebe a zarovnává doleva,
   na kontrole je chceme na střed */
@media (max-width: 680px) {
  .kz-stranka .price-compare .compare-row { align-items: center; text-align: center; }
  .kz-stranka .price-compare .compare-value { text-align: center; }
  .kz-stranka .kz-kategorie .compare-value { justify-content: center; }
}

/* „A–F" a „e-mail" se nesmí rozdělit na konci řádku */
.kz-nobr { white-space: nowrap; }

/* Sloupce proti sobě: texty jsou stejně dlouhé, odstavec vyplní volné místo,
   takže akce v obou sloupcích končí na stejné lince. Tlačítka přes celou šířku
   sloupce, aby neměla každé jinou velikost. */
.kz-dvojice { align-items: stretch; }
.kz-dvojice .perex { flex: 1 0 auto; }
.kz-dvojice h3 { text-wrap: pretty; }
.kz-vyzva .tlacitka { flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.kz-dvojice .tlacitko { width: 100%; justify-content: center; }
.kz-pdf button[type="submit"] { align-self: stretch; }

/* Skóre: číslo a „/100" nerozdělitelně, známka jako výrazný štítek vedle */
.kz-znamka { flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4); }
.kz-cislo { white-space: nowrap; }
.kz-pismeno {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4em; padding: .1em .45em; font-size: .7em; line-height: 1.2;
  border: 3px solid currentColor; border-radius: var(--radius);
}

/* Výzva a PDF na počítači: společné řádky přes subgrid, aby tlačítka obou
   sloupců byla na stejné úrovni. Řádky: 1 předěl (::before), 2 nadpis,
   3 text, 4 e-mail, 5 souhlas, 6 tlačítka, 7 hláška. Levý sloupec řádky 4–5
   nemá, jeho tlačítka jdou rovnou do řádku 6. */
@media (min-width: 860px) {
  .kz-dvojice { align-items: stretch; row-gap: 0; }
  .kz-dvojice > * { display: grid; grid-template-rows: subgrid; grid-row: span 7; align-content: start; }
  .kz-dvojice > *::before { grid-row: 1; }
  .kz-dvojice h3 { grid-row: 2; }
  .kz-dvojice .perex { grid-row: 3; flex: none; }
  .kz-pdf .form-group:not(.form-gdpr) { grid-row: 4; }
  .kz-pdf .form-gdpr { grid-row: 5; }
  .kz-pdf button[type="submit"] { grid-row: 6; }
  .kz-pdf .kz-stav { grid-row: 7; }
  .kz-vyzva .tlacitka {
    grid-row: 6; align-self: end; flex-direction: row; flex-wrap: nowrap;
    gap: var(--space-2); margin-top: 0;
  }
  /* všechna tři tlačítka stejně vysoká a stejně velká písmem */
  .kz-dvojice .tlacitko { width: auto; flex: 1 1 0; min-height: 48px; padding: .75rem 1rem; font-size: var(--text-base); }
  .kz-pdf button[type="submit"] { width: 100%; align-self: end; }
}

/* Levá dvě tlačítka se vedle sebe nevešla („Chci se / poradit") — pod sebou
   přes celou šířku sloupce, spodní lícuje s „Poslat mi rozbor" (řádek 6). */
@media (min-width: 860px) {
  .kz-vyzva .tlacitka { grid-row: 5 / span 2; flex-direction: column; align-self: end; }
  .kz-vyzva .tlacitka .tlacitko { flex: none; width: 100%; }
}

/* Na počítači jedna čára přes oba sloupce místo dvou krátkých. Řádek 1
   subgridu (dřív ::before sloupců) tím zůstane prázdný s nulovou výškou. */
@media (min-width: 860px) {
  .kz-dvojice > *::before { display: none; }
  .kz-dvojice::before {
    content: ""; grid-column: 1 / -1; height: 4px; border-radius: 2px;
    margin-bottom: var(--space-6);
    background: linear-gradient(90deg, var(--c1), var(--c3) 50%, var(--accent)); opacity: .6;
  }
}

/* ── Komponenty z BleskovýchWeb, které naše zaklad.css zatím nemá ──
   V naší stylizaci (karty, tokeny), ne kopie BW barev. */
.form-group { margin-bottom: var(--space-4); }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; color: var(--text); font-size: max(var(--text-base), 16px);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { border-color: var(--accent); outline: none; }
.form-gdpr { display: flex; align-items: flex-start; }
.gdpr-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.gdpr-link { color: var(--accent-text); }

.price-compare { max-width: 600px; margin: 0 auto var(--space-7); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.compare-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); font-size: var(--text-sm); }
.compare-row + .compare-row { border-top: 1px solid var(--border); }
.compare-others { background: var(--bg-card); }
.compare-others .compare-value { color: var(--text-muted); }
.compare-label { display: flex; align-items: center; gap: var(--space-2); }
.compare-value { text-align: right; }

.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-item[open] { border-color: var(--accent); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); font-weight: 600; font-size: var(--text-base); cursor: pointer; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: '+'; font-size: var(--text-lg); color: var(--accent-text); flex-shrink: 0; margin-left: var(--space-4); }
.faq-item[open] .faq-question::after { content: '\2212'; }
.faq-answer { padding: 0 var(--space-6) var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.faq-answer p { max-width: none; }

.steps { max-width: 650px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }
.step { display: flex; gap: var(--space-6); align-items: flex-start; }
.step-number {
  flex-shrink: 0; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); background: var(--accent); color: var(--text-on-accent);
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
}
.step > div:last-child h3 { margin-bottom: var(--space-1); }