/* ═══════════════════════════════════════════════════════════════════════
DOMINIK HODA — Unhošť 2026
JEDNA RODINA (Archivo 100–900). JEDNA ODSAZOVACÍ STUPNICE. TŘI POLOMĚRY.
OSM VELIKOSTÍ PÍSMA.
Newsreader byl smazán: v uvnitř serifového odstavce proto fyzicky přepnul
na Archivo — nebyl to styl, byla to konstrukční vada. K tomu x-výška
Archivo 0,526 em vs. Newsreader 0,433 em: při stejném font-size vypadal
Archivo o 21–24 % větší, takže deklarovaná a vnímaná hierarchie mířily
proti sobě. To je ta „nejednotnost“.
═══════════════════════════════════════════════════════════════════════ */
:root{
/* ── PÍSMO ─────────────────────────────────────────────────────────── */
--ff:'Interpunkce', 'Geist','Helvetica Neue',Arial,sans-serif;
/* ── TYPOVÁ STUPNICE — převzato z linkdr.com (Geist) ───────────────
Naměřeno v jejich DOM: H1 60/800/lh 1.0/ls −.033em · H2 36/600/lh 1.11/
ls −.03em · lead 20/500/lh 1.4 · text 16/400/lh 1.5 · popisek 14 ·
mikroverzálky 11/700/ls .12em.
Dvě odchylky, obě kvůli publiku 20–70 let: běžný text je 18 px místo 16
(jejich 16 je článek v appce, tohle čte i sedmdesátiletý) a popisek 15
místo 14. Poměry, váhy a tracking jsou převzaté beze změny. */
/* Jméno v úvodu je největší prvek na stránce — poměr k nadpisu sekce
vychází zhruba 4:1, k odstavci 8:1. To je plakátová stupnice, ne
„nadpis o dva stupně nad textem". */
--t-mega:clamp(50px,9.4vw,148px);
--t-display:clamp(38px,4.6vw,60px);
--t-h2:clamp(28px,3.6vw,50px);
--t-h3:clamp(19px,1.6vw,23px);
--t-lead:clamp(19px,1.5vw,20px);
--t-body:clamp(17px,1.2vw,18px);
--t-ui:16px;
--t-cap:15px;
--t-micro:11px;
/* jejich proklady: H1 = 1.0 (60/60), H2 = 1.11 (40/36), lead 1.4, text 1.5.
H1 zvednuto na 1.06 — 1.0 by v češtině uřízlo háček nad velkým Č. */
/* Souvislý text má jen DVĚ hodnoty: 1.65 pro běžný odstavec a 1.55 pro
větší uvozující větu. Na stránce jich bylo patnáct a čtyři z nich byly
pod 1.45 na textu, který se má číst (1.25, 1.30, 1.40, 1.42) — právě
odtud byl ten pocit sevřenosti. Referenční web, se kterým jsme to
srovnávali, drží 1.60–1.65 a pod 1.45 jde jen u displejových stupňů. */
--lh-display:1.06; --lh-h2:1.04; --lh-h3:1.35; --lh-lead:1.55; --lh-body:1.65;
--ls-display:-.033em; --ls-h2:-.04em; --ls-h3:-.01em;
--ls-txt:0; --ls-caps:.12em;
/* ── BARVY — žádný syrový hex mimo tenhle blok ──────────────────────
Finální paleta (2026-08-31): ODS modrá jako akcent, NOVÁ hlubší
midnight navy jako tmavá, světlé tóny původní. Na tmavém podkladu
je akcent TAKÉ plná ODS modrá — na přání („i dole dej tu ODS"),
midnight navy je dost hluboká, aby na ní byla znát. */
--modr:#034EA2; /* ODS modrá; 8,03:1 na bílé — po experimentech
(#042BBF, #3B61BB…) vráceno na přání zpět */
--modr-tm:#023A79; /* hover */
--modr-sv:#3377C8; /* starší kresby */
--modr-ik:#3377C8; /* akcent na tmavém podkladu (zápatí, kontakt) =
modrá navzorkovaná z nakreslených ikon karet */
--tmava:#071A35; /* midnight navy (nová) */
/* naměřeno v dominik.jpeg — pozadí ateliéru; když je na něm i sekce,
fotka nemá hranu */
--foto-bila:#F9FAFD;
--bila:#FFFFFF;
--seda:#F4F6F9;
--linka:#DFE5EE;
--ink:#0F1B2D; /* 17,3:1 na bílé */
--ink-dim:#4A5A6E; /* 7,07:1 na bílé, 6,54:1 na šedé */
--pole-linka:#7A8CA3; /* 3,44:1 na bílé, 3,18:1 na šedé → WCAG 1.4.11 */
--pole-linka-h:#4A5C71;
--chyba:#A4131B;
--chyba-bg:#FBEDEE;
--zavazek:#0E7C63; /* 4,64:1 na bílé */
--w:#FFFFFF;
--w-dim:rgba(255,255,255,.88);
--w-mute:rgba(255,255,255,.72);
--line-t:rgba(255,255,255,.20);
/* ── MŘÍŽKA A MEZERY ───────────────────────────────────────────────
Dvousloupcové sekce smějí použít JEN jeden ze tří poměrů a JEN
--kol-gap. Dřív bylo na stránce 13 svislých os a 4 různé mezery. */
--edge:clamp(20px,5vw,80px);
--kol-gap:clamp(32px,4vw,64px);
--kol-7-5:minmax(0,7fr) minmax(0,5fr);
--kol-5-7:minmax(0,5fr) minmax(0,7fr);
--kol-6-6:minmax(0,1fr) minmax(0,1fr);
/* jedna 4px stupnice; v gap/margin/padding nesmí být syrová px hodnota */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:96px;
--sekce:clamp(72px,8vw,128px);
/* ── TVARY — tři poloměry a jedno pravidlo ─────────────────────────
--r-pill = navigace a odkazy (něco někam VEDE)
--r-s = pole, odeslání, hlášky (něco DĚLÁ)
--r = fotky a plochy
Dřív jich bylo sedm. */
--r:16px; --r-s:12px; --r-pill:999px;
--line:1px; --line-akcent:3px;
--bar-w:40px; --bar-h:var(--line-akcent);
--hdr:80px; /* motion.js ji měří ze skutečné hlavičky */
--hdr-vule:24px;
--ease:cubic-bezier(.22,.61,.24,1);
/* ── KŘIVKY NÁSTUPU ────────────────────────────────────────────────
Dvě, ne jedna, a v tom je celý rozdíl mezi „nějaké animace tam jsou"
a pohybem, který působí draze.
--ease-prichod je exponenciální doběh: prvek se hned na začátku
rozjede skoro celou dráhu a zbytek dlouho doplouvá do klidu. Tak se
hýbe hmota, která něco váží. Symetrická křivka (rozjezd i dojezd
stejně dlouhý) je naopak to, co dělá pohyb strojovým — a přesně ta
tu předtím byla.
--ease-kryt je pro KRYTÍ a je záměrně jiná a mnohem kratší.
Nejčastější chyba je hnát krytí po téže dlouhé křivce jako pohyb:
text pak skoro sekundu visí poloprůhledný, špatně se čte a celé to
působí rozmazaně. Správně se obsah zviditelní rychle (do zhruba
0,4 s je plně čitelný) a POHYB dojíždí ještě dlouho potom — oko
čte obsah, periferní vidění vnímá dojezd. */
--ease-prichod:cubic-bezier(.16,1,.3,1);
--ease-kryt:cubic-bezier(.33,.9,.4,1);
--stin:0 2px 8px rgba(15,27,45,.05), 0 12px 32px rgba(15,27,45,.06);
--stin-plov:0 2px 6px rgba(15,27,45,.06), 0 10px 30px rgba(15,27,45,.10);
color-scheme:light;
}
/* ── RESET ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overscroll-behavior:none vypne gumové přetažení nad začátek a pod konec
stránky — stejně jako to má landing editoru. Bez toho se na trackpadu
i na telefonu za horní a spodní hranou odhalí šedý podklad prohlížeče
a lepivá hlavička se odlepí. */
/* ── KULATÁ INTERPUNKCE ─────────────────────────────────────────────────
Geist kreslí tečku, čárku, dvojtečku, středník i prostředník jako
ČTVEREČKY. V textu to působí technicky a v drobných stupních to vypadá
jako vada tisku. Montserrat je má kulaté.
Nemění se ale písmo — mění se JEN těch pár znaků. `unicode-range`
omezuje tuhle rodinu na U+2C–2E (čárka, spojovník, tečka), U+3A–3B
(dvojtečka, středník), U+B7 (prostředník), U+2013–2014 (pomlčky)
a U+2026 (výpustka). Všechno ostatní propadne na Geist, protože pro
znaky mimo rozsah se tahle rodina vůbec nezkouší.
Soubor je podmnožina z Google Fonts (Montserrat, variabilní 100–900,
licence SIL OFL), 1,7 kB. Hostuje se u nás, aby web ani tiskové PDF
nezáviselo na cizí URL, která se může změnit.
POŘADÍ V STACKU JE PODSTATNÉ: 'Interpunkce' musí být PŘED 'Geist',
jinak si Geist vezme tečku dřív, než na tuhle rodinu dojde řada. */
@font-face{
font-family:'Interpunkce';
font-style:normal;
font-weight:100 900;
font-display:block;
src:url('fonts/interpunkce-montserrat.woff2') format('woff2');
unicode-range:U+2C-2E, U+3A-3B, U+B7, U+2013-2014, U+2026;
}
html{background:var(--bila);scroll-behavior:smooth;overscroll-behavior:none;
scroll-padding-top:calc(var(--hdr) + var(--hdr-vule));
-webkit-text-size-adjust:100%;
/* macOS kreslí posuvník tence a přes obsah, bez vlastní stopy — Windows
Chromium (Chrome, Edge, Opera) defaultně kreslí širokou neprůhlednou
dráhu, na téhle stránce bílý pruh vpravo. Vlastní styl to sjednotí
na obou platformách na tenký, poloprůhledný pruh bez dráhy. */
scrollbar-width:thin;scrollbar-color:rgba(11,28,58,.22) transparent}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:rgba(11,28,58,.22);
border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box}
html::-webkit-scrollbar-thumb:hover{background:rgba(11,28,58,.38);
border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box}
body{font-family:var(--ff);font-weight:400;font-synthesis-weight:none;
background:var(--bila);color:var(--ink);overscroll-behavior:none;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{-webkit-tap-highlight-color:transparent}
::selection{background:var(--modr);color:#fff}
/* Zalamování 2026: balance drží řádky nadpisu opticky stejně dlouhé,
pretty hlídá sirotky (osamocené slovo na posledním řádku odstavce).
Obojí je progresivní vylepšení — prohlížeč bez podpory je ignoruje.
POZOR: balance NEsmí na nadpisy sekané přes splitLines (R-lines) —
motion.js jim přepisuje textContent na po řádcích a balance by
se pral s ručním zlomem; těm zůstává výchozí zalamování. */
h1,h2:not(.R-lines),h3,.z-otazka{text-wrap:balance}
p{text-wrap:pretty}
:focus{outline:none}
/* Dvoubarevný prstenec: tmavé jádro + světlý lem drží ≥3:1 na bílé,
na šedé i na plné modré. Pole formuláře mají vlastní, decentnější. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;
box-shadow:0 0 0 6px var(--bila),0 0 0 8px var(--ink);border-radius:var(--r-s)}
.na-modre :focus-visible,.na-tmave :focus-visible,#hlavicka :focus-visible{
outline-color:var(--bila);
box-shadow:0 0 0 6px rgba(255,255,255,.55),0 0 0 8px var(--bila)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* ── TYPOGRAFIE ───────────────────────────────────────────────────────
Velikost ani rodinu neurčuje nikdy element — vždy třída. */
h1,h2,h3{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}
.t-display{font-size:var(--t-display);font-weight:800;line-height:var(--lh-display);
letter-spacing:var(--ls-display);color:var(--ink)}
/* Nadpisy sekcí nesou 60 px a váhu 800. Na 36 px a šestistovce byly proti
sedmdesátce v úvodu neviditelné a stránka neměla druhý typografický
stupeň — jen obří jméno a pak samý odstavec. */
.t-h2{font-size:var(--t-h2);font-weight:800;line-height:var(--lh-h2);
letter-spacing:var(--ls-h2);color:inherit}
/* MEZERA POD NADPISEM — jedna hodnota pro celý web. .t-h2 sama žádnou
neměla, takže tři sekce (devatenáct, poradna, otázky) měly odstavec
nalepený přímo pod účařím: naměřeno 0 px. U stupně 50 px s prokladem
1,04 je řádkový box těsný, takže nula znamená doslova nulu.
Hodnota je --s4, protože přesně tu má vztah nadpis→text všude jinde
(čtyři body programu i „Díky, mám to."). Dřív tu stálo --s6 podle sekce
„O mně", jenže 32 px byla na webu osamocená výjimka — sjednoceno dolů,
ne nahoru. Odsazení sedí na ODSTAVCI, ne na nadpisu: nadpisy, po kterých
následuje mřížka nebo obrázek, si tím drží vlastní odstup. */
.t-h2 + p{margin-top:var(--s4)}
/* Totéž pro nadpis, po kterém následuje blok místo odstavce — „Kde mě
potkáte." v kontaktu měla taky nulu. */
.t-h2 + div{margin-top:var(--s4)}
.t-h3{font-size:var(--t-h3);font-weight:700;line-height:var(--lh-h3);
letter-spacing:var(--ls-h3);color:inherit}
.t-lead{font-size:var(--t-lead);font-weight:500;line-height:var(--lh-lead);
letter-spacing:var(--ls-txt);color:var(--ink);max-inline-size:44ch}
.t-body{font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);
color:var(--ink-dim);max-inline-size:62ch}
.t-cap{font-size:var(--t-cap);font-weight:500;line-height:1.45;color:var(--ink-dim)}
.t-micro{font-size:var(--t-micro);font-weight:700;line-height:1.3;
letter-spacing:var(--ls-caps);text-transform:uppercase}
.t-zavazek{color:var(--zavazek);font-weight:600;margin-top:var(--s4)}
/* ── IKONY — Tabler Icons (MIT) ─────────────────────────────────────── */
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-ikonou{display:flex;align-items:flex-start;gap:var(--s3)}
.t-micro.s-ikonou{align-items:center;gap:var(--s2)}
.ico-btn{width:1.05em;height:1.05em;stroke-width:2.2;
transition:transform .28s var(--ease)}
.btn:hover .ico-btn{transform:translateX(4px)}
/* ── OBAL, PLOCHY, HLAVA SEKCE ──────────────────────────────────────── */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--edge)}
section{padding-block:var(--sekce)}
/* #kdo → #program: plný --sekce nahoře i dole na obou (až 128+128 px)
dělal mezi poslední kartou „Tři témata" a „Co chci změnit" díru, jako
by spolu vůbec nesouvisely — přitom na sebe plynule navazují (kroky
jsou pokračování programu). Míň prostoru na tomhle jednom švu, ne na
celé stránce. */
#kdo{padding-top:var(--s7);padding-bottom:var(--s8)}
#program{padding-top:var(--s8)}
/* Kontakt → patka: plných 128 px pod posledním řádkem kontaktů dělalo
před nízkou patkou prázdný pás; 48 px stačí, patka má vlastní odstup.
A stejně tak nahoře: plný --sekce nad „Jsem tu pro vás." dělal mezi
poradnou a kontaktem díru — 64 px drží oddělení sekcí, ne propast. */
/* Kontakt i patka v jedné hluboké tmavě modré (světlá šedá i ODS modrá
plocha vyzkoušeny a zamítnuty) — dole je zkrátka jen tmavá. */
#kontakt{padding-top:var(--s8);padding-bottom:var(--s7)}
/* jediný způsob, jak se sekce otevírá */
.sek-hlava{margin-bottom:var(--s8)}
.sek-hlava > * + *{margin-top:var(--s5)}
.zvyrazneni{color:var(--modr);font-weight:700}
/* Nadpis témat má i na širokých displejích držet dva řádky zalomené
po „jsou" („Tři témata, která jsou / pro mě důležitá") — na plnou
šířku byl jednořádkový a působil jako titulek novin, ne jako blok.
17ch je font-relativní, takže zlom drží na každém rozlišení; změřené
pásmo správného zlomu je 16 až 18ch (19ch už láme po „pro mě",
14ch po „která"). Na mobilu (pod 561 px) se nechává přirozené
zalomení sloupcem — 17ch by tam byl UŽŠÍ než sloupec a rozbil by
ho na tři řádky. */
@media(min-width:561px){#kdo .sek-hlava h2{max-width:17ch}}
/* Zpátky na čistý text bez plochy — obdélníkový štítek (i bílý na
modré, i světle modrý na tmavé) čte se jako label komponenta ze
staršího webdesignu. Rozlišení nese barva a prostrkaná verzálka
samotná, žádná krabička okolo. */
.stitek{color:var(--modr);margin-bottom:var(--s4);display:block}
/* Tři nosné rubriky (Co chci prosadit / Co chci změnit / Máte otázku?)
jako pilulka v ODS modré s bílým textem — na přání zadavatele mají
vystoupit z řady běžných štítků. Ostatní štítky zůstávají holé
verzálky. */
.stitek--pilulka{display:inline-block;padding:var(--s2) var(--s4);
border-radius:var(--r-pill);background:var(--modr);color:var(--w)}
/* MODRÉ ČÁRKY ODSTRANĚNY z celého webu na přání zadavatele. Byly nad
štítkem sekce, nad štítkem programového bodu, nad nadpisem formuláře,
vlevo od kickeru v úvodu a vlevo od echa odeslané otázky. Rozlišení
nese samotná mikrotypografie — prostrkané verzálky v modři jsou
dostatečně odlišené i bez pruhu. */
/* Šedá je pryč ze všech světlých sekcí — jen bílá, tmavá a modrá zůstávají
jako barevné plochy. .na-sede je teď stejná bílá jako .na-bile; jméno
třídy zůstalo (mění se přes ni layout, ne barva), ale barvu nenese. */
.na-bile{background:var(--bila)}
.na-sede{background:var(--bila)}
.na-modre{background:var(--modr);color:var(--w)}
.na-modre .stitek{color:var(--w)}
.na-modre .t-body,.na-modre .t-lead{color:var(--w-dim)}
.na-tmave{background:var(--tmava);color:var(--w)}
/* Štítky na tmavé v modré Z IKON (--modr-ik) — plná ODS byla na tmavé
moc tmavá a bílá zase žádný akcent; tahle střední modrá je táž, jakou
nesou nakreslené ikony karet, takže nejde o novou barvu navíc. */
.na-tmave .stitek{color:var(--modr-ik)}
.na-tmave .t-body,.na-tmave .t-lead{color:var(--w-dim)}
/* tři poměry pro celou stránku, jedna mezera */
.poradna,.otazky-hlava,.otazky{display:grid;column-gap:var(--kol-gap)}
.poradna{grid-template-columns:var(--kol-7-5)}
.otazky-hlava{grid-template-columns:var(--kol-7-5)}
/* Celá sekce na světlé šedé: bílá plocha kolem krátkého akordeonu
působila prázdně. Na šedé dostanou bílé karty i bílá pole formuláře
obrys plochy a sekce se opticky zaplní. */
#otazky{background:var(--seda)}
/* Užší levý sloupec, širší akordeon — poměr z referenčního vzoru.
Dvě řádky mřížky: nahoře vlevo úvod (pilulka, nadpis, odstavec),
pod ním formulář; akordeon sedí ve DRUHÉ řádce vedle formuláře
a středí se VŮČI NĚMU (align-self:center), ne vůči celému sloupci
i s nadpisem — přesně tak to zadavatel chtěl. */
.otazky{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
align-items:start;row-gap:var(--s6)}
.otazky-uvod{grid-column:1;grid-row:1}
.otazky .formular-panel{grid-column:1;grid-row:2;align-self:start;width:100%}
/* Seznam se NEcentruje živě přes align-self — při rozbalení odpovědi by
se celý přepočítal a poskočil. Kotví ho jednorázový margin-top, který
po načtení spočítá page.js tak, aby SLOŽENÝ seznam seděl uprostřed
výšky formuláře; rozbalená odpověď pak roste jen SMĚREM DOLŮ. */
.otazky .faq-seznam{grid-column:2;grid-row:2;align-self:start}
.otazky-uvod > h2{margin-top:var(--s5)}
.otazky-uvod > .t-lead{margin-top:var(--s5);font-size:15px;line-height:1.65;
color:var(--ink-dim);max-width:46ch}
/* ── FAQ AKORDEON (podle referenčního vzoru) ─────────────────────────
Položka = zaoblená světlá karta; řádek otázky nese kulaté modré
tlačítko se šipkou, odpověď se rozbaluje pod ním. Výška se animuje
trikem grid-template-rows 0fr→1fr — jediný způsob, jak plynule
rozbalit obsah neznámé výšky bez měření v JS. */
/* Barevná řeč akordeonu = řeč zbytku webu: klidná šedá karta, na
hover se ohlásí vlasovým obrysem, OTEVŘENÁ karta zbělá, dostane
modrý vlasový obrys a měkký stín — stejné „vystoupení z plochy",
jakým mluví dlaždice a panely jinde. Otázka otevřené karty se
přebarví do ODS modré. */
.faq-pol{border:var(--line) solid var(--linka);border-radius:16px;
background:var(--bila);overflow:hidden;
transition:background .25s var(--ease),border-color .25s var(--ease),
box-shadow .25s var(--ease)}
@media(hover:hover){.faq-pol:not(.otevrena):hover{border-color:var(--pole-linka)}}
/* OTEVŘENÁ karta je plná ODS modrá s bílým textem (referenční vzor) —
jediná sytá plocha v seznamu, nejde přehlédnout, která odpověď se čte. */
.faq-pol.otevrena{background:var(--modr);border-color:var(--modr);
box-shadow:var(--stin)}
.faq-pol.otevrena .faq-ot{color:#fff}
.faq-pol.otevrena .faq-text{color:rgba(255,255,255,.88)}
.faq-pol.otevrena .faq-meta{color:rgba(255,255,255,.62)}
.faq-pol.otevrena .faq-meta b{color:#fff}
.faq-pol.otevrena .faq-sip{background:#fff;color:var(--modr)}
.faq-ot:focus-visible{outline:3px solid var(--modr);outline-offset:-3px;
border-radius:16px}
.faq-pol + .faq-pol{margin-top:var(--s4)}
.faq-ot{display:flex;align-items:center;justify-content:space-between;
gap:var(--s4);width:100%;padding:18px var(--s5);cursor:pointer;
text-align:left;font-family:inherit;font-size:17px;font-weight:600;
letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.faq-sip{flex:none;width:32px;height:32px;border-radius:50%;
background:var(--modr);color:#fff;display:flex;align-items:center;
justify-content:center;transition:transform .3s var(--ease),
background .2s var(--ease)}
.faq-sip svg{width:13px;height:13px;fill:none;stroke:currentColor;
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Hover ztmavuje kolečko jen na ZAVŘENÝCH kartách — na otevřené modré
kartě musí kolečko zůstat bílé (tmavě modrá na modré vypadala špatně). */
@media(hover:hover){
.faq-pol:not(.otevrena) .faq-ot:hover .faq-sip{background:var(--modr-tm)}
.faq-pol.otevrena .faq-ot:hover .faq-sip{background:#fff;color:var(--modr)}
}
.faq-pol.otevrena .faq-sip{transform:rotate(180deg)}
/* Výšku rozbalení animuje JS přes pevné px (viz page.js): přechod
grid-template-rows 0fr→1fr část mobilních prohlížečů neumí plynule
a rozbalení tam SKÁKALO. height v px umí animovat všechno. */
.faq-telo{height:0;overflow:hidden;
transition:height .42s var(--ease)}
/* Obsah se nevytahuje jen výškou — zároveň se prolne a dojede pár pixelů
shora. Bez toho vypadá text během rozjezdu jako přiskřípnutý pod
hranou; s prolnutím je vidět odpověď, ne posouvající se pruh.
Otevírání má malé zpoždění (text nabíhá, až je pro něj místo),
zavírání ho nemá — text zmizí dřív, než se karta stihne sesypat. */
.faq-telo-in{min-height:0;opacity:0;transform:translateY(-5px);
transition:opacity .2s var(--ease),transform .2s var(--ease)}
.faq-pol.otevrena .faq-telo-in{opacity:1;transform:none;
transition:opacity .34s var(--ease) .07s,transform .34s var(--ease) .07s}
.faq-text{padding:0 var(--s5);color:var(--ink-dim);
font-size:14.5px;line-height:1.65}
.faq-text + .faq-text{padding-top:var(--s3)}
.faq-meta{display:block;padding:var(--s3) var(--s5) var(--s4);
font-size:12.5px;color:var(--pole-linka-h)}
.faq-meta b{font-weight:700;color:var(--modr)}
@media(prefers-reduced-motion:reduce){
.faq-telo{transition:none!important}.faq-sip{transition:none}
.faq-telo-in{transition:none!important;opacity:1;transform:none}
}
/* ── HLAVIČKA — plovoucí pilulka ────────────────────────────────────── */
/* ŽÁDNÝ will-change:transform na hlavičce ani pilulce — NIKDY. Zkusil se
jako „zrychlení" scrollu a rozbil mobilní menu: will-change:transform
dělá z prvku containing block pro position:fixed potomky, takže se
.hl-menu-wrap (fixed, inset:0 — viz komentář u něj: musí ležet vůči
VIEWPORTU, ne vůči pilulce) ukotvil k pilulce a panel se ořízl do ní.
Plynulosti scrollu to navíc nepomohlo. */
#hlavicka{position:fixed;top:0;left:0;right:0;z-index:100;
padding:var(--s4) var(--edge) 0;
padding-top:calc(env(safe-area-inset-top,0px) + var(--s4));pointer-events:none}
.hl{display:flex;align-items:center;gap:var(--s2);
width:max-content;max-width:100%;margin-inline:auto;pointer-events:auto;
background:rgba(255,255,255,.88);
backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
border:var(--line) solid var(--linka);
border-radius:var(--r-pill);padding:var(--s2) var(--s2) var(--s2) var(--s5);
box-shadow:var(--stin-plov)}
/* flex:none — bez toho se logo v úzké mobilní liště smrskává spolu
s ostatními položkami. U textu by to jen zkrátilo řádek, ale znakový
jelen má šířku auto (dopočítanou z poměru stran), takže smrsknutí
jeho vlastního boxu obraz zdeformuje. Zmenšovat se má nav, ne logo. */
.hl-logo{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;flex:none;
font-size:var(--t-cap);font-weight:800;letter-spacing:-.02em;white-space:nowrap;
text-decoration:none;color:var(--ink);
/* Bez svislé dělicí linky za logem — odstraněno na přání, rozestup
stačí. (Mobilní pravidlo, které linku nulovalo, tím pádem jen
neškodně přebíjí nuly.) */
padding-right:var(--s3);margin-right:var(--s1)}
.hl-logo svg{width:24px;height:24px;fill:var(--modr);flex:none}
/* Logo H s kravatou (hodalogo) místo jelena — rastr s průhledným
pozadím, výška ladí s dřívějším znakem. */
.hl-logo img.hl-logo-znak{width:auto;height:26px;display:block;flex:none}
/* Znakový jelen je 70,9 : 100 (vyšší než široký), ne čtvercový jako
dřívější stylizovaná silueta — pevná šířka by ho zúžila. Šířka auto,
výška daná. */
.hl-logo svg.hl-logo-znak{width:auto;height:26px}
/* Mimo .hl (viz komentář v HTML u #hl-menu-panel) — na desktopu úplně
schovaný, na mobilu se stává celoobrazovkovým panelem. */
.hl-menu-wrap{display:none}
.hl-menu-btn{display:none}
.hl-nav{display:flex;gap:var(--s1)}
.hl-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
white-space:nowrap;padding:0 var(--s3);border-radius:var(--r-pill);
text-decoration:none;color:var(--ink-dim);
font-size:var(--t-cap);font-weight:500;
transition:color .2s var(--ease),background .2s var(--ease)}
@media(hover:hover){.hl-nav a:hover{color:var(--ink);background:var(--seda)}}
.hl-nav a[aria-current="true"]{color:var(--modr);background:rgba(3,78,162,.08)}
.hl-cta{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
padding:0 var(--s5);border-radius:var(--r-pill);background:var(--modr);color:#fff;
font-size:var(--t-cap);font-weight:700;letter-spacing:var(--ls-txt);
text-decoration:none;white-space:nowrap;flex:none;margin-left:var(--s2);
transition:background .2s var(--ease),transform .1s var(--ease)}
.hl-cta:hover{background:var(--modr-tm)}
/* CTA sedí v desktopovém nav MEZI položkami (…Vedení města · Zeptat se ·
Kontakt — pořadí na přání zadavatele). Selektor .hl-nav a (0,1,1) je
silnější než .hl-cta (0,1,0), takže bez téhle přebíjky by pilulka
zdědila šedý vzhled položky. Mobilní panel má vlastní kopii, kde CTA
zůstává samostatně dole — tam tohle neplatí. */
.hl-nav a.hl-cta{padding:0 var(--s5);background:var(--modr);color:#fff;
font-weight:700;margin-left:var(--s2)}
@media(hover:hover){.hl-nav a.hl-cta:hover{background:var(--modr-tm);color:#fff}}
.hl-cta:active{transform:scale(.97)}
.skip{position:absolute;left:var(--s2);top:var(--s2);z-index:200;transform:translateY(-200%);
background:var(--modr);color:#fff;padding:var(--s4) var(--s5);border-radius:var(--r-s);
text-decoration:none;font-weight:700;transition:transform .2s var(--ease)}
.skip:focus{transform:none}
/* ── HERO ─────────────────────────────────────────────────────────────
Světlý úvod. Portrét je původní studiová fotka i s pozadím (#F9FAFD) —
když je na tu barvu nastavená celá sekce, fotka nemá hranu a vytrácí se
do plochy. Proto ne výřez, ne rám, ne stín.
Unhošť leží pod tím jako náznak: zesvětlená filtrem, ne průhledností,
aby v ní nebyla šedivá špína.
Z úvodu editoru VF je převzatý kicker s LEVÝM PRUHEM (ne pilulka
s tečkou — to je nejrozeznatelnější podpis šablony) a dvojice tlačítek.
Naměřeno v předloze portrétu: temeno 4,6 %, zornice 34,8 %, ramena
73,2 % — proto portrét nikdy nesmí do bloku širšího než čtverec. */
/* --bila (čistě bílá). Dřív tu žádná CSS proměnná neuměla přebít
pixely zapečené v souborech samotných (portrét i městské plátno měly
podklad #F9FAFD/#F9FBFC, ne čistou bílou) — na širokém desktopu, kde
ta plocha kolem postavy i po stranách plátna tvoří velké souvislé
pole, to bylo vidět jako ostrý obdélník. Opraveno přímo v obrazových
souborech (jednorázový přepočet pixelů 25. 8., ne v CSS) — mají teď
na těch místech skutečných (255,255,255), takže sekce a fotka
konečně sedí na stejnou hodnotu, ne jen opticky blízkou. */
#hero{position:relative;overflow:hidden;padding:0;background:var(--bila)}
/* Unhošť — náměstí s věží sv. Petra a Pavla.
HOTOVÉ PLÁTNO: snímek je vygradovaný v Photoshopu a má v sobě zapečenou
geometrii, obě rozplynutí i krytí. CSS tu proto nemá masku, filtr, opacity
ani blend. Postupně tu bylo všechno z toho — řetězec sepia→hue-rotate→
saturate, dvě masky přes mask-composite, duotón blendem `color`,
isolation:isolate a nakonec mix-blend-mode:multiply. Nic z toho už neplatí
a nic z toho se sem nemá vracet: každá další vrstva efektu se ukázala jako
místo, kde se to rozbije.
Násobení barvou sekce je předpočítané v souboru (viz níže u .hero-mesto),
takže bílá plátna JE #F9FAFD a snímek nemá hranu. */
/* ── SCÉNA: MĚSTO + POSTAVA JAKO JEDEN CELEK ─────────────────────────────
Měřítko scény --s (velikost jednoho pixelu plátna) řídí VÝHRADNĚ výška
sekce. Dřív město běželo na object-fit:cover, tedy na max(šířka, výška):
při zúžení okna se přeškálovalo, kdežto postava viselá na výšce ne — a
kostel Dominikovi ujel za rameno. Teď obojí visí na téže veličině, takže
se nemůžou rozejít při žádné velikosti okna.
Že šířku měřítko neřídí, nevadí: plátno má levou třetinu i spodek čistě
bílé (změřeno: sloupce 0–640 a řádky 1448–1487 jsou přesně 255), takže
na širokém monitoru není co odhalit — bílá vedle bílé. */
.hero-scena{position:absolute;inset:0;z-index:0;overflow:hidden;
pointer-events:none;
/* Měřítko se počítá z TÉŽE hodnoty, jakou má výška sekce — tedy přímo
z min(93vh,890px) z .hero-in. Container query by dala totéž, ale tohle
nic nezapíná a nezavádí do řetězce další zádrhel. Když se výška sekce
v .hero-in změní, MUSÍ se změnit i tady, jinak se scéna rozejde.
DRUHÁ MEZ JE ŠÍŘKA. Jen z výšky by postava na užším okně zabrala 71 %
obrazovky a sazba by neměla kam — tlačítko „Zeptat se“ leželo na saku
(na 1001 px o 172 px, a to už před posunem doleva). Dělitel je 2560,
tedy šířka plátna: obě meze se přesně protínají na 1440 px, takže
schválená kompozice zůstává na pixel stejná a mění se jen pod ní.
Že plátno pak na užším okně nesahá k levému okraji, nevadí — jeho levá
třetina je stejně bílá jako sekce. */
--s:min(calc(min(93vh, 890px) / 1488), calc(100vw / 2560))}
/* PROČ decoding="sync" NA PLÁTNĚ (v index.html) — nesahat na to.
Snímek vnořený dvakrát do absolutně umístěných obalů s overflow:hidden
se s decoding="async" v Chromiu nikdy nezkompozituje: element má správnou
velikost i pozici, je načtený, viditelný, kresba do z něj vrátí
oblohu (55,94,142) — a přesto se nevykreslí vůbec nic. Portrét vedle něj
se kreslil celou dobu právě proto, že sync má. Nepomohl z-index, pevné px
místo calc(), jiné pořadí v DOM ani vypnutý blend; pomohlo jedině sync.
ŽÁDNÝ mix-blend-mode. Dřív tu bylo multiply, aby čistě bílé plátno splynulo
s podkladem sekce. Násobení je teď zapečené rovnou v souboru: plátno je
předem vynásobené barvou #F9FAFD, takže jeho bílá JE barva sekce a hrana
snímku není vidět ani bez blendu. Výsledek je identický, jen o jednu
křehkou vlastnost méně.
Snímek zůstává v obalu a vyplňuje ho na 100 % — geometrii nese obal. */
.hero-mesto{position:absolute;top:0;right:0;z-index:0;overflow:hidden;
width:calc(2560 * var(--s));height:calc(1488 * var(--s))}
.hero-mesto img{width:100%;height:100%;max-width:none;display:block}
/* Levý fade je ZAPEČENÝ přímo v souboru (hladká smoothstep rampa,
plná bílá do px 500, čistá fotka od px 1750) — CSS závoje se zkoušely
dvakrát a vždycky dělaly vlastní viditelný pruh. */
/* Spodní hrana sekce fotku dřív gilotinovala vodorovným řezem. Závoj ji
rozpustí a končí bílou, takže na švu s další sekcí není barevný schod. */
/* Bílý závoj spodní hrany — POUZE PRO MĚSTO. Leží pod portrétem (z-index 1
mezi fotkou města a postavou), ne nad ním. Nad portrétem tvořil DRUHÝ
přechod: začínal výš než rozplynutí zapečené ve výřezu a zesvětloval sako
i košili, takže se přes sebe kreslily dva fady s různým počátkem a bylo to
vidět. Rozplynutí postavy si obstarává výhradně soubor dominik-vyrez9.webp. */
.hero-scena::after{content:'';position:absolute;left:0;right:0;bottom:0;z-index:1;
height:clamp(120px,22%,220px);pointer-events:none;
background:linear-gradient(180deg,rgba(250,251,253,0) 0%,
rgba(252,253,254,.62) 44%,var(--bila) 74%,var(--bila) 100%)}
.hero-in{position:relative;z-index:4;display:flex;flex-direction:column;
justify-content:center;
min-height:min(93vh,890px);
padding-block:calc(var(--hdr) + var(--s5)) var(--s6)}
/* 540 px — táž šířka levého sloupce jako v úvodu editoru. Širší sloupec
dojel textem do fotky. */
.hero-text{min-width:0;max-width:540px}
/* POŘADÍ A POČET PRVKŮ PODLE ÚVODU EDITORU VF — a to je celý smysl téhle
verze: kicker → titulek → jeden odstavec → dvě tlačítka. Čtyři bloky,
nic víc. Předchozí verze měla šest (jméno, claim, odstavec, tlačítka,
telefon, tři fakta) a právě z toho byla nepřehledná.
Jméno se proto přesouvá do kickeru — přesně jak editor drží značku
v řádku „VF REAL ESTATE · VIDEO EDITOR · 2026“ a velký titulek nechává
pro tvrzení. Datum voleb jde do třetího segmentu téhož řádku. */
/* Tři modré webu mají v úvodu každá svou roli: světlá --modr-sv je pruh
u kickeru (netextový prvek, na bílé má 3,04:1 — na text by nestačila),
akcentní --modr nese kurzívu v titulku a druhé tlačítko, hluboká
--tmava vyplňuje hlavní tlačítko a váže úvod na tmavé sekce pod ním. */
.hero-rada{display:inline-block;
font-size:14px;font-weight:600;line-height:1.5;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-dim)}
.hero-rada b{font-weight:800;color:var(--modr)}
/* Titulek nese TVRZENÍ, ne jméno. Druhý řádek kurzívou v akcentu — Geist
má na Google Fonts skutečný italic, takže to není nakloněná antikva. */
/* Titulek úvodu musí vést nad nadpisy sekcí: ty vyrostly na 60 px a při
70 px byl rozdíl 1,17:1, což se nečte jako hierarchie, ale jako chyba. */
/* Zmenšeno z clamp(40px,5.6vw,80px) — ten byl laděný na krátký titulek
(„Číst smlouvy, ne mluvit.“, 24 znaků). Nový titulek („Pomáhám,
zastupuji“ / „a prosazuji zájmy lidí.“, 19–23 znaků na řádek) se do
stejného 540px sloupce při 80px přetékal na víc řádků. 55px je
změřený strop, kde se ještě obě řádky vejdou každá na jeden řádek
při 540px šířce sloupce. */
.hero-jmeno{margin-top:var(--s5);font-size:clamp(30px,4.4vw,55px);
font-weight:800;line-height:1.0;letter-spacing:-.042em;color:var(--ink)}
.hero-jmeno .l1,.hero-jmeno .l2{display:block}
.hero-jmeno .l2{font-style:italic;color:var(--modr)}
/* Datum + výzva k volbám — vlastní řádek pod titulkem, mikro-caps jako
jinde na webu (kicker, patička). Na přání kandidáta v modré pilulce,
ne jako holý text: v úvodu je to jediná informace s termínem a musí být
vidět na první pohled. Pilulka NENÍ odkaz ani tlačítko — je to štítek,
proto v odstavci, žádný ani : nic by nedělal a jen
by mátl klávesnici i odečítač obrazovky. */
/* Výzva k volbám = POKRAČOVÁNÍ úvodního textu: stejný stupeň a řez
jako „A já budu Váš zástupce." nad ní, jen v hluboké modři, aby
uzavírala úvod jako druhý úder. Pilulkové pozadí i mikro-verzálky
se zkoušely a byly zamítnuty — dělaly z věty tlačítko/štítek. */
.hero-volby{margin-top:var(--s4);font-size:var(--t-body);font-weight:700;
line-height:var(--lh-body);color:var(--tmava)}
/* Širší sloupec (dřív 440px) — na 440 se text lámal po pár slovech
a čtení působilo trhaně, „odseknuté" uprostřed věty. Na plnou šířku
hero-text sloupce (540px) drží řádky delší a plynulejší. */
.hero-pod{margin-top:var(--s5);font-size:var(--t-body);line-height:var(--lh-body);
color:var(--ink-dim);max-width:100%}
/* Bez tučného řezu — důraz věty nese hluboká modř, ne váha (tučné
zamítnuto). Výzva k volbám pod ní tučná zůstává. */
.hero-pod--dukraz{margin-top:var(--s4);color:var(--tmava)}
.hero-akce{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
/* Hlavní tlačítko v úvodu je hluboká modř, ne akcentní — odliší se tím od
pilulky v liště a úvod dostane třetí barvu. */
.hero-akce .btn-1{background:var(--tmava)}
.hero-akce .btn-2{border-color:var(--modr);color:var(--modr)}
@media(hover:hover){
.hero-akce .btn-1:hover{background:var(--modr)}
.hero-akce .btn-2:hover{border-color:var(--tmava);color:var(--tmava)}
}
/* ── PORTRÉT ────────────────────────────────────────────────────────────
Teď se používá VÝŘEZ, ne původní fotka: podklad už není prázdná bílá,
ale fotka náměstí, a bílé ateliérové pozadí by ji zakrylo přesně tam,
kde stojí věž kostela. Postava před městem navíc říká „jsem odsud“ —
což je celá myšlenka téhle úvodní obrazovky.
Ukotvený ke SPODNÍ HRANĚ CELÉ SEKCE, ne k buňce — proto sedí hlavou
vysoko, stejně jako maskot v úvodu editoru. Dole se rozplyne, aby ho
hrana sekce neusekla. Bez drop-shadow: ta na tomhle výřezu kreslí
obdélníkový halo. */
/* Velikost podle předlohy od zadavatele (odměřeno z jeho překryvu na
1854 px): výška ≈ 82 % sekce. Pravá hrana lícuje s VNĚJŠÍ osou stránky
— tedy s okrajem 1280px wrapperu, ne s okrajem textu uvnitř něj. Držet
ho u hrany OKNA znamenalo, že na širokém monitoru odplouval doprava;
držet ho u okraje TEXTU ho naopak táhlo o --edge doleva do sazby. */
/* Postava se udává v PIXELECH PLÁTNA, ne v procentech sekce — tím je
přibitá k městu. Čísla odpovídají schválené kompozici na 1440×837, kde
jeden pixel plátna měřil 0,5625 px: výška 716 px = 1273, horní odsazení
93 px = 165. Ukotvení je k pravému okraji, protože tam je ukotvené i
plátno; vázat postavu na okraj 1280px obalu znamenalo, že se na širokém
monitoru rozešla s kostelem.
PRAVÉ ODSAZENÍ 215, ne 142. Původních 142 px plátna (80 px na 1440)
odpovídalo starému ukotvení k okraji obalu — jenže to na širším okně
rostlo s šířkou, takže po přepnutí na okraj okna postava opticky uskočila
doprava. 215 ji vrací doleva na všech šířkách naráz.
Výš už to nejde: mez určuje DRUHÉ TLAČÍTKO na okně 1280 px, kde se rameno
rozšiřuje doleva. Měřeno proti skutečné siluetě výřezu, ne proti obálce
(ta je z velké části průhledná a lhala by): při 215 zbývá v nejtěsnějším
místě 48 px, při 284 už jen 9 px a při 320 se text a sako překryjí. */
.hero-portret{position:absolute;z-index:2;
top:calc(165 * var(--s));
right:calc(215 * var(--s));
height:calc(1273 * var(--s));
width:auto;max-width:none}
/* ŽÁDNÁ MASKA NA PORTRÉTU — a ani žádný CSS fade.
Béžové sako končilo pixely 182,162,142 (jas 165), tmavě modré 51,54,76
(jas 55). Bílý závoj umí béžovou dotáhnout do bílé nenápadně, ale tmavou
modř zvedne na 250 jen přes viditelnou šeď — proto u tmavého saka zůstala
vidět hrana, kde fotka končí. Rozplynutí je proto zapečené přímo v souboru
dominik-vyrez9.webp: barva přechází do #F9FAFD mezi řádky 1230–1600 a
teprve pak, když je pixel už bílý, klesá alfa — a to AŽ NA ŘÁDKU 1545.
Do té doby je sako krycí bílá, ne průhledná: krycí bílá město zakryje,
průhledná ho pustí skrz a v saku byl vidět chodník. Alfa proto smí klesat
jen tam, kde už závoj sekce dole drží město na čisté bílé (ta má proto
dorazit na 100 % už ve 74 % své výšky, ne až na jejím konci). Poslední řádek
je zcela průhledný a bílý zároveň — hrana neexistuje. Přechod je ROVNÝ;
varianta se zakřivenou hranicí byla zamítnuta.
Ve stejném kroku je odečtený bílý lem: okraj výřezu měl v sobě zapečené
ateliérové pozadí (147,149,172 proti vnitřku 55,67,105), nad bílou to
nebylo vidět, nad fotkou města ano. Barvu poloprůhledných pixelů proto
nahrazuje barva nejbližšího krycího pixelu — ale JEN OD KRKU DOLŮ. Nahoře
totiž poloprůhledné pixely nejsou znečištěné pozadí, ale jednotlivé prameny
vlasů; přebarvit je znamená udělat z nich tvrdý obrys. První pokus to
ignoroval a vlasy se rozešly s originálem o 38 stupňů jasu v průměru
(max 228) na 16 tisících pixelech. Dělá to scratchpad/fade4.py. */
/* ── TLAČÍTKA ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
min-height:56px;padding:0 var(--s6);border-radius:var(--r-pill);text-decoration:none;
font-size:var(--t-ui);font-weight:700;letter-spacing:var(--ls-txt);
transition:background .2s var(--ease),color .2s var(--ease),
border-color .2s var(--ease),transform .1s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-1{background:var(--modr);color:#fff}
.btn-2{border:var(--line) solid var(--pole-linka);color:var(--ink);background:var(--bila)}
@media(hover:hover){
.btn-1:hover{background:var(--modr-tm)}
.btn-2:hover{border-color:var(--modr);color:var(--modr)}
.na-modre .btn-1{background:var(--bila);color:var(--modr)}
.na-modre .btn-1:hover{background:var(--seda)}
.na-tmave .btn-2{border-color:var(--line-t);color:var(--w);background:transparent}
.na-tmave .btn-2:hover{border-color:var(--w);color:var(--w)}
}
/* ── NĚCO O MNĚ ───────────────────────────────────────────────────────
Nad mřížkou je jen štítek sekce, nadpis patří DO levého sloupce.
Textový blok se proti dlaždicím VYCENTRUJE na výšku — roztažení přes
celou výšku s podpisem přišpendleným dolů (margin-top:auto) sice
srovnalo obě hrany, ale uprostřed sloupce zůstala prázdná díra.
ZÁMEK: žádná ikona v kolečku, žádné bílé pozadí pod textem v dlaždici. */
/* Oba sloupce lícují nahoře i dole: text se roztáhne na výšku skupiny
dlaždic a podpis se přisadí ke spodní hraně (margin-top:auto). Se
„start“ končil textový sloupec o kus výš a dvojice působila rozvázaně. */
/* Tři položky do dvou sloupců přes grid-template-areas, ne přes pořadí
v DOM — uvod a zbytek sedí oba v levém sloupci pod sebou (přesně jako
dřív jeden nedělený .kdo-text), dlaždice napravo přes obě řady. Na
mobilu se stejné tři položky přeskládají do jednoho sloupce v pořadí
uvod → dlaždice → zbytek (viz media query), aniž by se cokoli měnilo
tady v HTML. */
.kdo-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
grid-template-areas:'uvod moz' 'zbytek moz';
gap:var(--kol-gap);align-items:center;margin-top:var(--s5)}
.kdo-text--uvod{grid-area:uvod}
.mozaika{grid-area:moz}
.kdo-text--zbytek{grid-area:zbytek}
/* nadpis se musí vejít na jeden řádek — v 36 px měří „Ne politik. Soused.“
asi 321 px, sloupec 5/12 dává na 1440 px 449 px */
/* max-width v ch drží zalomení „Ne politik. / Soused.“; hned první snímek po startu motion.js).
Scéna (město + postava) se JEN prolne: ta má geometrii spočítanou
na pixel z měřítka --s a jakýkoli transform by ji rozladil. */
html.nastup .hero-scena{opacity:0;transition:opacity 1.2s var(--ease-kryt)}
html.nastup .hero-text > *{opacity:0;transform:translateY(18px);
transition:opacity .5s var(--ease-kryt),transform 1.05s var(--ease-prichod)}
html.nastup .uvod-nastoupil .hero-scena,
html.nastup .uvod-nastoupil .hero-text > *{opacity:1;transform:none}
html.nastup .uvod-nastoupil .hero-text > :nth-child(1){transition-delay:60ms}
html.nastup .uvod-nastoupil .hero-text > :nth-child(2){transition-delay:140ms}
html.nastup .uvod-nastoupil .hero-text > :nth-child(3){transition-delay:220ms}
html.nastup .uvod-nastoupil .hero-text > :nth-child(4){transition-delay:300ms}
html.nastup .uvod-nastoupil .hero-text > :nth-child(n+5){transition-delay:380ms}
/* ── VYSOKÝ KONTRAST (Windows) ──────────────────────────────────────── */
@media (forced-colors: active){
.duo::after{display:none}
.hl{border:2px solid CanvasText}
section{border-top:1px solid CanvasText}
.btn,.hl-cta{border:2px solid ButtonBorder}
.skip{border:2px solid CanvasText}
.jelen{fill:CanvasText;opacity:1}
.jelen--zvyrazneny{fill:Highlight}
.hl-logo svg{fill:CanvasText}
.ico{stroke:CanvasText}
.hl-nav a[aria-current="true"]{outline:2px solid Highlight;outline-offset:-2px}
.z-otazka{border-bottom:1px solid CanvasText}
.dlazdice{border:2px solid CanvasText}
.dlazdice::after{forced-color-adjust:none}
.f-radek input,.f-radek textarea,.f-hotovo,.f-zprava{border:2px solid CanvasText}
.f-radek input:focus,.f-radek textarea:focus{outline:3px solid Highlight}
.odhal{clip-path:none;transform:none}
}
/* ── RESPONZIVITA ───────────────────────────────────────────────────── */
/* ── ÚZKÝ DESKTOP: JEN ODSTAVEC ───────────────────────────────────────
Mezi 1000 a 1120 px se sazba a postava perou o šířku: 540px sloupec plus
~500px široká postava se do 1020 px prostě nevejdou. Změřeno proti
skutečné siluetě výřezu: kicker má rezervu 70–120 px, nadpis 164–283 px
a tlačítka leží v té šířce už celá POD postavou — kolidauje výhradně
odstavec (−25 px na 1020 px). Zužuje se proto jen on, a spojitě: na
1120 px vyjde vzorec přesně na svých 440 px, takže na hranici nic
neposkočí. Scény ani zlomu se to netýká — postava zůstává přibitá
k městu úplně stejně. */
@media(min-width:1001px) and (max-width:1160px){
.hero-pod{max-width:calc(100vw - 720px)}
}
/* Tlačítka. Na krátkém okně (1001×700) se sazba svisle vystředí do menší
výšky, takže řada tlačítek dosedne níž na postavu — a tam je rameno širší.
Nejtěsnější naměřené místo bylo 3 px u druhého tlačítka. Řeší to spojité
ubrání vodorovného odsazení z 32 na 24 px mezi 1160 a 1000 px; obě
tlačítka se tím zúží a druhé odskočí doleva o ~32 px. Spojitě proto, aby
na hranici zlomu nic neposkočilo — pevná hodnota v media query by tam
udělala schod. */
@media(min-width:1001px){
.hero-akce .btn{padding-inline:clamp(24px, calc(24px + (100vw - 1000px) * .05), 32px)}
}
@media(max-width:1000px){
/* hlavička zůstává jednořádkovou pilulkou — dřív se lámala na dva řádky
(132 px = 15,6 % obrazovky) a poloměr padal ze 100px na 22px */
#hlavicka{padding-inline:var(--s3)}
/* .hl-menu-wrap je na mobilu position:absolute (viz níže) — v běžném
toku lišty zůstávají jen logo a tlačítko Menu, tedy míň obsahu než
dřív se čtyřmi odkazy + CTA. width:max-content by proto pilulku
smrsklo na šířku dvou položek — width:100% ji roztáhne na celou
šířku wrapu, justify-content:space-between rozežene logo a tlačítko
na krajní konce. */
.hl{position:relative;width:100%;flex-wrap:nowrap;justify-content:space-between;
border-radius:var(--r-pill);
padding:var(--s2) var(--s2) var(--s2) var(--s4);gap:var(--s2)}
/* Desktopová kopie nav + CTA (uvnitř .hl) je na mobilu schovaná —
mobilní kopie žije v samostatném #hl-menu-panel, mimo pilulku. */
.hl > .hl-nav,.hl > .hl-cta{display:none}
.hl-logo{border-right:0;margin-right:0;padding-right:0}
/* 132px bylo spočítané na „Dominik Hoda" bez „Mgr." — reálný text teď
měří 136px, ořezávalo by ho to. 170px má naměřenou rezervu (na 390px
displeji zbývá 197px) a pořád je to pojistka, ne volný prostor. */
.hl-logo span{max-width:170px;overflow:hidden;text-overflow:ellipsis}
/* ── HAMBURGER MENU ────────────────────────────────────────────────
Nahradil vodorovně rolovací seznam odkazů (nešlo je přečíst všechny
naráz) i variantu s jedinou aktuální položkou (chybělo v ní vidět
celou nabídku, ne jen kde návštěvník zrovna je). Tlačítko + panel
žijí v DOM pořád, na desktopu je jen CSS dělá neviditelnými a
.hl-menu-wrap neúčinným obalem (display:contents), aby tam nav a
CTA seděly přesně jako předtím. */
/* Stejné tlačítko jako .hl-cta předtím — modrá pilulka, ne malá
ikona. Lišta si tak drží svou dřívější šířku a váhu, jen poslední
slovo se změnilo ze „Zeptat se" na „Menu". */
.hl-menu-btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
padding:0 var(--s5);border-radius:var(--r-pill);background:var(--modr);color:#fff;
font-size:var(--t-cap);font-weight:700;letter-spacing:var(--ls-txt);
border:0;flex:none;margin-left:var(--s2);cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:background .2s var(--ease),transform .1s var(--ease)}
.hl-menu-btn:active{transform:scale(.97)}
.hl-menu-ikona{position:relative;width:16px;height:12px;flex:none}
.hl-menu-ikona span{position:absolute;left:0;right:0;height:2px;
background:#fff;border-radius:1px;
transition:transform .25s var(--ease),opacity .2s var(--ease),top .25s var(--ease)}
.hl-menu-ikona span:nth-child(1){top:0}
.hl-menu-ikona span:nth-child(2){top:5px}
.hl-menu-ikona span:nth-child(3){top:10px}
/* Tři čárky → křížek. Prostřední zmizí, krajní se sejdou na střed
a překříží — stejný jazyk jako šipka u tlačítek: nic neskočí,
jen se to plynule přetočí. */
#hlavicka.menu-otevrene .hl-menu-ikona span:nth-child(1){top:5px;transform:rotate(45deg)}
#hlavicka.menu-otevrene .hl-menu-ikona span:nth-child(2){opacity:0}
#hlavicka.menu-otevrene .hl-menu-ikona span:nth-child(3){top:5px;transform:rotate(-45deg)}
/* Celoobrazovkový přehoz, ne pilulka pod pilulkou. Druhý vodorovný
pruh působil jako menu z roku 2012 (rozevírák pod tlačítkem) — tohle
je jazyk, jakým mobilní menu mluví dnes: tmavá plocha přes celý
displej, velké řádky pod sebou, jedna jasná akce dole. Panel je
position:fixed vůči viewportu (ne vůči pilulce), takže leží NAD
celou stránkou; pilulka nahoře (a v ní tlačítko s křížkem na
zavření) musí mít vyšší z-index, aby zůstala klikatelná i nad ním. */
.hl{z-index:2}
/* Nahoře, ne rozprostřené přes celou výšku — čtyři položky uprostřed
prázdné obrazovky působily rozplácle. Nav sedí hned pod hlavičkou,
CTA drží dole přes margin-top:auto na sobě samém — bez flex:1 na
navu ani justify-content:center. */
.hl-menu-wrap{position:fixed;inset:0;z-index:1;
background:var(--tmava);overflow:hidden;
display:flex;flex-direction:column;
padding:calc(env(safe-area-inset-top,0px) + 108px) var(--s6)
calc(env(safe-area-inset-bottom,0px) + var(--s7));
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .22s var(--ease),visibility 0s linear .22s}
#hlavicka.menu-otevrene .hl-menu-wrap{opacity:1;visibility:visible;pointer-events:auto;
transition:opacity .22s var(--ease)}
/* Vodoznak: jelen jako duch (4 % bílé) přetéká pravý dolní roh.
Absolutně umístěný prvek by se kreslil NAD in-flow sourozenci,
proto nav i CTA dostávají vlastní vrstvu nad ním. */
.hl-menu-znak{position:absolute;right:-11vw;bottom:-6vh;
height:min(58vh,470px);width:auto;fill:rgba(255,255,255,.04);
pointer-events:none}
.hl-menu-wrap > .hl-nav,.hl-menu-wrap > .hl-cta{position:relative;z-index:1}
/* Číslo + vlasová linka před každou položkou: říká „tohle je jiná
kategorie", ne jen řádek v seznamu. counter-reset/increment, ne
napevno 01–04 v HTML — odkazy zůstávají stejné pro desktop i mobil,
číslování je jen mobilní css. */
.hl-nav{flex-direction:column;gap:0;counter-reset:menu-polozka}
.hl-nav a{width:auto;min-height:0;padding:16px 0;white-space:nowrap;
display:flex;align-items:baseline;gap:var(--s4);
border-radius:0;border-top:1px solid var(--line-t);background:none!important;
font-size:clamp(24px,7.5vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--w);
counter-increment:menu-polozka;
/* Ústup je teď JEDEN pohyb pro všechny položky naráz (viz níže) —
rozestupný nástup zůstává jen pro otevření. */
opacity:0;transform:translateY(8px);
transition:opacity .18s var(--ease),transform .18s var(--ease)}
.hl-nav a:first-child{border-top:0}
.hl-nav a::before{content:counter(menu-polozka,decimal-leading-zero);
flex:none;font-size:14px;font-weight:700;color:rgba(255,255,255,.65);
letter-spacing:0;font-variant-numeric:tabular-nums}
/* Rozestupný nástup patří VÝHRADNĚ otevřenému stavu (vyšší specificita
než plain .hl-nav a) — při zavírání proto zpoždění neplatí a všechny
čtyři zmizí naráz, ne jedna po druhé se stejným rozestupem, se
kterým přišly. To předtím dělalo ústup vizuálně nedbalý. */
#hlavicka.menu-otevrene .hl-nav a{opacity:1;transform:none;
transition:opacity .3s var(--ease),transform .3s var(--ease)}
#hlavicka.menu-otevrene .hl-nav a:nth-child(1){transition-delay:.08s}
#hlavicka.menu-otevrene .hl-nav a:nth-child(2){transition-delay:.14s}
#hlavicka.menu-otevrene .hl-nav a:nth-child(3){transition-delay:.2s}
#hlavicka.menu-otevrene .hl-nav a:nth-child(4){transition-delay:.26s}
.hl-nav a[aria-current="true"]{color:var(--w)}
.hl-cta{width:100%;justify-content:center;min-height:60px;
font-size:var(--t-ui);margin-top:auto}
/* Tvář jde první: odkaz se otevírá na telefonu a první, co má soused
vidět, je člověk, ne sazba. Scéna vypadne z absolutního ukotvení do
toku a text jde pod ni. Postavu nic nepřenastavuje kromě odsazení —
drží se týchž pixelů plátna jako na desktopu, jen se scéna zmenší
a --s s ní, takže kostel je za Dominikem přesně jako na monitoru.
JEDINÝ ZLOM. Zkoušel jsem pro úvod vlastní zlom na 1100 px, aby se
skládal dřív než zbytek stránky — a vzniklo tím mezi 1000 a 1100 px
třetí, nesmyslné rozvržení s pásem vysokým 640 px. Buď desktop, nebo
mobil; nic mezi tím. Kolizi sazby s postavou na úzkém desktopu proto
řeší užší textový sloupec (viz níže), ne další zlom. */
/* Mezera nahoře, ale barevná, ne plátem stránkové šedé/bílé. Čistá
mezera v barvě stránky dělala švík přesně tam, kde plave lišta menu.
Pruh proto pokračuje SKUTEČNÝMI barvami plátna — dvacet vzorků
natažených přímo z pixelů řádku, na který pruh navazuje (390 px
šířka, y=36 v souboru unhost-platno-b.webp), ne odhadnutá dvoubarevná
šňůra. Vlevo to není čistá bílá, ale slabě namodralá šeď — proto
dvoubarevný přechod bílá→modrá dělal na kraji vlastní, druhý švík. */
#hero{display:flex;flex-direction:column;position:relative;
padding-top:36px}
#hero::before{content:'';position:absolute;top:0;left:0;right:0;
height:36px;z-index:0;
background:linear-gradient(90deg,
#f0f4f9 0%,#edf0f6 5%,#e7edf2 10%,#dfe7ef 15%,#d0e0ea 20%,
#b8d1e4 25%,#9fbede 30%,#7fa9d4 35%,#6498cb 40%,#4f88c0 45%,
#4272a5 50%,#416ea2 55%,#426ea0 60%,#406a9d 65%,#3e699d 70%,
#3c679a 75%,#3d6699 80%,#3b6598 85%,#3b6297 90%,#396094 95%,#375c90 100%)}
/* Dvě meze. Výška pásu, aby nezabral celou obrazovku, a šířka dělená 1480
(postava 1273 + odsazení 80 + 127 levého odstupu) — bez ní by na úzkém
a vysokém displeji 320×844 přeteklo rameno přes levý okraj.
ŽÁDNÁ třetí mez zdola: dorovnávat měřítko tak, aby plátno dosáhlo na
oba okraje pásu, znamená pás vysoký přes 600 px. Že plátno na širším
pásu nesahá vlevo až ke kraji, nikdo nepozná — jeho levá čtvrtina je
stejně bílá jako sekce. */
.hero-scena{position:relative;inset:auto;flex:none;width:100%;
--s:min(calc(min(56vh, 460px) / 1488), calc(100vw / 1480));
height:calc(1488 * var(--s))}
/* 80 místo desktopových 215: na šířce telefonu je 215 už moc a postava
by lezla přes levý okraj. Zmenšeno z původních 150, aby se uvolnilo
místo pro větší postavu (viz --s výš) — na mobilu je fotka blíž
pravému okraji, tam ale žádný text nesedí, takže to nevadí. */
.hero-portret{right:calc(80 * var(--s))}
/* Vyšší podlaha než 120px: scéna je na mobilu jen ~370 px vysoká, takže
22% dá necelých 82 px a spodní hrana fotky pod portrétem je vidět
jako ostrý řez. 180 px pokryje skoro polovinu scény a řez zmizí. */
/* Pořád vidět hrana i po zvýšení na 180px — přechod na plnou barvu
nastupuje až na 74 % vlastní výšky pásu (viz základní pravidlo),
takže i 180px vysoký pás má poslední skutečně krycí barvu až kolem
jeho 133. pixelu, ne na okraji scény. Vyšší podlaha (230px, skoro
2/3 scény) dá tomu krytí víc místa, než dojde na spodní hranu. */
.hero-scena::after{height:clamp(230px,58%,260px)}
/* Spodní odsazení je menší, protože pilulka s termínem voleb má na
mobilu sedět PŘESNĚ uprostřed mezery mezi „A já budu Váš zástupce."
a rubrikou „Co chci prosadit" další sekce. Ta mezera se skládá ze
tří dílů: odstup nad pilulkou (margin .hero-volby), tenhle spodek
úvodu a horní odsazení sekce #kdo (48 px). Aby vyšlo 60 px nad
i pod, musí být nad 60 a tady 12. Když se změní odsazení #kdo,
musí se přepočítat i tyhle dvě hodnoty. */
.hero-in{min-height:0;padding-block:var(--s5) var(--s3)}
.hero-text{max-width:none}
/* Věta patří do úvodního bloku: běžný odstup odstavce od
„A já budu Váš zástupce." nad ní. Oddělení od dalšího bloku
(Co chci prosadit) obstarává spodek úvodu (--s3) + horní odsazení
sekce #kdo (--s7) = 60 px, tedy víc než odstavec, míň než dřívější
vycentrovaná propast. Velikost se dědí ze základního pravidla
(t-body jako důraz nad ní) a věta se láme jako běžný text. */
/* tři řádky prostrkaných verzálek jsou na mobilu moc — menší stupeň
a užší prostrkání to srazí na dva */
.hero-rada{font-size:13px;letter-spacing:.08em}
.poradna,.otazky,.otazky-hlava{grid-template-columns:minmax(0,1fr);row-gap:var(--s8)}
/* Desktopové přiřazení do řádků mřížky (formulář i akordeon v řádce 2)
by v jednosloupci poskládalo oba PŘES SEBE — na mobilu se ruší
a prvky jdou přirozeně pod sebe: úvod, formulář, odpovědi. */
.otazky{row-gap:var(--s6)}
.otazky-uvod,.otazky .formular-panel,.otazky .faq-seznam{
grid-column:auto;grid-row:auto;align-self:auto}
.formular-sloup{position:static;height:auto;display:block}
/* KLÍČOVÉ PRO PLYNULOST SCROLLU — dvě mobilní vypnutí, která při
jedné z přestaveb karet vypadla (zůstal po nich jen komentář) a
přesně od té doby se stránka sekala:
1. Dimování .aktivni: na mobilu jinak platí desktopové
.zaznam{opacity:.5;transition:opacity .9s} a observer přepíná
třídu při KAŽDÉM průjezdu středem okna → devítisetmilisekundová
opacity animace uprostřed scrollu = zásek. (motion.js observer
na mobilu ani neběží, ale CSS pojistka tu musí být taky —
breakpoint a matchMedia se nesmí rozejít.)
2. Nástup po řádcích (z-stitek/z-otazka/z-text/z-odpoved): v kartě,
která je vidět celá naráz, by jen blikal a přidával recalc. */
.zaznam{opacity:1!important;transition:none!important;will-change:auto}
.zaznam .z-stitek,.zaznam .z-otazka,.zaznam .z-text{
opacity:1!important;transform:none!important;transition:none!important}
.zaznam .z-odpoved{clip-path:none!important;transition:none!important}
.formular-panel{position:static}
/* Otázky a odpovědi na mobilu: jedna karta, listuje se šipkami.
PRVNÍ verze řešila další kartu vodorovným scroll-snap swipem — na
doteku se ale prakticky vždy prát se SVISLÝM scrollem stránky,
takže rolování přes sekci sekalo. DRUHÁ verze měla display:none na
nezobrazených a vnitřní overflow-y na odpovědi — vnitřní scroll
zase chytal prst (stránka pod ním stála) a karty měly každá jinou
výšku. TEĎ: všechny karty leží v JEDNÉ grid buňce (grid-area 1/1),
nezobrazené jsou jen visibility:hidden — pořád se počítají do
výšky buňky, takže KAŽDÁ karta má přesně stejnou velikost (podle
nejdelší odpovědi) a nic neposkakuje. Text je zmenšený, aby i
nejdelší odpověď stála celá v kartě — ŽÁDNÝ vnitřní scroll. */
.odpovedi{background:none;border:0;box-shadow:none;
padding-inline:var(--s4);padding-block:var(--s4) 0}
/* Bez bílé karty (viz výš) nemá "roh karty" na co navázat. */
.odpovedi-deco{display:none}
.odpovedi-hlava{padding-inline:0;margin-bottom:var(--s5)}
#otazky-seznam{position:relative;display:grid}
#otazky-seznam .zaznam{grid-area:1/1;margin-top:0;
visibility:hidden;pointer-events:none;
background:var(--bila);border-radius:var(--r);box-shadow:var(--stin);
border:var(--line) solid var(--linka);padding:var(--s4) var(--s5)}
#otazky-seznam .zaznam.zobrazena{visibility:visible;pointer-events:auto}
/* Nástup nové karty = krátké „přisunutí" ze strany, kam se listuje
(směrovou třídu přepíná motion.js). Jen transform+opacity, běží
na kompozitoru; animuje se VÝHRADNĚ příchozí karta, žádný layout. */
#otazky-seznam.listuje-dopredu .zaznam.zobrazena{
animation:karta-zprava .32s var(--ease)}
#otazky-seznam.listuje-zpet .zaznam.zobrazena{
animation:karta-zleva .32s var(--ease)}
/* Menší stupeň než desktop: karta má být kompaktní blok otázka+odpověď,
ne vysoký panel. Menší mezery ze stejného důvodu. */
#otazky-seznam .z-otazka{font-size:17px;margin-bottom:var(--s3)}
#otazky-seznam .z-text{font-size:14px;line-height:1.5}
#otazky-seznam .z-text + .z-text{margin-top:var(--s3)}
#otazky-seznam .z-stitek{margin-bottom:var(--s3)}
#otazky-seznam .z-odpoved{padding:var(--s3) var(--s4)}
@keyframes karta-zprava{
from{opacity:0;transform:translateX(28px)}
to{opacity:1;transform:none}}
@keyframes karta-zleva{
from{opacity:0;transform:translateX(-28px)}
to{opacity:1;transform:none}}
/* Šipky — kruhové, položené přes okraj karty. Reuse #i-sipka (šipka
doprava); „zpět" je jen zrcadlené přes scaleX. touch-action:manipulation
ať tap nečeká na dvojklik. */
.karta-sipka{position:absolute;top:50%;transform:translateY(-50%);
z-index:2;width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--bila);border:var(--line) solid var(--linka);
box-shadow:var(--stin);color:var(--ink);touch-action:manipulation;
transition:opacity .2s var(--ease)}
.karta-sipka:disabled{opacity:0;pointer-events:none}
.karta-sipka .ico{width:20px;height:20px}
/* Odsazení je přesně půlka průměru (44/2), takže STŘED kolečka leží
na hraně karty, ne kousek uvnitř. Dřív tu bylo −12 px a kolečko
tím pádem viselo o 10 px dovnitř, což vypadalo jako nedotažené. */
.karta-sipka--zpet{left:-22px;transform:translateY(-50%) scaleX(-1)}
.karta-sipka--dalsi{right:-22px}
/* Hlava sekce (--s8, 64px) + horní padding prvního bodu (--s7, 48px)
dávaly pod sebou 112px prázdna — na mobilu to působilo jako díra.
Úplně bez mezery (0) zase splývalo příliš — hlava a první bod
vypadaly jako jeden odstavec. --s5 mezi nimi drží odstup, ale ne
díru. */
.sek-hlava{margin-bottom:var(--s6)}
.bod{grid-template-columns:1fr;row-gap:var(--s5);padding-block:var(--s7)}
.bod:first-of-type{padding-top:var(--s5)}
/* Šev mezi posledním bodem (rychlovlak) a Rychlými kroky měl na mobilu
224 px: 48 pod posledním bodem + 64 pod sekcí #kdo + 64 nad #program.
Na širokém displeji to drží rytmus, na úzkém je to díra přes půl
obrazovky. Ubráno 56 px, na 168 — ne až na doraz, sekce se pořád
mají od sebe oddělit. */
.bod:last-of-type{padding-bottom:var(--s5)}
#kdo{padding-bottom:var(--s6)}
/* Vždy obrázek, pak text — na mobilu žádné střídání jako na desktopu.
.bod-foto je v DOM první, takže stačí zrušit order:2 ze sudých
záznamů a pořadí drží samo, u každého bodu stejně. */
.bod:nth-child(even) .bod-foto{order:0}
/* Radar: na desktopu je posunutý nahoru na přání (translateY(-4.4%)),
ale ve stojaté mobilní kartě je slack nahoře i dole jen pár pixelů,
takže se ikona lepila přímo na horní hranu. Soubor je geometricky
vystředěný sám o sobě (bbox posun 0,00 %), takže tady stačí posun
zrušit. */
.bod:nth-child(2) .bod-ikona-nova{transform:none}
/* uvod → dlaždice → zbytek, ne uvod+zbytek → dlaždice. Jeden sloupec,
dlaždice fyzicky mezi oběma texty, ne jen opticky přes order. */
.kdo-in{grid-template-columns:1fr;
grid-template-areas:'uvod' 'moz' 'zbytek';gap:var(--s7)}
/* 19 blíž k textu, ne v odděleném prázdném pásu pod ním — s velkou
mezerou (--s6) vypadalo jako samostatný blok, ne jako součást
odstavce nad ním. Menší mezera zkrátí i celou sekci na výšku. */
.devatenact{grid-template-columns:1fr;gap:var(--s3)}
.devatenact-cislo{justify-self:end}
/* Tři bloky vedle sebe na desktopu drží odstup samotnými sloupci; pod
sebou na mobilu potřebují oddělit — ale BARVOU a vzduchem, ne linkou
(linky odstraněny na přání; rozlišení nese modrý štítek rubriky
a větší mezera mezi bloky). */
.kontakt{grid-template-columns:1fr;gap:var(--s7)}
}
@media(max-width:560px){
/* TŘI VNOŘENÁ ODSAZENÍ. Stránka 20 px + bílá karta 22 px + modré pole
odpovědi 24 px = 66 px na každou stranu. Na 390px displeji z toho
odstavci zbylo 255 px (34 znaků na řádek), na 320px displeji 185 px —
tedy 16 až 26 znaků, tři čtyři slova. Text se pak láme uprostřed
myšlenky a odpověď naroste na devět řádků.
Nejde jen zrušit odsazení karty: karta má být vidět jako karta.
Ubírá se proto na obou vnořených úrovních naráz. */
/* Tři vnořená odsazení: stránka 20 + panel 24 + akcentní linka 24.
Na 320px displeji z textu zbylo 16 znaků na řádek. */
.odpovedi{padding-inline:var(--s4)}
.vedeni-tab{padding:0 var(--s4);font-size:14px}
/* Tónovaná karta odpovědi je teď v základním pravidle (.z-odpoved),
tady se jen stahuje odsazení na užší sloupec. */
.z-odpoved{padding:var(--s4)}
/* Jméno a e-mail pod sebe — vedle sebe má každé pole ~150 px. */
.f-dvojice{grid-template-columns:1fr}
/* Stejný poměr jako na desktopu — Právo nahoře přes celou šířku,
Škola a Fotbal vedle sebe pod ním — ne všechny tři pod sebou.
Dvě dlaždice vedle sebe mají na 375 px pod 170 px, takže tahle
dvojice dostává menší odsazení a menší písmo (viz níže), jinak by
se text lámal po dvou slovech. */
.mozaika{gap:var(--s3)}
.mozaika .dlazdice:not(.dlazdice--siroka){min-height:min(30vh,220px)}
.mozaika .dlazdice:not(.dlazdice--siroka) > div{padding:var(--s4)}
.mozaika .dlazdice:not(.dlazdice--siroka) h3{font-size:18px}
.mozaika .dlazdice:not(.dlazdice--siroka) p{font-size:12px;line-height:1.4}
/* Dovětek štítku („ · kapitán áčka") se na úzkou kartu nevejde na
jeden řádek — viz komentář u karty Fotbal v index.html. */
.mozaika .dlazdice:not(.dlazdice--siroka) .mikro-dovetek{display:none}
/* Na mobilu je sloupec ~350 px a devatenáct kusů se do něj musí vejít
taky — proto výrazně méně. Výška je vw-fluidní, ne pevná: pevných
20 px bylo tak spočítané, aby se vešlo i na nejužší podporovaný
320px displej, a na běžných 375–430px pak řada zabírala jen asi
tři čtvrtiny sloupce — zbytek působil jako prázdné místo. */
.jeleni{gap:clamp(2px,.6vw,4px)}
.jelen{width:auto;height:clamp(16px,5.34vw,24px)}
.jelen--zvyrazneny{height:clamp(21px,7.01vw,31px)}
.btn{width:100%}
.f-radek input,.f-radek textarea{padding:15px 17px}
.f-odeslat{min-height:60px}
.f-ok{right:var(--s4);bottom:var(--s4)}
}
/* ── OMEZENÝ POHYB ──────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;
transition-duration:.01ms!important;animation-iteration-count:1!important}
html{scroll-behavior:auto}
.ln > i{transform:none!important}
.odhal{clip-path:none!important;transform:none!important}
.jelen{opacity:.20!important;transform:none!important}
.f-hotovo .f-fajfka{stroke-dashoffset:0}
.f-odeslat[data-stav="odesila"]::after{animation:none}
}
/* Na nejužších displejích (320 px = sloupec 280 px) se 10,5px verze
hesla v pilulce nevejde (318 px) — ještě o stupeň níž. Samostatný
blok na konci souboru, NEVKLÁDAT dovnitř media bloku ≤1000 px:
jednou už vložená závorka rozťala mobilní pravidla vejpůl. */