/* ══════════════════════════════════════════════════════════════════════════
   blog.css — JEDINÝ zdroj typografie a tabuliek pre public/blog/*.html
   ──────────────────────────────────────────────────────────────────────────
   Prečo existuje: do 10. 9. 2026 mal každý blog vlastný inline <style>.
   59 blogov = 31 rôznych verzií toho istého štýlu. Oprava jedného blogu
   ostatných 58 nikdy nedobehla. Tento súbor vlastní čítaciu plochu článku
   (šírka riadku, nadpisy, odseky, zoznamy, tabuľky); zvyšok (hlavička,
   pätička, kvíz, pozadia) ostáva inline v jednotlivých blogoch.

   ⛔ NIKDY sem nepridávaj `table-layout: fixed` ani `overflow-wrap: anywhere`
   na bunky tabuľky. Presne tá dvojica rozsekala na telefóne slovo „Stupeň"
   na „S t u p e ň": `fixed` rozdelil šírku rovnakým dielom medzi stĺpce
   a `anywhere` dovolil zalomiť po jednotlivých písmenách, takže tabuľka
   NIKDY nepretiekla — a stráž na pretečenie ostala zelená nad nečitateľnou
   stranou. Používaj `overflow-wrap: break-word`, ktorý zalomí len slovo
   dlhšie než celý riadok a minimálnu šírku stĺpca neznižuje.

   Stráži to `tests/integration/blog-citatelnost-guard.test.js`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Čítacia plocha ──────────────────────────────────────────────────────
   660 px s odsadením 40 px = text 580 px pri 17 px písme ≈ 74 znakov na
   riadok (zmerané 23. 9. 2026). Predtým 720 px pri 16 px
   ≈ 85 znakov — oko na konci riadku stráca, ktorý riadok je nasledujúci. */
article {
  max-width: 660px;
  /* ⚠ `margin-inline: auto` NEODSTRAŇUJ. Pôvodné inline pravidlo znelo
     `article { max-width: 720px; margin: 0 auto; padding: 64px 40px 48px }`
     a migrácia ho strhla CELÉ; blogy majú `* { margin: 0 }`, takže bez tohto
     riadku sedí článok na ŠIROKOM okne pri ľavej hrane (zmerané: 53 z 59).
     Na telefóne je bez účinku (`max-width: 100%`), preto to meranie na
     320/375/414 px nechytilo — stráž preto meria aj 1280 px. */
  margin-inline: auto;
  padding: 64px 40px 48px;
  font-size: 17px;
}

article h1 {
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

/* Nadpisy oddeľujú celky — hore veľká medzera, dole malá, nech nadpis
   opticky patrí k textu POD sebou, nie nad. */
article h2 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-top: 52px;
  margin-bottom: 14px;
}

article h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 34px;
  margin-bottom: 10px;
}

