/* ══════════════════════════════════════════════════════════════════════════
   /sluzby/seo — styly JEN pro tuhle stránku.

   Načítá se přes $extra_css v hlavičce `site/sluzby/seo.php`, 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 na webu
   nejsou (ukázka výsledku hledání, přepínatelné schéma struktury webu, graf
   času, mapka okolí). Do sdíleného stylopisu patří až věc, kterou použije
   druhá stránka.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css (--navy, --orange, --muted,
   --border, --surface, --bg, --navy-tint, --orange-tint). Žádný nový odstín,
   žádná nová velikost písma mimo škálu.
   ══════════════════════════════════════════════════════════════════════════ */

/* Skryté, ale ovladatelné klávesnicí — přepínač schématu níž. Nepoužívat
   display:none, tím by prvek vypadl z pořadí tabulátoru. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════════════════════
   1. HLAVIČKA STRÁNKY — text vlevo, ukázka výsledku hledání vpravo.
   Na mobilu jde ukázka pod text; do 940 px by se dvousloupec zmáčkl tak, že
   by se v „adrese" lámalo slovo uprostřed.
   ══════════════════════════════════════════════════════════════════════════ */
.seohero-grid{display:grid;gap:30px}
.seohero-copy .hero-checks{margin-top:22px}
@media(min-width:940px){
  .seohero-grid{grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
}

/* Vysazený odstavec pod obrázkem. `.container-narrow` z base.css sám o sobě
   nemá `margin:auto` (počítá s tím, že jde o `.container`), takže by se text
   zaseknul vlevo. */
.seotext{max-width:70ch;margin:26px auto 0}

/* Seznam „Na rovinu" má dlouhé, zalamované body — base.css je centruje na střed
   řádku, což u tří řádků textu odsune fajfku doprostřed odstavce.
   Platí JEN na téhle stránce, protože jinde jsou body jednořádkové. */
.cta-points li{align-items:flex-start}
.cta-points .ic{margin-top:.18em}

/* ── Ukázka výsledku vyhledávání ──────────────────────────────────────────
   Není to snímek skutečného výsledku a ani to tak nesmí vypadat (§13 — žádná
   vymyšlená fakta): záhlaví to říká rovnou a doména je zjevný zástupný text.
   Smysl je vysvětlit, ze kterých tří dílů se výsledek skládá a že všechny tři
   píšeme my. */
.serp{margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 16px 18px}
.serp-cap{margin:0 0 12px;font-family:var(--font-head);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.serp-bar{display:flex;align-items:center;gap:9px;background:var(--bg);
  border:1px solid var(--border);border-radius:999px;padding:9px 15px;
  font-size:.93rem;color:var(--ink)}
.serp-bar svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);
  stroke-width:2;stroke-linecap:round}
.serp-card{margin-top:14px;padding:14px 15px 13px;border:1px dashed var(--border);
  border-radius:var(--radius-sm);background:var(--bg)}
.serp-url,.serp-title,.serp-desc{display:flex;gap:9px;align-items:flex-start;margin:0}
.serp-url{font-size:.82rem;color:var(--muted);margin-bottom:5px}
.serp-title{font-family:var(--font-head);font-weight:600;font-size:1.04rem;
  color:var(--navy);line-height:1.3;margin-bottom:7px}
.serp-desc{font-size:.9rem;color:var(--muted);line-height:1.5}
/* Číslo v kolečku: tmavě modrá s bílým textem. Oranžová s bílou by na tak
   drobném písmu neprošla kontrastem (viz pravidlo pro /p/ v CLAUDE.md §11b). */
.serp-n{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-head);
  font-size:.72rem;font-weight:700;line-height:1;margin-top:2px}
.serp-legend{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:9px;
  font-size:.88rem;color:var(--ink);line-height:1.45}
.serp-legend li{display:flex;gap:9px;align-items:flex-start}
.serp-legend b{color:var(--navy);font-weight:600}

/* ══════════════════════════════════════════════════════════════════════════
   2. PŘEPÍNAČ SCHÉMATU „jedna stránka vs. stránka na každou službu".
   Čistě CSS přes skryté radio + labely (§8 — žádný JS na obsah). Na mobilu se
   varianty přepínají, od 820 px stojí vedle sebe jako srovnání a přepínač se
   schová — vedle sebe se to porovná líp než klikáním.
   Obě varianty jsou VŽDY v HTML, takže je vidí i vyhledávač a čtečka.
   ══════════════════════════════════════════════════════════════════════════ */
