@charset "UTF-8";

/* ==========================================================================
   Glow Academy — návrh přepracovaného webu
   Barvy vycházejí z palety, kterou měl původní web rozepsanou v CSS
   (rgba(122,162,169) a rgba(246,210,214)), ale nikdy ji nenasadil.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plex Sans';
  src: url('/assets/fonts/plex-sans.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Barvy */
  --petrol: #2e5a63;
  --petrol-dark: #1d3d44;
  --petrol-soft: #7aa2a9;
  --petrol-wash: #eef4f5;
  --petrol-line: #cfe0e2;

  --blush: #f6d2d6;
  --blush-wash: #fdf3f4;
  --rose: #a84f60;
  --rose-soft: #d99aa8;
  --rose-dark: #7f3a48;
  --rose-line: #eccdd4;

  /* Třetí odstín pro doplňkové kurzy. Teplý okr dělá s petrolejovou
     doplňkovou dvojici a od růžové se dobře odliší. Tmavší varianta,
     aby bílý text na štítku měl kontrast 5,6 : 1 — světlejší #9a7233
     má jen 4,35 a na hranici neprojde. */
  --okr: #856228;
  --okr-soft: #c9a86e;
  --okr-dark: #63491d;
  --okr-wash: #f7f2e8;
  --okr-line: #e2d5bb;

  --ink: #14201f;
  --ink-soft: #4a5c5e;
  --paper: #fcfcfb;
  --card: #ffffff;
  --line: #e3e8e8;

  /* Text na sytém barevném podkladu — tlačítko, štítek, chip. Ve světlém
     režimu bílá, v tmavém tmavá: pozadím je tam světlý akcent a bílá by
     na #8fc2cb dala 1,95 : 1. */
  --na-akcentu: #ffffff;

  /* Pozadí lišty ukázky. Vlastní proměnná proto, že jinde je pozadí
     odvozené z --ink, a to je jediné místo v celém stylopisu, kde by
     převrácení text zneviditelnilo. */
  --demobar-bg: var(--ink);

  /* --- tmavá sada -------------------------------------------------------

     Hodnoty pro tmavý režim. Jsou tady, ne v mapovacích pravidlech níž,
     aby každý hex existoval v souboru právě jednou — mapování se pak dá
     zopakovat pro media query i pro přepínač, aniž by se hodnoty mohly
     rozejít. Shodnost obou mapování hlídá check.js.

     Přiřazení je podle rolí, které proměnné ve stylopisu skutečně mají,
     ne podle názvu. Pozor na --tma-*-dark: ve světlém režimu je *-dark
     tmavší varianta akcentu pro tlačítko pod myší, v tmavém režimu musí
     být světlejší. Název v tmavém režimu lže; přejmenovat by znamenalo
     zásah do celého stylopisu kvůli kosmetice. */

  --tma-paper: #0f1a1b;
  --tma-card: #17262a;
  --tma-ink: #e6ecea;
  --tma-ink-soft: #a7b8b8;
  --tma-line: #344a4f;

  --tma-petrol: #8fc2cb;
  --tma-petrol-dark: #b3d7de;
  --tma-petrol-soft: #6f9ba4;
  --tma-petrol-wash: #16292e;
  --tma-petrol-line: #365257;

  --tma-okr: #d9b473;
  --tma-okr-dark: #e8cb9a;
  --tma-okr-soft: #ab8a4d;
  --tma-okr-wash: #231d11;
  --tma-okr-line: #4a3d26;

  --tma-rose: #e8a3b0;
  --tma-rose-dark: #f2c1c9;
  --tma-rose-soft: #b8818c;
  --tma-rose-wash: #291a1e;
  --tma-rose-line: #4e333a;

  --tma-blush: #e8a3b0;
  --tma-blush-wash: #291a1e;

  --tma-na-akcentu: #0f1a1b;
  --tma-demobar-bg: #1d3439;

  /* Povrch karty pod myší. Ve světlém režimu tuhle roli nese stín, který
     na tmavém podkladu není vidět. Všechny tři mají shodnou luminanci
     (odlepení od plochy 1,35–1,37x) i shodnou chroma 0,030 v OKLCH —
     kdyby se namíchaly z podkladu a barvy kategorie, okrová by působila
     výrazněji, protože okr je světlejší barva, a při téhle jemné
     intenzitě by navíc zkalila do zelenava. */
  --tma-karta-hover-petrol: #1d3439;
  --tma-karta-hover-okr: #3a2f20;
  --tma-karta-hover-rose: #402c2e;

  /* Typografie */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  /* Rytmus */
  --wrap: 1120px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 14px;
  --radius-sm: 9px;

  /* Maska „inkoustu“ pro razítka. Fraktální šum se přes feColorMatrix
     přelije do alfa kanálu, takže maska je místy průhlednější a barva
     razítka nevyjde všude stejně sytá — jako když se gumové razítko
     nedotkne papíru celou plochou. Prohlížeč bez podpory masek vykreslí
     razítko plnou barvou, což je pořád v pořádku. */
  --inkoust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='i' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.45 0 0 0 0.16'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23i)'/%3E%3C/svg%3E");

  --shadow-sm: 0 1px 2px rgba(20, 32, 31, .05), 0 2px 8px rgba(20, 32, 31, .04);
  --shadow-md: 0 2px 4px rgba(20, 32, 31, .05), 0 12px 32px rgba(20, 32, 31, .07);
}

/* ------------------------------------------------------- mapování tmavé  */

