/* ===========================================================================
   BLOKY - vzhľad obsahu z blokového editora

   TENTO SÚBOR SA NAČÍTAVA NA DVOCH MIESTACH:
     - na webe   (template/produkty.php)
     - v admine  (vnútro editora, admin/editor.php)

   Preto sa tu smie meniť len vzhľad samotného obsahu. Nič, čo patrí k
   ovládaniu editora (rámiky blokov, ťahadlá, tlačidlá), sem NEPATRÍ -
   to je v admin/css/blok-editor.css. Inak by sa admin a web rozišli.

   Všetko je scopnuté pod .bloky, aby to nezasahovalo do zvyšku stránky.
   =========================================================================== */

/* Vzhľad konkrétneho webu (písmo, farby) je v jeho TÉME - súbor z configu
   ('tema'), ktorý sa načíta hneď po tomto a prepíše premenné nižšie. Bez témy
   ostanú neutrálne predvolené hodnoty. Téma sa načíta aj v administrácii,
   aby náhľad v editore vyzeral ako web. */

.bloky {
	--blok-medzera: 28px;
	--blok-medzera-stlpce: 30px;
	--blok-text: #33383e;
	--blok-max-sirka: 1200px;

	/* téma webu */
	--blok-pismo: inherit;             /* písmo obsahu */
	--blok-akcent: #3a3f45;            /* tlačidlo, citát, ozdoby mriežky */
	--blok-odkaz: #1a5fb4;             /* odkazy v texte */
	--blok-odkaz-hover: #12457f;
	--blok-fokus: #1a5fb4;             /* obrys pri ovládaní klávesnicou */
	--blok-tlacidlo-text: #fff;        /* nápis tlačidla bez vlastnej farby */

	/* Veľkosť ZÁMERNE väčšia: body má na webe často 13px, čo je na dlhší
	   text v popise málo. Blok si ju vie prebiť vlastným nastavením. */
	font-family: var(--blok-pismo);
	font-size: 16px;
	color: #000;

	/* aby sa dalo merat @container - viz zalamovanie stlpcov nizsie */
	container-type: inline-size;
	container-name: bloky;
}

.bloky .blok + .blok {
	margin-top: var(--blok-medzera);
}

/* Zúžený blok (max-width má v atribúte style) stojí prirodzene vľavo.
   Zarovnanie sa robí okrajmi, nie text-alignom - ten by zarovnával obsah,
   nie samotný blok. */
/* Zarovnanie samotného bloku. Kde zúžený blok stojí, riešia okraje v atribúte
   style (viď bloky_okraje v PHP) - tu zostáva len zarovnanie jeho obsahu, ktoré
   prebije to, čo blok zdedil od stĺpca alebo bunky. */
.bloky .blok--vodorovne-vlavo { text-align: left; }
.bloky .blok--vodorovne-stred { text-align: center; }
.bloky .blok--vodorovne-vpravo { text-align: right; }

/* --- text ---------------------------------------------------------------- */

.bloky .blok--text {
	color: var(--blok-text);
	line-height: 1.7;
}

.bloky .blok--text > *:first-child { margin-top: 0; }
.bloky .blok--text > *:last-child { margin-bottom: 0; }

.bloky .blok--text p {
	margin: 0 0 1em;
}

.bloky .blok--text h1,
.bloky .blok--text h2,
.bloky .blok--text h3,
.bloky .blok--text h4,
.bloky .blok--text h5 {
	margin: 1.4em 0 .5em;
	line-height: 1.25;
	font-weight: 700;
}

/* h1 sa uz z editora vlozit neda, ostava len kvoli obsahu ulozenemu predtym */
.bloky .blok--text h1 { font-size: 32px; }
.bloky .blok--text h2 { font-size: 26px; }
.bloky .blok--text h3 { font-size: 21px; }
.bloky .blok--text h4 { font-size: 18px; }
.bloky .blok--text h5 { font-size: 16px; }

/* prečiarknutie — prehliadač pri execCommand vyrobí <strike> alebo <s> */
.bloky .blok--text s,
.bloky .blok--text strike { text-decoration: line-through; }

/* zarovnanie sa nesie v style="text-align:…", ktoré prejde cez BLOKY_POVOLENE_STYLY;
   <div> vzniká pri zarovnaní textu, ktorý nie je v odstavci */
.bloky .blok--text div { margin: 0 0 1em; }
.bloky .blok--text div:last-child { margin-bottom: 0; }

.bloky .blok--text ul,
.bloky .blok--text ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

/* Web má globálny reset, ktorý odrážky zhadzuje — vraciame ich explicitne,
   inak zoznam vyzerá v admine inak než na webe. */
.bloky .blok--text ul { list-style: disc outside; }
.bloky .blok--text ol { list-style: decimal outside; }
.bloky .blok--text li { display: list-item; }

