/*
 * Sdílený vzhled příspěvku (.article-body, .post-intro/.perex, article > h1)
 * — JEDINÝ zdroj pravdy pro veřejnou stránku i pro Worker náhled konceptu
 * v redakční administraci (2026-09, sjednocení preview/public).
 *
 * Dřív existovaly DVĚ ručně synchronizované kopie téhož textu (tenhle blok
 * doslovně zkopírovaný jak v `src/pages/[...permalink].astro`, tak v
 * `src/lib/articleStyle.ts`) hlídané jen běhovým porovnávacím testem
 * (`scripts/verify-article-style-sync.mjs`) — fungovalo to, ale šlo o dvě
 * ručně udržované sady CSS, které se mohly kdykoli rozejít, kdyby si to
 * test nevšiml nebo kdyby ho někdo obešel.
 *
 * Teď existuje jen TENHLE soubor:
 * - Veřejná stránka (`src/pages/[...permalink].astro`) ho načítá jako
 *   normální statický stylesheet přes `<link rel="stylesheet"
 *   href="/styles/article.css">` (viz `articleStylesheet` prop
 *   `BaseLayout.astro`) — `public/` se kopíruje do `dist/` beze změny a
 *   cachuje se jako běžný statický soubor, žádné zvláštní Astro/Vite CSS
 *   zpracování ho nerozmnožuje do každé stránky zvlášť.
 * - Worker náhled konceptu (`src/lib/articleStyle.ts`) načítá TENTÝŽ
 *   soubor jako text při buildu Workeru (`import articleCss from
 *   '../../public/styles/article.css'`, `[[rules]]` typu "Text" pro .css
 *   soubory ve `wrangler.toml`) — žádná ruční kopie, žádný risk rozjezdu,
 *   protože je to doslova stejný soubor na disku.
 *
 * Regresní kontrola: `scripts/test-article-style-shared-source.mjs`
 * ověřuje, že `articleStyle.ts` skutečně IMPORTUJE tenhle soubor (ne že by
 * ho znovu obsahoval jako vlastní literální text), že `[...permalink].astro`
 * skutečně linkuje `/styles/article.css` (ne že by měl vlastní duplicitní
 * `<style>` blok), a že vygenerovaný `dist/styles/article.css` i Worker
 * bundle po buildu skutečně obsahují stejný text jako tenhle soubor.
 */

/*
 * font-family EXPLICITNĚ tady (2026-09, oprava preview/public parity), ne
 * jen zděděná od rodičovského dokumentu: veřejná stránka i Worker náhled
 * jsou DVĚ různé HTML kostry (BaseLayout.astro vs. adminPreview.ts) s
 * vlastním, nezávislým výchozím `body` fontem — spoléhat na to, že obě
 * kostry shodou okolností nastaví stejný základ, byl přesně důvod, proč
 * náhled krátce po zavedení Open Sans/Lora vizuálně ukazoval tělo článku
 * v (zastaralém) patkovém písmu, i když sdílené .article-body/h2/h3/perex
 * pravidla byla správně sdílená (ruční QA nalezla rozdíl, který statické
 * porovnání souborů nezachytilo — viz test-article-style-shared-source.mjs
 * sekce 7, počítané styly). .article-body je teď soběstačné — funguje
 * správně bez ohledu na to, co (případně špatně) nastaví okolní dokument.
 */
