@charset "UTF-8";
/* ==========================================================================
   Intranet MMR — designový systém prototypu
   Ministerstvo pro místní rozvoj ČR
   --------------------------------------------------------------------------
   Staví se nad vendorovaným Bootstrapem 5.3.3 (visual/vendor/bootstrap/).
   Vše je postavené na CSS custom properties, aby se tokeny daly 1 : 1 přenést
   do Umbraca (nástupce Kentica) jako proměnné šablony.

   Obsah:
     1.  @font-face — IBM Plex Sans / IBM Plex Serif (lokálně, bez CDN)
     2.  Tokeny na :root — světlý režim
     3.  Tmavý režim — přepis hodnot tokenů
     4.  Mapování tokenů na proměnné Bootstrapu
     5.  Základ — reset, typografie, skip link, focus-visible
     6.  Komponenty
     7.  Responzivita
     8.  prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. @font-face — IBM Plex Sans (variabilní 400–700) a IBM Plex Serif 600
   --------------------------------------------------------------------------
   Fonty jsou hostované lokálně ve visual/fonts/ — intranet běží ve vnitřní
   síti, takže žádné Google Fonts ani jiný externí zdroj.
   Řezy latin-ext jsou pro češtinu POVINNÉ (ř, ě, š, č, ž, ů, ď, ť, ň).
   unicode-range odpovídá standardnímu dělení podsad IBM Plex.
   ========================================================================== */

/* IBM Plex Sans — variabilní řez, latin-ext (česká diakritika) */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/ibmplexsans-var-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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans — variabilní řez, latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/ibmplexsans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Serif 600 — latin-ext (česká diakritika v titulcích článků) */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibmplexserif-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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Serif 600 — latin */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibmplexserif-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   2. Tokeny — světlý režim (výchozí)
   --------------------------------------------------------------------------
   Barvy značky jsou vytažené z loga MMR: modrá #00469B, červená #D70C0F,
   šedá #545860. Jiná modrá se v prototypu nepoužívá.
   ========================================================================== */

