/* ════════════════════════════════════════════════════════════
   03-nav.css

   Hlavicka: dve podoby (velka / slozena), skladani, PULS jako spodni hrana,
   pole hledani, socialni site, bublina Poukazky.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ── NAV ──
   Hlavička má dvě podoby. Nahoře stránky velkou: logo, pod ním PULS přes
   celou šířku a pod ním řada pilulek. Po odscrollování (motion.js přidá
   .scrolled nad 40 px) se složí do jednoho pruhu — designer to chtěl
   „logicky zmenšit" a nechat gradient. PULS zůstává, jen se z něj stane
   spodní hrana pruhu; je to zároveň ta „dělící čára nahoře" z manuálu.

   Výška je token (--nav-h / --nav-h-compact), protože ji potřebuje i
   `main { padding-top }`. Dvě čísla na dvou místech by se rozešla. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: var(--nav-h); padding: 0 var(--pad);
  /* Slozeni do pruhu je zmena vysky, ne prepnuti stavu — proto prechod.
     Aby dojel i PULS, zustava ve slozenem pruhu v TOKU (drive `position:
     absolute; bottom: 0`, coz byl skok na spodni hranu uprostred prechodu). */
  transition: height .42s var(--ease-out);
  /* flex-end ne center: logo je prvni v radce a pod nim visi mezera + PULS +
     rada pilulek (~105 px na desktopu), takze centrovani cele skupiny drzi
     logo nahore i pri stejnych okrajich nahore/dole. Spodni radka (nav-bar)
     uz svou vyskou presne vyplnuje misto pod sebou, takze flex-end jen
     posune volny prostor nahoru k logu a logo vypada stredene. */
  /* Jemná radiální záře OD loga, podle referenčního screenshotu — střed
     `--surface-3` (o stupeň světlejší) doznívá do `--surface` směrem k
     okrajům, takže hlavička není plochá barva, ale logo v ní opticky svítí. */
  background: radial-gradient(ellipse 70% 100% at 10% 25%, var(--surface-3), var(--surface) 65%);
}
/* Doznění barvy hlavičky do obsahu POD ní, bez scrollu.
   Tohle NESMÍ být samostatný prvek v `main` — dva různé boxy (fixed
   hlavička + statický obsah), i se stejnou barvou na styku, se v Chromu
   renderují jako dvě různé kompozitní vrstvy a na švu je vidět tenká čára
   (ověřeno screenshotem). Pseudoelement `.nav::after` je součástí TÉŽE
   vrstvy jako hlavička (`position: fixed`), švu tedy není kde vzniknout —
   a protože sedí na `top: 100%` vlastního boxu hlavičky, drží se pod ní
   automaticky přes celou výškovou animaci (plná ↔ `.compact`).
   Po scrollu (`.scrolled`) zmizí přes `opacity` — tou dobou je hlavička
   složená do úzkého pruhu a přechod, který dřív fungoval, zůstává jak byl. */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: clamp(3rem, 10vh, 8rem); pointer-events: none;
  /* Stejné RGB jako --surface (#00222D → 0,34,45) na všech zastávkách —
     mění se jen alfa. Doznění DO `transparent` (rgba(0,0,0,0)) by
     interpolovalo i barvu směrem k černé a uprostřed vznikl viditelný
     tmavý pruh místo hladkého spádu. */
  background: linear-gradient(to bottom,
    rgba(0, 34, 45, 1)   0%,
    rgba(0, 34, 45, .7)  35%,
    rgba(0, 34, 45, .35) 65%,
    rgba(0, 34, 45, 0)   100%);
  opacity: 1;
  transition: opacity .3s var(--ease-out);
  /* POD HLAVICKU, NE PRES NI. `::after` je posledni dite `.nav`, takze se bez
     z-indexu kresli PRES vsechny jeji potomky. Samotny kmit uz pod hlavicku
     nepretika (viz rozmerova podminka u `--puls-w`), ale jeho ZAR ano — je to
     `drop-shadow` s 14px rozptylem — a doznivajici plocha ji na hrane
     hlavicky sekla, takze zar konci rovnou carou.
     Zaporny z-index kresli pseudoelement hned za pozadim `.nav` a pred
     jejimi potomky; pozadi hlavicky ho neschova, protoze `::after` lezi cely
     na `top: 100%`, tedy mimo box hlavicky.
     Zaporny z-index NA `.nav::after`, ne kladny na `.nav-puls`: tim by se
     linka dostala nad `.nav-bar` (pilulky, pole hledani i jeho rozbalovaci
     panel jsou v DOM az za ni a bez z-indexu). */
  z-index: -1;
}
/* Zhasnout přes `.compact`, ne `.scrolled` — `.scrolled` naskočí OKAMŽITĚ na
   40 px scrollu, ale skládání hlavičky (výška) běží ještě 420 ms + prodleva
   (viz motion.js). Vypnutí na `.scrolled` tak zhasínalo doznění dřív, než
   hlavička dojela — přesně během té animace se vrátila tvrdá čára. `.compact`
   naskočí, až je pruh skutečně složený. */
.nav.compact::after { opacity: 0; }

/* ŘÁDKA S LOGEM JE `absolute` V OBOU STAVECH, i když nahoře stránky stojí
   přesně tam, kam by ji dal tok. Důvod je jediný: mezi `static` a `absolute`
   prohlížeč neinterpoluje, takže když se pozice měnila až po scrollu, logo se
   sice plynule zmenšilo, ale na své nové místo SKOČILO. Takhle se mezi stavy
   mění JEN `height` pásu (a výška samotného loga) — obojí animovatelné.

   `.nav` je `position: fixed`, takže je to zároveň vztažný rámec. Zbylé dvě
   děti (PULS + řádka) drží u spodní hrany `justify-content: flex-end` na
   `.nav` a výška hlavičky je pevná (`--nav-h`), takže vyvázáním loga z toku
   se nic neposunulo: pás 0 → (--nav-h − řádka − linka) je přesně místo,
   které logu v toku zbývalo.

   LOGO STOJÍ NA STŘEDU SVÉHO PÁSU (`align-items: center`, žádné odsazení).
   Dřív viselo u spodní hrany s odstupem 37 % své výšky, což je poměr
   z návrhu — jenže návrhová výška hlavičky ten poměr nedodrží: nad logem
   zbývalo ~15 px a pod ním 33, takže logo opticky sedělo nahoře. Centrování
   je zároveň jediná mechanika, která platí v OBOU stavech, takže se mezi
   nimi nemá co přepínat a animuje se jen výška pásu. Odstup od PULSu tedy
   nikde není zapsaný — vychází z výšky pásu a velikosti loga. */
