/* =============================================================================
   Kontrola SEO — základ a komponenty
   Psané od mobilu nahoru. Postranní panel se nikde nepoužívá.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--pismo);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--kremova);
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--inkoust); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ruzova); }

:focus-visible {
    outline: 3px solid var(--ruzova);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- typografie ------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--pismo-nadpis);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.08;
    margin: 0 0 var(--m4);
    /* Nadpis se nesmí dělit pomlčkou uprostřed slova. Archivo Black je široké
       a na telefonu z toho vycházelo „Goo-glu" a „zkon-troluje". Dlouhé slovo
       radši přeteče na další řádek celé. */
    hyphens: manual;
    overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 7.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 3.4vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--m4); }
p:last-child { margin-bottom: 0; }

.velky-text { font-size: clamp(1.05rem, 2.6vw, 1.25rem); line-height: 1.55; }
.tlumene    { color: var(--text-tlumeny); }
.cislo      { font-family: var(--pismo-cislo); font-variant-numeric: tabular-nums; }
.nadhled {
    font-family: var(--pismo-cislo);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

/* --- rozvržení --------------------------------------------------------- */

.obal      { width: 100%; max-width: var(--obal); margin: 0 auto; padding: 0 var(--m5); }
@media (min-width: 700px) { .obal { padding: 0 var(--m6); } }
.obal-uzky { max-width: var(--obal-uzky); }

.sekce { padding: var(--m7) 0; }
.sekce-tmava { background: var(--tmava); color: var(--text-na-tmave); border-top: var(--ram); border-bottom: var(--ram); }
.sekce-tmava h1, .sekce-tmava h2, .sekce-tmava h3 { color: #fff; }

/* Světlá plocha uvnitř tmavé sekce si musí vzít zpátky tmavý text.
   Bez tohohle dědila bílá karta světlé písmo ze sekce a text v ní
   nebyl vidět: rozbalovací dotazy a tabulka na tmavém podkladu. */
.sekce-tmava :is(.dotaz, .nalez, .tabulka-obsah, .karta, .cisla-polozka,
                 .cenik-karta, .porovnani-karta, .pole, .tabulka-obal) {
    color: var(--text);
}
.sekce-tmava :is(.dotaz, .nalez, .tabulka-obsah, .karta, .cisla-polozka,
                 .cenik-karta, .porovnani-karta) :is(h1, h2, h3, h4) {
    color: var(--inkoust);
}
/* Tlumený text přímo na tmavé ploše musí být tlumený směrem ke světlu,
   ne k černé. Šedá #5b5b57 na #171e19 je nečitelná. */
.sekce-tmava > .obal :is(.napoveda, .tlumene) { color: var(--salvej); }

/* Tmavé karty jsou výjimka: ty na tmavém podkladu zůstávají tmavé. */
.sekce-tmava .karta-tmava, .sekce-tmava .karta-tmava :is(h2, h3, h4) { color: var(--text-na-tmave); }
.sekce-tmava .karta-tmava :is(h2, h3, h4) { color: #fff; }
.sekce-zluta { background: var(--zluta); border-top: var(--ram); border-bottom: var(--ram); }
.sekce-salvej{ background: var(--salvej); border-top: var(--ram); border-bottom: var(--ram); }

.mrizka { display: grid; gap: var(--m4); }
.mrizka-2 { grid-template-columns: 1fr; }
.mrizka-3 { grid-template-columns: 1fr; }
.mrizka-4 { grid-template-columns: 1fr 1fr; }

@media (min-width: 700px) {
    .sekce { padding: var(--m8) 0; }
    .mrizka { gap: var(--m5); }
    .mrizka-2 { grid-template-columns: repeat(2, 1fr); }
    .mrizka-3 { grid-template-columns: repeat(2, 1fr); }
    .mrizka-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
    .mrizka-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- karta ------------------------------------------------------------- */

.karta {
    background: var(--bila);
    border: var(--ram);
    border-radius: var(--r-karta);
    box-shadow: var(--stin-s);
    padding: var(--m5);
}
.karta-vyrazna { box-shadow: var(--stin-l); }
.karta-zluta   { background: var(--zluta); }
.karta-tmava   { background: var(--tmava-plus); color: var(--text-na-tmave); }
.karta-salvej  { background: var(--salvej); }
.karta-tlumena { background: var(--plocha-seda); border: var(--ram-slaby); box-shadow: none; }

/* Karta, na kterou se dá kliknout. Zvedne se, přesně jak popisuje předloha. */
a.karta, .karta-klik { display: block; text-decoration: none; transition: var(--prechod); }
a.karta:hover, .karta-klik:hover { transform: translate(-2px, -2px); box-shadow: var(--stin-m); }

/* --- tlačítko ---------------------------------------------------------- */

.tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m2);
    font-family: var(--pismo);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    padding: 14px 22px;
    min-height: 48px;            /* palec na mobilu */
    border: var(--ram);
    border-radius: var(--r-tlacitko);
    background: var(--ruzova);
    color: var(--inkoust);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--stin-s);
    transition: var(--prechod);
}
.tlacitko:hover  { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--inkoust); }
.tlacitko:active { transform: translate(2px, 2px);  box-shadow: 0 0 0 0 var(--inkoust); }
.tlacitko[disabled], .tlacitko.je-vypnute { opacity: .55; pointer-events: none; }