.seosw{margin-top:26px}
.seosw-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.seosw-tabs label{display:block;text-align:center;padding:11px 10px;cursor:pointer;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.88rem;
  line-height:1.25;transition:background .16s,color .16s,border-color .16s}
.seosw-tabs label:hover{border-color:var(--navy);color:var(--navy)}
#sw-a:checked ~ .seosw-tabs label[for=sw-a],
#sw-b:checked ~ .seosw-tabs label[for=sw-b]{background:var(--navy);border-color:var(--navy);color:#fff}
#sw-a:focus-visible ~ .seosw-tabs label[for=sw-a],
#sw-b:focus-visible ~ .seosw-tabs label[for=sw-b]{outline:3px solid var(--orange);outline-offset:2px}
.seosw-panes{display:grid;gap:18px}
@media(max-width:819px){
  #sw-a:checked ~ .seosw-panes .pane--b{display:none}
  #sw-b:checked ~ .seosw-panes .pane--a{display:none}
}
@media(min-width:820px){
  .seosw-tabs{display:none}
  .seosw-panes{grid-template-columns:1fr 1fr;gap:22px}
}

.pane{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 18px 18px}
.pane--b{border-color:rgba(239,96,29,.45)}
.pane-t{margin:0 0 16px;text-align:center;font-family:var(--font-head);font-weight:600;
  color:var(--navy);font-size:1.02rem;line-height:1.3}

/* Schéma: tři dotazy nahoře → čáry → stránky dole. Čáry jsou SVG přes celou
   šířku s preserveAspectRatio="none", aby se roztáhly s obsahem; tloušťku
   drží vector-effect, jinak by se s roztažením zdeformovala. */
