/* =========================================================================
   titulka.css — sekce titulní strany podle návrhu v3
   (`.context/navrhy/olsany/olsany-v3.html` + `olsany-v3.css`).
   -------------------------------------------------------------------------
   Sekce plní redaktor řádky hlavní strany (viz `_mainpage.php`). Blok je
   sloupec řádku:
   `.nol-blok` = `.nol-hlava` (nadpis + odkaz) + `.nol-blok-obsah`
   (portlety) + `.nol-blok-tlacitka`. Typ obsahu se pozná podle markupu
   rendereru (`:has(.a3-deska)`, `:has(.a3-cal)` …), ne podle pořadí bloků —
   redaktor je smí přeskládat.

   Úpravy markupu, které CSS neudělá (datum akce ve čtverci, odrážky hlášení,
   datum bez popisku), dělá strankovice3.js a přidává třídy `nol-js-*`. Bez JS
   zůstane čitelný výpis z rendereru.
   ========================================================================= */

/* ── Hlavička sekce / bloku ────────────────────────────────────────── */

.nol-hlava {
	display: flex;
	align-items: flex-end;
	gap: var(--nol-mezera-4);
	margin-bottom: 36px;
}

.nol-nadpis {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.nol-nadpis::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 14px;
	background: var(--nol-cervena);
}

.nol-dalsi {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 18px;
	font-size: 18px;
	font-weight: 600;
	color: var(--nol-primarni);
	text-decoration: none;
	white-space: nowrap;
}

.nol-dalsi svg { width: 20px; height: 20px; transition: transform var(--nol-prechod); }
.nol-dalsi:hover { color: var(--nol-primarni-tmava); }
.nol-dalsi:hover svg { transform: translateX(3px); }

/* Mřížka portletů uvnitř bloku na titulce: bez žlábků Bootstrapu, blok
   sám nese odsazení. */
.nol-blok-obsah > .portlet.row {
	--bs-gutter-x: 0;
	margin: 0;
}

.nol-blok-obsah > .portlet.row + .portlet.row { margin-top: var(--nol-mezera-5); }

.nol-blok-tlacitka {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

/* Výpisy na titulce jsou ukázka, ne archiv: filtr, záložky kategorií
   a stránkování patří až na stránku, kam vede „Všechny …". */
.nol-nastenka .a3-portlet-filtr-form,
.nol-nastenka .a3-kat-zalozky,
.nol-nastenka .a3-pager,
.nol-nastenka .a3-portlet-filtr-info,
.nol-pas .a3-portlet-filtr-form,
.nol-pas .a3-kat-zalozky,
.nol-pas .a3-pager,
.nol-pas .a3-portlet-filtr-info { display: none; }

/* =========================================================================
   NÁSTĚNKA — aktuality | úřední deska (sloupec 460 px)
   ========================================================================= */

.nol-nastenka { padding: 88px 0 88px; }

/* Sloupce dělí šířka z editoru (`--nol-sirka`, 1–12). Blok má minimální
   čitelnou šířku `--nol-blok-min`; když se všechny do řádku nevejdou,
   poslední se zalomí na další řádek a zbylé si dál dělí místo v poměru
   z editoru (mezikrok mezi „vedle sebe" a „pod sebou"). Pod 768 px jsou
   pod sebou vždy, jako portlety (`col-md-*`). */
.nol-nastenka > .nol-obal {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
}

.nol-nastenka > .nol-obal > .nol-blok,
.nol-pas > .nol-obal > .nol-blok {
	flex: var(--nol-sirka, 1) 1 0%;
	min-width: min(100%, var(--nol-blok-min, 360px));
}

/* ── Aktuality: seznam s náhledem (návrh v4, varianta C) ──────────────
   Aktuality jsou 1. sloupec nástěnky (další sloupec s aktualitami je
   hlášení rozhlasu). Řádek = náhled 3 : 2 vlevo, text vpravo. Náhled se
   nikdy neořízne — redaktoři dávají plakáty s textem, loga i fotky.
   Okolí obrázku vyplní jeho rozmazaná kopie (`--nol-nahled` nastaví
   strankovice3.js; bez JS hluboká modř). */

.nol-nastenka .nol-blok:first-child { container: nol-aktuality / inline-size; }

.nol-nastenka .nol-blok:first-child .a3-aktuality .portlet-content-formular {
	display: flex;
	flex-direction: column;
}

.nol-nastenka .nol-blok:first-child .article {
	margin: 0;
	padding: 24px 0;
	border: 0;
	border-top: 1px solid var(--nol-ramecek);
	border-radius: 0;
	background: transparent;
	min-width: 0;
}

.nol-nastenka .nol-blok:first-child .article:first-child { padding-top: 0; border-top: 0; }
.nol-nastenka .nol-blok:first-child .article:last-child { padding-bottom: 0; }

.nol-nastenka .nol-blok:first-child .article:hover,
.nol-nastenka .nol-blok:first-child .article:focus-within { background: transparent; }

.nol-nastenka .nol-blok:first-child .article > .row {
	--bs-gutter-x: 0;
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin: 0;
}

.nol-nastenka .nol-blok:first-child .article .a3-aktualita-nahled,
.nol-nastenka .nol-blok:first-child .article .a3-aktualita-text {
	width: auto;
	max-width: none;
	padding: 0;
}

.nol-nastenka .nol-blok:first-child .article .a3-aktualita-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nol-nastenka .nol-blok:first-child .article .article-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--nol-pruh);
}