/* Sada je napsaná dvakrát, protože media query nelze vyjádřit selektorem
   a `light-dark()` nemá podporu tam, kde by fallback znamenal světlý web
   na tmavém systému — tedy přesně tu chybu, které si člověk týdny
   nevšimne. Duplikuje se ale jen mapování; hodnoty jsou jednou výš
   v --tma-*. Že jsou obě kopie shodné, kontroluje check.js.

   Mapování musí zůstat nad odvozenými pravidly (.head, .card…), protože
   kontrola bere první výskyt selektoru v souboru. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='svetle']) {
    --paper: var(--tma-paper);
    --card: var(--tma-card);
    --ink: var(--tma-ink);
    --ink-soft: var(--tma-ink-soft);
    --line: var(--tma-line);
    --petrol: var(--tma-petrol);
    --petrol-dark: var(--tma-petrol-dark);
    --petrol-soft: var(--tma-petrol-soft);
    --petrol-wash: var(--tma-petrol-wash);
    --petrol-line: var(--tma-petrol-line);
    --okr: var(--tma-okr);
    --okr-dark: var(--tma-okr-dark);
    --okr-soft: var(--tma-okr-soft);
    --okr-wash: var(--tma-okr-wash);
    --okr-line: var(--tma-okr-line);
    --rose: var(--tma-rose);
    --rose-dark: var(--tma-rose-dark);
    --rose-soft: var(--tma-rose-soft);
    --rose-wash: var(--tma-rose-wash);
    --rose-line: var(--tma-rose-line);
    --blush: var(--tma-blush);
    --blush-wash: var(--tma-blush-wash);
    --na-akcentu: var(--tma-na-akcentu);
    --demobar-bg: var(--tma-demobar-bg);
    --shadow-sm: none;
    --shadow-md: none;
  }
}

:root[data-tema='tma'] {
  --paper: var(--tma-paper);
  --card: var(--tma-card);
  --ink: var(--tma-ink);
  --ink-soft: var(--tma-ink-soft);
  --line: var(--tma-line);
  --petrol: var(--tma-petrol);
  --petrol-dark: var(--tma-petrol-dark);
  --petrol-soft: var(--tma-petrol-soft);
  --petrol-wash: var(--tma-petrol-wash);
  --petrol-line: var(--tma-petrol-line);
  --okr: var(--tma-okr);
  --okr-dark: var(--tma-okr-dark);
  --okr-soft: var(--tma-okr-soft);
  --okr-wash: var(--tma-okr-wash);
  --okr-line: var(--tma-okr-line);
  --rose: var(--tma-rose);
  --rose-dark: var(--tma-rose-dark);
  --rose-soft: var(--tma-rose-soft);
  --rose-wash: var(--tma-rose-wash);
  --rose-line: var(--tma-rose-line);
  --blush: var(--tma-blush);
  --blush-wash: var(--tma-blush-wash);
  --na-akcentu: var(--tma-na-akcentu);
  --demobar-bg: var(--tma-demobar-bg);
  --shadow-sm: none;
  --shadow-md: none;
}

/* Prohlížeči se řekne, jaké má schéma, aby formulářové prvky, posuvníky
   a výchozí barva textu odpovídaly zvolenému režimu. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='svetle']) { color-scheme: dark; }
}
:root[data-tema='tma'] { color-scheme: dark; }
:root[data-tema='svetle'] { color-scheme: light; }

/* Poloprůhledné plochy a stíny.

   Alfa je součástí hodnoty, takže tahle místa nejde přebarvit proměnnou
   a potřebují vlastní pravidlo. Selektor se opakuje dvakrát ze stejného
   důvodu jako u mapování výš.

   .head je z celé sady nejdůležitější: je sticky a drží se přes celou
   stránku, takže kdyby zůstala světlá, byl by to světlý pruh nad tmavým
   webem na každé stránce a v každém rolování.

   ::backdrop dostává SILNĚJŠÍ ztmavení, ne slabší. Na světlém webu stačí
   55 % inkoustové, na tmavém je pozadí samo tmavé a stejná hodnota by
   skoro nic neudělala.

   Razítko na osvědčení (rgba(255,255,255,.78)) tady schválně není —
   sedí na papíře, který zůstává světlý. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='svetle']) .head { background: rgba(15, 26, 27, .88); }
  :root:not([data-tema='svetle']) .member img { box-shadow: 0 0 0 1px var(--line); }
  :root:not([data-tema='svetle']) .team[data-klikaci='ano'] .member__foto:hover { box-shadow: 0 0 0 1px var(--petrol-soft); }
  :root:not([data-tema='svetle']) .medailonek { box-shadow: 0 0 0 1px var(--line); }
  :root:not([data-tema='svetle']) .medailonek::backdrop { background: rgba(0, 0, 0, .7); }
  :root:not([data-tema='svetle']) .medailonek__zavrit { background: rgba(23, 38, 42, .92); }
}

:root[data-tema='tma'] .head { background: rgba(15, 26, 27, .88); }
:root[data-tema='tma'] .member img { box-shadow: 0 0 0 1px var(--line); }
:root[data-tema='tma'] .team[data-klikaci='ano'] .member__foto:hover { box-shadow: 0 0 0 1px var(--petrol-soft); }
:root[data-tema='tma'] .medailonek { box-shadow: 0 0 0 1px var(--line); }
:root[data-tema='tma'] .medailonek::backdrop { background: rgba(0, 0, 0, .7); }
:root[data-tema='tma'] .medailonek__zavrit { background: rgba(23, 38, 42, .92); }

/* Karta pod myší se zesvětluje do barvy kategorie, aby platilo i tady,
   že kdo klikne na okrovou dlaždici, přistane na okrové stránce. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='svetle']) .card { --karta-hover: var(--tma-karta-hover-petrol); }
  :root:not([data-tema='svetle']) .card--doplnek { --karta-hover: var(--tma-karta-hover-okr); }
  :root:not([data-tema='svetle']) .card--zkouska { --karta-hover: var(--tma-karta-hover-rose); }
}

:root[data-tema='tma'] .card { --karta-hover: var(--tma-karta-hover-petrol); }
:root[data-tema='tma'] .card--doplnek { --karta-hover: var(--tma-karta-hover-okr); }
:root[data-tema='tma'] .card--zkouska { --karta-hover: var(--tma-karta-hover-rose); }

/* Podložka razítka na osvědčení.

   Razítko má poloprůhlednou podložku, aby se oddělilo od textu, přes který
   přečnívá. Ve světlém režimu je bílá; v tmavém musí být tmavá, jinak z ní
   pod maskou inkoustu vznikne mléčný flek. Razítko na detailu kurzu
   (.aside__stamp) žádnou podložku nemá, a proto v tmavém režimu fungovalo
   samo — tady se ale bez ní razítko slévá s textem. */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='svetle']) .cert__stamp { background: rgba(23, 38, 42, .78); }
}

:root[data-tema='tma'] .cert__stamp { background: rgba(23, 38, 42, .78); }

/* --------------------------------------------------------------- základ  */

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

/* Vlastní display na komponentách (třeba .card má flex) by jinak přebil
   výchozí chování atributu hidden a prvek by zůstal vidět. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.0625rem; font-weight: 600; }

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

a { color: var(--petrol); }

/* height:auto je tu obranně. Atributy width/height v HTML se chovají jako
   prezentační rada a bez tohohle pravidla přebijí poměr stran — obrázek se
   pak roztáhne do výšky. Projeví se to vždycky, když CSS ještě není
   načtené nebo je z mezipaměti starší než HTML. */
img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--blush); color: var(--ink); }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.wrap--narrow { width: min(100% - 2.5rem, 760px); }

.stack > * + * { margin-top: var(--flow, 1rem); }

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--card);
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

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

/* ---------------------------------------------------------------- popisky */

/* Malý velkými písmeny — používá se na návěští sekcí a na štítky. */
.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0;
}

/* --------------------------------------------------------------- hlavička */

.head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252, 252, 251, .88);
  backdrop-filter: blur(10px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: .5rem;
}

/* Mezera mezi slovy by se v inline zápisu ztratila, držíme ji odsazením. */
.brand span { color: var(--petrol); margin-left: .28em; }

/* Navigaci i přepínač vzhledu drží u pravého okraje, brand zůstává vlevo.
   Bez toho by space-between na .head__in rozprostřel tři prvky po celé
   šířce a navigace by skončila doprostřed. */
.nav { margin-inline-start: auto; }

.nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .15rem;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .95rem;
}

.nav a:hover { background: var(--petrol-wash); color: var(--petrol); }