.tlacitko-tmave  { background: var(--inkoust); color: #fff; }
.tlacitko-bile   { background: var(--bila); }
.tlacitko-zlute  { background: var(--zluta); }
.tlacitko-velke  { font-size: 1.1rem; padding: 18px 28px; min-height: 58px; box-shadow: var(--stin-m); }
.tlacitko-velke:hover { box-shadow: 7px 7px 0 0 var(--inkoust); }
.tlacitko-siroke { width: 100%; }
.tlacitko-tise   { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; }
.tlacitko-tise:hover { transform: none; box-shadow: none; border-color: var(--inkoust); background: var(--bila); }

/* --- štítek ------------------------------------------------------------ */

.stitek {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--pismo);
    font-weight: 700;
    font-size: .78rem;
    line-height: 1;
    padding: 6px 12px;
    border: var(--ram);
    border-radius: var(--r-stitek);
    background: var(--bila);
    white-space: nowrap;
}
.stitek-ok       { background: var(--ok); }
.stitek-drobnost { background: var(--drobnost); }
.stitek-chyba    { background: var(--chyba); }
.stitek-info     { background: var(--info); }
.stitek-stin     { box-shadow: var(--stin-s); }

/* --- formulářová pole --------------------------------------------------- */

.pole {
    width: 100%;
    font-family: var(--pismo);
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 16px;
    min-height: 48px;
    background: var(--bila);
    border: var(--ram);
    border-radius: var(--r-pole);
    color: var(--text);
}
.pole::placeholder { color: #9a968c; }
.pole:focus { outline: none; box-shadow: var(--stin-s); }
textarea.pole { min-height: 120px; resize: vertical; }

.popisek { display: block; font-weight: 700; margin-bottom: var(--m2); }
.napoveda { font-size: .85rem; color: var(--text-tlumeny); margin-top: var(--m2); }
.chyba-pole { color: #b3261e; font-weight: 700; font-size: .9rem; margin-top: var(--m2); }

/* --- hlavička ----------------------------------------------------------- */

.lista {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--zluta);
    border-bottom: var(--ram);
}
.lista-vnitrek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m4);
    /* Značka je vysoká 44 px a k tomu potřebuje vzduch, jinak se dotýká
       spodní linky lišty. Odsazení jen shora a zdola: boční si nese .obal
       a zápisem „padding: … 0" se dřív vynulovalo, takže logo i tlačítko
       nabídky lepily na kraje obrazovky. */
    min-height: 76px;
    padding-block: var(--m2);
}

/* --- značka ---------------------------------------------------------------
   Razítko a název vedle sebe. Název stojí na tmavé destičce, aby to byl
   druhý otisk, ne jen text vedle obrázku. Na tmavé ploše se destička
   obrátí na žlutou, jinak by zmizela. */

.znacka {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; font-weight: 700; color: inherit;
}
.znacka-znak { flex: 0 0 auto; }
.znacka-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.znacka-nazev {
    display: inline-block;
    font-family: var(--pismo-nadpis);
    font-size: 1.5rem; letter-spacing: -.045em; line-height: .98;
    background: var(--inkoust); color: var(--kremova);
    padding: 3px 9px 5px; border-radius: 8px;
}
/* „SEO" verzálkami a žlutě: druhá půlka názvu se má poznat na první pohled,
   ale nesmí se od první oddělit mezerou — je to jedno slovo a jedna doména. */
.znacka-seo { color: var(--zluta); letter-spacing: -.01em; }
.znacka-nazev--tmava { background: var(--zluta); color: var(--inkoust); }
.znacka-nazev--tmava .znacka-seo { color: var(--ruzova); }

