/* ═══════════════════════════════════════════════════════════════════
   Intranet MěÚ Litoměřice — návrh vzhledu (21. 10. 2026)

   Vychází z Heimdallu: tokeny jsou opsané z Kontaktů (seznam/css/app.css)
   a rozcestníku (rozcestnik.css) — papírové neutrály, námořnická modř,
   zlatá linka, písma Bitter (nadpisy) a Source Sans 3 (text), ilustrace
   města z grafického manuálu v pozadí. Nové jsou jen věci, které
   současné aplikace nepotřebovaly: navigace mezi sekcemi, příspěvky
   Nástěnky, časová osa nepřítomností a obsazenost vozidel.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Bitter'; font-weight: 600 700; font-display: swap; src: url(pisma/bitter-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bitter'; font-weight: 600 700; font-display: swap; src: url(pisma/bitter-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap; src: url(pisma/source-sans-3-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap; src: url(pisma/source-sans-3-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-weight: 600 700; font-display: swap; src: url(pisma/source-sans-3-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-weight: 600 700; font-display: swap; src: url(pisma/source-sans-3-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Tokeny ───────────────────────────────────────────────────────── */
:root {
  /* Heimdall */
  --navy: #173271; --navy-dk: #0f2252; --navy-lt: #1e3f8a; --navy-pale: #e7ecf7;
  --paper: #FBFAF7; --surf: #F1EFE9; --border: #E4E0D6; --border-karta: #D9D3C5;
  --text: #15192B; --muted: #6A6E7E; --muted-lt: #8a8f9c;
  --gold: #A97608; --gold-lt: #C88B0B; --gold-pale: #F6EBCF; --gold-text: #8a5f03;
  --red: #c0392b; --red-pale: #FBE9E4;
  /* barvy ikon z rozcestníku — barva nese příslušnost k sekci */
  --modra-p: #E7ECF7;  --modra: #173271;
  --zlata-p: #FBF0D6;  --zlata: #8A5F03;
  --tyrkys-p: #E0F2EE; --tyrkys: #136B5C;
  --korala-p: #FBE9E4; --korala: #A6402B;
  --zelena-p: #E4F0EA; --zelena: #1C5C42;
  --seda-p: #ECEEF3; --seda: #5B6070;
  --fialova-p: #EEE8F6; --fialova: #5B3F8C;  /* nová: jen pro typ nepřítomnosti */

  --r: 10px; --r-volba: 6px; --r-pill: 999px;
  --sh: 0 4px 24px rgba(23,50,113,.10);
  --sh-sm: 0 2px 8px rgba(23,50,113,.07);
  --sh-zved: 0 2px 4px rgba(23,50,113,.08), 0 16px 32px -12px rgba(23,50,113,.34);
  --font-h: 'Bitter', Georgia, serif;
  --font-b: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* mezery: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 */
  --hlavicka: 116px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.5 var(--font-b); background: var(--paper); color: var(--text); }