.nav-brand-row {
  position: absolute; left: var(--pad); top: 0;
  /* --nav-brand-h, ne dopocet ze zbytku hlavicky: mezera logo -> linka je
     vlastni namerena hodnota z navrhu (42 : 127 = 0,33 x logo) a musi jit
     nastavit primo. Dokud se odectala od --nav-h, menila se pokazde, kdyz
     se sahlo na cokoli jineho v hlavicce. */
  height: var(--nav-brand-h);
  display: flex; align-items: center;
  transition: height var(--d-collapse) var(--ease-out);
  /* LOGO MUSI BYT NAHORE I VE SLOZENEM PRUHU. Tam `.nav-bar` lezi pres celou
     sirku hlavicky (na mobilu si pro logo jen odsazuje `padding`, box je
     porad pod nim) a ma animaci s `opacity` a `fill: both`, ktera z ni dela
     samostatnou vrstvu — ta se kresli v poradi DOM, tedy ZA logem, a s ni
     i tukani. Chrome logo nechava navrchu, ale na tom poradi nic nestoji
     (designer, kolo 8: ve zmensene hlavicce logo nevedlo domu). Nad logem
     se v hlavicce nic nekresli — panel hledani i bublina Poukazky visi pod
     svym polem, mimo pas loga. */
  z-index: 1;
}
.nav-brand {
  color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center;
}
.nav-dot { display: none; }
/* Logo svítí filtrem, ne obtaženým SVG — `drop-shadow` respektuje tvar
   tahů, `box-shadow` by rozzářil neviditelný obdélník okolo. */
.nav-logo { display: none; width: auto; filter: var(--glow-filter); }
.nav-logo-full { display: block; height: var(--nav-logo-h); transition: height var(--d-collapse) var(--ease-out); }
/* PULS jde v návrhu od kraje ke kraji, takže se musí vyvázat z odsazení
   hlavičky. Zbylých 6 px z každé strany je místo pro zaoblený konec linky —
   bez nich se `border-radius` ořízne o hranu okna. */
.nav-puls, .footer-puls {
  margin-inline: calc(-1 * var(--pad));
  padding-inline: 6px;
  width: auto;
}
/* Pevná výška = jen tloušťka linky, takže kmit přesahuje ven a NEROZTAHUJE
   hlavičku. Bez toho si 190 px vysoký kmit vynutí trojnásobnou hlavičku a
   logo se vytlačí nad horní hranu obrazovky (přesně to se stalo).
   Přesah přes řádek s pilulkami je záměr — tak je to i v návrhu, kmit
   prochází prázdným místem mezi navigací a CTA. */
.nav-puls { height: var(--puls-w); }
/* MEZERA POD LINKOU (bod E2 zpetne vazby). Bez ni sedela rada pilulek tesne
   na PULSu, zatimco nad linkou byl vzduch, a hlavicka vypadala zavesena.
   Navrh ma 42 px nad linkou a 33 pod ni — „skoro stejne, nahore o kus vic",
   proto se hodnota pocita (--nav-gap-below), ne opisuje.
   Ve slozenem pruhu je nula: tam je linka spodni hranou hlavicky a nic pod
   ni nestoji. Prechod je stejny jako u vysky pruhu, aby se to nezlomilo
   uprostred skladani. */
.nav-puls { margin-bottom: var(--nav-gap-below); transition: margin-bottom var(--d-collapse) var(--ease-out); }
.nav.scrolled .nav-puls { margin-bottom: 0; }
/* JEDINE misto, kde se pomery useku lisi od `PULS.svg`. Podle souboru zacina
   kmit v 81 % sirky, jenze presne tam ma hlavicka ikony socialnich siti a
   prepinac jazyka — kmit jim projizdel skrz. Posouva se proto na ~69 %, do
   prazdneho mista mezi polem hledani a pravym shlukem. Patrickova a delici
   linka zustavaji v pomerech ze souboru, tady rozhoduje obsah radky pod nim.
   MEZERA je z tehoz duvodu na 50 % sirky okna (bod E3): designer ji chce
   „zhruba nad tlacitkem O nas", coz je v jeho navrhu presne polovina sirky
   (642 z 1280), tesne za koncem posledni pilulky. Ze souboru by vysla na
   43 %, tedy jeste mezi tlacitky.
   Prebiji se `flex-grow`, ne `--f`: makro nastavuje inline jen custom
   property, takze pravidlo s vetsi specificitou vyhraje. */
/* Pomery nejsou procenta sirky okna: kmit si mezi useky bere vlastni sirku
   (~106 px na 1280), takze se rozdeluje jen zbytek. Namereno na 1280: mezera
   dosedne na 636 (navrh 642, tedy polovina okna, tesne za „O nas" na 486).
   KMIT ZUSTAVA NA 805, NE NA NAVRHOVYCH 886. Na 886 sedi presne pres ikony
   socialnich siti (893-1018) a projizdi jim skrz — to je ta puvodni odchylka
   od souboru, kvuli ktere tenhle blok existuje. Radka je siroka a plna,
   kmit se do zadne mezery cely nevejde (849-893 ma 44 px, 1018-1098 pak 80),
   takze se vybira, pres CO smi jet: pres plochy obdelnik pole hledani
   ano, pres tri kulate ikony ne. */
/* SIRKA KMITU JE Z `PULS.svg`, nesaha se na ni. Zkouselo se „2x sirka loga"
   (kolo 5, 13. 9.) — zadani nikdo nedokazal prelozit na miru, ktera by davala
   smysl (2x lockup = 722 px, tedy 200 px za hranou okna), takze kmit zustava
   takovy, jaky ho kresli soubor. Sirku pro vypocty dava `--nav-beat-w` niz.
   Kolo 5 (13. 9.): pomery uz nejsou tri nezavisla cisla, ale JEDNA hodnota
   `--beat-pos` = kde v rovnych usecich zacina kmit (0,69 = puvodnich
   54,4 + 14,6 ze sta). Musi to byt jedno cislo, protoze na tomtez zacatku
   ma koncit pole hledani (viz blok o kus niz) — dve nezavisla cisla by se
   pri prvni uprave rozesla a hrana pole by kmit minula.
   Vnitrni delba mezi prvni a druhy usek (a tim poloha MEZERY) zustava
   78,84 : 21,16, coz je puvodni 54,4 : 14,6. */
/* Paticka (kolo 9) ma v navrhu PULS ve stejne poloze jako hlavicka — mezera
   v pulce, kmit od 69 % — takze sdili tatez pravidla. Mobilni posun
   `--beat-pos` (.774 / .75) patri jen hlavicce: je to stred mezery mezi
   polem hledani a hamburgerem, a pod patickovou linkou nic takoveho neni. */