.nav a[aria-current='page'] {
  color: var(--petrol);
  font-weight: 600;
  background: var(--petrol-wash);
}

/* Odkaz na proplacení je v navigaci zvýrazněný — je to nejsilnější argument
   a na původním webu nebyl vůbec. */
.nav a.nav--flag {
  color: var(--rose);
  background: var(--blush-wash);
  box-shadow: inset 0 0 0 1px var(--blush);
}

.nav a.nav--flag:hover { background: var(--blush); color: var(--rose); }

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  color: var(--ink);
}

.burger svg { width: 20px; height: 20px; }
.burger__close { display: none; }

/* Přepínač vzhledu. Tři ikony v jednom tlačítku, viditelná je ta, která
   odpovídá stavu — tím je stav vidět bez čtení popisku.

   V dokumentu je poslední, tedy až za navigací, aby vizuální pořadí
   odpovídalo pořadí tabulátoru. Napravo ho drží auto margin na .nav;
   na mobilu, kde je .nav vytažená z toku (position: absolute), se totéž
   řeší v responzivní sekci. */
.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.tema:hover { color: var(--petrol); border-color: var(--petrol-soft); }
.tema svg { width: 20px; height: 20px; }

.tema__system, .tema__svetle, .tema__tma { display: none; }
.tema[data-stav='system'] .tema__system { display: block; }
.tema[data-stav='svetle'] .tema__svetle { display: block; }
.tema[data-stav='tma'] .tema__tma { display: block; }
.burger[aria-expanded='true'] .burger__open { display: none; }
.burger[aria-expanded='true'] .burger__close { display: block; }

/* --------------------------------------------------------------- tlačítka */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: .975rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn--primary {
  background: var(--petrol);
  color: var(--na-akcentu);
}

.btn--primary:hover { background: var(--petrol-dark); }

.btn--ghost {
  background: transparent;
  border-color: var(--petrol-line);
  color: var(--petrol);
}

.btn--ghost:hover { background: var(--petrol-wash); border-color: var(--petrol-soft); }

.btn--quiet {
  min-height: 40px;
  padding: 0 .9rem;
  font-size: .9rem;
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}

.btn--quiet:hover { border-color: var(--petrol-soft); color: var(--petrol); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------ osvědčení (hero) */

.hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 var(--section-y);
  background:
    radial-gradient(70ch 40ch at 12% -10%, var(--petrol-wash), transparent 65%),
    radial-gradient(50ch 30ch at 95% 5%, var(--blush-wash), transparent 60%);
}

.hero__in {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__in { grid-template-columns: 1.05fr .95fr; }
}

.hero h1 {
  margin-top: .6rem;
  font-size: clamp(2rem, 4.2vw, 3.05rem);
  max-width: 17ch;
}

.hero__lead {
  font-size: 1.1875rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 1.1rem;
}

.hero .btn-row { margin-top: 1.75rem; }

/* Fakta pod tlačítky — každé číslo je spočítané z reálných dat. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--petrol-line);
  list-style: none;
}

.facts li { padding: .4rem 0; }

.facts b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--petrol);
}

.facts span {
  font-size: .875rem;
  color: var(--ink-soft);
}

/* Vizuál hero: fotka týmu a přes její dolní okraj položené osvědčení. */
.hero-visual { position: relative; }

.hero-foto {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.hero-foto img {
  width: 100%;
  height: auto;
  display: block;
}

/* Signature prvek: osvědčení jako typografický objekt.
   Je to věc, kterou si studentky reálně kupují. */
.cert {
  position: relative;
  border: 1px solid var(--petrol-line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  box-shadow: var(--shadow-md);
  max-width: 30rem;
  margin-inline: auto;

  /* Perforovaný proužek nahoře — odkaz na úřední tiskopis.
     Jako pozadí, ne pseudo-prvek; viz .card. */
  background-color: var(--card);
  background-image: repeating-linear-gradient(
    90deg,
    var(--petrol) 0 14px,
    var(--petrol-soft) 14px 22px
  );
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 0;
  background-clip: padding-box;
}

.cert__kind {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: .5rem 0 0;
}

/* Vyplněná část dokladu. Střídá kurzy, tak se prolíná — ale sama se
   nehýbe a rám, proužek ani razítko s ní neposkočí.

   Výška je pevná, aby karta při delším názvu nenarůstala a nešoupala
   obsahem pod sebou. Vejde se sem i dvouřádkový název. */
.cert__obsah {
  min-height: 15rem;
  opacity: 1;
  transition: opacity .42s ease;
}

.cert__obsah--mizi { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cert__obsah { transition: none; }
}

.cert__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  font-weight: 600;
  line-height: 1.12;
  margin: .65rem 0 0;
}

.cert__note {
  color: var(--ink-soft);
  font-size: .95rem;
  margin-top: .5rem;
}

.cert__rule {
  height: 1px;
  background: var(--line);
  margin: 1.35rem 0;
  border: 0;
}

/* Užší než karta, aby razítko vpravo dole mělo vlastní místo a nepřekrývalo cenu. */
.cert__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin: 0;
  max-width: 62%;
}

.cert__grid dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cert__grid dd {
  margin: .2rem 0 0;
  font-weight: 600;
  font-size: 1.05rem;
}

/* Razítko s kódem kvalifikace — jediný animovaný prvek na stránce. */
.cert__stamp {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  place-items: center;
  gap: .1rem;
  width: 7.25rem;
  height: 7.25rem;
  padding: .5rem;
  border: 2px solid var(--rose);
  border-radius: 50%;
  color: var(--rose);
  text-align: center;
  transform: rotate(-9deg);
  background: rgba(255, 255, 255, .78);
  animation: stamp .55s cubic-bezier(.2, .9, .3, 1.3) .45s both;
}

.cert__stamp small {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
  line-height: 1.25;
}

.cert__stamp b {
  font-family: var(--mono);
  font-size: 1.02rem;
  letter-spacing: .01em;
  font-weight: 600;
}

@keyframes stamp {
  from { opacity: 0; transform: rotate(-9deg) scale(1.75); }
  to   { opacity: 1; transform: rotate(-9deg) scale(1); }
}

/* Na úzkých displejích by razítko leželo přes text. */
/* Rozvržení hero vizuálu. Musí stát až za všemi .cert pravidly, jinak by
   je stejně specifické selektory níž v souboru přebily. */
/* Kdekoli razítko leží uvnitř karty, musí mu údaje uvolnit levou polovinu,
   jinak by se překrylo s textem. */
@media (min-width: 620px) {
  .cert__grid {
    grid-template-columns: 1fr;
    max-width: 54%;
    gap: .8rem;
  }

  .cert__stamp {
    width: 7.1rem;
    height: 7.1rem;
    right: 1.25rem;
    bottom: 1.25rem;
  }

  .cert__stamp small { font-size: .58rem; }
  .cert__stamp b { font-size: 1rem; }
}

@media (min-width: 620px) and (max-width: 899px) {
  .cert { margin-top: -3rem; width: min(26rem, 92%); }
}