/* Motto je černé, ne tlumeně šedé. Šedá #5b5b57 na žluté liště měla
   slabý kontrast a při té velikosti písma se špatně četla. */
.znacka-podnazev {
    font-family: var(--pismo-cislo); font-size: .58rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--inkoust);
}
.paticka .znacka-podnazev, .sekce-tmava .znacka-podnazev { color: var(--salvej); }

@media (min-width: 760px) {
    .znacka-nazev { font-size: 1.75rem; }
    .znacka-podnazev { font-size: .62rem; }
}


.menu { display: none; }
.menu-odkaz {
    font-weight: 700;
    text-decoration: none;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: var(--r-stitek);
}
.menu-odkaz:hover, .menu-odkaz[aria-current="page"] { background: var(--bila); border-color: var(--inkoust); }

.prepinac-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    background: var(--bila); border: var(--ram); border-radius: var(--r-tlacitko);
    box-shadow: var(--stin-s); cursor: pointer;
}
.menu-mobil {
    border-top: var(--ram);
    background: var(--zluta);
    /* Jen shora a zdola. Boční odsazení si nese .obal a zápisem
       „padding: … 0" se vynulovalo, takže položky lepily na kraje.
       Stejná chyba tu byla i u .lista-vnitrek. */
    padding-block: var(--m3) var(--m4);
    display: grid;
    gap: var(--m2);
}
.menu-mobil .menu-odkaz { display: block; background: var(--bila); border-color: var(--inkoust); }
/* Bez tohohle se nabídka na telefonu ukázala rozevřená hned po načtení:
   „display: grid" u třídy přebije výchozí skrytí atributem hidden. */
.menu-mobil[hidden] { display: none; }

/* Vodorovná nabídka se zapíná až tam, kde se opravdu vejde. Na 900 px
   se „Co web brzdí" lámalo na dva řádky a motto pod značkou taky, takže
   hlavička na tabletu vypadala rozsypaně. Do 960 px proto hamburger. */
@media (min-width: 960px) {
    .menu { display: flex; align-items: center; gap: var(--m2); }
    .prepinac-menu, .menu-mobil { display: none !important; }
}

/* --- patička ------------------------------------------------------------ */

.paticka { background: var(--tmava); color: var(--text-na-tmave); border-top: var(--ram); padding: var(--m7) 0 var(--m5); }
.paticka a { color: var(--text-na-tmave); }
/* Nadpisy sloupců v patičce nejsou nadpisy dokumentu, jen popisky. Jako <h4>
   po posledním <h2> obsahu přeskakovaly úroveň osnovy — a přesně tuhle chybu
   tenhle nástroj u cizích webů hlásí. */
.paticka-nadpis { color: #fff; font-weight: 700; font-family: var(--pismo-cislo); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--m3); }
.paticka-mrizka { display: grid; gap: var(--m5); grid-template-columns: 1fr; }
.paticka-odkazy { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m2); }
.paticka-spodek { margin-top: var(--m6); padding-top: var(--m4); border-top: 2px solid var(--tmava-plus); font-size: .86rem; }
/* Patička má čtyři buňky: značka a tři sloupce odkazů. Na úzkém displeji
   pod sebou, od 560 px dva sloupce, od 1000 px teprve všechny čtyři vedle
   sebe. Nacpat čtyři sloupce už od 700 px znamenalo dva odkazy na řádek
   a zalomené popisky. */