.nol-nastenka .nol-blok:first-child .article .article-image::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--nol-nahled, none) center / cover;
	filter: blur(16px) brightness(.62);
}

.nol-nastenka .nol-blok:first-child .article .article-image a { position: relative; display: block; height: 100%; }

/* `background: none` — portlets.css dává obrázku světlou plochu, ta by
   rozmazaný rám překryla. */
.nol-nastenka .nol-blok:first-child .article .article-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
	background: none;
}

/* Grafika (logo, symbol na bílém — pozná ji strankovice3.js): celá na papíře. */
.nol-nastenka .nol-blok:first-child .article .article-image:has(img.nol-js-grafika) { background: var(--nol-pozadi-tlumene); }
.nol-nastenka .nol-blok:first-child .article .article-image:has(img.nol-js-grafika)::before { display: none; }
.nol-nastenka .nol-blok:first-child .article .article-image img.nol-js-grafika { padding: 8% 12%; }

/* Bez obrázku renderer vloží `empty.jpg` skinu → modré pole s ikonou. */
.nol-nastenka .nol-blok:first-child .article .article-image:has(img[src$="/empty.jpg"]) { background: var(--nol-primarni-jemna); }
.nol-nastenka .nol-blok:first-child .article .article-image:has(img[src$="/empty.jpg"])::before {
	inset: 0;
	filter: none;
	background: center / 40px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315683a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14H6a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M17 9h3v8a2 2 0 0 1-2 2'/%3E%3Cpath d='M7 9h7M7 12h7M7 15h4'/%3E%3C/svg%3E"),
		repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--nol-primarni) 5%, transparent) 14px 15px);
}
.nol-nastenka .nol-blok:first-child .article .article-image img[src$="/empty.jpg"] { visibility: hidden; }

/* Meta řádek nad titulek: štítek kategorie, za ním datum. */
.nol-nastenka .nol-blok:first-child .article .article-meta {
	order: -1;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.nol-nastenka .nol-blok:first-child .article .article-meta-oddelovac { display: none; }

.nol-nastenka .nol-blok:first-child .article .article-meta-kategorie {
	height: 24px;
	padding: 0 9px;
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni-tmava);
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
}

.nol-nastenka .nol-blok:first-child .article .article-meta-datetime {
	font-size: 14px;
	font-weight: 400;
	color: var(--nol-text-tlumeny);
}

.nol-nastenka .nol-blok:first-child .article .article-title {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.22;
}

.nol-nastenka .nol-blok:first-child .article:hover .article-title a { color: var(--nol-primarni); }

.nol-nastenka .nol-blok:first-child .article .article-perex {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-size: 14.5px;
	color: var(--nol-text-tlumeny);
}

.nol-nastenka .nol-blok:first-child .article:nth-child(n+5) { display: none; }

