@charset "UTF-8";
/* ==========================================================================
   navod.css — doplňkové třídy pro stránku „Návod / životní situace úředníka“
   --------------------------------------------------------------------------
   Načítá se AŽ ZA css/intranet.css a staví výhradně nad jeho tokeny
   (--povrch, --ram, --akcent, --text-tlumeny …), takže se automaticky
   přepíná mezi světlým a tmavým režimem. Do intranet.css se nesahá.

   Obsah:
     1. .shrnuti — panel s parametry návodu (čas, lhůta, gestor, formulář)
     2. .souhrn-ai — shrnutí jednou větou (zdroj pro AI asistenta)
     3. .kroky / .krok — číslované kroky postupu
     4. .bocni-panel a jeho bloky (kontakt, formuláře, návody, platnost)
     5. .dotazy — harmonika častých dotazů (Bootstrap accordion)
     6. .zpetna-vazba — „Byl návod srozumitelný?“
     7. .poznamka-ai — poznámka o využití návodu AI asistentem
     8. Responzivita a tisk

   Drobečková navigace (.drobecky) a záhlaví stránky (.zahlavi-stranky) jsou
   sdílené komponenty a bydlí v css/intranet.css.
   ========================================================================== */


/* ==========================================================================
   1. .shrnuti — panel s parametry návodu
   --------------------------------------------------------------------------
   Definiční seznam: popisek (dt) + hodnota (dd). Informace nikdy nestojí
   jen na barvě nebo ikoně — vždy je u ní popisek slovy.
   ========================================================================== */

.shrnuti {
  margin: clamp(16px, 2.6vw, 24px) 0 0;
  padding: clamp(14px, 2vw, 18px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}

.shrnuti__polozka { min-width: 0; }

.shrnuti__ikona {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-m);
  background: var(--akcent-zavoj);
  color: var(--akcent-text);
  display: grid;
  place-items: center;
}

.shrnuti__popisek {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-jemny);
}

.shrnuti__hodnota {
  /* zarovnání pod popisek, o šířku ikony (38 px) a mezeru (11 px) */
  margin: 5px 0 0 49px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.shrnuti__doplnek {
  display: block;
  font-size: var(--fs-s);
  font-weight: 400;
  color: var(--text-tlumeny);
}


/* ==========================================================================
   2. .souhrn-ai — shrnutí návodu jednou větou
   --------------------------------------------------------------------------
   Přesně tato věta slouží AI asistentovi jako krátká odpověď, proto je
   v obsahu vyčleněná a v HTML označená vlastním blokem.
   ========================================================================== */

.souhrn-ai {
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  padding: clamp(14px, 2vw, 18px);
  border-left: 4px solid var(--akcent);
}

.souhrn-ai__stitek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-tlumeny);
}

.souhrn-ai__text {
  margin: 0;
  font-size: clamp(15.5px, 1.9vw, 17.5px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--text);
}


/* ==========================================================================
   3. .kroky / .krok — číslovaný postup, hlavní obsah stránky
   --------------------------------------------------------------------------
   Číslo kroku je viditelné číslo v kolečku, ne jen CSS dekorace —
   seznam je <ol>, takže pořadí vnímá i odečítač obrazovky.
   ========================================================================== */

.kroky {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.krok {
  position: relative;
  display: flex;
  gap: clamp(12px, 2vw, 16px);
  padding: clamp(14px, 2vw, 18px) 0;
  border-bottom: 1px solid var(--ram-2);
}

.kroky .krok:last-child { border-bottom: 0; padding-bottom: 4px; }

.krok__cislo {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--akcent);
  color: var(--akcent-na-plose);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

.krok__nadpis {
  margin: 6px 0 6px;
  font-size: var(--fs-m);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

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

.krok__popis + .krok__popis { margin-top: 8px; }

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

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

/* Řádek pod popisem kroku: odkaz na formulář nebo aplikaci + odhad času */
.krok__paticka {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.krok__akce {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  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);
  text-decoration: none;
}

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

.krok__cas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-s);
  color: var(--text-jemny);
}

/* Upozornění uvnitř kroku (lhůta, na co si dát pozor) */
.krok__upozorneni {
  margin: 11px 0 0;
  padding: 9px 12px;
  border-radius: var(--r-s);
  background: var(--oranzova-zavoj);
  color: var(--text);
  font-size: var(--fs-sm);
}

.krok__upozorneni strong { color: var(--oranzova); }


/* ==========================================================================
   4. .bocni-panel — postranní sloupec s bloky
   ========================================================================== */

.bocni-panel {
  display: grid;
  /* minmax(0, 1fr) — bez toho by se karty v mřížce nesmrskly pod svoji
     min-content šířku a na úzkých displejích by přetékaly ze stránky */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 22px);
  min-width: 0;
}

.bocni-panel > * { min-width: 0; }