:root {
  /* --- barvy značky MMR (neměnné, stejné v obou režimech) --- */
  --mmr-modra: #00469B;          /* primární barva značky */
  --mmr-cervena: #D70C0F;        /* akcent, štítky „Nové“, tečka u oznámení */
  --mmr-seda: #545860;           /* sekundární text, text v pozitivním logu */
  --mmr-bila: #FFFFFF;

  /* --- odvozené odstíny modré --- */
  --mmr-modra-tmava: #003374;    /* hover na plných tlačítkách, tmavší hero */
  --mmr-modra-tmava-2: #00265A;  /* nejtmavší odstín, spodek hero přechodu */
  --mmr-modra-stredni: #1F5FBF;  /* plná plocha v tmavém režimu */
  --mmr-modra-svetla: #7FB4F5;   /* text/odkaz v tmavém režimu */
  --mmr-modra-zavoj: #E8F0FA;    /* jemné podbarvení (hover řádků, chip) */
  --mmr-modra-zavoj-2: #F4F8FD;  /* ještě jemnější podbarvení */

  /* --- odvozené odstíny červené --- */
  --mmr-cervena-tmava: #A60A0C;
  --mmr-cervena-svetla: #FF8A85; /* čitelná červená pro tmavý režim */
  --mmr-cervena-zavoj: #FBE9E9;

  /* --- doplňkové stavové barvy --- */
  --zelena: #146B43;             /* dostupnost „na pracovišti“, XLSX */
  --zelena-svetla: #6FD3A3;
  --zelena-zavoj: #E5F4EC;
  --oranzova: #8A5200;           /* dostupnost „služební cesta“ */
  --oranzova-svetla: #F0B860;
  --oranzova-zavoj: #FBF0DC;
  --fialova: #5B3AA6;            /* dostupnost „home office“ */
  --fialova-svetla: #BFA6F5;
  --fialova-zavoj: #EFE9FB;

  /* --- sémantické tokeny plochy a textu --- */
  --povrch: #FFFFFF;             /* karty, hlavička, patička */
  --povrch-2: #F3F5F8;           /* pozadí stránky */
  --povrch-3: #EDF1F6;           /* zapuštěné plochy, placeholdery obrázků */
  --povrch-hover: #F7F9FC;       /* hover na řádcích seznamů */
  --text: #0F1720;               /* hlavní text, kontrast 16,9 : 1 na bílé */
  --text-tlumeny: #545860;       /* sekundární text, kontrast 7,1 : 1 na bílé */
  --text-jemny: #626C79;         /* terciární text (meta, datum), 4,9 : 1 na --povrch-2 */
  --text-na-akcentu: #FFFFFF;    /* text na plné modré */
  --ram: #E1E6EC;                /* rámy karet a vstupů */
  --ram-2: #F1F4F8;              /* dělicí linky v seznamech */
  --ram-vyrazny: #C9D3DE;        /* hover rám */

  /* --- akcent (odkazy, aktivní stavy) --- */
  --akcent: var(--mmr-modra);        /* plná plocha tlačítka */
  --akcent-hover: var(--mmr-modra-tmava);
  --akcent-text: var(--mmr-modra);   /* barva textu odkazu — 8,9 : 1 na bílé */
  --akcent-zavoj: var(--mmr-modra-zavoj);
  --akcent-na-plose: #FFFFFF;        /* text na ploše --akcent */

  /* --- hero --- */
  --hero-pozadi: linear-gradient(160deg, #00469B 0%, #003374 62%, #00265A 100%);
  --hero-text: #FFFFFF;
  --hero-text-tlumeny: rgba(255, 255, 255, .78);
  --hero-ram: rgba(255, 255, 255, .24);
  --hero-plocha: rgba(255, 255, 255, .10);
  --hero-plocha-hover: rgba(255, 255, 255, .20);
  --hero-jiskra: #7FD9C6;            /* ikona jiskry u štítku „AI asistent“ */

  /* --- štítky přípon souborů --- */
  --pripona-pdf-plocha: #FBE9E9;
  --pripona-pdf-text: #A60A0C;
  --pripona-docx-plocha: #E8F0FA;
  --pripona-docx-text: #00469B;
  --pripona-xlsx-plocha: #E5F4EC;
  --pripona-xlsx-text: #146B43;

  /* --- rádiusy --- */
  --r-xs: 5px;
  --r-s: 8px;
  --r-m: 11px;
  --r-l: 14px;
  --r-xl: 18px;
  --r-pilulka: 999px;

  /* --- stíny --- */
  --stin-0: 0 1px 2px rgba(16, 32, 54, .05);
  --stin-1: 0 2px 8px rgba(16, 32, 54, .07);
  --stin-2: 0 8px 24px rgba(6, 26, 50, .14);
  --stin-3: 0 14px 38px rgba(6, 26, 50, .22);

  /* --- rozestupy --- */
  --m-1: 4px;
  --m-2: 8px;
  --m-3: 12px;
  --m-4: 16px;
  --m-5: 22px;
  --m-6: 30px;
  --m-7: 44px;

  /* --- typografická škála --- */
  --pismo: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pismo-nadpis: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --fs-xs: 11px;
  --fs-s: 12.5px;
  --fs-sm: 13.5px;
  --fs-zaklad: 15px;
  --fs-m: 16px;
  --fs-l: clamp(17px, 2.1vw, 19px);
  --fs-xl: clamp(19px, 2.4vw, 23px);
  --fs-hero: clamp(27px, 5.6vw, 41px);
  --lh-tesna: 1.2;
  --lh-zaklad: 1.5;

  /* --- rozvržení --- */
  --sirka-obsahu: 1200px;
  --okraj-stranky: clamp(14px, 3vw, 28px);
  --vyska-hlavicky: 66px;
}


/* ==========================================================================
   3. Tmavý režim — přepis hodnot tokenů
   --------------------------------------------------------------------------
   Přepínáme podle [data-bs-theme="dark"], které nastavuje js/theme-init.js
   (a v ostrém provozu už server / Umbraco při renderu HTML z cookie).

   KONTRAST (ověřeno výpočtem podle WCAG 2.1 na pozadí --povrch #121821):
     --text            #E9EDF3 na #121821 ............ 15,6 : 1
     --text-tlumeny    #A7B0BE na #121821 .............  8,1 : 1
     --akcent-text     #7FB4F5 na #121821 .............  8,3 : 1
     --mmr-cervena-svetla #FF8A85 na #121821 .......... 7,8 : 1
     bílý text na --akcent #1F5FBF ....................  6,1 : 1
     bílý text na hero #0A2242 ........................ 15,9 : 1
   Firemní modrá #00469B je na tmavém pozadí nečitelná (kontrast 1,2 : 1),
   proto se v tmavém režimu pro TEXT používá světlejší varianta #7FB4F5
   a pro PLOCHY střední odstín #1F5FBF s bílým textem.
   ========================================================================== */

[data-bs-theme="dark"] {
  --povrch: #121821;
  --povrch-2: #0B1017;
  --povrch-3: #1B2430;
  --povrch-hover: #1A2330;
  --text: #E9EDF3;
  --text-tlumeny: #A7B0BE;
  --text-jemny: #8B95A4;
  --ram: #27313F;
  --ram-2: #1E2631;
  --ram-vyrazny: #3A4655;

  --akcent: var(--mmr-modra-stredni);
  --akcent-hover: #2E72D6;
  --akcent-text: var(--mmr-modra-svetla);
  --akcent-zavoj: #16283F;
  --akcent-na-plose: #FFFFFF;

  --hero-pozadi: linear-gradient(160deg, #10365F 0%, #0A2242 62%, #061527 100%);
  --hero-text: #FFFFFF;
  --hero-text-tlumeny: rgba(255, 255, 255, .74);
  --hero-ram: rgba(255, 255, 255, .20);
  --hero-plocha: rgba(255, 255, 255, .08);
  --hero-plocha-hover: rgba(255, 255, 255, .16);

  --pripona-pdf-plocha: #3A1616;
  --pripona-pdf-text: #FF8A85;
  --pripona-docx-plocha: #16283F;
  --pripona-docx-text: #7FB4F5;
  --pripona-xlsx-plocha: #10301F;
  --pripona-xlsx-text: #6FD3A3;

  --zelena: var(--zelena-svetla);
  --oranzova: var(--oranzova-svetla);
  --fialova: var(--fialova-svetla);
  --zelena-zavoj: #10301F;
  --oranzova-zavoj: #33260F;
  --fialova-zavoj: #241C3C;
  --mmr-cervena-zavoj: #3A1616;

  --stin-0: 0 1px 2px rgba(0, 0, 0, .5);
  --stin-1: 0 2px 8px rgba(0, 0, 0, .5);
  --stin-2: 0 8px 24px rgba(0, 0, 0, .6);
  --stin-3: 0 14px 38px rgba(0, 0, 0, .7);
}


/* ==========================================================================
   4. Mapování tokenů na proměnné Bootstrapu
   --------------------------------------------------------------------------
   Díky tomu drží komponenty Bootstrapu (tlačítka, formuláře, karty) značku
   MMR samy od sebe a není potřeba je přebíjet vlastními selektory.
   ========================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: var(--akcent);
  --bs-primary-rgb: 0, 70, 155;
  --bs-body-bg: var(--povrch-2);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--pismo);
  --bs-body-font-size: var(--fs-zaklad);
  --bs-body-line-height: var(--lh-zaklad);
  --bs-secondary-color: var(--text-tlumeny);
  --bs-tertiary-color: var(--text-jemny);
  --bs-border-color: var(--ram);
  --bs-border-radius: var(--r-m);
  --bs-border-radius-sm: var(--r-s);
  --bs-border-radius-lg: var(--r-l);
  --bs-border-radius-xl: var(--r-xl);
  --bs-link-color: var(--akcent-text);
  --bs-link-color-rgb: 0, 70, 155;
  --bs-link-hover-color: var(--akcent-hover);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-code-color: var(--mmr-cervena);
  --bs-focus-ring-color: rgba(0, 70, 155, .35);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(0, 70, 155, .3);
}

[data-bs-theme="dark"] {
  --bs-primary-rgb: 31, 95, 191;
  --bs-link-color-rgb: 127, 180, 245;
  --bs-focus-ring-color: rgba(127, 180, 245, .45);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(127, 180, 245, .35);
}


/* ==========================================================================
   5. Základ — reset drobností, typografie, skip link, focus
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--vyska-hlavicky) + 12px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--povrch-2);
  color: var(--text);
  font-family: var(--pismo);
  font-size: var(--fs-zaklad);
  line-height: var(--lh-zaklad);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  /* místo pro mobilní spodní navigaci */
  padding-bottom: 88px;
}

a {
  color: var(--akcent-text);
  text-decoration: none;
}

a:hover { color: var(--akcent-hover); text-decoration: underline; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

input::placeholder { color: var(--text-jemny); opacity: 1; }

img { max-width: 100%; }

h1, h2, h3, h4 {
  color: var(--text);
  letter-spacing: -.015em;
}

::selection { background: var(--akcent-zavoj); color: var(--text); }

/* Obal obsahu — sjednocená šířka a boční okraje stránky */
.obal {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding-left: var(--okraj-stranky);
  padding-right: var(--okraj-stranky);
}

/* Text jen pro odečítač obrazovky (vizuálně skrytý, ne display:none) */
.jen-pro-odecitac {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link „Přeskočit na hlavní obsah“ — první prvek v <body> */
.preskocit-obsah {
  position: absolute;
  left: 8px;
  top: -200px;
  z-index: 200;
  display: inline-block;
  padding: 12px 18px;
  background: var(--akcent);
  color: var(--akcent-na-plose);
  border-radius: 0 0 var(--r-m) var(--r-m);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}

.preskocit-obsah:focus {
  top: 0;
  color: var(--akcent-na-plose);
  text-decoration: none;
}

/* Viditelné zaostření na všech interaktivních prvcích (vyhláška 99/2023 Sb.) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--akcent-text);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Cíl skip linku — zaostřuje se programově, rámeček by mátl */
main:focus { outline: none; }

/* --------------------------------------------------------------------------
   Zaostření u vstupů zapuštěných do orámovaného pole
   --------------------------------------------------------------------------
   PROBLÉM, KTERÝ TO ŘEŠÍ: pravidlo výš kreslí obrys kolem samotného <input>.
   U vyhledávacích polí ale uživatel nevnímá jako pole ten <input>, nýbrž celý
   obal s ikonou a rámečkem. <input> je vůči němu zapuštěný, má jiné zaoblení
   (--r-xs proti --r-l/--r-xl) a obrys má ještě odsazení 2 px — po kliknutí do
   pole se tak uvnitř zaobleného rámečku objevil druhý, skoro hranatý obrys.

   ŘEŠENÍ: vstup vlastní obrys nekreslí a zaostření ukazuje obal přes
   :focus-within — tedy přesně to, co uživatel za pole považuje. Prstenec je
   box-shadow, ne outline, aby kopíroval zaoblení obalu.

   Tlačítek uvnitř těchto polí se to netýká, ta si svůj obrys nechávají.
   -------------------------------------------------------------------------- */
.naseptavac__pole .naseptavac__vstup:focus-visible,
.hero__dotaz .hero__dotaz-vstup:focus-visible,
.hledani__formular .hledani__vstup:focus-visible {
  outline: none;
}

.naseptavac__pole:focus-within {
  border-color: var(--akcent-text);
  box-shadow: 0 0 0 2px var(--akcent-text), 0 0 0 5px var(--bs-focus-ring-color);
}

/* Hero a hledání v dokumentech mají uvnitř bílého pole ještě tlačítko, takže
   prstenec nesmí obepnout celé pole — dostává ho jen část se vstupem. Zaoblení
   je zmenšené o odsazení obalu (7 px), aby prstenec kopíroval vnější křivku. */
.hero__dotaz-pole,
.hledani__pole {
  border-radius: calc(var(--r-xl) - 7px);
}

.hero__dotaz-pole:focus-within,
.hledani__pole:focus-within {
  box-shadow: 0 0 0 2px var(--akcent-text), 0 0 0 5px var(--bs-focus-ring-color);
}

/* Nadpis sekce a popisek pod ním — používá se v hlavičce každé karty */
.nadpis-sekce {
  margin: 0 0 3px;
  font-size: var(--fs-l);
  font-weight: 600;
}

.popis-sekce {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-tlumeny);
}

/* Textový odkaz „Zobrazit vše →“ na patě sekcí */
.odkaz-vice {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--akcent-text);
}

/* Odkaz s rámečkem (sekundární akce v hlavičce karty) */
.odkaz-ramecek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ram);
  border-radius: var(--r-m);
  background: var(--povrch);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--akcent-text);
}