/* Úzký sloupec (šířka z editoru, ne okna): menší náhled, pod ~340 px
   náhled nad textem. */
@container nol-aktuality (max-width: 560px) {
	.nol-nastenka .nol-blok:first-child .article > .row { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
	.nol-nastenka .nol-blok:first-child .article .article-meta { flex-wrap: wrap; row-gap: 4px; }
	.nol-nastenka .nol-blok:first-child .article .article-title { font-size: 18px; }
	.nol-nastenka .nol-blok:first-child .article .article-perex { -webkit-line-clamp: 2; }
}

@container nol-aktuality (max-width: 340px) {
	.nol-nastenka .nol-blok:first-child .article > .row { grid-template-columns: minmax(0, 1fr); }
}

/* Nadpis a odkaz „Všechny …" se v úzkém sloupci zalomí pod sebe. */
.nol-nastenka .nol-hlava,
.nol-pas .nol-hlava { flex-wrap: wrap; justify-content: space-between; column-gap: 16px; }
.nol-nastenka .nol-dalsi,
.nol-pas .nol-dalsi { margin-left: 0; }

/* ── Úřední deska ve svislém sloupci ───────────────────────────────── */

/* Plocha desky přesahuje nahoru o své odsazení, aby nadpis ležel v jedné
   rovině s nadpisy aktualit a hlášení. */
.nol-nastenka .nol-blok:has(.a3-deska) {
	margin-top: -32px;
	padding: 32px 32px 28px;
	background: var(--nol-pozadi-tlumene);
}

.nol-nastenka .a3-deska .portlet-content-formular,
.nol-nastenka .a3-deska .portlet-content-deska { margin: 0; }

.nol-nastenka .a3-deska .a3-deska-tabulka { margin: 0; }

.nol-nastenka .a3-deska .a3-deska-radek {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 6px;
	margin-bottom: 10px;
	padding: 16px 20px;
	border: 0;
	border-left: 4px solid var(--nol-primarni);
	border-radius: 0;
	background: var(--nol-povrch);
}

.nol-nastenka .a3-deska .a3-deska-hlavicka { display: none; }
.nol-nastenka .a3-deska .portlet-row-bg:hover { background: var(--nol-povrch); }

.nol-nastenka .a3-deska .a3-deska-radek > .a3-deska-kategorie { order: -1; }

.nol-nastenka .a3-deska .a3-deska-kategorie small {
	display: block;
	padding: 0;
	background: none;
	color: var(--nol-primarni);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.nol-nastenka .a3-deska .a3-deska-nazev a {
	font-size: 17.5px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.3;
}

/* Celý řádek klikací. */
.nol-nastenka .a3-deska .a3-deska-nazev a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nol-nastenka .a3-deska .a3-deska-nazev a:hover { text-decoration: none; }
.nol-nastenka .a3-deska .a3-deska-radek:hover .a3-deska-nazev a { color: var(--nol-primarni); }

/* „📄 Vyvěšeno 10. 10. 2026" — ikona dokumentu a popisek bez dvojtečky;
   sejmutí se na titulce neukazuje. */
.nol-nastenka .a3-deska .a3-deska-udaj {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--nol-text-tlumeny);
}

.nol-nastenka .a3-deska .a3-deska-udaj:not(.a3-deska-kategorie)[data-a3-popis]::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: var(--nol-primarni);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nol-nastenka .a3-deska .a3-deska-udaj[data-a3-popis="Vyvěšeno"] small::before { content: "Vyvěšeno "; }
.nol-nastenka .a3-deska .a3-deska-udaj[data-a3-popis="Sejmuto"] { display: none; }

.nol-nastenka .nol-blok:has(.a3-deska) .nol-blok-tlacitka { margin-top: 12px; }
.nol-nastenka .nol-blok:has(.a3-deska) .nol-tlacitko { width: 100%; }

/* =========================================================================
   PÁS — hlášení | kalendář (modrý) | akce | webkamera
   ========================================================================= */

.nol-pas {
	background: var(--nol-pozadi-tlumene);
	border-top: 1px solid var(--nol-ramecek);
}

/* Šířka sloupců z editoru a zalamování jako u nástěnky. */
.nol-pas > .nol-obal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 56px;
}

