@charset "UTF-8";
/* =========================================================================
   petrkopecky.cz – směr „Aula“
   Jeden stylopis pro celý web. Bez frameworku, bez sestavovacího kroku.
   ========================================================================= */

/* ---------- 1. Písma (vlastní hosting, žádné CDN) ------------------------ */

@font-face {
  font-family: 'Faustina';
  src: url('../fonts/faustina-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Faustina';
  src: url('../fonts/faustina-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/publicsans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/publicsans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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+2212, U+FEFF, U+FFFD;
}

/* Záložní písma s upravenými metrikami – omezuje posun textu při načtení. */
@font-face {
  font-family: 'Faustina Fallback';
  src: local('Georgia'), local('Times New Roman'), local('serif');
  ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; size-adjust: 100%;
}
@font-face {
  font-family: 'Public Sans Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  ascent-override: 95%; descent-override: 24%; line-gap-override: 0%; size-adjust: 100%;
}

/* ---------- 2. Tokeny ---------------------------------------------------- */

:root {
  /* podklad */
  --paper:       #FFFDF8;
  --cream:       #F7F4ED;
  /* inkoust */
  --ink:         #14243D;
  --navy:        #1B3557;
  --navy-deep:   #0E1D33;
  --muted:       #586A80;
  --on-dark:     #9FB0C4;
  --on-dark-dim: #6E8098;
  --rule-dark:   #2A3F5C;
  /* akcent */
  --gold-ink:    #8F6311;   /* na krémovém podkladu – 4,83:1 */
  --gold-deep:   #6E4B0C;
  --gold-accent: #E8B44C;   /* pouze na tmavě modré – 8,91:1 */
  /* struktura */
  --rule:        #D9D3C6;
  --rule-soft:   #E4DFD3;

  /* hřbetní lišta */
  --spine: linear-gradient(90deg,
    #194E93 0 12%, #278BD2 12% 26%, #81C8BE 26% 36%, #CBDA58 36% 48%,
    #E4AC45 48% 64%, #D08A5F 64% 76%, #D2594D 76% 90%, #3D2E7E 90% 100%);

  /* písma */
  --serif: 'Faustina', 'Faustina Fallback', Georgia, 'Times New Roman', serif;
  --sans:  'Public Sans', 'Public Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* velikostní stupnice */
  --step--2: clamp(0.79rem, 0.77rem + 0.10vw, 0.84rem);
  --step--1: clamp(0.90rem, 0.87rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1.06rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1:  clamp(1.20rem, 1.14rem + 0.30vw, 1.35rem);
  --step-2:  clamp(1.40rem, 1.30rem + 0.50vw, 1.65rem);
  --step-3:  clamp(1.65rem, 1.45rem + 1.00vw, 2.10rem);
  --step-4:  clamp(2.00rem, 1.60rem + 2.00vw, 2.90rem);
  --step-5:  clamp(2.25rem, 1.70rem + 2.60vw, 3.75rem);

  /* rozestupy – 8px základ, 32px vertikální rytmus */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4rem;   --sp-8: 6rem;

  --header-h: 64px;
  --measure: 33rem;      /* ≈ 65 českých znaků ve Faustině */
  --shell: 72rem;
}

/* ---------- 3. Základ ---------------------------------------------------- */

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

html {
  scroll-padding-top: calc(var(--header-h) + 1rem);   /* WCAG 2.4.11 */
  -webkit-text-size-adjust: 100%;
}

/* Velké monitory. Celá stupnice písma končí na stropu clamp(), takže na 2560px
   je text stejně velký jako na 1280px, jen se ztrácí v ploše. Zvětšujeme proto
   základ: protože je stylopis v rem, rostou s písmem i rozestupy a šířky, takže
   se mění velikost, ne proporce, a délka řádku zůstává stejná.
   Jednotka rem se v media query vztahuje vždy k výchozím 16 px, ne k hodnotě
   nastavené níže, takže tu nevzniká smyčka. */
@media (min-width: 100rem) { :root { font-size: 112.5%; } }   /* 18 px od 1600 px */
@media (min-width: 140rem) { :root { font-size: 125%; } }     /* 20 px od 2240 px */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 2rem;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 700;
  text-wrap: balance;
  hyphens: manual;
  margin: 0;
}
h1 { font-size: var(--step-4); line-height: 1.08; }
h2 { font-size: var(--step-3); line-height: 1.16; }
h3 { font-size: var(--step-2); line-height: 1.3; }

p { margin: 0 0 1.25rem; text-wrap: pretty; }

/* Nadpisy mají margin: 0, takže úvodní odstavec se lepil těsně pod titulek
   stránky. Přidáváme mezeru mezi nadpis a text, který na něj navazuje.
   Vynecháváme .lede: ten má vlastní větší stupeň písma i rytmus. */
.section > h1 + p:not(.lede) { margin-top: var(--sp-5); }
p:last-child { margin-bottom: 0; }

/* Čeština má dlouhá slova – dělení je nutnost, ne ozdoba. */
:where([lang="cs"], [lang="sk"]) p,
:where([lang="cs"], [lang="sk"]) li {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}

strong, b { font-weight: 600; }
em { font-style: italic; }

a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 1px;
}
.is-dark :focus-visible { outline-color: var(--gold-accent); }

::selection { background: var(--gold-accent); color: var(--navy-deep); }

/* ---------- 4. Pomocné třídy -------------------------------------------- */

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.prose { max-width: var(--measure); }
.sans  { font-family: var(--sans); }

.kicker {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;   /* nikdy verzálky přímo v textu */
  color: var(--gold-ink);
  margin: 0 0 var(--sp-4);
}
.lede { font-size: var(--step-1); line-height: 1.6; color: var(--muted); }
.meta { font-family: var(--sans); font-size: var(--step--1); color: var(--muted); line-height: 1.5; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; top: 0; left: 0; z-index: 100;
  transform: translateY(-120%);
  background: var(--navy-deep); color: var(--paper);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
}
.skip:focus { transform: translateY(0); color: var(--paper); }

/* hřbetní lišta */
.rail { height: 3px; background: var(--spine); }
.rail--track { background: var(--rule-soft); position: relative; }
.rail--track > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: calc(var(--p, 0) * 100%);
  background: var(--spine);
}

/* ---------- 5. Hlavička -------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  max-width: var(--shell); margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  min-height: var(--header-h);
}
.wordmark {
  font-family: var(--sans); font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.14em; color: var(--navy);
  text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--navy); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); }
.nav a {
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  padding: 0.75rem 0.125rem;          /* cíl ≥24px, SC 2.5.8 */
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold-ink); }

