/* MEATING 2026 — eventová aplikace

   VZHLED je od 1. 9. 2026 podle ODSOUHLASENÉHO návrhu:
     · domovská obrazovka — Navrh_slozeny_2026-09-01\navrh_B_ctverce.html,
     · podstránky        — Navrhy_podstranek_2026-09-01\_styl.py + podstranka_*.html.
   Referenční šířka návrhu je 390 px; tady je sazba rozvolněná do responzivní
   podoby (sloupec se stahuje na --sirka a body se dopočítávají).

   Původní vzhled je celý zazálohovaný v _zaloha_puvodni_grafika_2026-09-01/
   — vrací se prostým přepsáním, návod je v jeho _JAK_VRATIT.md.

   PÍSMA (fonts.css, soubory v assets/fonts):
     Anton         — kondenzované verzálky: nadpisy, dlaždice, tlačítka,
     Inter         — běžný text, popisky, štítky,
     Space Grotesk — čísla (časy programu, ročník 2026).
   Systémová písma zůstávají jako záloha v každém font stacku.

   ŘÁDKOVÁNÍ A ČESKÁ DIAKRITIKA — pravidlo pro celý soubor.
   Háček a čárka nad verzálkou (Ř, Ě, Š, Ú, Í) sedí výš než verzálková výška,
   takže ŽÁDNÝ prvek s textem nesmí mít line-height pod 1,18 (změřeno dřív na
   systémových písmech; podrobnosti jsou v záloze původního stylopisu).
   Návrh měl u některých nadpisů 1,14–1,16 — tady jsou srovnané na 1,18.
   Rozdíl je zlomek pixelu, ale u dvouřádkových verzálek jako „ŠPEKÁČEK“
   je to rozdíl mezi celým a uřízlým háčkem. Jediná výjimka jsou prvky,
   ve kterých je JEN číslo nebo čas (.cas-stitek, .cislo, .stupne, .pin,
   .tit .rok b) — tam se řádkování 1 drží schválně, aby čísla seděla ve
   svých kolečkách a štítcích. */

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
/* Musí být silnější než display z tříd níž (dialog má display:flex), jinak by
   schovaná vrstva zůstala přes celou obrazovku a polykala doteky. */
[hidden]{display:none !important}

:root{
  --cerv:#AD1A1B; --cerv-tm:#8E1415; --ruz:#FEEBE8; --ink:#23120F;
  --hneda:#8A6459; --linka:#E9DAD4; --zed:#F5EEEB; --text-tm:#4A3129;
  --spara:rgba(120,70,66,.20);        /* spára kachlíků na zdi */
  --spara-pres:rgba(120,70,66,.85);   /* táž spára, ale přes kresbu prasete */
  --kachl:46px;                       /* rozteč kachlíkové mřížky */
  --sirka:480px;                      /* na širokých displejích appka nezabírá celou plochu */

  /* ── SVISLÁ JEDNOTKA --u — proč tu je ──────────────────────
     Zadavatel 1. 9. 2026: „nesmí být žádná obrazovka scrollovatelná — žádná
     kromě partnerů a části praktických informací.“ Na 390 × 844 se vešlo
     všechno, na nízkých telefonech ne: domovská přetékala o 94 px (375 × 667)
     až 141 px (360 × 640), program o 157 až 184 px, stánky o 143 až 185 px.

     Řešení je stejné jako u závěrečné obrazovky kvízu (multivac-meating-kviz,
     --zaver-u): rozvržení, pořadí ani obsah se nemění, ale VŠECHNY svislé míry
     se odvozují od jedné jednotky, která se plynule stahuje s výškou okna.
     Žádné skokové breakpointy, žádný zoom ani transform přes celou stránku —
     ty by rozmazaly text a rozhodily tapací plochy.

     --u  … 1 px na referenčních 844 px výšky (iPhone 14 — displej, na kterém
            je návrh odsouhlasený), takže tam a na všem vyšším zůstává sazba na
            chlup jako v návrhu. Níž klesá úměrně: 0,88 na 740 px, 0,79 na
            667 px, 0,76 na 640 px. Dolní mez drží aplikaci pohromadě
            v landscape, kde se stejně roluje.
     --uf … táž jednotka pro PÍSMA, ale o dost mírnější: na 640 px je na 0,80,
            ne na 0,76. Písma se stahovat MUSÍ (šest karet programu se jinak na
            640px displej nevejde ani s nulovými mezerami), ale co nejmíň —
            svislé mezery a výšky ustupují první. Součet konstant je 1, takže
            na 844 px a výš je --uf přesně 1 px a písma mají původní velikost.
     --uc … táž jednotka pro OBAL — výšku horní lišty a spodní navigace. Ta jde
            naopak strměji než --u (1,6× rychleji), protože právě v liště a
            v navigaci je nejvíc vzduchu: na 844 px má lišta 68 px na 33 px
            obsahu a navigace 78 px na 37 px. Obal proto ustupuje první a text
            obrazovky se díky tomu smí stahovat míň. Na 844 px je i --uc rovna
            1 px, takže se na referenčním displeji nemění vůbec nic. Bez tohohle
            členu se program V DEN AKCE na 360 × 640 nevešel: běžící blok má
            navíc řádek „PRÁVĚ PROBÍHÁ“ a přetékal o 13 px.

     dvh, ne vh: na mobilu s plovoucí lištou prohlížeče je vh počítané
     z většího viewportu, který v tu chvíli reálně není vidět — sazba by vyšla
     větší, než kolik je místa. */
  --u:clamp(0.58px, calc(100dvh / 844), 1px);
  --uf:calc(0.17px + 0.83 * var(--u));
  --uc:clamp(0.55px, calc(1.6 * var(--u) - 0.6px), 1px);

  --nav-v:calc(78 * var(--uc));       /* výška spodní navigace */
  --lista-v:calc(68 * var(--uc));     /* výška kompaktní hlavičky podstránek */
  /* Kolik z výšky okna mapě nezbývá: hlavička, horní odsazení obsahu (16 px),
     nadpis nad rámečkem i jeho patka (6 px), dole odsazení obsahu (20 px)
     a navigace i s bezpečnou zónou. Rozepsané po jednotkách, ze kterých je to
     poskládané: odsazení jde s --u, nadpis (23 px × řádkování 1,18) s --uf. */
  /* Legenda pod mapou (zadavatel 7. 9. 2026: „u té mapy mi chybí legenda“).
     Řádky legendy tečou vedle sebe, takže jejich počet závisí na šířce sloupce
     a na jazyce. ZMĚŘENO vykreslením, ne odhadem: sloupec 350 px (telefon
     390 px) — česky i anglicky 3 řádky, 53 px; sloupec 320 px (telefon 360 px)
     — česky 3 řádky, ANGLICKY 4 řádky, 72 px. Rezervují se proto čtyři řádky:
     4 × 15 px + 3 × 4 px mezera + 9 px odsazení od mapy = 81.
     Na 390px telefonu tím zůstane ~19 px nevyužitých a mapa je 336 místo
     350 px široká; kdyby se rezerva snížila, na 360px telefonu by se anglická
     obrazovka začala rolovat. Je to JEDINÉ číslo, kterým se legenda
     ve výpočtu výšky mapy projeví. */
  --legenda-v:calc(81 * var(--u));
  --mapa-mimo:calc(var(--lista-v) + 42 * var(--u) + 27.2 * var(--uf)
                   + var(--legenda-v) + var(--nav-v) + env(safe-area-inset-bottom));
  --pismo:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --pismo-nadpis:"Anton","Segoe UI",system-ui,sans-serif;
  --pismo-cisla:"Space Grotesk","Segoe UI",system-ui,sans-serif;
}

html{background:var(--zed)}
body{
  min-height:100dvh;background:var(--zed);
  font-family:var(--pismo);color:var(--ink);
  padding-bottom:calc(var(--nav-v) + env(safe-area-inset-bottom));
  /* Zadavatel 1. 9. 2026: „nesmí se dát zoomovat, jediné co se dá zoomovat je
     mapa areálu.“ manipulation = běžné posouvání a klepání, ale ŽÁDNÉ
     přiblížení dvojklepnutím. Platí i na potomky (prohlížeč protíná hodnoty po
     celé cestě k prvku), takže to pokrývá celou aplikaci VČETNĚ MAPY — ta měla
     do 7. 9. 2026 výjimku kvůli vlastnímu přibližování, to je ale zrušené.
     Roztažení dvěma prsty tohle nezakazuje — to řeší assets/js/dotek.js. */
  touch-action:manipulation;
}

