/* ═══════════════════════════════════════════════════════════════════════════
   GOOGLE REKLAMA — doplňkové styly JEN pro /sluzby/google-ads.
   Načítají se přes $extra_css, ostatní stránky si soubor nevyžádají.

   ⚠️ NIC TU NEPŘEPISUJE base.css. Všechny vlastní třídy začínají `ga-`, takže
   se nemůžou potkat se sdílenými styly ani s tím, co si zvlášť dělají
   sourozenecké stránky ve /sluzby/. Jediná pravidla vázaná na cizí jména jsou
   doladění `.cta-points` a `.pricing-note` UVNITŘ `ga-` bloků — jsou
   komentovaná na místě a mimo tuhle stránku se neuplatní.

   Barvy výhradně z proměnných base.css (navy, oranžová, muted, border,
   surface). Žádná nová paleta a žádné cizí logo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HLAVIČKA STRÁNKY — vlevo text, vpravo ukázka inzerátu.
   Na mobilu jeden sloupec: text napřed, ukázka pod ním.
   ═══════════════════════════════════════════════════════════════════════════ */
.ga-hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
@media(min-width:940px){
  .ga-hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:52px}
}
.ga-hero-copy .cta-points{margin:20px 0 22px}
/* Odrážky v hlavičce i v přepínači jsou celé věty, ne dvě slova jako na
   homepage — svisle na střed by ikona u dvouřádkového textu plavala uprostřed. */
.ga-hero-copy .cta-points li,
.ga-panel .cta-points li{align-items:flex-start}
.ga-hero-copy .cta-points .ic,
.ga-panel .cta-points .ic{margin-top:.18em}
.ga-hero-note{font-size:.92rem;color:var(--muted);margin:14px 0 0}

/* ═══════════════════════════════════════════════════════════════════════════
   2. UKÁZKA INZERÁTU VE VYHLEDÁVÁNÍ — ilustrace, ne snímek Googlu.
   Postavená z HTML (ne z obrázku), takže je text ostrý, dá se označit, sám se
   zalomí na úzkém displeji a nic se nestahuje. ŽÁDNÉ logo ani barvy Googlu:
   drží se navy + oranžová z palety.
   Štítek „Sponzorováno" je NAVY TEXT NA ORANŽOVÉ — bílá na oranžové má kontrast
   3,3 a v tak drobném písmu by neprošla (stejné pravidlo jako na LP v /p/).
   ═══════════════════════════════════════════════════════════════════════════ */
.ga-serp{margin:0;width:100%;max-width:540px;justify-self:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:16px 16px 14px}
.ga-serp-bar{display:flex;align-items:center;gap:10px;background:var(--bg);
  border:1px solid var(--border);border-radius:999px;padding:11px 16px}
.ga-serp-bar svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--muted);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ga-serp-q{font-size:.95rem;color:var(--ink);display:inline-flex;align-items:center}
/* Kurzor za dotazem — jediná animace v ukázce. Nemá vliv na rozvržení (je to
   inline blok pevné šířky), takže neposouvá nic kolem sebe. */
.ga-serp-caret{width:2px;height:1.05em;background:var(--orange);margin-left:3px;
  border-radius:2px;animation:ga-caret 1.15s steps(1) infinite}
@keyframes ga-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.ga-res{padding:16px 0 0}
.ga-res + .ga-res{margin-top:14px;border-top:1px solid var(--border)}
/* Inzerát drží oranžový proužek u levého okraje, organický výsledek pod ním je
   vybledlý. Rozdíl „placené nahoře, organické pod tím" je tak vidět na první
   pohled, aniž bychom cokoli psali. */
.ga-res--ad{position:relative;padding-left:15px}
.ga-res--ad::before{content:"";position:absolute;left:0;top:18px;bottom:2px;width:3px;
  border-radius:3px;background:var(--orange)}
.ga-serp-badge{display:inline-block;background:var(--orange);color:var(--navy);
  font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.04em;
  padding:3px 10px;border-radius:999px;margin-bottom:9px}
.ga-res-url{display:block;font-size:.82rem;color:var(--muted);word-break:break-word}
.ga-res-title{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.06rem;line-height:1.3;margin:4px 0 6px}
.ga-res-desc{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.ga-res-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:.84rem;
  color:var(--navy);font-weight:600}
.ga-res--org{opacity:.5}
.ga-res--org .ga-res-title{font-weight:600}
.ga-serp figcaption{margin-top:14px;font-size:.85rem;color:var(--muted);line-height:1.45;
  text-align:center}
@media(min-width:940px){ .ga-serp{padding:20px 20px 16px} }

/* ═══════════════════════════════════════════════════════════════════════════
   3. CESTA PENĚZ — hlavní odlišovač, proto vlastní schéma a ne odstavec.
   Každá „dráha" je jeden řádek: odkud → za co → komu. Na mobilu se řádek
   překlopí pod sebe a šipka se otočí o 90°, aby pořád ukazovala směr toku.
   Kreslené je to inline SVG šipkami, nic se nestahuje.
   ═══════════════════════════════════════════════════════════════════════════ */