.nav, .footer { --beat-pos: .69; }
:is(.nav-puls, .footer-puls) .puls-rail:nth-of-type(1) { flex-grow: calc(var(--beat-pos) * 78.84); }
:is(.nav-puls, .footer-puls) .puls-rail:nth-of-type(2) { flex-grow: calc(var(--beat-pos) * 21.16); }
:is(.nav-puls, .footer-puls) .puls-rail:nth-of-type(3) { flex-grow: calc(100 - var(--beat-pos) * 100); }
/* KMIT NESMI JET PRES KULATE IKONY: `--beat-pos` 0,69 je puvodni namerena
   poloha, pri ktere prochazi mezerou mezi polem hledani a pravym shlukem.
   Pres plochy obdelnik pole hledani jet smi, pres tri kulate ikony ne. */
/* Sirka kmitu pro dopocet polohy pole hledani. `--beat-w` (pomer k tloustce
   linky) sype do `.nav` sablona primo z `PULS.svg`, takze tu neni jedine
   opsane cislo — `.puls` uvnitr si ho nastavuje take, ale `.nav-bar` do nej
   nevidi, proto je i na hlavicce. */
.nav { --nav-beat-w: calc(var(--puls-w) * var(--beat-w)); }
/* Footer (kolo 9, 29. 9.): zase CELY PULS i s kmitem (kolo 4 chtelo jen
   rovnou caru, novy navrh ho vraci). Linka ma pevnou vysku `--puls-w`, takze
   kmit pretece nahoru i dolu o pulku sve vysky bez linky:
   (--beat-h − 1) / 2 × --puls-w. Odstup je proto DOPOCITANY z `--beat-h`,
   ktere makro sype inline z `PULS.svg` - s pevnym cislem projizdela spicka
   kmitu pres odkazy pod nim (driv pres `info@…`). Nahore je navic vzduch
   od posledni sekce, dole ne: v navrhu zacinaji odkazy hned pod spickou. */
.footer-puls {
  height: var(--puls-w);
  --beat-half: calc((var(--beat-h) - 1) / 2 * var(--puls-w));
  margin-top: calc(var(--beat-half) + 1.5rem);
  margin-bottom: calc(var(--beat-half) + .5rem);
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--nav-row-h);
}
.nav-center { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; flex: 0 0 auto; }
/* Položky navigace jsou pilulky — třída je v šabloně, tohle řídí jen jejich
   velikost písma, aby se šest položek vešlo do jedné řady.

   Velikost ani barva se tu ZÁMĚRNĚ nepřebíjí. Zvětšování pilulek a bílý text
   se zkoušely a byla to jen kompenzace: menu bylo špatně vidět proto, že
   leželo v průhledné části gradientu hlavičky (viz `.nav` výš), a na širokém
   monitoru navíc tonulo vedle loga v prázdné řadě. První řeší gradient,
   druhé rozvržení na dvě řádky (viz blok NAD ~2000 px níž). */
.nav-center .pill { font-size: .9rem; padding: 0 1rem; }
.nav-right { display: flex; align-items: center; gap: .5rem; }
/* CTA v hlavičce je stejné tlačítko jako všude jinde, jen srovnané na výšku
   pilulek vedle sebe — jinak by řada „skákala". */
.nav-cta { height: 38px; padding: 0 1.3rem; font-size: .93rem; }

/* ── POLE HLEDÁNÍ KONČÍ TAM, KDE ZAČÍNÁ KMIT ──
   Designer, kolo 5 (13. 9.): „ten search bar ať končí na ty čáře" — svislá
   čárka v jeho nákresu padá přesně na místo, kde se rovná linka PULSu láme
   do stoupajícího tahu kmitu. Pravá hrana pole tedy není volba rozvržení,
   je to zarovnání na kresbu nad ním.

   Dřív tu bylo centrování pole na osu stránky (grid `1fr … 1fr` od 1500 px).
   Obojí naráz nejde — osa stránky a začátek kmitu jsou dvě různá místa —
   a rozhoduje kresba.

   POZICE KMITU SE POČÍTÁ, NEOPISUJE. `--nav-beat-x` je tentýž vzorec, podle
   kterého kmit kreslí flexbox o řádek výš: rovné úseky si dělí zbytek šířky
   v poměru 54,4 : 14,6 : 31, mezeru a kmit si z ní berou svoje. Přičítá se
   k tomu, že `.nav-puls` je vyvázaný z odsazení hlavičky (`-var(--pad)`)
   a má 6 px na zaoblený konec linky. Kdyby tu stálo natvrdo zapsané
   procento, rozejde se s linkou při první změně šířky kmitu nebo poměrů.

   Sloupce: pilulky (auto), pole (zbytek) a pravý shluk, jehož šířka je
   dopočítaná tak, aby konec pole padl na `--nav-beat-x` — mezera v gridu
   (`gap: 1rem`) se od ní musí odečíst, jinak by pole končilo o ni dřív.

   Do 1080 px platí flex: tam je menu schované v hamburgeru a pole se
   roztahuje samo (viz blok MOBIL níž) — kmit tou mezerou jen prochází.

   Do 1080 px platí flex (menu je v hamburgeru, pole se roztahuje samo),
   od 1081 px grid: tam se do řádky vejde 450 px pilulek i pole nad jeho
   minimem (naměřeno: na 1081px okně zbyde na pole 167 px). */
@media (min-width: 1081px) {
  .nav-bar {
    --nav-beat-x: calc(6px - var(--pad) + var(--puls-gap)
      + var(--beat-pos) * (100% + 2 * var(--pad) - 12px - var(--puls-gap) - var(--nav-beat-w)));
    display: grid;
    grid-template-columns: auto minmax(8rem, 1fr) calc(100% - var(--nav-beat-x) - 1rem);
    align-items: center;
  }
  /* POLE MA STROP SIRKY A ZAROVNAVA SE DOPRAVA. Bez stropu se na 2K a 4K
     roztahlo pres pul hlavicky (na 3840px okne pres 1300 px sirky) — obrovsky
     prazdny obdelnik, ktery nema co vyplnit. `justify-self: end`
     drzi jeho PRAVOU hranu na `--nav-beat-x`, takze zarovnani na zacatek
     kmitu plati dal a roste jen mezera mezi pilulkami a polem.
     `.nav` v selektoru je nutne, ne ozdoba: zakladni pravidlo `.nav-search`
     stoji v souboru AZ ZA timhle blokem a jinak by prebilo sirku. */
  .nav .nav-search { width: 100%; max-width: 20rem; justify-self: end; }
  .nav-right { justify-self: end; }
  /* Po scrollu se řádka skládá k pravému okraji vedle loga a kmit odjíždí
     pryč — není na co zarovnávat, takže se grid ruší. `justify-content:
     flex-end` ve složeném stavu navíc na gridu znamená něco jiného než
     ve flexu. */
  .nav.scrolled .nav-bar,
  .nav.compact .nav-bar { display: flex; }
}