.bloky .blok--text li {
	margin-bottom: .35em;
}

.bloky .blok--text a {
	color: var(--blok-odkaz);
	text-decoration: underline;
}

.bloky .blok--text a:hover {
	color: var(--blok-odkaz-hover);
}

.bloky .blok--text blockquote {
	margin: 0 0 1em;
	padding: 2px 0 2px 18px;
	border-left: 3px solid var(--blok-akcent);
	color: #5c6167;
	font-style: italic;
}

/* --- obrázok ------------------------------------------------------------- */

/* Obrázok sa zarovnáva ako všetko ostatné - podľa okolia alebo podľa vlastného
   zarovnania bloku. Keby si tu vynucoval stred, prebil by oboje a nedal by sa
   posunúť inam. */

/* Bez nastavenej šírky je obrázok vo svojej skutočnej veľkosti, najviac na
   šírku plochy - malý sa nenafúkne a nerozmaže. Šírka bloku ho zmenší aj
   zväčší (zväčšený už môže byť rozmazaný, to je voľba redaktora).

   Skutočnú veľkosť NEUKLADÁME do obsahu: každý jazyk môže mať v knižnici
   médií vlastný súbor s inými rozmermi a pevná šírka zo slovenského by ho
   zdeformovala. */
.bloky .blok--obrazok img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.bloky .blok--obrazok.blok--ma-sirku img {
	width: 100%;
}

/* --- video --------------------------------------------------------------- */

/* Samotná plocha videa je vo vnútornom rámci ZÁMERNE: keby pomer 16:9 aj
   pozadie sedeli na .blok--video, iframe by sa roztiahol cez celý blok aj
   cez odsadenie, ktoré mu pridá štýl - fialový pruh by okolo videa nebolo
   vidieť. Takto štýl obalí video rovnako, ako obaľuje text či stĺpce. */
.bloky .blok--video {
	overflow: hidden;
}

.bloky .blok-video-ramec {
	position: relative;
	/* pomer 16:9 bez ohľadu na šírku, aby sa layout pri načítaní netrhal */
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.bloky .blok-video-ramec iframe,
.bloky .blok-video-ramec video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* vlastné video môže mať iný pomer strán ako 16:9 - contain ho doň vloží celé */
.bloky .blok-video-ramec video { object-fit: contain; }

/* Vlastné video má - na rozdiel od YouTube - svoj rozmer. Rovnako ako obrázok
   je bez nastavenej šírky vo svojej skutočnej veľkosti, najviac na šírku
   plochy; rámec sa mu prispôsobí, nie naopak. Zarovnáva sa ako text. */
.bloky .blok--video-subor .blok-video-ramec {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
	aspect-ratio: auto;
	background: none;
}

.bloky .blok--video-subor .blok-video-ramec video {
	position: static;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* náhľad so zväčšením: odkaz obalí video, tlačidlo prehrávania je v jeho strede */
.bloky .blok--video-subor .blok-video-ramec a {
	position: relative;
	inset: auto;
}

/* so šírkou bloku ju vyplní - zmenšené aj zväčšené */
.bloky .blok--video-subor.blok--ma-sirku .blok-video-ramec { display: block; }
.bloky .blok--video-subor.blok--ma-sirku .blok-video-ramec video { width: 100%; }

/* Náhľad so zväčšením: odkaz drží prvý snímok aj tlačidlo prehrávania. */
.bloky .blok-video-ramec a {
	position: absolute;
	inset: 0;
	display: block;
}

.bloky .blok-video-ramec a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tlačidlo je nakreslené v CSS - web nemá ikonový font a jeden obrázok navyše
   by sa kvôli tomu sťahovať nemal. */
.bloky .blok-video-spustit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	transition: background .15s;
	pointer-events: none;
}

/* trojuholník v strede kruhu */
.bloky .blok-video-spustit::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -12px 0 0 -8px;
	border: 12px solid transparent;
	border-left: 20px solid #fff;
	border-right: 0;
}

.bloky .blok-video-ramec a:hover .blok-video-spustit,
.bloky .blok-video-ramec a:focus .blok-video-spustit { background: rgba(0, 0, 0, .8); }

/* --- tlačidlo ------------------------------------------------------------ */

/* Vzhľad (výplň, odsadenie, rámik, zaoblenie, šírka) sedí na samotnom tlačidle,
   nie na bloku - pri tlačidle je to to, čo redaktor od týchto nastavení čaká.
   Blok už len určuje, kde tlačidlo v riadku stojí. Hodnoty tu sú predvolené,
   inline štýl z nastavení ich prebije. */