/* Od širší obrazovky se osvědčení překrývá s dolním rohem fotky. */
@media (min-width: 900px) {
  .hero-foto { margin-right: 2.5rem; }

  .cert {
    margin: -5.5rem 0 0 auto;
    width: min(24rem, 100%);
  }
}

/* Pod tuhle šířku by razítko leželo přes text, tak jde pod údaje. */
@media (max-width: 620px) {
  .cert { margin-top: -2rem; }

  /* Razítko se dřív odsunulo pod údaje a karta tím narostla na víc než
     polovinu displeje. Zůstává proto v rohu i na mobilu, jen menší —
     doklad se tak vejde na obrazovku celý. */
  .cert__stamp {
    right: 1rem;
    bottom: 1rem;
    width: 6rem;
    height: 6rem;
    padding: .4rem;
    transform: rotate(-4deg);
  }

  .cert__stamp small { font-size: .52rem; }
  .cert__stamp b { font-size: .85rem; }

  /* Údaje si nechávají místo vlevo, ať nelezou pod razítko. */
  .cert__grid {
    grid-template-columns: 1fr;
    max-width: 58%;
    gap: .7rem;
  }
}

@media (max-width: 420px) {
  .cert__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- sekce  */

.section { padding-block: var(--section-y); }

.section--wash { background: var(--petrol-wash); }

/* Nad obsahem už stojí drobečková navigace, takže sekce nepotřebuje plné
   odsazení — jinak mezi nimi zeje díra. */
.section--pod-drobecky { padding-top: 2rem; }

/* Stránky bez drobečků (poděkování, 404) naopak potřebují odsadit od
   hlavičky samy. */
.section--samostatna { padding-top: 4rem; }

/* ------------------------------------------------------ stupnice nadpisů */

/* Velikosti nadpisů si dřív určovaly inline styly přímo v šabloně. Stejná
   role se tak psala pokaždé znovu a trochu jinak — na jedné stránce vyšly
   dva nadpisy h3 v 18,4 a 20,8 px a h2 se srazil pod globální stupnici.
   Role jsou dvě a mají tu teď jméno; velikost se dá změnit na jednom místě.

   Úroveň nadpisu se řídí hloubkou v dokumentu a s těmito třídami nesouvisí:
   dlaždice v kontaktech je h2, krok v postupu h3, a vypadat mají stejně. */

/* Nadpis podsekce uvnitř stránky — „Jak na to“, „Kde učíme“. */
.h-sekce {
  font-size: 1.5rem;
  margin-top: 3rem;
}

/* Vysvětlující věta pod ním. */
.h-sekce + p {
  margin-top: .75rem;
  color: var(--ink-soft);
}

/* Nadpis uvnitř dlaždice — kontakty, kroky žádosti. Odsazení mu dělá
   vnitřní okraj dlaždice, sám žádné nemá. */
.h-dlazdice { font-size: 1.15rem; }

/* Táž velikost jako podnadpis přímo v textu už odsazení potřebuje. */
.wrap > .h-dlazdice { margin-top: 2.5rem; }

/* Odznak proplacení pod perexem detailu kurzu. */
.detail__odznak { margin-top: 1.25rem; }

/* Blok, který patří k nadpisu nad sebou, ale je širší než sloupec textu. */
.blok-pod-nadpisem { margin-top: 1.75rem; }

.section__head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Nadpis navazuje na návěští nad sebou — ať už hlavičku sekce skládá
   komponenta, nebo je napsaná přímo ve stránce. Na výpisech je nadpis
   sekce zároveň h1, jinde h2. */
.section__head h1,
.section__head h2,
.eyebrow + h1 { margin-top: .55rem; }

.section__head h1 { font-size: clamp(2rem, 4.2vw, 3rem); }

.section__head p {
  color: var(--ink-soft);
  margin-top: .85rem;
  font-size: 1.0625rem;
}

/* ----------------------------------------------------------- karty kurzů */

.cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  list-style: none;
}

.card {
  /* Barva proužku a štítku podle kategorie. Výchozí je rekvalifikace. */
  --pruh: var(--petrol);
  --pruh-svetly: var(--petrol-soft);

  /* Povrch karty pod myší. Ve světlém režimu se rovná --card, takže se
     nemění nic — hierarchii tam nese stín. V tmavém režimu stín není
     vidět a tuhle roli přebírá zesvětlený povrch; hodnotu podle
     kategorie nastavují tmavá pravidla. */
  --karta-hover: var(--card);

  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;

  /* Perforovaný proužek — stejný motiv jako na osvědčení v hero. Váže kartu
     k tomu, co je jejím výstupem, a barvou odlišuje sekci.

     Řešeno pozadím, ne pseudo-prvkem: pozadí se ořízne podle zaoblení karty
     samo. Pseudo-prvek měl vlastní poloměr, který se s vnitřním poloměrem
     karty nesešel, a v rozích přetékal ven. */
  background-color: var(--card);
  background-image: repeating-linear-gradient(
    90deg,
    var(--pruh) 0 14px,
    var(--pruh-svetly) 14px 22px
  );
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: 0 0;
  background-clip: padding-box;
}

.card--doplnek { --pruh: var(--okr); --pruh-svetly: var(--okr-soft); }
.card--zkouska { --pruh: var(--rose); --pruh-svetly: var(--rose-soft); }