.nol-pas .nol-blok { padding: 72px 0 64px; }
.nol-pas .nol-nadpis { font-size: 28px; }
.nol-pas .nol-dalsi { font-size: 16px; padding-bottom: 20px; }

/* Blok bez výpisu (odběr novinek): užší minimum, tlačítka vedle sebe,
   když se vejdou, jinak pod sebou přes šířku sloupce. */
.nol-pas .nol-blok:not(:has(.nol-blok-obsah .portlet-content-formular, .a3-cal, .a3-kamera)) { --nol-blok-min: 220px; }
.nol-pas .nol-blok:not(:has(.nol-blok-obsah .portlet-content-formular, .a3-cal, .a3-kamera)) .nol-tlacitko {
	justify-content: flex-start;
	min-width: 0;
	white-space: normal;
	text-align: left;
}

.nol-pas .nol-blok-tlacitka .nol-tlacitko,
.nol-nastenka .nol-blok:not(:first-child):has(.a3-aktuality) .nol-blok-tlacitka .nol-tlacitko {
	min-height: 44px;
	padding: 0 16px;
	font-size: 15px;
	border-color: var(--nol-ramecek-vyrazny);
}

/* ── Kalendář na modré ploše ──────────────────────────────────────── */

.nol-pas .nol-blok:has(.a3-cal) {
	padding: 72px 40px 0px;
	background: var(--nol-primarni);
	color: var(--nol-na-tmave);
}

.nol-pas .nol-blok:has(.a3-cal) .nol-nadpis { color: var(--nol-na-tmave); }

.nol-pas .a3-cal {
	--a3cal-accent: var(--nol-na-tmave);
	--a3cal-day-bg: transparent;
	--a3cal-day-hover: rgba(255, 255, 255, .12);
	--a3cal-day-color: var(--nol-na-tmave);
	--a3cal-active-bg: var(--nol-povrch);
	--a3cal-active-hover: var(--nol-primarni-svetla);
	--a3cal-active-color: var(--nol-primarni-tmava);
	--a3cal-today-bg: transparent;
	--a3cal-today-color: var(--nol-na-tmave);
	--a3cal-weekend-bg: transparent;
	font-size: 15px;
}

/* Vlastní titulek kalendáře nahrazuje nadpis bloku. */
.nol-pas .a3-cal .a3-cal-title { display: none; }

.nol-pas .a3-cal .a3-cal-header { margin-bottom: 12px; }

.nol-pas .a3-cal .a3-cal-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.nol-pas .a3-cal .a3-cal-period {
	font-family: var(--nol-pismo-nadpis);
	font-size: 19px;
	font-weight: 700;
}

.nol-pas .a3-cal .a3-cal-period [data-head-month]::first-letter { text-transform: uppercase; }
.nol-pas .a3-cal [data-head-month] { display: inline-block; }

.nol-pas .a3-cal .a3-cal-nav {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--nol-na-tmave);
	font-size: 22px;
}

.nol-pas .a3-cal .a3-cal-nav:hover { background: rgba(255, 255, 255, .12); color: var(--nol-na-tmave); }

/* Řádek zkratek dnů (Po … Ne) vkládá strankovice3.js — renderer ho nemá. */
.nol-cal-dny {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
}

.nol-cal-dny span {
	padding: 4px 0;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .75);
}

.nol-pas .a3-cal .responsive-calendar .days { gap: 4px; }

.nol-pas .a3-cal .responsive-calendar .days .day a {
	height: 42px;
	margin: 0;
	border: 0;
	border-radius: 0;
	font-weight: 500;
	color: var(--nol-na-tmave);
}

.nol-pas .a3-cal .responsive-calendar .day.sat a,
.nol-pas .a3-cal .responsive-calendar .day.sun a { color: rgba(255, 255, 255, .75); }

.nol-pas .a3-cal .responsive-calendar .day.not-current a { color: rgba(255, 255, 255, .35); }

.nol-pas .a3-cal .responsive-calendar .day.active a {
	background: var(--nol-povrch);
	color: var(--nol-primarni-tmava);
	font-weight: 800;
}