.bloky .blok-tlacidlo {
	display: inline-block;
	max-width: 100%;
	padding: 13px 28px;
	border-radius: 3px;
	/* Predvolená podoba tlačidla: akcent témy s bielym nápisom. Vlastná farba
	   z nastavení bloku ju prebije inline štýlom - a vtedy sa aj farba nápisu
	   riadi svetlosťou výplne, nie týmto pravidlom. */
	background-color: var(--blok-akcent);
	color: var(--blok-tlacidlo-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: opacity .15s;
}

/* Pod myšou sa mení len priehľadnosť - farbu z nastavení nesie inline štýl
   a ten by aj tak prebil čokoľvek, čo by sme tu napísali. Farba je tu pre
   tlačidlo bez vlastnej farby, aby mu ju neprepísalo globálne a:hover. */
.bloky a.blok-tlacidlo:hover,
.bloky a.blok-tlacidlo:focus {
	color: var(--blok-tlacidlo-text);
	text-decoration: none;
	opacity: .85;
}

/* --- oddeľovač ----------------------------------------------------------- */

/* Čiara je vo vnútornom <hr>, aby si blok mohol niesť vlastný rámik a pozadie
   nezávisle od nej. */
.bloky .blok-ciara {
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .14);
}

.bloky .blok--na-tmavom .blok-ciara { border-top-color: rgba(255, 255, 255, .28); }

/* --- medzera ------------------------------------------------------------- */

/* Prázdny blok - výška je jediné, čo ho drží. */
.bloky .blok--medzera {
	font-size: 0;
	line-height: 0;
}

/* --- produkt ------------------------------------------------------------- */

/* Obrázok aj názov sa čítajú z databázy až pri vykreslení stránky - v obsahu je
   uložené len id, viď bloky_produkt_html(). Celá karta je jeden odkaz. */
.bloky .blok-produkt {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bloky a.blok-produkt:hover,
.bloky a.blok-produkt:focus {
	color: inherit;
	text-decoration: none;
}

.bloky .blok-produkt__obrazok { display: block; }

/* ZÁMERNE bez width: 100% - fotka sa nemá naťahovať nad svoju veľkosť (bola by
   rozmazaná) a karta cez celú šírku obsahu nie je to, čo redaktor čaká. Väčšiu
   či menšiu kartu spraví šírka bloku. Zarovnanie preberá z text-align bloku. */
.bloky .blok-produkt__obrazok img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.bloky .blok-produkt__nazov {
	display: block;
	margin-top: 12px;
	line-height: 1.4;
}

/* Prvý riadok je obchodný názov, ďalšie sú popis pod ním - rovnako ako
   v zozname produktov (include/product.tpl.php). */
.bloky .blok-produkt__nazov span { display: block; }
.bloky .blok-produkt__nazov span:first-child { font-weight: 600; }

.bloky a.blok-produkt:hover .blok-produkt__nazov span:first-child { text-decoration: underline; }

/* Obrázok vedľa názvu. Obrázok si drží pomer, názov dostane zvyšok. */
.bloky .blok--produkt-vedla .blok-produkt {
	display: flex;
	align-items: center;
	gap: 24px;
}

.bloky .blok--produkt-vedla .blok-produkt__obrazok { flex: 0 0 38%; }

.bloky .blok--produkt-vedla .blok-produkt__nazov {
	flex: 1 1 auto;
	margin-top: 0;
}

/* Na úzkej ploche sa aj tak zloží pod seba - rovnaká hranica ako pri stĺpcoch. */
@media (max-width: 767px) {
	.bloky .blok--produkt-vedla .blok-produkt { display: block; }
	.bloky .blok--produkt-vedla .blok-produkt__nazov { margin-top: 12px; }
}

@container bloky (max-width: 767px) {
	.bloky .blok--produkt-vedla .blok-produkt { display: block; }
	.bloky .blok--produkt-vedla .blok-produkt__nazov { margin-top: 12px; }
}

/* --- pred a po ----------------------------------------------------------- */

/* Porovnanie dvoch obrázkov posuvníkom (bloky_predpo_html). Bez knižnice:
   PO je v toku a dáva rozmer, PRED leží na ňom a orezáva ho --pozicia, ktorú
   nastavuje neviditeľný posuvník (input range) cez celý obrázok - ten vie
   myš, prst aj klávesnicu. */
.bloky .blok--predpo {
	line-height: 0;
}

.bloky .blok-predpo {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	user-select: none;
	vertical-align: middle;
}

/* so šírkou bloku ho vyplní celý */
.bloky .blok--predpo.blok--ma-sirku .blok-predpo { display: block; }

.bloky .blok-predpo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bloky .blok--predpo.blok--ma-sirku .blok-predpo img { width: 100%; }

/* Zadaná výška: obrázky sú také vysoké a šírku majú podľa svojho pomeru
   strán. So zadanou aj šírkou bloku (pravidlo blok--ma-sirku vyššie vyhrá)
   je to pevný rámček - obrázky sa doň zmestia CELÉ (contain), nič sa
   neoreže; zvyšok rámčeka ostane prázdny. */
.bloky .blok--predpo-vyska .blok-predpo img {
	width: auto;
	height: var(--blok-predpo-vyska);
	object-fit: contain;
}

/* PRED leží na ploche PO a je v nej celý (contain) - aj keď je menší alebo
   má iný pomer strán */
.bloky .blok-predpo__pred {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	clip-path: inset(0 calc(100% - var(--pozicia, 50%)) 0 0);
}

/* deliaca čiara s úchytom v strede */
.bloky .blok-predpo__deliaca {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pozicia, 50%);
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, .35);
	pointer-events: none;
}