.odkaz-ramecek:hover {
  border-color: var(--akcent-text);
  background: var(--akcent-zavoj);
  text-decoration: none;
}

.ikona { flex: none; display: block; }


/* ==========================================================================
   6. Komponenty
   ========================================================================== */

/* --------------------------------------------------------------------------
   .hlavicka — sticky horní lišta na všech stránkách intranetu
   -------------------------------------------------------------------------- */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--povrch);
  border-bottom: 1px solid var(--ram);
}

.hlavicka__vnitrek {
  display: flex;
  align-items: center;
  gap: var(--m-3);
  padding-top: 9px;
  padding-bottom: 9px;
}

.hlavicka__nastroje {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  flex: none;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   .znacka — logo MMR v hlavičce i patičce
   Logo se mezi režimy přepíná v CSS, ne JavaScriptem, aby nebliklo.
   -------------------------------------------------------------------------- */
.znacka {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.znacka:hover { color: var(--text); text-decoration: none; }

.znacka__logo {
  height: 46px;
  width: auto;
  flex: none;
}

.znacka__logo--svetle { display: block; }
.znacka__logo--tmave { display: none; }

[data-bs-theme="dark"] .znacka__logo--svetle { display: none; }
[data-bs-theme="dark"] .znacka__logo--tmave { display: block; }

/* --------------------------------------------------------------------------
   .hlavni-navigace — vodorovná navigace v hlavičce (zobrazuje se od lg)
   -------------------------------------------------------------------------- */
.hlavni-navigace {
  display: none;
  gap: 2px;
  margin-left: var(--m-4);
  min-width: 0;
}

.hlavni-navigace__odkaz {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--r-s);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tlumeny);
  white-space: nowrap;
}