.nol-pas .a3-cal .responsive-calendar .day.today a {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--nol-cervena);
	color: var(--nol-na-tmave);
	font-weight: 800;
}

.nol-pas .a3-cal .responsive-calendar .day.today.active a {
	background: var(--nol-povrch);
	color: var(--nol-primarni-tmava);
}

/* Barevné pruhy kategorií by na modré splynuly — den s akcí nese bílá
   plocha, jako v návrhu. Počet akcí zůstává. */
.nol-pas .a3-cal .responsive-calendar .day .a3-cal-bar { display: none; }

.nol-pas .a3-cal .responsive-calendar .day .badge {
	background: var(--nol-cervena);
	color: var(--nol-primarni-kontrast);
	box-shadow: none;
}

/* Legenda podle návrhu: „▢ Akce ▢ Dnes" místo seznamu kategorií. */
.nol-pas .a3-cal .a3-cal-legend {
	display: flex;
	gap: 18px;
	margin-top: 14px;
	padding: 0;
	border: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .8);
}

.nol-pas .a3-cal .a3-cal-legend > * { display: none; }

.nol-pas .a3-cal .a3-cal-legend::before,
.nol-pas .a3-cal .a3-cal-legend::after {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.nol-pas .a3-cal .a3-cal-legend::before { content: "Akce"; padding-left: 18px; background: linear-gradient(#fff, #fff) left center / 12px 12px no-repeat; }
.nol-pas .a3-cal .a3-cal-legend::after { content: "Dnes"; padding-left: 18px; background: linear-gradient(var(--nol-cervena), var(--nol-cervena)) left center / 12px 12px no-repeat; box-shadow: none; }

/* ── Hlášení rozhlasu (aktuality bez termínu konání) ──────────────────
   strankovice3.js přidá do každé položky `.nol-hl-dat` (datum + den) a nahradí
   perex odrážkami `.nol-hl-body`; dlaždice je pak `.nol-js-hlaseni`. */
.nol-pas .nol-blok:has(.a3-aktuality):not(:has(.datetime-udalost)) .article,
.nol-nastenka .nol-blok:not(:first-child):has(.a3-aktuality) .article {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--nol-ramecek);
	border-radius: 0;
	background: transparent;
}

.nol-pas .nol-blok .article:last-child,
.nol-nastenka .nol-blok:not(:first-child):has(.a3-aktuality) .article:last-child { border-bottom: 0; }

.nol-pas .article.nol-js-hlaseni > .row,
.nol-nastenka .article.nol-js-hlaseni > .row { display: none; }

.nol-hl-dat {
	flex: none;
	width: 64px;
	font-family: var(--nol-pismo-nadpis);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.1;
}

.nol-hl-dat small {
	display: block;
	margin-top: 2px;
	font-family: var(--nol-pismo);
	font-size: 13px;
	font-weight: 500;
	color: var(--nol-text-tlumeny);
}

.nol-hl-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
}

.nol-hl-body li { margin: 0; }

/* Ukázka, ne celé hlášení — víc bodů je v detailu, kam vede celý řádek. */
.nol-hl-body li:nth-child(n+5) { display: none; }

.nol-hl-body li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 10px 2px 0;
	background: var(--nol-primarni);
}

/* Celý řádek vede na detail hlášení — odkaz nese skrytý titulek. */
.nol-hl-odkaz { color: inherit; text-decoration: none; }
.nol-hl-odkaz::after { content: ""; position: absolute; inset: 0; }
.nol-pas .article.nol-js-hlaseni,
.nol-nastenka .article.nol-js-hlaseni { position: relative; }
.nol-pas .article.nol-js-hlaseni:hover .nol-hl-body { color: var(--nol-primarni); }

/* ── Nadcházející akce ─────────────────────────────────────────────── */

.nol-pas .article.nol-js-akce {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--nol-ramecek);
	border-radius: 0;
	background: transparent;
}

.nol-pas .article.nol-js-akce > .row { display: none; }

.nol-akce-datum {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 64px;
	border: 1px solid var(--nol-ramecek-vyrazny);
	line-height: 1;
}

.nol-akce-datum b {
	font-family: var(--nol-pismo-nadpis);
	font-size: 24px;
	font-weight: 800;
}