.lang {
  display: flex; align-items: center; gap: 0.5rem;
  padding-left: 1.25rem; border-left: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.875rem;
}
.lang a { color: var(--muted); text-decoration: none; padding: 0.75rem 0.125rem; }
.lang a:hover { color: var(--navy); }
.lang [aria-current="true"] { color: var(--navy); font-weight: 700; }
.lang span[aria-hidden] { color: var(--rule); }

/* Nejužší displeje (320 px). Wordmark, tlačítko menu a přepínač jazyků se
   do řádku nevešly a hlavička přetékala o 38 px, takže se celá stránka
   posouvala do strany (WCAG 1.4.10 vyžaduje zalomení bez vodorovného
   posuvníku právě při 320 px). Popisek tlačítka proto zůstává jen pro čtečky
   obrazovky – ikona nese význam vizuálně – a zmenšujeme mezery a odsazení. */
@media (max-width: 23.5rem) {
  .site-header__bar { gap: var(--sp-2); padding-inline: var(--sp-2); }
  .nav-toggle__label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
}

.nav-toggle { display: none; }

/* ---------- 6. Sekce ----------------------------------------------------- */

.section { padding-block: clamp(3rem, 7vw, var(--sp-8)); }
.section--paper { background: var(--paper); border-block: 1px solid var(--rule); }
.section--dark  { background: var(--dark-bg, var(--navy-deep)); color: var(--cream); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark .kicker { color: var(--gold-accent); }
.section--dark a { color: var(--gold-accent); }


/* ---------- 7. Hero ------------------------------------------------------ */

.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: grid;
  /* Výška sekce se řídí textem, šířku fotografie z ní dopočítá poměr 22/25.
     Na některých šířkách tak snímek o pár pixelů přeteče svůj sloupec a
     posouval celou stránku do strany. Ořízneme ho v sekci; je to full-bleed
     banner, pár pixelů navíc není vidět. */
  overflow: clip;
}
/* Sloupec s fotografií má strop v rem, ne jen v procentech. Snímek je na výšku
   (4:5), takže s šířkou sloupce roste i jeho přirozená výška: při 45 % okna
   přerostl výšku sekce a object-fit: cover ho ořezával (na 2560 px bylo vidět
   jen 49 % fotografie). Při stropu 40 rem má snímek přirozenou výšku 50 rem,
   což přesně odpovídá stropu sekce, a neořezává se vůbec. */
@media (min-width: 56.25rem) {
  .hero { grid-template-columns: 1fr min(42%, 44rem); align-items: stretch; }
}
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.25rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3rem);
  max-width: 41.25rem; width: 100%;
  /* Vycentrovat ve sloupci. Dřívější margin-left: auto tlačil text k pravému
     okraji, takže na širokých monitorech vlevo zůstávalo prázdné místo. */
  margin-inline: auto;
}
.hero__name { font-size: var(--step-5); margin-bottom: 0.5rem; }
.hero__term { font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; color: var(--muted); }
/* Slogan i věta pod ním jsou velké výpravné písmo. Automatické dělení slov,
   které web zapíná pro české odstavce, tu lámalo „respektovanou“ na
   „respekt-ovanou“ a „především“ na „předev-ším“. U tak velkého písma je to
   nápadné, proto se v úvodní sekci nedělí. */
.hero__lede, .hero__note { hyphens: manual; -webkit-hyphens: manual; }
.hero__lede {
  font-size: var(--step-2); line-height: 1.5; color: var(--ink);
  margin: var(--sp-5) 0 var(--sp-4);
}
/* Lidská věta pod sloganem: menší a tlumenější než citát nad ní, aby zůstal
   slogan dominantou úvodu. */
.hero__note {
  font-size: var(--step-0); line-height: 1.55; color: var(--muted);
  margin: 0 0 var(--sp-6); max-width: 34rem;
}
.hero__figure { margin: 0; background: var(--rule-soft); }
.hero__figure img { width: 100%; height: auto; object-fit: cover; object-position: 50% 12%; }

