/* Schéma 18 - nočná modrá a med.
   Implementácia dizajn manuálu pmacko.sk. Poradie sekcií zodpovedá manuálu:
   paleta, typografia, prvky, zloženiny, miery. */

/* ── Paleta ─────────────────────────────────────────────────── */
:root {
  /* Nočná modrá nesie nadpisy, odkazy a hlavnú kartu. */
  --modra: #152f4b;           /* oklch(0.3 0.06 252) */
  /* Med je druhá farba, používa sa striedmo. */
  --med: #f0ba59;             /* oklch(0.82 0.13 80) */
  --piesok: #f4f1e8;          /* podklad stránky */
  --uhol: #161a22;            /* základný text, tmavé plochy */

  --plocha: #eae5d6;          /* neaktívne plôšky */
  --linka: #ded8c8;           /* linky a rámy */
  --text2: #524e44;           /* vedľajší text */
  --popisok: #5f5b4f;         /* popisky */
  --na-mede: #2c2003;         /* text na mede */
  --karta: #ffffff;
  --chyba: #b23b3b;           /* akcent chybovej hlášky */
  --na-chybe: #6d1f1f;        /* text chybovej hlášky */

  /* Miery */
  --sirka: 1240px;
  --r-karta: 20px;
  --r-plocha: 16px;
  --r-plosky: 999px;
  /* Šírka textového stĺpca. 66ch by bolo správne číslo, keby sa ch počítalo
     z priemerného znaku - počíta sa z nuly, a tá je v Archive úzka, takže
     riadok vychádzal na 76 znakov. 60ch dáva reálnych 68. */
  --stlpec: 60ch;
}

@supports (color: oklch(0.3 0.06 252)) {
  :root {
    --modra: oklch(0.3 0.06 252);
    --med: oklch(0.82 0.13 80);
  }
}

* { box-sizing: border-box; }

/* ── Typografia ─────────────────────────────────────────────── */
/* Fraunces na nadpisy, Archivo na text a ovládacie prvky, Archivo Narrow
   na malé popisky verzálkami. Nadpisy v serife dávajú stránke redakčnú
   váhu, ktorú jednoliata bezserifová sadzba nemá - a robia rozdiel medzi
   „čo hovorím" a „čím sa ovláda".

   Fonty sú naše, nie z fonts.googleapis.com. Dôvody a spôsob rezania sú
   v tools/fonty.py; podstatné je, že prehliadač už nečaká na cudzie CSS,
   aby sa vôbec dozvedel, kde fonty sú.

   Archivo a Fraunces sú variabilné v hrúbke, preto stačí jeden súbor na
   celý rozsah. Optická veľkosť je u Fraunces zapečená na 24, takže
   font-optical-sizing tu nemá čo meniť a nikde sa neuvádza. */

@font-face {
  font-family: Archivo;
  src: url(/static/font/archivo.036028fb.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url(/static/font/archivo-narrow.045de97d.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Fraunces;
  src: url(/static/font/fraunces.f523b227.woff2) format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--piesok);
  color: var(--uhol);
  font: 400 18px/1.7 Archivo, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--modra);
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  /* Serif znesie menej tesné prestrkanie než bezserifové písmo. */
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: 52px; }
h2 { font-size: 36px; }
h3 { font-size: 23px; line-height: 1.25; }

/* Titulky do 30 znakov na riadok. */
h1, h2 { max-width: 30ch; }

p { margin: 0; }

a { color: var(--modra); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Nadpis, ktorý je odkazom, nedostáva systémové podčiarknutie - dostane
   medovú linku, ktorá sa vysunie zľava. Je to jediné miesto, kde sa druhá
   farba schémy hýbe, tak si ju človek spojí so stránkou. */
h1 a, h2 a, h3 a, .archiv-polozka a {
  background-image: linear-gradient(var(--med), var(--med));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  padding-bottom: 2px;
}
h1 a:hover, h2 a:hover, h3 a:hover, .archiv-polozka a:hover {
  text-decoration: none;
  background-size: 100% 3px;
}

/* Odkazy v texte článku nesú medové podčiarknutie stále, nielen pri
   prejdení - v behu textu musí byť odkaz vidieť. */
.telo a {
  background-image: linear-gradient(var(--med), var(--med));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 1px;
}
.telo a:hover { text-decoration: none; background-size: 100% 8px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--modra);
  outline-offset: 3px;
  border-radius: 2px;
}

.perex { font-size: 23px; font-weight: 500; line-height: 1.5; color: var(--text2); }

/* POPISOK · 11/600 Archivo Narrow, verzálky. */
.popisok {
  font: 600 11px/1.4 "Archivo Narrow", Archivo, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--popisok);
}

/* ── Prvky ──────────────────────────────────────────────────── */

/* Medová linka: 64 × 3 px, rádius 2. Stojí nad nadpisom sekcie
   alebo nad každou položkou v zozname. */
.linka::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--med);
  margin-bottom: 20px;
}