.nol-akce-datum span {
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--nol-primarni);
	text-transform: uppercase;
}

.nol-akce-text { min-width: 0; }

.nol-akce-nazev {
	display: block;
	font-family: var(--nol-pismo-nadpis);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--nol-text);
	text-decoration: none;
}

.nol-akce-nazev::after { content: ""; position: absolute; inset: 0; }
.nol-pas .article.nol-js-akce:hover .nol-akce-nazev { color: var(--nol-primarni); }

.nol-akce-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 14px;
	color: var(--nol-text-tlumeny);
}

.nol-akce-meta svg { width: 15px; height: 15px; flex: none; }

/* ── Webkamera: první velká, další jako náhledové dlaždice ─────────── */

.nol-pas .a3-kamera-ram {
	aspect-ratio: 16 / 9;
	border-bottom: 4px solid var(--nol-primarni);
	border-radius: 0;
}

.nol-pas .a3-kamera .a3-kamera-nazev { display: none; }

/* Druhá a další kamera bloku se ukazují jen jako náhledy (`.nol-kamery-dalsi`,
   skládá strankovice3.js) — ať stojí ve stejném sloupci, nebo v dalších řádcích. */
.nol-pas .nol-blok:has(.a3-kamera) .nol-blok-obsah > .portlet.row:has(.a3-kamera) ~ .portlet.row:has(.a3-kamera),
.nol-pas .a3-kamera ~ .a3-kamera { display: none; }

.nol-kamery-dalsi {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

.nol-kamery-dalsi a {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 10px 10px;
	background: var(--nol-povrch);
	color: var(--nol-text);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.nol-kamery-dalsi img { width: 72px; height: 44px; object-fit: cover; border-radius: 0; }

/* =========================================================================
   ŽIVOT V OBCI — písek, úvod vlevo 420 px, dlaždice 3×2 vpravo
   ========================================================================= */

.nol-zivot {
	padding: 72px 0;
	background: var(--nol-pisek);
	border-top: 1px solid var(--nol-pisek-linka);
	border-bottom: 1px solid var(--nol-pisek-linka);
}

.nol-zivot > .nol-obal {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.nol-zivot-uvod p {
	margin: 20px 0 28px;
	font-size: 17px;
	color: var(--nol-text-tlumeny);
}

.nol-zivot-dlazdice,
.nol-zivot .a3-rozcestnik-dlazdice {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nol-zivot-dlazdice .a3-box { margin: 0; }
.nol-zivot-sada > li { margin: 0; }

.nol-zivot-sada a,
.nol-zivot .a3-rozcestnik-dlazdice-polozka {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	height: 104px;
	padding: 0 24px;
	background: var(--nol-povrch);
	color: var(--nol-text);
	text-decoration: none;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--nol-pruh) 8%, transparent);
	transition: box-shadow var(--nol-prechod);
}

.nol-zivot-sada a:hover,
.nol-zivot .a3-rozcestnik-dlazdice-polozka:hover { box-shadow: inset 0 -3px 0 var(--nol-primarni), 0 1px 2px color-mix(in srgb, var(--nol-pruh) 8%, transparent); }

.nol-zivot-ikona,
.nol-zivot .a3-rozcestnik-dlazdice-polozka::before {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
}

.nol-zivot-ikona svg { width: 26px; height: 26px; }

.nol-zivot .a3-rozcestnik-dlazdice-polozka::before {
	content: "";
	background: var(--nol-primarni-svetla) no-repeat center / 24px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315683a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

.nol-zivot-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nol-zivot-text b,
.nol-zivot .a3-rozcestnik-dlazdice-odkaz {
	font-family: var(--nol-pismo-nadpis);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
}

.nol-zivot-text span {
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--nol-text-tlumeny);
}

.nol-zivot-sipka { width: 18px; height: 18px; flex: none; color: var(--nol-primarni); }

.nol-zivot .a3-rozcestnik-dlazdice-odkaz { flex: 1; color: var(--nol-text); text-decoration: none; }
.nol-zivot .a3-rozcestnik-dlazdice-odkaz::after { content: ""; position: absolute; inset: 0; }
.nol-zivot .a3-rozcestnik-podseznam { display: none; }

/* =========================================================================
   MÍSTA, KDE SE POTKÁVÁME — hluboká modř, 5 karet s fotkou
   Blok = místo: název bloku (`.nol-blok-nazev`), fotka (portlet fotka),
   text; první odstavec textu je bílý štítek („Obsazenost", „7. 11. výlov").
   ========================================================================= */

.nol-mista {
	padding: 80px 0;
	background: var(--nol-pruh);
	color: var(--nol-na-tmave);
}

.nol-mista .nol-nadpis { color: var(--nol-na-tmave); }

.nol-mista-uvod {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: end;
	margin-bottom: 44px;
}

.nol-mista-uvod p {
	max-width: 700px;
	margin: 20px 0 0;
	font-size: 17px;
	color: var(--nol-na-tmave-tlumene);
}

.nol-mista-tlacitka { display: flex; gap: 12px; }

.nol-mista-mrizka {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
}

.nol-mista .nol-blok {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Fotka nahoru, pod ní červený proužek 3 px, pak název a text. */
.nol-mista .nol-blok-nazev {
	order: 1;
	margin: 16px 0 6px;
	color: var(--nol-na-tmave);
	font-size: 21px;
	font-weight: 800;
}

/* Text a fotka bývají v JEDNOM sloupci bloku — obaly mřížky se proto
   rozpustí a pořadí srovná `order` na jejich obsahu: fotka, název, text. */
.nol-mista .nol-blok-obsah,
.nol-mista .nol-blok-obsah > .portlet.row,
.nol-mista .nol-blok-obsah > .portlet.row > [class*="col-"] { display: contents; }

.nol-mista .nol-blok-obsah > .portlet.row > [class*="col-"] > * { order: 2; }
.nol-mista .nol-blok-obsah > .portlet.row > [class*="col-"] > :has(img) { order: 0; }
.nol-mista .portlet-content-photo-container { margin: 0; padding: 0; }

.nol-mista .nol-blok-obsah img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 0;
	border-bottom: 3px solid var(--nol-cervena);
}

.nol-mista .nol-blok-obsah figcaption,
.nol-mista .nol-blok-obsah .portlet-foto-popis { display: none; }

.nol-mista .nol-blok-obsah p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--nol-na-tmave-tlumene);
}