/* ── appka, ne stránka: chování dlouhého stisku ──────────────

   Zadavatel 2. 9. 2026: „když podržím prst na nějakém tlačítku, vyskočí mi
   takové to ‚otevřít na nové kartě, otevřít na nové kartě ve skupině, otevřít
   na anonymní kartě‘ — to tam nechci. A když si rozkliknu nějaký program dne
   a držím prst na nějakém slově, tak se mi zase označí… dole mi vyskakujou
   nějaký výsledky Googlu k tomu slovu.“ Na akci má appka působit jako appka.

   PROČ TO JSOU DVĚ VĚCI, A NE JENOM TAHLE — NEMAZAT ANI JEDNU:
     · -webkit-touch-callout:none zruší nabídku a náhled cíle odkazu, ale JEN
       na iOS Safari. Je to nestandardní vlastnost WebKitu; Chrome na Androidu
       ji ignoruje (a s ním i každý WebView od Androidu 4.4) — ověřeno
       2. 9. 2026 v dokumentaci MDN a v datech o podpoře.
     · Na Androidu nabídku zastaví teprve potlačení události `contextmenu`,
       kterou dlouhý stisk vyvolá — to je v assets/js/dotek.js.
   Samotné CSS by tedy pokrylo jen iPhony, samotný JS zase nezabrání náhledu
   odkazu na iOS. Musí být obojí.

   PŘEDPONY U user-select — proč zrovna tyhle dvě řádky:
     · -webkit-user-select potřebuje Safari na počítači i na iOS, nepředponovou
       podobu dodnes neumí (stav k 2. 9. 2026),
     · nepředponová user-select pokryje Chrome, Edge i Firefox,
     · -moz- je zbytečná (Firefox umí nepředponovou od verze 69) a -ms- taky
       (jen IE a starý Edge, ze kterých na akci nikdo appku neotevře).

   VÝBĚR TEXTU SE VRACÍ TAM, KDE HO ČLOVĚK OPRAVDU POTŘEBUJE — heslo k Wi-Fi
   a telefony s e-maily na organizátory na podstránkách praktických informací;
   viz .podstranka-hlava small a .zastupny p níž v tomhle souboru.

   ⚠ NIC Z TOHOHLE BLOKU NEMĚNÍ SAZBU. Všechny vlastnosti se týkají výhradně
   chování pod prstem, ne rozvržení ani kreslení — vzhled zůstává pixel na
   pixel stejný a rolování se nemění. */
body{
  -webkit-touch-callout:none;      /* iOS: žádné „Otevřít na nové kartě“ */
  -webkit-user-select:none;        /* Safari nepředponovou verzi nemá */
  user-select:none;
  /* Modrý záblesk pod prstem. Dosud byl vypnutý jen na vyjmenovaných kartách
     (blok „klepnutí a klávesnice“ níž), takže blikal na spodní navigaci,
     na kroku zpět i na tlačítkách dialogu. Vlastnost se dědí, tady je tedy
     pryč z celé aplikace naráz; tamten výčet zůstává, protože si vedle toho
     nese vlastní přechody. */
  -webkit-tap-highlight-color:transparent;
}
/* Táhnutí obrázku nebo odkazu prstem. U podkladu mapy se to řešilo odjakživa
   (viz .mapa-ramec img), mimo ni se dá odtáhnout logo partnera nebo fotka
   místa v náhledu — a to je přesně to, po čem je poznat webová stránka.
   Vlastnost je jen webkitová, ostatní prohlížeče kryje potlačení události
   `dragstart` v assets/js/dotek.js. */
img,a{-webkit-user-drag:none}
/* Přetažení celé stránky za horní hranu (tah dolů = obnovit stránku, gumové
   odskočení na konci rolování). V appce nemá co dělat — obnovení by člověka
   vrátilo na domovskou obrazovku. Hodnota patří na <html>: viewport si
   overscroll bere z kořenového prvku, na <body> by se ignorovala. Netýká se
   samotného rolování ani přetečení, jen toho, co se stane NA JEHO KONCI. */
html{overscroll-behavior-y:none}

svg{fill:none;stroke-linecap:round;stroke-linejoin:round}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
a{color:inherit;text-decoration:none}

/* ── kompaktní hlavička podstránek ───────────────────────────
   Nejdřív nápis MEATING s ročníkem, teprve za ním kulaté logo akce.
   Na domovské obrazovce se hlavička schovává — tam je velký otištěný
   nadpis a natočené razítko přímo v obsahu. */
.lista{
  position:sticky;top:0;z-index:30;height:var(--lista-v);
  background:#FFFFFF;border-bottom:2px solid rgba(173,26,27,.55);
  box-shadow:0 3px 10px rgba(35,18,15,.07);
}
.znacka{
  height:100%;max-width:var(--sirka);margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:11px;
}
.znacka .jmeno b{
  display:block;font-family:var(--pismo-nadpis);font-size:calc(22 * var(--uf));
  line-height:1.18;
  letter-spacing:.5px;text-transform:uppercase;color:var(--cerv);font-weight:400;
}
.znacka .jmeno i{
  display:block;font-family:var(--pismo-cisla);font-style:normal;font-weight:700;
  font-size:9.5px;line-height:1;letter-spacing:6.2px;color:var(--cerv);
  opacity:.85;margin-top:calc(4 * var(--u));
}
.znacka .mark{width:calc(44 * var(--u));height:calc(44 * var(--u));display:block}
/* Přepínač jazyka je od 31. 8. 2026 vypnutý (aplikace jen česky) — styl tu
   zůstává pro případ, že by se angličtina vrátila; viz assets/js/i18n.js. */
.jazyk{display:flex;align-items:center;width:34px;height:34px;flex-shrink:0;padding:0}
.jazyk .vlajka{width:34px;height:34px;display:block;stroke-width:0}
body.obr-domov .lista{display:none}

/* ── obsah = kachlíková zeď ──────────────────────────────────
   Vzor NENÍ na <body>, ale na sloupci obsahu, a to schválně: bourací schéma
   vepře je nad zdí a vlastní spáry si dopočítává ze svého místa v tomhle
   boxu. Kdyby zeď ležela na <body>, na širokém okně (kde je sloupec
   vystředěný) by spáry přes prase nenavazovaly na spáry kolem něj.
   z-index:0 dělá ze sloupce stackovací kontext — jen díky němu se kresba
   prasete (z-index:-1) schová pod obsah, a přesto zůstane nad zdí. */
.obsah{
  position:relative;z-index:0;
  max-width:var(--sirka);margin:0 auto;
  padding:calc(16 * var(--u)) 20px calc(20 * var(--u));
  min-height:calc(100dvh - var(--lista-v) - var(--nav-v) - env(safe-area-inset-bottom));
  background-color:var(--zed);
  background-image:
   radial-gradient(circle at 30% 16%,rgba(255,255,255,.95),rgba(255,255,255,0) 48%),
   linear-gradient(90deg,var(--spara) 1.4px,transparent 1.4px),
   linear-gradient(var(--spara) 1.4px,transparent 1.4px);
  background-size:100% 844px,var(--kachl) var(--kachl),var(--kachl) var(--kachl);
  background-repeat:no-repeat,repeat,repeat;
}
/* Domovská obrazovka si rozvržení řídí sama (hlavička, pruh, mřížka dlaždic)
   a nemá kompaktní lištu — dostane celou výšku okna a žádné odsazení. */
body.obr-domov .obsah{
  padding:0;display:flex;flex-direction:column;
  min-height:calc(100dvh - var(--nav-v) - env(safe-area-inset-bottom));
}

/* ── společné prvky ──────────────────────────────────────── */