/* Mobil: fotografie nad textem (vizuálně), v kódu zůstává h1 první.
   Obrázek si drží vlastní poměr 4:5 – žádné roztažení. */
@media (max-width: 56.1875rem) {
  .hero__figure { grid-row: 1; }
}
@media (min-width: 56.25rem) {
  .hero__figure { min-height: 35rem; }
  .hero__figure img { height: 100%; }
}

/* Velké monitory. Bez omezení roste sloupec s fotografií donekonečna, a protože
   je snímek na výšku (4:5), roste s ním i výška celé úvodní části: na okně
   2560 px měřila 1441 px a nadpis s fotografií nebylo vidět najednou.
   Strop je proto jen na výšku, sekce zůstává přes celou šířku okna;
   object-fit: cover zbytek fotografie ořízne. */
@media (min-width: 75rem) {
  /* Výška sekce se odvíjí od okna, šířka fotografie se pak dopočítá z ní:
     figure má poměr 4:5 a sloupec je auto, takže snímek nikdy nepřeroste
     výšku sekce a neořezává se. Dřív to bylo naopak (šířka ze procent,
     výška zastropovaná) a na širokých monitorech se fotografie ořezávala. */
  .hero {
    /* 90vh nepočítalo s lepící hlavičkou, na nízkých oknech proto sekce
       o pár pixelů přetekla. Odečítáme výšku hlavičky a 2rem, aby pod
       sekcí vždy vykukoval kousek další sekce. */
    block-size: min(75rem, calc(100vh - var(--header-h) - 2rem));
    /* Na nízkých oknech potřebuje textový sloupec víc místa, než kolik by
       výška okna dovolila. Bez tohoto minima sekce přetekla a fotografie
       zasahovala do další sekce. Raději o kus vyšší úvod než ořezaný text. */
    min-block-size: max-content;
    grid-template-columns: 1fr auto;
  }
  /* block-size: 100% váže výšku na řádek mřížky; šířku pak dopočítá poměr.
     Bez toho si figure na nízkých oknech držel vlastní výšku a přetékal. */
  /* Rám je o 10 % širší než poměr snímku (4:5 = 0,80 -> 22:25 = 0,88), takže
     fotografie zabírá víc místa a sahá dál doleva.
     Postava stojí v snímku asi na 42 % šířky, tedy nalevo od středu. Aby byla
     uprostřed viditelné části, je snímek širší než rám a přečnívající pravý
     okraj se ořízne: vidíme levých 84 %, čímž se postava dostane na 50 %.
     Daň je svislý ořez, object-position ho drží u spodního okraje. */
  .hero__figure { aspect-ratio: 22 / 25; block-size: 100%; min-height: 0;
                  position: relative; overflow: hidden; }
  .hero__figure img {
    position: absolute; top: 0; bottom: 0; left: 0;
    /* max-width: 100% z globálního pravidla pro img by šířku zase srazilo. */
    width: 119%; max-width: none; height: 100%;
  }
}

/* Čtyři odkazy v hero bloku. Při prostém zalomení zbyl poslední sám
   na druhém řádku a blok působil nedopatřením. Mřížka je srovná do dvojic
   stejné šířky, na úzkém displeji pod sebe. */
.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  max-inline-size: 24rem;
}
.actions .btn { text-align: center; }
@media (max-width: 30rem) { .actions { grid-template-columns: 1fr; } }
/* Na monitoru se šest odkazů vejde do tří sloupců, tedy dvou řádků. */
@media (min-width: 75rem) {
  .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); max-inline-size: 37rem; }
}
.btn {
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; padding: 0.875rem 1.5rem;
  border: 1px solid var(--navy); display: inline-block;
}
.btn--primary { background: var(--navy); color: var(--paper); }
.btn--primary:hover { background: var(--navy-deep); color: var(--paper); }
.btn--ghost { color: var(--navy); background: transparent; }
.btn--ghost:hover { background: var(--navy); color: var(--paper); }

/* ---------- 7b. Hlavička stránky s fotografií ---------------------------- */

/* Text vlevo, kruhová fotografie vpravo. Proti úvodní stránce je záměrně nízká:
   snímek má pevnou velikost v rem, takže výška sekce neroste s šířkou okna. */
.page-head { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 48rem) {
  .page-head { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); }
}
.page-head__photo {
  inline-size: clamp(15rem, 38vw, 30rem); block-size: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  justify-self: center;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
}
/* Mobil: fotografie nad textem, stejně jako na úvodní stránce, a přes celou
   šířku obsahu. Bez toho se uplatnila spodní mez clamp() — 15rem, tedy 240 px
   na 375px displeji — a po stranách zbývalo 95 px prázdna. Šířku drží
   obsahový pruh, takže boční okraj zůstává stejný jako u textu a jako
   u fotografií v rozhovoru (.interview-photo img). */
@media (max-width: 47.9375rem) {
  .page-head__photo { grid-row: 1; inline-size: 100%; }
}

/* ---------- 7c. Fotografie v rozhovoru ----------------------------------- */

/* Bylo v <style> přímo v rozhovor.html, jenže CSP webu má style-src 'self',
   takže prohlížeč inline styl na ostrém webu zahodil a fotografie se
   zobrazovaly nezformátované. Odsud se načte normálně. */