.article-body {
  max-width: 680px;
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Bezpečnostní pojistka proti vodorovnému přetečení na úzkých šířkách
     (nahlášeno 17. 9. 2026, 320px): záměrné pevné mezery (&nbsp;) v textu
     — např. za jednopísmennými předložkami nebo kolem pomlčky, běžná
     česká typografická konvence z WordPress obsahu — vytvářejí delší
     nedělitelné úseky textu, které se na velmi úzkých šířkách nemusí
     vejít na řádek. `break-word` zalomí slovo JEN když se skutečně
     nevejde (poslední záchrana), normální zalamování mezi slovy (a tedy
     zamýšlený efekt &nbsp;) zůstává beze změny ve všech ostatních
     případech. */
  overflow-wrap: break-word;
}
.article-body p { margin: 0 0 1.4em; }
/*
 * Obsahové nadpisy (2026-09, estetický balíček): Lora, ne Open Sans
 * zděděné z :root — jen tady, protože jde o skutečný obsahový nadpis
 * příspěvku, ne o UI (viz komentář u h1..h4 v BaseLayout.astro). Váha 600
 * (ne dřívějších 700 u H2/H1): odpovídá řezům skutečně načteným přes
 * Google Fonts (Lora 400/500/600, viz <head> BaseLayout.astro) — váha 700
 * by se bez vlastního řezu jen synteticky "dotučnila" prohlížečem, což
 * vypadá hůř než skutečný řez 600.
 */
.article-body h2 {
  font-size: 26px;
  font-weight: 600;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  margin: 2em 0 0.6em;
}
.article-body h3 {
  font-size: 21px;
  font-weight: 600;
  font-style: italic;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  margin: 1.6em 0 0.4em;
}
/* Nadpis nikdy nesmí zalomit vedle obtékaného obrázku (.img-wrap-left/
   .img-wrap-right níže) — vždy začíná až pod ním, na nové "řádce". */
.article-body h2,
.article-body h3 {
  clear: both;
}

/*
 * Odrážkové/číslované seznamy a citace neměly explicitní pravidlo vůbec
 * (jen prohlížečové výchozí hodnoty) — proto působily nekonzistentně vůči
 * odstavcům/nadpisům. Stejný spodní odstup jako odstavec (1.4em), aby
 * seznam/citace přirozeně navazovaly na okolní text.
 */
.article-body ul,
.article-body ol {
  margin: 0 0 1.4em;
  padding-left: 1.35em;
}
.article-body li {
  margin: 0 0 0.4em;
}
.article-body li:last-child {
  margin-bottom: 0;
}
/* "Volný" seznam (položky oddělené prázdným řádkem) zabalí každou položku
   do vlastního <p> — bez týhle výjimky by se pod odstavcovou mezerou
   (1.4em) sečetla ještě mezera položky seznamu. */
.article-body li > p {
  margin: 0 0 0.4em;
}
.article-body blockquote {
  margin: 1.25rem 0;
  padding: 0.25rem 1.25rem;
  border-left: 3px solid var(--color-accent);
  color: var(--color-muted);
}

/*
 * Obrázek byl dřív inline prvek uvnitř <p> — k jeho vlastní mezeře (řádek
 * s výškou podle line-height) se navíc přičetla mezera obalujícího
 * odstavce, což na obrazovce působilo jako neúměrně velká prázdná plocha.
 * `display: block` odstraňuje tu první, skrytou část.
 */
.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.4em;
}
.article-body figure {
  margin: 0 0 1.4em;
}
.article-body figure img {
  margin-bottom: 0.5em;
}
.article-body figcaption {
  font-size: 0.85em;
  color: var(--color-muted);
  text-align: center;
}

/*
 * Zarovnání/obtékání obrázku vloženého do textu (redakční administrace,
 * "Editor obsahu příspěvku" — kontextové ovládání obrázku). Ukládá se jako
 * CSS třída přímo na <img> (viz web/src/server/markdown.ts a
 * htmlToMarkdown() v adminPages.ts) — obrázek beze třídy (celý dosavadní
 * obsah) zůstává na výchozím vzhledu výše, beze změny chování.
 */
.article-body img.img-align-left { margin: 0 auto 1.4em 0; }
.article-body img.img-align-center { margin: 0 auto 1.4em; }
.article-body img.img-align-right { margin: 0 0 1.4em auto; }
.article-body img.img-wrap-left {
  float: left;
  margin: 0.3em 1.4em 1em 0;
  max-width: 45%;
}
.article-body img.img-wrap-right {
  float: right;
  margin: 0.3em 0 1em 1.4em;
  max-width: 45%;
}

