/* ═══════════════════════════════════════════════════════════════════════════════ MOBILNÍ VRSTVA — vlastní design pro telefon (12. 8. 2026) Davidovo zadání: „nechci web, který se jen přizpůsobí šířce, ale něco, co je přímo stavěné pro mobil." PROČ JEDNO HTML A NE DRUHÁ VERZE STRÁNEK: Google indexuje mobil-first a servírovat jiný obsah podle zařízení je nejrychlejší cesta, jak si rozbít pozice (a taky by to znamenalo udržovat 82 stránek dvakrát). Obsah proto zůstává stejný do posledního písmene — mění se LAYOUT a INTERAKCE, tedy přesně to, co dělá rozdíl mezi „zmenšeným desktopem" a appkou. Co je na mobilu jinak než na desktopu: · spodní navigace pod palcem místo lišty nahoře (a hamburgeru), · široké tabulky se rozpadnou na karty — 5 sloupců na 375 px nikdy nebude čitelných, · obsah článku (kotvy) je zásuvka, ne dlouhý seznam na začátku textu, · hlavní akce je vždy po ruce ve spodním pruhu, ne někde v textu, · větší písmo, širší řádkování, méně orámování — čte se to v ruce, ne u stolu. Vrstva se zapíná pod 860 px NEBO třídou `mobil` na (tu dává js/mobil.js podle skutečného zařízení, ne jen podle šířky okna). ═══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { /* ── ZÁKLADNÍ RYTMUS ─────────────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; } body { font-size: 17px; /* na telefonu se čte z ~30 cm, ne z 60 */ line-height: 1.72; padding-bottom: 76px; /* místo pro spodní navigaci */ } main, .container, .wrap, article { padding-left: 18px; padding-right: 18px; } p { margin: 0 0 1.15em; } h1 { font-size: 1.72rem; line-height: 1.22; letter-spacing: -.01em; margin: .35em 0 .5em; } h2 { font-size: 1.32rem; line-height: 1.3; margin: 1.9em 0 .55em; } h3 { font-size: 1.08rem; line-height: 1.35; margin: 1.5em 0 .45em; } /* Obrázky ať drží tvar a nezvětšují stránku */ img, video, iframe, svg { max-width: 100%; height: auto; } /* ── HORNÍ LIŠTA: jen logo + zkratka k nástroji ───────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border, #E3E6E8); } .site-nav .nav-logo { font-size: 1.02rem; } /* Desktopové odkazy na mobilu nemají co dělat — vše je ve spodní navigaci a v zásuvce „Víc". Zůstávají v HTML kvůli robotům a odkazové struktuře. */ .site-nav .nav-links { display: none !important; } /* Hamburger (dělá ho js/nav.js) na mobilu končí — otevíral by .nav-links, které jsou skryté, a dvě navigace vedle sebe jen matou. Vše je dole a v zásuvce „Víc". */ .nav-toggle { display: none !important; } /* Desktopové CTA v liště nahrazuje .m-nav-cta (kratší, vejde se vedle loga) */ .site-nav .nav-cta { display: none !important; } /* Pilulka nad nadpisem má uvnitř s číslem. `inline-flex` z toho na úzké obrazovce udělá tři sloupce, které se každý zalomí zvlášť („PERSONALIZOVANÝ KVÍZ · ASI | 90 | SEKUND"). V block kontextu text zase teče jako věta. `!important` je tu nutný: pravidlo bydlí v