/* ══════════════════════════════════════════════════════════════════════════
   /kolik-stoji-web — styly JEN pro tuhle stránku. Načítá se přes $extra_css.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tři ceny na jednom řádku ─────────────────────────────────────────────
   Není to druhý ceník. Jen čísla, aby návštěvník nemusel nikam klikat pro
   odpověď na otázku, kvůli které přišel. */
.pricelist{display:grid;gap:16px;grid-template-columns:1fr;max-width:940px;margin:0 auto}
@media(min-width:760px){ .pricelist{grid-template-columns:repeat(3,1fr)} }
/* Dva boxy od 17. 9. 2026 (Péče o web z přehledu cen odešla). */
@media(min-width:760px){ .pricelist--2{grid-template-columns:repeat(2,1fr);max-width:640px} }
.pricebox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 20px;display:flex;flex-direction:column}
.pricebox--hi{border-color:var(--orange);box-shadow:0 8px 26px rgba(239,96,29,.12)}
.pricebox-lab{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:.5em}
.pricebox--hi .pricebox-lab{color:var(--orange-600)}
.pricebox-lab em{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;
  opacity:.8}
.pricebox b{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(1.6rem,5vw,2.1rem);line-height:1;letter-spacing:-.03em;margin-bottom:.4em}
.pricebox--hi b{color:var(--orange-600)}
.pricebox-note{color:var(--muted);font-size:.95rem;line-height:1.5}
.pricelist-note{text-align:center;color:var(--muted);font-size:.95rem;max-width:70ch;
  margin:22px auto 0}

/* ── Šest věcí, které ženou cenu ──────────────────────────────────────────
   Číslované, protože pořadí odpovídá tomu, jak velký vliv na cenu mají.
   Dva sloupce od 860 px; čísla jsou oranžová, aby se dal seznam přelétnout. */
.drivers{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-columns:1fr}
@media(min-width:860px){ .drivers{grid-template-columns:1fr 1fr;column-gap:48px} }
.drivers li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:20px 0;border-top:1px solid var(--border)}
.drivers li:first-child{border-top:0}
@media(min-width:860px){ .drivers li:nth-child(2){border-top:0} }
.drivers i{font-style:normal;font-family:var(--font-head);font-weight:700;font-size:1rem;
  color:var(--orange);padding-top:.2em;letter-spacing:.02em}
.drivers b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.08rem;margin-bottom:.25em}
.drivers span{color:var(--muted);font-size:.96rem;line-height:1.55}

/* ── Kalkulačka tří let ───────────────────────────────────────────────────
   ⚠️ Čistě CSS přes :checked, bez JS. Vstupy leží v DOM PŘED přepínači
   i panely, jinak `~` nemá co vybrat.
   ⚠️ Šířky pruhů se počítají v PHP z ceníku, ne tady. */
.calc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 20px;box-shadow:var(--shadow)}
@media(min-width:700px){ .calc{padding:30px 28px} }
.calc input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.calc-tabs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:24px}
.calc-tabs-lab{color:var(--muted);font-size:.94rem;margin-right:4px}
/* Na úzkém displeji patří popisek na vlastní řádek, jinak zůstane viset
   u prvního přepínače a zbytek se zalomí pod něj. */
@media(max-width:540px){ .calc-tabs-lab{flex:0 0 100%;margin:0 0 2px} }
.calc-tabs label{display:inline-flex;align-items:center;cursor:pointer;
  border:1px solid var(--border);background:var(--bg);border-radius:999px;
  padding:9px 17px;font-size:.94rem;font-weight:600;color:var(--navy);
  transition:background .15s,border-color .15s,color .15s}