/* úchyt so šípkami na obe strany */
.bloky .blok-predpo__deliaca::after {
	content: '\2039\00a0\203A';
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
	color: #33383e;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	padding-bottom: 3px;
	box-sizing: border-box;
}

.bloky .blok-predpo__stitok {
	position: absolute;
	top: 12px;
	padding: 4px 10px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .05em;
	pointer-events: none;
}

.bloky .blok-predpo__stitok--pred { left: 12px; }
.bloky .blok-predpo__stitok--po { right: 12px; }

/* posuvník je cez celý obrázok, ale neviditeľný - ťahá sa kdekoľvek */
.bloky .blok-predpo__posuvnik {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	touch-action: pan-y;
}

.bloky .blok-predpo:has(.blok-predpo__posuvnik:focus-visible) {
	outline: 2px solid var(--blok-fokus);
	outline-offset: 2px;
}

/* --- akordeón ------------------------------------------------------------ */

/* Položky sú <details>: otvárajú sa bez JavaScriptu a obsah je v HTML aj pre
   vyhľadávače. Rovnaké name="…" na položkách jedného akordeónu zariadi, že je
   otvorená najviac jedna - prehliadač, ktorý to nepozná, ich nechá otvárať
   nezávisle, nič sa nerozbije.

   V editore sú položky obyčajné divy (triedou .otvorena v Náhľade), preto majú
   pravidlá pre otvorený stav vždy obe podoby.

   Plynulé vysúvanie robí skript z bloky_akordeon_skript() - animuje výšku
   položky, preto border-box (výška = aj s linkou). Zatváraná položka je ešte
   [open], trieda --zatvara ju pre ikonku robí zatvorenou hneď. */
.bloky .blok-akordeon__polozka {
	box-sizing: border-box;
	border-bottom: 1px solid var(--blok-linky, rgba(0, 0, 0, .12));
}

.bloky .blok-akordeon__polozka:first-child {
	border-top: 1px solid var(--blok-linky, rgba(0, 0, 0, .12));
}

.bloky .blok--na-tmavom .blok-akordeon__polozka {
	border-color: var(--blok-linky, rgba(255, 255, 255, .28));
}

.bloky .blok-akordeon__nadpis {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	color: var(--blok-akordeon-nadpis, inherit);
	font-size: var(--blok-akordeon-pismo, 18px);
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

/* štandardný trojuholník <summary> - ikonu kreslíme vlastnú */
.bloky .blok-akordeon__nadpis::-webkit-details-marker { display: none; }

/* Plus, z ktorého sa po otvorení stane mínus. Kreslené v CSS - web nemá
   ikonový font a obrázok navyše kvôli dvom čiaram netreba. */
.bloky .blok-akordeon__nadpis::after {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	margin-left: auto;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: background-size .2s, transform .2s;
}

.bloky .blok-akordeon__polozka[open]:not(.blok-akordeon__polozka--zatvara) > .blok-akordeon__nadpis::after,
.bloky .blok-akordeon__polozka.otvorena > .blok-akordeon__nadpis::after {
	background-size: 100% 2px, 2px 0;
}

/* šípka nadol, otvorená položka ju otočí nahor */
.bloky .blok--akordeon-sipka .blok-akordeon__nadpis::after {
	width: 9px;
	height: 9px;
	margin-right: 3px;
	border-right: 2px solid;
	border-bottom: 2px solid;
	background: none;
	transform: translateY(-3px) rotate(45deg);
}

.bloky .blok--akordeon-sipka .blok-akordeon__polozka[open]:not(.blok-akordeon__polozka--zatvara) > .blok-akordeon__nadpis::after,
.bloky .blok--akordeon-sipka .blok-akordeon__polozka.otvorena > .blok-akordeon__nadpis::after {
	transform: translateY(2px) rotate(-135deg);
}

.bloky .blok-akordeon__obsah {
	padding-bottom: 22px;
}

/* bloky v položke majú medzi sebou rovnaké medzery ako inde */
.bloky .blok-akordeon__obsah > .blok + .blok {
	margin-top: var(--blok-medzera);
}

/* --- okno ---------------------------------------------------------------- */

/* Karta, ktorá po kliknutí otvorí okno (Fancybox, viď bloky_okno_html). Okno
   otvára celá karta, nie len ikonka. */
.bloky .blok--okno {
	position: relative;
	cursor: pointer;
}

.bloky .blok--okno:focus-visible {
	outline: 2px solid var(--blok-fokus);
	outline-offset: 3px;
}

/* bloky v karte majú medzi sebou rovnaké medzery ako inde */
.bloky .blok--okno > .blok + .blok {
	margin-top: var(--blok-medzera);
}

/* Ikonka + v rohu - napovie, že sa na kartu dá kliknúť. Kreslená v CSS,
   web nemá ikonový font. */
.bloky .blok-okno__plus {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 30px;
	height: 30px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .6;
	transition: opacity .15s, transform .2s;
	pointer-events: none;
}

.bloky .blok-okno__plus::before,
.bloky .blok-okno__plus::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	background: currentColor;
}