/* Fotografie vložené do rozhovoru. Výřezy v assets/img/, originály ve složce ./fotky/. */
.interview-photo {
  margin: clamp(2rem, 5vw, 4rem) 0;
}
.interview-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.interview-photo figcaption {
  margin-top: .65rem;
  font-size: .875rem;
  line-height: 1.45;
  opacity: .68;
}

/* Fotografie na výšku. Přes celou šířku sloupce by byla nepřiměřeně vysoká
   — zabrala by víc než obrazovku a rozbila čtení. Drží se proto na šířce,
   při které je vysoká zhruba jako fotografie na šířku, a stojí na střed.
   Popisek se zarovná pod ni, ne pod celý sloupec. */
.interview-photo--portret img { max-inline-size: 24rem; margin-inline: auto; }
.interview-photo--portret figcaption { max-inline-size: 24rem; margin-inline: auto; }
.interview-photo--portrait {
  width: min(62%, 34rem);
  margin-right: auto;
}
@media (max-width: 720px) {
  .interview-photo--portrait {
    width: 100%;
  }
}

/* ---------- 7d. Vytažené citace v rozhovoru ----------------------------- */

/* Vytažené citace na okraji rozhovoru. Opakují pasáže, které jsou ve zdrojovém
   dokumentu zvýrazněné tučně. Čtení nepřeruší: na širokých oknech stojí vedle
   textu, na užších se zařadí do sloupce jako odsazená poznámka. */
.pq-b {
  margin: var(--sp-4) 0; padding-left: var(--sp-3);
  border-left: 3px solid var(--gold-ink);
  font-family: var(--sans); font-size: var(--step--1); line-height: 1.5;
  color: var(--muted);
}
.pq-b p { margin: 0; }
@media (min-width: 82rem) {
  /* clear: right, aby dvě citace za sebou nespadly na sebe. */
  .pq-b { float: right; clear: right; width: 14rem; margin: 0.4rem -16rem 1.5rem var(--sp-5); }
}

/* ---------- 8. Poznámka o stránkách ------------------------------------- */