.card:hover {
  border-color: var(--petrol-soft);
  background-color: var(--karta-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Kód kvalifikace jako strukturní značka. Nahrazuje obvyklé 01/02/03 —
   na rozdíl od pořadového čísla něco skutečně znamená. */
.card__code {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  padding: .3rem .55rem;
  border-radius: 5px;
  background: var(--pruh);
  color: var(--na-akcentu);
}

/* Štítek bez kódu kvalifikace. Nese barvu kategorie jen v textu a lince,
   ať se neplete s plným štítkem, který kód má. Na stránce doplňkových kurzů
   je to jinak jediné barevné odlišení kromě proužku. */
.card__code--none {
  background: transparent;
  color: var(--pruh);
  box-shadow: inset 0 0 0 1px currentColor;
}

.card__title {
  margin-top: .9rem;
  font-size: 1.3rem;
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

/* Celá karta je klikatelná, ale ve stromu přístupnosti zůstane jeden odkaz. */
.card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.card__desc {
  margin-top: .5rem;
  color: var(--ink-soft);
  font-size: .95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Údaje, kvůli kterým na původním webu bylo nutné otevřít 30 stránek. */
.card__facts {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .4rem;
  list-style: none;
  font-size: .9rem;
}

.card__facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.card__facts dt, .card__facts .k { color: var(--ink-soft); }

.card__facts .v { font-weight: 600; text-align: right; }

.card__price {
  margin-top: 1rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--petrol);
}

.card__foot {
  margin-top: auto;
  padding-top: 1rem;
}

/* Odznak proplacení. Má ho jen tolik kurzů, kolik ho má v datech — čtyři. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: var(--blush-wash);
  color: var(--rose);
  box-shadow: inset 0 0 0 1px var(--blush);
}

.badge::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--rose);
}

.badge--muted {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.badge--muted::before { background: var(--petrol-soft); }

/* ------------------------------------------------------ skupiny oborů    */

.skupina + .skupina { margin-top: 2.75rem; }

.skupina__nazev {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: 1.25rem;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--petrol-line);
}

.skupina__nazev span {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* ------------------------------------------------------ přepínač oboru   */

/* Obor je hlavní osa nabídky, město je až zpřesnění. Kdyby obojí vypadalo
   jako chip, změní se stránka v panel o jedenácti stejných tlačítkách.
   Přepínač proto zůstává textem a aktivní položku nese jen podtržení. */
.obory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.35rem;
  margin: 1.6rem 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

.obor {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .975rem;
  color: var(--ink-soft);
  cursor: pointer;
  /* Podtržení je součástí prvku, aby se při přepnutí neposouval text. */
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .15s ease, box-shadow .15s ease;
}

.obor:hover { color: var(--petrol); }

.obor--aktivni {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--petrol);
}

.obor__pocet {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 400;
  /* --ink-soft, ne --petrol-soft: počet kurzů je informace, ne dekorace,
     a petrolejová varianta na bílé kartě dávala 2,77 : 1. Odhalila to
     kontrola kontrastu v check.js. */
  color: var(--ink-soft);
}

.obor--aktivni .obor__pocet { color: var(--petrol); }

/* -------------------------------------------------------------- filtr    */

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.filter__label {
  font-size: .875rem;
  color: var(--ink-soft);
  margin-right: .25rem;
}

.chip {
  min-height: 44px;
  padding: 0 .95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font: inherit;
  font-size: .9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.chip:hover { border-color: var(--petrol-soft); color: var(--petrol); }

.chip[aria-pressed='true'] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--na-akcentu);
}

.filter__count {
  margin-left: auto;
  font-size: .875rem;
  color: var(--ink-soft);
}

.empty {
  padding: 2.5rem;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ------------------------------------------------------- detail kurzu    */

.crumbs {
  font-size: .875rem;
  color: var(--ink-soft);
  padding-top: 1.75rem;
}

.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.crumbs li::after { content: '/'; margin-left: .4rem; color: var(--petrol-soft); }
.crumbs li:last-child::after { content: none; }
.crumbs a { color: var(--ink-soft); }

/* Detail přebírá barvu kategorie, kterou má kurz na proužku karty ve
   výpisu. Kdo klikne na okrovou dlaždici, přistane na okrové stránce —
   barva pak není ozdoba, ale potvrzení, že jsem tam, kam jsem mířil.
   Prvky níž sahají po --akcent*, takže se přebarví celý detail najednou. */
.detail {
  --akcent: var(--petrol);
  --akcent-soft: var(--petrol-soft);
  --akcent-wash: var(--petrol-wash);
  --akcent-line: var(--petrol-line);
  --akcent-tmavy: var(--petrol-dark);
}

.detail--doplnek {
  --akcent: var(--okr);
  --akcent-soft: var(--okr-soft);
  --akcent-wash: var(--okr-wash);
  --akcent-line: var(--okr-line);
  --akcent-tmavy: var(--okr-dark);
}

.detail--zkouska {
  --akcent: var(--rose);
  --akcent-soft: var(--rose-soft);
  --akcent-wash: var(--blush-wash);
  --akcent-line: var(--rose-line);
  --akcent-tmavy: var(--rose-dark);
}

.detail .eyebrow { color: var(--akcent); }
.detail .prose a { color: var(--akcent); }

/* Tlačítka uvnitř detailu jdou s barvou kategorie. Zapisuje se to takhle
   adresně, protože varianty tlačítek se používají i mimo detail, kde má
   zůstat petrolejová. */
.detail .btn--primary { background: var(--akcent); }
.detail .btn--primary:hover { background: var(--akcent-tmavy); }

.detail .btn--ghost { border-color: var(--akcent-line); color: var(--akcent); }
.detail .btn--ghost:hover { background: var(--akcent-wash); border-color: var(--akcent-soft); }

.detail .btn--quiet:hover { border-color: var(--akcent-soft); color: var(--akcent); }

.detail { padding-block: 2rem var(--section-y); }

.detail__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 940px) {
  .detail__grid { grid-template-columns: minmax(0, 1fr) 21.5rem; }
}

.detail__head { margin-bottom: 2.5rem; }
.detail__head h1 { margin-top: .75rem; }

.detail__lead {
  margin-top: 1.1rem;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.75rem;
  margin-bottom: .9rem;
}

/* Právní stránky — zásady soukromí, obchodní podmínky.

   Text je hutný a čte se jinak než popis kurzu: čtenář v něm hledá konkrétní
   oddíl, ne se jím prokousává odshora. Nadpisy proto drží blíž svému obsahu
   a odrážky nesou petrolejovou, ne růžovou — ta je na webu barvou profesních
   zkoušek a na právním textu by značila kategorii, kterou nemá. */
/* Kdy byl dokument naposled upraven. Drobnější než perex na ostatních
   stránkách — je to údaj o dokumentu, ne jeho úvod, a nemá přetahovat
   pozornost prvnímu oddílu. */
.pravni__datum {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink-soft);
}

.prose--pravni {
  --akcent: var(--petrol);
  --akcent-wash: var(--petrol-wash);

  /* Odstup od data nad textem. `.prose > :first-child` má margin-top: 0,
     protože jinde .prose začíná hned pod nadpisem sekce — tady je nad ním
     ještě řádek s datem a první oddíl by se na něj nalepil.

     Linka odděluje údaj o dokumentu od jeho textu, ať je vidět, kde
     dokument začíná. */
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.prose--pravni h2 {
  font-size: 1.25rem;
  margin-top: 2.25rem;
}

.prose--pravni strong { color: var(--ink); }

.prose--pravni a {
  color: var(--petrol);
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}

.prose > :first-child { margin-top: 0; }

.prose p + p { margin-top: .85rem; }

.prose ul {
  list-style: none;
  display: grid;
  gap: .55rem;
}

.prose ul li {
  position: relative;
  padding-left: 1.6rem;
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--akcent-wash, var(--blush));
  box-shadow: inset 0 0 0 1px var(--akcent, var(--rose));
}

/* Postranní panel s cenou — drží se v dohledu při scrollování.
   Perforovaný proužek nese stejně jako karta ve výpisu a osvědčení
   v hero; barvu mu dává kategorie kurzu. Je to pozadí, ne pseudo-prvek:
   ten držel uvnitř zaoblených rohů jen díky overflow: hidden, které
   navíc ořezávalo natočené razítko u zkoušky. */
.aside {
  position: sticky;
  top: 92px;
  border: 1px solid var(--akcent-line);
  border-radius: var(--radius);
  padding: 1.85rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-sm);

  background-color: var(--card);
  background-image: repeating-linear-gradient(
    90deg,
    var(--akcent) 0 14px,
    var(--akcent-soft) 14px 22px
  );
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 0;
  background-clip: padding-box;
}

/* Panel s razítkem kódu kvalifikace potřebuje o kus víc místa nahoře. */
.aside--razitko {
  position: relative;
  padding-top: 2rem;
}