.bloky .blok-okno__plus::after { transform: rotate(90deg); }

.bloky .blok--okno:hover .blok-okno__plus,
.bloky .blok--okno:focus-visible .blok-okno__plus {
	opacity: 1;
	transform: rotate(90deg);
}

/* Obsah okna. Na stránke je skrytý, po kliknutí ho web/bloky.js (alebo
   Fancybox, ak ho web používa - config 'lightbox') presunie do vrstvy nad
   stránkou - preto nesie triedu .bloky sám a pravidlá obsahu platia aj tam.

   Šírky nie sú náhodné: stĺpce sa lámu pod seba, keď má obsah menej než
   768 px (@container bloky). Stredné okno má po odsadení 820 px, takže
   stĺpce v ňom stoja vedľa seba; v úzkom sú pod sebou ako na mobile. */
.blok-okno__obsah {
	box-sizing: border-box;
	width: 900px;
	max-width: 100%;
	padding: 44px 40px;
	background: #fff;
	text-align: left;
}

.blok-okno__obsah--uzke { width: 600px; }
.blok-okno__obsah--siroke { width: 1200px; }

.blok-okno__obsah > .blok + .blok {
	margin-top: var(--blok-medzera);
}

/* na mobile okno cez celú šírku, s menším okrajom */
@media (max-width: 767px) {
	.blok-okno__obsah { width: 100%; padding: 44px 16px 24px; }
}

/* --- vrstva nad stránkou (web/bloky.js) ----------------------------------
   Zväčšený obrázok, video a okno, keď web nepoužíva Fancybox. Vrstva je
   priamo v <body>, mimo .bloky - preto bez predpony. */

html.blok-vrstva-otvorena { overflow: hidden; }

.blok-vrstva {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow-y: auto;
	background: rgba(20, 22, 26, .88);
	overscroll-behavior: contain;
}

.blok-vrstva__telo {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 56px 16px 24px;
}

.blok-vrstva__obrazok {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 80px);
	object-fit: contain;
}

.blok-vrstva__video {
	width: min(1200px, 100%, (100vh - 80px) * 16 / 9);
	aspect-ratio: 16 / 9;
	background: #000;
}

.blok-vrstva__video iframe,
.blok-vrstva__video video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* okno je dlhé - začína hore a roluje celá vrstva */
.blok-vrstva--okno .blok-vrstva__telo { align-items: flex-start; }

.blok-vrstva__zavriet {
	position: fixed;
	top: 10px;
	right: 14px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font: 400 30px/40px sans-serif;
	cursor: pointer;
}

.blok-vrstva__zavriet:hover,
.blok-vrstva__zavriet:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }

/* --- stĺpce -------------------------------------------------------------- */

.bloky .blok--stlpce {
	display: grid;
	gap: var(--blok-medzera-stlpce);
}

/* Stĺpce aj bunky sú rovnako vysoké a obsah sa umiestňuje V NICH, nie naopak.
   Keby zvislé zarovnanie menilo align-items mriežky, zmenšovalo by samotné
   bunky - a tie by potom mali rôznu veľkosť podľa toho, čo je v nich. */
.bloky .blok-stlpec,
.bloky .blok-bunka {
	display: flex;
	flex-direction: column;
}

.bloky .blok--zvisle-hore .blok-stlpec,
.bloky .blok--zvisle-hore .blok-bunka { justify-content: flex-start; }

.bloky .blok--zvisle-stred .blok-stlpec,
.bloky .blok--zvisle-stred .blok-bunka { justify-content: center; }

.bloky .blok--zvisle-dole .blok-stlpec,
.bloky .blok--zvisle-dole .blok-bunka { justify-content: flex-end; }

/* Vodorovné zarovnanie obsahu v stĺpci alebo bunke; obrázok ho dedí tiež. */
.bloky .blok--obsah-vlavo .blok-stlpec,
.bloky .blok--obsah-vlavo .blok-bunka { text-align: left; }

