/* ══════════════════════════════════════════════════════════════════════════
   /cenik — styly JEN pro ceník. Načítá se přes $extra_css, takže žádnou jinou
   stránku to nestojí ani jeden požadavek navíc.

   ⚠️ Do base.css tohle NEPATŘÍ: jsou to prvky, které nikde jinde nejsou
   (časová osa placení, srovnání s DPH, tabulka rozdílů mezi balíčky).
   Do sdíleného stylopisu patří až věc, kterou použije druhá stránka.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css. Žádný nový odstín.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hlavička ceníku ──────────────────────────────────────────────────────
   Vlevo odpověď slovy, vpravo karta s čísly. Do 29. 8. 2026 to byl jeden
   pětiřádkový odstavec přes celou šířku a čísla se v něm musela hledat.
   ⚠️ Je to modifikátor sdíleného `.page-hero`, ne nový hero. Základní styl
   (pozadí, linka, velikost nadpisu) zůstává v base.css a platí i tady. */
/* ⚠️ Bez linky pod hlavičkou (Alexandr 29. 8. 2026: „also the gray line under
   hero section"). Sdílený `.page-hero` v base.css ji má a na ostatních
   stránkách zůstává — tady ji ruší jen tenhle modifikátor. Oddělení hero od
   obsahu obstará barevný předěl: sekce pod ním je bílá (`.bg-surface`), hero
   má béžový přechod, takže hrana je vidět i bez čáry.
   Horní odsazení je větší, protože nad hlavičkou už není lišta ani drobečky. */
.cenik-hero{padding-bottom:44px;padding-top:56px;border-bottom:0}
@media(min-width:820px){ .cenik-hero{padding-top:72px} }
.cenik-hero-grid{display:grid;gap:30px;align-items:center}
.cenik-hero .lede{margin-bottom:1.1em}
.cenik-hero .hero-checks{margin-bottom:1.5em}
.cenik-hero-cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.cenik-hero-link{font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--navy)}
.cenik-hero-link:hover{color:var(--orange-600)}
@media(min-width:940px){
  /* Karta je užší než text — hero má zůstat textový, čísla jsou doprovod. */
  .cenik-hero-grid{grid-template-columns:1.35fr .85fr;gap:48px}
}

/* Karta s čísly. Nahoře NULA (jediné číslo, které odpovídá na obavu „co když
   zaplatím a nebude se mi to líbit"), pod ní přehled ceníku. */
.cenik-hero-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);text-align:center}
.chc-lab{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--muted)}
.chc-huge{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(2.6rem,7vw,3.4rem);line-height:1.05;letter-spacing:-.03em;margin:.12em 0 .1em}
.chc-claim{font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.12rem;margin:0 0 18px}
.chc-claim span{color:var(--orange-600)}
.chc-rows{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--border);
  display:grid;gap:9px;text-align:left}
.chc-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:.97rem;color:var(--muted)}
.chc-rows b{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1.06rem;
  white-space:nowrap}
/* Cena slovem („Na míru") menší než částky, ať kartu opticky nepřebije. */
.chc-word{font-size:.97rem!important;font-weight:600!important;color:var(--muted)!important}
.chc-fine{font-size:.86rem;color:var(--muted);line-height:1.5;text-align:left;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border)}

/* ── Časová osa placení ────────────────────────────────────────────────────
   Ukazuje jedinou věc, na které tady záleží: kdy peníze odcházejí a kdy ne.
   Na mobilu svisle pod sebou, od 900 px pět karet vedle sebe.

   ⚠️ KARTY, NE HOLÉ SLOUPCE (29. 8. 2026). Pět vycentrovaných sloupců v úzkém
   kontejneru mělo ~140 px na sloupec: text se lámal na pět ragged řádků,
   dvouřádkové nadpisy rozhodily začátky popisků v řadě a spojovací čára
   počítaná na 10 %/90 % šířky ignorovala `gap` mřížky, takže nekončila ve
   středech krajních teček. Mřížka karet všechny tři věci ruší z principu:
   výšky srovná `stretch`, text je vlevo a spojnice se kreslí DO MEZERY mezi
   kartami, kde se nemá s čím rozejít. */
.pay{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  /* ⚠️ Mezera a vnitřní okraj karty jsou PROMĚNNÉ, protože se z nich dopočítává
     spojnice mezi kartami. Ručně psaná čísla se s nimi po první úpravě rozešla
     (přesně tak vznikla stará čára na 10 %/90 %, která ignorovala `gap`).
     Kdo mění rozteč, mění JEN tyhle dvě hodnoty a spojnice se posune sama. */
  --pay-gap:14px; --pay-pad:20px; gap:var(--pay-gap)}
