/* ══════════════════════════════════════════════════════════════════════════
   /faq — styly JEN pro stránku s častými dotazy. 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
   (rychlé odpovědi, rozcestník témat, schéma cesty návštěvníka). 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.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Rychlé odpovědi nahoře ────────────────────────────────────────────────
   Tři čísla z ceníku dřív, než člověk začne rozklikávat otázky. Půlka lidí
   přichází právě na tyhle tři věci a nemá je proč hledat ve dvaceti pěti
   otázkách. Hodnoty jsou z config/pricing.php, takže nemůžou zastarat. */
.qtop{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:14px;
  grid-template-columns:1fr}
@media(min-width:760px){ .qtop{grid-template-columns:repeat(3,1fr);gap:18px} }
.qtop li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 20px 20px}
.qtop svg{width:30px;height:30px;margin-bottom:4px;fill:none;stroke:var(--orange);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qtop em{font-style:normal;font-family:var(--font-head);font-weight:600;font-size:.76rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.qtop b{font-family:var(--font-head);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.75rem,6.2vw,2.3rem);line-height:1;color:var(--navy)}
.qtop span{color:var(--muted);font-size:.94rem;line-height:1.5;margin-top:2px}
/* Odkaz drží spodní hranu karty, aby tři různě dlouhé texty nerozházely řadu. */
.qtop a{margin-top:auto;padding-top:12px;font-family:var(--font-head);font-weight:600;
  font-size:.92rem;color:var(--orange-600)}

/* ── Rozcestník témat (kotvy) ──────────────────────────────────────────────
   Stránka je dlouhá; bez rozcestníku by se v ní hledalo jen scrollováním.
   Číslo v pilulce říká, kolik otázek téma má — je vidět, co je velké téma
   a co jen doplněk. ⚠️ Když se přidá otázka, číslo se MUSÍ opravit v faq.php,
   nikde se nepočítá samo. */
.qnav{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.qnav a{display:inline-flex;align-items:center;gap:9px;background:var(--bg);
  border:1px solid var(--border);border-radius:999px;padding:9px 10px 9px 16px;
  font-size:.94rem;font-weight:500;color:var(--navy);
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.qnav a:hover{text-decoration:none;background:var(--navy);border-color:var(--navy);color:#fff}
.qnav i{font-style:normal;font-family:var(--font-head);font-weight:700;font-size:.78rem;
  color:var(--orange-600);background:var(--orange-tint);border-radius:999px;
  padding:2px 9px;line-height:1.35}
.qnav a:hover i{background:var(--orange);color:#fff}

/* ── Hlavička tématu ───────────────────────────────────────────────────────
   Ikona v kolečku nad kickerem. Střídá se s pozadím sekce (na bílé modrá,
   na béžové oranžová), takže je z ní na první pohled poznat, že jde o další
   téma, a ne o pokračování předchozího. */
.qsec{scroll-margin-top:76px}
.cat-ico{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 14px;
  border-radius:16px;background:var(--orange-tint);color:var(--orange-600);
  transition:background .25s ease,color .25s ease}
.cat-ico svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bg-surface .cat-ico{background:var(--navy-tint);color:var(--navy)}
/* Sekce, na kterou se právě skočilo z rozcestníku, se označí. Čistě CSS přes
   :target — bez JS to funguje dál a při běžném scrollování se nic neděje. */
.qsec:target .cat-ico{background:var(--orange);color:#fff}
.qsec:target .section-head .kicker{color:var(--navy)}

/* ── Otázky ────────────────────────────────────────────────────────────────
   Základ je .faq/.faq-item z base.css, tady se jen zvětšuje (otázky jsou
   hlavní obsah stránky, ne doplněk pod textem) a otevřená položka se odliší
   oranžovým rámečkem, aby bylo poznat, kde odpověď začíná a končí. */
.qsec .faq{gap:12px}
.qsec .faq-item{border-radius:var(--radius);transition:border-color .18s ease,box-shadow .18s ease}
.qsec .faq-item summary{font-size:1.06rem;line-height:1.35;padding:18px 52px 18px 20px}
.qsec .faq-item[open]{border-color:var(--orange);box-shadow:0 8px 26px rgba(239,96,29,.10)}
.qsec .faq-a{padding:0 20px 20px}
/* První odstavec = přímá odpověď, proto tmavší a o kousek větší. Další
   odstavce jsou rozvedení a smí ustoupit do pozadí. Přesně tohle si z FAQ
   berou jazykové modely, tak ať je vizuálně vidět, kde odpověď je. */
.qsec .faq-a p{color:var(--ink);font-size:1rem;line-height:1.6}
.qsec .faq-a p + p{color:var(--muted);font-size:.95rem;margin-top:.75em}
.qsec .faq-a strong{color:var(--navy);font-weight:600}

/* ── Tři fakta o průběhu ───────────────────────────────────────────────────
   Odpovídají na to, co u průběhu zajímá nejdřív, ještě než se něco rozklikne. */
.qfacts{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;
  grid-template-columns:1fr}
@media(min-width:680px){ .qfacts{grid-template-columns:repeat(3,1fr);gap:14px} }
.qfacts li{display:flex;gap:12px;align-items:flex-start;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px}
.qfacts svg{width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--orange);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qfacts b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1rem;margin-bottom:.2em}
.qfacts span{display:block;color:var(--muted);font-size:.9rem;line-height:1.45}

/* ── Schéma: odkud návštěvník přijde a kde poptávka skončí ─────────────────
   Vlevo zdroje návštěvnosti, uprostřed web klienta, dole kontakt. Celý smysl
   obrázku je poslední šipka: poptávka jde přímo klientovi.
   ⚠️ Popisuje se MODEL, nikdy konkrétní konkurent (nekalá soutěž).
   Šířku držíme na uzdě — v úzkém sloupci by se text v SVG jinak nafoukl. */
.qflow{max-width:430px;margin:0 auto 30px}
.qflow svg{display:block;width:100%;height:auto;overflow:visible}
.qflow-node{fill:var(--surface);stroke:var(--border);stroke-width:1.4}
.qflow-node--us{fill:var(--orange-tint);stroke:var(--orange);stroke-width:1.8}
.qflow-node--out{fill:var(--navy);stroke:var(--navy)}
.qflow-t{fill:var(--navy);font-family:var(--font-head);font-weight:600;font-size:13px}
.qflow-t--src{fill:var(--navy);font-family:var(--font-head);font-weight:600;font-size:12px}
.qflow-t--sm{fill:var(--muted);font-family:var(--font-body);font-weight:400;font-size:9.5px}
.qflow-t--out{fill:#fff}
.qflow-t--out.qflow-t--sm{fill:#c3cae0}
.qflow-line{fill:none;stroke:var(--border);stroke-width:1.5}
.qflow-arrow{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round}
/* Poslední šipka se dokreslí, až sekce najede do obrazu (třídu .in přidává
   main.js prvkům .reveal). Bez JS zůstane prostě nakreslená — nic se neztratí. */
.qflow-line--us{stroke:var(--orange);stroke-width:2.6;stroke-dasharray:100;
  stroke-dashoffset:100;transition:stroke-dashoffset .9s ease .15s}
.reveal.in .qflow-line--us{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
  .qflow-line--us{transition:none;stroke-dashoffset:0}
}
.qflow figcaption{margin:14px auto 0;text-align:center;color:var(--muted);
  font-size:.92rem;line-height:1.5;max-width:52ch}

/* ── Doložená čísla pod otázkami ───────────────────────────────────────────
   ⚠️ Jen čísla z analytiky klienta (dokumenty/PROOF-DATA.md). Nic se
   nezaokrouhluje nahoru a nic se nedopočítává. */
.qproof{margin-top:34px;padding-top:28px;border-top:1px solid var(--border)}
.qproof h3{text-align:center;font-size:1.14rem;margin-bottom:.9em}
.qproof .cta-points{max-width:56ch;margin-left:auto;margin-right:auto}
.qproof .cta-points li{align-items:flex-start}
.qproof .cta-points .ic{margin-top:.2em}
.qproof-note{text-align:center;color:var(--muted);font-size:.92rem;max-width:60ch;
  margin:4px auto 0}

/* ── Závěrečná výzva ───────────────────────────────────────────────────────
   .band je z base.css; tady se jen srovnají dvě tlačítka vedle sebe, na
   telefonu pod sebou přes celou šířku. */
.band-cta--row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.band-cta--row .btn{flex:1 1 260px;max-width:340px}
@media(min-width:600px){ .band-cta--row .btn{flex:0 1 auto} }