.hlavni-navigace__odkaz:hover {
  background: var(--akcent-zavoj);
  color: var(--akcent-text);
  text-decoration: none;
}

/* Akce a Státní služba zatím obrazovku nemají. Vypadají stejně jako ostatní
   položky, aby bylo menu na předváděčce úplné, ale nejsou to odkazy — odkaz
   na "#" by při kliknutí skočil na začátek stránky a působil jako chyba. */
.hlavni-navigace__odkaz--bez-cile {
  cursor: default;
}

.hlavni-navigace__odkaz--bez-cile:hover {
  background: none;
  color: var(--text-tlumeny);
}

.hlavni-navigace__odkaz[aria-current="page"] {
  color: var(--akcent-text);
  background: var(--akcent-zavoj);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   .wifi-odkaz — „Přístup do WIFI“ v pravé části hlavičky.
   Převzato z původního intranetu MMR: je to nejčastěji klikaná věc v horní
   liště, protože ji úředník potřebuje pokaždé s novým zařízením nebo návštěvou.
   Do lg se skrývá popisek a zůstává jen ikona, ať se lišta na mobilu nerozbije.
   -------------------------------------------------------------------------- */
.wifi-odkaz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--r-s);
  font-size: 14px;
  font-weight: 600;
  color: var(--akcent-text);
  white-space: nowrap;
}

.wifi-odkaz:hover {
  background: var(--akcent-zavoj);
  text-decoration: none;
}

.wifi-odkaz .ikona { flex: none; }

.wifi-odkaz__popis { display: none; }

/* --------------------------------------------------------------------------
   .aplikace-pruh — pruh s odkazy na aplikace hned pod navigací.
   Také převzato z původního intranetu. Modrá linka nahoře odděluje pruh od
   hlavičky stejně jako v původním řešení.

   PROČ NA KAŽDÉ STRÁNCE A NE JEN NA ROZCESTNÍKU: jsou to nástroje, do kterých
   úředník odbíhá uprostřed jiné práce (docházka, help desk, spisová služba).
   Kdyby byly jen na úvodní stránce, znamenalo by to pokaždé cestu zpět.

   Hlavička je sticky, tenhle pruh ne — po odrolování ustoupí obsahu.
   -------------------------------------------------------------------------- */
.aplikace-pruh {
  border-top: 3px solid var(--mmr-modra);
  border-bottom: 1px solid var(--ram);
  background: var(--povrch-2);
}

[data-bs-theme="dark"] .aplikace-pruh {
  border-top-color: var(--mmr-modra-stredni);
}

.aplikace-pruh__vnitrek {
  display: flex;
  gap: var(--m-2);
  padding-top: var(--m-3);
  padding-bottom: var(--m-3);
  overflow-x: auto;
  scrollbar-width: thin;
}

.aplikace-dlazdice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 168px;
  min-height: 56px;
  padding: 10px 13px;
  border: 1px solid var(--ram);
  border-radius: var(--r-m);
  background: var(--povrch);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: var(--stin-0);
}

.aplikace-dlazdice:hover {
  border-color: var(--akcent);
  background: var(--akcent-zavoj);
  color: var(--text);
  text-decoration: none;
}

.aplikace-dlazdice__ikona {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-s);
  color: var(--akcent-text);
}

.aplikace-dlazdice__ikona svg { width: 21px; height: 21px; }

.aplikace-dlazdice__popis { min-width: 0; }

/* --------------------------------------------------------------------------
   .theme-switch — pilulkový přepínač režimu (převzato z prototypu NSA,
   rozšířeno na tři stavy podle designového systému DIA: světlý / auto / tmavý).
   Poloha knoflíku se řídí atributem data-theme na <html>.
   Jediné třídy v systému psané anglicky — sdílíme je s NSA.
   -------------------------------------------------------------------------- */
.theme-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 84px;
  height: 36px;
  padding: 0 7px;
  border: 1px solid var(--ram);
  border-radius: var(--r-pilulka);
  background: var(--povrch-2);
  color: var(--text-tlumeny);
  cursor: pointer;
}

.theme-switch__icon {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  color: var(--text-jemny);
  transition: color .18s ease;
}

.theme-switch__knob {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--povrch);
  box-shadow: var(--stin-1);
  transition: left .2s ease;
  z-index: 1;
}