/* Plôšky - vždy plne zaoblené. */
.ploska {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  border-radius: var(--r-plosky);
  background: var(--plocha);
  color: var(--text2);
  font: 600 11px/1.4 "Archivo Narrow", Archivo, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ploska:hover { text-decoration: none; background: var(--linka); }
/* Medová plôška kategórie zostáva na detaile článku, kde je jedna.
   Vo výpisoch ju nahrádza menovka nižšie - tridsaťdeväť medových plôšok
   pod sebou už nič nezvýrazňuje, len zafarbí stránku. */
.ploska--kategoria { background: var(--med); color: var(--na-mede); }

/* Kategória vo výpise je menovka, nie plôška: tá istá veľkosť ako dátum
   vedľa nej, len v nočnej modrej. Med sa objaví, až keď na ňu človek
   prejde - tak je to zvýraznenie, nie podklad. */
.kategoria-menovka {
  font: 600 11px/1.4 "Archivo Narrow", Archivo, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--modra);
  background-image: linear-gradient(var(--med), var(--med));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  padding-bottom: 2px;
}
.kategoria-menovka:hover { text-decoration: none; background-size: 100% 3px; }
.ploska--aktivny { background: var(--modra); color: #fff; }
.ploska--aktivny:hover { background: var(--modra); }
.ploska--neaktivny { background: transparent; border: 1px solid var(--linka); }
.ploska--tmava { background: rgba(255,255,255,.14); color: #fff; }

/* Tlačidlá a odkazy. */
.tlacidlo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--r-plosky);
  background: var(--modra);
  color: #fff;
  font: 600 16px/1 Archivo, Arial, sans-serif;
  cursor: pointer;
}
.tlacidlo:hover { text-decoration: none; background: var(--uhol); }
.tlacidlo--vedlajsie { background: var(--plocha); color: var(--modra); }
.tlacidlo--vedlajsie:hover { background: var(--linka); }
/* Nezvratná akcia. Farba nie je jediný nosič informácie - text tlačidla
   hovorí, čo sa stane, a formulár sa pýta na potvrdenie. */
.tlacidlo--nebezpecne { background: #7a2020; }
.tlacidlo--nebezpecne:hover { background: #5c1818; }

/* Textové odkazy verzálkami so šípkou. */
.odkaz-viac {
  font: 600 11px/1.4 "Archivo Narrow", Archivo, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--modra);
  white-space: nowrap;
}

/* Formulárové pole - bez rámu a bez výplne, len spodná linka.
   Popisok nad poľom, nikdy nie iba placeholder. */
.pole { display: flex; flex-direction: column; gap: 6px; }
/* Menovka poľa nie je popisok. Popisok sa dá prehliadnuť, menovka hovorí,
   čo sa má do poľa napísať - preto o stupeň väčšia a tmavšia. */
.pole label { font: 600 12px/1.4 "Archivo Narrow", Archivo, Arial, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); }
.pole input, .pole textarea {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--linka);
  border-radius: 0;
  background: transparent;
  color: var(--uhol);
  font: 400 18px/1.6 Archivo, Arial, sans-serif;
  width: 100%;
}
.pole input::placeholder { color: var(--popisok); }

/* ── Kostra stránky ─────────────────────────────────────────── */
/* .obal drží iba horizontálne odsadenie. Keby použil skratku padding,
   prebil by ju každý blok, ktorý si nastaví vlastné zvislé odsadenie -
   hlavička a päta by potom sedeli inde než obsah. */
.obal { max-width: var(--sirka); margin: 0 auto; padding-inline: 40px; }

/* Hlavička sedí na tom istom piesku ako obsah - meniť pod ňou farbu by
   z osobnej stránky urobilo aplikáciu. Oddeľuje ju vlas rovnakej hrúbky
   a farby, akú má päta: stránka tak má hore aj dole ten istý predel
   a obsah medzi nimi jasný začiatok. */
.hlavicka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-block: 24px;
  border-bottom: 1px solid var(--linka);
  margin-bottom: 40px;
}

/* Značka je monogram a meno. Samotný text nie je značka, je to len prvý
   riadok stránky; monogram dá stránke bod, ktorý si človek zapamätá,
   a je to jediné miesto, kde nočná modrá a med stoja priamo na sebe. */
.znacka {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--modra);
}
.znacka:hover { text-decoration: none; }
.znacka-monogram {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--modra);
  color: var(--med);
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.znacka-meno {
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.015em;
}
/* Navigácia v jednom riadku - päť položiek sa nezlomí, riadok sa posúva
   vodorovne. Žiadne hamburgerové menu. */