.nol-mista .nol-blok-obsah p:first-of-type {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nol-na-tmave);
}

.nol-mista .nol-blok-obsah a { color: var(--nol-na-tmave); }

/* =========================================================================
   POČASÍ V HERO — modrá karta „jen aktuálně"
   Kontrakt `a3-pocasi-*` (frontend_web.md → 7). Atribuce MET Norway je
   licenční podmínka: smí se zmenšit a přebarvit, NE skrýt.
   ========================================================================= */

.nol-uvod-pocasi .a3-box { margin: 0; }

.nol-uvod-pocasi .a3-pocasi {
	margin: 0;
	padding: 0;
	background: var(--nol-primarni);
	color: var(--nol-na-tmave);
	border: 0;
	border-radius: 0;
}

.nol-uvod-pocasi .a3-pocasi-ted {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "misto misto" "ikona udaje";
	align-items: center;
	gap: 0 20px;
	padding: 0 24px;
}

.nol-uvod-pocasi .a3-pocasi-ted-udaje { display: contents; }

.nol-uvod-pocasi .a3-pocasi-misto {
	grid-area: misto;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -24px 22px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--nol-na-tmave-linka);
	font-family: var(--nol-pismo-nadpis);
	font-size: 18px;
	font-weight: 700;
	color: var(--nol-na-tmave);
}

.nol-uvod-pocasi .a3-pocasi-misto::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--nol-na-tmave);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* „dnes 20. 10." doplňuje strankovice3.js do `.nol-pocasi-dnes`. */
.nol-pocasi-dnes {
	margin-left: auto;
	font-family: var(--nol-pismo);
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .75);
}

.nol-uvod-pocasi .a3-pocasi-ted-ikona { grid-area: ikona; grid-row: 2 / span 2; color: var(--nol-na-tmave); }
.nol-uvod-pocasi .a3-pocasi-ted-ikona svg { width: 64px; height: 64px; }