article p {
  color: var(--text2, #a8a29a);
  line-height: 1.75;
  margin-bottom: 20px;
}

article ul,
article ol {
  color: var(--text2, #a8a29a);
  line-height: 1.75;
  margin-bottom: 20px;
  padding-left: 24px;
}

article li { margin-bottom: 8px; }
article li::marker { color: var(--text3, #8a8880); }

article strong { color: var(--text, #f0efe8); font-weight: 600; }

/* Dlhý odkaz alebo IBAN nesmie roztiahnuť stránku, ale `break-word`
   (na rozdiel od `anywhere`) neznižuje minimálnu šírku obsahu. */
article a[href] { overflow-wrap: break-word; }

/* ── Tabuľky ─────────────────────────────────────────────────────────────
   Obal `.tabulka-obal` je vodorovný posúvač. Tabuľka vnútri si drží
   vlastnú šírku, takže stĺpce dostanú miesto a text sa láme po SLOVÁCH.
   `.tabulka-siroka` (3 a viac stĺpcov) dostane na telefóne minimálnu
   šírku — dvojstĺpcová tabuľka sa zmestí aj bez posúvania. */
.tabulka-obal {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0;
  border-radius: var(--radius-sm, 8px);
  /* Náznak, že tabuľka pokračuje vpravo = VIDITEĽNÝ posúvač v akcentovej
     farbe. Posúvač existuje len vtedy, keď je čo posúvať, takže je to
     náznak podmienený konštrukciou — netreba ho nikde zapínať.

     ⛔ NEVRACAJ sem `background` s gradientom. Prvá verzia mala štyri
     gradientové vrstvy (krytie farbou pozadia + tieň). Zmerané na tmavom
     povrchu blogu: najtmavší bod „tieňa" rgb(11,11,11) proti pozadiu
     rgb(15,15,15) = kontrast 1,03 : 1, čiže NEVIDITEĽNÉ. A keďže
     `.tabulka-obal` je PREDOK buniek, kontrastný skener nad ním prestal
     merať 1 301 dvojíc textu (`tests/helpers/kontrast-engine.js` vracia pri
     gradiente na predkovi `null` = „nemodelovateľné"). Platili sme slepotou
     skenera za tieň, ktorý nebolo vidno. Pseudo-prvky posúvača skener
     nečíta, tie sú bezpečné. */
  scrollbar-width: thin;
  scrollbar-color: var(--accent, #c8f060) transparent;
}

.tabulka-obal::-webkit-scrollbar { height: 6px; }
.tabulka-obal::-webkit-scrollbar-track { background: transparent; }
.tabulka-obal::-webkit-scrollbar-thumb {
  background: var(--accent, #c8f060);
  border-radius: 3px;
}

/* Posúvateľná oblasť musí byť dosiahnuteľná aj z klávesnice (WCAG 2.1
   AA, 2.1.1) — obal je preto `tabindex="0"` a musí byť vidno, že má
   zameranie. */
.tabulka-obal:focus-visible {
  outline: 2px solid var(--accent, #c8f060);
  outline-offset: 2px;
}

/* Tabuľkové pravidlá visia na TRIEDE obalu, nie na `article`. Dva dôvody:
   (1) `pohoda-bezucto-migracia` a `vklad-spolocnika-sro-365-vs-411` nemajú
       v značkách `<article>` vôbec — na `article th` by sa nechytili;
   (2) trieda (0,1,1) porazí inline `article th` (0,0,2), takže oprava platí
       aj v blogoch, kde staré pravidlo v inline bloku ostane. */
.tabulka-obal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: auto;
  /* Posúvač je OBAL, nikdy nie tabuľka. V 53 blogoch prežilo v inline bloku
     mobilné `article table { display: block; overflow-x: auto }`; `display`
     tu deklarované nebolo, takže sa uplatnilo a vznikol druhý, vnorený
     posúvač. Používateľ klávesnice má zameranie na obale a k pretečeniu
     vnútorného bloku by sa nedostal. */
  display: table;
}

.tabulka-obal th,
.tabulka-obal td {
  padding: 11px 14px;
  border: 1px solid var(--border, #2e2e2e);
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: normal;
}

.tabulka-obal th {
  background: var(--surface2, #222222);
  color: var(--text, #f0efe8);
  font-weight: 600;
}

.tabulka-obal td { color: var(--text2, #a8a29a); }

/* ── Rovnaká miera riadku na každom blogu ─────────────────────────────
   Meranie 23. 9. 2026 na 1280 px našlo štyri rôzne šírky textu: 54 blogov
   580 px (≈ 74 znakov na riadok), 6 novších 640 px (81), dva 688 px
   (82–86). Novšie blogy si nesú inline `article { max-width: 720px }`,
   ktorý je v dokumente NESKÔR a prebije `article` z tohto súboru;
   `body article` (0,0,2) ho prebije späť, rovnako ako v bloku pre telefón.
   Farby, rámček a zaoblenie tých blogov ostávajú, meníme len šírku. */
@media (min-width: 641px) {
  body article {
    max-width: 660px;
    padding-inline: 40px;
  }
}

/* ── Veľké okno: väčšie písmo, rovnaký počet znakov na riadok ──────────
   Na monitore 1920 px pôsobí stĺpec 580 px úzko (Peter 23. 9.). Lenže
   74 znakov na riadok je čitateľné optimum; rozšíriť stĺpec pri 17 px by
   dalo 85 a viac znakov, a presne to sme 10. 9. opustili. Úzky dojem
   nerobí počet znakov, ale malé písmo na veľkej ploche.
   Preto sa na širokom okne zväčšuje CELÝ článok cez `zoom`, nie
   `font-size`: blogy majú v inline štýloch boxy s pevnými px (callout
   14,5 px, cta 15 px, kód 13 px…). `font-size` by zväčšil len odsek
   a boxy by opticky scvrkli; `zoom` zväčší všetko v rovnakom pomere,
   takže počet znakov na riadok ostane a proporcie každého blogu tiež.
   Hlavička a pätička sú mimo `article`, tie sa nemenia. */
@media (min-width: 1200px) { body article { zoom: 1.06; } }
@media (min-width: 1500px) { body article { zoom: 1.12; } }
@media (min-width: 1800px) { body article { zoom: 1.18; } }

/* ── Telefón ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* `body article` (0,0,2) úmyselne, nie `article` (0,0,1): blogy s vlastným
     dizajnom článku (uctova-osnova, zivnost-alebo-sro) majú v inline bloku
     `article { max-width: 720px }`. Inline blok je v dokumente NESKÔR, takže
     pri zhodnej špecificite prebil aj toto mobilné pravidlo a stránka
     pretekala o 249 px. Farby a zaoblenie tých blogov ostávajú — prepisujeme
     len šírku a odsadenie, nič iné tu deklarované nie je. */
  body article {
    max-width: 100%;
    min-width: 0;
    padding: 40px 20px 32px;
  }

  article h1 { font-size: 27px; }
  article h2 { font-size: 22px; margin-top: 40px; }
  article h3 { font-size: 18px; margin-top: 28px; }

  article ul,
  article ol { padding-left: 20px; }

  article code {
    overflow-wrap: break-word;
    font-size: 13px;
  }

  /* Toto je tá oprava: tabuľka s tromi a viac stĺpcami radšej pretečie
     do posúvača, než by rozdrvila stĺpce na šírku jedného písmena. */
  .tabulka-siroka table { min-width: 34rem; }

  .tabulka-obal th,
  .tabulka-obal td {
    padding: 10px 12px;
    font-size: 14px;
  }
}