.ga-flow{display:grid;gap:14px;max-width:940px;margin:0 auto}
.ga-lane{display:grid;grid-template-columns:1fr;gap:0;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px}
@media(min-width:760px){
  .ga-lane{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:22px 26px}
}
.ga-node{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 16px;text-align:center;display:flex;flex-direction:column;gap:4px}
.ga-node b{font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:1.06rem}
.ga-node span{font-size:.87rem;color:var(--muted);line-height:1.4}
.ga-node--hi{background:var(--orange-tint);border-color:rgba(239,96,29,.38)}
.ga-node--us{background:var(--navy);border-color:var(--navy)}
.ga-node--us b{color:#fff}
.ga-node--us span{color:#c3cae0}

/* Spojnice mezi uzly: popisek nad šipkou, aby bylo jasné, ZA CO ty peníze jdou. */
.ga-conn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0}
.ga-conn-lab{font-family:var(--font-head);font-weight:600;font-size:.82rem;
  color:var(--orange-600);text-align:center;line-height:1.3;max-width:22ch}
.ga-conn svg{width:48px;height:24px;fill:none;stroke:var(--orange);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.ga-conn--navy .ga-conn-lab{color:var(--navy)}
.ga-conn--navy svg{stroke:var(--navy)}
@media(min-width:760px){
  .ga-conn{padding:0 10px}
  .ga-conn svg{transform:none;width:66px}
}

/* Dráha, kterou NEJDEME. Přerušovaný rámeček a přeškrtnutý řetěz uzlů —
   ať je na první pohled poznat, že tohle je protipříklad, ne nabídka. */
.ga-nope{display:flex;align-items:flex-start;gap:13px;border:2px dashed var(--border);
  border-radius:var(--radius);padding:17px 19px;color:var(--muted);font-size:.95rem;
  line-height:1.55;max-width:940px;margin:0 auto}
.ga-nope svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;
  stroke-linecap:round;margin-top:3px}
.ga-nope p{margin:0}
.ga-nope b{color:var(--navy);font-weight:600}
.ga-nope s{white-space:nowrap}
.ga-flow-note{max-width:820px;margin:24px auto 0;color:var(--muted);text-align:center}
.ga-flow-note strong{color:var(--navy)}

/* ═══════════════════════════════════════════════════════════════════════════
   4. PŘEPÍNAČ REKLAMA / SEO — bez jediného řádku JavaScriptu.
   Dva skryté radiobuttony stojí PŘED obsahem, takže se na aktivní záložku,
   zvýrazněnou křivku v grafu i na správný panel dá dosáhnout sourozeneckým
   selektorem (~). Bez myši to obslouží klávesnice (šipky mezi radiobuttony),
   bez CSS zůstanou oba panely čitelné pod sebou.
   ═══════════════════════════════════════════════════════════════════════════ */
.ga-switch{position:relative;max-width:1000px;margin:0 auto}
/* Radiobutton je vidět jen pro klávesnici a čtečku; klikání obstarají <label>. */
.ga-switch-r{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;
  pointer-events:none}
.ga-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:6px;max-width:540px;
  margin:0 auto 30px;box-shadow:var(--shadow)}
.ga-tab{display:flex;align-items:center;justify-content:center;padding:.72em 1em;
  border-radius:999px;font-family:var(--font-head);font-weight:600;font-size:.98rem;
  color:var(--navy);cursor:pointer;text-align:center;line-height:1.2;
  transition:background .18s ease,color .18s ease}
.ga-tab:hover{background:var(--navy-tint)}
#ga-ads:checked ~ .ga-tabs label[for="ga-ads"],
#ga-seo:checked ~ .ga-tabs label[for="ga-seo"]{background:var(--navy);color:#fff}
/* Obrys kolem aktivní záložky při ovládání klávesnicí — bez toho by nebylo
   poznat, kde se člověk nachází, protože samotný radiobutton není vidět. */
#ga-ads:focus-visible ~ .ga-tabs label[for="ga-ads"],
#ga-seo:focus-visible ~ .ga-tabs label[for="ga-seo"]{outline:3px solid var(--orange);
  outline-offset:2px}

.ga-cmp{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
@media(min-width:900px){
  .ga-cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px}
}

/* Graf: schéma průběhu, ne naměřená data (proto osy bez čísel). */
.ga-chart{margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 14px 12px}
.ga-chart svg{display:block;width:100%;height:auto}
.ga-chart .ax{stroke:var(--border);stroke-width:1.6;fill:none;stroke-linecap:round}
.ga-chart .lab{fill:var(--muted);font-family:var(--font-body);font-size:11px}
.ga-chart .lab-em{fill:var(--navy);font-weight:600}
.ga-chart .c{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .25s ease}
.ga-chart .c-ads{stroke:var(--orange)}
.ga-chart .c-seo{stroke:var(--navy)}
.ga-chart .off{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 5;fill:none;
  transition:opacity .25s ease}