@media (min-width: 560px) {
    .paticka-mrizka { grid-template-columns: 1fr 1fr; }
    .paticka-mrizka > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .paticka-mrizka { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
    .paticka-mrizka > :first-child { grid-column: auto; }
}

/* --- drobečky ----------------------------------------------------------- */

.drobecky { display: flex; flex-wrap: wrap; gap: var(--m2); font-size: .85rem; margin-bottom: var(--m4); }
.drobecky a { text-decoration: none; }
.drobecky a:hover { text-decoration: underline; }

/* --- zprávy ------------------------------------------------------------- */

.zprava { border: var(--ram); border-radius: var(--r-karta); padding: var(--m4); box-shadow: var(--stin-s); margin-bottom: var(--m4); font-weight: 700; }
.zprava-ok { background: var(--ok); }
.zprava-chyba { background: var(--chyba); }
.zprava-info { background: var(--info); }

/* --- pomocné ------------------------------------------------------------ */

.skryte-vizualne {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.preskocit {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--bila); border: var(--ram); padding: var(--m3) var(--m4);
}
.preskocit:focus { left: var(--m4); top: var(--m3); }

.stred { text-align: center; }
.svisle { display: grid; gap: var(--m4); }
.vodorovne { display: flex; flex-wrap: wrap; gap: var(--m3); align-items: center; }
.rozestup-nad { margin-top: var(--m5); }
.bez-obtekani { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- hlavní stránka ------------------------------------------------------ */

.hero {
    background: var(--zluta);
    border-bottom: var(--ram);
    padding: var(--m7) 0 var(--m8);
}
/* Hero stojí na střed a nadpis jde přes celou mřížku. Dřív ho zprava držel
   formulář: ten měl vlastní šířku a nadpis se k ní srovnával, takže uprostřed
   stránky stálo úzké sloupečkové písmo. Teď má šířku nadpis a formulář se
   srovnává k němu. */
.hero-vnitrek { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { margin: var(--m4) 0 var(--m5); max-width: none; width: 100%; }
.hero-podnadpis { max-width: 62ch; margin-left: auto; margin-right: auto; }
.formular-kontroly { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; }
.hero-chyba { max-width: 62ch; margin-left: auto; margin-right: auto; }
.hero-chyba { margin-top: var(--m5); }
.hero-napoveda { margin-top: var(--m3); }

/* Slovo vyvedené obrysem, jak popisuje předloha webu. */
.obrys {
    -webkit-text-stroke: 2px var(--inkoust);
    color: transparent;
}

.formular-kontroly { margin-top: var(--m6); }
.formular-radek { display: grid; gap: var(--m3); }
.pole-url {
    font-size: 1.15rem;
    padding: 18px 18px;
    min-height: 58px;
    box-shadow: var(--stin-s);
}
@media (min-width: 760px) {
    .formular-radek { grid-template-columns: 1fr auto; gap: var(--m4); }
    .hero h1 { font-size: 3.4rem; }
}

.ikona-box {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border: var(--ram); border-radius: var(--r-tlacitko);
    color: var(--inkoust);
    margin-bottom: var(--m4);
}

/* --- prvky hlavní stránky a obsahových stránek --------------------------- */

.odrazky { list-style: none; margin: var(--m4) 0 0; padding: 0; display: grid; gap: var(--m3); }
.odrazky li { position: relative; padding-left: 28px; line-height: 1.5; }
.odrazky li::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 13px; height: 13px; border-radius: 3px;
    background: var(--bila); border: 2px solid var(--inkoust);
}

/* Počet kontrol patří k nadpisu oblasti, ne pod něj. Proto je to štítek
   na stejném řádku, který se na úzké obrazovce zalomí sám. */
.pocet-kontrol {
    display: inline-block; vertical-align: middle;
    margin-left: var(--m2);
    font-family: var(--pismo-cislo); font-size: .62rem; letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 9px; border-radius: var(--r-stitek);
    background: rgba(255,255,255,.12); color: inherit;
    border: 1px solid rgba(255,255,255,.28);
}

/* Kroky. Čísla jsou tu proto, že to opravdu je posloupnost. */
.kroky-seznam { list-style: none; counter-reset: krok; margin: var(--m5) 0 0; padding: 0; display: grid; gap: var(--m5); }
.kroky-seznam > li { position: relative; padding-left: 62px; }
.kroky-seznam > li::before {
    counter-increment: krok; content: counter(krok);
    position: absolute; left: 0; top: 0;
    width: 42px; height: 42px; display: grid; place-items: center;
    font-family: var(--pismo-nadpis); font-size: 1.15rem;
    background: var(--zluta); border: var(--ram); border-radius: var(--r-tlacitko);
    box-shadow: 3px 3px 0 0 var(--inkoust);
}
.kroky-seznam h3 { margin: 0 0 var(--m2); font-size: 1.1rem; }
.kroky-seznam p { margin: 0; }
.kroky-seznam code {
    font-family: var(--pismo-cislo); font-size: .9em;
    background: var(--plocha-seda); border: 1px solid #ddd8cc;
    border-radius: 4px; padding: 1px 6px;
}

/* Rozbalovací dotaz. Používá ho hlavní stránka i blok „Časté dotazy"
   z administrace, proto tu obě jména stojí vedle sebe. */
.dotaz, .nalez {
    border: var(--ram); border-radius: var(--r-tlacitko);
    background: var(--bila);
    margin-bottom: var(--m3);
    box-shadow: 3px 3px 0 0 var(--inkoust);
}
.dotaz > summary, .nalez > summary {
    cursor: pointer; list-style: none;
    padding: var(--m4) 48px var(--m4) var(--m4);
    font-weight: 700; position: relative;
}
.dotaz > summary::-webkit-details-marker,
.nalez > summary::-webkit-details-marker { display: none; }
.dotaz > summary::after, .nalez > summary::after {
    content: "+"; position: absolute; right: var(--m4); top: 50%;
    transform: translateY(-50%);
    font-family: var(--pismo-nadpis); font-size: 1.3rem; line-height: 1;
}
.dotaz[open] > summary::after, .nalez[open] > summary::after { content: "−"; }
.dotaz[open] > summary, .nalez[open] > summary { border-bottom: 2px solid var(--inkoust); }
.dotaz > summary:focus-visible, .nalez > summary:focus-visible { outline: 3px solid var(--ruzova); outline-offset: 2px; }
.dotaz-telo, .nalez-telo { padding: var(--m4); }
.dotaz-telo p:last-child, .nalez-telo p:last-child { margin-bottom: 0; }

/* --- text článku --------------------------------------------------------- */

.text-obsah { max-width: 68ch; }
.text-obsah > :first-child { margin-top: 0; }
.text-obsah p { margin: 0 0 1.1em; line-height: 1.7; }
.text-obsah h2 { margin: 1.8em 0 .6em; }
.text-obsah h3 { margin: 1.5em 0 .5em; font-size: 1.15rem; }
.text-obsah ul, .text-obsah ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.text-obsah li { margin-bottom: .45em; line-height: 1.65; }
.text-obsah a { color: var(--inkoust); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.text-obsah a:hover { background: var(--zluta); }
.text-obsah blockquote {
    margin: 0 0 1.1em; padding: var(--m3) var(--m4);
    background: var(--plocha-seda);
    border-left: 4px solid var(--zluta);
    font-size: 1.05rem;
}
.text-obsah blockquote p:last-child { margin-bottom: 0; }
.text-obsah code {
    font-family: var(--pismo-cislo); font-size: .9em;
    background: var(--plocha-seda); border: 1px solid #ddd8cc;
    border-radius: 4px; padding: 1px 6px;
}

/* --- rada uprostřed článku ------------------------------------------------ */

/* Sedí to mezi odstavci, takže shora i zdola je jen mezera, ne celá sekce.
   Vizuálně se to musí lišit od výzvy na konci: žádné tlačítko, žádná žlutá
   plocha přes celou šířku, jen odsazený blok s pruhem u kraje. */
.sekce-rada { padding-top: 0; padding-bottom: 0; }
.sekce-rada + .sekce { padding-top: var(--m6); }

.rada {
    display: grid; gap: var(--m4);
    margin: var(--m6) 0;
    padding: var(--m5);
    background: var(--plocha-seda);
    border: var(--ram);
    border-left-width: 6px;
    border-radius: var(--r-karta);
}
.rada-foto {
    width: 56px; height: 56px; border-radius: 50%;
    border: 2px solid var(--inkoust); object-fit: cover; background: var(--bila);
}
.rada-uvozeni {
    margin: 0 0 var(--m2);
    font-family: var(--pismo-cislo); font-size: .78rem;
    letter-spacing: .08em; text-transform: uppercase;
}
.rada-uvozeni cite { font-style: normal; font-weight: 700; }
.rada-text { margin: 0; line-height: 1.7; }

@media (min-width: 620px) { .rada { grid-template-columns: 56px 1fr; align-items: start; } }

/* Na tmavé sekci by šedý podklad zmizel. */
.sekce-tmava .rada { background: var(--tmava-plus); color: var(--text-na-tmave); }

/* --- autor pod článkem ---------------------------------------------------- */

.autor { display: grid; gap: var(--m5); align-items: start; }
.autor-foto {
    width: 96px; height: 96px; border-radius: 50%;
    border: var(--ram); box-shadow: var(--stin-s);
    object-fit: cover; background: var(--bila);
}
.autor-jmeno { font-size: 1.35rem; margin: var(--m1) 0 var(--m3); }
.autor p { margin-bottom: var(--m3); }
.autor-odkazy { font-weight: 600; margin-bottom: 0; }
.autor-odkazy a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.autor-odkazy a:hover { background: var(--zluta); }

@media (min-width: 620px) { .autor { grid-template-columns: 96px 1fr; } }

/* --- mapa webu ------------------------------------------------------------ */

/* Seznam, ne karty. Sto karet je stěna, sto řádků se dá projet očima.
   Dva sloupce od tabletu, tři od desktopu, ať se to vejde na obrazovku. */
.mapa-seznam { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: var(--m7); }
.mapa-seznam li {
    break-inside: avoid;
    margin-bottom: var(--m4);
    padding-bottom: var(--m3);
    border-bottom: 1px dashed #d8d3c7;
}
.mapa-seznam a { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mapa-seznam a:hover { background: var(--zluta); }
.mapa-popis { display: block; font-size: .88rem; color: var(--text-tlumeny); margin-top: 2px; }
.sekce-salvej .mapa-seznam li { border-bottom-color: rgba(17,17,17,.18); }

@media (min-width: 700px)  { .mapa-seznam { columns: 2; } }
@media (min-width: 1060px) { .mapa-seznam { columns: 3; } }

/* --- stránkování výpisu -------------------------------------------------- */

.strankovani {
    display: flex; flex-wrap: wrap; gap: var(--m4);
    align-items: center; justify-content: center;
}
.strankovani-stav {
    font-family: var(--pismo-cislo); font-size: .85rem;
    color: var(--text-tlumeny); letter-spacing: .04em;
}

/* --- obrázek v obsahu ---------------------------------------------------- */

/* Obrázek stojí na ploše stejně jako karta: rámeček a tvrdý stín. Bez toho
   plave uprostřed textu a vypadá jako omylem vložený soubor. */
.obrazek { margin: 0; }
.obrazek img {
    width: 100%;
    border: var(--ram);
    border-radius: var(--r-karta);
    box-shadow: var(--stin-m);
    background: var(--bila);
}
.obrazek figcaption {
    margin-top: var(--m4);
    font-size: .9rem;
    color: var(--text-tlumeny);
    max-width: 62ch;
}
.sekce-tmava .obrazek figcaption { color: var(--salvej); }

/* Sekce s obrázkem sedí těsněji k textu nad ním: patří k němu, není to
   samostatná kapitola. */
.sekce-obrazek { padding-top: 0; }
.sekce-obrazek + .sekce { padding-top: var(--m6); }

/* Obrázek se vejde do displeje, ať je jakkoliv úzký. Dřív se na telefonu
   nezmenšoval a jezdil do strany, aby zůstaly čitelné popisky v grafu.
   Jenže návštěvník nemá jak poznat, že obrázek pokračuje mimo obrazovku,
   a rolování do strany uvnitř stránky se plete se švihnutím zpět.
   Kresby jsou vektorové, takže i zmenšené zůstanou ostré; kdo potřebuje
   detail, přiblíží si je prsty. */

/* --- ceník --------------------------------------------------------------- */

.cenik { display: grid; gap: var(--m5); align-items: start; }

/* Počet sloupců se řídí počtem variant, ne tím, kolik se jich zrovna vejde.
   S auto-fit vycházely čtyři varianty jako tři a jedna pod nimi — poslední
   karta stála sama a vypadalo to jako chyba sazby. Dvě řady po dvou drží
   ceník pohromadě a karty zůstanou dost široké na to, aby se cena nezalomila. */
@media (min-width: 780px) {
    .cenik { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .cenik--2, .cenik--4 { grid-template-columns: repeat(2, 1fr); }
    /* Tři varianty na 780 px ještě nemají na tři sloupce, dvě a jedna
       je zase ta osamělá karta. Do tisíce pixelů proto pod sebou. */
    .cenik--3 { grid-template-columns: 1fr; }
}
@media (min-width: 1000px) {
    .cenik--3 { grid-template-columns: repeat(3, 1fr); }
}

.cenik-karta {
    background: var(--bila);
    border: var(--ram);
    border-radius: var(--r-karta);
    box-shadow: var(--stin-s);
    padding: var(--m5);
}
.cenik-karta--vyrazna { background: var(--zluta); box-shadow: var(--stin-m); }
.cenik-karta h3 { margin: 0 0 var(--m3); font-size: 1.25rem; }
.cenik-cena {
    font-family: var(--pismo-nadpis); font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    line-height: 1.05; margin: 0 0 var(--m2);
}
.cenik-komu { font-size: .92rem; color: var(--text-tlumeny); margin: 0 0 var(--m4); }
.cenik-karta--vyrazna .cenik-komu { color: #6b6248; }
.cenik-karta .odrazky li::before { background: var(--zluta); }
.cenik-karta--vyrazna .odrazky li::before { background: var(--bila); }

/* --- porovnání dvou stran ------------------------------------------------ */

.porovnani { display: grid; gap: var(--m5); }
@media (min-width: 820px) { .porovnani { grid-template-columns: 1fr 1fr; align-items: start; } }

.porovnani-karta { border-radius: var(--r-karta); padding: var(--m5); }
.porovnani-karta h3 { margin: 0 0 var(--m4); font-size: 1.2rem; }
.porovnani-karta--proti { background: var(--plocha-seda); border: var(--ram-slaby); }
.porovnani-karta--pro   { background: var(--zluta); border: var(--ram); box-shadow: var(--stin-m); }

/* Odrážky, které nesou význam: křížek u toho, co nefunguje, fajfka u toho,
   co má být. Kdyby to byly obyčejné tečky, museli bychom to dopsat slovy. */
.znaky { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m3); }
.znaky li { position: relative; padding-left: 32px; line-height: 1.55; }
.znaky li::before {
    position: absolute; left: 0; top: 1px;
    width: 21px; height: 21px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: .82rem; line-height: 1;
    border: 2px solid var(--inkoust);
}
.znaky--ne li::before  { content: "×"; background: var(--chyba); }
.znaky--ano li::before { content: "✓"; background: var(--ok); }

/* --- velká čísla --------------------------------------------------------- */

.cisla { display: grid; gap: var(--m4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cisla-polozka {
    background: var(--bila); border: var(--ram); border-radius: var(--r-karta);
    box-shadow: var(--stin-s); padding: var(--m4) var(--m5);
}
.cisla-hodnota {
    font-family: var(--pismo-nadpis); font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1; margin: 0 0 var(--m2);
}
.cisla-popisek { font-weight: 700; margin: 0; font-size: .95rem; }
.cisla-detail { font-size: .85rem; color: var(--text-tlumeny); margin: var(--m2) 0 0; }

/* --- karty s hlavním údajem ---------------------------------------------- */

.karta-udaj .karta-hodnota {
    font-family: var(--pismo-nadpis); font-size: clamp(1.15rem, 3vw, 1.5rem);
    line-height: 1.15; margin: 0 0 var(--m3); overflow-wrap: anywhere;
}
.karta-udaj .karta-hodnota a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.karta-udaj .karta-hodnota a:hover { background: var(--zluta); }
.karta-udaj .karta-text { font-size: .92rem; margin: 0; color: var(--text-tlumeny); }

/* --- tabulka v obsahu ---------------------------------------------------- */

.tabulka-obsah { width: 100%; border-collapse: collapse; background: var(--bila); }
.tabulka-obsah th, .tabulka-obsah td {
    text-align: left; padding: var(--m3) var(--m4);
    border-bottom: 2px solid var(--inkoust); vertical-align: top;
}
.tabulka-obsah thead th {
    background: var(--zluta);
    font-family: var(--pismo-cislo); font-size: .72rem;
    letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 2px solid var(--inkoust);
}
.tabulka-obsah tbody tr:last-child td { border-bottom: none; }
.tabulka-obsah td:first-child { font-weight: 700; }

/* Na telefonu se z každého řádku stane karta. Vodorovné posouvání tabulky
   je na mobilu horší než přeskládání: nikdo netuší, že vpravo něco je. */
@media (max-width: 700px) {
    .tabulka-obsah, .tabulka-obsah tbody, .tabulka-obsah tr, .tabulka-obsah td { display: block; width: 100%; }
    .tabulka-obsah thead { display: none; }
    .tabulka-obsah tr {
        border: var(--ram); border-radius: var(--r-tlacitko);
        box-shadow: var(--stin-s); margin-bottom: var(--m4); padding: var(--m2) 0;
    }
    .tabulka-obsah td { border-bottom: none; padding: var(--m2) var(--m4); }
    .tabulka-obsah td[data-popisek]:not([data-popisek=""])::before {
        content: attr(data-popisek);
        display: block; font-family: var(--pismo-cislo); font-size: .66rem;
        letter-spacing: .08em; text-transform: uppercase; color: var(--text-tlumeny);
        margin-bottom: 2px;
    }
}

/* --- časová osa ---------------------------------------------------------- */

.osa { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.osa > li { position: relative; padding: 0 0 var(--m5) 34px; }
.osa > li:last-child { padding-bottom: 0; }
/* Svislice spojuje body. U posledního bodu končí, aby osa nevisela do prázdna. */
.osa > li::after {
    content: ""; position: absolute; left: 8px; top: 20px; bottom: 0;
    width: 2px; background: #3c4740;
}
.osa > li:last-child::after { display: none; }
.osa > li::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--zluta); border: 2px solid var(--inkoust);
}
.osa-kdy {
    display: block; font-family: var(--pismo-cislo); font-size: .74rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--salvej);
    margin-bottom: var(--m2);
}
.osa-co { margin: 0; max-width: 62ch; }

.clanek-udaje {
    display: flex; flex-wrap: wrap; gap: var(--m3); align-items: baseline;
    font-family: var(--pismo-cislo); font-size: .8rem;
    margin: var(--m5) 0 0;
}

/* --- rozbalovací část nabídky -------------------------------------------- */

.menu-skupina { position: relative; }
.menu-rozbal {
    font: inherit; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
}
.menu-rozbal svg { transition: transform .12s ease; flex: 0 0 auto; }
.menu-rozbal[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-rozbal[aria-expanded="true"] { background: var(--bila); border-color: var(--inkoust); }

.podnabidka {
    position: absolute; top: calc(100% + 10px); left: 0;
    /* Široké dost na to, aby se nejdelší název služby vešel na jeden řádek. */
    min-width: 300px; z-index: 60;
    background: var(--bila);
    border: var(--ram); border-radius: var(--r-tlacitko);
    box-shadow: var(--stin-m);
    padding: var(--m2);
    display: grid; gap: 2px;
}
.podnabidka[hidden] { display: none; }
/* Neviditelný můstek přes mezeru mezi tlačítkem a seznamem. Bez něj kurzor
   při cestě dolů na chvíli nebyl ani na jednom a nabídka se zavřela. */
.podnabidka::before {
    content: ''; position: absolute;
    left: 0; right: 0; top: -12px; height: 12px;
}
.podnabidka a {
    display: block; padding: 10px 12px;
    text-decoration: none; font-weight: 600; color: var(--inkoust);
    border-radius: 6px;
}
.podnabidka a:hover, .podnabidka a:focus-visible { background: var(--zluta); }

/* Na telefonu se podpoložky jen odsadí. Rozbalovat něco, co už je rozbalené
   v otevřené nabídce, by byl jeden klik navíc pro nic. */
.menu-odkaz-dite { margin-left: var(--m5); font-weight: 600; }

/* Rozbalovací skupina v nabídce na telefonu.
   Tlačítko musí mít display: flex výslovně tady: pravidlo
   „.menu-mobil .menu-odkaz { display: block }" je specifičtější než
   „.menu-rozbal { display: inline-flex }", takže se šipka zalamovala
   pod text na vlastní řádek. */
.menu-mobil .menu-rozbal {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
    background: var(--bila); border-color: var(--inkoust);
}
.podnabidka-mobil { display: grid; gap: var(--m2); margin: var(--m2) 0 0; }
.podnabidka-mobil[hidden] { display: none; }

/* --- poptávkový formulář -------------------------------------------------- */

.poptavka-karta {
    background: var(--tmava);
    background-image: radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    border: var(--ram); border-radius: var(--r-karta);
    box-shadow: var(--stin-m);
    color: var(--bila);
    padding: var(--m6);
}
.poptavka-karta h2 { color: #fff; margin: 0 0 var(--m3); }
.poptavka-uvod { color: #e8ebe9; max-width: 54ch; margin: 0 0 var(--m5); }
.poptavka-karta .popisek { color: #fff; font-size: .95rem; }
/* Pole jsou bílá: jediná světlá plocha na tmavé kartě, takže je bez
   vysvětlování jasné, kam se píše. */
.poptavka-karta .pole { background: var(--bila); color: var(--inkoust); border-color: var(--inkoust); margin-bottom: var(--m4); }
.poptavka-karta .pole::placeholder { color: #8b877d; }
.poptavka-karta .pole:focus { box-shadow: 0 0 0 3px var(--zluta); }
.poptavka-karta .tlacitko { background: var(--zluta); box-shadow: 4px 4px 0 0 rgba(0,0,0,.55); }
.poptavka-karta .tlacitko:hover { box-shadow: 5px 5px 0 0 rgba(0,0,0,.55); }
.poptavka-karta .zprava { color: var(--inkoust); }

.poptavka-radek { display: grid; gap: var(--m4); }
@media (min-width: 640px) { .poptavka-radek { grid-template-columns: 1fr 1fr; } }

.poptavka-pata { font-size: .82rem; line-height: 1.5; color: #b8beb9; margin: var(--m4) 0 0; }
.poptavka-pata a { color: var(--zluta); }