/* Tři polohy knoflíku podle zvoleného režimu */
[data-theme="light"] .theme-switch__knob { left: 3px; }
[data-theme="auto"] .theme-switch__knob { left: 29px; }
[data-theme="dark"] .theme-switch__knob { left: 55px; }

/* Zvýraznění aktivní ikony */
[data-theme="light"] .theme-switch__icon--light { color: var(--oranzova); }
[data-theme="auto"] .theme-switch__icon--auto { color: var(--akcent-text); }
[data-theme="dark"] .theme-switch__icon--dark { color: var(--akcent-text); }

.theme-switch:hover { border-color: var(--ram-vyrazny); }

/* Na dotykových zařízeních cílová plocha min. 44 px */
@media (pointer: coarse) {
  .theme-switch { height: 44px; }
}

/* --------------------------------------------------------------------------
   .drobecky — drobečková navigace, pás pod hlavičkou.
   Sdílená komponenta: stejná stavba i vzhled na všech vnitřních stránkách.
   Oddělovač je dekorace, proto se kreslí přes ::before a není v HTML.
   -------------------------------------------------------------------------- */
.drobecky {
  background: var(--povrch);
  border-bottom: 1px solid var(--ram);
}

.drobecky__vnitrek {
  padding-top: 9px;
  padding-bottom: 9px;
}

.drobecky__seznam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-s);
  color: var(--text-tlumeny);
}

.drobecky__polozka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-tlumeny);
}

.drobecky__polozka + .drobecky__polozka::before {
  content: "›";
  color: var(--text-jemny);
}

.drobecky__odkaz {
  color: var(--text-tlumeny);
  text-decoration: none;
}

.drobecky__odkaz:hover {
  color: var(--akcent-text);
  text-decoration: underline;
}

.drobecky__aktualni {
  color: var(--text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   .zahlavi-stranky — jediný <h1> vnitřní stránky, volitelný štítek, perex
   a řádek s údaji. Sdílená komponenta pro všechny vnitřní stránky.
   -------------------------------------------------------------------------- */
.zahlavi-stranky {
  padding-top: clamp(16px, 3vw, 30px);
  padding-bottom: 2px;
}

.zahlavi-stranky__stitek {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: var(--r-pilulka);
  background: var(--akcent-zavoj);
  color: var(--akcent-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.zahlavi-stranky__nadpis {
  margin: 0 0 var(--m-2);
  font-size: var(--fs-hero);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.025em;
}

.zahlavi-stranky__perex {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  color: var(--text-tlumeny);
}

/* Řádek s údaji pod nadpisem (počet kontaktů, zdroj dat, poslední aktualizace) */
.zahlavi-stranky__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 var(--m-2);
  font-size: var(--fs-sm);
  color: var(--text-tlumeny);
}

.zahlavi-stranky__udaj {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.zahlavi-stranky__pocet {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.zahlavi-stranky__poznamka {
  margin: 0;
  max-width: 78ch;
  font-size: var(--fs-s);
  color: var(--text-jemny);
}

/* --------------------------------------------------------------------------
   .hero — modrý blok s AI asistentem pod hlavičkou (jen na domovské stránce)
   -------------------------------------------------------------------------- */
.hero {
  background: var(--hero-pozadi);
  color: var(--hero-text);
}

.hero__vnitrek {
  padding-top: clamp(26px, 5vw, 46px);
  padding-bottom: clamp(28px, 5vw, 48px);
}

.hero__stitek {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--m-2);
  padding: 6px 13px 6px 10px;
  border-radius: var(--r-pilulka);
  background: var(--hero-plocha);
  border: 1px solid var(--hero-ram);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hero-text);
}

.hero__jiskra { color: var(--hero-jiskra); }

.hero__nadpis {
  margin: 14px 0 8px;
  color: var(--hero-text);
  font-size: var(--fs-hero);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.025em;
  max-width: 20ch;
}

.hero__perex {
  margin: 0 0 20px;
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  color: var(--hero-text-tlumeny);
  max-width: 52ch;
}

/* Vyhledávací pole hero — bílá „pilulka“ s inputem a tlačítkem */
.hero__dotaz {
  display: flex;
  gap: var(--m-2);
  padding: 7px;
  background: var(--povrch);
  border-radius: var(--r-xl);
  box-shadow: var(--stin-3);
  flex-wrap: wrap;
}

.hero__dotaz-pole {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  min-width: 0;
  color: var(--akcent-text);
}

.hero__dotaz-vstup {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-m);
}

.hero__tlacitko {
  flex: 0 1 auto;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-l);
  background: var(--akcent);
  color: var(--akcent-na-plose);
  font-size: var(--fs-zaklad);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-2);
}

.hero__tlacitko:hover {
  background: var(--akcent-hover);
  color: var(--akcent-na-plose);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   .chip — návrhy dotazů pod vyhledávacím polem v hero
   -------------------------------------------------------------------------- */
.chipy {
  display: flex;
  gap: var(--m-2);
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.chipy::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  min-height: 40px;
  padding: 9px 15px;
  border-radius: var(--r-pilulka);
  border: 1px solid var(--hero-ram);
  background: var(--hero-plocha);
  color: var(--hero-text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}

.chip:hover {
  background: var(--hero-plocha-hover);
  border-color: rgba(255, 255, 255, .45);
  color: var(--hero-text);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   .odpoved — karta s odpovědí AI asistenta (oblast s aria-live="polite")
   -------------------------------------------------------------------------- */
.odpoved {
  margin-top: var(--m-4);
  background: var(--povrch);
  color: var(--text);
  border-radius: var(--r-xl);
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow: var(--stin-2);
}

.odpoved__hlavicka {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: var(--m-3);
  border-bottom: 1px solid var(--ram-2);
  flex-wrap: wrap;
}

.odpoved__stitek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--zelena-zavoj);
  color: var(--zelena);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex: none;
}

.odpoved__dotaz {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tlumeny);
  flex: 1 1 200px;
  min-width: 0;
}

