/* ══════════════════════════════════════════════════════════════════════════
   /tvorba-webu-kladno — stylopis JEN pro místní stránku (23. 8. 2026).
   Načítá se přes $extra_css, takže na žádnou jinou stránku nesahá.

   ⚠️ Prefix `tk-`. Nepoužívat `tw-` — to jsou třídy /sluzby/tvorba-webu
   a ty žijí ve vlastním souboru; kolize by se projevila až na jedné z těch
   dvou stránek a nikdo by nevěděl proč.
   ⚠️ Mapka (.mapcard/.mapdia) i karty ceníku, kroky, FAQ a kontaktní blok
   berou styly z base.css. Tady se NEPŘEPISUJÍ — jsou sdílené s dalšími
   stránkami a přepis by se rozlezl jinam.
   ⚠️ Žádná písma navíc, žádné externí požadavky (§8).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hlavička ─────────────────────────────────────────────────────────────
   H1 je schválně holý „Tvorba webu Kladno" (přesná shoda, majitel 23. 8. 2026),
   takže veškerou práci s tónem odvádí odstavec pod ním. */
.tk-hero-cta{margin-top:26px;max-width:560px}
.tk-hero-note{margin:18px 0 0;color:var(--muted);font-size:.95rem;max-width:62ch}

/* ⚠️ TŘÍDA `.tk-hero` PŘIBYLA 24. 8. 2026 VEDLE `.nhero` a je tu jen proto, aby
   se šly ty tři věci níž zamknout NA TUHLE STRÁNKU. `.nhero` samotné sdílí
   homepage i /lp/ — cokoli pod holým `.nhero` by se hnulo na třech stránkách
   naráz (to varuje hlavička souboru). Pod `.tk-hero` se hnout nemůže nic. */

/* Podnadpis pod H1 dědí z `.h1-sub` šedou. První věta ale říká, KDO jsme, a to
   je nejdůležitější fakt na stránce o místní firmě — patří do navy, ne do šedé. */
.tk-hero .h1-sub strong{color:var(--navy);font-weight:600}

/* ⚠️ Cenový řádek má v base.css `max-width:600px`, což je míra ušitá LP: tam
   stojí „hotovo do 7 dní od podkladů". Tady je plné „od DODÁNÍ podkladů“, které
   se do 600 px nevešlo a poslalo samotné slovo „podkladů" na druhý řádek —
   osiřelé slovo pod vycentrovanou větou je přesně ten detail, po kterém stránka
   vypadá nedodělaně. Zkrátit text na verzi z LP by bylo levnější, ale §3 chce
   u každého „hotovo do 7 dní" i to, odkdy se lhůta počítá. Rozšiřuje se proto
   sloupec, ne krátí slib. */
.tk-hero .hero-price{max-width:700px}

/* Mezera pod hodnocením: do ní se zespodu zasouvají karty rychlých faktů
   (viz níž). Bez ní by karty ležely na švu mezi sekcemi a překryly hodnocení. */
.tk-hero{padding-bottom:110px}
@media(min-width:880px){ .tk-hero{padding-bottom:118px} }

/* ── Rychlá fakta ─────────────────────────────────────────────────────────
   Pět údajů, o které se člověk opře při první návštěvě. Na mobilu jeden pod
   druhým, od 640 px dva sloupce, na širokém displeji všech pět vedle sebe. */
/* ⚠️ PŘESTAVĚNO 24. 8. 2026 (Alexandr: „vypadá to lacině"). Do té doby byla
   sekce bílý pruh vysoký 34+106+34 px vklíněný mezi dvě krémové sekce a v něm
   tři KRÉMOVÉ karty s vlasovým rámečkem. Krém na bílé má kontrast 1,03:1
   (viz poznámka u --navy-tint v base.css), takže karty nebyly skoro vidět
   a celé to četlo jako proužek, který mezi sekcemi zbyl, ne jako sekce.

   Teď karty VYSTUPUJÍ ZE ŠVU: sekce má nulové horní odsazení, seznam se
   zápornou mezerou zasune nahoru do krémového hero (které si na to v `.tk-hero`
   drží spodní odsazení) a karty jsou BÍLÉ se stínem. Bílá na krému má kontrast,
   který krém na bílé nikdy mít nemohl, a stín z nich udělá jednu vrstvu nad
   předělem — pruh tím zmizí a zůstane podstavec hlavičky.
   ⚠️ Záporná mezera musí zůstat menší než výška karty, jinak karty vylezou
   nad hodnocení v hero. Drží to spodní odsazení `.tk-hero` — mění se OBĚ
   hodnoty najednou, nebo ani jedna. */
