/* ============================================================================
 * instance.css — design system instance ÚBO (podle ivb.cz)
 * ============================================================================
 *
 * Vrstva, kterou se instance odlišuje od jádra. Mountuje se do astro
 * kontejneru — v dev na /app/public/instance.css, v prod na
 * /app/dist/client/instance.css, odkud ho MainLayout načítá jako
 * <link rel="stylesheet" href="/instance.css">.
 *
 * CO TENHLE SOUBOR DĚLÁ
 * ---------------------
 * 1. Přepisuje tokeny design systému (barvy, písmo) — sekce 1.
 * 2. Definuje vlnky mezi sekcemi — sekce 2. Používají se přes `customClass`
 *    ve wrapperu bloku, který webmaster nastaví v adminu (Pokročilé →
 *    Vlastní CSS třídy), např. `vlna vlna--dole vlna--bila`.
 * 3. Upravuje hlavičku — sekce 3, včetně overlay varianty pro homepage.
 * 4. Ladí vyhledávač a tlačítko účtu — sekce 4.
 *
 * ── JAK TO VYHRÁVÁ NAD JÁDREM (přečti, než sem něco přidáš) ─────────────────
 *
 * Změřeno na běžícím jádru, ne odhadnuto:
 *
 *   a) Tenhle soubor je <link> v <head> na pozici ~1200. Všechny <style>
 *      bloky jádra jdou v dokumentu ZA NÍM. Při stejné specificitě tedy
 *      vyhrává jádro, ne instance.
 *
 *   b) Styly komponent jsou scoped — Astro k nim přidává atribut
 *      [data-astro-cid-*], a to je +1 do sloupce tříd. Selektory jádra
 *      proto běžně mají (0,2,0) a u varianty homepage až (0,6,0):
 *
 *        .site-header[data-astro-cid-ouamjn2i]                        (0,2,0)
 *        .site-header--homepage[..] .desktop-header[..] .nav-bar[..]  (0,6,0)
 *
 *      Obyčejný selektor instance (0,2,0) proti tomu prohraje. Proto tady
 *      NENAJDEŠ souboj o specificitu — místo něj se používá tahle páka:
 *
 *   c) JÁDRO ČTE BARVY PŘES TOKENY AŽ V MÍSTĚ POUŽITÍ:
 *
 *        .desktop-header { background-color: var(--color-primary-500); }
 *        .nav-bar        { background: var(--color-primary-700); }
 *
 *      Custom properties se DĚDÍ. Když token přepíšu na předkovi, změní se
 *      barva, aniž bych se dotkl pravidlu jádra — a na specificitu se
 *      nehraje vůbec. Přesně tak je udělaná sekce 3 (overlay hlavička).
 *
 *   d) CELÝ TENHLE SOUBOR JE VE `@layer instance`, a to je POSLEDNÍ vrstva:
 *
 *        @layer reset, tokens, base, components, instance;
 *
 *      Pořadí vrství je pevné a nezávisí na pořadí v <head> — proto (a)
 *      přestalo platit. Když je stejná vlastnost v `@layer base` (jádro)
 *      i v `@layer instance` (my), vyhraje VŽDY instance, i když je náš
 *      <link> první. O specifitu se nesoutěží.
 *
 *   e) `!important` je tu proto ZAKÁZANÝ. Uvnitř vrstvy `!important`
 *      obrací pořadí vrstev: `@layer instance { … !important }` by přebilo
 *      i `@layer components`, ale zároveň by `!important` z `@layer base`
 *      porazilo nás. Vznikla by přesně ta křehká závislost na pořadí, které
 *      se celý design systém snaží zbavit. Kde `!important` zůstal, je
 *      označený komentářem a je to dluh — viz sekce 5.
 *
 * CO SEM NEPATŘÍ
 * --------------
 * Struktura stránky (sidebar, breadcrumbs, které sekce existují). To je
 * v kódu jádra (astro/src/lib/layout.ts). Tohle je výhradně vizuální vrstva.
 *
 * Pozor na názvy tříd: `customClass` z adminu se sanitizuje a propouští jen
 * [A-Za-z0-9_-]. Třída s diakritikou (`.vlna--zelená`) by se tiše zahodila
 * a vlnka by se nevykreslila. Proto jsou všechny názvy bez diakritiky.
 * ============================================================================ */


/* ============================================================================
 * 1. TOKENY — barvy a písmo ÚBO
 * ============================================================================
 *
 * Barvy jsou vzorkované z loga ÚBO (assets/ivb-logo-cs.png) a z ivb.cz:
 * tmavá #231f20, tyrkys #4fc6e0, žlutý akcent #f5ec33.
 *
 * ── JAK SE ŠKÁLY POČÍTAJÍ (pro příští změnu barvy) ──────────────────────────
 *
 * Každá škála se generuje z JEDNÉ brandové barvy (anchor) — zbytek se
 * dopočítá. Kdyby se brandová barva měnila, přepočítej stejným postupem:
 *
 *   1. Vezmi světlostní žebřík z referenční škály v jádře
 *      (tokens.css, --color-primary-50…850) a normalizuj ho tak, aby
 *      stupeň, na kterém sedí anchor, měl světlost anchoru.
 *   2. Odehni/zesil chromu podle stejného žebříku (poměr vůči anchoru).
 *   3. Drž hue anchoru konstantní přes celou škálu.
 *
 * Vše v OKLCH, ne v HSL — HSL mění vnímanou světlost podle hue, takže by
 * žlutá a tyrkys vyšly nesouměřitelně. OKLCH je perceptuálně rovnoměrné.
 * Světlosti se navíc klampují do sRGB gamutu, aby kraj škály nespadl ven.
 *
 * Na kterém stupni anchor sedí:
 *
 *   primary   #0f7f97  na 500   ← hlavní barva, podle zadání
 *   secondary #231f20  na 850   ← tmavá z loga je nejtmavší bod škály
 *   accent    #f5ec33  na 400   ← viz poznámka u akcentu níž
 *
 * Každá škála je ověřená na monotónnost (11 unikátních světlostí, od
 * nejsvětlejší k nejtmavší) — kdyby se barva změnila a škála se zlomila,
 * pozná se to podle toho, že dvě sousední hodnoty vypadají stejně.
 * ============================================================================ */