.odpoved__text {
  margin: 14px 0 10px;
  font-size: 15.5px;
}

.odpoved__seznam {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  font-size: 14.5px;
  color: var(--text-tlumeny);
}

.odpoved__seznam strong { color: var(--text); }

/* Blok „Zdroje ze SharePointu“ pod odpovědí */
.odpoved__zdroje {
  margin-top: var(--m-4);
  padding-top: 14px;
  border-top: 1px solid var(--ram-2);
}

.odpoved__nadpisek {
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-tlumeny);
}

.odpoved__paticka {
  margin-top: var(--m-4);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.odpoved__pokracovat { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; }

/* --------------------------------------------------------------------------
   .zdroj — jedna položka ze SharePointu pod odpovědí AI
   -------------------------------------------------------------------------- */
.odpoved__zdroje-seznam {
  display: grid;
  gap: 7px;
}

.zdroj {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--ram);
  border-radius: var(--r-m);
  color: var(--text);
  text-decoration: none;
}

.zdroj:hover {
  border-color: var(--akcent-text);
  background: var(--akcent-zavoj);
  color: var(--text);
  text-decoration: none;
}

.zdroj__nazev {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zdroj__meta {
  flex: none;
  font-size: var(--fs-s);
  color: var(--text-tlumeny);
}

/* --------------------------------------------------------------------------
   .pripona — barevný štítek typu souboru (PDF / DOCX / XLSX)
   Používá se u zdrojů AI odpovědi i v seznamu dokumentů.
   -------------------------------------------------------------------------- */
.pripona {
  flex: none;
  display: grid;
  place-items: center;
  padding: 4px 6px;
  border-radius: var(--r-xs);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--pripona-pdf-plocha);
  color: var(--pripona-pdf-text);
}

.pripona--pdf { background: var(--pripona-pdf-plocha); color: var(--pripona-pdf-text); }
.pripona--docx { background: var(--pripona-docx-plocha); color: var(--pripona-docx-text); }
.pripona--xlsx { background: var(--pripona-xlsx-plocha); color: var(--pripona-xlsx-text); }

/* Velká varianta v seznamu dokumentů */
.pripona--velka {
  width: 44px;
  height: 44px;
  border-radius: var(--r-m);
  padding: 0;
}

/* --------------------------------------------------------------------------
   .hodnoceni — „Byla odpověď užitečná? Ano / Ne“
   -------------------------------------------------------------------------- */
.hodnoceni {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hodnoceni__popis { font-size: 13px; color: var(--text-tlumeny); }

.hodnoceni__tlacitka { display: flex; gap: 6px; }

.hodnoceni__tlacitko {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ram);
  background: var(--povrch);
  color: var(--text);
  border-radius: var(--r-s);
  font-size: 13px;
  cursor: pointer;
}

.hodnoceni__tlacitko:hover { border-color: var(--zelena); color: var(--zelena); }
.hodnoceni__tlacitko--ne:hover { border-color: var(--mmr-cervena); color: var(--mmr-cervena); }

[data-bs-theme="dark"] .hodnoceni__tlacitko--ne:hover { color: var(--mmr-cervena-svetla); border-color: var(--mmr-cervena-svetla); }

.hodnoceni__tlacitko[aria-pressed="true"] {
  border-color: var(--akcent-text);
  background: var(--akcent-zavoj);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   .karta — obecná bílá karta se zaoblením a jemným rámem.
   Základní stavební blok obsahu na všech stránkách.
   -------------------------------------------------------------------------- */
.karta {
  background: var(--povrch);
  border: 1px solid var(--ram);
  border-radius: var(--r-xl);
  box-shadow: var(--stin-0);
}

.karta--vypln { padding: clamp(16px, 2vw, 20px) clamp(14px, 2vw, 20px); }

.karta__hlavicka {
  padding: clamp(16px, 2vw, 20px) clamp(14px, 2vw, 20px) 12px;
  display: flex;
  align-items: flex-start;
  gap: var(--m-3);
  flex-wrap: wrap;
}

.karta--vypln .karta__hlavicka { padding: 0 0 var(--m-4); }

.karta__titulek { flex: 1 1 220px; min-width: 0; }

.karta__paticka {
  padding: 12px clamp(14px, 2vw, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.karta__poznamka { font-size: var(--fs-s); color: var(--text-jemny); }

/* Rozvržení hlavního obsahu — dva sloupce, na mobilu pod sebou */
.obsah {
  padding-top: clamp(16px, 3vw, 26px);
  padding-bottom: var(--m-7);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 22px);
  align-items: flex-start;
}

.sloupec-hlavni {
  flex: 2 1 520px;
  min-width: 0;
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}

.sloupec-vedlejsi { flex: 1 1 320px; min-width: 0; }

/* --------------------------------------------------------------------------
   .zalozky / .zalozka — přepínání knihoven SharePointu nad seznamem dokumentů
   -------------------------------------------------------------------------- */
.zalozky {
  display: flex;
  gap: 6px;
  padding: 0 clamp(14px, 2vw, 20px) 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.zalozky::-webkit-scrollbar { display: none; }

.zalozka {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--ram);
  background: var(--povrch);
  color: var(--text-tlumeny);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.zalozka:hover { border-color: var(--ram-vyrazny); color: var(--text); }

.zalozka--aktivni,
.zalozka[aria-selected="true"] {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--akcent-na-plose);
}

/* --------------------------------------------------------------------------
   .seznam-dokumentu / .dokument — seznam souborů ze SharePointu
   -------------------------------------------------------------------------- */
.seznam-dokumentu { border-top: 1px solid var(--ram-2); }

.dokument {
  display: flex;
  align-items: center;
  gap: var(--m-3);
  padding: 13px clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--ram-2);
  color: var(--text);
  text-decoration: none;
}

.dokument:hover { background: var(--povrch-hover); color: var(--text); text-decoration: none; }

.dokument__texty { flex: 1 1 auto; min-width: 0; }

.dokument__nazev {
  display: block;
  font-size: 14.8px;
  font-weight: 600;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dokument__meta {
  display: block;
  font-size: var(--fs-s);
  color: var(--text-tlumeny);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dokument__konec {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-jemny);
}

.dokument__stitek {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-pilulka);
  background: var(--mmr-cervena-zavoj);
  color: var(--pripona-pdf-text);
}

/* Skrytí dokumentu, který neodpovídá zvolené záložce (řídí js/prototyp.js) */
.dokument[hidden] { display: none; }

/* --------------------------------------------------------------------------
   .clanek-hlavni — vedoucí článek s obrázkem v sekci Interní články
   -------------------------------------------------------------------------- */
.clanek-hlavni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 2vw, 18px);
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.clanek-hlavni:hover { color: var(--text); text-decoration: none; }
.clanek-hlavni:hover .clanek-hlavni__nadpis { color: var(--akcent-text); }