.navigacia {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.navigacia::-webkit-scrollbar { display: none; }
/* Odchod zo správy a odhlásenie stoja mimo navigácie - v jednom rade
   s ňou vyzeral odkaz „Na web" ako piata sekcia, hoci je to východ. */
.admin-akcie { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.navigacia .ploska[aria-current="page"] { background: var(--uhol); color: #fff; }

main { display: block; padding-bottom: 96px; }

/* Päta má dva prvky, nie tri. Pri troch v space-between skončili odkazy
   v strede, kde nevyzerali ako zoznam, ale ako text, ktorý tam niekto
   zabudol. Vľavo je copyright, vpravo odkazy preč zo stránky. */
.paticka {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  padding-block: 32px 56px;
  border-top: 1px solid var(--linka);
  color: var(--popisok);
  font-size: 14px;
}
/* Odkazy v päte sú text, nie plôšky - sú to vedľajšie odkazy, nie akcia.
   V riadku pri pravom okraji držia pravú stranu päty jednou linkou; keď sa
   päta zlomí na mobile, zarovnajú sa naspäť doľava, aby nestáli osamote.
   Zvislá medzera v gape je pre prípad, že sa riadok predsa zalomí. */
.paticka-odkazy {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 20px;
}
.paticka-odkazy a { color: var(--popisok); }
.paticka-odkazy a:hover { color: var(--modra); }
@media (max-width: 640px) {
  .paticka-odkazy { justify-content: flex-start; }
}

/* ── Zloženiny: domovská stránka ────────────────────────────── */
/* Úvodná veta stojí nad mriežkou, nie v nej. Ako karta zaberala jedno
   z dvoch políčok a vedľa nej ostávalo 590 px prázdna. Jedna veta
   nepotrebuje rám, potrebuje šírku - a menšia sadzba než hlavná karta,
   aby si s ňou nekonkurovala. */
.uvodne { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.uvodne p { margin: 0; }
.uvodne-veta {
  max-width: 46ch;
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--modra);
}


/* Karty zostávajú len na domovskej stránke. */
.domov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.domov > .siroke { grid-column: 1 / -1; }

.karta {
  background: var(--karta);
  border-radius: var(--r-karta);
  padding: 32px;
}

/* Hlavná karta na domovskej stránke. */
.karta--hlavna {
  background: var(--modra);
  color: #fff;
  padding: 40px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
}
.karta--hlavna .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: auto; }
.karta--hlavna .meta .popisok { color: rgba(255,255,255,.72); }
.karta--hlavna h2 { color: #fff; font-size: 44px; margin-bottom: 16px; }
.karta--hlavna h2 a { color: #fff; }
.karta--hlavna p { color: rgba(255,255,255,.82); font-size: 19px; max-width: 52ch; }

.karta--med { background: var(--med); color: var(--na-mede); }
.karta--med .popisok, .karta--med label { color: var(--na-mede); opacity: .75; }
.karta--med h3 { color: var(--na-mede); }
.karta--med .pole input { border-bottom-color: rgba(44,32,3,.3); color: var(--na-mede); }

.karta--tmava { background: var(--uhol); color: #fff; }
.karta--tmava h3, .karta--tmava a { color: #fff; }
.karta--tmava .popisok { color: rgba(255,255,255,.6); }

.karta-hlava { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.karta-hlava .odkaz-viac { margin-left: auto; }
.karta--tmava .karta-hlava .odkaz-viac { color: var(--med); }

/* Sekcia so zoznamom kariet. */
.sekcia-hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin: 56px 0 24px;
}
.sekcia-hlava .odkaz-viac { margin-left: auto; }

.karta-clanok { display: flex; flex-direction: column; gap: 12px; }
.karta-clanok .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.karta-clanok h3 { font-size: 26px; }
.karta-clanok p { color: var(--text2); font-size: 17px; line-height: 1.6; }


.odkazy-ja { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Z archívu - holý zoznam s linkami. Stránka sa nemá skončiť ďalším
   radom kariet; tichý zoznam ju zavrie a odlíši staré od nového. */
.archiv-pas { margin-top: 64px; }
.archiv-zoznam { margin-top: 16px; border-top: 1px solid var(--linka); }
.archiv-polozka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--linka);
}
.archiv-polozka .nazov { font-size: 19px; font-weight: 600; }
.archiv-polozka .popisok { margin-left: auto; }

/* ── Zloženiny: vnútorné stránky ────────────────────────────── */
/* Vnútorné stránky nepoužívajú karty. Rytmus drží medová linka nad
   každou položkou a veľké medzery. */
.hlava-stranky { margin: 24px 0 48px; }
.hlava-stranky p { max-width: var(--stlpec); margin-top: 16px; }

.filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; }

/* Medzera medzi položkami v zoznamoch bez kariet: 36 – 56 px. */
/* Položky výpisu oddeľuje vlas, nie medová linka. Tridsaťdeväť medových
   liniek pod sebou nie je rytmus, je to tapeta. Medová linka zostáva nad
   nadpisom stránky a nad sekciou, teda tam, kde je na stránke jedna. */
.zoznam { display: flex; flex-direction: column; }
.polozka { display: flex; flex-direction: column; gap: 12px; padding-block: 44px; }
.polozka + .polozka { border-top: 1px solid var(--linka); }
.polozka .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.polozka p { color: var(--text2); max-width: var(--stlpec); }

/* Detail článku a textové stránky. Stĺpec je úzky zámerne, ale musí byť
   uprostred: pri zarovnaní doľava zostávalo v 1240 px obale vpravo 620 px
   prázdna, čo nevyzerá vzdušne, ale nedokončene. */
.clanok { max-width: var(--stlpec); margin-inline: auto; }
.clanok .navrat { display: inline-block; margin-bottom: 32px; }
.clanok .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.clanok h1 { margin-bottom: 20px; }
/* Perex nesie zostup z nadpisu do sadzby sám. Prvý odsek tela mal chvíľu
   20 px ako lede, ale články sú väčšinou na jednu minútu a prvý odsek býva
   jediná krátka veta - sadzať „Stačí jednoduchý kúsok kódu:" ako úvodný
   odsek vyzeralo nedopatrením, nie dôrazom. */
.clanok .perex { font-size: 24px; margin-bottom: 32px; }

.telo > * + * { margin-top: 24px; }
.telo h2 { font-size: 30px; margin-top: 48px; }
.telo h3 { margin-top: 40px; }
.telo p { line-height: 1.7; }
.telo ul, .telo ol { padding-left: 24px; }
.telo li + li { margin-top: 8px; }
.telo img { max-width: 100%; height: auto; border-radius: var(--r-plocha); }
.telo a { text-decoration: underline; text-underline-offset: 3px; }
.telo code { font-size: .9em; background: var(--plocha); padding: 2px 6px; border-radius: 4px; }
.telo pre { overflow-x: auto; background: var(--uhol); color: #fff; padding: 20px; border-radius: var(--r-plocha); }
.telo pre code { background: none; padding: 0; color: inherit; }
.telo table { width: 100%; border-collapse: collapse; }
.telo th, .telo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linka); }
.tabulka-obal { overflow-x: auto; }

/* Citát v článku - na mede. */
.telo blockquote {
  margin: 40px 0;
  padding: 24px 28px;
  background: var(--med);
  color: var(--na-mede);
  border-radius: var(--r-plocha);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
}
.telo blockquote p + p { margin-top: 12px; }

.stitky { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; }

/* Koniec článku ponúka ďalší. Bez toho text jednoducho skončí a čitateľ
   odíde práve v momente, keď je najochotnejší pokračovať. */
.dalej { margin-top: 64px; }
.dalej-odkaz {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 22px 24px;
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r-plocha);
}
.dalej-odkaz:hover { text-decoration: none; border-color: var(--modra); }
.dalej-nazov {
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--modra);
}
.dalej-sipka { display: inline-block; margin-left: 6px; }

/* Mrak tagov. */
.mrak { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dotykové ciele od 44 px, na mobile aj na desktope: navigácia, filtre,
   štítky, mrak tagov a odkazové plôšky. Menovka kategórie vedľa dátumu
   pod toto nespadá - je to popisok v riadku, nie ovládací prvok, a dizajn
   ju drží malú. */
.navigacia .ploska,
.filtre .ploska,
.mrak .ploska,
.stitky .ploska,
.odkazy-ja .tlacidlo {
  min-height: 44px;
  padding: 8px 18px;
}

/* ── Správa ─────────────────────────────────────────────────── */
/* Správa vyzerá ako web - tá istá schéma, tá istá hlavička s plôškami,
   tie isté karty. Že človek nie je na verejnej stránke, hovorí medová
   bodka pri značke a slovo „Správa", nie iná farba podkladu. Tmavší
   podklad sa tu kedysi skúšal, ale mal vedľajší účinok: plôšky navigácie
   naň splynuli, lebo majú presne tú farbu. */
body.admin { background: var(--piesok); }
/* V správe je monogram obrátený: med na podklade, modrá v písme. Tá istá
   značka, iná farba - povie „si vnútri" bez toho, aby sa menil podklad. */
body.admin .znacka-monogram { background: var(--med); color: var(--modra); }

/* Prihlásenie je jediná stránka bez hlavičky - karta na stred obrazovky. */
.prihlasenie {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding-block: 40px;
}
.prihlasenie .karta { width: 100%; max-width: 420px; }
/* Medzera medzi poľami musí byť zreteľne väčšia než medzera vnútri poľa,
   inak si čitateľ priradí nápovedu k nasledujúcej menovke namiesto k poľu,
   ku ktorému patrí. */
.formular { display: flex; flex-direction: column; gap: 36px; align-items: flex-start; }
.formular .pole { width: 100%; }

/* Hlásenie. Úspech a chyba majú ten istý tvar a líšia sa len zvislým
   akcentom - dve rôzne výplne pre dve hlášky tej istej triedy vyzerali ako
   prvky z dvoch aplikácií. Farby idú z tokenov; predtým tu boli natvrdo
   zapísané hexy, hoci komentár nad nimi tvrdil opak. */
.sprava,
.chyba {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: var(--r-plocha);
  border-left: 3px solid;
  background: var(--karta);
  font-size: 16px;
}
.sprava { border-left-color: var(--med); color: var(--uhol); }
.chyba { border-left-color: var(--chyba); color: var(--na-chybe); }

.pocty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.pocet {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  border-radius: var(--r-plocha);
  background: var(--karta);
}
.pocet b {
  font: 600 28px/1.2 "Archivo Narrow", Archivo, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--modra);
}
/* Neuverejnené je jediný počet, s ktorým sa dá niečo robiť. Keď nie je
   nulový, dlaždica sa stáva odkazom a dostáva medovú linku z manuálu -
   ostatné štyri sú len na pozeranie a vyzerajú tak. */
a.pocet:hover { text-decoration: none; }
.pocet--pozor::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: 10px;
  border-radius: 2px;
  background: var(--med);
}