/* Otisk inkoustu. Maska se pokládá přes celé razítko — obrys i text —
   protože gumové razítko taky neotiskne jednu část plně a druhou ne. */
.aside__stamp,
.cert__stamp {
  -webkit-mask-image: var(--inkoust);
  mask-image: var(--inkoust);
  /* Šum se roztáhne přes celé razítko, aby skvrny byly velké a čitelné
     jako skvrny. Zrno v původní velikosti splývalo v rovnoměrný závoj
     a razítko vypadalo prostě vybledle. */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Maska ubere i drobnému popisku, proto se mu vrací plná sytost. */
.aside__stamp small,
.cert__stamp small { opacity: 1; }

.aside__stamp {
  float: right;
  display: grid;
  place-items: center;
  gap: .1rem;
  width: 5.75rem;
  height: 5.75rem;
  margin: 0 0 .5rem .75rem;
  padding: .5rem;
  border: 2px solid var(--akcent);
  border-radius: 50%;
  color: var(--akcent);
  text-align: center;
  transform: rotate(-7deg);
}

.aside__stamp small {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
  line-height: 1.25;
}

.aside__stamp b {
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 600;
}

/* „Cena na dotaz“ je věta, ne číslo — v plné velikosti by se lámala. */
.aside__price.tbd { font-size: 1.5rem; }

.aside__price {
  font-family: var(--display);
  font-size: 2.35rem;
  font-weight: 600;
  color: var(--akcent);
  line-height: 1;
}

/* Vedle razítka zbývá na cenu užší místo. Nejdelší cena „26 000 Kč“ se
   při 2,35 rem lámala na „26 000 / Kč“, což vypadalo jako chyba. */
.aside--razitko .aside__price { font-size: 2.15rem; }

.aside__note {
  margin-top: .6rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

.aside dl {
  margin: 1.4rem 0 0;
  display: grid;
  gap: .8rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.aside dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.aside dd { margin: .15rem 0 0; font-weight: 600; }

.aside .btn { width: 100%; margin-top: 1.5rem; }

.aside .btn + .btn { margin-top: .6rem; }

/* Upozornění, když v datech chybí údaj. Radši to přiznáme, než abychom
   něco dopsali. */
.tbd {
  font-weight: 400;
  color: var(--ink-soft);
  font-style: italic;
}

/* ------------------------------------------------------------ ÚP stránka */

.steps {
  counter-reset: step;
  list-style: none;
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.step {
  counter-increment: step;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.4rem 4.5rem;
  box-shadow: var(--shadow-sm);
}

/* Číslování je tu na místě — kroky žádosti jsou skutečná posloupnost. */
.step::before {
  content: counter(step);
  position: absolute;
  left: 1.4rem;
  top: 1.35rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--petrol-wash);
  color: var(--petrol);
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 600;
}

.step p { margin-top: .4rem; color: var(--ink-soft); }

.notice {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--blush-wash);
  border: 1px solid var(--blush);
  color: var(--ink);
  font-size: .975rem;
}

.notice strong { color: var(--rose); }

/* ---------------------------------------------------------------- tým    */

/* Tři sloupce v řadě; na kolečka tak zbyde víc místa než při čtyřech.

   Flexbox, ne grid: gridu se nedá říct „poslední, neúplnou řadu vycentruj“.
   Sloupce jsou pevné dráhy a položky je plní zleva, takže při deseti lidech
   zůstal desátý sám u levého okraje. Flex s justify-content: center srovná
   každou řadu na střed — jeden sám doprostřed, dva do mezer nad nimi.

   Šířka 18rem je táž, jakou měl grid v minmax(), takže se řady lámou při
   stejných šířkách okna jako dřív. Položky se ale nenatahují do zbytku
   řady; přebytek jde po stranách, což je právě ono centrování. */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 3.5vw, 3rem) var(--gap);
  list-style: none;
  max-width: 62rem;
  /* Bez tohohle by seznam ležel vlevo v obsahovém sloupci (je užší než on)
     a osamocená položka by skončila 64 px vedle osy stránky — vycentrovaná
     v seznamu, ale ne na obrazovce. */
  margin-inline: auto;
}

.team > .member {
  flex: 0 1 18rem;
  /* Aby jediná položka na úzkém displeji nepřetekla ven z rámu. */
  max-width: 100%;
}

/* Portréty jsou v kolečku. Fotky mají různě velké prázdné okraje a v kruhu
   se to ztratí — výřez je navíc sjednocený podle polohy hlavy, takže mají
   všechny stejné posazení. */
.member {
  text-align: center;
}

.member img,
.member__foto--bez {
  width: min(13.5rem, 76%);
  /* Bez height:auto by se uplatnil atribut height="440" z HTML a z kolečka
     by byla elipsa — atribut má přednost před aspect-ratio. */
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  background: var(--petrol-wash);
  box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgba(20, 32, 31, .07);
}

/* Lektorka, jejíž fotku škola ještě nedodala. Iniciály ve stejném kolečku,
   ať mřížka nepoklesne a karta nevypadá jako chyba načítání. */
.member__foto--bez {
  display: grid;
  place-items: center;
  margin-block: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--petrol);
  letter-spacing: .02em;
}

.member__body { padding: 1.1rem .5rem 0; }

.member__name { font-size: 1.1rem; }

.member__role {
  margin-top: .35rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--petrol);
  text-wrap: balance;
}

.member__where {
  margin-top: .3rem;
  font-size: .875rem;
  color: var(--ink-soft);
}

/* Bio až po rozkliknutí. Karty tak zůstanou kompaktní a mřížka vyrovnaná;
   delší text by je jinak protáhl na dvojnásobek.

   Nativní <details> schválně: funguje bez JavaScriptu, je ovladatelné
   klávesnicí a čtečky samy hlásí, jestli je rozbalené. */
.vice {
  margin-top: .75rem;
  text-align: left;
}

.vice summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 32px;
  padding: 0 .1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--petrol);
  cursor: pointer;
  list-style: none;
}

.vice summary::-webkit-details-marker { display: none; }

/* Vlastní šipka, aby se otáčela při rozbalení. */
.vice summary::after {
  content: '';
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
}