.nadpis{
  display:flex;align-items:center;gap:9px;margin-bottom:calc(14 * var(--u));
  font-family:var(--pismo-nadpis);font-size:calc(23 * var(--uf));line-height:1.18;
  font-weight:400;text-transform:uppercase;color:var(--ink);
}
.nadpis i{flex:0 0 22px;height:2px;background:var(--cerv);font-style:normal}
/* datum drží pod nadpisem programu, mapa má užší patku (vejde se tím celý rámeček) */
.nadpis.s-datem{margin-bottom:calc(4 * var(--u))}
.nadpis.tesny{margin-bottom:calc(6 * var(--u))}

.podnadpis{
  display:flex;align-items:center;gap:8px;margin:calc(20 * var(--u)) 0 calc(11 * var(--u));
  font:800 10px/1.18 var(--pismo);font-size:calc(10 * var(--uf));
  letter-spacing:2.4px;text-transform:uppercase;color:var(--cerv);
}
.podnadpis i{flex:0 0 18px;height:2px;background:var(--cerv);font-style:normal}

.info{font:500 11.5px/1.55 var(--pismo);font-size:calc(11.5 * var(--uf));
  color:var(--hneda);margin-bottom:calc(14 * var(--u))}

/* bílá dlaždice a tmavý pruh — dva stavební kameny celého vizuálu */
.karta{
  background:#FFFFFF;border:1.4px solid var(--linka);border-radius:3px;
  box-shadow:0 3px 9px rgba(35,18,15,.07);
}
.tmavy{
  background:var(--ink);border:1.6px solid rgba(173,26,27,.55);border-radius:4px;
  box-shadow:0 9px 20px rgba(35,18,15,.22);
}

.chip{
  display:inline-block;background:var(--ruz);color:var(--cerv);
  font:700 9.5px/1.2 var(--pismo);font-size:calc(9.5 * var(--uf));
  letter-spacing:.3px;padding:calc(5 * var(--u)) 8px;border-radius:2px;
}
.tmavy .chip{background:rgba(254,235,232,.13);color:var(--ruz)}

.zpet{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:calc(14 * var(--u));
  font:800 10px/1.18 var(--pismo);font-size:calc(10 * var(--uf));
  letter-spacing:1.9px;text-transform:uppercase;color:var(--cerv);
}

.tlacitko{
  display:block;width:100%;margin-top:calc(20 * var(--u));padding:calc(15 * var(--u)) 0;
  text-align:center;background:var(--cerv);color:#FFFFFF;border-radius:3px;
  font-family:var(--pismo-nadpis);font-size:calc(15 * var(--uf));line-height:1.18;
  letter-spacing:.5px;
  text-transform:uppercase;box-shadow:0 6px 14px rgba(173,26,27,.24);font-weight:400;
}
.tlacitko.tise{
  background:#FFFFFF;color:var(--cerv);box-shadow:none;
  border:1.6px solid rgba(173,26,27,.55);
}

/* ── domovská: hlavička ──────────────────────────────────────
   Kachlíková zeď, nakřivo otištěný nadpis MEATING 2026 a bourací schéma
   vepře NAD mřížkou — ale se spárami přes sebe. Vrstvy jsou tři:
     1. zeď    — barva, spáry a bílý svit (pozadí sloupce obsahu),
     2. PRASE  — obrázek nad vším z bodu 1, v plné sytosti své barvy,
     3. spáry  — táž mřížka ještě jednou, OŘÍZNUTÁ MASKOU PŘESNĚ NA LINKU
                 PRASETE, takže leží jen tam, kde je kresba.
   Třetí vrstva je celý vtip: mimo linku prasete se nekreslí nic (zeď se
   nikde nezdvojuje), ale každá spára, která přes prase vede, se přes něj
   propíše. Proto taky vyšší krytí spáry (.85 proti .20 na zdi).

   Obal .schema schválně vyplňuje CELOU hlavičku (inset:0), i když kresba
   v něm je malá. Jen tak leží počátek mřížky přesně na počátku mřížky zdi
   a spáry navazují bez ohledu na šířku okna; kresba se pak umisťuje
   od PRAVÉHO okraje a mřížku pod ní posouvat netřeba. */
/* Hlavička i kresba v ní se stahují s --u — na 640px displeji je hlavička
   152 px místo 200 px a schéma vepře v ní zmenšené ve stejném poměru, takže
   kompozice zůstává táž, jen v menším měřítku. Rozteč kachlíků (--kachl) se
   schválně NEmění: zeď je pořád stejná zeď a spáry přes prase na ni navazují
   díky masce bez ohledu na velikost kresby. */