.clanek-hlavni__obrazek {
  /* 16:9 — pomer, ve kterem redakce dodava fotky a ve kterem je i zastupny
     obrazek v img/ukazka. Pri jinem pomeru by object-fit: cover fotku orizl. */
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--povrch-3);
  object-fit: cover;
  display: block;
}

.clanek-hlavni__rubrika {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  margin: 0 0 var(--m-2);
}

.clanek-hlavni__novinka {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pripona-pdf-text);
}

.clanek-hlavni__tecka {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ram-vyrazny);
}

.clanek-hlavni__odbor { font-size: var(--fs-s); color: var(--text-tlumeny); }

.clanek-hlavni__nadpis {
  margin: 0 0 var(--m-2);
  font-family: var(--pismo-nadpis);
  font-size: var(--fs-xl);
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -.01em;
}

.clanek-hlavni__perex {
  margin: 0 0 10px;
  font-size: 14.5px;
  color: var(--text-tlumeny);
}

.clanek-hlavni__meta { margin: 0; font-size: var(--fs-s); color: var(--text-jemny); }

/* --------------------------------------------------------------------------
   .clanek-radek — menší článek pod vedoucím článkem (miniatura + titulek)
   -------------------------------------------------------------------------- */
.clanky-dalsi {
  display: grid;
  gap: 2px;
  margin-top: 18px;
  border-top: 1px solid var(--ram-2);
  padding-top: 6px;
}

.clanek-radek {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--ram-2);
}

.clanky-dalsi .clanek-radek:last-child { border-bottom: 0; }

.clanek-radek:hover { color: var(--text); text-decoration: none; }
.clanek-radek:hover .clanek-radek__nazev { color: var(--akcent-text); }

.clanek-radek__obrazek {
  flex: none;
  width: 104px;
  height: 74px;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--povrch-3);
  object-fit: cover;
  display: block;
}

.clanek-radek__texty { flex: 1; min-width: 0; }

.clanek-radek__nazev {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.clanek-radek__meta {
  display: block;
  font-size: var(--fs-s);
  color: var(--text-jemny);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   .rychla-volba — dlaždice s nejčastějšími čísly (helpdesk, podatelna, …)
   -------------------------------------------------------------------------- */
.rychla-volba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--m-2);
}

.rychla-volba__polozka {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 9px 11px;
  border: 1px solid var(--ram);
  border-radius: var(--r-l);
  background: var(--povrch-2);
  color: var(--text);
  text-decoration: none;
}

.rychla-volba__polozka:hover {
  border-color: var(--akcent-text);
  background: var(--akcent-zavoj);
  color: var(--text);
  text-decoration: none;
}

.rychla-volba__ikona {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-m);
  background: var(--akcent);
  color: var(--akcent-na-plose);
  display: grid;
  place-items: center;
}

.rychla-volba__texty { min-width: 0; }

.rychla-volba__nazev {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
}

.rychla-volba__klapka {
  display: block;
  font-size: 12px;
  color: var(--text-tlumeny);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   .naseptavac — vyhledávací pole telefonního seznamu s živými návrhy
   -------------------------------------------------------------------------- */
.naseptavac {
  position: relative;
  margin: 14px 0 6px;
}

.naseptavac__pole {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--ram);
  border-radius: var(--r-l);
  background: var(--povrch);
  color: var(--text-jemny);
}

.naseptavac__pole:focus-within { border-color: var(--akcent-text); }

.naseptavac__vstup {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-zaklad);
}

.naseptavac__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--povrch);
  border: 1px solid var(--ram);
  border-radius: var(--r-m);
  box-shadow: var(--stin-2);
  max-height: 260px;
  overflow-y: auto;
}

.naseptavac__panel[hidden] { display: none; }

.naseptavac__polozka {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.naseptavac__polozka:hover,
.naseptavac__polozka:focus-visible { background: var(--akcent-zavoj); }

.naseptavac__polozka span { display: block; color: var(--text-tlumeny); font-size: var(--fs-s); }

.naseptavac__prazdno {
  margin: 14px 0 6px;
  font-size: var(--fs-sm);
  color: var(--text-tlumeny);
}

.naseptavac__prazdno[hidden] { display: none; }

/* --------------------------------------------------------------------------
   .seznam-osob / .osoba — výpis kolegů v telefonním seznamu
   -------------------------------------------------------------------------- */
.seznam-osob { display: grid; }

.osoba {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ram-2);
}