a { color: var(--navy); }
a:hover { color: var(--navy-dk); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
svg.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i-s { width: 16px; height: 16px; }
.vlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ilustrace města v pozadí, rozmístění jako v Kontaktech (varianta A). */
/* Ilustrace města v pozadí: jen jednou, pevně přes celou šířku okna u spodního okraje. */
body.s-ilustraci::before {
  content: ""; position: fixed; z-index: -1; left: 0; right: 0; bottom: 0;
  aspect-ratio: 841.89 / 595.28;
  background: url(ilustrace-mesta.svg) no-repeat left bottom / 100% auto; opacity: .45; pointer-events: none;
}

.obal { width: min(1320px, 92%); margin: 0 auto; }

/* ── Hlavička: plochá navy jako v Kontaktech + řada sekcí ─────────── */
.hl { position: sticky; top: 0; z-index: 20; background: var(--navy-dk); color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
/* Jemná silueta města v hlavičce (návrh E). z-index -1 ji dá pod obsah, ale nad navy pozadí.
   Ilustrace má šířku okna, tedy výšku 70,7 vw; vlnky řeky (spodní okraj pásu ve 92 % výšky
   = 65 vw) posuneme doprostřed hlavičky, ať jsou vidět na jakkoli širokém monitoru. */
.hl::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(ilustrace-mesta.svg) no-repeat left 0 top calc(62px - 65vw) / 100vw auto;
  filter: brightness(0) invert(1); opacity: .06;
}
/* Sněžení v hlavičce (prosinec až 6. 1., zapíná sablony/hlavicka.php). Dvě vrstvy vloček
   s různou rychlostí; posun je vždy o celé dlaždice, aby smyčka nebyla vidět. */
.hl-snih { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hl-snih::before, .hl-snih::after { content: ""; position: absolute; inset: 0; }
.hl-snih::before {
  background-image:
    radial-gradient(circle at 20px 30px, rgba(255,255,255,.75) 1.4px, transparent 2.2px),
    radial-gradient(circle at 95px 70px, rgba(255,255,255,.6) 1.8px, transparent 2.6px),
    radial-gradient(circle at 55px 115px, rgba(255,255,255,.7) 1.2px, transparent 2px),
    radial-gradient(circle at 125px 15px, rgba(255,255,255,.5) 1.5px, transparent 2.3px);
  background-size: 140px 140px;
  animation: hl-snih-1 14s linear infinite;
}
.hl-snih::after {
  background-image:
    radial-gradient(circle at 10px 60px, rgba(255,255,255,.4) 1px, transparent 1.6px),
    radial-gradient(circle at 50px 20px, rgba(255,255,255,.35) .9px, transparent 1.5px),
    radial-gradient(circle at 75px 80px, rgba(255,255,255,.45) 1px, transparent 1.6px);
  background-size: 90px 90px;
  animation: hl-snih-2 22s linear infinite;
}
@keyframes hl-snih-1 { to { background-position: 140px 280px; } }
@keyframes hl-snih-2 { to { background-position: -90px 270px; } }
@media (prefers-reduced-motion: reduce) { .hl-snih::before, .hl-snih::after { animation: none; } }
.hl-radek { display: flex; align-items: center; gap: 20px; padding: 12px 0; }
.logo { display: flex; align-items: center; gap: 12px; padding-right: 20px; border-right: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.logo:hover { color: #fff; }
.logo-znacka { width: 42px; height: 42px; border-radius: var(--r); background: var(--gold); display: grid; place-items: center; flex-shrink: 0; }
.logo-znacka svg { width: 24px; height: 24px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-nazev { font: 700 1.25rem/1.15 var(--font-h); }
.logo-sub { font-size: .69rem; font-weight: 600; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .04em; }
.hledat { position: relative; flex: 1 1 320px; max-width: 560px; }
.hledat > svg { position: absolute; left: 14px; top: 12px; color: var(--muted); }
.hledat input { width: 100%; height: 44px; padding: 0 48px 0 42px; border: 0; border-radius: 8px; background: #fff; color: var(--text); font-size: .94rem; }
.hledat input::placeholder { color: var(--muted); }
.kbd { position: absolute; right: 12px; top: 11px; min-width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 4px; background: var(--surf); color: var(--muted); font-size: .75rem; font-weight: 600; }
.hl-akce { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hl-ikona { position: relative; width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border: 0; text-decoration: none; }
.hl-ikona:hover { background: rgba(255,255,255,.16); color: #fff; }
.hl-ikona .tecka { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-lt); box-shadow: 0 0 0 2px var(--navy-dk); }
.ja { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 8px; color: #fff; text-decoration: none; }
.ja:hover { background: rgba(255,255,255,.08); color: #fff; }
.ja-text { display: flex; flex-direction: column; line-height: 1.2; font-size: .875rem; font-weight: 600; }
.ja-text small { font-size: .75rem; font-weight: 400; color: rgba(255,255,255,.7); }

.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 12px; color: rgba(255,255,255,.78); font-size: .94rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav a.je-aktivni { color: #fff; }
.nav a.je-aktivni::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold-lt); }
.nav .nav-odbor { margin-left: auto; color: #fff; }
.nav .pocet { padding: 0 7px; border-radius: var(--r-pill); background: var(--gold-lt); color: var(--navy-dk); font-size: .72rem; font-weight: 700; }

/* Spodní lišta jen na telefonu */
.tab { display: none; }

/* ── Obsah stránky ────────────────────────────────────────────────── */
.main { padding: 28px 0 56px; display: flex; flex-direction: column; gap: 24px; }
.titulek { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.h1 { margin: 4px 0 0; font: 700 1.875rem/1.2 var(--font-h); letter-spacing: -.01em; color: var(--navy); text-wrap: balance; }
.perex { margin: 6px 0 0; color: var(--muted); font-size: .97rem; max-width: 62ch; }
.drobek { display: flex; gap: 6px; align-items: center; font-size: .81rem; color: var(--muted); }
.drobek a { color: var(--muted); text-decoration: none; }
.drobek a:hover { color: var(--navy); text-decoration: underline; }

.mrizka-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.mrizka-1-3 { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.sloupec { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ── Panel (bílá karta se stínem, jako .sez-panel) ────────────────── */
.panel { background: #fff; border-radius: var(--r); box-shadow: var(--sh-sm); overflow: hidden; }
.panel-hlava { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.panel-hlava h2 { margin: 0; font: 700 1.125rem/1.3 var(--font-h); color: var(--navy); }
.panel-hlava .vpravo { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-telo { padding: 18px; }
.panel-pata { padding: 12px 18px; border-top: 1px solid var(--surf); font-size: .875rem; font-weight: 700; }
.panel-pata a { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.panel-pata a:hover { text-decoration: underline; }

/* ── Štítky a počty ───────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--navy-pale); color: var(--navy); font-size: .78rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stitek { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: .78rem; font-weight: 600; background: var(--surf); color: var(--muted); white-space: nowrap; }
.b-modra  { background: var(--modra-p);  color: var(--modra); }
.b-zlata  { background: var(--zlata-p);  color: var(--zlata); }
.b-tyrkys { background: var(--tyrkys-p); color: var(--tyrkys); }
.b-korala { background: var(--korala-p); color: var(--korala); }
.b-zelena { background: var(--zelena-p); color: var(--zelena); }
.b-fialova{ background: var(--fialova-p);color: var(--fialova); }

/* ── Tlačítka ─────────────────────────────────────────────────────── */
.btn { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-volba); background: #fff; color: var(--navy); font-size: .9rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--navy); color: var(--navy); }
.btn-hlavni { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-hlavni:hover { background: var(--navy-dk); color: #fff; }
.btn-zlate { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-zlate:hover { background: var(--gold-text); color: #fff; border-color: var(--gold-text); }
.btn-tiche { border-color: transparent; background: var(--surf); }
.btn-male { height: 34px; padding: 0 12px; font-size: .81rem; }
.btn-ikona { width: 40px; padding: 0; }

/* Přepínač pohledů (jako .sez-pohled) */
.prepinac { display: inline-flex; gap: 4px; padding: 4px; background: var(--surf); border-radius: 8px; }
.prepinac a, .prepinac button { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: var(--r-volba); background: transparent; color: var(--text); font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.prepinac .je-aktivni { background: #fff; color: var(--navy); box-shadow: var(--sh-sm); }

.filtry { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 16px; background: #fff; border-radius: var(--r); box-shadow: var(--sh-sm); }
.filtr { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-volba); background: #fff; font-size: .875rem; color: var(--text); }
.filtr svg { color: var(--muted); }
.filtr.je-aktivni { border-color: var(--navy); background: var(--navy-pale); color: var(--navy); font-weight: 600; }
.filtry .vpravo { margin-left: auto; display: flex; gap: 8px; }

/* ── Formulář ─────────────────────────────────────────────────────── */
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole label, .pole .popisek { font-size: .81rem; font-weight: 700; color: var(--text); }
.pole .napoveda { font-size: .78rem; color: var(--muted); }
.vstup { height: 42px; width: 100%; padding: 0 12px; border: 1px solid var(--border-karta); border-radius: var(--r-volba); background: #fff; font-size: .94rem; display: flex; align-items: center; gap: 8px; color: var(--text); }
.vstup.je-prazdny { color: var(--muted-lt); }
textarea.vstup { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.vstup:focus, .vstup.je-fokus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-pale); }
.radek-poli { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.formular { display: flex; flex-direction: column; gap: 16px; }
.volby { display: flex; flex-wrap: wrap; gap: 8px; }
.volba { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--border-karta); border-radius: var(--r-volba); background: #fff; font-size: .875rem; font-weight: 600; }
.volba.je-aktivni { border-color: var(--navy); background: var(--navy-pale); color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.upozorneni { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; font-size: .875rem; background: var(--zelena-p); color: var(--zelena); }
.upozorneni.info { background: var(--navy-pale); color: var(--navy); }
.upozorneni.pozor { background: var(--gold-pale); color: var(--gold-text); }
.upozorneni svg { margin-top: 1px; }

/* ── Dlaždice statistik (jako .sez-stat / .tel-stat-tile) ─────────── */
.staty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-radius: var(--r); box-shadow: var(--sh-sm); text-decoration: none; color: inherit; border: 1.5px solid transparent; }
.stat:hover { border-color: var(--navy); color: inherit; }
.stat-ikona { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.stat-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.stat-hodnota { font: 700 1.6rem/1.1 var(--font-h); color: var(--navy); font-variant-numeric: tabular-nums; }
.stat-popis { font-size: .84rem; font-weight: 600; color: var(--muted); }

/* ── Avatar s iniciálami (jako .sez-radek-avatar) ─────────────────── */
.av { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--navy-pale); color: var(--navy); font: 700 .78rem/1 var(--font-h); }
.av-m { width: 28px; height: 28px; border-radius: 6px; font-size: .68rem; }
.av-v { width: 64px; height: 64px; border-radius: var(--r); font-size: 1.3rem; background: var(--navy); color: #fff; }
.av.zlata { background: var(--gold-pale); color: var(--gold-text); }
.hl .av { background: var(--gold); color: #fff; }

/* ── Řádky seznamu ────────────────────────────────────────────────── */
.radky { list-style: none; margin: 0; padding: 0; }
.radek { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--surf); color: inherit; text-decoration: none; }
.radky > li:first-child .radek, .radky > .radek:first-child { border-top: 0; }
a.radek:hover { background: var(--surf); color: inherit; }
.radek-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.radek-hlavni { font-weight: 700; font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radek-vedlejsi { font-size: .81rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Příspěvek Nástěnky ───────────────────────────────────────────── */
.prispevky { display: flex; flex-direction: column; gap: 14px; }
.prispevek { position: relative; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 6px 20px; padding: 18px 20px; background: #fff; border-radius: var(--r); box-shadow: var(--sh-sm); border: 1px solid transparent; color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
a.prispevek:hover { border-color: #C9D2E8; box-shadow: var(--sh-zved); color: inherit; }
.prispevek-meta { grid-column: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .81rem; color: var(--muted); }
.prispevek h3 { grid-column: 1; margin: 2px 0 0; font: 700 1.2rem/1.3 var(--font-h); color: var(--navy); text-wrap: balance; }
.prispevek p { grid-column: 1; margin: 0; color: var(--muted); font-size: .94rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prispevek-obrazek { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 148px; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--surf) center / cover; }
.prispevek-pata { grid-column: 1; display: flex; gap: 14px; align-items: center; margin-top: 6px; font-size: .81rem; color: var(--muted); }
.prispevek-pata span { display: inline-flex; gap: 5px; align-items: center; }
.prispevek.je-pripnuty { border-color: #f0dfb1; box-shadow: inset 4px 0 0 var(--gold), var(--sh-sm); }
.prispevek.je-novy h3::after { content: "nové"; margin-left: 10px; vertical-align: 3px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--gold-pale); color: var(--gold-text); font: 700 .7rem/1.4 var(--font-b); text-transform: uppercase; letter-spacing: .05em; }
.prispevek-hlavni { grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; }
.prispevek-hlavni .foto { grid-column: 1; grid-row: 1 / span 4; min-height: 240px; background: var(--surf) center / cover; }
.prispevek-hlavni > :not(.foto) { grid-column: 2; padding: 0 24px; }
.prispevek-hlavni .prispevek-meta { padding-top: 22px; }
.prispevek-hlavni h3 { font-size: 1.5rem; }
.prispevek-hlavni p { -webkit-line-clamp: 4; }
.prispevek-hlavni .prispevek-pata { padding-bottom: 22px; }

/* Archiv po letech */
.archiv { list-style: none; margin: 0; padding: 6px; }
.archiv a { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: var(--r-volba); color: var(--text); text-decoration: none; font-size: .9rem; }
.archiv a:hover { background: var(--surf); }
.archiv a.je-aktivni { background: var(--navy-pale); color: var(--navy); font-weight: 700; }
.archiv .rok { padding: 10px 12px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Článek */
.clanek { padding: 36px 44px 40px; background: #fff; border-radius: var(--r); box-shadow: var(--sh-sm); }
.clanek h1 { margin: 10px 0 14px; font: 700 2.1rem/1.2 var(--font-h); color: var(--navy); text-wrap: balance; }
.clanek .autor { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 2px solid var(--gold); border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.clanek .text { font-size: 1.06rem; line-height: 1.65; max-width: 68ch; }
.clanek .text h2 { font: 700 1.3rem/1.3 var(--font-h); color: var(--navy); margin: 28px 0 8px; }
.clanek .foto { aspect-ratio: 16 / 7; border-radius: var(--r); background: var(--surf) center / cover; margin: 0 0 24px; }
.priloha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r); text-decoration: none; color: var(--text); }
.priloha:hover { border-color: var(--navy); color: var(--text); }
.priloha .typ { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }

/* ── Nepřítomnosti: časová osa lidé × dny ─────────────────────────── */
.osa { display: grid; grid-template-columns: 240px repeat(5, minmax(0, 1fr)); font-size: .84rem; }
.osa > div { border-top: 1px solid var(--surf); min-height: 52px; }
.osa .hlava { min-height: 0; padding: 10px 8px; border-top: 0; border-bottom: 1px solid var(--border); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; }
.osa .hlava.dnes { color: var(--navy); background: var(--navy-pale); }
.osa .hlava:first-child { text-align: left; padding-left: 18px; }
.osa .clovek { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 18px; }
.osa .den { position: relative; border-left: 1px solid var(--surf); }
.osa .den.dnes { background: rgba(231,236,247,.45); }
.osa .skupina-odboru { grid-column: 1 / -1; min-height: 0; padding: 8px 18px; background: var(--paper); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.usek { position: absolute; top: 10px; bottom: 10px; left: 4px; right: 4px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 6px; font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.usek.pul-r { right: 50%; } .usek.pul-o { left: 50%; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: .81rem; color: var(--muted); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ── Rezervace: obsazenost vozidla × dny ──────────────────────────── */
.obsazenost { display: grid; grid-template-columns: 230px repeat(5, minmax(0, 1fr)); font-size: .82rem; }
.obsazenost > div { border-top: 1px solid var(--surf); min-height: 60px; }
.obsazenost .hlava { min-height: 0; padding: 10px 8px; border-top: 0; border-bottom: 1px solid var(--border); text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); }
.obsazenost .hlava b { display: block; font: 700 1rem/1.2 var(--font-h); color: var(--text); }
.obsazenost .hlava.dnes { background: var(--navy-pale); color: var(--navy); }
.obsazenost .hlava.dnes b { color: var(--navy); }
.obsazenost .hlava:first-child { text-align: left; padding-left: 18px; }
.vozidlo { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 18px; }
.vozidlo-ikona { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--surf); color: var(--navy); flex-shrink: 0; }
.vozidlo b { display: block; font-size: .9rem; line-height: 1.2; }
.vozidlo small { color: var(--muted); font-size: .76rem; }
.obsazenost .den { position: relative; border-left: 1px solid var(--surf); background-image: linear-gradient(to right, transparent calc(50% - .5px), var(--surf) calc(50% - .5px), var(--surf) calc(50% + .5px), transparent calc(50% + .5px)); }
.obsazenost .den.dnes { background-color: rgba(231,236,247,.45); }
.jizda { position: absolute; top: 8px; bottom: 8px; z-index: 1; padding: 4px 8px; border-radius: 6px; background: var(--navy-pale); border-left: 3px solid var(--navy); color: var(--navy); font-size: .74rem; line-height: 1.25; overflow: hidden; white-space: nowrap; }
.jizda b { display: block; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.jizda.moje { background: var(--gold-pale); border-color: var(--gold); color: var(--gold-text); }
.jizda.blokace { background: repeating-linear-gradient(-45deg, var(--korala-p) 0 8px, #fff 8px 14px); border-color: var(--korala); color: var(--korala); }
.cas-osa { position: absolute; top: 2px; left: 6px; font-size: .66rem; color: var(--muted-lt); }

/* ── Karty sekcí / aplikací (jako .karta rozcestníku) ─────────────── */
.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.karta { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--border-karta); border-radius: var(--r); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.karta:hover { border-color: #C9D2E8; box-shadow: var(--sh-zved); transform: translateY(-2px); color: inherit; }
.karta .ikona { grid-row: span 2; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; }
.karta h3 { margin: 0; font: 700 1.05rem/1.25 var(--font-h); color: var(--navy); padding-right: 18px; }
.karta p { margin: 0; color: var(--muted); font-size: .88rem; }
.karta .ven { position: absolute; top: 16px; right: 14px; color: var(--muted-lt); }
.karta-velka { grid-template-columns: 1fr; padding: 22px; }
.karta-velka .ikona { grid-row: auto; margin-bottom: 10px; width: 52px; height: 52px; }
.karta-velka h3 { font-size: 1.25rem; }
.karta.je-zvolena { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-pale); }

.odkazy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px; }
.odkaz { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; }
.odkaz:hover { background: var(--surf); color: var(--text); }
.odkaz .ikona { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.odkaz .ikona svg { width: 18px; height: 18px; }

/* Hlavička intranetu odboru */
.odbor-pas { position: relative; overflow: hidden; padding: 24px 28px; border-radius: var(--r); background: var(--navy); color: #fff; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.odbor-pas::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 520px; aspect-ratio: 841.89 / 595.28; background: url(ilustrace-mesta.svg) no-repeat; background-size: 100% auto; opacity: .12; filter: invert(1) brightness(2); }
.odbor-pas .znak { width: 60px; height: 60px; border-radius: var(--r); background: var(--gold); display: grid; place-items: center; font: 700 1.2rem/1 var(--font-h); flex-shrink: 0; }
.odbor-pas h1 { margin: 2px 0 0; font: 700 1.75rem/1.2 var(--font-h); }
.odbor-pas .eyebrow { color: #F0D9A0; }
.odbor-pas .stitek { background: rgba(255,255,255,.12); color: #fff; }
.odbor-pas .vpravo { margin-left: auto; position: relative; z-index: 1; display: flex; gap: 8px; }
.odbor-pas .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.zalozky { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.zalozky a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 700; font-size: .94rem; text-decoration: none; }
.zalozky a.je-aktivni { color: var(--navy); border-color: var(--gold); }

/* Kroky */
.kroky { display: flex; gap: 8px; counter-reset: krok; flex-wrap: wrap; }
.kroky span { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--muted); }
.kroky span::before { counter-increment: krok; content: counter(krok); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surf); font-size: .75rem; }
.kroky span.je-hotovo::before { content: "✓"; background: var(--zelena-p); color: var(--zelena); }
.kroky span.je-aktivni { color: var(--navy); }
.kroky span.je-aktivni::before { background: var(--navy); color: #fff; }
.kroky i { width: 28px; height: 1px; background: var(--border); align-self: center; }

.foto-nahrat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border: 1.5px dashed var(--border-karta); border-radius: var(--r); background: var(--paper); color: var(--muted); font-size: .875rem; text-align: center; }

/* ── Patička ──────────────────────────────────────────────────────── */
.pata { padding: 18px 0 32px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .84rem; color: var(--muted); }
.pata a { color: var(--muted); }

/* ── Telefon ──────────────────────────────────────────────────────── */
.jen-mobil { display: none; }
@media (max-width: 1080px) {
  .mrizka-2-1, .mrizka-1-3 { grid-template-columns: 1fr; }
  .staty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --hlavicka: 120px; }
  .obal { width: auto; margin: 0 16px; }
  .hl-radek { flex-wrap: wrap; gap: 10px 12px; padding: 10px 0 12px; }
  .logo { border: 0; padding: 0; }
  .logo-znacka { width: 38px; height: 38px; }
  .hledat { order: 3; flex: 1 1 100%; max-width: none; }
  .kbd, .ja-text, .nav, .bez-mobilu { display: none !important; }
  .jen-mobil { display: revert; }
  body { padding-bottom: 72px; }
  .tab { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(23,50,113,.08); }
  .tab a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--muted); font-size: .7rem; font-weight: 700; text-decoration: none; }
  .tab a svg { width: 24px; height: 24px; }
  .tab a.je-aktivni { color: var(--navy); }
  .tab a.je-aktivni svg { background: var(--navy-pale); border-radius: 12px; padding: 2px 10px; box-sizing: content-box; }
  .main { padding: 18px 0 28px; gap: 18px; }
  .h1 { font-size: 1.5rem; }
  .titulek .btn { width: 100%; }
  .staty { gap: 10px; }
  .stat { padding: 12px; gap: 10px; }
  .stat-ikona { width: 36px; height: 36px; }
  .stat-hodnota { font-size: 1.35rem; }
  .prispevek { grid-template-columns: 1fr; padding: 16px; }
  .prispevek-obrazek { display: none; }
  .prispevek-hlavni { grid-template-columns: 1fr; padding: 0; }
  .prispevek-hlavni .foto { grid-column: 1; grid-row: auto; min-height: 160px; }
  .prispevek-hlavni > :not(.foto) { grid-column: 1; padding: 0 16px; }
  .prispevek-hlavni .prispevek-meta { padding-top: 14px; }
  .prispevek-hlavni .prispevek-pata { padding-bottom: 16px; }
  .prispevek-hlavni h3 { font-size: 1.25rem; }
  .filtry { padding: 10px; }
  .filtry .vpravo { margin-left: 0; }
  .clanek { padding: 22px 18px; }
  .clanek h1 { font-size: 1.5rem; }
  .odkazy { grid-template-columns: 1fr 1fr; }
  .odbor-pas { padding: 18px; }
  .odbor-pas .vpravo { margin-left: 0; }
  .karty { grid-template-columns: 1fr; }
  .mobil-skryt-osu { display: none; }
  .titulek > div:last-child:not(:first-child) { width: 100%; }
  .titulek > div:last-child .btn { flex: 1; }
}

/* Rezervace typu Dovolená v mřížce (servis používá styl blokace). */
.jizda.dovolena { background: repeating-linear-gradient(-45deg, #eceef3 0 8px, #fff 8px 14px); border-color: var(--muted); color: #4a4f60; }

/* Menu na užších monitorech: kratší popisky a menší mezery, ať se vejde i Můj odbor. */
.nav-kratke { display: none; }
@media (max-width: 1440px) {
  .nav a { padding: 10px 10px 12px; gap: 6px; }
  .nav a.je-aktivni::after { left: 10px; right: 10px; }
  .nav-dlouhe { display: none; }
  .nav-kratke { display: inline; }
}

/* ── Megamenu „Aplikace“ (rozcestník ze starého intranetu, lib/rozcestnik.php) ── */
.mm-sipka { font-size: 10px; margin-left: 2px; opacity: .7; transition: transform .15s; }
.nav a[aria-expanded="true"] { color: #fff; }
.nav a[aria-expanded="true"] .mm-sipka { transform: rotate(180deg); }
.megamenu { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; color: var(--text); border-top: 3px solid var(--gold-lt); box-shadow: 0 18px 40px rgba(15,34,82,.22); max-height: calc(100vh - 140px); overflow-y: auto; }
.megamenu[hidden] { display: none; }
.mm-mrizka { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px 28px; padding: 22px 0 10px; }
.mm-nadpis { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.mm-seznam { display: flex; flex-direction: column; gap: 2px; }
.mm-siroka .mm-seznam { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.mm-odkaz { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.mm-odkaz:hover, .mm-odkaz:focus-visible { background: var(--surf); }
.mm-ikona { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--gold-pale); color: var(--gold); font-size: 14px; }
.mm-odkaz:hover .mm-ikona { background: var(--navy); color: #fff; }
.mm-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mm-nazev { font-weight: 600; font-size: .9rem; color: var(--navy); }
.mm-popis { font-size: .78rem; color: var(--muted); }
.mm-ven { font-size: .62rem; color: var(--muted-lt); margin-left: 3px; vertical-align: 1px; }
.mm-pata { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0 16px; border-top: 1px solid var(--border); font-size: .85rem; }
.mm-pata a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); text-decoration: none; }
.mm-pata a:hover { text-decoration: underline; }
.mm-pata .fa-ikona { color: var(--gold); }
@media (max-width: 1100px) { .mm-mrizka { grid-template-columns: 1fr 1fr; } .mm-siroka { grid-column: 1 / -1; } }

/* Rozcestník ve „Více“ (telefon) */
.vice-rozcestnik .mm-seznam { padding: 4px 8px 10px; }
.vice-rozcestnik .panel-hlava h2 { font-size: 1rem; }

/* ── Zvonek: občas „cinkne“, když jsou nová upozornění; po kliknutí panel s posledními ── */
.zvonek { position: relative; }
.zvonek-pocet { position: absolute; top: -6px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--gold-lt); color: var(--navy-dk); font-size: .68rem; font-weight: 800; box-shadow: 0 0 0 2px var(--navy-dk); }
.hl-ikona.cinka .fa-ikona { transform-origin: 50% 2px; animation: zvonek-cink 9s ease-in-out infinite; }
@keyframes zvonek-cink {
  0%, 9%, 100% { transform: rotate(0); }
  1% { transform: rotate(16deg); } 2% { transform: rotate(-14deg); } 3% { transform: rotate(11deg); }
  4% { transform: rotate(-8deg); } 5% { transform: rotate(5deg); } 6% { transform: rotate(-3deg); } 7% { transform: rotate(1deg); }
}
/* Kdo má v systému vypnuté animace, nevidí houpání — zvonek aspoň zezlátne. */
@media (prefers-reduced-motion: reduce) { .hl-ikona.cinka .fa-ikona { animation: none; color: var(--gold-lt); } }
.zvonek-panel { position: absolute; right: -8px; top: calc(100% + 10px); z-index: 40; width: 400px; max-width: calc(100vw - 24px); background: #fff; color: var(--text); border-radius: 14px; box-shadow: 0 18px 48px rgba(15,34,82,.28); overflow: hidden; animation: zvonek-panel-in .14s ease-out; }
.zvonek-panel[hidden] { display: none; }
.zvonek-panel::before { content: ""; position: absolute; top: -7px; right: 22px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
@keyframes zvonek-panel-in { from { opacity: 0; transform: translateY(-6px); } }
.zvonek-hlava { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.zvonek-hlava b { font: 700 1.05rem var(--font-h); color: var(--navy); }
.zvonek-hlava form { margin: 0 0 0 auto; }
.zvonek-seznam { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 440px); overflow-y: auto; }
.zvonek-seznam a { display: flex; gap: 12px; padding: 10px; border-radius: 10px; color: var(--muted); text-decoration: none; }
.zvonek-seznam a:hover { background: var(--surf); }
.zvonek-seznam a.je-nove { color: var(--text); background: var(--zlata-p); }
.zvonek-seznam a.je-nove:hover { background: #f3e2b8; }
.zvonek-ikona { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surf); color: var(--muted); font-size: 14px; }
.zvonek-seznam a.je-nove .zvonek-ikona { background: var(--gold-lt); color: #fff; }
.zvonek-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; line-height: 1.35; }
.zvonek-seznam a.je-nove .zvonek-text > span { font-weight: 600; }
.zvonek-text small { font-size: .75rem; color: var(--muted); }
.zvonek-prazdne { padding: 28px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.zvonek-prazdne .fa-ikona { font-size: 24px; color: var(--border-karta); }
.zvonek-pata { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-top: 1px solid var(--border); font-size: .85rem; font-weight: 700; color: var(--navy); text-decoration: none; }
.zvonek-pata:hover { background: var(--surf); }
@media (max-width: 600px) { .zvonek-panel { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; } .zvonek-panel::before { display: none; } }

/* Plynoucí vlny v hlavičce (mimo sněžení, zapíná sablony/hlavicka.php). Čtyři vrstvy plných vln,
   každá v trochu jiném tmavém odstínu modré, plynou různou rychlostí a směrem a jemně se houpou
   (Labe). Posun vždy o celou dlaždici, takže smyčka není vidět. Statická silueta s vlnami
   (.hl::before) se při nich schová. */
.hl.s-vlnami::before { display: none; }
.hl-vlny { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hl-vlny i { position: absolute; left: 0; background-repeat: repeat-x; opacity: .8; will-change: transform; }
.hl-vlny i:nth-child(1) { top: 14px; height: 70px; width: calc(100% + 260px); background-size: 260px 70px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%2070%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2025%20C%2032.5%2014%2097.5%2014%20130%2025%20S%20227.5%2036%20260%2025%20V%2070%20H%200%20Z%27%20fill%3D%27%231f3a7d%27%2F%3E%3C%2Fsvg%3E"); animation: hl-vlna-1 30s linear infinite, hl-houpani 6.3s ease-in-out -1.7s infinite alternate; }
@keyframes hl-vlna-1 { to { background-position: 260px 0; } }
.hl-vlny i:nth-child(2) { top: 28px; height: 62px; width: calc(100% + 220px); background-size: 220px 62px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20220%2062%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2022%20C%2027.5%2012%2082.5%2012%20110%2022%20S%20192.5%2032%20220%2022%20V%2062%20H%200%20Z%27%20fill%3D%27%231a3372%27%2F%3E%3C%2Fsvg%3E"); animation: hl-vlna-2 22s linear infinite, hl-houpani 7.6s ease-in-out -3.4s infinite alternate; }
@keyframes hl-vlna-2 { to { background-position: -220px 0; } }
.hl-vlny i:nth-child(3) { top: 42px; height: 54px; width: calc(100% + 180px); background-size: 180px 54px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20180%2054%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2019%20C%2022.5%2010%2067.5%2010%2090%2019%20S%20157.5%2028%20180%2019%20V%2054%20H%200%20Z%27%20fill%3D%27%23162c66%27%2F%3E%3C%2Fsvg%3E"); animation: hl-vlna-3 17s linear infinite, hl-houpani 8.9s ease-in-out -5.1s infinite alternate; }
@keyframes hl-vlna-3 { to { background-position: 180px 0; } }
.hl-vlny i:nth-child(4) { top: 56px; height: 46px; width: calc(100% + 150px); background-size: 150px 46px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20150%2046%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2016%20C%2018.75%208%2056.25%208%2075%2016%20S%20131.25%2024%20150%2016%20V%2046%20H%200%20Z%27%20fill%3D%27%2313265a%27%2F%3E%3C%2Fsvg%3E"); animation: hl-vlna-4 13s linear infinite, hl-houpani 10.2s ease-in-out -6.8s infinite alternate; }
@keyframes hl-vlna-4 { to { background-position: -150px 0; } }
@keyframes hl-houpani { from { translate: 0 -3px; } to { translate: 0 3px; } }
@media (prefers-reduced-motion: reduce) { .hl-vlny i { animation: none; } }