.admin-tabulka { width: 100%; border-collapse: collapse; font-size: 16px; }
.admin-tabulka th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--linka);
  text-align: left;
  font: 600 11px/1.4 "Archivo Narrow", Archivo, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--popisok);
  white-space: nowrap;
}
.admin-tabulka td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--linka);
  /* middle, nie baseline: v riadku stoja vedľa seba text a plôšky stavu
     a pri baseline sedeli voči sebe mierne posunuté. */
  vertical-align: middle;
}
/* Celý riadok je pracovná jednotka, tak nech na ukázanie odpovie. */
.admin-tabulka tbody tr:hover { background: var(--karta); }
/* Popis dosahu v tabuľke je bežný text, nie verzálkový popisok - v riadku
   vedľa názvu článku by sa verzálky čítali horšie než to, čo označujú. */
.admin-tabulka .dosah { color: var(--text2); font-size: 14px; }
.admin-tabulka .cislo { text-align: right; font-variant-numeric: tabular-nums; }
.admin-tabulka .datum {
  font-variant-numeric: tabular-nums;
  color: var(--popisok);
  white-space: nowrap;
}

/* Editor článku. Jeden stĺpec - písanie je čítanie zhora nadol, nie
   vypĺňanie mriežky. Text dostane najviac miesta. */
.editor { max-width: 860px; margin-top: 32px; }
/* Polia formulárov, ktoré sa naozaj vypĺňajú - správa aj kontakt.
   Samotné podčiarknutie z dizajn manuálu je pre jedno pole v karte; keď má
   človek vypísať formulár, musí na prvý pohľad vidieť, kam sa píše. Preto
   biela plocha, rám a výplň. */