/* Fonty. NA PRVNÍM ŘÁDKU, jinak je @import neplatný a prohlížeč tiše
 * použije fallback. Jádro (tokens.css) si sice načítá Sarpanch a Cascadia
 * Code, ale ty už nepoužíváme — jejich @import zůstává, protože ho z
 * instance.css zrušit nelze. Je to zděděná režie, ne volba. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
 * POŘADÍ VRSTEV — musí být vyhlášeno DŘÍV, než se do kterékoli vrstvy zapíše.
 * `@import` výš stojí mimo vrstvy (CSS ho jinde neplatně vyhodnotí) a je to
 * v pořádku: nic nevyhlášeného nepotřebuje.
 * ══════════════════════════════════════════════════════════════════════════ */
@layer reset, tokens, base, components, instance;

@layer instance {


:root {
  /* === BARVY ============================================================== */

  /* Primární — tyrkysová. 500 je ztmavená proti logu (#4fc6e0): na velké
     ploše je logová hodnota příliš světlá a bílý text na ní nemá kontrast
     (2.1:1 vs. 4.66:1, což je hranice AA pro normální text).
     Odstín je ale pořád ten z loga — H=217.8° vs. logová 214.8°. */
  --color-primary-50:  #edfafd;   /* bílá  1.07 */
  --color-primary-100: #d3f2fc;   /* bílá  1.17 */
  --color-primary-150: #b1e9fa;   /* bílá  1.32 */
  --color-primary-200: #84dff9;   /* bílá  1.51 */
  --color-primary-300: #25c6ea;   /* bílá  2.03 */
  --color-primary-400: #15a8c7;   /* bílá  2.82 */
  --color-primary-500: #0f7f97;   /* bílá  4.66  ← anchor (AA) */
  --color-primary-600: #0a6174;   /* bílá  7.06 */
  --color-primary-700: #054755;   /* bílá 10.30 */
  --color-primary-800: #03313b;   /* bílá 13.94 */
  --color-primary-850: #011e26;   /* bílá 17.28 */

  /* Sekundární — tmavá z loga, pro doplňkové plochy a rozbalená menu.
     Anchor sedí na 850 (je to nejtmavší bod škály, ne prostředek).
     POZOR: #231f20 má chromu jen 0.006 — je to v podstatě šedá. Kdyby se
     chroma zesilovala stejně jako u primární, vyšly by světlé stupně
     narůžovělé. Chroma se tu proto tlumí úměrně světlosti. */
  --color-secondary-50:  #f8f7f7;  /* bílá  1.07 */
  --color-secondary-100: #edecec;  /* bílá  1.18 */
  --color-secondary-150: #e0dedf;  /* bílá  1.34 */
  --color-secondary-200: #d2d0d1;  /* bílá  1.53 */
  --color-secondary-300: #b5b3b4;  /* bílá  2.09 */
  --color-secondary-400: #9a9899;  /* bílá  2.87 */
  --color-secondary-500: #767474;  /* bílá  4.65 */
  --color-secondary-600: #5c5a5b;  /* bílá  6.84 */
  --color-secondary-700: #464344;  /* bílá  9.78 */
  --color-secondary-800: #332f30;  /* bílá 13.21 */
  --color-secondary-850: #231f20;  /* bílá 16.30  ← anchor, přesně z loga */

  /* Akcent — žlutá z loga.
     Anchor je na 400, ne na 500, a je to záměr: žlutá je nejjasnější barva
     spektra, takže „500" na stejném světlostním žebříku vyjde jako tmavá
     olivová (#b2ab16) — brandová žlutá by se v paletě ztratila a stupeň
     určený pro akcent by nesvítil. Na 400 zůstává žlutá žlutou a tmavší
     stupně (600+) slouží jako její čitelná varianta na bílém podkladu.
     Používá se střídmě — aktivní prvek, podtržení, vlnka. */
  --color-accent-50:  #f9f8e8;     /* bílá  1.07 */
  --color-accent-100: #f9f8ce;     /* bílá  1.09 */
  --color-accent-150: #faf8ab;     /* bílá  1.10 */
  --color-accent-200: #fcf679;     /* bílá  1.13 */
  --color-accent-300: #fcf200;     /* bílá  1.18 */
  --color-accent-400: #f5ec33;     /* bílá  1.24  ← anchor, přesně z loga */
  --color-accent-500: #b2ab16;     /* bílá  2.41 */
  --color-accent-600: #847e00;     /* bílá  4.23  ← čitelná žlutá na bílém */
  --color-accent-700: #5b5700;     /* bílá  7.48 */
  --color-accent-800: #383600;     /* bílá 12.38 */
  --color-accent-850: #1d1c00;     /* bílá 17.24 */

  /* Sémantické aliasy, které jádro definuje LITERÁLNÍM HEXEM, ne přes
     var(). Ty se přepočtem školy samy nepřepíšou, takže je nutné je
     uvést znovu — jinak by zůstaly na modré z jádra.
     `--color-primary` jádro reálně čte (EntityListingFilters.astro, 15×). */
  --color-primary: #0f7f97;
  --color-secondary: #767474;
  --color-primary-light: var(--color-primary-150);
  --color-primary-dark: var(--color-primary-700);

  /* === PÍSMO ==============================================================
   *
   * Podle ivb.cz: nadpisy Poppins 600, tělo Roboto.
   *
   * Jádro má výchozí Sarpanch (nadpisy) a Cascadia Code (vše ostatní).
   * Cascadia Code je monošířkový — na webu ústavu působí jako terminál,
   * proto jím v jádře definované tokeny přepisujeme na proporcionální.
   *
   * Přepisujeme VŠECHNY rodiny, ne jen `--font-family-body`: jádro je
   * čte jednotlivě (`var(--font-family-ui-btn, "Sarpanch", sans-serif)`
   * atd.), takže vynechaný token zůstane na Sarpanchu/Cascadii.
   *
   * Váhy odpovídají tomu, co jsou Poppins a Roboto skutečně ochotné dodat
   * (Poppins 300–700, Roboto 400–800) — co není v @import výš, prohlížeč
   * dosyntetizuje a vypadá to rozbitě.
   * ---------------------------------------------------------------------- */

  /* Nadpisy — Poppins. ivb.cz je má na váze 600, ne 700 (Poppins je
     opticky těžší než Sarpanch, 700 už působí přebujele). */
  --font-family-h1: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-h2: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-h3: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-h4: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-h5: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-h6: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-weight-h1: 600;
  --font-weight-h2: 600;
  --font-weight-h3: 600;
  --font-weight-h4: 600;
  /* ivb.cz nemá na nadpisech tracking; záporný byl potřeba u Sarpanchu. */
  --letter-spacing-h1: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h4: 0;
  /* Poppins má vysoké ascendenty — řádkování 1.15 z jádra ho kříží.
     ivb.cz používá 1.5, jeho heading widget 1.3; 1.25 drží obojí. */
  --line-height-h1: 1.25;
  --line-height-h2: 1.25;
  --line-height-h3: 1.3;

  /* Lead a velké akční texty — taky Poppins (displejní role). */
  --font-family-lead-1: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-lead-2: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-action-xl: Poppins, "Segoe UI", system-ui, sans-serif;

  /* Tělo textu — Roboto. */
  --font-family-body-lg: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-family-body-md: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-family-body-sm: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-family-body-xs: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* ivb.cz má řádkování těla 1.7 — delší české texty se líp čtou. */
  --line-height-body-md: 1.7;

  /* Popisky — taky Roboto, ne monospace. */
  --font-family-caption-lg: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-caption-md: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-caption-sm: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-lead-1-sub: Roboto, "Segoe UI", system-ui, sans-serif;

  /* Tlačítka a UI. */
  --font-family-ui-btn: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-ui-btn-sm: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-family-action-lg: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-action-md: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-action-sm: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-ui-label: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-ui-input: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-ui-nav: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-family-ui-caption: Roboto, "Segoe UI", system-ui, sans-serif;

  /* Mono MUSÍ zůstat monošířkové a musí se uvést explicitně.
     Jádro má `--font-family-mono: var(--font-family-ui-label)`, jenže
     ui-label jsme právě přepnuli na Roboto — alias by tedy mono zrušil a
     `.font-mono` i bloky s kódem by se vykreslily proporcionálně.
     ivb.cz žádný mono font nemá, takže saháme po systémovém zásobníku;
     Cascadia Code zůstává první, protože ho jádro stejně načítá. */
  --font-family-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* === OSTATNÍ ============================================================ */

  /* Šířka kontejneru — ivb.cz jede o něco širší než výchozí jádro.
     Čte ji .container v grid.css (řádek ~366). */
  --container-max-width: 1240px;

  /* Vlastní tokeny instance. Předpona --ubo- je záměrná: kdyby je jádro
     v budoucnu zavedlo taky, nesrazí se to. */
  --ubo-vlna-vyska: 72px;
}

/* HEADER */
@layer components {
 
}


/* ============================================================================
 * 2. NEWS KARTA — přeskládání gridem
 * ============================================================================
 *
 * Karta má v jádru mřížku se dvěma oblastmi (`media`, `body`) a obsah druhou
 * mřížku (`meta`, `tags`, `title`, `perex`). Instance mění rozložení přepisem
 * tokenů `--card-areas-*` / `--areas-*` — NIKDY přepisem `grid-template-areas`
 * napřímo.
 *
 * PROČ NE NAPŘÍMO: jádro umí kartu bez obrázku sbalit do jednoho sloupce
 * pravidlem `:not(:has(.image-wrapper))`, které nastavuje `grid-template-areas`
 * taky napřímo. Obě pravidla jsou ve stejné vrstvě, takže vyhraje to pozdější
 * — sbalení. Kdyby instance přepisovala `grid-template-areas` místo tokenu,
 * byla by v jiné (pozdější) vrstvě, přebila by sbalení a karta bez obrázku by
 * si nechala prázdný sloupec.
 *
 * Výchozí hodnoty tokenů jsou v `@layer components`. My jsme v `@layer instance`
 * — POSLEDNÍ vrstva — takže vyhrajeme pořadím vrstev, bez ohledu na specificitu.
 * Žádný `!important` tu proto nenajdeš; uvnitř vrstvy by pořadí vrstev obrátil.
 *
 * DVĚ PASTI ŠABLONY OBLASTÍ:
 *
 *  1. Každý řádek musí mít stejný počet buněk. Když nesouhlasí, je
 *     `grid-template-areas` neplatná a prohlížeč ji ZAHODÍ — mřížka se tiše
 *     rozsype do implicitních řádků a nic nehlásí.
 *
 *  2. V šabloně musí být VŠECHNA pole, která mají `grid-area` — i ta, co se
 *     zrovna nevykreslila. Prvek s `grid-area`, pro kterou v šabloně není
 *     buňka, se umístí implicitně, tedy jinam, než čekáš.
 * ============================================================================ */

/* --- Médium vlevo, text vpravo (jen desktop) ------------------------------ */

/*
 * Na mobilu a tabletu zůstává karta na sobě — médium nad textem. Na úzké
 * kartě by vedle sebe nebylo co číst, takže přepisujeme jen desktop.
 */
 

/* --- Obsah: titulek první, datum a tagy pod ním --------------------------- */

/*
 * Jádro řadí obsah jako "meta" "tags" "title" "perex" — datum s kategoriemi
 * napřed, titulek jako třetí. UBO chce titulek první: je to hlavní háček
 * karty a má čtenáře chytit na první pohled, ne datum.
 *
 * PROČ JEDEN SLOUPEC: karta je 386 px široká, 40 % zabere médium a zbytek
 * po paddingu je ~183 px. Dát datum a tagy vedle sebe se sem nevejde —
 * `auto` sloupec si vezme celou šířku a na `1fr` zbyde 0 px, takže titulek
 * přes dvě buňky by měl šířku půlky karty. Jeden sloupec je tu jediná
 * varianta, která drží.
 *
 * Přepisujeme i mobil a tablet. Karta tak nemění pořadí polí podle šířky
 * okna — stejná karta se čte pořád stejně.
 */
.card[data-entity="news"] .content {
  --areas-mobile: "title" "meta" "tags" "perex";
  --areas-tablet: "title" "meta" "tags" "perex";
  --areas-desktop: "title" "meta" "tags" "perex";
  --cols-mobile: 1fr;
  --cols-tablet: 1fr;
  --cols-desktop: 1fr;

  /* Textový sloupec má po odečtení 40 % média ~231 px. Výchozí padding jádra
     (--spacing-md) z něj ukrojí 64 px, tedy skoro třetinu; --spacing-sm
     nechá textu ~183 px. Na kartě téhle šířky je každých 8 px znát. */
  padding: var(--spacing-sm, 1.5rem);
}

/*
 * Datum a kategorie sedí v jednom řádku (`display: flex` z jádra). Na střed
 * řádku, aby chip s barevným pozadím netrčel nad účařím data.
 *
 * Mezery mezi poli řeší dál marginy polí z jádra — proto tu žádné nepřepisujeme.
 * `gap` by tu nešel: chybějící pole po sobě zanechá prázdný řádek šablony
 * a ten by s nenulovým `gap` nechal mezeru navíc.
 */
.card[data-entity="news"] .meta {
  align-items: center;
}
.card .chip-row  a{
   border: 2px solid var(--color-neutral-100);
}
.card .chip-row  a:hover{
   border: 2px solid var(--color-neutral-50);
}


/*
 * Jádro posouvá datum o 0.15rem dolů, aby jeho účaří sedlo na účaří textu
 * v chipu — chip má padding a barevné pozadí, datum ne. Jenže to platí pro
 * zarovnání na horní hranu; tady je řádek na středu, takže by posun datum
 * jen o pár pixelů rozhodil. Rušíme ho.
 */
.card[data-entity="news"] .date {
  padding-top: 0;
  font-weight: 700;
}

/* --- Co jsme záměrně NEpřepsali ------------------------------------------- */

/*
 * TAGY (`.tags`) — jádro jim dává spodní margin odpovídající mezerám mezi
 * poli, což v novém pořadí ("title" "meta" "tags" "perex") pořád sedí.
 * Přepsat by znamenalo jen opsat hodnotu z jádra, tedy šum.
 *
 * ŠÍŘKY SLOUPCŮ KARTY na mobilu a tabletu — karta tam má jedinou oblast,
 * takže zůstává jádro s `1fr`.
 *
 * SBALENÍ KARTY BEZ OBRÁZKU — vlastní jádro (viz komentář v hlavičce).
 */

/*
 *
 *
 * /(* ============================================================================
 *  * 2. VLNKY MEZI SEKCEMI
 *  * ============================================================================
 *  *
 *  * Vlnka je dekorativní přechod mezi dvěma barevně odlišnými sekcemi.
 *  * Nekreslí se jako samostatný blok — je to pseudo-element na bloku, takže
 *  * webmaster nemusí vkládat nic navíc a nic se nerozbije, když blok smaže.
 *  *
 *  * POUŽITÍ (admin → blok → Pokročilé → Vlastní CSS třídy):
 *  *
 *  *   vlna vlna--dole             vlnka na spodní hraně bloku
 *  *   vlna vlna--nahore           vlnka na horní hraně bloku
 *  *   vlna vlna--dole vlna--bila  vlnka vyplněná bílou
 *  *
 *  * Barva vlnky má vždy barvu NAVAZUJÍCÍ sekce, ne té své — tím vznikne
 *  * plynulý přechod. Proto se obě třídy kombinují.
 *  *
 *  * Tyhle třídy jsou pro jádro neznámé, takže se na specificitu nehraje —
 *  * žádný souboj se nekoná.
 *  *
 *  * PROČ MASKA A NE POZADÍ:
 *  * `mask` nechá prosvítat pozadí rodiče, takže vlnka funguje na libovolné
 *  * barvě sekce, aniž by o ní musela vědět. Barvu dodává `background-color`
 *  * z tokenu --vlna-barva přes třídu varianty.
 *  *
 *  * PROČ SVG V DATA URI A NE clip-path:
 *  * clip-path umí jen rovnou hranu, takže by vlnka musela být na sekci,
 *  * jejíž barvu nemá. SVG maska se dlaždicuje a je nezávislá na obsahu.
 *  * ============================================================================ *)/
 *
 * /(*
 *  * Tvar vlny. Je v tokenech, aby se nedopustil dvakrát (mask-image
 *  * i -webkit-mask-image) a aby se dal snadno vyměnit.
 *  *
 *  * viewBox 1440×72, cesta opisuje dvě vlny přes celou šířku. Začátek i konec
 *  * křivky mají stejnou výšku i tečnu, takže na sebe dlaždice `repeat-x`
 *  * plynule navazují a ve švu není vidět zlom.
 *  *
 *  * `preserveAspectRatio='none'` je záměr: maska se roztahuje na šířku sekce
 *  * a nesmí si držet poměr stran.
 *  *)/
 * :root {
 *   --ubo-vlna-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C180,72 360,8 720,40 C1080,72 1260,8 1440,40 L1440,72 L0,72 Z' fill='%23000'/%3E%3C/svg%3E");
 *   --ubo-vlna-svg-dvojita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 144' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C180,72 360,8 720,40 C1080,72 1260,8 1440,40 L1440,144 L0,144 Z' fill='%23000' fill-opacity='0.45'/%3E%3Cpath d='M0,84 C180,116 360,52 720,84 C1080,116 1260,52 1440,84 L1440,144 L0,144 Z' fill='%23000'/%3E%3C/svg%3E");
 * }
 *
 * /(* Základ: připraví blok na pseudo-element a nastaví výchozí barvu vlnky. *)/
 * .block-wrapper.vlna {
 *   position: relative;
 *   --vlna-barva: var(--color-neutral-0, #fff);
 * }
 *
 * .block-wrapper.vlna--dole::after,
 * .block-wrapper.vlna--nahore::before {
 *   content: "";
 *   position: absolute;
 *   left: 0;
 *   width: 100%;
 *   height: var(--ubo-vlna-vyska);
 *   /(* Vlnka nesmí překážet kliknutí na obsah, který překrývá. *)/
 *   pointer-events: none;
 *   background-color: var(--vlna-barva);
 *   -webkit-mask-image: var(--ubo-vlna-svg);
 *   mask-image: var(--ubo-vlna-svg);
 *   -webkit-mask-repeat: repeat-x;
 *   mask-repeat: repeat-x;
 *   -webkit-mask-size: 1440px var(--ubo-vlna-vyska);
 *   mask-size: 1440px var(--ubo-vlna-vyska);
 *   /(* Nad pozadím sourozenecké sekce, ale pod jejím obsahem.
 *      Bez tohohle by vlnku překrylo pozadí následující sekce. *)/
 *   z-index: 1;
 * }
 *
 * /(* Vlnka dole — vyčnívá POD blok, plná část míří dolů. *)/
 * .block-wrapper.vlna--dole::after {
 *   top: 100%;
 *   -webkit-mask-position: center top;
 *   mask-position: center top;
 * }
 *
 * /(* Vlnka nahoře — vyčnívá NAD blok, zrcadlově obrácená, plná část míří nahoru. *)/
 * .block-wrapper.vlna--nahore::before {
 *   bottom: 100%;
 *   transform: scaleY(-1);
 *   -webkit-mask-position: center top;
 *   mask-position: center top;
 * }
 *
 * /(* Dvojitá vlna — dva pruhy přes sebe, pro výraznější přechod. *)/
 * .block-wrapper.vlna--dvojita::after {
 *   height: calc(var(--ubo-vlna-vyska) * 2);
 *   -webkit-mask-size: 1440px calc(var(--ubo-vlna-vyska) * 2);
 *   mask-size: 1440px calc(var(--ubo-vlna-vyska) * 2);
 *   -webkit-mask-image: var(--ubo-vlna-svg-dvojita);
 *   mask-image: var(--ubo-vlna-svg-dvojita);
 * }
 *
 * /(* --- Barevné varianty ------------------------------------------------------
 *  * Barva vlnky = barva SEKCE, DO KTERÉ SE VSTUPUJE.
 *  * -------------------------------------------------------------------------- *)/
 *
 * .block-wrapper.vlna--bila     { --vlna-barva: var(--color-neutral-0, #ffffff); }
 * .block-wrapper.vlna--svetla   { --vlna-barva: var(--color-neutral-50, #f4f6f7); }
 * .block-wrapper.vlna--primarni { --vlna-barva: var(--color-primary-500, #0f7f97); }
 * .block-wrapper.vlna--tmava    { --vlna-barva: var(--color-primary-800, #03313b); }
 * .block-wrapper.vlna--seda     { --vlna-barva: var(--color-neutral-100, #e8ebef); }
 * .block-wrapper.vlna--akcent   { --vlna-barva: var(--color-accent-400, #f5ec33); }
 *
 * @media (max-width: 767px) {
 *   /(* 72 px je na malé obrazovce zbytečně mnoho prostoru na dekoraci. *)/
 *   :root {
 *     --ubo-vlna-vyska: 44px;
 *   }
 * }
 *
 *
 * /(* ============================================================================
 *  * 3. HLAVIČKA
 *  * ============================================================================
 *  *
 *  * Dvě varianty:
 *  *   .site-header--standard   vnitřní stránky — plná lišta, jak ji má jádro
 *  *   .site-header--homepage   homepage — PRŮHLEDNÁ, PŘEKRÝVÁ BANNER
 *  *
 *  * Variantu vybírá kód jádra (astro/src/pages/[locale]/index.astro předává
 *  * headerVariant: 'homepage'). Tenhle soubor mění jen její vzhled.
 *  * ============================================================================ *)/
 *
 * /(* --- Overlay varianta pro homepage ---------------------------------------- *)/
 *
 * /(*
 *  * Dvě vlastnosti, které tokenovou páku udělat nelze — `position` a `z-index`.
 *  *
 *  *   position — jádro má v MainLayoutu `.site-header { position: sticky }`
 *  *              v `@layer base`. My jsme v `@layer instance`, a ta je POSLEDNÍ:
 *  *              vyhrajeme pořadím vrstev, bez ohledu na specificitu. Dřív tu
 *  *              byl `!important` — tehdy ještě platilo, že nevrstvené přebíjí
 *  *              vrstvené a o přepis se muselo soutěžit specificitou.
 *  *   z-index  — jádro má 100. Musíme nad banner, ale pod mobilní menu (1001).
 *  *
 *  * `absolute` vyjme hlavičku z toku dokumentu, takže banner začne na y=0 sám
 *  * — žádný negativní margin není potřeba (a kdyby tu byl, strhl by obsah
 *  * dozadu POD hlavičku). Zároveň tím mizí `sticky`: na homepage se hlavička
 *  * při scrollu nelepí, což je záměr — má být součástí banneru.
 *  *)/
 * .site-header--homepage {
 *   position: absolute;
 *   top: 0;
 *   left: 0;
 *   right: 0;
 *   z-index: 200;
 *
 *   /(*
 *    * TADY JE TA PÁKA Z BODU (c) V HLAVIČCE SOUBORU.
 *    *
 *    * Jádro čte tyhle tokeny až ve svých pravidlech, a custom properties se
 *    * dědí. Přepsáním na předkovi zprůhledním:
 *    *
 *    *   --color-primary-500 → .desktop-header (pozadí)
 *    *                          .desktop-header::before (barevný overlay přes obrázek)
 *    *   --color-primary-800 → .top-bar-row (homepage varianta)
 *    *   --color-primary-700 → .nav-bar (homepage varianta)
 *    *
 *    * Aniž bych se dotkl jedinému pravidlu jádra. Žádný souboj o specificitu.
 *    *
 *    * Hodnoty nejsou úplně průhledné: nad bannerem je potřeba jemný ztmavující
 *    * závoj, jinak bílý text na světlé fotografii zmizí. Proto poloprůhledné
 *    * odstíny místo `transparent`.
 *    *
 *    * POZOR na literály: `rgba(...)` tu musí být rozepsané, ne `var(--color-primary-850)`.
 *    * Tady se totiž týž token, který přepisujeme, používá jako zdroj — zápis
 *    * `--color-primary-800: var(--color-primary-800)` by byl cyklický a token
 *    * by se zneplatnil. Hodnota je proto rozepsaná z `--color-primary-850`
 *    * (#011e26 = rgb(1, 30, 38)); při změně palety ji přepočítej.
 *    *)/
 *   --color-primary-500: transparent;
 *   --color-primary-800: rgba(1, 30, 38, 0.55);
 *   --color-primary-700: rgba(1, 30, 38, 0.35);
 * }
 *
 * /(* Vlastní obrázek pozadí hlavičky na homepage vypnout — pod hlavičkou je
 *    banner a dva obrázky přes sebe by se praly. *)/
 * .site-header--homepage .header-bg-picture {
 *   display: none;
 * }
 *
 * /(*
 *  * Rozbalovací menu musí zůstat NEPRŮHLEDNÉ.
 *  *
 *  * Tohle je nutná protiváha k přepisu tokenů výš: `.nav-dropdown`, `.lang-menu`
 *  * i `.account-menu` totiž čtou stejné tokeny (jádro, řádky 1007 / 813 / 900)
 *  * a byly by zděděně průhledné, takže by přes rozbalené menu prosvítal obsah
 *  * stránky. Vracíme jim plnou barvu v jejich vlastním scope — token se dědí
 *  * dál do potomků, ale pozadí menu je zase čitelné.
 *  *
 *  * `.lang-menu` a `.account-menu` jsou v .utility-bar uvnitř .top-bar-row,
 *  * takže dědí z hlavičky stejně jako .nav-dropdown.
 *  *)/
 * .site-header--homepage .nav-dropdown,
 * .site-header--homepage .lang-menu,
 * .site-header--homepage .account-menu {
 *   --color-primary-800: #03313b;   /(* = --color-primary-800 *)/
 *   --color-primary-700: #054755;   /(* = --color-primary-700 *)/
 *   --color-primary-500: #0f7f97;   /(* = --color-primary-500 *)/
 * }
 *
 * /(* Mobilní menu je přes celou obrazovku — taky musí být neprůhledné.
 *    Jádro na něj navíc skládá gradient a obrázek z /uploads, který v této
 *    instanci není, takže si vystačíme s plnou barvou. *)/
 * .site-header--homepage .mobile-menu {
 *   --color-primary-500: #0a6174;   /(* = --color-primary-600 *)/
 * }
 *
 * /(* Mobilní horní lišta se na homepage vznáší nad bannerem stejně jako
 *    desktopová. Menu pod ní zůstává plné (viz pravidlo výš). *)/
 * .site-header--homepage .mobile-topbar {
 *   --color-primary-500: rgba(1, 30, 38, 0.55);
 * }
 *
 *
 * /(* --- Logo -----------------------------------------------------------------
 *  * Logo ÚBO má poměr ~2.57:1, takže potřebuje VÝŠKU, ne šířku — jinak
 *  * přeteče. `width: auto` drží poměr stran.
 *  *
 *  * Dřív tu byl `!important`, protože jádro nastavuje výšku loga selektorem
 *  *   .site-header--homepage[a] .desktop-header[a] .logo-image[a] img[a]  = (0,5,1)
 *  * zatímco instance umí napsat jen (0,3,1) — o přepis se soutěžilo
 *  * specificitou a bez `!important` se neprojevil.
 *  *
 *  * Se `@layer instance` je souboj o specificitu bezpředmětný: vyhráváme
 *  * pořadím vrstev. Proto tu `!important` už není. Stejně tak `max-width`,
 *  * které `!important` nikdy nepotřebovalo — jádro ho na tomhle prvku
 *  * nenastavuje vůbec.
 *  * -------------------------------------------------------------------------- *)/
 *
 * .site-header .logo-image img {
 *   display: block;
 *   width: auto;
 *   object-fit: contain;
 * }
 *
 * .site-header--standard .logo-image img {
 *   height: 64px;
 *   max-width: 260px;
 * }
 *
 * /(* Na homepage je hlavička přes banner, takže logo může být výraznější.
 *    120 px je hodnota jádra — držíme ji, ale zastropujeme šířku, aby dlouhé
 *    logo ÚBO na užším viewportu nepřeteklo do vyhledávače. *)/
 * .site-header--homepage .desktop-header .logo-image img {
 *   max-width: 320px;
 * }
 *
 * @media (max-width: 1023px) {
 *   .site-header--standard .mobile-topbar .logo-image img {
 *     height: 52px;
 *   }
 * }
 *
 *
 * /(* ============================================================================
 *  * 4. VYHLEDÁVAČ A TLAČÍTKO ÚČTU
 *  * ============================================================================
 *  *
 *  * Obě komponenty už v hlavičce jsou — jádro je dodává v .utility-bar
 *  * (vyhledávač v .search-center, účet jako .account-btn). Tady se jen ladí
 *  * jejich vzhled.
 *  *
 *  * SearchBox má vlastní tokeny (--searchbox-*). Jejich světlé defaulty
 *  * žijí v tokens.css jádra; tmavou sadu pro hlavičku si jádro nastavuje
 *  * kontextově samo. Jména tokenů se neměnila — přepisuje se dál stejnou
 *  * pákou jako v sekci 3, ne pravidla.
 *  *
 *  * Nově čte jádro i formulářové prvky (inputy, selecty, tlačítka .btn*)
 *  * z tokenů --form-* / --btn-* a z feedback škál error/success/warning.
 *  * Definice jsou v tokens.css jádra, ukázka přepisu v instances/demo.
 *  * ============================================================================ *)/
 *
 * /(* Vyhledávač na homepage: nad bannerem potřebuje vlastní světlý podklad,
 *    jinak se jeho průhledný rámeček na fotografii ztratí. *)/
 * .site-header--homepage .search-center {
 *   --searchbox-input-bg: rgba(255, 255, 255, 0.94);
 *   --searchbox-input-bg-hover: #ffffff;
 *   --searchbox-input-border: rgba(255, 255, 255, 0.5);
 *   --searchbox-input-color: var(--color-secondary-850, #231f20);
 *   --searchbox-input-placeholder: var(--color-neutral-500, #6b7a8e);
 *   --searchbox-focus-border: var(--color-primary-300, #25c6ea);
 *   --searchbox-icon-color: var(--color-primary-600, #0a6174);
 *   --searchbox-icon-color-focus: var(--color-primary-800, #03313b);
 * }
 *
 * /(*
 *  * Tlačítko účtu na průhledné hlavičce — jemný podklad a rámeček, aby ikona
 *  * držela kontrast na světlé fotografii i na tmavé.
 *  *
 *  * Barvu ikony tu ZÁMĚRNĚ nenastavujeme, i když by se to nabízelo. Jádro má
 *  * pro homepage variantu selektor
 *  *   .site-header--homepage[a] .desktop-header[a] .utility-bar[a] .icon-btn[a]  = (0,6,0)
 *  * který `color` řeší sám (a na hover ji přebarví na bílou). Instance by
 *  * potřebovala sedm tříd, aby ho přebila — a výsledek by nebyl o nic lepší,
 *  * protože jádro používá světle tyrkysovou z palety. Vlastní `color` by tu
 *  * bylo mrtvý kód: zapsalo by se, v prohlížeči by se neprojevilo a při
 *  * příští úpravě by mátlo. Ověřeno změřením, ne odhadem.
 *  *
 *  * Podklad a rámeček naopak v klidu vyhrají — jádro je na tomhle prvku
 *  * v klidovém stavu nenastavuje.
 *  *)/
 * .site-header--homepage .desktop-header .utility-bar .account-btn {
 *   background: rgba(255, 255, 255, 0.16);
 *   border: 1px solid rgba(255, 255, 255, 0.38);
 * }
 *
 * .site-header--homepage .desktop-header .utility-bar .account-btn:hover,
 * .site-header--homepage .desktop-header .utility-bar .account-btn.account-btn--active {
 *   background: rgba(255, 255, 255, 0.28);
 * }
 *
 * /(* Tlačítko účtu na vnitřních stránkách — plná hlavička, takže stačí jemný
 *    rámeček; barvu ikony řeší jádro (viz .site-header .desktop-header
 *    .account-btn v SiteHeader.astro). *)/
 * .site-header--standard .desktop-header .utility-bar .account-btn {
 *   border: 1px solid rgba(255, 255, 255, 0.3);
 * }
 *
 * /(* Rozbalené menu účtu musí být nad bannerem i obsahem. *)/
 * .site-header .account-menu {
 *   z-index: 300;
 * }
 *
 *
 * /(* ============================================================================
 *  * 5. BANNER A EVENT KARTA — vzhled, který jádro nemá
 *  * ============================================================================
 *  *
 *  * Celý soubor je v `@layer instance` — poslední vrstvě. Ta vyhrává nad
 *  * `@layer components` (styly komponent jádra) i `@layer base` (grid, tokeny
 *  * čtené v místě použití), a to bez `!important` a bez ohledu na specificitu.
 *  * Do zavedení vrstev musela instance soutěžit o specificitu s (0,2,0) až
 *  * (0,6,0) selektory jádra; devět `!important`, které tu byly, byl pozůstatek
 *  * právě toho a už jsou pryč — uvnitř vrstvy by `!important` pořadí vrstev
 *  * obrátilo a přebilo i jádro, tedy přesně to, co vrstvení řeší.
 *  *
 *  * ── Vlnka nad bannerem ──────────────────────────────────────────────────────
 *  * Dřív byla vlnka jako <div class="ivb-home-hero__shape"> s inline SVG
 *  * přímo v BlockBanner.astro — tedy UBO vzhled v HTML jádra, což zakazuje
 *  * sekce 5.3 kontraktu (všechny varianty musí vykreslit IDENTICKÉ HTML).
 *  * Odstranili jsme ji z jádra a kreslíme ji tady jako dekoraci pseudo-elementu.
 *  *
 *  * Tvar je jiný než `--ubo-vlna-svg` v sekci 2: ta je pravidelná sinusovka
 *  * pro přechod mezi sekcemi, tahle je třívrstvá nepravidelná vlna pod hero.
 *  * Proto má vlastní token a nedědí výšku.
 *  * ============================================================================ *)/
 *
 * :root {
 *   /(* Třívrstvá vlna pod hero bannerem. `preserveAspectRatio='none'` je záměr —
 *      maska se roztahuje na šířku banneru a nesmí si držet poměr stran. *)/
 *   --ubo-hero-vlna-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.33' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z'/%3E%3Cpath fill='%23000' fill-opacity='0.66' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z'/%3E%3Cpath fill='%23000' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'/%3E%3C/svg%3E");
 *   --ubo-hero-vlna-vyska: 65px;
 * }
 *
 * /(* Vlnka sedí na spodní hraně banneru. `.block-banner` má `position: relative`
 *    a `overflow: hidden`, takže se neořízne — na wrapperu by se ořezala jinak,
 *    proto cílíme přímo na banner, ne na `.block-wrapper`. *)/
 * .block-banner::after {
 *   content: "";
 *   position: absolute;
 *   left: 0;
 *   bottom: 0;
 *   width: 100%;
 *   height: var(--ubo-hero-vlna-vyska);
 *   /(* Nesmí překážet kliknutí na CTA, které může sahat až ke spodní hraně. *)/
 *   pointer-events: none;
 *   /(* Bílá, protože pod bannerem navazuje bílá sekce. Kdyby se měnila barva
 *      sekce pod bannerem, mění se tenhle token, ne maska. *)/
 *   background-color: var(--color-neutral-0, #ffffff);
 *   -webkit-mask-image: var(--ubo-hero-vlna-svg);
 *   mask-image: var(--ubo-hero-vlna-svg);
 *   -webkit-mask-size: 100% 100%;
 *   mask-size: 100% 100%;
 *   -webkit-mask-repeat: no-repeat;
 *   mask-repeat: no-repeat;
 *   /(* Pod obsahem banneru (`.slide-content` má z-index 1), nad obrázkem (0). *)/
 *   z-index: 1;
 * }
 *
 * /(* CTA v banneru — žlutý akcent z loga, tmavý text na něm.
 *    Jádro má `--color-primary-500` (tyrkys), UBO chce akcent. *)/
 * .slide-cta {
 *   background: var(--color-accent-400, #f5ec33);
 *   color: var(--color-neutral-900, #101820);
 * }
 * .slide-cta:hover {
 *   background: var(--color-accent-500, #b2ab16);
 *   /(* Jádro posouvá tlačítko o -2px; na žluté to působí neklidně. *)/
 *   transform: none;
 * }
 *
 * /(* Datum na event kartě — jádro ho má jako plný barevný pruh, UBO ho chce
 *    jako prostý text v barvě těla. Týká se jen `style1` (výchozí varianta). *)/
 * .card--style1 .date-bar {
 *   padding: 1rem;
 *   background: none;
 *   color: var(--color-neutral-800, #33302f);
 * }
 */

} /* @layer instance */