.osoba[hidden] { display: none; }

.osoba__iniciraly {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--akcent-zavoj);
  color: var(--akcent-text);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 600;
}

.osoba__texty { flex: 1; min-width: 0; }

.osoba__jmeno {
  display: block;
  font-size: 14.3px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.osoba__meta {
  display: block;
  font-size: 12.3px;
  color: var(--text-tlumeny);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.osoba__stav { display: block; margin-top: 3px; }

/* .volat — kulaté tlačítko s telefonním odkazem (min. 44 × 44 px) */
.volat {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-l);
  background: var(--akcent);
  color: var(--akcent-na-plose);
  display: grid;
  place-items: center;
  text-decoration: none;
}

.volat:hover { background: var(--akcent-hover); color: var(--akcent-na-plose); text-decoration: none; }

/* --------------------------------------------------------------------------
   .dostupnost — štítek stavu kolegy. Nese vždy i text, nikdy jen barvu.
   -------------------------------------------------------------------------- */
.dostupnost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pilulka);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--povrch-3);
  color: var(--text-tlumeny);
}

.dostupnost::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.dostupnost--pracoviste { background: var(--zelena-zavoj); color: var(--zelena); }
.dostupnost--dovolena { background: var(--oranzova-zavoj); color: var(--oranzova); }
.dostupnost--homeoffice { background: var(--fialova-zavoj); color: var(--fialova); }
.dostupnost--sluzebni-cesta { background: var(--akcent-zavoj); color: var(--akcent-text); }

/* --------------------------------------------------------------------------
   .paticka — spodní lišta s logem, rychlými odkazy a poznámkou
   -------------------------------------------------------------------------- */
.paticka {
  border-top: 1px solid var(--ram);
  background: var(--povrch);
}

.paticka__vnitrek {
  padding-top: 22px;
  padding-bottom: 30px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.paticka__odkazy {
  flex: 1 1 240px;
  display: flex;
  gap: 6px 18px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

.paticka__poznamka { font-size: var(--fs-s); color: var(--text-jemny); }

.paticka .znacka__logo { height: 42px; }

/* --------------------------------------------------------------------------
   .mobilni-navigace — pevná spodní navigace, jen do zlomu lg
   -------------------------------------------------------------------------- */
.mobilni-navigace {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--povrch);
  border-top: 1px solid var(--ram);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.mobilni-navigace__polozka {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 4px;
  border-radius: var(--r-l);
  text-decoration: none;
  color: var(--text-tlumeny);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.mobilni-navigace__polozka:hover { background: var(--akcent-zavoj); color: var(--akcent-text); text-decoration: none; }

.mobilni-navigace__polozka[aria-current="page"] { color: var(--akcent-text); }

/* --------------------------------------------------------------------------
   .kostra-nacitani — skeleton, než dorazí odpověď AI nebo data ze SharePointu
   -------------------------------------------------------------------------- */
.kostra-nacitani {
  margin-top: var(--m-4);
  background: var(--povrch);
  border-radius: var(--r-xl);
  padding: 20px;
  display: grid;
  gap: 11px;
}

.kostra-nacitani[hidden] { display: none; }

.kostra-nacitani__radek {
  display: block;
  height: 12px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--povrch-3) 0%, var(--povrch-2) 40%, var(--povrch-3) 80%);
  background-size: 320px 100%;
  animation: kostra-prelivani 1.2s linear infinite;
}

.kostra-nacitani__radek--w40 { width: 42%; }
.kostra-nacitani__radek--w90 { width: 92%; }
.kostra-nacitani__radek--w75 { width: 78%; }
.kostra-nacitani__radek--w55 { width: 58%; }

@keyframes kostra-prelivani {
  0% { background-position: -320px 0; }
  100% { background-position: 320px 0; }
}


/* ==========================================================================
   7. Responzivita — mobil first, zlomy podle Bootstrapu
   ========================================================================== */

/* sm — 576px: jemné zvětšení loga */
@media (min-width: 576px) {
  .znacka__logo { height: 50px; }
}

/* lg — 992px: hlavní navigace v hlavičce, spodní mobilní navigace mizí */
@media (min-width: 992px) {
  .hlavni-navigace { display: flex; }
  .wifi-odkaz__popis { display: inline; }

  /* Minimální výška loga na desktopu je podle značky MMR 79 px. Poměr stran
     ze souboru je 134,3 : 62,4, takže šířka vychází na 170 px; drží ji
     width: auto, ať se logo nikdy nedeformuje.
     Patičky se to netýká — .paticka .znacka__logo má vyšší specificitu
     a nechává si svých 42 px. */
  .znacka__logo { height: 79px; }

  .mobilni-navigace { display: none; }

  body { padding-bottom: 0; }
}

/* Užší displeje: články pod sebou, menší miniatury */
@media (max-width: 575.98px) {
  .clanek-radek__obrazek { width: 84px; height: 60px; }

  .hero__tlacitko { flex: 1 1 100%; }

  .paticka__poznamka { flex: 1 1 100%; }
}

/* Dotyková zařízení — cílové plochy nejméně 44 × 44 px
   (vyhláška č. 99/2023 Sb. / EN 301 549, WCAG 2.5.5).
   Na myši zůstává hustší sazba, prstem se ale musí dát trefit. */
@media (pointer: coarse) {
  .odkaz-ramecek,
  .hlavni-navigace__odkaz,
  .chip,
  .zalozka,
  .hodnoceni__tlacitko,
  .paticka__odkazy a,
  .odkaz-vice { min-height: 44px; }

  .paticka__odkazy a,
  .odkaz-vice { display: inline-flex; align-items: center; }
}


/* ==========================================================================
   8. Omezený pohyb — uživatel si v systému vypnul animace
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }
}