/*
 * Obsah stranek (WYSIWYG) ve vzhledu sablony spolku: pisma, typografie,
 * odkazy, tlacitka, zarovnani na stred, oddily ve sloupcich. Nacita ho web
 * (vlastni <link> pred sablona.css) i editor v administraci (config
 * web-zaklad.editor.css + trida plochy web-zaklad.editor.trida), aby editor
 * ukazoval obsah stejne jako web. Proto je vse vazane na tridu .obsah-blok
 * (krome tlacitek, ktera pouzivaji i bloky mimo obsah) - globalni pravidla
 * by v administraci rozbila Filament.
 */

/* Pisma (@font-face) jsou v pisma.css - web je dostane pres zaklad-webu.css,
   editor v administraci pres config web-zaklad.editor.css (pisma.css pred
   obsah.css). Tady zamerne bez @import, aby se na webu nenacitala dvakrat. */

/* ------------------------------------------------------------ zaklad obsahu */

.obsah-blok {
    font-family: 'Work Sans', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: #231F20;
}
.obsah-blok h1, .obsah-blok h2, .obsah-blok h3 {
    font-family: 'Work Sans', system-ui, sans-serif;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: #231F20;
    line-height: 1.2;
}
/* Bez tlacitek - odkaz ve vzhledu tlacitka ma barvy z .tlacitko nize. */
.obsah-blok a:not(.tlacitko) {
    color: #202267;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
.obsah-blok a:not(.tlacitko):hover { color: #C9181F; }
.obsah-blok strong { font-weight: 600; }
.obsah-blok img { max-width: 100%; height: auto; border-radius: 8px; display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------------ tlacitka */

/* Odkaz se stylem tlacitka z WYSIWYG editoru (trida "tlacitko", viz
   STYLY_ODKAZU v editor.js) = .btn-primary sablony (cervena #C9181F, ne logova
   #ED1C24 - bily text na ni ma jen 4,4 : 1), "tlacitko-sekundarni" = bile
   s cernym okrajem. Od 2026-10-17 jen tyto dve (pravidlo: hlavni akce cervene,
   jedno na oddil; ostatni vedlejsi); stare tridy -modre, -sede, -zelene
   v ulozenem obsahu vypadaji jako vedlejsi. */
.tlacitko {
    display: inline-block; text-align: center;
    border-radius: 8px; padding: 12px 22px;
    font-family: 'Work Sans', sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1.3;
    cursor: pointer; text-decoration: none;
    border: 1.5px solid #C9181F;
    background: #C9181F; color: #FFFFFF;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tlacitko:hover { background: #A8141A; border-color: #A8141A; color: #FFFFFF; }
.tlacitko:focus-visible { outline: 2px solid #202267; outline-offset: 2px; }
.tlacitko.tlacitko-sekundarni,
.tlacitko.tlacitko-modre, .tlacitko.tlacitko-sede, .tlacitko.tlacitko-zelene { background: #FFFFFF; color: #231F20; border-color: #231F20; }
.tlacitko.tlacitko-sekundarni:hover,
.tlacitko.tlacitko-modre:hover, .tlacitko.tlacitko-sede:hover, .tlacitko.tlacitko-zelene:hover { background: #231F201A; color: #231F20; border-color: #231F20; }

/* ------------------------------------------------------------ obsah stranek (WYSIWYG) */

/* Zarovnani na stred z editoru (nastroj "stred"). */
.obsah-blok .na-stred { text-align: center; --posledni-radek: center; }

/* Oddily ve sloupcich (nastroj "Sloupec" v editoru, obal skladá
   WebZaklad\Html\Sloupce) - po dvou vedle sebe, na mobilu pod sebou. */
.obsah-blok .sloupce {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
}
/* Presne tri (nebo sest) oddilu za sebou = po trech (napr. stranka tabora:
   program / cena / misto). Na uzsi obrazovce pod sebou - tri sloupce by
   byly prilis uzke a po dvou by treti zustal osamoceny. */
.obsah-blok .sloupce:has(> .sloupce__oddil:nth-child(3):last-child),
.obsah-blok .sloupce:has(> .sloupce__oddil:nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px;
}
@media (max-width: 56.25em) {
    .obsah-blok .sloupce:has(> .sloupce__oddil:nth-child(3):last-child),
    .obsah-blok .sloupce:has(> .sloupce__oddil:nth-child(6):last-child) {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 43.75em) {
    .obsah-blok .sloupce { grid-template-columns: minmax(0, 1fr); }
}
/* Stranka zacinajici sloupci - nadpisy prvni rady bez horni mezery (jako
   .obsah-blok > :first-child nize, jen o uroven hloubeji). */
.obsah-blok > .sloupce:first-child > .sloupce__oddil > :first-child { margin-top: 0; }
/* Textova stranka (.web-container--obsah) ma plnou sirku obsahu; souvisly
   text (nadpisy, odstavce, seznamy primo v obsahu) zustava kvuli citelnosti
   nejvys 784 px, zarovnany vlevo pod logem. Sloupce a dalsi bloky jdou na
   celou sirku (vyjimka uzkeho sloupce: sablona.css, layout). */
.web-container--obsah .obsah-blok > :is(h1, h2, h3, p, ul, ol, blockquote) { max-width: 784px; }

/* Odstavec na stred primo v obsahu nejvys --sirka-na-stred (720 px, asi
   75 znaku na radek) na stredu; stejnou sirku pouzije web pro bloky na stredu
   (dlazdice rytiradama.cz). Zarovnani do bloku: text-do-bloku.css. */
.obsah-blok { --sirka-na-stred: 720px; }
.obsah-blok > p.na-stred { max-width: var(--sirka-na-stred); margin-left: auto; margin-right: auto; }
/* Na textove strance jsou nadpisy (i na stred) v bloku 784 px zarovnanem
   vlevo - odstavec na stred ve stejne ose, ne uprostred cele sirky. */
.web-container--obsah .obsah-blok > p.na-stred {
    margin-left: max(0px, (min(100%, 784px) - var(--sirka-na-stred)) / 2); margin-right: 0;
}

.obsah-blok > :first-child { margin-top: 0; }
/* Stupnice nadpisu sablony spolku: H1 38/30 px, H2 24/22 px, H3 20 px
   (pocitac / do 900 px). Stejna v sablona.css pro nadpisy mimo obsah. */
.obsah-blok h1 { font-size: 2.375rem; margin: 0 0 24px; }
.obsah-blok h2 { font-size: 1.5rem; margin: 48px 0 16px; }
.obsah-blok h3 { font-size: 1.25rem; margin: 32px 0 10px; }
.obsah-blok p { margin: 0 0 16px; }
.obsah-blok ul, .obsah-blok ol { margin: 0 0 16px; padding-left: 24px; }
/* Odrazky vyslovne - v administraci je reset Filamentu (Tailwind preflight:
   ul, ol { list-style: none }) a editor by je jinak nezobrazil. */
.obsah-blok ul { list-style: disc; }
.obsah-blok ol { list-style: decimal; }
.obsah-blok li { margin-bottom: 6px; }
/* Podseznamy (nastroj "Zvetsit odsazeni" / Tab v seznamu, max. 3 urovne):
   odrazky disc -> circle -> square, cislovani 1. -> a. -> i. */
.obsah-blok li > ul, .obsah-blok li > ol { margin: 6px 0 0; }
.obsah-blok ul ul { list-style: circle; }
.obsah-blok ul ul ul { list-style: square; }
.obsah-blok ol ol { list-style: lower-alpha; }
.obsah-blok ol ol ol { list-style: lower-roman; }
/* Odsazeni odstavce (nastroj "Zvetsit odsazeni", 1-3 kroky po 2 rem, na
   uzkem displeji mensi, at trojite odsazeni nesezere pulku sirky). */
.obsah-blok .odsazeni-1 { margin-left: 2rem; }
.obsah-blok .odsazeni-2 { margin-left: 4rem; }
.obsah-blok .odsazeni-3 { margin-left: 6rem; }
@media (max-width: 37.5em) {
    .obsah-blok .odsazeni-1 { margin-left: 1.25rem; }
    .obsah-blok .odsazeni-2 { margin-left: 2.5rem; }
    .obsah-blok .odsazeni-3 { margin-left: 3.75rem; }
}
/* Oddelovac (nastroj "Oddelovac") - carkovana cara mezi castmi stranky jako
   na puvodnim rytiradama.cz. Na zacatku a konci obsahu se na webu nezobrazi
   (nema co oddelovat); web muze vyjimku zrusit, napr. kdyz nad obsahem je
   uvodni cast. V editoru je videt vzdy, at jde smazat. */
.obsah-blok hr {
    border: 0; border-top: 1px dashed #C9CACC; height: 0;
    margin: 56px 0;
}
.obsah-blok:not(.editor-plocha) > hr:first-child,
.obsah-blok:not(.editor-plocha) > hr:last-child { display: none; }
/* Sloupce hned za oddelovacem - nadpisy prvni rady bez vlastni horni mezery
   (v mrizce se s okrajem cary neslouci, mezera by byla dvojnasobna). */
.obsah-blok hr + .sloupce > .sloupce__oddil > :first-child { margin-top: 0; }
.obsah-blok video, .obsah-blok embed { max-width: 100%; border-radius: 8px; }
.obsah-blok embed { width: 100%; height: 80vh; }
/* Vic tlacitek za sebou v jednom odstavci - odstup i pri zalomeni. */
.obsah-blok p .tlacitko { margin: 4px 8px 4px 0; }
/* Tlacitka pod sebou (kazde ve vlastnim odstavci) - tesneji nez odstavce. */
.obsah-blok p:has(> .tlacitko:only-child) { margin-bottom: 4px; }
/* Obrazek (napr. stit) jako samostatny odstavec nad nadpisem - nadpis
   k nemu patri, bez bezne velke mezery nad nadpisem. */
.obsah-blok p:has(> img:only-child) + h2,
.obsah-blok p:has(> img:only-child) + h3 { margin-top: 8px; }

/* Plocha editoru v administraci s pozadim webu (bile tlacitko "vedlejsi"
   by jinak na bile plose splynulo). */
.editor-plocha.obsah-blok { background: #FAF8F4; }

@media (max-width: 56.25em) {
    .obsah-blok h1 { font-size: 1.875rem; }
    .obsah-blok h2 { font-size: 1.375rem; margin-top: 36px; }
}