.editor .pole input,
.editor .pole select,
.editor .pole textarea,
.kontakt .pole input,
.kontakt .pole textarea {
  padding: 10px 14px;
  border: 1px solid var(--linka);
  background: var(--karta);
}
.editor .pole textarea,
.kontakt .pole textarea {
  padding: 12px 14px;
  border-radius: var(--r-plocha);
  line-height: 1.7;
  resize: vertical;
}
/* Polia majú rádius plochy, nie plôšky. Plné zaoblenie na webe znamená
   „toto sa dá stlačiť" - plôšky a tlačidlá. Pole, do ktorého sa píše, je
   plocha na obsah, a keď mal input 999 px a textarea vedľa neho 16 px,
   vyzeralo to ako dva prvky z dvoch rôznych formulárov. */
.editor .pole input,
.editor .pole select,
.kontakt .pole input {
  border-radius: var(--r-plocha);
}
.editor .pole textarea[name="text"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
}
.editor .pole select { min-height: 44px; }

/* Prihlásenie stojí na bielej karte, tak by biele pole splynulo. Rám je
   ten istý, výplň berie farbu podkladu stránky. */
.prihlasenie .pole input {
  padding: 10px 14px;
  border: 1px solid var(--linka);
  border-radius: var(--r-plocha);
  background: var(--piesok);
}
.prihlasenie .pole label { color: var(--text2); }

/* Zamerané pole. Rám sa zafarbí a okolo pribudne prstenec - samotná zmena
   farby rámu je pri tenkej linke sotva viditeľná. */
.editor .pole input:focus-visible,
.editor .pole select:focus-visible,
.editor .pole textarea:focus-visible,
.kontakt .pole input:focus-visible,
.kontakt .pole textarea:focus-visible,
.prihlasenie .pole input:focus-visible {
  outline: none;
  border-color: var(--modra);
  box-shadow: 0 0 0 3px rgba(21, 47, 75, .15);
}

/* Popisok nad vypĺňaným poľom nesie tmavšiu farbu než pri čítacích
   stránkach - je to pokyn, čo vyplniť, nie vedľajšia poznámka. */
.editor .pole label,
.kontakt .pole label { color: var(--text2); }
/* Vysvetlivka pod poľom je veta, nie štítok - verzálky z .popisok by z nej
   spravili krik cez dva riadky. */
.napoveda { margin: 2px 0 0; color: var(--popisok); font-size: 14px; line-height: 1.5; }

/* Kategória, dosah a dátum sú krátke polia - vedľa seba, kým je miesto.
   Šírka je nutná: .formular má align-items: flex-start, takže by sa mriežka
   scvrkla na šírku obsahu a stĺpce by sa poskladali pod seba. */
.dvojica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  width: 100%;
}
/* Rovnaká šírka ako editor - formuláre v správe sa nemajú roztiahnuť cez
   celý obal, keď majú dve polia. */
.dvojica--uzka { max-width: 860px; }

/* Ďalšia sekcia na tej istej stránke. */
.dalsia-sekcia { margin-top: 64px; }

.prepinac { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.prepinac input { width: 20px; height: 20px; accent-color: var(--modra); }

.akcie { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Stav vo výpise. Farba nie je jediný nosič informácie - rozlišuje ich aj
   text.
   Med patrí tomu, čo si žiada pozretie, nie tomu, čo je v poriadku. Predtým
   to bolo naopak: bežný stav „Vonku" mal medovú plôšku, takže tridsaťdeväť
   zo štyridsiatich siedmich riadkov kričalo, a stav, ktorý treba riešiť,
   bol v tichej modrej. V tabuľke, kde je väčšina riadkov rovnaká, nesie
   informáciu výnimka - bežný stav preto plôšku nedostáva vôbec. */
.stav {
  display: inline-block;
  padding: 2px 12px;
  border-radius: var(--r-plosky);
  font-size: 13px;
  white-space: nowrap;
}
.stav--bezny { padding-left: 0; background: none; color: var(--popisok); }
.stav--skryty { background: var(--plocha); color: var(--text2); }
.stav--pozor { background: var(--med); color: var(--na-mede); }
.admin-tabulka .stavy { display: flex; flex-wrap: wrap; gap: 6px; }

/* Nadpis stránky so sprievodnou akciou vpravo. Iba v správe - na webe
   je pod nadpisom perex, ktorý musí zostať pod ním, nie vedľa neho. */
/* Mriežka, nie flex: medová linka je tiež položka a vo flexe by jej
   flex-basis prebil šírku 64 px a roztiahol ju cez celý riadok. V mriežke
   si vypýta celý riadok cez grid-column a šírku si podrží. */
body.admin .hlava-stranky {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px 24px;
}
body.admin .hlava-stranky.linka::before { grid-column: 1 / -1; margin-bottom: 0; }

/* Nadpisy správy sú menšie než na webe - je to pracovná plocha, nie
   redakčná stránka. Stálo to šesťkrát v šablónach ako style="font-size",
   takže zmena v CSS sa do správy nepremietla. */
body.admin h1 { font-size: 32px; }
body.admin h2 { font-size: 24px; }
body.admin .sprava, body.admin .chyba { max-width: 66ch; }
.prihlasenie .hlava-stranky { margin: 0 0 28px; }

/* Vysvetlivka nad tabuľkou. Vlastná trieda, nie style v šablóne - inak sa
   tá istá dvojica hodnôt opisuje pri každom výskyte. */
.vysvetlivka { max-width: 66ch; margin-bottom: 32px; }

/* ── Editor Markdownu (EasyMDE) ─────────────────────────────── */
/* EasyMDE prináša vlastný vzhľad zo sveta Bootstrapu. Tu sa prekrýva
   tokenmi schémy, aby editor vyzeral ako zvyšok správy. */

.EasyMDEContainer { width: 100%; }

.editor-toolbar {
  padding: 6px;
  border: 1px solid var(--linka);
  border-bottom: 0;
  border-radius: var(--r-plocha) var(--r-plocha) 0 0;
  background: var(--karta);
  opacity: 1;
}
.editor-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-plosky);
  color: var(--modra);
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
  background: var(--plocha);
  border: 0;
  color: var(--uhol);
}
.editor-toolbar i.separator { border-left: 1px solid var(--linka); border-right: 0; margin: 0 6px; }