.nol-uvod-pocasi .a3-pocasi-teplota {
	font-family: var(--nol-pismo-nadpis);
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--nol-na-tmave);
}

.nol-uvod-pocasi .a3-pocasi-jev {
	grid-column: 2;
	margin-top: 4px;
	font-size: 17px;
	color: rgba(255, 255, 255, .88);
}

.nol-uvod-pocasi .a3-pocasi-doplnky {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 16px;
	padding-bottom: 20px;
	font-size: 14px;
	color: rgba(255, 255, 255, .88);
}

.nol-uvod-pocasi .a3-pocasi-doplnek { color: inherit; }
.nol-uvod-pocasi .a3-pocasi-doplnek::before { content: none; }

.nol-uvod-pocasi .a3-pocasi-dny { display: none; }

.nol-uvod-pocasi .a3-pocasi-zdroj {
	margin: 0;
	padding: 10px 24px;
	border-top: 1px solid var(--nol-na-tmave-linka);
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .7);
}

.nol-uvod-pocasi .a3-pocasi-zdroj a { color: inherit; }

/* =========================================================================
   UŽŠÍ OKNA
   ========================================================================= */

@media (max-width: 1600px) {
	/* Pás o čtyřech blocích pod 1600 px rovnou po dvou — jinak by se
	   zalomil jen poslední a roztáhl se přes celou šířku. */
	.nol-pas > .nol-obal:has(> .nol-blok:nth-child(4)) > .nol-blok { --nol-blok-min: 40%; }

	.nol-zivot > .nol-obal { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 1199px) {
	.nol-nastenka > .nol-obal { gap: 48px 32px; }
	.nol-pas > .nol-obal { gap: 0 32px; }
	.nol-nastenka .nol-nadpis { font-size: 28px; }
	.nol-nastenka .nol-dalsi { font-size: 16px; }
	.nol-pas .nol-blok:has(.a3-cal) { padding-left: 24px; padding-right: 24px; }
	.nol-mista-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
	.nol-nastenka { padding: 56px 0 64px; }
	.nol-nadpis { font-size: 28px; }
	.nol-dalsi { font-size: 16px; }

	.nol-zivot-dlazdice,
	.nol-zivot .a3-rozcestnik-dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.nol-mista-uvod { grid-template-columns: 1fr; align-items: start; }
	.nol-mista-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.nol-nastenka .nol-blok:has(.a3-deska) { margin-top: 0; padding: 24px 20px; }

	/* Pod 768 px pod sebou, jako portlety. */
	.nol-nastenka > .nol-obal,
	.nol-pas > .nol-obal { flex-direction: column; align-items: stretch; gap: 48px; }
	.nol-nastenka > .nol-obal > .nol-blok,
	.nol-pas > .nol-obal > .nol-blok { flex: none; }
	.nol-pas > .nol-obal { gap: 0; }
	.nol-pas .nol-blok { padding: 48px 0 0; }
	.nol-pas .nol-blok:last-child { padding-bottom: 56px; }
	.nol-pas .nol-blok:has(.a3-cal) { margin-top: 48px; padding: 40px 24px; }

	.nol-hlava { flex-wrap: wrap; }

	.nol-zivot { padding: 56px 0; }
	.nol-zivot-dlazdice,
	.nol-zivot .a3-rozcestnik-dlazdice { grid-template-columns: 1fr; }
	.nol-zivot-sada a,
	.nol-zivot .a3-rozcestnik-dlazdice-polozka { height: 88px; padding: 0 16px; }

	.nol-mista { padding: 56px 0; }
	.nol-mista-tlacitka { flex-wrap: wrap; }
	/* Místa: vodorovně rolující řada karet místo dlouhého sloupce. */
	.nol-mista-mrizka {
		display: flex;
		gap: 16px;
		margin-inline: calc(-1 * var(--nol-okraj));
		padding: 0 var(--nol-okraj) 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
	}
	.nol-mista .nol-blok { flex: 0 0 78%; scroll-snap-align: start; }
	.nol-mista .nol-blok-obsah img { height: 180px; }
}