.flow-q{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.flow-q span{background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:9px 6px;font-size:.73rem;color:var(--muted);text-align:center;line-height:1.3}
.flow-lines{display:block;width:100%;height:52px}
/* vector-effect: SVG se roztahuje s obsahem (preserveAspectRatio="none"), takže
   by se s ním roztáhla i tloušťka čáry a vodorovné úseky by byly tlustší než
   svislé. Non-scaling-stroke drží tloušťku v pixelech. */
.flow-lines path{fill:none;stroke-width:1.7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pane--a .flow-lines path{stroke:var(--muted);opacity:.45}
.pane--b .flow-lines path{stroke:var(--orange)}
.flow-p{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.flow-p--one{grid-template-columns:minmax(0,62%);justify-content:center}
.pagebox{display:block;border-radius:10px;padding:11px 8px;text-align:center;
  font-family:var(--font-head);font-weight:600;font-size:.75rem;line-height:1.25;color:#fff}
.pane--a .pagebox{background:var(--muted)}
.pane--b .pagebox{background:var(--navy)}
.flow-note{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;
  font-size:.89rem;line-height:1.5;color:var(--muted)}
.flow-note svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pane--a .flow-note svg{stroke:var(--muted)}
.pane--b .flow-note{color:var(--ink)}
.pane--b .flow-note svg{stroke:var(--orange)}

/* ══════════════════════════════════════════════════════════════════════════
   3. MAPKA OKOLÍ — schéma, ne mapa v měřítku (říká to i popisek pod ní).
   Text uvnitř SVG má bílý obtah (paint-order), aby byl čitelný i tam, kde
   pod ním vede spojnice.
   ⚠️ viewBox je schválně jen 340 široký: na telefonu tak vyjde písmo 12
   jednotek zhruba na 12 px, tedy čitelně. Kdyby byl viewBox 800, popisky by
   se na mobilu zmenšily na pět pixelů.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ Styly schematické mapky (.mapcard/.mapdia/.figcap) se PŘESTĚHOVALY do
   base.css (12. 8. 2026), protože ji od té doby používá i /sluzby/tvorba-webu.
   Nekopírovat je sem zpátky — dvě kopie se rozejdou. */

/* ══════════════════════════════════════════════════════════════════════════
   4. GRAF ČASU — SEO proti reklamě. Osa nemá čísla ZÁMĚRNĚ: konkrétní počty
   poptávek v čase nikdo dopředu neví a nakreslit je by byl vymyšlený údaj
   (§13). Graf ukazuje jen tvar: reklama skočí hned, organika se nabaluje.
   ══════════════════════════════════════════════════════════════════════════ */
.chartfig{margin:0 0 26px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 14px 12px}
.bg-surface .chartfig{background:var(--bg)}
.chart{display:block;width:100%;height:auto;max-width:620px;margin:0 auto}
.chart .ax{fill:none;stroke:var(--border);stroke-width:1.5}
/* fill:none i tady — bez něj by prohlížeč zkusil vyplnit otevřenou cestu černou. */
.chart .grid{fill:none;stroke:var(--border);stroke-width:1;stroke-dasharray:3 5;opacity:.85}
.chart .c-ads{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round}
.chart .c-seo{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.chart text{font-family:var(--font-body);font-size:11px;fill:var(--muted)}
.chart .lbl-ads{font-family:var(--font-head);font-size:12px;font-weight:600;fill:var(--orange-600)}
.chart .lbl-seo{font-family:var(--font-head);font-size:12px;font-weight:600;fill:var(--navy)}

/* Dvě karty pod grafem: co která cesta umí a co ne. */
.duo{display:grid;gap:18px}
@media(min-width:760px){ .duo{grid-template-columns:1fr 1fr;gap:22px} }
.duo .card h3{display:flex;align-items:center;gap:9px}
.duo .card h3 svg{width:20px;height:20px;flex:none;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.duo-seo h3 svg{stroke:var(--navy)}
.duo-ads h3 svg{stroke:var(--orange)}
.duo ul{list-style:none;padding:0;margin:.6em 0 0;display:grid;gap:8px}
.duo li{position:relative;padding-left:20px;font-size:.94rem;color:var(--muted);line-height:1.5}
.duo li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--border)}
.duo-seo li::before{background:var(--navy)}
.duo-ads li::before{background:var(--orange)}

/* ══════════════════════════════════════════════════════════════════════════
   5. UKÁZKA SKUTEČNÉHO WEBU v rámu prohlížeče. Rám a posouvání řeší base.css
   (.site-window), tady se jen doladí šířka a nápověda k posouvání.
   ⚠️ Nápovědu na homepage schovává nova.js po prvním posunutí — ten se sem
   ale nenačítá, takže ji tady schová najetí myší nebo focus uvnitř okna.
   Na dotyku zůstane viditelná, což je přesně ta situace, kdy je potřeba.
   ══════════════════════════════════════════════════════════════════════════ */
.seoshot{margin:0 auto;max-width:640px}
.seoshot .site-window{border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.seoshot .site-window:hover .scrollhint,
.seoshot .site-window:focus-within .scrollhint{opacity:0}
.seoshot figcaption{margin:14px auto 0;text-align:center;color:var(--muted);
  font-size:.92rem;max-width:60ch;line-height:1.5}

/* ══════════════════════════════════════════════════════════════════════════
   6. CO JE V KTERÉM BALÍČKU (z pohledu SEO). Není to ceník — ceník má vlastní
   stránku a sdílený include. Tady jde jen o rozdíl v dosahu, proto dva řádky
   a odkaz dál, ne karty s tlačítkem „koupit".
   ⚠️ Ceny VŽDY z config/pricing.php (§13 — hlídá to validátor).
   ══════════════════════════════════════════════════════════════════════════ */
.pkgseo{display:grid;gap:16px}
@media(min-width:760px){ .pkgseo{grid-template-columns:1fr 1fr;gap:20px} }
.pkgseo-item{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 22px 20px}
.bg-surface .pkgseo-item{background:var(--bg)}
.pkgseo-item--full{border-color:rgba(239,96,29,.45)}
/* Jeden balíček (od 16. 9. 2026): karta přes celou šířku mřížky, ne půlka. */
@media(min-width:760px){ .pkgseo--one{grid-template-columns:1fr;max-width:640px;margin:0 auto} }
.pkgseo-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:12px}
.pkgseo-name{font-family:var(--font-head);font-weight:700;font-size:1.2rem;color:var(--navy)}
.pkgseo-price{font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--orange-600)}
.pkgseo-item p{margin:0 0 .7em;color:var(--muted);font-size:.95rem}
.pkgseo-item ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pkgseo-item li{position:relative;padding-left:26px;font-size:.94rem;color:var(--ink)}
.pkgseo-item li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;
  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/12px no-repeat}