.vice[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.vice summary:hover { text-decoration: underline; }

.vice__text {
  margin-top: .5rem;
  font-size: .925rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Uvnitř karty je text na střed, ale odstavec se takhle čte špatně. */
.member .vice { text-align: center; }
.member .vice__text { text-align: left; }

.vice__text + .vice__text { margin-top: .6rem; }

/* Fotka se chová jako tlačítko jen tehdy, když skript běží. */
.team[data-klikaci='ano'] .member__foto {
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.team[data-klikaci='ano'] .member__foto:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 1px var(--petrol-soft), 0 10px 28px rgba(20, 32, 31, .13);
}

/* --------------------------------------------------- medailonek lektorky */

.medailonek {
  width: min(46rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(20, 32, 31, .28);
  overflow: auto;
}

.medailonek::backdrop {
  background: rgba(20, 32, 31, .55);
  backdrop-filter: blur(2px);
}

.medailonek__zavrit {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  cursor: pointer;
}

.medailonek__zavrit:hover { background: var(--petrol); color: var(--na-akcentu); border-color: var(--petrol); }
.medailonek__zavrit svg { width: 18px; height: 18px; }

.medailonek__foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--petrol-wash);
}

.medailonek__text { padding: clamp(1.5rem, 3vw, 2.25rem); }

/* Křížek sedí v pravém horním rohu, takže mu jméno musí uhnout —
   „Ing. Tereza Lancůchová“ se pod něj jinak podleze. */
.medailonek__jmeno {
  font-size: clamp(1.5rem, 3vw, 2rem);
  padding-right: 3rem;
}

.medailonek__role {
  margin-top: .4rem;
  font-weight: 600;
  color: var(--petrol);
}

.medailonek__mesto { margin-top: .25rem; color: var(--ink-soft); }

.medailonek__bio {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  line-height: 1.7;
}

/* Odstavce se sem kopírují z karty, kde první potřebuje odstup od
   rozbalovacího nadpisu. Tady ho odděluje linka, takže mezera přebývá. */
.medailonek__bio .vice__text:first-child { margin-top: 0; }
.medailonek__bio .vice__text + .vice__text { margin-top: .8rem; }
.medailonek__bio .vice__text { font-size: 1rem; }

/* Od tabletu výš fotka vlevo, text vpravo — jinak by se muselo hodně rolovat.
   Pozor na selektor: display na .medailonek bez [open] přebije prohlížečové
   pravidlo dialog:not([open]) { display: none } a dialog je pak vidět
   pořád, i než se poprvé otevře. */
@media (min-width: 700px) {
  .medailonek[open] {
    display: grid;
    grid-template-columns: 18rem 1fr;
    align-items: start;
  }

  .medailonek__foto { height: 100%; border-radius: var(--radius) 0 0 var(--radius); }
}

/* -------------------------------------------------------------- kontakt  */

.contact {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none;
}

.contact__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Nadzvednutí jako u karet kurzů. Dlaždice sama odkaz není, ale každá
   nějaký obsahuje, takže reakce na najetí nic neslibuje falešně. */
.contact__card:hover {
  border-color: var(--petrol-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .contact__card { transition: border-color .18s ease, box-shadow .18s ease; }

  .card:hover,
  .contact__card:hover { transform: none; }
}


.contact__card p { margin-top: .45rem; color: var(--ink-soft); font-size: .95rem; }

.contact__card a {
  display: inline-block;
  margin-top: .8rem;
  font-weight: 600;
  font-size: 1.05rem;
}

/* Sítě jako ikony. Vyšší specifičnost než „.contact__card a“, které jinak
   určuje vzhled textových odkazů v kartě. */
.socialni {
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
}

.socialni .sit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid var(--petrol-line);
  border-radius: 50%;
  background: var(--petrol-wash);
  color: var(--petrol);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.socialni .sit svg { width: 20px; height: 20px; }

.socialni .sit:hover {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--na-akcentu);
}

.contact__card address {
  font-style: normal;
  margin-top: .8rem;
  font-weight: 600;
  line-height: 1.5;
}

.places {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}

.places li {
  padding: .4rem .8rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: .9rem;
}

.places b { font-weight: 600; }

.places span { color: var(--ink-soft); }

/* ------------------------------------------------------------ formulář   */

.form {
  display: grid;
  gap: 1.15rem;
  max-width: 40rem;
  margin-top: 2.5rem;
}

/* Formulář je mřížka s vlastní mezerou — řádek tlačítek v něm nesmí
   odsazení zdvojovat. */
.form .btn-row { margin-top: 0; }

.field { display: grid; }

.field > label {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .35rem;
}

.field .req { color: var(--rose); }

.field input,
.field select,
.field textarea {
  font: inherit;
  min-height: 48px;
  padding: .65rem .85rem;
  border: 1px solid var(--petrol-line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}

.field textarea { min-height: 7rem; resize: vertical; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 1px;
  border-color: var(--petrol);
}

.field input[readonly] { background: var(--petrol-wash); color: var(--ink-soft); }

/* Souhrn zvoleného kurzu pod výběrem ve formuláři. */
.vybrany {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  margin-top: .6rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--petrol-wash);
  font-size: .95rem;
}

.vybrany b {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--petrol);
}

.vybrany__odkaz { margin-left: auto; font-size: .9rem; }