/*
 * Vertikální rytmus hlavičky příspěvku: breadcrumb → H1 → metadata jsou
 * sjednocené na stejný odstup (1rem), takže dvojice přechodů působí jako
 * jeden konzistentní rytmus. Bez explicitní hodnoty by H1 zdědilo výchozí
 * prohlížečovou mezeru (0.67em nahoře i dole) a rytmus by byl náhodný, ne
 * navržený.
 */
article > h1 {
  font-size: 36px;
  font-weight: 600;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  margin: 0 0 1rem;
}

.post-intro {
  max-width: 820px;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/*
 * Perex (oprava 2026-09-17): Lora se v delším perexu ukázala jako vizuálně
 * příliš blízká nadpisové typografii — nové explicitní rozhodnutí vrací
 * perex na stejné písmo jako běžný text (Open Sans) a odlišuje ho místo
 * toho velikostí (20px desktop / 19px mobil, viz media query níže),
 * řádkováním a svislou vínovou čárou (border-left, --color-accent) — ne
 * boxem/pozadím/boldem/jiným fontem, aby zůstal klidný a v souladu
 * s charakterem webu. Beze změny v obou barevných režimech (--color-accent
 * má samostatnou hodnotu pro světlý/tmavý režim, viz BaseLayout.astro).
 */
.post-intro .perex {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  border-left: 3px solid var(--color-accent);
  padding-left: 1rem;
}
.post-intro .perex ul,
.post-intro .perex ol {
  margin: 0.5em 0 0 1.25em;
  padding: 0;
}
.post-intro .intro-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0;
}

/*
 * Když příspěvek má úvodní blok perex+obrázek, hlavní text pod ním má
 * navázat na celou šířku toho bloku (820px, pravý okraj pod obrázkem), ne
 * zůstat omezený na čtecí šířku 680px výše — ta platí jen pro .article-body
 * samotné (příspěvek BEZ perexu+obrázku, kde 680px je záměrná čitelnostní
 * optimalizace, viz komentář u .article-body). Sourozencový selektor
 * .post-intro + .article-body cílí přesně na tenhle jeden případ
 * (.article-body je v DOM vždy přímý sourozenec hned za .post-intro, viz
 * [...permalink].astro), takže běžné příspěvky bez obrázku zůstávají beze
 * změny na 680px.
 */
.post-intro + .article-body {
  max-width: 820px;
}

@media (min-width: 769px) {
  .post-intro {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
  /*
   * min-width:0 na obou flex položkách (výchozí je min-width:auto, které
   * se u obrázku počítá z jeho VNITŘNÍ velikosti, viz width/height
   * atributy 800x450) — bez toho odmítal .intro-image zmenšit se pod
   * ~800px a "flex: 1 1 40%" tak neplatilo (oprava 2026-09, ruční QA:
   * obrázek přebral celou šířku bloku, perex se stlačil na úzký proužek).
   * `.post-intro .intro-image { width: 100% }` výše platí jen pro mobilní
   * (sloupcové) rozložení — na desktopu šířku určuje `flex-basis` (40 %),
   * proto se tu `width` vrací zpět na `auto` (`max-width: 100%` zůstává
   * jako pojistka proti přetečení vlastního přiděleného boxu).
   */
  .post-intro .perex { flex: 1 1 55%; min-width: 0; }
  .post-intro .intro-image { flex: 1 1 40%; width: auto; max-width: 100%; min-width: 0; }
}

@media (max-width: 768px) {
  article > h1 { font-size: 31px; }
  .article-body h2 { font-size: 22px; }
  .article-body h3 { font-size: 18px; }
  .post-intro .perex { font-size: 19px; }
  /* Obtékání textu vedle obrázku na mobilu vytváří příliš úzký sloupec
     textu vedle něj — obrázek se tu vždy zobrazí jako samostatný blok
     přes celou šířku, text pokračuje až pod ním. */
  .article-body img.img-wrap-left,
  .article-body img.img-wrap-right {
    float: none;
    max-width: 100%;
    margin: 0 auto 1.4em;
  }
}