/* ⚠️ `display:flow-root` NENÍ OZDOBA, DRŽÍ CELÝ TEN EFEKT. Sekce nemá horní
   odsazení ani rámeček, takže záporná horní mezera seznamu uvnitř PROTEČE ven
   (slučování mezer) a místo karet posune nahoru celou bílou plochu i se švem —
   karty pak sedí přesně tam co dřív a je to jen jinak vysoký pruh. Ověřeno
   měřením: bez tohohle řádku se karty nehnuly ani o pixel a jen se zvedl šev.
   `flow-root` udělá ze sekce vlastní blokový kontext, mezera zůstane uvnitř
   a nahoru se posunou karty. */
.tk-facts-sec{padding:0 0 44px;display:flow-root}
.tk-facts{list-style:none;margin:-70px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:1fr;position:relative;z-index:2}
@media(min-width:640px){ .tk-facts{grid-template-columns:1fr 1fr} }
/* ⚠️ Tři sloupce, ne pět: blok se 24. 8. 2026 zkrátil na tři položky (dvě se
   přesunuly do pruhu důvěry v hero). Při `repeat(5,…)` zůstaly dva prázdné sloupce. */
@media(min-width:1000px){ .tk-facts{grid-template-columns:repeat(3,1fr);gap:12px} }
/* ⚠️ `align-content:start` je nutné: karty se v mřížce natahují na stejnou
   výšku a bez něj se text v kratší kartě („Nelíbí se? Neplatíte") svisle
   vycentroval, zatímco vedle začínal nahoře. */
.tk-facts li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 18px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;row-gap:3px;align-items:start;align-content:start}
/* Ikona dostala oranžové kolečko — stejný rukopis jako `.tk-why-ic` o sekci níž,
   ať obě řady karet vypadají jako jedna rodina, ne jako dva různé weby. */
.tk-facts .ic{grid-row:1 / span 2;width:38px;height:38px;padding:8px;border-radius:10px;
  background:var(--orange-tint);color:var(--orange-600);margin-top:1px}
.tk-facts b{font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:1.02rem;line-height:1.3}
/* ⚠️ `li > span`, ne `span` — popisný text je PŘÍMÝ potomek položky.
   Volný selektor přebarvil i <span class="tk-nowrap"> uvnitř <b>, takže
   cena v nadpisu karty ztratila tučnost a ztmavla do šedé. */
.tk-facts li > span{color:var(--muted);font-size:.9rem;line-height:1.45}

/* ── Proč místní ──────────────────────────────────────────────────────────
   Stejný rytmus jako `.tw-kde` na stránce služby, jen ve vlastním souboru,
   aby se ty dvě stránky nemohly navzájem přepsat. */
.tk-lead{color:var(--muted);font-size:1.02rem;line-height:1.7;margin:0 0 26px}
.tk-lead b{color:var(--navy);font-weight:600}
.tk-lead i{font-style:italic}
.tk-why{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){ .tk-why{grid-template-columns:1fr 1fr;gap:18px} }
/* ⚠️ Ikona je v mřížce vlevo přes oba řádky (nadpis + text), ne nad nadpisem —
   jinak se karty s dvouřádkovým nadpisem rozjedou proti jednořádkovým.
   `align-content:start` ze stejného důvodu jako u .tk-facts: sourozenci se
   natahují na stejnou výšku a kratší karta by si text vycentrovala. */