.bloky .blok--obsah-stred .blok-stlpec,
.bloky .blok--obsah-stred .blok-bunka { text-align: center; }

.bloky .blok--obsah-vpravo .blok-stlpec,
.bloky .blok--obsah-vpravo .blok-bunka { text-align: right; }

.bloky .blok--stlpce-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bloky .blok--stlpce-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bloky .blok--stlpce-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* bloky vnútri stĺpca majú medzi sebou rovnaké medzery ako na najvyššej úrovni */
.bloky .blok-stlpec > .blok + .blok {
	margin-top: var(--blok-medzera);
}

/* Zalamovanie stlpcov je popisane DVAKRAT zamerne:

   @media reaguje na sirku okna - to je spravanie na webe a funguje vsade.
   @container reaguje na sirku samotneho bloku obsahu; vdaka nemu sa stlpce
   zlozia aj vtedy, ked je obsah zuzeny v mobilnom zobrazeni editora, hoci okno
   prehliadaca je siroke. Na webe je kontajner siroky ako stranka, takze obe
   pravidla hovoria to iste.

   Prehliadac bez podpory @container pravidlo ticho preskoci a ostane mu @media,
   cize web sa sprava rovnako ako doteraz. */

@media (max-width: 767px) {
	.bloky .blok--stlpce-2,
	.bloky .blok--stlpce-3,
	.bloky .blok--stlpce-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container bloky (max-width: 767px) {
	.bloky .blok--stlpce-2,
	.bloky .blok--stlpce-3,
	.bloky .blok--stlpce-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 4 stĺpce sú na tablete tesné - najprv sa zlomia na dva */
@media (min-width: 768px) and (max-width: 1100px) {
	.bloky .blok--stlpce-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container bloky (min-width: 768px) and (max-width: 1100px) {
	.bloky .blok--stlpce-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --- mriežka -------------------------------------------------------------- */

/* Zoznam rovnako stavaných položiek, ktorý sa sám zalamuje. Vďaka tomu na seba
   deliace linky nadväzujú aj cez viac riadkov - dva bloky stĺpcov pod sebou by
   to nedokázali. */
.bloky .blok--mriezka {
	display: grid;
	gap: 0;
}

.bloky .blok--mriezka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bloky .blok--mriezka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bloky .blok--mriezka-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Bunka je bez odsadenia ZÁMERNE: obsah mriežky tak lícuje s obsahom nad ňou
   a pod ňou. Odstup od okraja bunky si redaktor pridá nastavením Vnútorné
   odsadenie - pri mriežke ide to odsadenie na bunky (viď bloky_mriezka_html).
   Deliace linky, rámik ani pozadie buniek ho samy nezapínajú. */
.bloky .blok-bunka {
	padding: 0;
}

/* bloky vnútri bunky majú medzi sebou rovnaké medzery ako inde */
.bloky .blok-bunka > .blok + .blok {
	margin-top: var(--blok-medzera);
}

/* Linky sa kreslia ako vnútorné okraje buniek, nie okolo celej mriežky - inak
   by po obvode zostal rám navyše a v poslednom riadku visela linka. */
/* --blok-linky nastavuje blok, keď si redaktor zvolí farbu deliacich liniek */
.bloky .blok--mriezka-linky .blok-bunka {
	border-top: 1px solid var(--blok-linky, rgba(0, 0, 0, .1));
	border-left: 1px solid var(--blok-linky, rgba(0, 0, 0, .1));
}

.bloky .blok--mriezka-linky.blok--mriezka-2 .blok-bunka:nth-child(2n + 1),
.bloky .blok--mriezka-linky.blok--mriezka-3 .blok-bunka:nth-child(3n + 1),
.bloky .blok--mriezka-linky.blok--mriezka-4 .blok-bunka:nth-child(4n + 1) {
	border-left: 0;
}

.bloky .blok--mriezka-linky.blok--mriezka-2 .blok-bunka:nth-child(-n + 2),
.bloky .blok--mriezka-linky.blok--mriezka-3 .blok-bunka:nth-child(-n + 3),
.bloky .blok--mriezka-linky.blok--mriezka-4 .blok-bunka:nth-child(-n + 4) {
	border-top: 0;
}

.bloky .blok--na-tmavom.blok--mriezka-linky .blok-bunka {
	border-color: var(--blok-linky, rgba(255, 255, 255, .28));
}

/* Ozdoba bunky.

   Kreslí sa ako ::before SAMOTNEJ BUNKY, nie prvého bloku v nej: v editore je
   medzi bunkou a blokom ešte obal na ťahanie, takže selektor na prvý blok by
   tam netrafil a ozdoba by bola vidieť len na webe. */
.bloky .blok--mriezka-linka .blok-bunka,
.bloky .blok--mriezka-linka-vlavo .blok-bunka {
	position: relative;
}

/* --blok-ozdoba nastavuje blok podľa toho, akú farbu ozdoby si redaktor zvolil;
   bez nej platí akcent témy */
.bloky .blok--mriezka-linka .blok-bunka::before,
.bloky .blok--mriezka-linka-vlavo .blok-bunka::before {
	content: '';
	position: absolute;
	background: var(--blok-ozdoba, var(--blok-akcent));
}

/* linka nad obsahom */
.bloky .blok--mriezka-linka .blok-bunka { padding-top: 42px; }

/* Linka ide cez CELÚ bunku: odsadenie zboku bolo pozostatok z čias, keď mala
   bunka pevný padding. Odkedy je bez neho, obsah bunky lícuje s obsahom nad
   mriežkou a pod ňou - a linka má lícovať tiež. */
.bloky .blok--mriezka-linka .blok-bunka::before {
	top: 22px;
	left: 0;
	right: 0;
	height: 2px;
}

/* linka vľavo pred obsahom */
.bloky .blok--mriezka-linka-vlavo .blok-bunka { padding-left: 44px; }

/* to isté zvislo - linka je vysoká ako celá bunka a stojí na jej okraji */
.bloky .blok--mriezka-linka-vlavo .blok-bunka::before {
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
}

/* Rámik okolo bunky - bunky sa odsadia od seba, aby vyzerali ako samostatné
   karty. Nezávisí od veľkosti písma v bunke, na rozdiel od značky pred textom. */
/* Rámik si medzeru pýta sám, inak by sa rámiky susedných buniek zdvojili.
   Kým si ju však nezvolíme sami - vtedy vyhráva voľba. */
.bloky .blok--mriezka-ramik {
	gap: var(--blok-medzera-stlpce);
}

.bloky .blok--mriezka-ramik .blok-bunka {
	/* rámik má vlastnú predvolenú farbu - zlatý rám okolo každej bunky by bol
	   priveľa, decentná linka sedí lepšie */
	border: 1px solid var(--blok-ozdoba, rgba(0, 0, 0, .12));
}


.bloky .blok--na-tmavom.blok--mriezka-ramik .blok-bunka {
	border-color: rgba(255, 255, 255, .28);
}

/* na úzkej ploche je mriežka pod sebou, linky teda patria len navrch */
@media (max-width: 767px) {
	.bloky .blok--mriezka-2,
	.bloky .blok--mriezka-3,
	.bloky .blok--mriezka-4 { grid-template-columns: minmax(0, 1fr); }

	.bloky .blok--mriezka-linky .blok-bunka {
		border-left: 0;
		border-top: 1px solid var(--blok-linky, rgba(0, 0, 0, .1));
	}
	.bloky .blok--mriezka-linky .blok-bunka:first-child { border-top: 0; }
}

@container bloky (max-width: 767px) {
	.bloky .blok--mriezka-2,
	.bloky .blok--mriezka-3,
	.bloky .blok--mriezka-4 { grid-template-columns: minmax(0, 1fr); }

	.bloky .blok--mriezka-linky .blok-bunka {
		border-left: 0;
		border-top: 1px solid var(--blok-linky, rgba(0, 0, 0, .1));
	}
	.bloky .blok--mriezka-linky .blok-bunka:first-child { border-top: 0; }
}

/* štyri v riadku sú na tablete tesné - najprv sa zlomia na dva */
@media (min-width: 768px) and (max-width: 1100px) {
	.bloky .blok--mriezka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bloky .blok--mriezka-linky.blok--mriezka-4 .blok-bunka:nth-child(2n + 1) { border-left: 0; }
	.bloky .blok--mriezka-linky.blok--mriezka-4 .blok-bunka:nth-child(3),
	.bloky .blok--mriezka-linky.blok--mriezka-4 .blok-bunka:nth-child(4) {
		border-top: 1px solid var(--blok-linky, rgba(0, 0, 0, .1));
	}
}


/* --- kontajner ------------------------------------------------------------ */

/* Jeden zoznam blokov pod spoločným pozadím, rámikom a odsadením. Na rozdiel od
   stĺpcov a mriežky doň patria aj tie - práve preto existuje, aby sa dal text
   a mriežka obrázkov spojiť do jedného farebného celku. */
.bloky .blok--kontajner > .blok + .blok {
	margin-top: var(--blok-medzera);
}

/* Obrázok a video sa zaoblia spolu s blokom - inak by z jeho zaoblených rohov
   vytŕčali. Zaoblenie je číslo v atribúte style, takže ho preberáme dedením;
   nie cez overflow na bloku, ten by v editore orezal lištu vnoreného bloku. */
.bloky .blok--obrazok a,
.bloky .blok--obrazok img,
.bloky .blok--video .blok-video-ramec {
	border-radius: inherit;
}


/* ===========================================================================
   POZADIE, ODSADENIE, VIDITEĽNOSŤ

   Rozmery (šírka, odsadenie, okraje, rámik, zaoblenie) sú čísla a zapisujú sa
   priamo do atribútu style - viď bloky_css_vzhladu() v src/bloky.php.
   Tu zostáva len to, čo z čísla vyčítať nejde.
   =========================================================================== */

/* Blok len pre počítač alebo len pre mobil. Hranica je tá istá, na ktorej sa
   zalamujú stĺpce, aby sa obsah nesprával raz tak a raz onak.

   Popri media query aj @container - rovnako ako pri zalamovaní stĺpcov. Mobilný
   náhľad v editore zužuje obsah, nie okno prehliadača, takže bez container query
   by v ňom blok pre mobil zostal skrytý a blok pre počítač viditeľný. */
@media (max-width: 767px) {
	.bloky .blok--len-desktop { display: none; }
}

@media (min-width: 768px) {
	.bloky .blok--len-mobil { display: none; }
}

@container bloky (max-width: 767px) {
	.bloky .blok--len-desktop { display: none; }
	.bloky .blok--len-mobil { display: block; }
}

@container bloky (min-width: 768px) {
	.bloky .blok--len-mobil { display: none; }
	.bloky .blok--len-desktop { display: block; }
}

/* Na tmavom pozadí by čierny text nebolo vidieť, tak je predvolene biely.
   Musí to byť takto adresne, lebo .blok--text si farbu nastavuje sám a bežné
   dedenie by ho neprebilo. Vlastná farba z palety je v style="…" priamo na
   texte, takže tá vyhráva nad oboma. */
.bloky .blok--na-tmavom,
.bloky .blok--na-tmavom .blok--text {
	color: var(--blok-text-na-tmavom, #fff);
}

.bloky .blok--na-tmavom.blok--text a,
.bloky .blok--na-tmavom .blok--text a {
	color: var(--blok-odkaz-na-tmavom, var(--blok-akcent));
}

/* Blok so svetlým pozadím vnútri tmavého vracia text späť na tmavý -
   bez tohto by po vnorení zdedil bielu a zmizol. */
.bloky .blok--na-svetlom {
	color: #000;
}

/* Pozadie môže sedieť aj priamo na textovom bloku, nielen na jeho obale -
   preto všade dvojica selektorov: ten istý prvok aj potomok. */
.bloky .blok--na-svetlom.blok--text,
.bloky .blok--na-svetlom .blok--text {
	color: var(--blok-text);
}

.bloky .blok--na-svetlom.blok--text a,
.bloky .blok--na-svetlom .blok--text a {
	color: var(--blok-odkaz);
}


/* ===========================================================================
   ŠTÝLY BLOKOV

   Blok môže dostať štýl (blok--styl-*), ktorý mu zmení vzhľad. Platí pre
   ktorýkoľvek typ bloku, nielen pre stĺpce. Nové štýly sa pridávajú sem
   a do zoznamu ŠTÝLY v admin/js/blok-editor.js.
   =========================================================================== */

/* Fialový pruh - tmavé pozadie cez celú šírku, stĺpce oddelené tenkou linkou.
   Farby textu si nastavuje redaktor sám, tu je len podklad a rozostupy. */
/* Oddelené stĺpce - vzor pridáva len tenkú linku medzi stĺpcami. Pozadie
   ani odsadenie si nenárokuje, tie sú nastavením každého bloku, takže sa dá
   použiť na svetlom aj na tmavom podklade. */
.bloky .blok--styl-linky.blok--stlpce {
	gap: 0;
}

.bloky .blok--styl-linky .blok-stlpec {
	padding: 4px 26px;
}

.bloky .blok--styl-linky .blok-stlpec + .blok-stlpec {
	border-left: 1px solid rgba(0, 0, 0, .16);
}

.bloky .blok--na-tmavom.blok--styl-linky .blok-stlpec + .blok-stlpec {
	border-left-color: rgba(255, 255, 255, .28);
}

/* na úzkej ploche sú stĺpce pod sebou, deliaca linka teda patrí navrch */
@media (max-width: 767px) {
	.bloky .blok--styl-linky .blok-stlpec { padding: 16px 0; }
	.bloky .blok--styl-linky .blok-stlpec + .blok-stlpec {
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, .16);
	}
	.bloky .blok--na-tmavom.blok--styl-linky .blok-stlpec + .blok-stlpec {
		border-top-color: rgba(255, 255, 255, .28);
	}
}

@container bloky (max-width: 767px) {
	.bloky .blok--styl-linky .blok-stlpec { padding: 16px 0; }
	.bloky .blok--styl-linky .blok-stlpec + .blok-stlpec {
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, .16);
	}
	.bloky .blok--na-tmavom.blok--styl-linky .blok-stlpec + .blok-stlpec {
		border-top-color: rgba(255, 255, 255, .28);
	}
}