.hero{
  --prase-s:calc(187 * var(--u));     /* šířka kresby vepře v hlavičce */
  --prase-v:calc(106 * var(--u));     /* její výška */
  --prase-y:calc(48 * var(--u));      /* odsazení kresby od horní hrany */
  position:relative;overflow:hidden;flex:0 0 auto;
  height:calc(200 * var(--u));padding:calc(24 * var(--u)) 22px 0;
}
.hero .schema{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .schema img{
  position:absolute;right:5px;top:var(--prase-y);width:var(--prase-s);height:var(--prase-v);
  display:block;opacity:.42;
}
.hero .schema::after{
  content:"";position:absolute;inset:0;
  background-image:
   linear-gradient(90deg,var(--spara-pres) 2px,transparent 2px),
   linear-gradient(var(--spara-pres) 2px,transparent 2px);
  background-size:var(--kachl) var(--kachl);
  background-position:0 0;
  -webkit-mask-image:url("assets/img/prase_schema.png");
  mask-image:url("assets/img/prase_schema.png");
  -webkit-mask-size:var(--prase-s) var(--prase-v);mask-size:var(--prase-s) var(--prase-v);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:right 5px top var(--prase-y);
  mask-position:right 5px top var(--prase-y);
}
.hero .pas{
  position:relative;z-index:1;display:flex;align-items:center;gap:9px;
  font:800 8.5px/1.18 var(--pismo);font-size:calc(8.5 * var(--uf));
  letter-spacing:2.4px;text-transform:uppercase;color:var(--cerv);
}
.hero .pas i{flex:0 0 24px;height:2px;background:var(--cerv);font-style:normal}
/* nadpis otištěný jako razítko, mírně natočený */
.tit{
  position:relative;z-index:1;margin-top:calc(15 * var(--u));transform:rotate(-1.9deg);
  transform-origin:left center;mix-blend-mode:multiply;
}
.tit h1{
  font-family:var(--pismo-nadpis);font-size:calc(60 * var(--uf));line-height:.9;
  letter-spacing:-1px;
  text-transform:uppercase;color:var(--cerv);opacity:.95;font-weight:400;
}
.tit .rok{display:flex;align-items:center;gap:12px;margin-top:calc(9 * var(--u))}
.tit .rok b{
  font-family:var(--pismo-cisla);font-weight:700;font-size:calc(23 * var(--uf));line-height:1;
  letter-spacing:11px;color:var(--cerv);opacity:.95;
}
.tit .rok i{flex:1;height:2px;background:var(--cerv);opacity:.4;font-style:normal}
/* Kulaté logo akce jako natočené razítko — sahá z hlavičky dolů přes hranu
   tmavého pruhu. Růžová plocha je krycí součást samotného souboru, žádné
   pozadí ani zaoblení pod ním není potřeba.

   KOLÉBÁNÍ. Zadavatel 2. 9. 2026: „aby jako jemně jakoby rotovalo ze strany
   na stranu… netočí se to 360 — točí se to prostě maličko doleva a pak zase
   maličko doprava.“ Razítko se proto pomalu naklání kolem SVÉ VÝCHOZÍ POLOHY.

   Výchozí natočení má vlastní proměnnou --sklon a klíčové snímky z ní počítají
   (calc), takže se kolébá kolem −8°, ne kolem nuly. Kdyby se úhly napsaly
   natvrdo, animace by statický transform přebila a razítko by při načtení
   skočilo do svislé polohy; a kdo by pak sklon přenastavil, animace by mu
   utekla jinam. Takhle se mění na jednom místě.

   Proč zrovna tyhle hodnoty:
     · ±3° kolem výchozích −8°, tedy −11° až −5°. Na kruhu o průměru 100 px to
       je asi 5 px dráhy na obvodu — na noži v logu je pohyb vidět, ale obrys
       kolečka se nikam neposune, takže to nepůsobí jako blikající reklama.
       Větší výkyv už by z otištěného razítka dělal houpačku.
     · 7 s na celou obrátku tam i zpět (3,5 s každým směrem). Schválně to není
       6 s jako pulz živé tečky v okénku „PRÁVĚ PROBÍHÁ“ — nesoudělné doby se
       na obrazovce nesejdou do společného rytmu a nezačnou tepat spolu.
     · ease-in-out mezi VŠEMI snímky. Náběh i doběh každého půlcyklu má nulovou
       rychlost, takže se v krajních polohách plynule obrátí a nikde necukne.
     · Krajní snímky 0 % a 100 % jsou totožné (−11°), takže na švu smyčky
       nenavazuje jiná poloha ani jiná rychlost — přechod není vidět.
   Hýbe se jen `transform`, žádný rozměr ani odsazení: rozvržení se nepřepočítá
   a nic se tím nerozroluje. */
.razitko{position:absolute;right:14px;top:calc(152 * var(--u));
  width:calc(100 * var(--u));height:calc(100 * var(--u));z-index:5;
  --sklon:-8deg;--vykyv:3deg;
  transform:rotate(var(--sklon));
  animation:kolebani 7s ease-in-out infinite}
.razitko img{display:block;width:100%;height:100%;
  filter:drop-shadow(0 6px 14px rgba(35,18,15,.28))}
@keyframes kolebani{
  0%,100%{transform:rotate(calc(var(--sklon) - var(--vykyv)))}
  50%{transform:rotate(calc(var(--sklon) + var(--vykyv)))}}
/* Komu se v systému animace nelíbí, tomu razítko stojí v návrhové poloze. */
@media (prefers-reduced-motion:reduce){
  .razitko{animation:none}
}

/* ── domovská: pruh „právě probíhá“ ──────────────────────────
   PRÁVĚ PROBÍHÁ je HOLÝ TEXT, žádná ploška ani rámeček za nápisem. Před ním
   je tečka — klasický indikátor živého vysílání; je součástí nápisu, a proto
   pulzuje s ním. Animuje se BARVA (bílá ↔ značková červená) a s ní červená
   záře: v červené fázi text i tečka jemně doutnají, v bílé je záře na nule.
   Podklad pruhu je proto tmavý — na něm je čitelná bílá i červená fáze.

   Pulz patří VÝHRADNĚ běžícímu bloku. Střídané upoutávky, vyhlášené výsledky
   i stav mimo den akce mají tečku klidnou, ať „živě“ neznamená něco jiného. */
#okenko{flex:0 0 auto;margin:calc(16 * var(--u)) 20px 0}
/* --ted-min dopočítává obrazovky.js: je to výška NEJVYŠŠÍ ze střídaných
   variant, aby okénko při výměně obsahu neposkočilo (delší nadpis se láme na
   dva řádky a box by se jinak natáhl). Dokud se nedopočítá, platí míra z návrhu. */
.ted{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  width:100%;min-height:max(calc(158 * var(--u)), var(--ted-min, 0px));
  padding:calc(14 * var(--u)) 22px;color:#FFFFFF;
  background:var(--ink);border:1.6px solid rgba(173,26,27,.55);border-radius:4px;
  box-shadow:0 9px 20px rgba(35,18,15,.22);
}
/* PROLNUTÍ PŘI STŘÍDÁNÍ — krytí se mění JEN na vnitřním obsahu, nikdy na boxu.
   Dřív mizel průhledností celý .ted: tmavá ploška na 320 ms zmizela, v rozvržení
   po ní zůstala díra a nový obsah pak naskočil skokem — zadavatel 1. 9. 2026:
   „pokaždý to zmizí, pak se tam objeví něco jiného, ale mezitím to zmizí úplně,
   že to takhle blikne.“ Teď je box vykreslený pořád a střídá se jen text v něm. */
.ted > em,.ted > b,.ted > small{transition:opacity .32s ease}
.ted.mizi > em,.ted.mizi > b,.ted.mizi > small{opacity:0}
.ted em{
  align-self:flex-start;display:flex;align-items:center;gap:8px;font-style:normal;
  font:800 11px/1.18 var(--pismo);font-size:calc(11 * var(--uf));
  letter-spacing:2.6px;text-transform:uppercase;color:#FFFFFF;
  animation:puls 6s ease-in-out infinite;
}
.ted em i{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;font-style:normal;background:#FFFFFF;
  animation:puls-tecka 6s ease-in-out infinite;
}
.ted b{
  display:block;font-family:var(--pismo-nadpis);font-size:calc(27 * var(--uf));
  line-height:1.18;font-weight:400;color:#FFFFFF;margin-top:calc(14 * var(--u));
}
.ted small{display:block;font:600 12px/1.4 var(--pismo);font-size:calc(12 * var(--uf));
  color:rgba(254,235,232,.66);margin-top:calc(11 * var(--u))}
/* klidné stavy — beze změny obsahu, jen bez pulzu */
.ted.upoutavka em,.ted.vysledek em,.ted.mimo em{animation:none}
.ted.upoutavka em i,.ted.vysledek em i,.ted.mimo em i{animation:none}
.ted.upoutavka em,.ted.mimo em{color:var(--ruz)}
.ted.upoutavka em i{background:var(--ruz)}
.ted.mimo em i{background:var(--ruz);opacity:.5}
.ted.vysledek em i{background:var(--cerv);box-shadow:0 0 7px rgba(173,26,27,.85)}
/* Barva a záře, nic jiného — žádná opacita ani měřítko, ať kolem nic
   „nedýchá“. Krajní stavy chvíli vydrží, ať je pulz pomalý, ne blikavý. */
@keyframes puls{
  0%,8%{color:#FFFFFF;text-shadow:0 0 7px rgba(173,26,27,0),0 0 17px rgba(173,26,27,0)}
  46%,54%{color:#AD1A1B;text-shadow:0 0 7px rgba(173,26,27,.85),0 0 17px rgba(173,26,27,.5)}
  92%,100%{color:#FFFFFF;text-shadow:0 0 7px rgba(173,26,27,0),0 0 17px rgba(173,26,27,0)}}
@keyframes puls-tecka{
  0%,8%{background:#FFFFFF;box-shadow:0 0 7px rgba(173,26,27,0),0 0 17px rgba(173,26,27,0)}
  46%,54%{background:#AD1A1B;box-shadow:0 0 7px rgba(173,26,27,.85),0 0 17px rgba(173,26,27,.5)}
  92%,100%{background:#FFFFFF;box-shadow:0 0 7px rgba(173,26,27,0),0 0 17px rgba(173,26,27,0)}}
@media (prefers-reduced-motion:reduce){
  .ted em,.ted em i{animation:none}
}

/* ── domovská: mřížka dlaždic ────────────────────────────────
   Šest bílých dlaždic ve dvou sloupcích, žádná zvýrazněná. Pořadí je
   z návrhu a řídí ho DLAZDICE v assets/js/data.js. */
.mriz{flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:calc(10 * var(--u));padding:calc(14 * var(--u)) 20px}
.dl{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(12 * var(--u)) 13px calc(11 * var(--u));
  background:#FFFFFF;border:1.4px solid var(--linka);border-radius:3px;
  box-shadow:0 3px 9px rgba(35,18,15,.07);
}
/* Ikona i fotka v dlaždici se stahují s --u — jinak by na nízkém telefonu
   zabraly víc místa než zmenšený text pod nimi. */
.dl > svg{flex:0 0 auto;width:calc(25 * var(--u));height:calc(25 * var(--u))}
.dl .foto{width:calc(38 * var(--u));height:calc(38 * var(--u));
  border-radius:3px;object-fit:cover;display:block}
.dl b{
  display:block;font-family:var(--pismo-nadpis);font-size:calc(17 * var(--uf));
  line-height:1.18;font-weight:400;text-transform:uppercase;color:var(--ink);
}
.dl small{display:block;font:600 9.5px/1.25 var(--pismo);font-size:calc(9.5 * var(--uf));
  color:var(--hneda);margin-top:calc(5 * var(--u))}

/* ── spodní navigace ─────────────────────────────────────────
   Aktivní položka je JEN světlejší — bílá ikona i popisek. Žádné červené
   pozadí, žádná červená ikona. */
.navigace{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  height:calc(var(--nav-v) + env(safe-area-inset-bottom));
  background:var(--ink);display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;padding-bottom:calc(6px + env(safe-area-inset-bottom));
}
.navigace button{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(7 * var(--u));
  color:#8E736C;font:800 9px/1.18 var(--pismo);font-size:calc(9 * var(--uf));
  letter-spacing:.9px;text-transform:uppercase;
}
/* ── dotyková plocha navigace ────────────────────────────────
   Samotné tlačítko je jen ikona s popiskem, a to obojí se stahuje s obsahem
   (--u, --uf): na 390 × 844 měří 40,6 px, na 360 × 640 už jen 31,2 px. Palec
   potřebuje aspoň 44 px, takže málo bylo i na velkém telefonu. Zvětšit ho
   nejde — velikost ikony i popisku je z odsouhlaseného návrhu.
   Lišta kolem něj je ale pořád vysoká (78 px na 844, 47,8 px na 640) a ten
   vzduch se nevyužívá. Průhledná vrstva proto roztáhne klikatelnou plochu
   přes CELOU výšku lišty ve svém sloupci — čtyři sloupce pokryjí lištu beze
   zbytku a mimo ni nic nepřečnívá.
   Vzhled se nemění o pixel: vrstva nic nekreslí a tlačítko si drží svůj
   původní rozměr, takže i rámeček :focus-visible zůstává těsně kolem ikony
   s popiskem, ne kolem celé lišty.
   Odsazení jsou záporná a dopočítaná: 100 % je výška tlačítka, které sedí
   uprostřed obsahu lišty, a pod ním je navíc její spodní odsazení (6 px
   plus bezpečná zóna). */
.navigace button::before{
  content:"";position:absolute;left:0;right:0;
  top:calc((100% + 6px - var(--nav-v)) / 2);
  bottom:calc((100% + 6px - var(--nav-v)) / 2 - 6px - env(safe-area-inset-bottom));
}
/* Ikony navigace se kreslí s atributem 23 × 23; na nízkém telefonu se lišta
   stahuje s --u, tak se musí stáhnout i ony, jinak by se do ní nevešly. */
.navigace button svg{width:calc(23 * var(--u));height:calc(23 * var(--u))}
.navigace button.on{color:#FFFFFF}

/* ── program dne ─────────────────────────────────────────────
   Bloky jsou karty, ne řádky tabulky. Datum stojí drobně pod nadpisem —
   akce je jednodenní a samostatný pruh s datem by jen bral místo; celý
   program se má vejít na displej 390 × 844 bez rolování. */
.datum{
  margin:0 0 calc(11 * var(--u)) 31px;font:700 8.5px/1.18 var(--pismo);
  font-size:calc(8.5 * var(--uf));letter-spacing:2.1px;
  text-transform:uppercase;color:var(--hneda);opacity:.9;
}
.blok{position:relative;display:flex;gap:11px;
  padding:calc(9 * var(--u)) 12px calc(10 * var(--u));margin-bottom:calc(7 * var(--u))}
/* Odsazení pod posledním blokem má sloupec obsahu sám — dvojitá mezera by
   na nízkém telefonu chyběla jinde. Na 390 × 844 není vidět: obsah je tam
   kratší než okno a rozdíl padne do plochy pozadí. */
.blok:last-child{margin-bottom:0}
.blok .cas{
  flex:0 0 calc(42 * var(--uf));padding-top:2px;font-family:var(--pismo-cisla);
  font-weight:700;font-size:calc(13.5 * var(--uf));line-height:1.18;color:var(--cerv);
}
.blok b{
  display:block;font-family:var(--pismo-nadpis);font-size:calc(16 * var(--uf));
  line-height:1.18;font-weight:400;text-transform:uppercase;color:var(--ink);
  padding-right:20px;
}
.blok small{display:block;font:500 10px/1.4 var(--pismo);font-size:calc(10 * var(--uf));
  color:var(--hneda);margin-top:calc(4 * var(--u))}
.blok .chip{margin-top:calc(7 * var(--u));padding:calc(4 * var(--u)) 7px}
.blok .hvezda{position:absolute;right:12px;top:calc(11 * var(--u));line-height:0}
/* Blok, který právě běží, dostává tmavý pruh a živou tečku — stejný prvek
   jako „PRÁVĚ PROBÍHÁ“ na domovské obrazovce. */
.blok em{
  display:flex;align-items:center;gap:7px;margin-bottom:calc(6 * var(--u));font-style:normal;
  font:800 9px/1.18 var(--pismo);font-size:calc(9 * var(--uf));
  letter-spacing:2.4px;text-transform:uppercase;color:#FFFFFF;
}
.blok em i{
  flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--cerv);
  font-style:normal;box-shadow:0 0 7px rgba(173,26,27,.85);
}
.blok.bezi .cas,.blok.bezi b{color:#FFFFFF}
.blok.bezi small{color:rgba(254,235,232,.66)}

/* ── detail bloku ────────────────────────────────────────── */
.detail-hlava{padding:calc(16 * var(--u)) 18px calc(17 * var(--u))}
.detail-hlava .cas-stitek{
  display:inline-block;font-family:var(--pismo-cisla);font-weight:700;font-size:12px;
  line-height:1;letter-spacing:1.6px;color:var(--cerv);margin-bottom:calc(11 * var(--u));
}
.detail-hlava h2{
  font-family:var(--pismo-nadpis);font-size:calc(27 * var(--uf));line-height:1.18;
  font-weight:400;text-transform:uppercase;color:#FFFFFF;
}
.detail-hlava .kde-radek{display:flex;gap:7px;flex-wrap:wrap;margin-top:calc(13 * var(--u))}
.perex{margin-top:calc(14 * var(--u));font:500 12px/1.6 var(--pismo);
  font-size:calc(12 * var(--uf));color:var(--text-tm)}
/* Fotky řečníků projekt nemá — dodá je svaz. Do té doby je v kolečku tiché
   prázdné místo připravené na fotku, bez cedulky, ať to nevypadá jako chyba. */
.recnik{display:flex;align-items:center;gap:12px;margin-top:calc(14 * var(--u));
  padding:calc(11 * var(--u)) 13px}
.recnik .portret{
  flex:0 0 calc(46 * var(--u));width:calc(46 * var(--u));height:calc(46 * var(--u));
  border-radius:50%;overflow:hidden;
  background:var(--ruz);border:1.5px solid rgba(173,26,27,.30);
}
.recnik .portret svg{display:block;width:100%;height:100%}
.recnik b{
  display:block;font-family:var(--pismo-nadpis);font-size:calc(15 * var(--uf));
  line-height:1.18;font-weight:400;text-transform:uppercase;color:var(--ink);
}
.recnik small{display:block;font:500 10.5px/1.4 var(--pismo);font-size:calc(10.5 * var(--uf));
  color:var(--hneda);margin-top:calc(3 * var(--u))}
.odrazka{
  display:flex;gap:10px;padding:calc(9 * var(--u)) 12px;margin-bottom:calc(6 * var(--u));
  font:500 11px/1.5 var(--pismo);font-size:calc(11 * var(--uf));color:var(--text-tm);
}
.odrazka > span{flex:0 0 6px;height:6px;margin-top:6px;border-radius:50%;background:var(--cerv)}
.odrazka i{font-style:normal;font-weight:800;color:var(--ink)}

/* ── hlasování o nejlepší špekáček ───────────────────────────
   Fotka degustace jde v duotónu do brandu, stejnou silou jako karty stánků.
   Vzorky nejsou seznam, ale dlaždice ve DVOU SLOUPCÍCH — mřížka repeat(2,1fr)
   snese jakýkoli počet vzorků, kolik jich bude, dodá svaz. */
.hlavicka-foto{
  height:calc(122 * var(--u));margin-bottom:calc(14 * var(--u));
  overflow:hidden;border-radius:3px;
  border:1.4px solid var(--linka);background:var(--ruz);
}
.hlavicka-foto img{display:block;width:100%;height:100%;object-fit:cover}
.vzorky{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(9 * var(--u))}
.vzorek{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:calc(9 * var(--u));
  width:100%;padding:calc(13 * var(--u)) 10px calc(14 * var(--u));text-align:center;
}
.vzorek .cislo{
  flex:0 0 auto;width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:3px;
  background:var(--ruz);color:var(--cerv);display:flex;align-items:center;
  justify-content:center;font-family:var(--pismo-nadpis);font-size:calc(22 * var(--uf));
  line-height:1;
}
.vzorek b{
  font-family:var(--pismo-nadpis);font-size:calc(15 * var(--uf));line-height:1.18;
  font-weight:400;text-transform:uppercase;color:var(--ink);
}
.vzorek:disabled{opacity:.55}
.vzorek.vybrany{border-color:rgba(173,26,27,.55);opacity:1}
.vzorek.vybrany .cislo{background:var(--cerv);color:#FFFFFF}
.fajfka{
  position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;
  background:var(--cerv);display:flex;align-items:center;justify-content:center;
}
.dekujeme{padding:calc(14 * var(--u)) 16px;margin-bottom:calc(14 * var(--u));color:#FFFFFF}
.dekujeme b{
  display:block;font-family:var(--pismo-nadpis);font-size:calc(16 * var(--uf));
  line-height:1.18;font-weight:400;text-transform:uppercase;
}
.dekujeme small{display:block;font:500 11px/1.4 var(--pismo);font-size:calc(11 * var(--uf));
  color:rgba(254,235,232,.66);margin-top:calc(6 * var(--u))}

/* ── stánky a instalace ──────────────────────────────────────
   Všechny obrázky karet stojí na růžové a jsou duotónované do brandu
   (tmavý pól #AD1A1B, světlý bílá), ať jsou fotky napříč aplikací jednotné. */
.stanek{display:flex;gap:13px;padding:calc(12 * var(--u)) 13px;
  margin-bottom:calc(10 * var(--u))}
.stanek:last-child{margin-bottom:0}
.stanek .foto-velka{
  flex:0 0 calc(92 * var(--u));height:calc(92 * var(--u));object-fit:cover;
  border-radius:3px;background:var(--ruz);display:block;
}
.stanek .ikona-velka{
  flex:0 0 calc(92 * var(--u));height:calc(92 * var(--u));border-radius:3px;
  background:var(--ruz);display:flex;align-items:center;justify-content:center;
}
.stanek b{
  display:block;font-family:var(--pismo-nadpis);font-size:calc(16.5 * var(--uf));
  line-height:1.18;font-weight:400;text-transform:uppercase;color:var(--ink);
}
.stanek small{display:block;font:500 10.5px/1.45 var(--pismo);font-size:calc(10.5 * var(--uf));
  color:var(--hneda);margin-top:calc(5 * var(--u))}
.stanek .chip{margin-top:calc(8 * var(--u))}
/* Popisek „Otevřít aplikaci“ — jen text uvnitř karty, ne samostatný odkaz
   (odkaz uvnitř odkazu není platné HTML). Cílem kliknutí je celá karta. */
.odkaz-ven{
  display:flex;align-items:center;gap:5px;margin-top:calc(9 * var(--u));
  font:800 9px/1.18 var(--pismo);font-size:calc(9 * var(--uf));
  letter-spacing:1.6px;text-transform:uppercase;color:var(--cerv);
}

/* ── mapa areálu ─────────────────────────────────────────────
   Rámeček má poměr stran podkladu (1655 × 2725 na výšku — vektorová mapa
   z 5. 9. 2026; dřív 2286 × 4096 rastru). Šířka se bere
   z toho, co je menší — sloupec obsahu, nebo co dovolí zbylá výška — aby
   se mapa vždycky vešla celá nad navigaci. svh, ne vh: na mobilu se lišty
   prohlížeče vysouvají a vh je ta VELKÁ varianta výšky.
   Linka kolem rámečku je VNITŘNÍ STÍN, ne border: border by ubral 1,4 px
   z obsahu, poměr obsahu by přestal sedět s poměrem podkladu a nahoře
   i dole by zůstal bílý vlas o zlomek pixelu. */
.mapa-ramec{
  position:relative;border-radius:3px;overflow:hidden;background:#FFFFFF;
  border:0;box-shadow:inset 0 0 0 1.4px var(--linka),0 3px 9px rgba(35,18,15,.07);
  aspect-ratio:1655/2725;
  width:100%;                         /* záloha pro prohlížeč bez svh/min() */
  width:min(100%, max(80px, calc((100svh - var(--mapa-mimo)) * 1655 / 2725)));
  margin-inline:auto;                 /* užší mapa zůstane uprostřed sloupce */
}
/* PŘIBLIŽOVÁNÍ MAPY JE OD 7. 9. 2026 PRYČ. Zadavatel: „říkal jsem, že není
   potřeba mít možnost přibližování.“ Mapa je v jedné velikosti, která se vejde
   do okna (viz --mapa-mimo výš), a tam zůstane. Odsud tím zmizelo
   `touch-action: pan-y` (mapou se prostě projede dál po stránce jako po čemkoli
   jiném) i `transform-origin` u podkladu; celý modul priblizeni.js je odložený
   do _puvodni/. */
.mapa-plocha{position:absolute;inset:0}
.mapa-ramec img{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  -webkit-user-drag:none;user-select:none;
}
/* ── klikací bod v mapě ──────────────────────────────────────
   BOD SE KRESLÍ JEN JEDNOU, A TO V SVG. Do 7. 9. 2026 byl dvakrát: jednou
   nakreslený v podkladu (skupina #body) a podruhé jako tenhle prvek nad ním.
   V základním stavu to splývalo, ale při přiblížení se to rozešlo — podklad
   se zvětšuje, tenhle prvek měl pevných 26 px, takže z velkého kolečka
   v kresbě vykoukl druhý, malý. Zadavatel 7. 9.: „když já pak tu mapu
   přibližuju, tak vidím, jak se tam objevujou… prostě zůstanou jen v jednom“
   a hned dodal, kterou verzi chce: „ty body klidně můžou zůstat jenom jako
   obrázky, tak jak tam jsou teďka řešené.“

   Kolečko s číslem tedy kreslí SVG — je součástí kresby, takže sedí
   v každé velikosti okna samo od sebe. Tenhle prvek zůstal, ale UŽ NIC
   NEKRESLÍ: je to průhledná klikací plocha přesně nad kolečkem, aby se dal
   otevřít náhled místa a aby bod zůstal ve stromu pro čtečku (aria-label
   s názvem místa dává obrazovky.js). Polohu i průměr má v PROCENTECH kresby,
   takže na kolečku sedí bez jediného řádku JavaScriptu.

   Odezva na stisk a rámeček při ovládání klávesnicí ZŮSTÁVAJÍ — bez nich by
   z toho byla plocha, o které nikdo neví, že reaguje. */
.pin{
  position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  /* Průměr v PROCENTECH šířky kresby, ne v px: kolečko kreslí SVG poloměrem
     R = 71 jednotek při viewBoxu 1655 (viz generuj_mapu.py), takže jeho průměr
     je 142/1655 = 8,5801 % šířky. Plocha tím sedí na kolečku v každé velikosti
     okna sama od sebe — do 7. 9. 2026 to v px dopočítával priblizeni.js kvůli
     přibližování, to je ale zrušené. */
  width:8.5801%;aspect-ratio:1;
  background:transparent;border:0;padding:0;
  color:transparent;                     /* číslo kreslí SVG, tady zbylo pro DOM */
  font-family:var(--pismo-nadpis);font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
/* Odezva na stisk: jemný tmavý nádech přes kolečko v kresbě, ať je poznat,
   že klepnutí dosedlo. V klidu se nekreslí nic. */
.pin:active{background:rgba(35,18,15,.22)}
/* ── legenda pod mapou ───────────────────────────────────────
   5. 9. 2026 legenda zmizela (názvy míst jsou vypsané rovnou v kresbě, tak
   říkala potřetí totéž), 7. 9. 2026 se vrátila na výslovné přání zadavatele:
   „u té mapy mi chybí legenda, já tam potřebuju vidět, co ty body přesně jsou.“
   Je to ale JINÁ legenda než ta zrušená: nevypisuje popis místa, jen páruje
   číslo se jménem, takže se s kresbou nepřekrývá informací, ale doplňuje ji.

   Řádky TEČOU (flex-wrap), nestojí ve dvou pevných sloupcích — nejdelší název
   („Sál A — soutěž o špekáček“, anglicky „Hall A — best sausage competition“)
   by se do poloviny sloupce nevešel a musel by se zalamovat nebo ořezávat.
   Takhle se krátké položky poskládají vedle sebe a dlouhé dostanou místo.

   Výška je rezervovaná v --legenda-v nahoře, aby se obrazovka pořád vešla
   bez rolování; mapa se tím zmenší z 350 na ~333 px šířky. */
.legenda-mapy{
  display:flex;flex-wrap:wrap;
  gap:calc(4 * var(--u)) 12px;
  margin-top:calc(9 * var(--u));padding:0;list-style:none;
}
.legenda-mapy li{
  display:flex;align-items:center;gap:5px;
  font:500 10px/1.35 var(--pismo);font-size:calc(10 * var(--uf));
  color:var(--text-tm);
}
/* Číslo v legendě je zmenšený .pin, aby se dvojice „kolečko = název“ spojila
   na první pohled. Menší než v mapě být musí — v mapě je terč na prst,
   tady je to jen značka v textu. */
.legenda-mapy b{
  flex:0 0 calc(15 * var(--u));height:calc(15 * var(--u));border-radius:50%;
  background:var(--cerv);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--pismo-nadpis);font-weight:400;
  font-size:calc(9 * var(--uf));line-height:1;
}

/* ── praktické informace ─────────────────────────────────── */
.pocasi{display:flex;align-items:center;gap:14px;padding:calc(14 * var(--u)) 16px;
  margin-bottom:calc(14 * var(--u))}
.pocasi > svg{flex:0 0 38px}
.pocasi .stupne{font-family:var(--pismo-nadpis);font-size:calc(25 * var(--uf));
  line-height:1;color:#FFFFFF}
.pocasi small{display:block;font:500 10.5px/1.4 var(--pismo);font-size:calc(10.5 * var(--uf));
  color:rgba(254,235,232,.66);margin-top:calc(7 * var(--u))}
.radek{display:flex;align-items:center;gap:13px;width:100%;
  padding:calc(12 * var(--u)) 13px;margin-bottom:calc(8 * var(--u))}
.radek .ikona{
  flex:0 0 calc(40 * var(--u));height:calc(40 * var(--u));border-radius:3px;
  background:var(--ruz);display:flex;align-items:center;justify-content:center;
}
.radek b{
  display:block;font-family:var(--pismo-nadpis);font-size:calc(15.5 * var(--uf));
  line-height:1.18;font-weight:400;text-transform:uppercase;color:var(--ink);
}
.radek small{display:block;font:500 10px/1.4 var(--pismo);font-size:calc(10 * var(--uf));
  color:var(--hneda);margin-top:calc(4 * var(--u))}
.radek .sipka{margin-left:auto;flex:0 0 16px;line-height:0;color:var(--hneda);opacity:.55}

/* ── podstránka praktických informací ────────────────────── */
.podstranka-hlava{display:flex;align-items:center;gap:14px;
  padding:calc(16 * var(--u)) 17px}
.podstranka-hlava .ikona{
  flex:0 0 calc(52 * var(--u));height:calc(52 * var(--u));border-radius:3px;
  background:var(--ruz);
  display:flex;align-items:center;justify-content:center;
}
.podstranka-hlava h2{
  font-family:var(--pismo-nadpis);font-size:calc(23 * var(--uf));line-height:1.18;
  font-weight:400;text-transform:uppercase;color:#FFFFFF;
}
.podstranka-hlava small{
  display:block;font:500 10.5px/1.4 var(--pismo);font-size:calc(10.5 * var(--uf));
  color:rgba(254,235,232,.66);margin-top:calc(6 * var(--u));
}
/* ── JEDINÉ MÍSTO, KDE SE TEXT SMÍ OZNAČIT ───────────────────
   V celé aplikaci je výběr textu vypnutý (viz blok „appka, ne stránka“ na
   začátku souboru), protože po dlouhém stisku modře svítil program a naskakovalo
   systémové hledání na Googlu. Tady je výjimka, a to schválně: na podstránkách
   praktických informací stojí údaje, které si člověk na akci OPRÁVNĚNĚ chce
   zkopírovat — název sítě a heslo k Wi-Fi v podtitulku a v odstavci pak telefony
   a e-maily na organizátory, které svaz teprve dodá (dnes je tam zástupný text).
   Zakázat výběr i tady by znamenalo, že si účastník musí telefon na pořadatele
   opsat ručně.

   Obě místa jsou NEKLIKATELNÁ — podtitulek hlavičky a odstavec, žádný odkaz
   ani tlačítko. Označení tedy nemůže překážet klepnutí a nikde jinde v aplikaci
   se dlouhým stiskem text neoznačí. Řádky seznamu praktických informací
   (a.radek), kde je tentýž podtitulek, výjimku ZÁMĚRNĚ nemají: to jsou odkazy
   a přesně na nich zadavateli výběr vadil.

   Výjimku doplňuje assets/js/dotek.js — nabídku po dlouhém stisku tady
   nepotlačuje, jinak by na iOS nebylo čím zkopírovat. */
.podstranka-hlava small,
.zastupny p{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Zástupný text — přerušovaný rámeček, ať je na první pohled jasné,
   že tohle ještě není finální obsah. Skutečné texty dodá svaz. */
.zastupny{
  margin-top:calc(14 * var(--u));padding:calc(15 * var(--u)) 16px calc(17 * var(--u));
  background:#FFFFFF;border-radius:3px;
  border:1.6px dashed rgba(173,26,27,.45);
}
.zastupny-stitek{
  display:inline-block;background:var(--ruz);color:var(--cerv);
  font:800 9px/1.18 var(--pismo);font-size:calc(9 * var(--uf));
  letter-spacing:1.8px;text-transform:uppercase;
  padding:calc(6 * var(--u)) 9px;border-radius:2px;margin-bottom:calc(11 * var(--u));
}
.zastupny p{font:500 12px/1.6 var(--pismo);font-size:calc(12 * var(--uf));color:var(--text-tm)}
/* Pod zástupným textem zbývá hluchá plocha — vykukuje do ní bourací schéma
   vepře, stejně jako z hlavičky domovské obrazovky. Stejná trojvrstvá
   konstrukce (viz .hero .schema), jen kotvená k pravému dolnímu rohu.
   z-index:-1: kresba leží NAD zdí, ale POD obsahem i pod navigací. */
.prase-vykuk{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.prase-vykuk img{
  position:absolute;right:-42px;bottom:24px;width:293px;height:166px;
  display:block;opacity:.36;
}
.prase-vykuk::after{
  content:"";position:absolute;inset:0;
  background-image:
   linear-gradient(90deg,var(--spara-pres) 2px,transparent 2px),
   linear-gradient(var(--spara-pres) 2px,transparent 2px);
  background-size:var(--kachl) var(--kachl);
  background-position:0 0;
  -webkit-mask-image:url("assets/img/prase_schema.png");
  mask-image:url("assets/img/prase_schema.png");
  -webkit-mask-size:293px 166px;mask-size:293px 166px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:right -42px bottom 24px;mask-position:right -42px bottom 24px;
}

/* ── partneři ────────────────────────────────────────────────
   ROZLOŽENÍ LOG JE ODSOUHLASENÉ A NEMĚNÍ SE: loga bez rámečků, čtyři na
   řádek, vystředěné nadpisy kategorií, neúplný poslední řádek na střed,
   titulární partner sám a větší. Mění se jen typografie nadpisu kategorie
   do jazyka nového návrhu a podklad — od 1. 9. 2026 jsou i tady kachlíky.
   POŘADÍ UVNITŘ KATEGORIÍ je abecední a řídí ho data.js, ne styl. */
.kategorie{
  display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;
  margin:calc(26 * var(--u)) 0 calc(12 * var(--u));font-family:var(--pismo-nadpis);
  font-size:calc(15 * var(--uf));line-height:1.18;
  letter-spacing:.6px;text-transform:uppercase;color:var(--ink);font-weight:400;
}
.kategorie::before,.kategorie::after{content:"";flex:0 0 18px;height:2px;background:var(--cerv)}
.nadpis + .kategorie{margin-top:8px}
/* Prosvětlení kolem nadpisů: vzor se vytrácí ELIPTICKÝM přechodem do bílé,
   který je celý uvnitř svého boxu — krajní zastávka (průhledná bílá) padne
   PŘESNĚ na hranu boxu, takže nikde nevznikne viditelný bílý obdélník.
   Vnitřní odsazení dělá přechod měkkým, vnější je proti němu stažené do
   záporu, aby obrazovka nenarostla o pruh vzduchu u každého nadpisu. */
body.obr-partneri .nadpis,
body.obr-partneri .kategorie{
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.82) 30%,
    rgba(255,255,255,.60) 55%,
    rgba(255,255,255,.32) 78%,
    rgba(255,255,255,0) 100%);
}
body.obr-partneri .nadpis{margin:-22px -20px -22px;padding:30px 20px 32px}
body.obr-partneri .kategorie{margin:-2px -20px -18px;padding:32px 20px 30px}
body.obr-partneri .nadpis + .kategorie{margin-top:-34px}
.loga{
  --mezera:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--mezera);
}
/* Všechna loga kromě titulárního jsou čtvercová PNG s už opticky srovnanou
   velikostí uvnitř — stačí jim tedy stejně velké čtvercové místo a nic se
   nepřeškáluje. Čtyři na řádek, neúplný poslední řádek se srovná na střed. */
.loga .pole{
  flex:0 0 auto;width:calc((100% - 3 * var(--mezera)) / 4);max-width:120px;aspect-ratio:1;
}
/* Titulární partner je sám a větší — tak jako na stránkách pořadatele. */
.loga.titul .pole{width:min(70%,250px);max-width:none;aspect-ratio:auto;height:auto}
.loga img{display:block;width:100%;height:100%;object-fit:contain}
.loga.titul img{height:auto}

/* ── panel „Více“ ────────────────────────────────────────── */
.zaclona{position:fixed;inset:0;background:rgba(35,18,15,.5);z-index:45;animation:nabehni .18s ease}
.panel{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:#FFFFFF;
  border-radius:16px 16px 0 0;padding:11px 18px calc(20px + env(safe-area-inset-bottom));
  max-width:var(--sirka);margin:0 auto;box-shadow:0 -10px 30px rgba(35,18,15,.28);
  animation:vyjed .22s ease;
}
.panel-usko{width:42px;height:4px;border-radius:2px;background:var(--linka);margin:0 auto 13px}
.panel-nadpis{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font:800 10px/1.18 var(--pismo);font-size:calc(10 * var(--uf));
  letter-spacing:2.4px;text-transform:uppercase;color:var(--cerv);
}
.panel-nadpis i{flex:0 0 18px;height:2px;background:var(--cerv);font-style:normal}
.panel .radek{border:1.4px solid var(--linka);border-radius:3px;background:#FFFFFF}
.panel .radek .ven{margin-left:auto;flex:0 0 15px;line-height:0;color:var(--hneda)}
@keyframes vyjed{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes nabehni{from{opacity:0}to{opacity:1}}

/* ── potvrzovací dialog ──────────────────────────────────── */
.dialog-vrstva{
  position:fixed;inset:0;z-index:60;background:rgba(35,18,15,.5);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:nabehni .18s ease;
}
.dialog{
  background:#FFFFFF;border:1.6px solid rgba(173,26,27,.55);border-radius:4px;
  padding:20px 18px 18px;max-width:340px;width:100%;box-shadow:0 14px 34px rgba(35,18,15,.34);
}
.dialog-text{font:500 13px/1.55 var(--pismo);color:var(--text-tm);margin-bottom:18px}
.dialog-tlacitka{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tl{
  border:none;border-radius:3px;padding:13px;background:var(--cerv);color:#FFFFFF;
  font-family:var(--pismo-nadpis);font-size:14px;line-height:1.18;letter-spacing:.5px;
  text-transform:uppercase;
}
.tl-tise{background:#FFFFFF;color:var(--hneda);border:1.4px solid var(--linka)}

/* ── náhled místa z mapy ─────────────────────────────────────
   Stejný prvek jako okno bodu v návrhu mapy, jen navíc s fotkou místa —
   ta v aplikaci byla dřív a zůstává. */
.nahled-vrstva{
  position:fixed;inset:0;z-index:60;background:rgba(35,18,15,.6);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:nabehni .18s ease;
}
.nahled{
  background:#FFFFFF;border:1.6px solid rgba(173,26,27,.55);border-radius:4px;overflow:hidden;
  max-width:420px;width:100%;position:relative;box-shadow:0 14px 34px rgba(35,18,15,.34);
}
.nahled-zavrit{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  padding:0;box-shadow:0 2px 8px rgba(35,18,15,.25);
}
.nahled-foto{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--ruz)}
.nahled-bezfotky{
  padding:26px 18px;text-align:center;font:500 11px/1.5 var(--pismo);
  color:var(--hneda);background:var(--ruz);
}
.nahled-text{padding:12px 13px 13px}
.nahled-hlava{display:flex;align-items:center;gap:9px}
.nahled-cislo{
  flex:0 0 24px;height:24px;border-radius:50%;background:var(--cerv);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--pismo-nadpis);font-size:13px;line-height:1;
}
.nahled-text b{
  font-family:var(--pismo-nadpis);font-size:16px;line-height:1.18;font-weight:400;
  text-transform:uppercase;color:var(--ink);
}
.nahled-text small{display:block;margin-top:8px;font:500 10.5px/1.5 var(--pismo);color:var(--text-tm)}
/* Proklik z náhledu — dovnitř aplikace, nebo do jiné aplikace v nové záložce. */
.nahled-akce{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding:9px 13px;
  border-radius:3px;background:var(--cerv);color:#FFFFFF;
  font-family:var(--pismo-nadpis);font-size:12.5px;line-height:1.18;letter-spacing:.4px;
  text-transform:uppercase;box-shadow:0 5px 12px rgba(173,26,27,.24);
}

/* ── klepnutí a klávesnice ───────────────────────────────────
   Karta je celá cíl kliknutí. Na mobilu se to pozná podle stavu :active,
   z klávesnice podle viditelného ohraničení — appka se ovládá prstem,
   ale musí jít proklikat i tabulátorem. */
a.ted, a.dl, a.blok, a.stanek, a.radek, .pin, .vzorek{
  -webkit-tap-highlight-color:transparent;
  transition:transform .09s ease, background-color .12s ease, border-color .12s ease;
}
a.dl:active, a.stanek:active, a.radek:active,
.vzorek:not(:disabled):active{transform:scale(.98);background:#FBF5F2;border-color:#DCC7B7}
a.blok.karta:active{background:#FBF5F2}
a.blok.tmavy:active, a.ted:active{filter:brightness(1.18)}
.pin:active{transform:translate(-50%,-50%) scale(.88)}
.navigace button:active, .tlacitko:active,
.nahled-zavrit:active, .nahled-akce:active, .tl:active{filter:brightness(.94)}

:focus-visible{outline:2.5px solid var(--cerv);outline-offset:2px}
.navigace button:focus-visible, a.ted:focus-visible,
a.blok.tmavy:focus-visible{outline-color:var(--ruz)}
.pin:focus-visible{outline-offset:3px}

/* Užší telefony (iPhone SE apod.) — kresba prasete v hlavičce by při pevném
   místě u pravého okraje vylezla přes nadpis, a řádky log se dopočítávají
   ze šířky, takže jim stačí ubrat mezeru. */
@media (max-width:380px){
  .loga{--mezera:7px}
  .tit h1{font-size:calc(52 * var(--uf))}
  .hero .schema img{right:-6px}
  .hero .schema::after{
    -webkit-mask-position:right -6px top var(--prase-y);
    mask-position:right -6px top var(--prase-y);
  }
}