/* Prostý seznam odkazů (Související návody) */
.odkazy-seznam {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.odkazy-seznam__polozka { border-bottom: 1px solid var(--ram-2); }
.odkazy-seznam__polozka:last-child { border-bottom: 0; }

.odkazy-seznam__odkaz {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  color: var(--text);
  text-decoration: none;
  font-size: 14.3px;
  font-weight: 600;
}

.odkazy-seznam__odkaz:hover { color: var(--akcent-text); text-decoration: none; }

.odkazy-seznam__sipka { flex: none; margin-left: auto; color: var(--text-jemny); }

/* Seznam souvisejících formulářů — používá .zdroj a .pripona z jádra */
.formulare-seznam {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

/* Sloupcové mřížky jádra uvnitř postranního panelu smí zmenšit svoje položky,
   jinak by na úzkých displejích přetekly (nesahá se do intranet.css). */
.bocni-panel .seznam-osob { grid-template-columns: minmax(0, 1fr); }

/* Blok „Platnost“ — definiční seznam */
.platnost {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.platnost__popisek {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-jemny);
}

.platnost__hodnota {
  margin: 1px 0 0;
  font-size: 14px;
  color: var(--text);
}


/* ==========================================================================
   5. .dotazy — časté dotazy v harmonice (komponenta accordion z Bootstrapu)
   --------------------------------------------------------------------------
   Bootstrap 5.3 je celý na CSS proměnných, takže stačí přemapovat jeho
   --bs-accordion-* na tokeny intranetu a harmonika drží značku MMR
   i tmavý režim bez přebíjení selektorů.
   ========================================================================== */

.dotazy {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--text);
  --bs-accordion-border-color: var(--ram-2);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: var(--r-m);
  --bs-accordion-inner-border-radius: var(--r-m);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 15px;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--akcent-text);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
}

.dotazy .accordion-item {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}

.dotazy .accordion-item:last-of-type { border-bottom: 0; }

.dotazy .accordion-button {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  gap: 12px;
}

.dotazy .accordion-button:hover { color: var(--akcent-text); }

.dotazy .accordion-button:focus-visible {
  outline: 3px solid var(--akcent-text);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Šipka harmoniky — vykreslená čistě z rámečků, aby se barvila podle režimu
   a nenačítal se žádný obrázek (Bootstrap má natvrdo zapsaný tmavý obrázek). */
.dotazy .accordion-button::after {
  width: 9px;
  height: 9px;
  margin-top: -4px;
  margin-right: 6px;
  background-image: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.dotazy .accordion-button:not(.collapsed)::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

.dotazy .accordion-body {
  font-size: 14.5px;
  color: var(--text-tlumeny);
  padding-bottom: 16px;
  max-width: 78ch;
}

.dotazy .accordion-body p { margin: 0 0 9px; }
.dotazy .accordion-body p:last-child { margin-bottom: 0; }
.dotazy .accordion-body strong { color: var(--text); }


/* ==========================================================================
   6. .zpetna-vazba — „Byl návod srozumitelný?“
   ========================================================================== */

.zpetna-vazba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-4);
  flex-wrap: wrap;
}

.zpetna-vazba__texty { flex: 1 1 260px; min-width: 0; }

.zpetna-vazba__nadpis {
  margin: 0 0 3px;
  font-size: var(--fs-m);
  font-weight: 600;
}

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

.zpetna-vazba__akce {
  display: flex;
  align-items: center;
  gap: var(--m-4);
  flex-wrap: wrap;
}

.zpetna-vazba__nahlasit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--akcent-text);
}


/* ==========================================================================
   7. .poznamka-ai — nenápadná poznámka o využití návodu AI asistentem
   ========================================================================== */

.poznamka-ai {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: clamp(14px, 2vw, 18px) 0 0;
  padding: 11px 14px;
  border: 1px dashed var(--ram-vyrazny);
  border-radius: var(--r-m);
  font-size: var(--fs-sm);
  color: var(--text-tlumeny);
}

.poznamka-ai__ikona { flex: none; margin-top: 2px; color: var(--akcent-text); }


/* ==========================================================================
   8. Responzivita a tisk
   ========================================================================== */

@media (max-width: 575.98px) {
  .krok { gap: 11px; }

  .krok__cislo { width: 30px; height: 30px; font-size: 13.5px; }

  .zpetna-vazba__akce { flex: 1 1 100%; }
}

@media print {
  .drobecky,
  .poznamka-ai,
  .zpetna-vazba { display: none; }

  .kroky .krok { break-inside: avoid; }
}

/* Dotyková zařízení — cílové plochy nejméně 44 × 44 px
   (vyhláška č. 99/2023 Sb. / EN 301 549). */
@media (pointer: coarse) {
  .krok__akce,
  .zpetna-vazba__nahlasit,
  .odkazy-seznam__odkaz,
  .formulare-seznam .zdroj { min-height: 44px; }
}