/* Neaktivní křivka zbledne, ale nezmizí — porovnání dává smysl jen tehdy,
   když je vidět obojí najednou. */
#ga-seo:checked ~ .ga-cmp .c-ads,
#ga-seo:checked ~ .ga-cmp .off,
#ga-seo:checked ~ .ga-cmp .lab-ads{opacity:.2}
#ga-ads:checked ~ .ga-cmp .c-seo,
#ga-ads:checked ~ .ga-cmp .lab-seo{opacity:.2}
.ga-legend{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin:14px 0 0;
  font-size:.86rem;color:var(--muted)}
.ga-legend span{display:inline-flex;align-items:center;gap:8px}
.ga-legend i{width:16px;height:4px;border-radius:2px;display:block;flex:none}
.ga-legend .i-ads{background:var(--orange)}
.ga-legend .i-seo{background:var(--navy)}
.ga-chart figcaption{margin-top:12px;font-size:.85rem;color:var(--muted);text-align:center;
  line-height:1.45}

.ga-panel{display:none}
#ga-ads:checked ~ .ga-cmp .ga-panel--ads{display:block}
#ga-seo:checked ~ .ga-cmp .ga-panel--seo{display:block}
.ga-panel h3{font-size:clamp(1.18rem,4vw,1.5rem);margin-bottom:.5em}
.ga-panel .cta-points{margin:0}
.ga-panel-note{margin:18px 0 0;font-size:.93rem;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════════
   5. DROBNOSTI — logo klienta u případu, poznámka k ceně.
   ═══════════════════════════════════════════════════════════════════════════ */
.ga-client{display:flex;justify-content:center;margin:0 0 18px}
.ga-client img{height:44px;width:auto}
/* Poznámka k ceně stojí v sekci s bílým pozadím, takže si (stejně jako
   .pricing-note na homepage) bere pozadí stránky, aby z ní nebyla bílá díra. */
.ga-price-note{text-align:left}
@media(prefers-reduced-motion:reduce){
  .ga-serp-caret{animation:none}
}

/* ── Ceník reklamy: tři částky, které se nesmí slévat ─────────────────────
   Nadstavba (od nás, jednorázově) · správa (volitelně, měsíčně) · rozpočet
   (platí se přímo Googlu). Poslední karta je schválně tlumená — nejsou to
   naše peníze a nemá vypadat jako naše položka.
   ⚠️ Ceny se sem NIKDY nepíšou číslem, jdou z config/pricing.php. */
.gaprice{display:grid;gap:18px;grid-template-columns:1fr;align-items:start;
  max-width:1120px;margin:0 auto}
@media(min-width:900px){ .gaprice{grid-template-columns:repeat(3,1fr);gap:20px} }
/* Dvě karty v sekci „Kolik stojí reklama na Googlu?" (23. 9. 2026): rozpočet
   Googlu + nadstavba. Užší mřížka, ať na desktopu nezůstane prázdný třetí sloupec. */
.gaprice--two{max-width:760px}
@media(min-width:900px){ .gaprice--two{grid-template-columns:repeat(2,1fr)} }
.gaprice-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 22px}
.gaprice-card--hi{border-color:var(--orange);box-shadow:0 10px 34px rgba(239,96,29,.14)}
/* Rozpočet nejde přes nás — karta je proto bez výplně a bez stínu, aby
   opticky nepatřila k našim položkám. */
.gaprice-card--muted{background:none;border-style:dashed}
.gaprice-lab{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.06rem;margin-bottom:.4em}
.gaprice-card--hi .gaprice-lab{color:var(--orange-600)}
.gaprice-num{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(1.7rem,5vw,2.3rem);line-height:1;letter-spacing:-.03em}
.gaprice-card--hi .gaprice-num{color:var(--orange-600)}
.gaprice-card--muted .gaprice-num{font-size:clamp(1.25rem,3.6vw,1.6rem);color:var(--muted)}
.gaprice-when{color:var(--muted);font-size:.92rem;margin:.6em 0 16px;
  padding-bottom:16px;border-bottom:1px solid var(--border)}
.gaprice-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gaprice-list li{position:relative;padding-left:28px;color:var(--muted);
  font-size:.94rem;line-height:1.5}
.gaprice-list li::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;
  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}
.gaprice-card--muted .gaprice-list li::before{background:var(--navy-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2547' stroke-width='3' stroke-linecap='round'><path d='M5 12h14'/></svg>") center/12px no-repeat}
.gaprice-list b{color:var(--navy);font-weight:600}
.gaprice-after{text-align:center;color:var(--muted);font-size:.96rem;line-height:1.6;
  max-width:78ch;margin:26px auto 0}
.gaprice-after b{color:var(--navy);font-weight:600}