.note {
  border-left: 3px solid var(--rule);
  padding-left: var(--sp-4);
  max-width: 42.5rem;
}
.note p { font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* ---------- 9. Čísla ----------------------------------------------------- */

.figures { display: grid; gap: var(--sp-4) var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 34rem) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .figures { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.figure { border-top: 2px solid var(--navy); padding-top: var(--sp-2); }
.figure--open { border-top-color: var(--gold-ink); }
.figure__n {
  font-size: var(--step-3); font-weight: 700; color: var(--navy);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.figure--open .figure__n { color: var(--gold-ink); }
.figure__label {
  font-family: var(--sans); font-size: 0.875rem; line-height: 1.5;
  color: var(--muted); margin-top: 0.625rem;
}
.figure__label em { font-style: normal; color: var(--gold-ink); }

/* Čísla na tmavém podkladu. Navy linky i tmavá zlatá #8F6311 by na šedi
   zanikly, proto světlé varianty. */
.section--dark .figure { border-top-color: var(--cream); }
.section--dark .figure__n { color: var(--paper); }
.section--dark .figure__label { color: var(--on-dark); }
.section--dark .figure--open { border-top-color: var(--gold-accent); }
.section--dark .figure--open .figure__n { color: var(--gold-accent); }
.section--dark .figure__label em { color: var(--gold-accent); }
.section--dark .meta { color: var(--on-dark); }

/* ---------- 10. Seznam závazků ------------------------------------------ */

.commitments { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.commitments > li {
  display: grid; gap: 0.375rem var(--sp-4);
  grid-template-columns: 2.75rem minmax(0, 1fr);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.commitments__n {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  color: var(--gold-ink); font-variant-numeric: tabular-nums; padding-top: 0.35rem;
}
.commitments h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.commitments p { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.55; color: var(--muted); margin: 0.375rem 0 0; }

/* ---------- 11. Citace na úvodní straně --------------------------------- */

.quotes { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
@media (min-width: 48rem) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quote-card { display: flex; flex-direction: column; gap: var(--sp-3); border-top: 2px solid var(--rule); padding-top: var(--sp-3); }
.quote-card blockquote { margin: 0; font-size: var(--step-1); line-height: 1.55; flex-grow: 1; }
.quote-card cite {
  font-style: normal;
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.75rem; align-items: center;
}
.quote-card .avatar { inline-size: 3.25rem; block-size: 3.25rem; font-size: 1rem; }
.quote-card__name { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--navy); display: block; }
.quote-card__role { font-family: var(--sans); font-size: 0.75rem; line-height: 1.45; color: var(--muted); display: block; margin-top: 0.1875rem; }

.more {
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600;
  color: var(--gold-ink); text-decoration: none;
  border-bottom: 1px solid var(--gold-ink); padding-bottom: 2px;
  display: inline-block; margin-top: var(--sp-5);
}

/* ---------- 11b. Rozhovor ------------------------------------------------ */

.interview { display: grid; gap: var(--sp-5); padding-bottom: var(--sp-8); }
@media (min-width: 62rem) {
  .interview { grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
}
@media (min-width: 78rem) {
  .interview { grid-template-columns: 12.5rem minmax(0, 1fr) 11rem; }
}

.chapters ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.chapters li {
  display: grid; grid-template-columns: 3px minmax(0, 1fr);
  gap: 0.875rem; padding-block: 0.375rem;
}
.chapters li::before {
  content: ""; background: var(--rule); opacity: 0.35; min-height: 1.25rem;
}
.chapters li[data-current="true"]::before { opacity: 1; }
.chapters li:nth-child(1)::before { background: #194E93; }
.chapters li:nth-child(2)::before { background: #278BD2; }
.chapters li:nth-child(3)::before { background: #81C8BE; }
.chapters li:nth-child(4)::before { background: #CBDA58; }
.chapters li:nth-child(5)::before { background: #E4AC45; }
.chapters li:nth-child(6)::before { background: #D08A5F; }
.chapters li:nth-child(7)::before { background: #D2594D; }
.chapters a {
  font-family: var(--sans); font-size: 0.8125rem; line-height: 1.4;
  color: var(--muted); text-decoration: none; padding-block: 0.25rem;
}
.chapters a:hover { color: var(--navy); }
.chapters li[data-current="true"] a { color: var(--navy); font-weight: 600; }

@media (min-width: 62rem) {
  /* padding-top srovná první položku navigace s prvním nadpisem kapitoly
     – .chapter má stejné odsazení shora. */
  .chapters { position: sticky; top: calc(var(--header-h) + 2.5rem); padding-top: var(--sp-5); }
}

.interview__body { max-width: var(--measure); }

.chapter { padding-top: var(--sp-5); }
.chapter + .chapter { border-top: 1px solid var(--rule); margin-top: var(--sp-6); }
.chapter > h2 { margin-bottom: var(--sp-5); }

.qa { margin-bottom: var(--sp-6); }
.qa h3 {
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.45; font-weight: 600;
  color: var(--gold-ink);
  padding-left: 1.25rem; border-left: 3px solid var(--gold-accent);
  margin-bottom: var(--sp-3);
}

/* ---------- Navrhovatelé ------------------------------------------------ */

/* Fakultu nese v dokumentu barva čtverečku a tyhle barvy se přebírají beze
   změny — přál si to pan Kopecký 15. 9. 2026. Dřív se převáděly na paletu
   hřbetů knih z úvodní fotografie; ta verze je v historii.
   Barva sama informaci nenese — u každého jména je fakulta i ve skrytém
   textu pro čtečky obrazovky, takže na rozlišení odstínů nic nezávisí.
   Vypisuje je `node tools/make-navrhovatele.mjs` na konci běhu. */
[data-fakulta="FF"]    { --fakulta: #7030A0; }
[data-fakulta="FSS"]   { --fakulta: #FFD966; }
[data-fakulta="FU"]    { --fakulta: #E06666; }
[data-fakulta="LF"]    { --fakulta: #4472C4; }
[data-fakulta="PdF"]   { --fakulta: #ED7D31; }
[data-fakulta="PřF"]   { --fakulta: #70AD47; }
[data-fakulta="ÚVAFM"] { --fakulta: #BFBFBF; }

.navrh { padding-bottom: var(--sp-8); }

/* Hlavička bez perexu i fotografie je jen dva řádky vysoká. Plná spodní
   mezera sekce by pod ní nechala prázdné pásmo, proto se zkracuje. */
.page-head--strohy { padding-bottom: var(--sp-4); }

.navrh-legenda {
  list-style: none; margin: 0 0 var(--sp-5); padding: 0 0 var(--sp-4);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 0.8125rem; color: var(--muted);
}
.navrh-legenda li { display: flex; align-items: center; gap: 0.4375rem; }
/* Čtverečky jsou schválně bez obrysu: barvy jsou fakultní podle manuálu
   univerzity a mají stát samy za sebe (pokyn klientky 15. 9. 2026).
   Světlejší z nich — FSS a ÚVAFM — jsou proti krémovému pozadí jemné,
   ale informaci to neubírá: fakulta je u každého jména i ve skrytém textu
   pro čtečky obrazovky a v legendě je vypsaná zkratkou. */
.navrh-legenda li::before {
  content: ""; inline-size: 0.625rem; block-size: 0.625rem;
  background: var(--fakulta); border-radius: 2px; flex: none;
}

/* Dvaapadesát jmen ve sloupcích — na jeden dlouhý sloupec je jich moc
   a rozdělením se zkrátí stránka na třetinu. */
.navrh-list {
  list-style: none; margin: 0; padding: 0;
  columns: 3 17rem; column-gap: var(--sp-5);
}
.navrh-list li {
  break-inside: avoid;
  display: flex; align-items: baseline; gap: 0.625rem;
  padding-block: 0.4375rem;
  font-size: 1rem; line-height: 1.4;
}
.navrh-list li::before {
  content: ""; inline-size: 0.5rem; block-size: 0.5rem;
  background: var(--fakulta); border-radius: 2px;
  flex: none; transform: translateY(-0.05em);
}

/* ---------- Mediální výstupy -------------------------------------------- */

.media { padding-bottom: var(--sp-8); }
.media-group + .media-group { margin-top: var(--sp-7); }
.media-group > h2 { margin-bottom: var(--sp-4); }

/* Soupis je tabulkový, ale ne tabulka — na širším displeji tři sloupce
   (zdroj, titulek, datum), na úzkém pod sebou. Vodorovné linky drží dlouhý
   seznam pohromadě, aby oko nesklouzlo na sousední řádek. */
.media-list { list-style: none; margin: 0; padding: 0; max-width: 58rem; }
.media-list > li { border-top: 1px solid var(--rule); }
.media-list > li:last-child { border-bottom: 1px solid var(--rule); }

.media-list a,
.media-list > li > div {
  display: grid; gap: 0.1875rem 1.5rem;
  padding-block: 0.875rem;
  text-decoration: none; color: inherit;
}
@media (min-width: 46rem) {
  .media-list a,
  .media-list > li > div {
    grid-template-columns: 13rem minmax(0, 1fr) auto;
    align-items: baseline; gap: 0 1.5rem;
  }
}

.media-item__zdroj {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  line-height: 1.5; color: var(--gold-ink);
}
.media-item__titulek {
  font-size: 1.0625rem; line-height: 1.4; color: var(--ink); text-wrap: pretty;
}
.media-item__datum {
  font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Odkaz nepodtrháváme v klidu — na třiceti řádcích by to bylo nečitelné.
   Podtržení se objeví až při najetí a zaostření, kde nese informaci. */
.media-list a:hover .media-item__titulek,
.media-list a:focus-visible .media-item__titulek {
  color: var(--navy); text-decoration: underline; text-underline-offset: 0.16em;
}
.media-list a:hover { background: var(--cream); }

/* ---------- Program ----------------------------------------------------- */

/* Nadpisy mají vyvažování řádků (text-wrap: balance), které u krátkých
   funguje dobře. Nadpis programu je ale dlouhý a vedle fotografie z něj
   vyvažování dělá tři kratší řádky místo dvou plných. Tady se proto vypíná.
   Pomlčka je v textu přivázaná nezlomitelnou mezerou, takže jí řádek
   nikdy nezačne.
   Nadpis navíc dostane celou šířku textového sloupce vedle fotografie;
   ve 33rem sazby by se lámal na tři řádky i s vypnutým vyvažováním.
   Štítek a podtitul v běžné šířce zůstávají, ty se mají dobře číst. */
.page-head--program .prose { max-width: none; }
.page-head--program h1 { text-wrap: pretty; }
.page-head--program .kicker,
.page-head--program .lede { max-width: var(--measure); }

/* Fotografie je tu o něco užší než na ostatních stránkách. Při plné šířce
   zbývá nadpisu přesně 528 px, ale jeho druhý řádek potřebuje 541 — chybělo
   by třináct pixelů a nadpis by se lámal na tři řádky. */
@media (min-width: 48rem) {
  .page-head--program .page-head__photo { inline-size: clamp(15rem, 32vw, 26rem); }
}

/* Seznam konkrétních závazků. Každá položka je věta, jejíž tučný začátek
   nese název závazku — proto se nesází jako běžná odrážka s puntíkem,
   ale s krátkou barevnou značkou, která drží svislou linku odstavce.
   Barva se mění po kapitolách podle stejné palety jako navigace vlevo,
   takže je na první pohled poznat, ve které části programu čtenář je. */
.program-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.program-list > li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: 0.8125rem;
  text-wrap: pretty;
}
.program-list > li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  inline-size: 0.5rem; block-size: 0.125rem;
  background: var(--znacka, var(--gold-ink));
}
.program-list > li:last-child { margin-bottom: 0; }
.program-list strong { font-weight: 600; color: var(--navy); }

.chapter:nth-of-type(1) { --znacka: #194E93; }
.chapter:nth-of-type(2) { --znacka: #278BD2; }
.chapter:nth-of-type(3) { --znacka: #81C8BE; }
.chapter:nth-of-type(4) { --znacka: #CBDA58; }
.chapter:nth-of-type(5) { --znacka: #E4AC45; }
.chapter:nth-of-type(6) { --znacka: #D08A5F; }

/* Odstavec s tučným úvodem uvozuje blok; mírný odstup ho oddělí od seznamu. */
.program-list + p { margin-top: var(--sp-4); }

/* Úvodní věta programu je v dokumentu celá tučná. Odstavec vysázený celý
   tučně je na obrazovce těžký, proto se důraz nese velikostí a barvou. */
.program-uvod {
  font-size: var(--step-1); line-height: 1.5;
  color: var(--navy); font-weight: 600;
}

.pull {
  margin: 0 0 var(--sp-6); padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid transparent;
  border-image: var(--spine) 1;
}
.pull p {
  font-size: var(--step-2); line-height: 1.42; font-weight: 600;
  color: var(--navy); margin: 0;
}

/* Zástupný odkaz – URL zatím nedodáno. Viditelně označeno, ať se nezapomene. */
.todo-link {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  color: var(--gold-ink); text-decoration: none;
  border: 1px dashed var(--gold-ink); border-radius: 2px;
  padding: 0.05rem 0.4rem; margin-left: 0.35rem;
  white-space: nowrap;
}
.todo-link::before { content: "↗ "; }

/* ---------- 11c. Řekli o mně -------------------------------------------- */

/* barvy skupin – vytaženo z hřbetní lišty */
.g1 { --group: #194E93; }
.g2 { --group: #E4AC45; }
.g3 { --group: #81C8BE; }
.g4 { --group: #D08A5F; }
.g5 { --group: #D2594D; }

.groups-nav ul {
  list-style: none; margin: 0; padding: var(--sp-4) 0 0;
  display: flex; flex-wrap: wrap; gap: 0.625rem;
  border-top: 1px solid var(--rule);
}
.groups-nav a {
  display: inline-flex; align-items: center; gap: 0.5625rem;
  border: 1px solid var(--rule); background: var(--paper);
  padding: 0.5625rem 0.9375rem;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500;
  color: var(--navy); text-decoration: none;
}
.groups-nav a:hover { border-color: var(--navy); color: var(--navy); }
.groups-nav a::before {
  content: ""; width: 9px; height: 9px; flex: none; background: var(--group);
}
.groups-nav b { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

.group__title { display: flex; align-items: baseline; gap: 0.875rem; margin-bottom: var(--sp-5); }
.group__title span { width: 1.75rem; height: 3px; flex: none; background: var(--group); }

/* Dvě sousedící skupiny sčítají spodní a horní padding sekce (2× 6 rem),
   mezi poslední kartou a dalším nadpisem tak vzniká zbytečně velká mezera.
   Horní padding navazující skupiny proto rušíme, zůstane jedna mezera.
   Výjimkou je sekce s vlastním podkladem (--paper): tam padding drží pruh
   od nadpisu, bez něj by se barevné pozadí dotýkalo textu. */
.group + .group:not(.section--paper) { padding-block-start: 0; }

/* Úvodní sekce nad přehledem skupin: plný spodní padding sekce (až 120 px)
   odtrhával text od tlačítek, která k němu patří. Poloviční mezera je drží
   pohromadě. Platí jen tam, kde po sekci rovnou následuje přehled skupin. */
.section:has(+ .groups-nav) { padding-block-end: clamp(1.5rem, 3.5vw, 3rem); }
/* A stejně tak nad první skupinou pod přehledem: sekce si jinak bere plný
   horní padding a tlačítka zůstala viset uprostřed prázdna. */
.groups-nav + .group { padding-block-start: clamp(1.5rem, 3.5vw, 3rem); }

/* Totéž tam, kde přehled skupin není a úvodní sekce sousedí rovnou s kartami
   (Hlasy studujících): dva plné paddingy vedle sebe daly 192 px mezery.
   Vyloučení .group je podstatné, sekce s kartami mají třídu section také,
   a bez něj by se pravidlo pustilo i do mezer mezi skupinami na Řekli o mně. */
.section:not(.group):has(+ .group) { padding-block-end: clamp(1.5rem, 3.5vw, 3rem); }
.section:not(.group) + .group { padding-block-start: clamp(1.5rem, 3.5vw, 3rem); }

/* Sbalené karty v řádku mají stejnou výšku: ukázka je oříznutá na pět řádků,
   ale hlavička se liší (delší jméno se zalomí na dva řádky, funkce až na tři),
   takže se karty lišily až o 44 px. Výchozí align-items: stretch je proto
   ponecháno a karty se dorovnají na nejvyšší v řádku.
   Jakmile se ale některé vyjádření rozbalí, řádek povyroste a natáhl by
   i sousední karty, uvnitř kterých by zůstalo přes 500 px prázdna. V tu chvíli
   se přepneme na start a každá karta si drží vlastní výšku. */
/* grid-auto-rows: 1fr srovná výšku všech řádků, ne jen sousedů v jednom.
   Bez toho vypadá mřížka jednotně jen náhodou, podle počtu karet:
   při 8 kartách ve 3 sloupcích vyšly řádky shodně, po přidání dvou už ne. */
.cards { display: grid; column-gap: var(--sp-4); row-gap: var(--sp-3); grid-auto-rows: 1fr; }
.cards:has(details[open]) { grid-auto-rows: auto; align-items: start; }
@media (min-width: 48rem)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); row-gap: var(--sp-3); } }
@media (min-width: 75rem)  { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--paper);
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--group);
  padding: 1.25rem 1.75rem;
}
.section--paper .card { background: var(--cream); }
/* hlavička karty: kolečko s fotografií + jméno a funkce */
.card__head {
  display: grid; grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0.875rem; align-items: start;
  margin-bottom: 1.125rem;
}
.card h3 { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--navy); line-height: 1.35; }
/* .card p je specifičtější než holá .card__role – proto dvě třídy,
   jinak popis funkce zdědí velikost běžného odstavce (17 px). */
.card .card__role {
  font-family: var(--sans); font-size: 0.75rem; line-height: 1.45;
  color: var(--muted); margin: 0.1875rem 0 0;
}

/* Kolečko: 48 px fotografie, prstenec v barvě skupiny.
   Prstenec je dekorace – nese ho i barevný proužek nad kartou,
   takže informace nezávisí pouze na barvě (WCAG 1.4.1). */
.avatar {
  inline-size: 3.75rem; block-size: 3.75rem; border-radius: 50%;
  object-fit: cover; display: block;
  background: var(--rule-soft);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--group);
}
.section--paper .avatar { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3.5px var(--group); }

/* Náhrada, když fotografie chybí: iniciály na tmavě modrém podkladu.
   Barva skupiny zůstává v prstenci. Podklad je záměrně jednotný, ne
   skupinový – bílý text na terakotové (2,78:1) a na červené (3,98:1)
   nesplňuje 4,5:1. Na navy má 11,3:1. */
.avatar--initials {
  display: grid; place-items: center;
  background: var(--navy); color: var(--paper);
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.02em; user-select: none;
}

@media (forced-colors: active) {
  .avatar { box-shadow: none; border: 2px solid CanvasText; }
  .avatar--initials { background: Canvas; color: CanvasText; }
}
.card p { font-size: 1.0625rem; line-height: 1.62; }

/* Ukázka má pevných 5 řádků – díky tomu tvoří karty pravidelnou mřížku
   i před rozbalením. Po rozbalení se omezení zruší. */
.card > p {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; line-clamp: 5;
  overflow: hidden;
  min-height: calc(5 * 1.62em);
}
.card:has(> details[open]) > p {
  -webkit-line-clamp: unset; line-clamp: unset;
  overflow: visible; min-height: 0;
}

/* Výpustka na konci zkráceného textu – naznačuje, že vyjádření pokračuje.
   Zobrazí se jen u karty se sbaleným <details>; po rozbalení sama zmizí,
   takže uprostřed souvislého textu nikdy nezůstane.
   Je to čistě vizuální vodítko (::after), ne součást textu – čtečky
   obrazovky ji nečtou a při kopírování se nepřenese. Tlačítko
   „Číst celé vyjádření“ nese sdělení pro ně.
   Prohlížeče bez :has() ji neukážou; stav je pak stejný jako dosud. */
.card:has(> details:not([open])) > p:last-of-type::after {
  content: " …";
  color: var(--gold-ink);
  font-weight: 600;
}

/* Rozbalený text má na ukázku plynule navazovat, přepínač proto patří až
   pod něj. V HTML musí být <summary> první (vyžaduje to specifikace),
   vizuální pořadí tedy řeší flex order. */
.card details { display: flex; flex-direction: column; margin-top: auto; padding-top: 0.875rem; }
.card details > summary { order: 1; }
/* Po rozbalení odsazení mizí, o rytmus se postarají spodní okraje odstavců. */
.card details[open] { padding-top: 0; }
.card details > summary {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  color: var(--gold-ink); cursor: pointer;
  border-top: 1px solid var(--rule); padding: 0.75rem 0 0.125rem;
  list-style: none;
}
.card details > summary::-webkit-details-marker { display: none; }
.card details > summary::after { content: " +"; font-variant-numeric: tabular-nums; }
.card details[open] > summary::after { content: " −"; }
.card details > summary:hover { color: var(--gold-deep); }
/* Odsazení odshora už není potřeba: dřív oddělovalo text od přepínače nad
   ním, teď navazuje na ukázku a stačí spodní okraj předchozího odstavce. */
.card details > p:last-child { margin-bottom: 0.875rem; }

/* ---------- 12. Patička -------------------------------------------------- */

.site-footer { background: var(--navy-deep); color: var(--cream); }
.site-footer__grid {
  display: grid; gap: var(--sp-5);
  padding-block: var(--sp-7) var(--sp-5);
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); } }
.site-footer h2 { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.14em; color: var(--paper); margin-bottom: 0.875rem; }
.site-footer p  { font-family: var(--sans); font-size: 0.875rem; line-height: 1.6; color: var(--on-dark); max-width: 20rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.875rem; line-height: 2.1; }
.site-footer a  { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer .is-email a { color: var(--gold-accent); }
/* Kredit u fotografií pod větou o povaze webu. Barvu záměrně needitujeme:
   tlumený odstín --on-dark-dim dává na tmavém podkladu kontrast jen 4,19,
   tedy pod hranicí WCAG AA. Odděluje ho proto mezera, ne světlejší šeď. */
.site-footer__credit { margin-top: var(--sp-3); }

.site-footer__legal { font-family: var(--sans); font-size: 0.8125rem; color: var(--on-dark-dim); padding-block: var(--sp-3) var(--sp-5); }

/* ---------- 13. Mobilní navigace ---------------------------------------- */

@media (max-width: 72rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: 1px solid var(--rule); color: var(--navy);
    font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
    padding: 0.5rem 0.75rem; cursor: pointer;
  }
  .nav-toggle svg { width: 18px; height: 18px; }

  .nav {
    display: none;
    position: absolute; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--sp-2) clamp(1.25rem, 4vw, 3rem) var(--sp-4);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: 0.875rem; border-bottom: 1px solid var(--rule-soft); font-size: 1rem; }
  .nav a[aria-current="page"] { border-bottom-color: var(--gold-ink); }
  .lang { border-left: 0; padding-left: 0; padding-top: var(--sp-3); }
}
@media (min-width: 72.0625rem) {
  .nav[data-open] { display: flex; }
}

/* ---------- 14. Tisk ----------------------------------------------------- */

@media print {
  :root { --paper: #fff; --cream: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .site-header, .nav, .lang, .nav-toggle, .rail, .skip, .more { display: none !important; }
  .section--dark { background: #fff !important; color: #000 !important; }
  .section--dark h2, .section--dark h3 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  p, blockquote, li { orphans: 3; widows: 3; }
  .hero { display: block; }
  .hero__figure { max-height: 9cm; overflow: hidden; }
}

/* ---------- 15. Přístupnost --------------------------------------------- */

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

@media (forced-colors: active) {
  .rail, .rail--track > i { background: Highlight; forced-color-adjust: none; }
  .btn { border: 1px solid ButtonText; }
  .nav a[aria-current="page"] { border-bottom-color: Highlight; }
}