/* ── 2K A 4K: PILULKY SE PŘESUNOU POD HLEDÁNÍ ──
   Na širokém monitoru je spodní řádka hlavičky přes 2 000 px dlouhá a menu
   v ní tvoří asi šestinu — leží u levého kraje, daleko od loga i od CTA,
   takže ho oko při příchodu na stránku přejede. Rozdělením na dvě řádky se
   z něj stane vlastní blok na ose stránky: nahoře hledání a pravý shluk,
   pod nimi vystředěné menu. Nic se nezvětšuje ani nepřebarvuje, mění se jen
   místo — proto to funguje i s původním vzhledem pilulek.

   FullHD a níž zůstává jednořádkové: 1920 px je pořád šířka, kde se všechno
   do jedné řady vejde bez vzduchu navíc. Hranice je 2000 px, aby 4K monitor
   se 150% škálováním (2560 CSS px) rozvržení dostal a ten se 200 % (1920)
   ne — v obou případech je totiž řádka fyzicky stejně dlouhá jako na FullHD. */
@media (min-width: 2000px) {
  :root { --nav-row-h: 120px; }
  .nav-bar {
    display: grid;
    /* ZAROVNÁNÍ NA ZAČÁTEK KMITU TU NEPLATÍ — pole hledání stojí na ose
       stránky, jak tu bylo od začátku. Na 2K a 4K je řádka přes 2 000 px
       dlouhá a osa stránky je to jediné, co v ní drží pořádek; navíc jsou
       pilulky ve druhé řádce, takže by vpravo zarovnané pole viselo v prázdnu.
       Zarovnání na kmit proto platí jen do 1999 px (blok výš). */
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "bar-left search bar-right"
      "menu     menu   menu";
    /* Řádky si drží výšku obsahu, zbytek --nav-row-h se rozdělí nad a pod ně
       (`align-content`), aby blok stál ve svém prostoru na středu. */
    align-content: center;
    row-gap: 1rem;
    height: var(--nav-row-h);
  }
  .nav-center { grid-area: menu; justify-self: center; }
  /* Strop šířky zůstává (bez něj se pole na 4K roztáhne přes půl hlavičky),
     `center` ho drží na ose — `justify-self` se musí přebít, o blok výš je
     `end`. */
  .nav .nav-search { grid-area: search; width: 20rem; max-width: 20rem; justify-self: center; }
  .nav-right { grid-area: bar-right; justify-self: end; }
  /* Složený pruh zůstává jednořádkový — dvě řádky se do 74 px nevejdou.
     Výšku řeší pravidla složeného stavu výš, tady stačí zrušit grid. */
  .nav.scrolled .nav-bar,
  .nav.compact .nav-bar { display: flex; }
}

/* ── PŘÍCHOD: ŘADA SE POSTUPNĚ SLOŽÍ ──
   Statická věc nahoře stránky se dá přehlédnout bez ohledu na kontrast a
   velikost; pohyb je jediné, co spolehlivě přitáhne oko přesně v tu chvíli,
   o kterou tady jde — první příchod na stránku, ještě před scrollem.
   Položky doskočí zdola s odstupem 55 ms, takže se řada „přečte" zleva
   doprava a návštěvník ji zaregistruje jako nabídku voleb, ne jako ozdobu
   pod logem.

   `backwards` je podstatné: bez něj je položka během své prodlevy vidět na
   svém místě a teprve pak zmizí a naskočí znovu. Fill `forwards` tu naopak
   být NESMÍ — po doběhu se musí vrátit deklarovaný `transform`, jinak by
   `.pill:active { transform: scale(.97) }` přestalo fungovat.

   Cílem je `.nav-center > *`, ne `.pill`: „Poukázky" je tlačítko zabalené
   v `.nav-pop-wrap`, takže na `.pill` by se v řadě přeskočilo a stagger by
   se rozešel s pořadím na obrazovce. */
@keyframes nav-row-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.nav-center > *,
.nav-search,
.nav-right {
  animation: nav-row-in .44s var(--ease-out) backwards;
}
.nav-center > *:nth-child(1) { animation-delay: .12s; }
.nav-center > *:nth-child(2) { animation-delay: .175s; }
.nav-center > *:nth-child(3) { animation-delay: .23s; }
.nav-center > *:nth-child(4) { animation-delay: .285s; }
.nav-center > *:nth-child(5) { animation-delay: .34s; }
.nav-center > *:nth-child(6) { animation-delay: .395s; }
.nav-search { animation-delay: .45s; }
.nav-right  { animation-delay: .5s; }
/* Po odscrollování se řada přeskládá do pruhu — tam už animace nemá co
   ohlašovat a při návratu nahoru by se opakovala. */