.tk-why-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 20px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;
  column-gap:14px;align-content:start;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.tk-why-box:hover{border-color:#d9d2c4;box-shadow:0 10px 30px rgba(26,37,71,.08);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){ .tk-why-box{transition:none} .tk-why-box:hover{transform:none} }
.bg-surface .tk-why-box{background:var(--bg)}
.tk-why-ic{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;flex:none;
  background:var(--orange-tint);color:var(--orange-600);display:grid;place-items:center;margin-top:2px}
.tk-why-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tk-why-box b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.06rem;margin-bottom:.42em;line-height:1.3;align-self:center}
/* ⚠️ DVOUŘÁDKOVÝ NADPIS U VŠECH KARET (24. 8. 2026) — kvůli tomu, co bylo na
   stránce vidět jako „rozbité". Mřížka natáhne obě karty v řadě na stejnou
   výšku, jenže dvě ze čtyř mají nadpis na dva řádky a dvě na jeden. Text tím
   pádem začínal v každé kartě jinde a v té s kratším obsahem zbylo dole ~90 px
   prázdna (změřeno). Zkracováním a dopisováním textů se to dohání donekonečna:
   jakákoli budoucí úprava věty ten rozdíl vrátí.
   Rezervované dva řádky nadpisu srovnají START TEXTU u všech karet na stejnou
   výšku, takže zbývá dorovnat jen délku odstavců — a ta je po úpravě 24. 8.
   v rozmezí jednoho řádku. Prázdno kleslo z ~90 px na ~24 px.
   ⚠️ AŽ OD 760 px, tedy tam, kde karty stojí ve dvou sloupcích. Na mobilu je
   každá karta v řadě sama, srovnávat není s čím a rezervovaný řádek by pod
   krátkým nadpisem jen dělal díru. */
@media(min-width:760px){ .tk-why-box b{min-height:2.6em;align-self:start} }
.tk-why-txt{color:var(--muted);font-size:.95rem;line-height:1.55}
.tk-why-box i{font-style:italic}
@media(max-width:479px){
  /* Na úzkém displeji by ikona ukrojila příliš ze šířky textu — jde nad nadpis. */
  .tk-why-box{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:10px}
  .tk-why-ic{grid-row:auto}
}

/* ── Kam dojedeme: text + mapka vedle sebe ───────────────────────────────
   Pod 820 px jde mapka pod text — schéma o osmi obcích je v úzkém sloupci
   nečitelné. */
.tk-map-top{display:grid;gap:26px;grid-template-columns:1fr;align-items:center}
@media(min-width:820px){ .tk-map-top{grid-template-columns:1fr 1fr;gap:40px} }
.tk-map-text .tk-lead{margin-bottom:1em}
.tk-map-text .tk-lead:last-child{margin-bottom:0}
.tk-map-top .mapcard{margin:0}

/* ── Drobnosti ────────────────────────────────────────────────────────── */
/* ⚠️ Ceny mají v config/pricing.php OBYČEJNOU mezeru („9 999 Kč"), takže se
   uprostřed částky lámou na konci řádku — v odpovědním odstavci pod H1 to
   vypadalo jako „na 9 / 999 Kč". Config kvůli tomu neměníme (je to soubor,
   který upravuje i majitel, a nezlomitelná mezera se v něm špatně píše);
   řeší se to obalem v HTML. */
.tk-nowrap{white-space:nowrap}
.tk-center{text-align:center}
.tk-muted{color:var(--muted);font-size:.95rem;margin:26px auto 0;max-width:70ch;line-height:1.6}
.tk-muted b{color:var(--navy);font-weight:600}

/* ── Místní důkaz pod kartami referencí (23. 9. 2026) ─────────────────────
   Nahradil jednu šedou větu o stěhovací firmě (ledger C6/A16). Tři krátké
   položky: kladenská zakázka s doslovnou větou z recenze, naše rodinná firma
   s odkazem na případovou studii, adresa. Bílé na krému jako `.tk-why-box`,
   ať to na stránce nepůsobí jako nová komponenta. */
.tk-local{list-style:none;margin:28px auto 0;padding:0;max-width:74ch;display:grid;gap:12px}
.tk-local li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;color:var(--muted);font-size:.95rem;line-height:1.6}
.tk-local b{color:var(--navy);font-weight:600}
.tk-local-src{white-space:nowrap}
@media(max-width:420px){ .tk-local-src{white-space:normal} }

/* „Aktualizováno" pod FAQ — datum z filemtime(), drobné a tlumené. */
.tk-updated{margin:14px auto 0;color:var(--muted);font-size:.85rem}