/* Ikony sú masky s vloženým SVG, nie Font Awesome. Celý font kvôli
   trinástim obrázkom by bol väčší než samotný editor. */
.editor-toolbar .fa {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: center / 20px 20px no-repeat;
  mask: center / 20px 20px no-repeat;
}
.editor-toolbar .fa-bold { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M7%205h5.5a3.5%203.5%200%200%201%200%207H7z%20M7%2012h6.5a3.5%203.5%200%200%201%200%207H7z'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M7%205h5.5a3.5%203.5%200%200%201%200%207H7z%20M7%2012h6.5a3.5%203.5%200%200%201%200%207H7z'/></svg>"); }
.editor-toolbar .fa-italic { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M15%205h-5%20M14%2019H9%20M14%205l-4%2014'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M15%205h-5%20M14%2019H9%20M14%205l-4%2014'/></svg>"); }
.editor-toolbar .fa-header { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M6%205v14%20M18%205v14%20M6%2012h12'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M6%205v14%20M18%205v14%20M6%2012h12'/></svg>"); }
.editor-toolbar .fa-quote-left { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%206v12%20M10%208h9%20M10%2012h9%20M10%2016h6'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%206v12%20M10%208h9%20M10%2012h9%20M10%2016h6'/></svg>"); }
.editor-toolbar .fa-list-ul { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%206h.01%20M4%2012h.01%20M4%2018h.01%20M9%206h11%20M9%2012h11%20M9%2018h11'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%206h.01%20M4%2012h.01%20M4%2018h.01%20M9%206h11%20M9%2012h11%20M9%2018h11'/></svg>"); }
.editor-toolbar .fa-list-ol { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M9%206h11%20M9%2012h11%20M9%2018h11%20M3.5%204.8h1.2v3.4%20M3.3%2011h2.2l-2.2%203.2h2.2%20M3.4%2016.6h2v1.4h-1.6%20M3.8%2018h1.6v1.4h-2'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M9%206h11%20M9%2012h11%20M9%2018h11%20M3.5%204.8h1.2v3.4%20M3.3%2011h2.2l-2.2%203.2h2.2%20M3.4%2016.6h2v1.4h-1.6%20M3.8%2018h1.6v1.4h-2'/></svg>"); }
.editor-toolbar .fa-link { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M10.5%2013.5a4%204%200%200%200%205.7%200l2.5-2.5a4%204%200%200%200-5.7-5.7l-1.3%201.3%20M13.5%2010.5a4%204%200%200%200-5.7%200l-2.5%202.5a4%204%200%200%200%205.7%205.7l1.3-1.3'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M10.5%2013.5a4%204%200%200%200%205.7%200l2.5-2.5a4%204%200%200%200-5.7-5.7l-1.3%201.3%20M13.5%2010.5a4%204%200%200%200-5.7%200l-2.5%202.5a4%204%200%200%200%205.7%205.7l1.3-1.3'/></svg>"); }
.editor-toolbar .fa-code { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M9%2018l-6-6%206-6%20M15%206l6%206-6%206'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M9%2018l-6-6%206-6%20M15%206l6%206-6%206'/></svg>"); }
.editor-toolbar .fa-table { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205h18v14H3z%20M3%2010h18%20M9%2010v9%20M15%2010v9'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205h18v14H3z%20M3%2010h18%20M9%2010v9%20M15%2010v9'/></svg>"); }
.editor-toolbar .fa-minus { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2012h16'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2012h16'/></svg>"); }
.editor-toolbar .fa-eye { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M2%2012s3.6-6.5%2010-6.5S22%2012%2022%2012s-3.6%206.5-10%206.5S2%2012%202%2012z%20M12%2015a3%203%200%201%200%200-6%203%203%200%200%200%200%206z'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M2%2012s3.6-6.5%2010-6.5S22%2012%2022%2012s-3.6%206.5-10%206.5S2%2012%202%2012z%20M12%2015a3%203%200%201%200%200-6%203%203%200%200%200%200%206z'/></svg>"); }
.editor-toolbar .fa-columns { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205h18v14H3z%20M12%205v14'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205h18v14H3z%20M12%205v14'/></svg>"); }
.editor-toolbar .fa-arrows-alt { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%209V4h5%20M20%209V4h-5%20M4%2015v5h5%20M20%2015v5h-5'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%209V4h5%20M20%209V4h-5%20M4%2015v5h5%20M20%2015v5h-5'/></svg>"); }

/* Plocha na písanie. Serifové písmo by tu miatlo - text je Markdown,
   teda zdroj, nie hotová sadzba. */
.EasyMDEContainer .CodeMirror {
  border: 1px solid var(--linka);
  border-radius: 0 0 var(--r-plocha) var(--r-plocha);
  background: var(--karta);
  color: var(--uhol);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.7;
  padding: 8px 4px;
  min-height: 420px;
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--modra); }
.EasyMDEContainer .CodeMirror-selected { background: var(--plocha); }
.EasyMDEContainer .cm-s-easymde .cm-header { color: var(--modra); }
.EasyMDEContainer .cm-s-easymde .cm-link,
.EasyMDEContainer .cm-s-easymde .cm-url { color: var(--modra); }
.EasyMDEContainer .cm-s-easymde .cm-comment { background: var(--plocha); border-radius: 4px; }
.EasyMDEContainer .CodeMirror-placeholder { color: var(--popisok); }

/* Náhľad. Obsah je zabalený do .telo, tak preberá typografiu článku
   a nič sa nedefinuje druhýkrát. */
.editor-preview,
.editor-preview-side {
  background: var(--piesok);
  padding: 24px;
}
.editor-preview-side { border-color: var(--linka); }
.editor-preview .telo,
.editor-preview-side .telo { max-width: var(--stlpec); }

.editor-statusbar {
  padding: 8px 4px 0;
  color: var(--popisok);
  font: 600 11px/1.4 "Archivo Narrow", Archivo, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.editor-statusbar .autosave { text-transform: none; letter-spacing: 0; font-size: 13px; }
.editor-statusbar .rozsah { font-variant-numeric: tabular-nums; }

/* Na celú obrazovku vrátane náhľadu vedľa seba. */
.EasyMDEContainer .CodeMirror-fullscreen,
.editor-preview-side { z-index: 20; }
.editor-toolbar.fullscreen { z-index: 21; background: var(--karta); }

/* ── Mobil ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Mriežky sa zlomia pod 300 px šírky stĺpca. */
  .domov { grid-template-columns: minmax(0, 1fr); }
  .karta--hlavna h2 { font-size: 34px; }
}

@media (max-width: 640px) {
  /* Odsadenie od okraja 16 px. Telo textu zostáva 18 px. */
  .obal { padding-inline: 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 21px; }
  .perex { font-size: 20px; }
  .karta { padding: 24px; }
  .karta--hlavna { padding: 24px; min-height: 0; }
  .karta--hlavna h2 { font-size: 28px; }
  .karta--hlavna p { font-size: 17px; }
  .karta-clanok h3 { font-size: 22px; }
  .zoznam { gap: 36px; }
  .sekcia-hlava { margin-top: 40px; }
  /* Polia idú na celú šírku, tlačidlo pod nimi. */
  .formular-riadok { flex-direction: column; align-items: stretch; }
  .formular-riadok .tlacidlo { width: 100%; }
  .formular .tlacidlo { width: 100%; }
  .prihlasenie { padding-block: 24px; }
  .pocty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor .akcie .tlacidlo { width: 100%; }
  /* Náhľad vedľa seba sa na mobile nezmestí; tlačidlo ostáva skryté
     cez no-mobile v EasyMDE, editor jednoducho zúzi. */
  .EasyMDEContainer .CodeMirror { min-height: 320px; font-size: 14px; }
  .editor-toolbar button { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Kontaktný formulár ─────────────────────────────────────── */

.kontakt { max-width: 620px; margin-top: 32px; }
/* Kontaktný formulár má pod prvým poľom nápovedu, takže potrebuje väčšiu
   medzeru medzi poľami než formuláre v správe - inak si čitateľ priradí
   nápovedu k menovke pod ňou namiesto k poľu nad ňou. */
.kontakt .formular { gap: 40px; }
.kontakt .napoveda { margin-top: 6px; }
.kontakt .sprava { display: inline-block; margin-bottom: 16px; }
.kontakt .tlacidlo { min-width: 160px; }
/* Druhá cesta pod formulárom. Odsadená od tlačidla natoľko, aby to nebola
   jeho poznámka pod čiarou, ale samostatná možnosť. */
.kontakt .inak { margin-top: 28px; }
/* Podčiarknuté natrvalo. Odkazy na stránke sú modré a v bežnom texte sa
   od neho farbou odlíšia; tento stojí v šedej nápovede, kde by bez čiary
   vyzeral ako obyčajné slovo a nikto by naň neklikol. */
.kontakt .inak a {
  color: var(--modra);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linka);
}
.kontakt .inak a:hover { text-decoration-color: var(--modra); }

/* Pasca na roboty. Nesmie byť display:none ani hidden - časť robotov taký
   vstup preskočí. Preto sa odsúva mimo obrazovku a pre človeka je vypnutá
   aj cez aria-hidden a tabindex v šablóne. */
.pasca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Kryty ──────────────────────────────────────────────────── */
/* Zástupca obrázka. Články z archívu žiadne nemajú, ale stránka bez
   čohokoľvek obrazového vyzerá ako výpis z databázy. Farba sa počíta
   z kategórie, takže nesie informáciu - tá istá rubrika má vždy tú istú
   plochu. Odtieň dodáva šablóna cez --odtien. */
.kryt {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-plocha);
  background: linear-gradient(140deg,
    hsl(var(--odtien) 38% 30%), hsl(var(--odtien) 42% 17%));
}
@supports (color: oklch(0.3 0.06 252)) {
  .kryt {
    background: linear-gradient(140deg,
      oklch(0.42 0.08 var(--odtien)), oklch(0.27 0.06 var(--odtien)));
  }
}

/* Medové pruhy. Nie je to ozdoba zvonku - je to medová linka z dizajn
   manuálu (3 px, tá istá, čo stojí nad nadpismi), len zopakovaná cez
   plochu. Stránka tak má jeden vlastný motív namiesto náhodného tvaru. */
.kryt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(var(--sklon, 115deg),
    transparent 0 var(--pruh, 24px),
    rgba(240, 186, 89, .22) var(--pruh, 24px) calc(var(--pruh, 24px) + 3px));
}

/* Iniciála kategórie. Je to grafika, nie text - preto nízka sýtosť.
   Písmeno stojí celé vnútri krytu: orezané o šesť pixelov, ako bolo
   predtým, nevyzeralo ako zámer, ale ako chyba v rozložení. */
.kryt span {
  position: absolute;
  z-index: 1;
  left: 16px;
  bottom: 10px;
  color: rgba(255, 255, 255, .17);
  font: 600 64px/0.78 "Archivo Narrow", Archivo, Arial, sans-serif;
  letter-spacing: -0.03em;
  user-select: none;
}

/* Kryt na karte článku ide na plnú šírku karty, teda cez jej odsadenie. */
.karta-clanok { overflow: hidden; }
.karta-clanok .text { display: flex; flex-direction: column; gap: 12px; }
.karta-clanok .kryt span { font-size: 84px; }
.karta-clanok .kryt {
  height: 128px;
  margin: -32px -32px 20px;
  border-radius: 0;
}

/* Vo výpise stojí kryt vedľa textu. Pod 720 px sa skrýva - na úzkej
   obrazovke by len odtláčal obsah, ktorý si prišiel človek prečítať. */
.polozka .kryt { display: none; }
.polozka .text { display: flex; flex-direction: column; gap: 12px; }

/* Pás nad článkom. Nižší než kryt na karte, aby netlačil nadpis pod ohyb. */
.kryt--pas {
  height: 180px;
  max-width: var(--stlpec);
  margin-bottom: 32px;
}
.kryt--pas span { left: 24px; bottom: 14px; font-size: 132px; }

/* Hlavná karta si drží vlastnú modrú a preberá len ten istý motív, oveľa
   slabšie - pod nadpisom a perexom musí zostať text čitateľný. */
.karta--hlavna { position: relative; overflow: hidden; }
.karta--hlavna::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg,
    transparent 0 34px, rgba(240, 186, 89, .09) 34px 37px);
  pointer-events: none;
}
.karta--hlavna > * { position: relative; z-index: 1; }

/* ── Pohyb ──────────────────────────────────────────────────── */
/* Striedmo a krátko. Cieľ je, aby stránka odpovedala, nie aby sa hrala. */
@media (prefers-reduced-motion: no-preference) {
  .ploska, .tlacidlo { transition: background-color .15s ease, color .15s ease; }
  h1 a, h2 a, h3 a, .telo a, .archiv-polozka a {
    transition: background-size .28s cubic-bezier(.2, .7, .3, 1);
  }
  .karta-clanok, .archiv-polozka {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .karta-clanok:hover, .karta-clanok:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(21, 47, 75, .11);
  }
  .archiv-polozka:hover { transform: translateY(-3px); border-color: var(--med); }
  .kryt span { transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
  .karta-clanok:hover .kryt span { transform: translateY(-4px) scale(1.05); }
  .dalej-odkaz { transition: border-color .2s ease, box-shadow .2s ease; }
  .dalej-odkaz:hover { box-shadow: 0 14px 32px rgba(21, 47, 75, .11); }
  .dalej-sipka { transition: transform .2s ease; }
  .dalej-odkaz:hover .dalej-sipka { transform: translateX(4px); }
}

@media (min-width: 720px) {
  /* Vo výpise dostane kryt vlastný stĺpec vľavo. */
  .polozka {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .polozka .kryt { display: block; aspect-ratio: 4 / 3; }
}

/* ── Pás O mne ──────────────────────────────────────────────── */
/* Bez karty. Na domovskej je to jediné miesto, kde hovorím ja a nie
   články, tak vyzerá inak než všetko ostatné - veľká sadzba na holom
   podklade, medzi linkami. */
.pas-o-mne {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--linka);
}
.pas-o-mne .vyrok {
  margin-top: 16px;
  max-width: 30ch;
  color: var(--modra);
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  /* Na úzkej obrazovke by 32 px z 30ch spravilo štyri slová na riadok. */
  font-size: clamp(24px, 5.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}

/* ── Filtre ─────────────────────────────────────────────────── */
/* Kategórií je štrnásť. Všetky naraz nad prvým článkom boli dva riadky
   hluku, tak sú vidieť tie s najviac článkami a zvyšok sa rozbalí. */
.filtre { align-items: center; }
.filtre-dalsie { position: relative; }
.filtre-dalsie summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding: 8px 18px;
}
.filtre-dalsie summary::-webkit-details-marker { display: none; }
.filtre-dalsie summary::after { content: " +"; }
.filtre-dalsie[open] summary::after { content: " –"; }
.filtre-dalsie[open] summary { background: var(--plocha); border-color: transparent; }

/* Zoznam sa otvára pod plôškou, aby neposúval riadok filtrov. */
.filtre-zoznam {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  /* Plôška stojí na konci riadka filtrov, tak sa zoznam zarovnáva doprava.
     Zľava by pri poslednej položke pretiekol okraj okna. */
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: max-content;
  max-width: min(560px, 86vw);
  padding: 16px;
  border-radius: var(--r-plocha);
  background: var(--karta);
  box-shadow: 0 16px 40px rgba(21, 47, 75, .14);
}