.nav.scrolled .nav-center > *,
.nav.scrolled .nav-search,
.nav.scrolled .nav-right { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-center > *,
  .nav-search,
  .nav-right { animation: none; }
  .nav { transition: none; }
  .nav-brand-row, .nav-logo-full { transition: none; }
  .nav.scrolled .nav-bar { animation: none; }
  .pill, .pill-icon { transition: background var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
}

/* ── MEZISTAV: obsah uz slozeny, hlavicka jeste vysoka (.scrolled bez .compact) ──
   Cekat s VSIM, nez kmit dobehne, znamenalo cekat i s tlacitky: uzivatel uz
   scrolluje, ale hlavicka se tvari, ze je porad nahore stranky. Radka se
   proto sklada HNED (logo vlevo, pilulky a CTA vpravo, mensi velikosti) a
   odlozena zustava jen VYSKA hlavicky, aby mel 224 px vysoky kmit kam
   dokreslit. Az dobehne, prida motion.js `.compact` a pruh se stahne.

   `order: -1` da radku nad PULS: ve velke hlavicce je poradi logo → PULS →
   pilulky, tady ma byt radka nahore a PULS pod ni. `justify-content: center`
   nechava kmitu volne misto nad i pod linkou. */
.nav.scrolled { justify-content: center; }
/* LOGO SE V MEZISTAVU NEMENI — ZADNE `.nav.scrolled` PRAVIDLO PRO NEJ.
   Scroll spusti animaci kmitu a po celou tu dobu ma hlavicka porad svou
   velkou vysku, takze logo zustava presne tam a takove, jake bylo nahore
   stranky. Teprve az motion.js prida `.compact` (po dobehnuti kmitu) se
   zmensi a dojede do pruhu — jednim plynulym pohybem, protoze se mezi stavy
   meni jen `height` + `padding-bottom` pasu a `height` loga.

   Drive se logo zmensovalo uz na `.scrolled`, tedy hned na zacatku animace:
   po zbytek te vteriny pak trcelo male u horni hrany vysoke hlavicky, zatimco
   pilulky byly o pul hlavicky niz. Kdo pravidlo pro logo pridava, pridava ho
   na `.compact`, ne sem. */
.nav.scrolled .nav-bar { height: calc(var(--nav-h-compact) - var(--puls-w)); }
.nav.scrolled .nav-bar { order: -1; justify-content: flex-end; }
/* `order` ani `justify-content` se animovat nedaji: radka se z dolniho okraje
   velke hlavicky prehodi nahoru vedle loga jednim snimkem. Fade s malym
   posunem ten jediny snimek prekryje — oko cte pohyb, ne skok. */
.nav.scrolled .nav-bar { animation: nav-row-collapse .42s var(--ease-out) both; }
@keyframes nav-row-collapse {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.nav.scrolled .nav-center .pill,
.nav.scrolled .nav-cta { height: 32px; font-size: .84rem; padding: 0 .8rem; }
.nav.scrolled .nav-social .pill-icon {
  width: 32px; height: 32px; font-size: .95rem;
}
.nav.scrolled .nav-center { gap: .35rem; }
.nav.scrolled .nav-search { flex: 0 1 12rem; }
.nav.scrolled .nav-search-box { height: 32px; }
.nav.scrolled .nav-search-box input { font-size: .84rem; }

/* Složený stav: jedna řada, malé logo, PULS jako spodní hrana.
   Visi na `.compact`, ne na `.scrolled`: mezi obema tridami je prodleva
   (motion.js), behem ktere je hlavicka jeste ve VELKE vysce a probehne v ni
   animace kmitu. Ve slozenem pruhu na 224 px vysoky kmit neni misto, takze
   kdyby se slozila hned, spicka by se orizla o hranu okna presne v tu chvili,
   kdy se kresli. Nove pravidlo slozeneho pruhu patri sem, na `.compact`. */
.nav.compact { height: var(--nav-h-compact); }
/* Jedina zmena pasu s logem v celem skladani: jeho vyska. Zarovnani na stred
   plati v obou stavech (viz `.nav-brand-row` vys), takze se logo vystreduje
   v pruhu samo a neni tu co dopocitavat odsazenim — a hlavne neni co skokem
   prepnout na konci animace. */
.nav.compact .nav-brand-row { height: calc(var(--nav-h-compact) - var(--puls-w)); }
.nav.compact .nav-logo-full { height: var(--nav-logo-h-compact); }
.nav.compact .nav-bar { height: calc(var(--nav-h-compact) - var(--puls-w)); justify-content: flex-end; }
/* Ve slozenem pruhu jsou pilulky o kus mensi. Ve velke hlavicce maji celou
   radu samy pro sebe, tady se o 66 px deli s logem, CTA, jazykem a sitemi —
   v puvodni velikosti z toho byla natlacena zed tlacitek. */
.nav.compact .nav-center .pill,
.nav.compact .nav-cta { height: 32px; font-size: .84rem; padding: 0 .8rem; }
.nav.compact .nav-social .pill-icon { width: 32px; height: 32px; font-size: .95rem; }
.nav.compact .nav-center { gap: .35rem; }
/* DIRA V LINCE SLOZENEHO PRUHU JE V PRVNI TRETINE, NE UPROSTRED (designer,
   kolo 8). Ve velke hlavicce ji drzi pomery kolem kmitu (54 % sirky, „zhruba
   nad O nas"), jenze ve slozenem pruhu je kmit pryc a z te polohy zbyla dira
   presne na ose okna — a vystredeny zlom vypada jako chyba tisku (viz `.puls`
   v 02-primitives.css). Tretiny: prvni usek, pak druhy a treti, ktere se po
   zavreni kmitu spoji do jedne rovne linky (napojeni `puls-join-*` nema
   zaoblene konce, takze spoj neni videt).
   `flex-grow` se animuje stejne dlouho jako vyska pruhu, takze dira dojede
   na nove misto jednim pohybem se skladanim, ne skokem po nem. */
.nav-puls .puls-rail { transition: flex-grow var(--d-collapse) var(--ease-out); }
.nav.compact .nav-puls .puls-rail:nth-of-type(1),
.nav.compact .nav-puls .puls-rail:nth-of-type(2) { flex-grow: 33.3; }
.nav.compact .nav-puls .puls-rail:nth-of-type(3) { flex-grow: 33.4; }
/* ── KMIT SE PO ODSCROLLOVANI NAKRESLI A ODEJDE ──
   Nahore stranky je PULS cely a v klidu. Po scrollu (trida `.scrolled`
   z motion.js, nad 40 px — hlavicka je v tu chvili jeste vysoka, slozi ji az
   `.compact`) stopa kmitu ODTECE zleva doprava jako na monitoru u postele
   a misto po ni se zavre.

   Duvod je provozni, ne vytvarny: slozeny pruh je vysoky 74 px, kmit 224 px.
   At uz ho zmensime (pak to neni prvek z manualu, ale jeho vyrez), nechame
   orezat oknem (vypada zmenseny) nebo pruh kvuli nemu zvysime (bere misto
   pri kazdem scrollu), vzdycky prekazi presne v tu chvili, kdy uzivatel neco
   hleda. ROVNA LINKA ZUSTAVA — je to spodni hrana hlavicky a nesmi zmizet.

   Dve animace, kazda na jinem prvku:
   1. `puls-beat-draw` na `polyline` kresli a maze stopu pres
      `stroke-dasharray`/`stroke-dashoffset`. Polyline ma `pathLength="100"`,
      takze delka tahu je normalizovana na 100 bez ohledu na viewBox a
      klicove snimky jsou primo procenta stopy: offset 100 = nic, 0 = cely
      kmit, -100 = smazano zleva doprava.
      `clip-path` by tu byl horsi: orezava podle border boxu SVG, jenze
      zaobleny konec tahu z viewBoxu vylezá ven, takze by se spicka kmitu
      srizla naplocho.
   2. `puls-beat-close` pak zavre misto po kmitu ZAPORNYM pravym okrajem,
      ne zuzovanim sirky: SVG si obsah pri uzsim boxu preskaluje
      (preserveAspectRatio), kdezto se zapornym marginem se rovne useky
      plynule stahnou k sobe a v lince nezustane dira. Proto ma `.puls-beat`
      sirku dopocitanou cislem a ne `auto` — z `auto` se zaporny okraj
      spocitat neda. Prekryva se s koncem mazani (`animation-delay`).

   Pri navratu nahoru trida zmizi, obe animace s ni a kmit je zase na svem
   miste.

   KMIT ODCHAZI HNED PRI PRVNIM SCROLLU (`.beat-out`, 24 px), ne az pri
   skladani hlavicky (`.scrolled`, 120 px). Duvod je merici: na desktopu je
   kmit vyssi nez misto pod linkou, takze pretika 51 px POD hlavicku (na
   1920 px konci hlavicka na 269, kmit na 320). Dokud je stranka nahore, je
   tam prazdno a presah je zamer z navrhu; jakmile se zacne scrollovat,
   podjede pod nej hero panel a kmit lezi pres nej i pres radu pilulek.
   ODJEZD SE VZDYCKY DOHRAJE CELY. Zkracovat stopu (zkouselo se .45 s) je
   spatne resenim: pri prudkem scrollu stejne nestihne dobehnout, jen vypada
   uspechane. Misto toho drzi delku z navrhu a POCKA SI NA NI SKLADANI
   HLAVICKY — `motion.js` odlozi `.scrolled`, dokud stopa nedobehne, takze
   ani scroll na konec stranky neusekne animaci uprostred.

   Kmit se do hlavicky VEJDE CELY (rozmerova podminka u `--puls-w`), takze
   se pri odjezdu nema co orezavat — zadna maska. Drive tu byla a delala
   vlastni skodu, viz poznamka u pravidla niz.

   Na MOBILU se nic nemeni (viz blok niz) — tam se kmit do hlavicky vejde
   (na 390 px konci hlavicka i kmit na ~150), takze presah neexistuje a
   odjezd zustava soucasti skladani. */
@media (min-width: 1081px) {
  .nav.beat-out .nav-puls .puls-beat polyline {
    stroke-dasharray: 100 100;
    animation: puls-beat-wipe .8s cubic-bezier(.5, 0, .3, 1) forwards;
  }
  /* MASKA TU UZ NENI A NESMI SE VRATIT. Drive se kmit po dobu odjezdu orezaval
     gradientem pod spodni hranou hlavicky, protoze pri `--puls-w = logo/11`
     pretekal ~28 px na hero panel. Byla to leceni priznaku a melo to vlastni
     vadu: maska na prvku, ktery nese `filter: drop-shadow`, orizne i zar na
     hranu sveho boxu, takze kolem kmitu svitil obdelnik („ctverec u pulsu",
     ohlaseno majitelem). Spravne misto opravy je tloustka linky — viz
     rozmerova podminka u `--puls-w` v theme.css: kmit se dnes do hlavicky
     vejde cely, takze neni co orezavat. */
  .nav.beat-out .nav-puls .puls-beat {
    animation: puls-beat-close .45s cubic-bezier(.22, 1, .36, 1) .62s forwards;
  }
  /* ZACHRANNA BRZDA, ne bezny pruchod: `.scrolled` se odklada, dokud odjezd
     bezi, takze sem to spadne jen kdyz slozeni vynuti neco jineho (otevreny
     panel hledani zmrazi hlavicku okamzite). Bez toho by se behem 520ms
     animace vysky posunula linka nahoru i s kmitem a 272px kresba by lezela
     pres pul stranky. Musi stat ZA pravidly `.beat-out` — stejna specificita,
     rozhoduje poradi. */
  .nav.scrolled .nav-puls .puls-beat {
    animation: none; opacity: 0;
    margin-inline-end: calc(var(--beat-render-w) * -1);
  }
  .nav.scrolled .nav-puls .puls-beat polyline { animation: none; }
}
@media (max-width: 1080px) {
  .nav.scrolled .nav-puls .puls-beat polyline {
    stroke-dasharray: 100 100;
    animation: puls-beat-wipe .8s cubic-bezier(.5, 0, .3, 1) forwards;
  }
}
/* ZACINA NA PLNEM KMITU (`stroke-dashoffset: 0`), ne na prazdnu. Predchozi
   verze mela nejdriv kresleni, jenze kmit je v tu chvili uz cely videt —
   prvni snimek animace ho tedy musel skokem zhasnout a bylo videt cvaknuti.
   Kreslit se da jen to, co jeste neni na obrazovce; tady stopa naopak ODTEKA,
   takze animace pokracuje presne z toho, co uzivatel vidi, a zadny skok
   neexistuje.
   Krivka je pomalejsi na zacatku a mekce dojizdi (`cubic-bezier(.5,0,.3,1)`):
   stopa se rozjede jako by ji neco odneslo a nezastavi se naraz. */
@keyframes puls-beat-wipe {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}
@media (max-width: 1080px) {
  .nav.scrolled .nav-puls .puls-beat {
    animation: puls-beat-close .45s cubic-bezier(.22, 1, .36, 1) .62s forwards;
  }
}
/* Zavirani mista po kmitu zacina jeste behem mazani (delay .62 s proti
   .8 s stopy). Prekryv dvou desetin je zamer: kdyby linka cekala, az
   stopa uplne zmizi, byla by mezi obema pohyby videt pauza a pak by sebou
   rada skubla. Takhle jeden pohyb prechazi do druheho.

   Zaporny pravy okraj, ne zuzovani sirky: SVG si obsah pri uzsim boxu
   preskaluje (preserveAspectRatio), takze by se kmit splackl misto aby
   uvolnil misto. Proto ma `.puls-beat` sirku dopocitanou cislem a ne `auto`.
   Je to jedina vec tady, ktera hybe rozvrzenim — proto jen jeden prvek
   a mekka krivka, ktera vetsinu drahy urazi v prvni tretine casu. */
/* Misto po kmitu se zavira UPLNE, na souvislou linku. Zkouseli jsme tu nechat
   mezeru z manualu — v pruhu z toho byl jen vypadek v cabe, ktery vypada jako
   chyba vykresleni, ne jako prvek. Kmit ma po sobe nechat cistou hranu. */
@keyframes puls-beat-close {
  from { margin-inline-end: 0; }
  to   { margin-inline-end: calc(var(--beat-render-w) * -1); }
}
/* Kdo si vypnul pohyb, dostane rovnou vysledek: souvisla linka bez kmitu. */
@media (prefers-reduced-motion: reduce) {
  .nav.beat-out .nav-puls .puls-beat,
  .nav.scrolled .nav-puls .puls-beat {
    animation: none; opacity: 0;
    margin-inline-end: calc(var(--beat-render-w) * -1);
  }
  .nav.beat-out .nav-puls .puls-beat polyline,
  .nav.scrolled .nav-puls .puls-beat polyline { animation: none; }
}
/* Ve slozenem pruhu se pole hledani nesmi roztahovat na ukor pilulek. */
.nav.compact .nav-search { flex: 0 1 12rem; }
/* A musi se srovnat na stejnou vysku jako zmensene pilulky vedle nej. */
.nav.compact .nav-search-box { height: 32px; }
.nav.compact .nav-search-box input { font-size: .84rem; }
/* Šest pilulek je široké ~660 px; s CTA, přepínačem jazyka a odsazením se
   pod ~1080 px do řady nevejdou a začaly by se lámat. Přepnutí na hamburger
   je proto dřív než původních 900 px (tam se lámaly plain odkazy, které byly
   užší). Ve složeném stavu je řada ještě kratší o logo, takže se schovají
   vždycky — do jednoho pruhu se logo a šest pilulek nevejde nikdy.
   Samotný `@media (max-width: 1080px)` blok stojí níž, až za `.nav-search`
   a `.btn` — viz poznámka u něj. */
/* Ve složeném pruhu ubere logo dalších ~130 px, takže hranice je o kus výš.
   Nad 1200 px pilulky zůstávají i po scrollu — mizet a zase se objevovat při
   scrollování nahoru a dolů by bylo horší než je schovat úplně. */
@media (max-width: 1200px) {
  .nav.compact .nav-center { display: none; }
  .nav.compact .nav-burger { display: flex; }
}

/* ── NAV: hledani, socialni site, bublina Poukazky ──
   Podle navrhu (Desktop.pdf, Mobile.pdf): rada textovych pilulek, za ni
   siroke pole hledani s lupou VPRAVO a uplne vpravo kulata tlacitka
   socialnich siti. Zadna ikona v pilulkach - jedina ikona mezi textem
   vypada jako chyba, ne jako duraz. */
/* `min-width` je tu podstatny: mezi 1080 a ~1190 px se rada (pilulky 446 +
   pravy shluk ~310 + odsazeni) do okna vejde jen tak tak a pole se musi umet
   zuzit. Nula by ho ale nechala smrsknout do proužku, proto 9rem. */
.nav-search { position: relative; flex: 1 1 15rem; max-width: 20rem; min-width: 9rem; }
.nav-search-box {
  display: flex; align-items: center; gap: .4rem;
  height: 38px; padding: 0 .5rem 0 1.1rem;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.nav-search-box:focus-within { border-color: var(--accent); box-shadow: var(--glow-2); }
/* Text v poli sedel o par pixelu niz. `appearance: none` je nutny krok
   (`input[type=search]` ma ve WebKitu/Blinku vlastni vnitrni sazbu), ale sam
   nestaci: pri `height: 100%` si radek uvnitr inputu centruje PROHLIZEC podle
   metrik pisma, a to je ta odchylka. Proto `height: auto` — input je pak
   vysoky presne jako jeho radek a na stred ho posadi `align-items: center`
   rodice, stejne jako lupu vedle nej. Zadne dorovnavani posunem. */
.nav-search-box input {
  flex: 1 1 auto; min-width: 0;
  height: auto; align-self: center;
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; line-height: 1.15;
  background: none; border: none; outline: none;
  font-family: var(--font); font-size: .93rem; color: var(--text-strong);
}
.nav-search-box input::placeholder { color: var(--muted); }
/* Krizek prohlizece uvnitr type="search" ma vlastni vzhled mimo paletu.
   `decoration` a `results-button` jsou dalsi dva WebKit kusy ve stejnem poli. */
.nav-search-box input::-webkit-search-cancel-button,
.nav-search-box input::-webkit-search-decoration,
.nav-search-box input::-webkit-search-results-button { display: none; -webkit-appearance: none; }
.nav-search-go {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 1.1rem;
}
.nav-search-go:hover { filter: var(--glow-filter); }

/* Vysledky se rozbali POD polem. Overlay pres celou stranku by z hledani
   udelal modalni okno - v hlavicce s polem cekam seznam, ne dialog. */
.nav-search-panel {
  position: absolute; top: calc(100% + .55rem); left: 0;
  z-index: 120; width: max(100%, 18rem); max-height: min(60vh, 26rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: .7rem;
  background: var(--surface); border: 1px solid var(--line-neon);
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.nav-search-panel[hidden] { display: none; }
/* Panel je vyssi nez `max-height`, takze v nem jezdi scrollbar — a ten je ve
   vychozim stavu SVETLY prouzek od prohlizece pres cely tmavy panel. Sirka i
   barva se proto nastavuji: Firefox `scrollbar-*`, Blink/WebKit pseudoprvky. */
.nav-search-panel { scrollbar-width: thin; scrollbar-color: var(--line-neon) transparent; }
.nav-search-panel::-webkit-scrollbar { width: 8px; }
.nav-search-panel::-webkit-scrollbar-track { background: transparent; }
.nav-search-panel::-webkit-scrollbar-thumb {
  background: var(--line-neon); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
.nav-search-panel::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }
.nss-group + .nss-group { margin-top: .8rem; }
.nss-group[hidden] { display: none; }
/* Stitek skupiny je Beon: kratky verzalkovy radek, presne na co ten stencil je. */
.nss-label {
  margin: 0 0 .3rem; padding-left: .55rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: .75rem; letter-spacing: var(--display-tracking);
  text-transform: uppercase; color: var(--muted);
}
.nss-item {
  display: flex; align-items: center; gap: .3rem;
  padding: .5rem .55rem; border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: .95rem;
  transition: background var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.nss-item[hidden] { display: none; }
.nss-item .ic { color: var(--accent); }
.nss-item:hover, .nss-item:focus-visible { background: var(--surface-2); color: var(--accent); }
.nav-search-empty { margin: .5rem .55rem 0; color: var(--muted); font-size: .92rem; }

/* Socialni site sedi az za PULSem, na pravem konci rady — jsou to odkazy
   PRYC z webu a nesmi stat v jedne rade se strankami webu. */
.nav-social { display: inline-flex; align-items: center; gap: .35rem; }
/* Sit bez vyplnene URL: tvar zustava (je v navrhu), ale nic nedela - tlumene
   a bez kurzoru ruky, aby nesliboval klik, ktery nikam nevede. */
.pill-icon.is-soon { opacity: .45; cursor: default; }
.nav-social .pill-icon { font-size: 1.05rem; }
.nav-mobile-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.nav-mobile-social .pill-icon { width: 46px; height: 46px; font-size: 1.25rem; }
.pill .ic { flex: none; }

/* Bublina „Poukazky". Produkt neexistuje, tak misto mrtveho odkazu rekne,
   co ted delat. Kotvi se k pilulce, ne k oknu — proto obal s `relative`. */
.nav-pop-wrap { position: relative; display: inline-flex; }
.nav-pop {
  position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%);
  z-index: 120; width: max-content; max-width: min(20rem, 80vw);
  padding: 1rem 1.1rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--line-neon);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.nav-pop p { margin: 0 0 .8rem; color: var(--text); font-size: .9rem; line-height: 1.45; }
.nav-pop .btn { padding: .55rem 1.1rem; font-size: .88rem; }

/* POZOR NA PORADI: tenhle blok musi stat AZ ZA `.nav-search` a `.btn` vys —
   media query nepridava specificitu, takze pozdejsi pravidlo se stejnym
   selektorem ho jinak tise prebije (presne to se stalo: pole zustalo siroke
   a CTA se nescholvalo). */
@media (max-width: 1080px) {
  .nav-center { display: none; }
  /* `.nav-bar .nav-burger`, ne `.nav-burger`: zakladni `display: none` stoji
     v 08-chrome.css, tedy v kaskade AZ ZA timhle souborem, a se stejnou
     specificitou tohle pravidlo tise prebijel. Hamburger se pak objevil az
     pod 900 px (11-responsive.css), takze mezi 901 a 1080 px — tablet na
     sirku — nebylo v hlavicce menu vubec: pilulky schovane, hamburger taky
     (designer, kolo 8: „to sandwich menu chybi"). */
  .nav-bar .nav-burger { display: flex; }
  .nav-bar { justify-content: space-between; }
  /* KMIT STOJI NA STREDU MEZERY MEZI POLEM HLEDANI A HAMBURGEREM (designer,
     kolo 8). Na desktopu ho `--beat-pos` 0,69 drzi mimo kulate ikony; tady
     ma radka jen pole (58 %) a hamburger, a kmit do ni svym dolnim tahem
     zajizdi — ma tedy jet mezerou mezi nimi, ne u jednoho z nich. Stred
     mezery je v okne ~79 % sirky radky, kmit se ale pocita z rovnych useku
     linky (bez kmitu a mezery), takze hodnota neni 0,79. Dve cisla, protoze
     na telefonu je odsazeni hlavicky pevnych 20 px (clamp v `--pad`) a
     idealni hodnota tam klesa k 0,745. Namereno na 17 sirkach 360–1080 px:
     stred kmitu je od stredu mezery nejvys 3 px. Driv (0,69) byl o 20 px
     (telefon) az 57 px (768) mimo. */
  .nav { --beat-pos: .774; }
  /* Navrh (Mobile.pdf) ma pod PULSem jen pole hledani vlevo a hamburger
     vpravo. CTA, prepinac jazyka i site zijou v menu — v rade se navic
     trefovaly presne do kmitu PULSu, ktery se kreslil pres ne. Pole proto
     nesmi roztahnout az k hamburgeru: mezera mezi nimi je misto, kterym
     kmit prochazi. */
  .nav-search { flex: 1 1 auto; max-width: 58%; }

  /* MISTO PRO LOGO. `.nav-brand-row` je `position: absolute` (mezi `static`
     a `absolute` prohlizec neinterpoluje, takze by logo pri skladani na sve
     misto skocilo — viz komentar u `.nav-brand-row`), takze `.nav-bar` o nem
     nevi. Na desktopu to nevadi, tam je mista dost; na 390 px vysla po
     odscrollovani suma logo 112 + pole 192 + hamburger 36 nad sirku okna a
     pole hledani se vykreslilo PRES „RESPAWN".
     Odsazeni je proto dopoctene ze SIRKY loga v danem stavu — `.scrolled`
     ma jeste logo v plne velikosti (`--nav-logo-h`), `.compact` uz zmensene.
     Pole se pritom musi umet zuzit, jinak by odsazeni jen posunulo problem
     doprava (`max-width: 58 %` vys mu davalo pevnou sirku). */
  .nav.scrolled .nav-bar { padding-inline-start: calc(var(--nav-logo-h) * var(--nav-logo-ar) + .7rem); }
  .nav.compact .nav-bar { padding-inline-start: calc(var(--nav-logo-h-compact) * var(--nav-logo-ar) + .7rem); }
  .nav.scrolled .nav-bar,
  .nav.compact .nav-bar { transition: padding var(--d-collapse) var(--ease-out); }
  .nav.scrolled .nav-search,
  .nav.compact .nav-search { max-width: none; min-width: 0; }

  /* PANEL HLEDANI SE KOTVI K HLAVICCE, NE K POLI.
     `.nav-search` je na mobilu `position: static`, takze vztaznym ramcem
     panelu je `.nav` (ta je `fixed`) a `top: 100%` ho drzi presne pod
     hlavickou v obou jejich podobach — stejna mechanika, jakou uz pouziva
     doznivajici gradient `.nav::after`.

     Duvod je merici, ne vytvarny: kotveny k poli mel panel `left: 0` na levem
     okraji POLE a sirku `max(100%, 18rem)`. Po odscrollovani se radka odsazuje
     o sirku loga, takze pole zacinalo na x=143 a panel siroky 288 px koncil na
     431 px — na 390px telefonu 41 px za hranou okna (`overflow-x: clip` na
     `<html>` je utne, takze prava tretina polozek zmizi). Zaroven panel behem
     skladani hlavicky odskocil o 123 px doprava a 85 px nahoru, tedy primo
     pod prstem. Kotveni na `--pad` obe veci resi naraz: panel ma vzdy sirku
     okna bez okraju a nezavisi na tom, kde zrovna sedi pole. */
  .nav-search { position: static; }
  .nav-search-panel {
    top: calc(100% + .4rem);
    left: var(--pad); right: var(--pad);
    width: auto;
    /* Klavesnice zabere spodni tretinu obrazovky a `vh` o ni nevi. Skutecnou
       vysku dopocita `nav_search.js` z `visualViewport` do `--nss-max`;
       tohle je zaloha pro prohlizec, ktery ho nema. */
    max-height: var(--nss-max, min(60vh, 26rem));
  }
  /* `.nav-bar` ma pri skladani `animation: nav-row-collapse` s transformem —
     a transform vytvari vztazny ramec pro absolutne pozicovane potomky, takze
     by si panel behem tech 420 ms prevzala radka misto hlavicky a odskocil by.
     Hlavicka je sice po dobu otevreneho panelu zmrazena (viz `LG_NAV.freeze`
     v motion.js), ale panel se muze otevrit i doprostred uz bezici animace.
     Koncovy snimek animace je `opacity: 1; transform: none`, tedy presne
     vychozi stav — vypnutim se tedy nic neztrati. */
  .nav.search-open .nav-bar { animation: none; }
  /* `.nav-bar .nav-cta`, ne `.nav-cta`: `.btn { display: inline-flex }` stoji
     v souboru niz a se stejnou specificitou by tuhle radku prebilo. */
  .nav-right .lang-switch,
  .nav-right .nav-social,
  .nav-bar .nav-cta { display: none; }
}
/* Telefon: druha polovina polohy kmitu (viz `--beat-pos` v bloku vys). */
@media (max-width: 480px) {
  .nav { --beat-pos: .75; }
}