.field .help {
  margin-top: .35rem;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* Jméno a příjmení vedle sebe. Jsou to dvě pole, protože je tak posílá
   i ostrý web a tabulka školy má sloupec pro obojí — ale patří k sobě,
   tak ať to tak i vypadají. Na úzké obrazovce pod sebe. */
.field--dvojice {
  display: grid;
  gap: var(--gap);
}
.field--dvojice > div { display: grid; }
.field--dvojice label {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .35rem;
}

@media (min-width: 540px) {
  .field--dvojice { grid-template-columns: 1fr 1fr; }
}

/* Hlášení o průběhu odesílání. Vidět je jen tehdy, když se přihlášky
   posílají na endpoint školy — Netlify Forms přesměruje na vlastní
   stránku a hlášku nepotřebuje. */
.status {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: .95rem;
}
.status:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.status.ok {
  border-color: var(--petrol-line);
  background: var(--petrol-wash);
  color: var(--petrol-dark);
}
.status.err {
  border-color: var(--rose-line);
  background: var(--blush-wash);
  color: var(--rose-dark);
}

.field--check {
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
}

.field--check input {
  min-height: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .3rem;
  accent-color: var(--petrol);
}

.field--check label { font-weight: 400; font-size: .95rem; margin: 0; }

.hp { position: absolute; left: -9999px; opacity: 0; }

/* --------------------------------------------------------------- patička */

.foot {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.foot__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Nadpisy sloupců v patičce jsou h2, aby se v dokumentu nepřeskakovala
   úroveň nadpisů. Vizuálně zůstávají drobné popisky. */
.foot h2 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin-bottom: .9rem;
}

.foot ul { list-style: none; display: grid; gap: .1rem; }

.foot ul a {
  display: block;
  padding: .45rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .95rem;
}

.foot ul a:hover { color: var(--petrol); text-decoration: underline; }

.foot address { font-style: normal; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }

.foot__logos {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* Loga ministerstev a úřadu práce jsou doklad akreditace — je to jeden
   z nejsilnějších argumentů školy, takže musí být čitelná. */
.foot__logos img {
  height: 72px;
  width: auto;
}

@media (max-width: 560px) {
  .foot__logos { gap: 1.25rem; }
  .foot__logos img { height: 56px; }
}

.foot__bar {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .875rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------- návrat nahoru  */

.nahoru {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 30;

  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;

  border: 1px solid var(--petrol-line);
  border-radius: 50%;
  background: var(--card);
  color: var(--petrol);
  cursor: pointer;
  box-shadow: var(--shadow-md);

  animation: nahoruPrichod .22s ease-out;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.nahoru svg { width: 20px; height: 20px; }

.nahoru:hover {
  background: var(--petrol);
  color: var(--na-akcentu);
  transform: translateY(-2px);
}

@keyframes nahoruPrichod {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- lišta ukázky (demo) */

/* Vizuálně odděluje návrh od ostrého webu, ať nevznikne omyl. */

/* Bílá je tu pevná záměrně: pozadí lišty je tmavé v obou režimech, takže
   text se nepřevrací. Na --na-akcentu by v tmavém režimu dal 1,35 : 1.
   Je to jediné místo ve stylopisu, kde je pevná bílá správná odpověď. */
.demobar {
  background: var(--demobar-bg);
  color: #fff;
  font-size: .875rem;
  padding: .6rem 0;
}

.demobar__in {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.demobar b { color: var(--blush); }

.demobar a {
  color: #fff;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: .25rem;
}

/* -------------------------------------------------------------- responzí */

@media (max-width: 860px) {
  /* Navigace je tady vytažená z toku (position: absolute), takže auto
     margin na ní nic neudělá a odsazení musí nést burger. Přepínač zůstává
     nejvíc vpravo a pořadí tabulátoru odpovídá tomu, co je vidět —
     proto žádné `order`. */
  .burger { display: inline-flex; margin-inline-start: auto; }

  .nav {
    position: absolute;
    inset: 68px 0 auto 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
    padding: .5rem 0 1rem;
  }

  .nav[data-open='true'] { display: block; }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
  }

  .nav a { min-height: 50px; padding: 0 .9rem; }

  .aside { position: static; }
}

/* --------------------------------------------------------- přístupnost   */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Seznam podkladů ke stažení na stránce o proplacení. */
/* Nabídka telefonátu hned za kroky návodu k úřadu práce. Petrolejová,
   aby se nepletla se sousedním růžovým upozorněním — to varuje, tohle
   nabízí pomoc. */
.pomoc {
  display: flex;
  gap: .9rem;
  align-items: start;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--petrol-wash);
  border: 1px solid var(--petrol-line);
  color: var(--ink);
  font-size: .975rem;
}

.pomoc__ikona {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  color: var(--petrol);
}

.pomoc strong { color: var(--petrol-dark); }

/* Číslo nese váhu celého bloku — ať se dá přečíst i letmým pohledem
   a na mobilu rovnou vytočit. */
.pomoc a {
  color: var(--petrol);
  font-weight: 700;
  white-space: nowrap;
  font-size: 1.05em;
}

.podklady {
  list-style: none;
  margin-top: 1.25rem;
  display: grid;
  gap: .1rem;
}

.podklady li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.podklady li + li { margin-top: .5rem; }

.podklady a { font-weight: 600; text-decoration: none; }
.podklady a:hover { text-decoration: underline; }
.podklady span { margin-left: auto; color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------------ podklad pro úřad práce (k tisku)   */

/* Záměrně střízlivé: je to informační list od poskytovatele, ne osvědčení.
   Žádné razítko ani podpisový řádek — nesmí vzniknout dojem úředního dokladu. */

.tisk-stranka { background: var(--petrol-wash); }

.pk {
  width: min(100% - 2rem, 60rem);
  margin: 2rem auto 4rem;
}

.pk__akce {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

/* Upozornění, že list nenahrazuje úřední formulář. Do tisku nepatří —
   na papíře to říká patička listu. */
.pk__upozorneni {
  margin-bottom: 1.5rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--blush-wash);
  border: 1px solid var(--blush);
  font-size: .95rem;
}

.pk__list {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
}

.pk__hlava {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--petrol);
}

.pk__kdo {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
}

.pk__adresa {
  margin-top: .35rem;
  font-size: .875rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.pk__loga {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pk__loga img { height: 40px; width: auto; }

.pk__nadpis { margin-top: 1.75rem; font-size: clamp(1.5rem, 3vw, 1.9rem); }

.pk__podnadpis {
  margin-top: .4rem;
  color: var(--ink-soft);
  font-size: .95rem;
}

.pk__udaje {
  margin: 1.75rem 0 0;
  display: grid;
  gap: 0;
}

.pk__radek {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}

.pk__radek dt { color: var(--ink-soft); font-size: .95rem; }
.pk__radek dd { margin: 0; font-weight: 600; }

@media (max-width: 560px) {
  .pk__radek { grid-template-columns: 1fr; gap: .15rem; }
}

.pk__poznamka {
  margin-top: .9rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

.pk__blok { margin-top: 2rem; }

.pk__blok h2 { font-size: 1.2rem; margin-bottom: .75rem; }

.pk__obsah {
  list-style: none;
  columns: 2;
  column-gap: 2rem;
  font-size: .95rem;
}

.pk__obsah li {
  break-inside: avoid;
  padding-left: 1.1rem;
  margin-bottom: .35rem;
  position: relative;
}

.pk__obsah li::before {
  content: '·';
  position: absolute;
  left: .25rem;
  color: var(--petrol-soft);
}

@media (max-width: 640px) {
  .pk__obsah { columns: 1; }
}

.pk__pata {
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-soft);
}

.pk__zdroj { margin-top: .5rem; font-family: var(--mono); font-size: .75rem; }

@page {
  size: A4;
  margin: 14mm;
}

@media print {
  .head, .foot, .demobar, .btn-row, .aside .btn, .filter,
  .pk__akce, .pk__upozorneni, .nahoru { display: none !important; }
  body { background: #fff; }
  .card, .aside, .cert, .step, .contact__card, .filter {
    box-shadow: none;
    border-color: #999;
  }

  /* Podklad má vyjít na jednu stranu A4 — proto je v tisku sázený
     drobněji a s těsnějšími řádky než na obrazovce. */
  .tisk-stranka { background: #fff; }

  .pk { width: auto; margin: 0; }

  .pk__list {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    font-size: 9.5pt;
    line-height: 1.4;
  }

  .pk__hlava { padding-bottom: .6rem; }
  .pk__kdo { font-size: 12pt; }
  .pk__adresa { font-size: 8pt; margin-top: .2rem; }
  .pk__loga img { height: 30px; }

  .pk__nadpis { margin-top: .9rem; font-size: 16pt; }
  .pk__podnadpis { font-size: 9pt; margin-top: .2rem; }

  .pk__udaje { margin-top: .9rem; }
  .pk__radek { padding: .28rem 0; grid-template-columns: 11rem 1fr; }
  .pk__radek dt { font-size: 9pt; }

  .pk__poznamka { margin-top: .5rem; font-size: 8.5pt; }

  .pk__blok { margin-top: 1rem; }
  .pk__blok h2 { font-size: 11pt; margin-bottom: .4rem; }
  .pk__obsah { font-size: 9pt; }
  .pk__obsah li { margin-bottom: .12rem; }

  .pk__pata { margin-top: 1rem; padding-top: .6rem; font-size: 7.5pt; }
  .pk__zdroj { font-size: 7pt; margin-top: .3rem; }

  .pk__blok, .pk__pata, .pk__hlava { break-inside: avoid; }
}