.calc-tabs label:hover{border-color:var(--navy)}
.calc input:focus-visible + label{outline:2px solid var(--orange);outline-offset:2px}
#n0:checked ~ .calc-tabs label[for="n0"],
#n1:checked ~ .calc-tabs label[for="n1"],
#n2:checked ~ .calc-tabs label[for="n2"]{background:var(--navy);border-color:var(--navy);color:#fff}
.calc-panel{display:none}
#n0:checked ~ .calc-panels .calc-panel--0,
#n1:checked ~ .calc-panels .calc-panel--1,
#n2:checked ~ .calc-panels .calc-panel--2{display:block}

/* Řádek grafu. Na mobilu jde částka pod pruh, na širším pod sebe do mřížky,
   aby čísla stála v jednom sloupci a dala se porovnat pohledem. */
.calc-row{margin-bottom:20px}
.calc-name{display:block;color:var(--navy);font-weight:600;font-size:.97rem;margin-bottom:8px}
.calc-bar{height:26px;border-radius:8px;background:var(--navy-tint);overflow:hidden}
.calc-fill{display:block;height:100%;border-radius:8px;
  transition:width .7s cubic-bezier(.65,.02,.3,1)}
.calc-fill--rent{background:var(--navy)}
.calc-fill--us{background:var(--orange)}
.calc-sum{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.25rem;letter-spacing:-.02em;margin-top:7px}
.calc-sum--us{color:var(--orange-600)}
@media(min-width:640px){
  .calc-row{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:16px}
  .calc-name{margin-bottom:0}
  .calc-sum{margin-top:0;text-align:right;min-width:7ch}
}
.calc-diff{margin:0;padding-top:16px;border-top:1px solid var(--border);
  color:var(--muted);font-size:.96rem}
.calc-diff b{color:var(--navy);font-weight:700}
.calc-note{color:var(--muted);font-size:.95rem;line-height:1.6;max-width:72ch;margin:20px auto 0;
  text-align:center}
@media(prefers-reduced-motion:reduce){ .calc-fill{transition:none} }

/* ── Sedm otázek ──────────────────────────────────────────────────────────
   Otázka tučně, naše odpověď pod ní drobným a oranžovou linkou vlevo — aby
   bylo na první pohled vidět, co je obecná rada a co je náš vlastní slib. */
.asks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.asks li{padding:18px 0;border-top:1px solid var(--border)}
.asks li:first-child{border-top:0}
.asks b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.06rem;line-height:1.35;margin-bottom:8px}
.asks-us{display:block;color:var(--muted);font-size:.96rem;line-height:1.55;
  border-left:3px solid var(--orange);padding-left:13px}

/* ── Co je v ceně ─────────────────────────────────────────────────────────
   Odrážky s fajfkou ze stejné sady jako .hero-checks, jen ve dvou sloupcích. */
.incl{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){ .incl{grid-template-columns:1fr 1fr;column-gap:34px} }
.incl li{position:relative;padding-left:32px;color:var(--muted);font-size:.97rem;line-height:1.55}
.incl li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:var(--orange-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF601D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>") center/14px no-repeat}
.incl b{display:block;color:var(--navy);font-weight:600}
.incl-more{color:var(--muted);font-size:.96rem;line-height:1.6;margin:24px 0 0;
  padding-top:20px;border-top:1px solid var(--border)}
.faq-more{color:var(--muted);font-size:.95rem;margin:18px 0 0;text-align:center}

/* ── Podpis autora pod H1 (23. 9. 2026) ──────────────────────────────────
   Kdo a kdy stránku připravil. Drobně, ať nekonkuruje úvodní odpovědi. */
.page-hero .byline{margin:0 0 1em;color:var(--muted);font-size:.93rem}
.byline a{color:var(--navy);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.byline a:hover{color:var(--orange-600)}

/* ── Srovnání řešení (23. 9. 2026) ───────────────────────────────────────
   Vzhled tabulky je sdílený `.cmp` z base.css, tady jen odkazy pod ní. */
.cmp-more{color:var(--muted);font-size:.96rem;line-height:1.6;max-width:72ch;
  margin:20px auto 0;text-align:center}