.pay-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--pay-pad)}
.pay-step--pay{border-color:var(--orange);box-shadow:0 8px 26px rgba(239,96,29,.12)}
/* ⚠️ Popisek kroku má vlastní třídu `.pay-txt`, není to holý <span>. Tečka je
   taky <span>, takže selektor `.pay span` (0,1,1) přebíjel `.pay-dot` (0,1,0)
   a přepisoval mu `display` i barvu — číslice pak byly neviditelné a slepené
   k hornímu okraji kolečka. Nevracet holý selektor na typ elementu. */
.pay-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:700;
  font-size:.95rem;margin-bottom:12px;flex:none}
/* Bílá na oranžové neprojde WCAG u malého textu, tmavě modrá ano (4,55). */
.pay-dot--pay{background:var(--orange);color:var(--navy)}
.pay b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.05rem;margin-bottom:.3em;line-height:1.25}
.pay-txt{display:block;color:var(--muted);font-size:.95rem;line-height:1.55;
  margin-bottom:16px}
/* Štítek dole říká jedinou věc, kvůli které tahle sekce existuje. `margin-top:auto`
   ho u všech pěti karet srovná na spodní hranu bez ohledu na délku textu —
   nic mu tenhle `auto` nesmí přepsat, jinak se štítky rozjedou po řadě. */
.pay-flag{margin-top:auto;font-style:normal;font-family:var(--font-head);font-weight:600;
  font-size:.82rem;letter-spacing:.01em;color:var(--navy);background:var(--bg);
  border:1px solid var(--border);border-radius:999px;padding:5px 12px;
  display:inline-block}
.pay-flag--pay{background:var(--orange);border-color:var(--orange);color:var(--navy)}
@media(min-width:900px){
  .pay{grid-template-columns:repeat(5,1fr);--pay-gap:18px;--pay-pad:22px}
  /* Spojnice se kreslí PŘESNĚ DO MEZERY mezi kartami — nikdy přes celou řadu.
     Svisle sedí na středu tečky (vnitřní okraj + polovina tečky). Obojí se
     počítá z proměnných výš, takže se to nemá jak rozejít. */
  .pay-step:not(:last-child)::after{content:"";position:absolute;
    top:calc(var(--pay-pad) + 17px);right:calc(-1 * var(--pay-gap));
    width:var(--pay-gap);height:2px;background:var(--border)}
}
/* Mezi 900 a 1100 px má sloupec kolem 160 px. Karty se tam nelámou, jen se
   v nich musí ubrat na velikosti, jinak je v každém řádku jedno dvě slova. */
@media(min-width:900px) and (max-width:1099px){
  .pay{--pay-gap:14px;--pay-pad:18px}
  .pay b{font-size:1rem}
  .pay-txt{font-size:.9rem;margin-bottom:14px}
  .pay-flag{font-size:.78rem;padding:4px 10px}
}

/* ⚠️ BLOK `.dph*` SMAZÁN 29. 8. 2026 spolu se sekcí „Konečná cena / Proč se
   k naší ceně nic nepřičítá" (Alexandr: „this is useless, everyone knows that,
   no one is actually that dumb"). Nevracet — konečnou cenu nese dál úvodní
   odstavec, odrážka v „Co u nás naopak neplatíte" a jedna otázka ve FAQ. */

/* ⚠️ Styl srovnávací tabulky `.cmp` se PŘESTĚHOVAL do base.css (11. 8. 2026),
   protože ji od té doby používá i /web-na-miru-nebo-wordpress. Nekopírovat ji
   sem zpátky — dvě kopie se rozejdou. */

/* ── Co u nás neplatíte ───────────────────────────────────────────────────
   Přeškrtnuté položky. Vizuálně to musí být na první pohled „tohle NENÍ",
   proto přeškrtnutí i tlumená barva. */
.nopay{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){ .nopay{grid-template-columns:1fr 1fr;gap:14px 32px} }
.nopay li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.97rem;
  line-height:1.5}
.nopay svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--orange);
  stroke-width:2.2;stroke-linecap:round}
.nopay b{display:block;color:var(--navy);font-weight:600;text-decoration:line-through;
  text-decoration-color:var(--orange);text-decoration-thickness:2px}

/* ── Péče o web ────────────────────────────────────────────────────────────
   Vlastní sekce od 29. 8. 2026 (Alexandr: „move pece o web into a separate
   section and mark it as not needed"). Pod balíčky se v jedné řadě s nimi
   četla jako čtvrtá položka nabídky.
   ⚠️ Nepovinnost říká nadpis, podnadpis, štítek na kartě i věta pod cenou.
   Je to schválně čtyřikrát — je to jediná obava, kvůli které karta 13. 8. 2026
   z reklamní LP vypadla úplně. Nespojovat do jednoho místa. */
.care-sec .addon-card{margin-top:0}
.care-note{text-align:center;color:var(--muted);font-size:.94rem;line-height:1.55;
  max-width:64ch;margin:22px auto 0}