/*
Theme Name: GeneratePress Child
Template: generatepress
Description: Child theme pre Labenka – vlastné šablóny pre CPT zviera a ďalšie.
Version: 1.0.0
Author: Labenka
*/

/* ==========================================================================
   Spoločná farebná paleta pre single-zviera.php a single-veterinar.php
   (a ďalšie profilové CPT v budúcnosti).
   Sýta zelená vytiahnutá z docs/design/titulka.png (tlačidlo "Podporte nás",
   odznaky kategórií). Scoped len na tieto profilové šablóny, nemení sa
   globálna --accent premenná webu, ktorá sa používa aj mimo nich.
   ========================================================================== */

/*
 * Platí pre CELÝ web, nie pre vymenované typy stránok.
 *
 * Pôvodne tu stál ručný zoznam tried (body.single-zviera, body.single-post,
 * body.tax-tema-zvierata …) a každý nový typ stránky sa doň musel dopísať.
 * Na tie, ktoré sa zabudli – archívy, výpis článkov, výsledky hľadania –
 * premenná neplatila a všetkých 54 miest, ktoré ju používajú, ticho
 * spadlo na náhradnú hodnotu: pozadie na priehľadné, rámček na farbu textu.
 * Prejavilo sa to tlačidlom "Filtrovať", ktoré bolo vidieť až pod myšou.
 *
 * Preto :root – zelená je farba webu, nie vlastnosť jednej šablóny.
 */
:root {
	/*
	 * Značková zelená. Je zámerne na jedinom mieste – mení sa tu a premietne
	 * sa do celého webu (68 použití). Hodnota je odmeraná priamo z loga.
	 *
	 * Druhý odtieň slúži pri prejdení myšou a pri zvýraznení.
	 *
	 * Skúšaná bola aj tmavá zelená z loga (#06401c). Samotná výmena je jeden
	 * riadok, ale nefunguje: zelená sa používa aj NA TMAVOM podklade (slovo
	 * "Labenka." v heri) a tam sa tmavá stratí. Potrebovala by druhú, svetlú
	 * zelenú pre tmavé podklady – viď poznámka pre Mirca.
	 */
	--labenka-accent: #688c16;
	--labenka-accent-vyraz: #4c6710;
}

/* Len na Atlase zvierat (single-zviera.php) obopína naše sekcie pôvodný
   GenerateBlocks Element wrapper (tam sa obsah nahrádza priamo v jeho DOM
   stromu, na rozdiel od ostatných CPT, ktoré GB element celý skryjú a
   renderujú všetko nanovo). Ten wrapper má vlastné sivé pozadie a padding z
   GB globálnych štýlov, ktoré presvitalo ako pásik inej farby medzi
   navigáciou a prvou sekciou – tu ho preto neutralizujeme. */
body.single-zviera [class*="gb-element-"] {
	background: transparent !important;
}

/* ==========================================================================
   single-zviera.php – Hero sekcia
   Farby/rozostupy prevzaté z docs/single-zviera-current.css (pôvodný
   GenerateBlocks Element ID 249), len s vlastnými sémantickými triedami.
   ========================================================================== */

/*
 * Stmavenie fotky je vo vlastnej premennej, aby sa dalo meniť samostatne od
 * podkladu. Na šírku ide sprava doľava – text je vľavo a zviera zostane vidno
 * vpravo. Na mobile to nefunguje, lebo text leží cez celú šírku fotky, preto
 * sa tam prepína na zvislé stmavenie (viď media query nižšie).
 */
/*
 * Zaoblenie chýbalo na tejto ZÁKLADNEJ triede – dedia ju všetky hero na webe
 * (profily zvierat, veterinárov, útulkov, služieb, podujatí, huby aj
 * titulka), takže bez neho boli hranaté všade okrem titulky, ktorá si
 * zaoblenie dopĺňala vlastným pravidlom. Mirec 26. 9. 2026: "na celom webe
 * máme zaoblené rohy fotiek" – zaoblené teraz aj tu, na jednom mieste pre
 * všetky. overflow:hidden zároveň orezáva fotku podľa zaoblenia aj vo
 * WebKite, kde by sa background-image inak mohol v rohu prekresliť ostro.
 */
.labenka-hero {
	--labenka-hero-scrim: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(10, 10, 10, 0.5) 40%, rgba(33, 33, 33, 0.04) 100%);

	position: relative;
	overflow: hidden;
	color: #ffffff;
	padding: 30px 40px;
	border-radius: 24px;
	background-image: var(--labenka-hero-scrim),
		var(--labenka-hero-bg, linear-gradient(135deg, var(--labenka-accent), var(--base-3)));
	background-size: cover, cover;
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-blend-mode: normal, normal;
}

/*
 * Jednotná výška hero – dlho odložené (viď labenka-vyska-hero-odlozene.md),
 * Mirec sa k tomu vrátil 26. 9. 2026 po dokončení vzhľadu, pôvodne len pre
 * desktop (namerané 183–419 px). Mirec 28. 9. 2026 chcel to isté aj na
 * mobile – tam je ale rozptyl oveľa väčší (namerané 187–750 px, lebo užšia
 * šírka láme text na oveľa viac riadkov), takže tá istá hodnota 430 px sa
 * NEPOUŽÍVA ako presná výška, len ako spodná hranica: krátky obsah (hub bez
 * podtém a pod.) sa dotiahne aspoň na 430 px, ale dlhší obsah (veterinár s
 * odznakmi, útulok...) je aj naďalej prirodzene vyšší – to je v poriadku,
 * presne to isté robí min-height už teraz aj na desktope.
 *
 * flex + justify-content:center namiesto samotného min-height: bez neho by
 * krátky obsah zostal pri hornom okraji a prázdny priestor by spadol dole,
 * čo by vyzeralo rozbito. Takto sa krátky obsah vycentruje v rámci
 * jednotnej výšky. Titulku (520 px prirodzene) sa to nedotkne – jej obsah
 * je vyšší než 430 px, takže sa vôbec nemá kam vycentrovať.
 */
.labenka-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 430px;
}

/*
 * Mobil: vodorovné stmavenie tu nechráni nič, text sa dostane na najsvetlejšie
 * miesto fotky. Rovnomerné tmavé prekrytie zaručí čitateľnosť pri ľubovoľnom
 * obrázku a platí pre všetky hero na webe, nielen pre titulku.
 */
@media (max-width: 767px) {
	.labenka-hero {
		--labenka-hero-scrim: linear-gradient(to bottom, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.72) 100%);
	}
}

.labenka-hero__share {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background-color: rgba(255, 255, 255, 0.92);
	color: #1a1a1a;
	border: none;
	border-radius: 16px;
	padding: 5px 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/*
 * GeneratePress má globálne pravidlo "button:focus/hover { color: #fff }"
 * s vyššou špecificitou (element + pseudo-trieda) ako naša samotná .class,
 * takže po kliknutí (focus stav) by prebilo tmavú farbu textu na bielu –
 * neviditeľnú na svetlom pozadí tlačidla. Musí sa preto explicitne vypísať
 * aj tu, so zhodnou/vyššou špecificitou.
 */
.labenka-hero__share:hover,
.labenka-hero__share:focus,
.labenka-hero__share:active {
	background-color: #ffffff;
	color: #1a1a1a;
}

.labenka-hero__share svg {
	width: 13px;
	height: 13px;
}

@media (max-width: 767px) {
	.labenka-hero__share {
		top: 12px;
		right: 12px;
		padding: 5px 10px;
		font-size: 12px;
	}
}

.labenka-hero__badge {
	display: inline-block;
	background-color: var(--labenka-accent);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	width: fit-content;
	border-radius: 8px;
	padding: 4px 8px;
	margin: 0 0 16px 0;
}

.labenka-hero__title {
	font-size: 42px;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 8px 0;
}

.labenka-hero__subtitle {
	font-size: 24px;
	font-weight: 600;
	font-style: italic;
	color: var(--labenka-accent);
	border-radius: 8px;
	margin: 0 0 12px 0;
}

/*
 * Medzinárodný názov plemena vedľa latinského ("Felis catus · Maine Coon").
 * Rovné písmo ho odlíši od vedeckého názvu, ktorý je kurzívou – inak by to
 * čitateľ mohol prečítať ako jeden dlhý latinský názov. Bodka medzi nimi je
 * tlmená, aby oddeľovala a neťahala pozornosť na seba.
 */
.labenka-hero__subtitle-alt {
	font-style: normal;
}

.labenka-hero__subtitle-sep {
	font-style: normal;
	opacity: 0.55;
	padding: 0 2px;
}

/*
 * Na mobile sa oba názvy na jeden riadok nezmestia – pri 24px písme a šírke
 * 375px by sa dlhšie dvojice ("Canis lupus familiaris · American Staffordshire
 * Terrier") lámali cez tri riadky, a to aj uprostred názvu. Namiesto lámania
 * preto dostane medzinárodný názov vlastný riadok a bodka sa skryje: výsledok
 * sú vždy najviac dva riadky a žiadny názov nie je roztrhnutý.
 */
@media (max-width: 767px) {
	.labenka-hero__subtitle {
		font-size: 19px;
	}

	.labenka-hero__subtitle-alt {
		display: block;
	}

	.labenka-hero__subtitle-sep {
		display: none;
	}
}

.labenka-hero__intro {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	max-width: 600px;
	margin: 0 0 24px 0;
}

/* Malý podtext pod odznakmi v Hero (napr. vysvetlenie k odznaku Overenie). */
.labenka-hero__note {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	margin: 6px 0 0 0;
}

/*
 * Odznak overenia má v Hero vlastný riadok pod odznakmi typu prevádzky.
 * Nehovorí totiž, čím prevádzka je ("Útulok / OZ", "Veterinár"), ale ako sme
 * k údajom prišli my – v jednom rade s nimi si to čitateľ spojí s prevádzkou
 * samotnou ("tento útulok je neoverený"), hoci ide len o stav nášho overenia.
 * Vo vlastnom riadku navyše drží pokope so svojím vysvetlením pod sebou.
 */
.labenka-hero__overenie {
	margin: 0 0 16px 0;
}

.labenka-hero__overenie .labenka-hero__badge {
	margin-bottom: 0;
}

/*
 * Dva stavy overenia, zámerne rôzne hlasné.
 *
 * "Overené Labenkou" je sľub, ktorý dávame čitateľovi – má vyskočiť, preto
 * biela pečať so zeleným textom (na tmavej fotke je to najkontrastnejšia
 * kombinácia, akú máme). "V overovaní" je len priznanie, že sme prevádzku
 * ešte nestihli obvolať – nemá pôsobiť ako výstraha (preto žiadna červená
 * ani oranžová), len ako tichá poznámka: priehľadné pozadie a tenký rámček.
 */
.labenka-overenie {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	font-size: 14px;
	border-radius: 8px;
	padding: 4px 10px;
}

.labenka-overenie__ikona {
	display: inline-flex;
	flex: 0 0 auto;
}

.labenka-overenie__ikona svg {
	width: 15px;
	height: 15px;
}

.labenka-overenie--overene {
	background-color: #ffffff;
	color: var(--labenka-accent);
	font-weight: 700;
}

.labenka-overenie--overujeme {
	background-color: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.38);
	color: rgba(255, 255, 255, 0.92);
	font-weight: 500;
}

/*
 * Dva údaje vedľa seba (profily zvierat: Náročnosť chovu + Dĺžka života).
 * Stĺpce sa riadia obsahom, nie pevnými 40 % šírky Hero – pri pevnej šírke
 * sa dlhšie hodnoty ("❤️❤️❤️❤️❤️ nad 15 rokov") lámali uprostred na dva
 * riadky a údaj vyzeral ako dve rôzne veci. Max-width drží údaje v ľavej
 * polovici Hero, aby neprerástli cez fotku.
 */
.labenka-hero__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	column-gap: 2em;
	row-gap: 1em;
	width: auto;
	max-width: 640px;
}

@media (max-width: 767px) {
	.labenka-hero__stats {
		grid-template-columns: 1fr;
		width: 100%;
	}
}

.labenka-hero__stat {
	font-size: 14px;
	display: flex;
	flex-direction: column;
}

.labenka-hero__stat-label {
	margin: 0 0 0 0;
}

.labenka-hero__stat-value {
	font-size: 17px;
	font-weight: bold;
	margin: 0;
}

/*
 * single-veterinar.php – Hero staty s ikonkou (Typ zariadenia, Rieši
 * akútne prípady) používajú .labenka-hero__stats ako kontajner, ale
 * jednotlivé karty sú znovupoužité .labenka-card (ikonka + label + hodnota).
 * V Hero kontexte sa im zámerne odoberie zelené pozadie/padding, nech majú
 * rovnaký "holý" vzhľad ako pôvodné staty (Náročnosť chovu / Dĺžka života).
 */
.labenka-hero__stats .labenka-card {
	background: transparent;
	padding: 0;
}

.labenka-hero__stats .labenka-card__icon {
	color: #ffffff;
}

.labenka-hero__stats .labenka-card__label {
	color: #ffffff;
	font-style: normal;
	font-size: 14px;
	font-weight: 400;
}

.labenka-hero__stats .labenka-card__value {
	color: #ffffff;
	font-size: 17px;
	font-weight: bold;
}

/*
 * Údaje v Hero profilov prevádzok ("Adopcia zvierat: Áno") držia popis aj
 * hodnotu na jednom riadku. Karta .labenka-card je požičaná zo sekcií, kde
 * má popis nad hodnotou – tam to dáva zmysel, lebo hodnoty bývajú dlhé.
 * Tu sú ale vždy krátke (Áno / Nie / Klinika), takže dvojriadkový zápis len
 * naťahoval Hero: tri údaje zabrali šesť riadkov cez fotku.
 *
 * :has() zámerne obmedzuje zmenu na Hero s kartami – profily zvierat majú
 * v tom istom mieste škály s guličkami, ktoré popis nad sebou potrebujú.
 * Staršie prehliadače :has() nepoznajú a dostanú pôvodnú mriežku.
 */
.labenka-hero__stats:has(.labenka-card) {
	display: flex;
	flex-wrap: wrap;
	column-gap: 28px;
	row-gap: 10px;
	width: auto;
	max-width: 640px;
}

.labenka-hero__stats .labenka-card__body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
}

.labenka-hero__stats .labenka-card__label::after {
	content: ":";
}

.labenka-hero__stats .labenka-card__value {
	font-size: 15px;
}

/* ==========================================================================
   single-zviera.php – Navigácia profilu (sticky pruh odkazov pod Hero)
   ========================================================================== */

.labenka-nav {
	display: flex;
	justify-content: center;
	background-color: #ffffff;
	border-radius: 12px;
	max-width: 1150px;
	margin: -44px auto 0 auto;
	position: sticky;
	top: 0;
	z-index: 30;
}

.labenka-nav__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 1em;
	row-gap: 1em;
	min-height: 50px;
	padding: 0 20px;
	width: 100%;
}

.labenka-nav__link {
	display: flex;
	font-weight: 500;
	padding: 12px;
	color: var(--labenka-accent);
	text-decoration: none;
	white-space: nowrap;
}

.labenka-nav__link:not(:last-child) {
	border-right: 1px solid var(--labenka-accent);
}

/* Mobilná verzia navigácie profilu – rovnaký "plávajúci pilulkový" pruh ako
   .labenka-titulka-pas na titulke (vlastný padding/pozadie/zaoblenie/tieň
   aj presah cez spodok hera si rieši sama, tu ide len o sticky správanie pri
   scrollovaní). */
.labenka-nav-mobile {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* .labenka-hero má vlastný margin-bottom: 20px (na titulke pod ňou nie je
   hero s takýmto odstupom) – bez tejto úpravy by presah pilulky navyše
   musel najprv "zjesť" týchto 20px, a zvyšný presah cez spodok hera by bol
   len pár pixelov namiesto viditeľného prekrytia. */
.labenka-nav-mobile .labenka-titulka-pas {
	margin-top: -46px;
}

/* Desktopová verzia navigácie profilu – rovnaký "plávajúci pilulkový" pruh
   ako .labenka-titulka-pas na titulke, nech vyzerá úplne rovnako ako
   mobilná verzia vyššie aj titulka samotná. Pôvodná .labenka-nav (sticky,
   zaoblenie...) tu už nie je použitá – tú si teraz rieši .labenka-titulka-pas
   sama, táto trieda zabezpečuje len sticky správanie a presah cez hero,
   rovnako ako .labenka-nav-mobile vyššie. */
.labenka-nav-desktop {
	position: sticky;
	top: 0;
	z-index: 30;
}

.labenka-nav-desktop .labenka-titulka-pas {
	max-width: 1150px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -44px;
}

/* Profilová navigácia má viac a dlhších položiek (napr. "Rozmnožovanie",
   "Fotogaléria") než pás skupín na titulke – bez tohto by sa pri užšom
   desktope najprv orezávali textom (namiesto plynulého prepnutia na
   tlačidlo "Obsah profilu"), lebo by sa najprv zmestili zmenšené/orezané
   miesto toho, aby sa JS prepočet pretečenia vôbec spustil. */
.labenka-nav-desktop .labenka-titulka-pas__polozka {
	flex-shrink: 0;
}

/* ==========================================================================
   single-zviera.php – Chov a prostredie (karty pre zaškrtnuté typy prostredia)
   ========================================================================== */

.labenka-subsection {
	margin-top: 1.5em;
}

.labenka-subsection__title {
	color: var(--labenka-accent);
	font-weight: 600;
	margin: 0 0 0.75em 0;
}

/*
 * Karty používajú flexbox (nie grid) zámerne: keď posledný riadok nemá
 * plný počet kariet, flex-grow ich rovnomerne roztiahne na zvyšný
 * priestor namiesto prázdnej medzery. Počet "stĺpcov" sa riadi cez
 * flex-basis karty (nižšie), nie cez grid-template-columns.
 */
.labenka-cards-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

/*
 * Karty sa smú roztiahnuť, aby v nedokončenom riadku nezostala diera – ale
 * najviac na polovicu šírky. Bez tej hranice zaberie jediná karta celý riadok
 * (namerané 1104px na jednu kartu) a vyzerá to ako chyba, nie ako údaj.
 * S ňou: jedna karta zaberie pol riadka, dve po polovici, tri po tretine.
 */
.labenka-cards-grid > .labenka-card {
	flex: 1 1 calc((100% - 2em) / 3);
	max-width: calc((100% - 1em) / 2);
}

@media (max-width: 600px) {
	.labenka-cards-grid > .labenka-card {
		max-width: 100%;
	}
}

.labenka-cards-grid--2col > .labenka-card {
	flex-basis: calc((100% - 1em) / 2);
}

.labenka-cards-grid--3col > .labenka-card {
	flex-basis: calc((100% - 2em) / 3);
}

.labenka-cards-grid--4col > .labenka-card {
	flex-basis: calc((100% - 3em) / 4);
}

@media (max-width: 767px) {
	.labenka-cards-grid > .labenka-card,
	.labenka-cards-grid--2col > .labenka-card,
	.labenka-cards-grid--3col > .labenka-card,
	.labenka-cards-grid--4col > .labenka-card {
		flex-basis: 100%;
	}
}

/*
 * Ikonka je samostatný súrodenec vľavo (nie súčasť labelu), nech vizuálne
 * "nesie" celú kartu (label + hodnota) vpravo, nie len prvý riadok textu.
 * Rovnaká veľkosť ikonky (32px) vo všetkých mriežkach naprieč stránkou.
 */
.labenka-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background-color: #f4f7ef;
	border-radius: 8px;
	padding: 16px;
	min-width: 0;
}

.labenka-card__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--labenka-accent);
	width: 32px;
	height: 32px;
}

.labenka-card__icon svg {
	width: 100%;
	height: 100%;
}

.labenka-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Dôraz je na HODNOTE (odpoveď), nie na názve poľa – label je preto tichý
 * popisok, nie hlavný prvok karty. Pôvodne to bolo obrátene (kurzívny,
 * rovnako veľký label ako hodnota), takže oko najprv zachytilo otázku
 * ("Pôvod"), nie odpoveď ("Austrália"). Rovnaký princíp, aký už mal
 * .labenka-hero__stats (label malý/bežný, hodnota tučná) – teraz zjednotený
 * naprieč celým webom, nie len v Hero.
 */
.labenka-card__label {
	color: var(--labenka-accent);
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.labenka-card__value {
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.labenka-card__value a {
	color: inherit;
}

.labenka-card__sublabel {
	color: #666666;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	margin: 4px 0 0 0;
}

/*
 * Vizuálna škála "guličky" (1 z 5) pre nové číselné polia profilu (Náročnosť
 * chovu, Nároky na pohyb, Vhodnosť do bytu/domu, Spoločenskosť...). Rovnaký
 * princíp farieb ako .labenka-seria-pas__bodka (bodka série článkov), len
 * väčšie bodky, lebo tu nesú hlavnú informáciu karty, nie len doplnok.
 */
.labenka-skala {
	display: inline-flex;
	gap: 5px;
	margin: 2px 0 0 0;
}

.labenka-skala__bodka {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	/* Sivá namiesto svetlozelenej – na bledozelenom podklade karty
	   (#f4f7ef) splývala vyplnená/nevyplnená gulička takmer do jednej
	   farby. Sivá dáva jasný kontrast k vyplnenej (var(--labenka-accent)). */
	background-color: #cfcfcf;
}

.labenka-skala__bodka.je-plna {
	background-color: var(--labenka-accent);
}

/* V Hero stoja guličky vedľa Dĺžky života, ktorá je emoji srdiečka na 17px –
   pri základnej veľkosti (11px) pôsobili vedľa nich drobno. */
.labenka-hero__stat .labenka-skala {
	gap: 6px;
	margin-top: 4px;
}

.labenka-hero__stat .labenka-skala__bodka {
	width: 15px;
	height: 15px;
}

/* ==========================================================================
   single-zviera.php – spoločný "karta sekcie" wrapper (Potrava a ďalšie)
   ========================================================================== */

.labenka-section {
	background-color: var(--base-3);
	border-radius: 24px;
	margin: 24px;
	padding: 24px;
}

/* ==========================================================================
   Systém rozostupov vnútri sekcie
   --------------------------------------------------------------------------
   Rozostupy medzi blokmi riadi sekcia, nie jednotlivé komponenty. Predtým si
   každý komponent nosil vlastný margin-top (40px, 24px, 16px, 1.5em…), tie sa
   krížili s marginmi odstavcov a výsledné medzery vychádzali náhodne – pri
   meraní naprieč deviatimi typmi profilov ich bolo sedem rôznych (15, 16, 20,
   24, 26, 40, 44) a na štyroch miestach dokonca nula, takže sa bloky dotýkali.

   Preto sa priamym deťom sekcie vertikálne marginy vynulujú a rozostup
   dostane až nasledujúci súrodenec. Výhoda: medzera vzniká len MEDZI blokmi,
   nikdy nie na okraji sekcie, a nový blok ju dostane automaticky – netreba mu
   dopisovať vlastný margin.

   Škála má štyri hodnoty a každá znamená vzťah, nie len číslo:
     nadpis     – nadpis je tesnejšie pri obsahu, ktorý uvádza
     podnadpis  – to isté o úroveň nižšie
     blok       – bežný odstup medzi dvoma blokmi
     oddelovac  – väčší odstup tam, kde začína nová podsekcia
   ========================================================================== */

:root {
	--labenka-medzera-nadpis: 20px;
	--labenka-medzera-podnadpis: 16px;
	--labenka-medzera-blok: 26px;
	--labenka-medzera-oddelovac: 40px;
}

/* Rozostupy riadi sekcia aj oddeľovač podsekcie – ten je obsahovo tiež
   samostatný blok s vlastným nadpisom, kartami a tipom, takže sa vnútri
   správa rovnako. Vodorovné marginy zostávajú nedotknuté, aby sa .labenka-
   button mohol ďalej centrovať cez `margin-left/right: auto`. */
.labenka-section > *,
.labenka-section__subsection-divider > * {
	margin-top: 0;
	margin-bottom: 0;
}

.labenka-section > * + *,
.labenka-section__subsection-divider > * + * {
	margin-top: var(--labenka-medzera-blok);
}

.labenka-section > h2 + *,
.labenka-section__subsection-divider > h2 + * {
	margin-top: var(--labenka-medzera-nadpis);
}

.labenka-section > .labenka-subheading + *,
.labenka-section__subsection-divider > .labenka-subheading + * {
	margin-top: var(--labenka-medzera-podnadpis);
}

.labenka-section > * + .labenka-subheading,
.labenka-section__subsection-divider > * + .labenka-subheading,
.labenka-section > * + .labenka-section__subsection-divider {
	margin-top: var(--labenka-medzera-oddelovac);
}

.labenka-section h2 {
	color: #000000;
}

.labenka-section__intro {
	background-color: var(--base-3);
	border-radius: 8px;
	padding: 16px;
}

.labenka-section__body {
	padding-top: 24px;
}

/* Oddelenie pod-sekcie v rámci spoločného boxu (napr. "Chov a prostredie"
   v rámci "Základné informácie") – žiadny vlastný box/pozadie. Rozostup nad
   ním určuje --labenka-medzera-oddelovac v systéme rozostupov vyššie. */

/* Kotva pre navigáciu ("Chov") je teraz na vnútornom podnadpise, nie na
   celej sekcii – potrebuje vlastný scroll-margin, nech ju sticky nav neprekryje. */
#chov-a-prostredie {
	scroll-margin-top: 80px;
}

@media (max-width: 768px) {
	#chov-a-prostredie {
		scroll-margin-top: 20px;
	}
}

.labenka-tip {
	background-color: #f4f7ef;
	border-radius: 8px;
	padding: 16px;
}

.labenka-tip__title {
	color: var(--labenka-accent);
	font-style: italic;
	margin: 0 0 0.5em 0;
}

.labenka-tip p {
	margin: 0;
}

/* ==========================================================================
   single-zviera.php – Potrava (karty Typ potravy / Hlavná potrava + foto)
   ========================================================================== */

.labenka-food-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1em;
	row-gap: 1em;
}

@media (max-width: 767px) {
	.labenka-food-grid {
		grid-template-columns: 1fr;
	}
}

.labenka-food-item__image {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	object-fit: contain;
	border-radius: 8px;
}

@media (max-width: 480px) {
	.labenka-food-item__image {
		width: 72px;
		height: 72px;
	}
}

/* ==========================================================================
   single-zviera.php – Zdravie
   ========================================================================== */

.labenka-subheading {
	font-weight: 500;
}

/* Odstupy pre použitie MIMO systému rozostupov (napr. podnadpisy vnútri
   dvojstĺpca v sekcii Zdravie, ktoré nie sú priamym dieťaťom sekcie).
   Zabalené v :where(), aby mali nulovú špecificitu – vnútri sekcie tak vždy
   vyhrá systém rozostupov a nezostane tu visieť margin-bottom navyše. */
:where(.labenka-subheading) {
	margin: 1.5em 0 0.5em 0;
}

.labenka-two-col-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1em;
	row-gap: 1em;
}


/*
 * Sekcia Zdravie – "Zdravý jedinec" foto vycentrovať na výšku voči textom
 * v ľavom stĺpci (Najčastejšie zdravotné problémy + Preventívna
 * starostlivosť), nech nie je prilepené hneď k horným kartám.
 */
#zdravie .labenka-two-col-grid > div:last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 767px) {
	.labenka-two-col-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Pevný pomer strán, nech dve fotky vedľa seba v .labenka-two-col-grid
 * vyzerajú vždy rovnako vysoké bez ohľadu na to, aký pomer strán mala
 * pôvodná nahraná fotka. Zámerne "contain" (nie "cover") – rôzne nahrané
 * fotky (na výšku aj na šírku) sa tak nikdy neorezávajú (napr. nožičky
 * zvieraťa alebo okraj terária), len sa celé zobrazia v rámčeku. Pozadie je
 * biele (nie jemná zelená ako inde) – väčšina fotiek tu nemá priehľadné
 * pozadie a bežná fotka na bielej pôsobí prirodzene, na zelenej skôr rušivo.
 */
/*
 * object-fit: cover (nie contain) je tu nutný kvôli zaobleným rohom. Pri
 * `contain` sa fotka s iným pomerom strán než 4:3 dosadí doprostred rámca a
 * po stranách zostane biele pozadie – border-radius sa potom zaobľuje na tom
 * bielom pruhu, čo na bielom podklade sekcie nevidno, a samotná fotka vyzerá
 * ostrá. Prejavovalo sa to najmä pri veterinároch (fotky 1347x1168), kým v
 * atlase, kde sú fotky presne 4:3, zaoblenie vidno bolo. S `cover` fotka
 * rámec vždy vyplní a zaoblenie sa aplikuje priamo na ňu – bez ohľadu na to,
 * v akom pomere ju autor nahrá. Cenou je orez ~6 % z každej strany.
 * Pozor: .labenka-food-item__image zámerne zostáva na `contain`, tam ide o
 * produkty (balenia krmiva), ktoré sa orezať nesmú.
 */
.labenka-inline-image {
	display: block;
	margin-top: 8px;
	border-radius: 8px;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: #ffffff;
}

/* ==========================================================================
   single-veterinar.php – Zvieratá, ktoré ošetrujeme (kocky tém taxonómie
   tema-zvierata). Rovnaký flex-wrap princíp a farby ako .labenka-cards-grid
   / .labenka-card, ale kompaktnejšie (obsahujú len ikonku a krátky text,
   nie label+hodnotu) a bez vynúteného rovnakého stĺpca – šírka kocky sa
   riadi dĺžkou textu, nech tag-cloud pekne zalomí ľubovoľný počet tém.
   ========================================================================== */

.labenka-tiles-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.labenka-tile {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #f4f7ef;
	border-radius: 8px;
	padding: 10px 14px;
}

.labenka-tile__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--labenka-accent);
	width: 20px;
	height: 20px;
}

.labenka-tile__icon svg {
	width: 100%;
	height: 100%;
}

.labenka-tile__label {
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 600;
}

/* ==========================================================================
   single-zviera.php – Mohlo by vás zaujímať
   ========================================================================== */

.labenka-related-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 20px;
}

@media (max-width: 767px) {
	.labenka-related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 12px;
	}
}

.labenka-related-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 8px;
	row-gap: 8px;
}

.labenka-related-page-btn {
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid var(--labenka-accent);
	border-radius: 6px;
	background-color: #ffffff;
	color: var(--labenka-accent);
	font-weight: 600;
	cursor: pointer;
}

.labenka-related-page-btn.is-active {
	background-color: var(--labenka-accent);
	color: #ffffff;
}

/*
 * Obrázok je ukotvený hore, text plynie pod ním.
 *
 * Karty v riadku sú rovnako vysoké (flex stretch), preto sa nesmie obsah
 * zarovnávať na spodok: dvojriadkový názov by kartu vytlačil nahor a obrázok
 * by potom v riadku sedel o riadok vyššie než pri karte s jednoriadkovým
 * názvom (nameraných 20px vs 47px od vrchu karty). Miesto chýbajúceho
 * náhľadu drží .labenka-related-card__image--placeholder, aby aj karta bez
 * fotky začínala textom v rovnakej výške ako ostatné.
 */
.labenka-related-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: #fafafa;
	border-radius: 8px;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}

.labenka-related-card--hidden {
	display: none;
}

.labenka-related-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 16px;
}

/* Zástupné miesto pre záznam bez náhľadovej fotky. Preberá rozmery aj
   zaoblenie od .labenka-related-card__image, takže text pod ním začína v
   rovnakej výške ako pri kartách s fotkou. Tlmená plocha v zelenej rodine
   webu (rovnaká ako .labenka-tip) – aby pôsobila zámerne, nie ako diera. */
.labenka-related-card__image--placeholder {
	background-color: #f4f7ef;
}

@media (max-width: 767px) {
	.labenka-related-card__image {
		aspect-ratio: 3 / 2;
	}
}

.labenka-related-card__type {
	font-size: 14px;
	font-weight: bold;
	color: var(--labenka-accent);
	margin: 0 0 4px 0;
}

/*
 * Nadpis karty – platí pre VŠETKY karty na webe (články, plemená, profily,
 * hub, podujatia), nie len pre články.
 *
 * Dlhý názov sa oreže na tri riadky a doplní sa "…". Bez toho sa karta
 * s názvom typu "Mačky v stredovekej Európe: Medzi domovom, poverami a
 * čarodejníctvom" roztiahne na štyri riadky, zatiaľ čo susedná má dva –
 * mriežka potom pôsobí rozhádzane. Plný názov zostáva na cieľovej stránke.
 *
 * Dva riadky, nie tri. Merané na skutočnom obsahu: v Atlase má drvivá
 * väčšina názvov jediný riadok a najdlhší záznam v databáze má 37 znakov,
 * čo sú dva riadky – tretí vyhradený riadok tam nechával 54 px prázdna medzi
 * názvom a textom. Články majú názvy dlhšie a dva sa im orežú s „…", to je
 * zámer: rovnaký rozostup na celom webe je dôležitejší než celý názov na
 * karte, plný zostáva na cieľovej stránke.
 */
.labenka-related-card__title {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/*
 * Vyhradená výška nadpisu = dva riadky, aby popis pod ním začínal vo všetkých
 * kartách v rovnakej výške (namerané predtým: 3901 px vs 3955 px).
 *
 * Zámerne len tam, kde za nadpisom ešte niečo nasleduje. Na kartách profilov
 * je nadpis posledný, takže vyhradená výška by pod krátkym názvom nechala len
 * prázdne miesto. Prehliadač bez podpory :has() jednoducho nezarovná – karty
 * sú aj tak orezané a upratané.
 */
.labenka-related-card:has(.labenka-related-card__excerpt) .labenka-related-card__title,
.labenka-vypis-karta:has(.labenka-related-card__excerpt) .labenka-related-card__title {
	min-height: calc(2 * 1.5em);
}

@media (max-width: 767px) {
	/* Na mobile sú karty úzke (dva stĺpce), preto sa povolí o riadok viac –
	   dva riadky by z názvu nechali len zopár slov. */
	.labenka-related-card__title {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.labenka-related-card:has(.labenka-related-card__excerpt) .labenka-related-card__title,
	.labenka-vypis-karta:has(.labenka-related-card__excerpt) .labenka-related-card__title {
		min-height: calc(3 * 1.5em);
	}
}

/* single.php – "Aj toto by vás mohlo zaujímať" (súvisiace články) používa tú
   istú kartu, len navyše s dátumom a krátkym úryvkom pod nadpisom. */
.labenka-related-card__date {
	font-size: 13px;
	color: #666666;
	margin: 0 0 4px 0;
}

/*
 * Krátky popis – orezaný na tri riadky a na tri riadky aj vyhradený, takže
 * všetky karty v mriežke končia rovnako. Text doň dodáva
 * labenka_karta_popis(): prednostne perex článku, nie výňatok zlepený
 * z obsahu.
 */
.labenka-related-card__excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: #333333;
	margin: 8px 0 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(3 * 1.5em);
}

/* ==========================================================================
   single.php – "Súčasť série"

   Stojí priamo nad sekciou "Aj toto by vás mohlo zaujímať" a používa tú istú
   mriežku aj kartu, preto sa musí dať rozoznať na prvý pohľad. Riešené
   prevrátením plôch: séria je tlmene zelená plocha s BIELYMI kartami,
   odporúčania sú biela plocha so SIVÝMI kartami. Navyše má séria zelený pruh
   po ľavej strane – drží karty opticky ako jeden celok, nie ako zoznam tipov.
   ========================================================================== */

.labenka-seria {
	background-color: #f4f7ef;
	border-left: 4px solid var(--labenka-accent);
}

/* Selektor musí byť aspoň taký silný ako .labenka-section h2 vyššie, ktoré
   farbí všetky nadpisy sekcií na čierno – inak sa zelená neprejaví. */
.labenka-section h2.labenka-seria__nadpis {
	color: var(--labenka-accent);
}

/* Riadok "Čítate 2. diel zo 4". Systém rozostupov mu odstup priradí sám
   (.labenka-section > h2 + *), preto tu zámerne žiadny vlastný margin. */
.labenka-seria__pozicia {
	font-size: 14px;
	color: #5b6b3a;
}

.labenka-seria-card {
	background-color: #ffffff;
}

/*
 * Mriežka série sa prispôsobuje počtu dielov.
 *
 * Sekcia zobrazuje ostatné diely série, takže ich býva málo – pri trojdielnej
 * sérii len dva. V pevnej štvorstĺpcovej mriežke by boli nalepené vľavo
 * a pravá polovica sekcie by zostala prázdna.
 *
 * Preto tu (a len tu) flex namiesto mriežky: karty sa roztiahnu tak, aby
 * riadok vyplnili, a posledný neúplný riadok sa vycentruje. Horná hranica
 * 440 px bráni tomu, aby sa pri dvoch dieloch karta nafúkla na pol sekcie
 * a fotka z nej spravila plagát.
 *
 * Počet stĺpcov dopočíta PHP a pošle ho sem ako --labenka-seria-stlpcov
 * (viď labenka_render_clanok_seria_section). Vyberá ho tak, aby boli riadky
 * vyrovnané – pri šiestich dieloch je 3 + 3 krajšie ako 4 + 2, kde by sa
 * navyše líšila veľkosť kariet medzi riadkami.
 *
 * Ako to vychádza pri šírke sekcie 1104 px:
 *     2 diely → 2 × 440 px, vycentrované
 *     3 diely → 3 × 354 px, plná šírka
 *     4 diely → 4 × 261 px, plná šírka
 *     5 dielov → 3 + 2 × 354 px, druhý riadok vycentrovaný
 *     6 dielov → 3 + 3 × 354 px
 *
 * Horná hranica 440 px bráni tomu, aby sa pri dvoch dieloch karta nafúkla
 * na pol sekcie a fotka z nej spravila plagát.
 *
 * Na mobile zostáva pôvodná dvojstĺpcová mriežka – tam je problém opačný,
 * miesta je málo.
 */
@media (min-width: 768px) {
	.labenka-seria__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 20px;
		row-gap: 20px;
	}

	.labenka-seria__grid > .labenka-related-card {
		flex: 0 1 calc(
			(100% - (var( --labenka-seria-stlpcov, 4 ) - 1) * 20px)
			/ var( --labenka-seria-stlpcov, 4 )
		);
		max-width: 440px;
	}
}

/* Odznak "Časť 1". Sedí na mieste, kde má sekcia odporúčaní dátum – poradie
   v sérii je totiž to, čo čitateľ pri nadväzujúcich článkoch naozaj hľadá,
   dátum je tu nepodstatný a zámerne sa nezobrazuje. */
.labenka-seria-card__cast {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--labenka-accent);
	margin: 0 0 4px 0;
}

/* single-podujatie.php – "Zobraziť profil →" pod kartou miesta/organizátora
   v sekcii Miesto a organizátor (samostatná karta, nie mriežka). */
.labenka-related-card__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--labenka-accent);
	margin: 8px 0 0 0;
}

/* ==========================================================================
   single-podujatie.php – "Osobné hodnotenie Labenky". Zámerne vizuálne
   odlíšené od bežných sekcií (jemné zelené pozadie + tenký rámček v
   akcentovej farbe), nech pôsobí ako osobná poznámka, nie štandardný obsah.
   ========================================================================== */

.labenka-section.labenka-section--osobne {
	background-color: #f4f7ef;
	border: 1px solid rgba(104, 140, 22, 0.25);
}

.labenka-osobne-podpis {
	margin: 16px 0 0 0;
	font-style: italic;
	font-weight: 600;
	color: var(--labenka-accent);
	text-align: right;
}

/* ==========================================================================
   single-zviera.php – Fotogaléria (natívny Gallery blok)
   ========================================================================== */

#labenka-fotogaleria-grid .wp-block-image img {
	border-radius: 8px;
}

.labenka-hidden-photo {
	/* !important je nutný: WordPress jadrový Gallery blok má vlastné
	   pravidlo `.wp-block-gallery.has-nested-images figure.wp-block-image
	   { display: flex; }` s vyššou špecificitou (3 triedy + element), ktoré
	   by inak našu jednoduchú triedu prebilo bez ohľadu na poradie v súbore. */
	display: none !important;
}

.labenka-button {
	display: block;
	width: fit-content;
	/* Len centrovanie. Zvislý odstup dáva systém rozostupov sekcie; jediné
	   použitie mimo sekcie (tlačidlo v .labenka-clanok-zviera-banner) si ho
	   dopĺňa vlastným pravidlom pri tom komponente. */
	margin-left: auto;
	margin-right: auto;
	background-color: var(--labenka-accent);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

.labenka-button:hover {
	opacity: 0.9;
}

/* ==========================================================================
   single-veterinar.php – Otváracie hodiny (zoznam po dňoch)
   ========================================================================== */

/* Zvýraznený úvodný text (napr. "Pozrite si aktuálne ordinačné hodiny...")
   - rovnaká jemná zelená ako zelené karty (.labenka-card, .labenka-tip). */
.labenka-hours-notice {
	background-color: #f4f7ef;
	color: var(--labenka-accent);
	border-radius: 8px;
	padding: 16px;
}

.labenka-hours-notice p {
	margin: 0;
}

.labenka-hours-table {
	margin-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.labenka-hours-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.labenka-hours-day {
	font-weight: 600;
}

.labenka-hours-value {
	color: #333333;
	text-align: right;
}

/* ==========================================================================
   single-veterinar.php – Kde nás nájdete
   Tlačidlo "Zobraziť trasu" (zdieľaná .labenka-button, inak centrované pre
   fotogalériu) je tu zarovnané doľava, nech zapadne do rovnakého ľavého toku
   textu ako zvyšok sekcie namiesto centrovania. Rieši sa tu VÝLUČNE vodorovné
   zarovnanie – zvislé odstupy dáva systém rozostupov sekcie. (Pôvodné
   `margin: 20px 0 24px 0` cez ID selektor prebíjalo systém a vyrábalo tu
   medzery 20/24px namiesto škály.)
   ========================================================================== */

#kde-nas-najdete .labenka-button {
	margin-left: 0;
	margin-right: auto;
}

/* ==========================================================================
   single-utulok.php – "Ako môžete pomôcť" (rozbaľovacie karty, natívny
   <details>/<summary>, žiadny vlastný JS). Rovnaká farebná paleta ako
   .labenka-card (zelené pozadie, --labenka-accent nadpis).
   ========================================================================== */

.labenka-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.labenka-accordion-item {
	background-color: #f4f7ef;
	border-radius: 8px;
	overflow: hidden;
}

.labenka-accordion-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	color: var(--labenka-accent);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
}

.labenka-accordion-item summary::-webkit-details-marker {
	display: none;
}

.labenka-accordion-item summary::after {
	content: "+";
	flex-shrink: 0;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
}

.labenka-accordion-item[open] summary::after {
	content: "−";
}

.labenka-accordion-item__body {
	padding: 0 16px 16px 16px;
	color: #1a1a1a;
}

.labenka-accordion-item__body li + li {
	margin-top: 4px;
}

/* ==========================================================================
   Navigátor "Predchádzajúce / Ďalšie" na konci profilu – rovnaká "karta
   sekcie" ako .labenka-section (biele pozadie by nesedelo, tu zámerne
   necháme jemné zelené pozadie kariet, nech pôsobí ako súčasť obsahu, nie
   ako ďalšia samostatná téma).
   ========================================================================== */

.labenka-post-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background-color: #f4f7ef;
	border-radius: 24px;
	margin: 24px;
	padding: 20px 24px;
}

.labenka-post-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 45%;
	color: inherit;
	text-decoration: none;
}

.labenka-post-nav__link--next {
	margin-left: auto;
	flex-direction: row-reverse;
	text-align: right;
}

.labenka-post-nav__arrow {
	flex-shrink: 0;
	font-size: 22px;
	color: var(--labenka-accent);
}

.labenka-post-nav__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.labenka-post-nav__label {
	font-size: 13px;
	font-style: italic;
	color: var(--labenka-accent);
}

.labenka-post-nav__title {
	font-weight: 600;
	color: #1a1a1a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.labenka-post-nav {
		flex-direction: column;
		align-items: stretch;
		margin: 16px;
	}

	.labenka-post-nav__link,
	.labenka-post-nav__link--next {
		max-width: 100%;
	}

	.labenka-post-nav__title {
		white-space: normal;
	}
}

/*
 * Odsadenie zoznamu v rozbaľovacej položke.
 *
 * Natívna odrážka sa tu nepoužíva zámerne: prehliadače ju umiestňujú mimo
 * obsahového rámca položky a každý trochu inak (vo Firefoxe sedela guľôčka
 * na samej hrane zeleného panela, v Safari a Chrome vnútri). Odrážka je
 * preto vykreslená ako ::before na pevnej pozícii – vyzerá rovnako všade.
 */
.labenka-accordion-item__body ul,
.labenka-accordion-item__body ol {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.labenka-accordion-item__body ul li {
	position: relative;
	padding-left: 28px;
}

.labenka-accordion-item__body ul li::before {
	content: "•";
	position: absolute;
	left: 10px;
	top: 0;
	color: #1a1a1a;
	line-height: inherit;
}

/* Číslovaný zoznam si poradie necháva, len ho odsadíme rovnako. */
.labenka-accordion-item__body ol {
	padding-left: 28px;
	list-style: decimal;
}

/* ==========================================================================
   single.php – bežné články/blog posty. Telo článku je voľný text (Gutenberg
   bloky priamo od autora), preto tu narozdiel od profilov dolaďujeme
   typografiu priamo pre h2/h3/p/img namiesto vlastných "karta" komponentov.
   ========================================================================== */

.labenka-clanok-body {
	font-size: 16px;
	line-height: 1.7;
	color: #1a1a1a;
}

.labenka-clanok-body p {
	margin: 0 0 1.2em 0;
}

.labenka-clanok-body h2 {
	color: var(--labenka-accent);
	font-size: 26px;
	font-weight: 600;
	margin: 1.6em 0 0.6em 0;
	scroll-margin-top: 80px;
}

.labenka-clanok-body h3 {
	color: #1a1a1a;
	font-size: 20px;
	font-weight: 600;
	margin: 1.4em 0 0.5em 0;
}

@media (max-width: 767px) {
	.labenka-clanok-body h2 {
		scroll-margin-top: 20px;
	}
}

.labenka-clanok-body a {
	color: var(--labenka-accent);
}

.labenka-clanok-body img {
	border-radius: 8px;
	height: auto;
	max-width: 100%;
}

.labenka-clanok-body figure {
	margin: 1.6em 0;
}

.labenka-clanok-body figcaption {
	font-size: 13px;
	color: #666666;
	text-align: center;
	margin-top: 8px;
}

.labenka-clanok-body ul,
.labenka-clanok-body ol {
	margin: 0 0 1.2em 0;
	padding-left: 1.3em;
}

.labenka-clanok-body blockquote {
	margin: 1.6em 0;
	padding: 12px 20px;
	border-left: 4px solid var(--labenka-accent);
	background-color: #f4f7ef;
	font-style: italic;
	color: #333333;
}

/* --------------------------------------------------------------------------
   Vzory článku (viď labenka_registruj_vzory_clankov() vo functions.php).

   Vzory stavajú z jadrových blokov WordPressu, nie z GenerateBlocks – aby
   každé vloženie nevyrábalo vlastné inline CSS s náhodným uniqueId. Vzhľad
   preto rieši toto miesto, a rieši ho raz pre všetky články.
   -------------------------------------------------------------------------- */

/* Dvojstĺpec. Medzera 1em a zalomenie pod 768 px zodpovedajú mriežkam, ktoré
   sa v článkoch stavali ručne – aby staršie články vyzerali rovnako ako nové.
   Jadro zalamuje až na 781 px, preto sa to tu prepisuje. */
.labenka-clanok-body .wp-block-columns {
	gap: 1em;
	margin: 1.6em 0;
}

.labenka-clanok-body .wp-block-column {
	align-self: center;
}

@media (max-width: 767px) {
	.labenka-clanok-body .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
	}

	.labenka-clanok-body .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (min-width: 768px) and (max-width: 781px) {
	.labenka-clanok-body .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap;
	}
}

/* Prvý a posledný blok článku nemajú odsadzovať od okraja karty – o zvislé
   rozostupy sekcií sa stará systém medzier, viď .labenka-section vyššie. */
.labenka-clanok-body > *:first-child {
	margin-top: 0;
}

.labenka-clanok-body > *:last-child {
	margin-bottom: 0;
}

/* Obrázok v stĺpci vypĺňa celú jeho šírku, nech je pôvodná veľkosť akákoľvek.
   Platí aj pre obrázky z GenerateBlocks (trieda gb-media-<id>), aby staršie
   články nemali iné zaoblenie než nové. */
.labenka-clanok-body .wp-block-column img,
.labenka-clanok-body [class*="gb-media-"] {
	border-radius: 8px;
	display: block;
	width: 100%;
	height: auto;
}

.labenka-clanok-body .wp-block-column figure {
	margin: 0;
}

/* Labenka tip – zvýraznená rada. Zelený rámček, bez kurzívy (rada sa má dobre
   čítať, nie pôsobiť ako citát). */
.labenka-clanok-body blockquote.labenka-tip {
	font-style: normal;
	border-left-width: 4px;
}

.labenka-clanok-body blockquote.labenka-tip::before {
	content: "Labenka tip";
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--labenka-accent);
	margin-bottom: 4px;
}

/* Upozornenie – to isté, ale v jantárovej, aby sa dalo odlíšiť na prvý pohľad
   od bežnej rady. */
.labenka-clanok-body blockquote.labenka-pozor {
	font-style: normal;
	border-left-color: #c8860d;
	background-color: #fdf6e7;
}

.labenka-clanok-body blockquote.labenka-pozor::before {
	content: "Pozor";
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #a06d09;
	margin-bottom: 4px;
}

.labenka-clanok-body blockquote > *:last-child {
	margin-bottom: 0;
}

/* Autor a dátum pod perexom v Hero – rovnaký "tichý" vzhľad ako
   .labenka-hero__note (vysvetlenie k odznakom inde). */
.labenka-hero__meta {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

/* "Tento článok sa týka: [zviera]" – výrazný banner pred súvisiacimi
   článkami, na rozdiel od malých kariet v mriežke (.labenka-related-card). */
.labenka-clanok-zviera-banner {
	display: flex;
	align-items: center;
	gap: 24px;
	background-color: #f4f7ef;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
}

.labenka-clanok-zviera-banner:last-child {
	margin-bottom: 0;
}

.labenka-clanok-zviera-banner__image {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: 12px;
	object-fit: cover;
}

.labenka-clanok-zviera-banner .labenka-button {
	margin-top: 8px;
}

.labenka-clanok-zviera-banner__body {
	flex: 1 1 auto;
	min-width: 0;
}

.labenka-clanok-zviera-banner__label {
	font-size: 14px;
	color: #333333;
	margin: 0 0 4px 0;
}

.labenka-clanok-zviera-banner__name {
	font-size: 22px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0 0 12px 0;
}

@media (max-width: 767px) {
	.labenka-clanok-zviera-banner {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.labenka-clanok-zviera-banner__image {
		width: 100%;
		height: 180px;
	}
}

/* ==========================================================================
   Widget spätnej väzby "Pomohol vám tento článok?" + odznak s počtom
   hlasov a odhadovaným časom čítania (labenka_render_feedback_widget()
   a labenka_render_feedback_badge() vo functions.php).
   ========================================================================== */

.labenka-feedback-badge {
	display: inline-flex;
	align-items: center;
	gap: 1em;
	color: #767676;
	font-size: 0.9em;
}

/* V Hero profilov (id="uvod") sa odznak posúva do pravého dolného rohu,
   nech nepôsobí ako súčasť štatistík Náročnosť chovu/Dĺžka života na
   opačnej strane. */
.labenka-hero .labenka-feedback-badge {
	position: absolute;
	right: 20px;
	bottom: 56px;
	z-index: 5;
	color: rgba(255, 255, 255, 0.85);
	background-color: rgba(0, 0, 0, 0.35);
	padding: 5px 10px;
	border-radius: 16px;
}

@media (max-width: 480px) {
	.labenka-hero .labenka-feedback-badge {
		position: static;
		margin-top: 12px;
		background: none;
		padding: 0;
		color: #767676;
	}
}

.labenka-feedback-badge__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.labenka-feedback-badge__item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.labenka-feedback__question {
	font-weight: 500;
	margin: 0 0 0.6em 0;
}

.labenka-feedback__buttons {
	display: inline-flex;
	border: 1px solid #d5d5d5;
	border-radius: 999px;
	overflow: hidden;
}

.labenka-feedback__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 48px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #767676;
}

.labenka-feedback__btn:first-child {
	border-right: 1px solid #d5d5d5;
}

.labenka-feedback__btn svg {
	width: 22px;
	height: 22px;
}

.labenka-feedback__btn:hover {
	background-color: #f4f7ef;
	color: var(--labenka-accent);
}

.labenka-feedback__thanks {
	color: var(--labenka-accent);
	font-weight: 500;
	margin: 0;
}

/* ==========================================================================
   taxonomy-tema-zvierata.php – rozcestníková (hub) stránka témy
   ========================================================================== */

/*
 * Hero hubu nemá fotku na pozadí ako profily – téma je pojem, nie konkrétne
 * zviera, a ľubovoľná vybraná fotka by pôsobila náhodne. Použije sa zelený
 * prechod, ktorý má .labenka-hero aj tak ako záložnú hodnotu.
 */
.labenka-hub-hero {
	border-radius: 24px;
	margin: 24px 24px 0 24px;
	padding: 40px;
}

@media (max-width: 767px) {
	.labenka-hub-hero {
		margin: 12px 12px 0 12px;
		padding: 24px;
	}
}

/* Prehľadové čísla v hlavičke (koľko zvierat, článkov, odborníkov…). */
.labenka-hub-statistiky {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 8px;
}

.labenka-hub-stat {
	display: flex;
	align-items: center;
	gap: 10px;
}

.labenka-hub-stat__icon {
	display: inline-flex;
	color: #ffffff;
	opacity: 0.85;
}

.labenka-hub-stat__icon svg {
	width: 26px;
	height: 26px;
}

.labenka-hub-stat__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.labenka-hub-stat__cislo {
	font-size: 24px;
	font-weight: 700;
	color: #ffffff;
}

.labenka-hub-stat__popis {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
}

/*
 * Mobil: štatistiky sa lámu pod seba, takže pri troch údajoch a rozostupe
 * 28 px naberali cez 200 px výšky a hlavička sa neúmerne naťahovala.
 *
 * Mriežka namiesto voľného lámania: pri troch údajoch padnú dva do prvého
 * riadka a tretí pod ne, ale zarovnané do stĺpca. Voľné lámanie ich ukladalo
 * podľa vlastnej šírky, takže tretí začínal inde než prvý a vyzeralo to
 * rozsypane.
 */
@media (max-width: 767px) {
	.labenka-hub-statistiky {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 16px;
	}

	.labenka-hub-stat {
		gap: 8px;
	}

	/*
	 * Nepárny posledný údaj dostane celý riadok. Pri troch údajoch by inak
	 * zostal v úzkom stĺpci a dlhší popis ("chovateľov a odborníkov") by sa
	 * zalomil, hoci vedľa neho je prázdne miesto.
	 */
	.labenka-hub-stat:nth-child(odd):last-child {
		grid-column: 1 / -1;
	}

	.labenka-hub-stat__icon svg {
		width: 20px;
		height: 20px;
	}

	.labenka-hub-stat__cislo {
		font-size: 20px;
	}

	.labenka-hub-stat__popis {
		font-size: 12px;
	}
}

/* Rozcestník na podtémy – len pri nadradených témach (Cicavce, Plazy…). */
.labenka-hub-podtemy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

/* Na mobile nemá hero pod sebou pevnú výšku (tá platí až od 768px), takže
   posledný riadok obsahu (podtémy, alebo pri profiloch/hub bez podtém
   posledná štatistika) sedí tesne pri spodnom okraji. Bez tohto priestoru
   navyše by ho prekrývala plávajúca pilulka navigácie pod hero (rovnaký
   presah -46px ako všade inde – tu narážal priamo na obsah). Týka sa len
   profilov a hub stránok, kde za hero nasleduje .labenka-nav-mobile;
   titulkin hero (.labenka-titulka-hero) je iný, netreba ho meniť. */
@media (max-width: 767px) {
	.labenka-hero.profil-sekcia,
	.labenka-hero.labenka-hub-hero {
		padding-bottom: 66px;
	}
}

.labenka-hub-podtema {
	display: inline-flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.92);
	color: #1a1a1a;
	border-radius: 8px;
	padding: 8px 14px;
	font-weight: 600;
	text-decoration: none;
}

.labenka-hub-podtema:hover,
.labenka-hub-podtema:focus {
	background-color: #ffffff;
	color: var(--labenka-accent);
}

/* Záložky pod hlavičkou. Prekrytie hlavičky je menšie než pri profiloch,
   kde nav zasahuje do fotky – tu pod ním nie je obrázok, len prechod. */
.labenka-hub-nav {
	margin-top: 16px;
}

/*
 * Hub stránka je od 26. 9. 2026 jeden stĺpec na celú šírku (Mirec: fotky
 * zvierat boli v užšom stĺpci "príliš malé, to nič nikomu nepovie", a bočný
 * panel bol aj v rozpore s pravidlom "nikde na webe žiadny sidebar" – na
 * mobile sa navyše odsúval až na koniec stránky). Pôvodné dvojstĺpcové
 * rozloženie (.labenka-hub-layout/.labenka-hub-bocny) je preto preč – filter
 * je teraz pruh nad dlaždicami a Odborníci sú vlastná sekcia na celú šírku.
 */

/* Nadpis sekcie s odkazom "zobraziť všetky" na jednom riadku. */
.labenka-hub-hlavicka {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.labenka-hub-hlavicka h2 {
	margin: 0;
}

.labenka-hub-viac {
	color: var(--labenka-accent);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.labenka-hub-viac:hover,
.labenka-hub-viac:focus {
	text-decoration: underline;
}

.labenka-hub-pocet {
	background-color: #f4f7ef;
	color: var(--labenka-accent);
	border-radius: 20px;
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
}

/* Klikateľný variant (napr. "Zobraziť všetkých (13) →" na profile zvieraťa,
   odkazuje na #odbornici na hub stránke danej témy, kde je výpis bez stropu). */
a.labenka-hub-pocet--odkaz {
	text-decoration: none;
	white-space: nowrap;
}

a.labenka-hub-pocet--odkaz:hover,
a.labenka-hub-pocet--odkaz:focus {
	background-color: var(--labenka-accent);
	color: #ffffff;
}

/* Panel v bočnom stĺpci – užší a s menším nadpisom než sekcie vľavo. */
.labenka-hub-panel h2 {
	font-size: 20px;
}

/* Doplnkový riadok v karte (latinský názov, dátum, mesto). */
.labenka-related-card__podtitul {
	color: #6a6a6a;
	font-size: 13px;
	margin: 2px 0 0 0;
}

.labenka-hub-stitok {
	display: inline-block;
	align-self: flex-start;
	background-color: #f4f7ef;
	color: var(--labenka-accent);
	border-radius: 6px;
	padding: 2px 8px;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
}

/* Dátumový odznak na karte podujatia – sedí v rohu náhľadu. */
.labenka-hub-podujatie {
	position: relative;
}

.labenka-hub-datum {
	position: absolute;
	top: 30px;
	left: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 6px 10px;
	line-height: 1.1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.labenka-hub-datum__den {
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
}

.labenka-hub-datum__mesiac {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--labenka-accent);
}

/* Vyhľadávanie podľa vlastností. */
.labenka-hub-filter {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.labenka-hub-filter__pole {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.labenka-hub-filter__popis {
	font-size: 13px;
	font-weight: 600;
	color: #4a4a4a;
}

.labenka-hub-filter select {
	width: 100%;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	padding: 8px 30px 8px 10px;
	background-color: #ffffff;
	font-size: 14px;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23688c16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
}

.labenka-hub-filter__tlacidlo {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	text-align: center;
	cursor: pointer;
}

.labenka-hub-filter__zrusit {
	align-self: center;
	color: #6a6a6a;
	font-size: 13px;
	text-decoration: underline;
}

/* Odborníci – kompaktný zoznam, nie mriežka kariet. Pri populárnych témach
   ich budú stovky (takmer každý veterinár rieši psy aj mačky), takže sa
   neprezerajú, ale hľadá sa medzi nimi ten správny podľa mesta. */
/* Bez vlastného margin-u: zvislé rozostupy určuje systém rozostupov sekcie.
   Nastaviť tu "margin: 0" by ho prebilo (rovnaká špecificita, neskôr v
   súbore) a zoznam by sa dotýkal nadpisu. */
/*
 * Mriežka, nie zoznam pod sebou – huby stratili bočný panel (Mirec 26. 9.
 * 2026: "co su tie kontakty a odborníci, tiež normálne do riadku"), takže
 * odborníci teraz dostávajú celú šírku obsahu namiesto úzkeho stĺpca.
 */
.labenka-hub-odbornici {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 899px) {
	.labenka-hub-odbornici {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.labenka-hub-odbornici {
		grid-template-columns: 1fr;
	}
}

/*
 * Jemne zelený podklad (rovnaká rodina farieb ako panel "Nájdi si zviera")
 * a okrúhla fotka namiesto holého textu – Mirec 26. 9. 2026: sekcia bola
 * "trochu suchá", navrhol buď zelenkavý podklad, alebo okrúhly náhľad fotky.
 * Urobené oboje, keďže sa navzájom dopĺňajú a všetci odborníci majú fotku.
 */
.labenka-hub-odbornik a {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 12px 16px;
	background-color: #f3f7ec;
	border: 1px solid transparent;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
}

.labenka-hub-odbornik a:hover,
.labenka-hub-odbornik a:focus {
	border-color: var(--labenka-accent);
	box-shadow: 0 8px 20px rgba(22, 26, 18, 0.08);
}

.labenka-hub-odbornik a:hover .labenka-hub-odbornik__meno,
.labenka-hub-odbornik a:focus .labenka-hub-odbornik__meno {
	color: var(--labenka-accent);
}

.labenka-hub-odbornik__foto {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.labenka-hub-odbornik__foto--prazdna {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #e6f0da;
	color: var(--labenka-accent);
}

.labenka-hub-odbornik__foto--prazdna svg {
	width: 22px;
	height: 22px;
}

.labenka-hub-odbornik__telo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.labenka-hub-odbornik__meno {
	font-weight: 600;
	color: #1a1a1a;
}

.labenka-hub-odbornik__popis {
	font-size: 13px;
	color: #6a6a6a;
}

/* ==========================================================================
   front-page.php – titulka
   ========================================================================== */

/*
 * Hero a pás kategórií. Pás je vsadený do spodného okraja hera – prekrýva ho
 * a pôsobí ako lišta položená na fotku, nie ako ďalšia sekcia pod ňou.
 * Hero má preto zväčšené spodné odsadenie, aby mu pás nesadol na text.
 */
.labenka-titulka-uvod {
	margin: 24px 24px 0 24px;
}

.labenka-titulka-hero {
	border-radius: 24px;
	padding: 56px 40px 84px 40px;
}

@media (max-width: 767px) {
	.labenka-titulka-uvod {
		margin: 12px 12px 0 12px;
	}

	.labenka-titulka-hero {
		border-radius: 18px;
		padding: 32px 24px 58px 24px;
	}
}

/* --- vyhľadávanie v hlavičke --- */

.labenka-titulka-hladanie {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	margin-bottom: 14px;
	padding: 8px 8px 8px 16px;
	background-color: rgba(255, 255, 255, 0.97);
	border-radius: 10px;
}

.labenka-titulka-hladanie__ikona {
	display: inline-flex;
	flex: none;
	color: #6d7665;
}

.labenka-titulka-hladanie__ikona svg {
	width: 19px;
	height: 19px;
}

.labenka-titulka-hladanie input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 6px 0;
	font-size: 15px;
	color: #1d2419;
	box-shadow: none;
}

.labenka-titulka-hladanie input[type="search"]:focus {
	outline: 0;
}

.labenka-titulka-hladanie input[type="search"]::placeholder {
	color: #8b9382;
	opacity: 1;
}

.labenka-titulka-hladanie button {
	flex: none;
	border: 0;
	border-radius: 7px;
	padding: 9px 18px;
	background-color: var(--labenka-accent);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.labenka-titulka-hladanie button:hover,
.labenka-titulka-hladanie button:focus {
	background-color: var(--labenka-accent-vyraz);
}

/* Obal má vlastný obrys pri klávesovom zameraní, nie každé pole zvlášť. */
.labenka-titulka-hladanie:focus-within {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/*
 * Na mobile tlačidlo mizne – zaberalo polovicu poľa a text sa nezmestil.
 * Odoslať sa dá klávesou "hľadať" na klávesnici, ktorú prehliadač pri
 * type="search" ponúka sám.
 */
@media (max-width: 767px) {
	.labenka-titulka-hladanie {
		padding: 10px 14px;
	}

	.labenka-titulka-hladanie button {
		display: none;
	}
}

.labenka-titulka-priklady {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 28px 0;
	font-size: 13px;
}

.labenka-titulka-priklady__stitok {
	color: rgba(255, 255, 255, 0.72);
	font-weight: 600;
}

.labenka-titulka-priklady a {
	color: #ffffff;
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 3px 11px;
}

.labenka-titulka-priklady a:hover,
.labenka-titulka-priklady a:focus {
	background-color: rgba(255, 255, 255, 0.28);
}

/*
 * Mobil: príklady sa lámali na dva nerovnaké riadky (dva vedľa seba a tretí
 * sám pod nimi), čo pôsobilo ako chyba. Držia sa preto v jednom riadku a
 * posúvajú sa prstom, rovnako ako pás kategórií pod hero.
 *
 * Popisok "Napríklad:" mizne – pod vyhľadávacím poľom je aj tak zrejmé, čo to
 * je, a na úzkom displeji zaberal štvrtinu riadka.
 */
@media (max-width: 767px) {
	.labenka-titulka-priklady {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
	}

	.labenka-titulka-priklady::-webkit-scrollbar {
		display: none;
	}

	.labenka-titulka-priklady__stitok {
		display: none;
	}

	.labenka-titulka-priklady a {
		flex: none;
	}
}

/* --- pás hlavných kategórií --- */

.labenka-titulka-pas {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	margin: -46px 20px 0 20px;
	padding: 4px;
	background-color: #ffffff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(22, 26, 18, 0.16);
}

.labenka-titulka-pas__zoznam {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex: 1 1 auto;
	min-width: 0;
}

.labenka-titulka-pas__polozka,
.labenka-titulka-pas__vsetky {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 1 auto;
	min-width: 0;
	padding: 14px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #384231;
	text-decoration: none;
	white-space: nowrap;
}

.labenka-titulka-pas__ikona {
	display: inline-flex;
	flex: none;
	color: var(--labenka-accent);
}

.labenka-titulka-pas__ikona svg {
	width: 20px;
	height: 20px;
}

.labenka-titulka-pas__nazov {
	overflow: hidden;
	text-overflow: ellipsis;
}

.labenka-titulka-pas__pocet {
	font-size: 12px;
	font-weight: 600;
	color: #9aa38f;
}

.labenka-titulka-pas__polozka:hover,
.labenka-titulka-pas__polozka:focus,
.labenka-titulka-pas__vsetky:hover,
.labenka-titulka-pas__vsetky:focus {
	background-color: #f1f5ea;
	color: var(--labenka-accent);
}

/* Odkaz na všetky skupiny je oddelený – nie je to skupina, ale rozcestník. */
.labenka-titulka-pas__vsetky {
	flex: none;
	margin-left: 4px;
	padding-left: 18px;
	padding-right: 18px;
	border-left: 1px solid var(--labenka-ramik, #e2e8dc);
	border-radius: 0 10px 10px 0;
	color: var(--labenka-accent);
}

/*
 * Mobil: skupiny zostávajú v jednom riadku a posúvajú sa prstom, odkaz na
 * všetky skupiny ostáva pevne na konci pásu – práve on je tu poistka na to,
 * čo sa do riadka nezmestí.
 */
@media (max-width: 767px) {
	.labenka-titulka-pas {
		margin: -34px 12px 0 12px;
		padding: 3px;
		border-radius: 12px;
	}

	.labenka-titulka-pas__zoznam {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
	}

	.labenka-titulka-pas__zoznam::-webkit-scrollbar {
		display: none;
	}

	.labenka-titulka-pas__polozka {
		flex: none;
		padding: 11px 10px;
		font-size: 13px;
	}

	.labenka-titulka-pas__vsetky {
		padding-left: 12px;
		padding-right: 12px;
	}

	.labenka-titulka-pas__vsetky .labenka-titulka-pas__nazov {
		display: none;
	}
}

/* --- hlavička sekcie na titulke --- */

.labenka-titulka-sekcia {
	margin: 34px 24px;
}

.labenka-titulka-sekcia__hlava {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.labenka-titulka-sekcia__stitok {
	margin: 0 0 4px 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--labenka-accent);
}

.labenka-titulka-sekcia__nadpis {
	margin: 0;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.labenka-titulka-sekcia__odkaz {
	font-size: 14px;
	font-weight: 700;
	color: var(--labenka-accent);
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.labenka-titulka-sekcia {
		margin: 22px 12px;
	}

	.labenka-titulka-sekcia__nadpis {
		font-size: 20px;
	}

	/*
	 * Odkaz na úplný zoznam sa na mobile NESKRÝVA – iba sa presúva pod
	 * nadpis. Kým bol "display: none", návštevník na telefóne dostal prvých
	 * osem zvierat a nijako sa nedozvedel, že téma ich má tridsať (Mirec
	 * 6. 10. 2026: "zobrazí mi 8 psov a v podstate nikde nevidím, že ich je
	 * viac"). Vedľa nadpisu sa nezmestí, na vlastnom riadku áno.
	 */
	.labenka-titulka-sekcia__hlava {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

.labenka-titulka-nadpis {
	max-width: 15ch;
	line-height: 1.15;
	text-wrap: balance;
}

.labenka-titulka-nadpis__znacka {
	color: var(--labenka-accent);
}

@media (max-width: 767px) {
	.labenka-titulka-nadpis {
		font-size: 32px;
	}
}

.labenka-titulka-tlacidla {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

/* Tlačidlá v hlavičke stoja vedľa seba, preto sa nesmú centrovať cez
   margin: auto ako .labenka-button inde na webe. */
.labenka-titulka-tlacidla .labenka-button {
	margin-left: 0;
	margin-right: 0;
}

/* Druhé tlačidlo je vedľajšia voľba – priehľadné s obrysom, aby hlavná
   výzva ("Preskúmajte Atlas") zostala jediná výrazná. */
.labenka-button--tichy {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.labenka-button--tichy:hover,
.labenka-button--tichy:focus {
	background-color: rgba(255, 255, 255, 0.14);
}

/*
 * Tlačidlo "zobraziť všetko" pod mriežkou výpisu. Vedľajšia voľba, nie
 * hlavná výzva sekcie – preto obrys namiesto plnej zelenej. Zámerne rovnaký
 * tvar ako tlačidlá stránkovania (.page-numbers), s ktorými sa na stránke
 * strieda: raz je pod mriežkou odkaz na celý zoznam, raz jeho stránkovanie.
 */
.labenka-button--vypis {
	background-color: #ffffff;
	border: 1px solid var(--labenka-accent);
	color: var(--labenka-accent);
}

.labenka-button--vypis:hover,
.labenka-button--vypis:focus {
	background-color: var(--labenka-accent);
	color: #ffffff;
}

/*
 * "Zobraziť menej" – tlmenejšie než "zobraziť všetko". Zbalenie je návrat,
 * nie ponuka: nemá ťahať oko rovnako silno ako cesta k ďalšiemu obsahu.
 */
.labenka-button--zbalit {
	border-color: rgba(0, 0, 0, 0.18);
	color: #4a4a4a;
}

.labenka-button--zbalit:hover,
.labenka-button--zbalit:focus {
	background-color: #f1f1f1;
	border-color: rgba(0, 0, 0, 0.32);
	color: #1a1a1a;
}

/*
 * Rozcestník tém – jadro titulky. Fotka na celej ploche karty s tmavým
 * prechodom naspodku, aby bol názov čitateľný na ľubovoľnom obrázku.
 */
/*
 * Počet stĺpcov dodáva PHP (labenka_titulka_stlpcov) podľa počtu tém, aby
 * posledný rad nezostal s jedinou kartou. auto-fit to spraviť nevie – CSS
 * počet položiek nepozná.
 */
.labenka-titulka-temy {
	display: grid;
	grid-template-columns: repeat(var( --labenka-titulka-stlpcov, 5 ), minmax(0, 1fr));
	gap: 18px;
}

/*
 * Na tablete vždy tri stĺpce – päť kariet vedľa seba by bolo nečitateľných.
 * Napevno, nie cez premennú: repeat() v mriežke prijíma iba celé číslo,
 * takže min() sa tu použiť nedá (var() áno, lebo sa dosadzuje ako text).
 */
@media (max-width: 1023px) {
	.labenka-titulka-temy {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.labenka-titulka-temy {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/*
	 * Zoznam zvierat v huboch (modifikátor --zoznam) ide na mobile po jednej
	 * karte na celú šírku. Dôvod: karty majú dlhý názov aj latinské meno a
	 * pri dvoch stĺpcoch sa text cez obrázok stával nečitateľným (Mirec
	 * 17. 10. 2026). Dlaždice tém na titulke majú krátky popis, tie ostávajú
	 * po dvoch. Širší pomer strán, nech karta na celú šírku nie je privysoká.
	 */
	.labenka-titulka-temy--zoznam {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.labenka-titulka-temy--zoznam .labenka-titulka-tema {
		aspect-ratio: 16 / 9;
	}
}

.labenka-titulka-tema {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	background-color: #2a2a2a;
}

/* Na mobile idú po dvoch, tam je štvorcovejší tvar čitateľnejší. */
@media (max-width: 767px) {
	.labenka-titulka-tema {
		aspect-ratio: 4 / 3;
		border-radius: 12px;
	}
}

.labenka-titulka-tema__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Karta témy bez fotky. Názov je biely a leží na tmavom prechode, takže
 * podklad musí byť tmavý – svetlý (#f4f7ef) robil názov nečitateľným.
 * Tlmená olivová namiesto čiernej, aby prázdna karta pôsobila zámerne
 * a nie ako nenačítaný obrázok.
 */
.labenka-titulka-tema__foto--prazdna {
	background-image: linear-gradient(150deg, #3b462c 0%, #222a1a 100%);
}

.labenka-titulka-tema__telo {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%);
}

.labenka-titulka-tema__nazov {
	color: #ffffff;
	font-size: 19px;
	font-weight: 700;
}

.labenka-titulka-tema__pocet {
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
}

.labenka-titulka-tema:hover .labenka-titulka-tema__foto,
.labenka-titulka-tema:focus .labenka-titulka-tema__foto {
	transform: scale(1.04);
}

.labenka-titulka-tema__foto {
	transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.labenka-titulka-tema__foto {
		transition: none;
	}
}

/*
 * Popisy prostredia – podpolia, ktoré nesú celú vetu, nie údaj.
 *
 * V zelenej karte vyzerá veta ako údaj, ktorým nie je; pri psoch tak vznikalo
 * 14 kariet pod sebou, z ktorých polovica bola text. Tu sa vypisujú ako
 * dvojice popisok – text, čo sa číta prirodzene a nekonkuruje kartám nad nimi.
 */
.labenka-prostredie-popisy {
	display: grid;
	grid-template-columns: minmax(150px, max-content) minmax(0, 1fr);
	column-gap: 20px;
	row-gap: 10px;
	margin: 0;
}

.labenka-prostredie-popisy dt {
	color: var(--labenka-accent);
	font-weight: 600;
	font-size: 14px;
}

.labenka-prostredie-popisy dd {
	margin: 0;
	font-size: 15px;
}

@media (max-width: 600px) {
	.labenka-prostredie-popisy {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2px;
	}

	.labenka-prostredie-popisy dd {
		margin-bottom: 10px;
	}
}

/*
 * Karta, ktorá nesie vetu, sa smie roztiahnuť cez celý riadok – text tú
 * plochu vyplní a rozloží sa na menej riadkov. Karta s krátkou hodnotou
 * ("Áno", "26–28 °C") ostáva obmedzená na polovicu, inak by okolo údaja
 * zostala veľká prázdna plocha a pôsobilo by to ako chyba.
 */
.labenka-cards-grid > .labenka-card--veta {
	max-width: 100%;
}

/* ==========================================================================
   home.php – výpis článkov

   Karta je samostatný komponent (obrázok ide po okraj, text má vlastné
   odsadenie), ale typografiu názvu a perexu si berie zo spoločných tried
   .labenka-related-card__title / __excerpt – aby sa orezanie na tri riadky
   ladilo na jednom mieste pre celý web.
   ========================================================================== */

.labenka-vypis__nadpis {
	margin: 0;
}

.labenka-vypis__uvod {
	color: #4a5142;
	max-width: 62ch;
}

.labenka-vypis__pocet {
	font-size: 14px;
	color: #767c70;
}

/* Mriežka. Flex namiesto grid z toho istého dôvodu ako pri sérii: neúplný
   posledný riadok sa vycentruje namiesto toho, aby sa karty nalepili vľavo
   (namerané pred opravou: 408 px prázdna vpravo). */
.labenka-vypis__mriezka {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 20px;
	row-gap: 20px;
}

.labenka-vypis__mriezka > .labenka-vypis-karta {
	flex: 0 1 calc((100% - 40px) / 3);
	max-width: calc((100% - 40px) / 3);
}

@media (max-width: 1023px) {
	.labenka-vypis__mriezka > .labenka-vypis-karta {
		flex-basis: calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}

@media (max-width: 599px) {
	.labenka-vypis__mriezka > .labenka-vypis-karta {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* ——— karta ——— */
.labenka-vypis-karta {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.labenka-vypis-karta__foto {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Zástupné miesto pre článok bez náhľadovej fotky – rovnaká tlmená zelená
   ako pri kartách súvisiacich článkov, aby pôsobilo zámerne, nie ako diera. */
.labenka-vypis-karta__foto--prazdne {
	background-color: #f4f7ef;
}

.labenka-vypis-karta__telo {
	display: flex;
	flex-direction: column;
	padding: 16px 18px 18px;
}

.labenka-vypis-karta__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 7px;
	font-size: 12.5px;
	color: #767c70;
	margin-top: 12px;
}

/* ——— odznaky ——— */
.labenka-odznaky {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.labenka-odznak {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.labenka-odznak--typ {
	background-color: var(--labenka-accent);
	color: #ffffff;
}

.labenka-odznak--tema {
	background-color: #eef3e2;
	color: var(--labenka-accent-vyraz);
}

/* ——— pás série ——— */
.labenka-seria-pas {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 9px;
	padding: 7px 11px;
	border-radius: 9px;
	background-color: #f4f7ef;
	border-left: 3px solid var(--labenka-accent);
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--labenka-accent-vyraz);
}

.labenka-seria-pas__nazov {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.labenka-seria-pas b {
	font-weight: 700;
	white-space: nowrap;
}

.labenka-seria-pas__bodky {
	display: flex;
	flex: 0 0 auto;
	gap: 3px;
}

.labenka-seria-pas__bodka {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #c3d39a;
}

.labenka-seria-pas__bodka.je-tu {
	background-color: var(--labenka-accent);
}

/* ——— široká karta najnovšieho článku ——— */
.labenka-vypis-karta--hlavna {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
}

/* Pevný pomer strán, NIE height:100%. Obrázky sú lazy, takže kým sa načítajú,
   nemajú vlastné rozmery – height:100% sa potom nemá o čo oprieť a karta
   vyskočí (namerané 1500 px). Pomer 16:10 drží výšku ešte pred načítaním. */
.labenka-vypis-karta--hlavna .labenka-vypis-karta__foto {
	aspect-ratio: 16 / 10;
	height: auto;
	min-height: 0;
	object-fit: cover;
}

.labenka-vypis-karta--hlavna .labenka-vypis-karta__telo {
	justify-content: center;
	padding: 28px 30px;
}

/* Široká karta má priestor, preto sa tu orezanie uvoľňuje – názov ani perex
   sa nekrátia a nevyhradzuje sa im pevná výška (nemá sa s čím zarovnávať). */
.labenka-vypis-karta--hlavna .labenka-related-card__title {
	font-size: 27px;
	line-height: 1.22;
	min-height: 0;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	display: block;
}

.labenka-vypis-karta--hlavna .labenka-related-card__excerpt {
	font-size: 15.5px;
	line-height: 1.6;
	min-height: 0;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	display: block;
}

@media (max-width: 767px) {
	.labenka-vypis-karta--hlavna {
		grid-template-columns: 1fr;
	}

	.labenka-vypis-karta--hlavna .labenka-vypis-karta__foto {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.labenka-vypis-karta--hlavna .labenka-vypis-karta__telo {
		padding: 16px 18px 18px;
	}

	.labenka-vypis-karta--hlavna .labenka-related-card__title {
		font-size: 21px;
	}
}

/* ——— stránkovanie ——— */
.labenka-vypis .pagination {
	display: flex;
	justify-content: center;
}

.labenka-vypis .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 8px;
	row-gap: 8px;
}

.labenka-vypis .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--labenka-accent);
	border-radius: 8px;
	background-color: #ffffff;
	color: var(--labenka-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.labenka-vypis .nav-links .page-numbers.current {
	background-color: var(--labenka-accent);
	color: #ffffff;
}

.labenka-vypis .nav-links .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding: 0 2px;
}

/* Názov a perex sú vo výpise <span> (karta je jeden <a>, a odsek ani nadpis
   sa do odkazu vložiť nesmie). Orezanie cez -webkit-box funguje, ale pre
   istotu im tu dávame aj blokové správanie a odstupy. */
.labenka-vypis-karta .labenka-related-card__title {
	display: -webkit-box;
	font-size: 18px;
	font-weight: 700;
}

.labenka-vypis-karta .labenka-related-card__excerpt {
	display: -webkit-box;
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Pás série na fotke karty.

   Pôvodne stál nad nadpisom, lenže článok bez série mal potom nadpis o 39 px
   vyššie než susedné karty a mriežka pôsobila rozhádzane. Na fotke je miesto,
   ktoré aj tak leží ladom – text každej karty tak začína v rovnakej výške.

   Tmavý priesvitný pás, NIE plná zelená. Zelenou bol pôvodne a pri výpise,
   kde je väčšina článkov v sérii, z toho bola stena zelených pruhov cez celú
   mriežku – zelená prestala byť prízvukom a stala sa pozadím. Tmavá plocha
   sa navyše správa ako súčasť fotografie a zostáva čitateľná aj nad snehom
   či oblohou, kde by svetlý pás zanikol.
   -------------------------------------------------------------------------- */

.labenka-vypis-karta__media {
	position: relative;
	display: block;
}

.labenka-vypis-karta__media .labenka-seria-pas {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	margin: 0;
	padding: 6px 11px;
	border-left: 0;
	border-radius: 8px;
	background-color: rgba(22, 26, 18, 0.66);
	color: #ffffff;
	box-shadow: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Názov série je doplnková informácia, číslo dielu to podstatné –
   preto je názov o niečo tlmenejší. */
.labenka-vypis-karta__media .labenka-seria-pas__nazov {
	color: rgba(255, 255, 255, 0.82);
}

.labenka-vypis-karta__media .labenka-seria-pas__bodka {
	background-color: rgba(255, 255, 255, 0.38);
}

.labenka-vypis-karta__media .labenka-seria-pas__bodka.je-tu {
	background-color: #ffffff;
}

/* Dátum podujatia sedí v tom istom mieste, nech je aj rovnako tichý. */
.labenka-vypis-karta__datum {
	background-color: rgba(22, 26, 18, 0.66);
	box-shadow: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Odznaky sa vykresľujú vždy, aj prázdne – držia výšku riadka, takže nadpis
   začína rovnako aj pri článku bez vyplneného typu či témy. Zarovnanie doľava
   je tu natvrdo, aby ho nemohlo prebiť zdedené centrovanie. */
.labenka-odznaky {
	justify-content: flex-start;
	text-align: left;
	min-height: 23px;
}

.labenka-odznaky:empty {
	margin-bottom: 0;
	min-height: 0;
}

/* Na úzkej obrazovke je výpis jednostĺpcový, takže karty nemajú suseda, s
   ktorým by sa zarovnávali – vyhradená výška nadpisu a perexu by tam len
   vyrobila prázdne miesto (namerané 108 px pre nadpis, z toho pri
   dvojriadkovom názve 54 px prázdnych). Orezanie zostáva, len sa prestane
   rezervovať miesto.

   Karty súvisiacich článkov (.labenka-related-card) sú na mobile dvojstĺpcové,
   preto sa ich to zámerne netýka – tam zarovnanie zmysel má. */
@media (max-width: 599px) {
	/* Selektor musí niesť :has() rovnako ako pravidlo, ktoré prebíja –
	   :has() preberá špecificitu svojho argumentu, takže bez neho by bolo
	   toto pravidlo slabšie a nič by sa nestalo. */
	.labenka-vypis-karta:has(.labenka-related-card__excerpt) .labenka-related-card__title,
	.labenka-vypis-karta .labenka-related-card__excerpt {
		min-height: 0;
	}
}

/* Odznaky sa nezalamujú na druhý riadok.
   Zalomenie sa objavilo len na niektorých kartách (odznak "Vzťah človeka
   a zvieraťa" má sám 196 px a pri téme "Mačky" sa do 256 px už nezmestil,
   pri kratšom "Psy" áno), takže susedné karty v riadku mali nadpis o 30 px
   nižšie. Namiesto zalomenia radšej ustúpi typ článku – téma je krátka
   a nesie údaj, ktorý sa skracovať nemá. */
.labenka-odznaky {
	flex-wrap: nowrap;
}

.labenka-odznak {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.labenka-odznak--typ {
	flex: 0 3 auto;
}

.labenka-odznak--tema {
	flex: 0 1 auto;
}

/* ==========================================================================
   archive.php – výpisy profilov (Atlas, odborníci, miesta, podujatia)

   Škrupina karty je zhodná s výpisom článkov, pribúdajú len prvky, ktoré
   majú zmysel pri profiloch: podtitul (latinský názov, okres, miesto konania),
   údajové štítky zvieraťa, riadok zamerania a dátumový blok podujatia.
   ========================================================================== */

.labenka-vypis-karta__podtitul {
	font-size: 13px;
	color: #767c70;
	margin-top: 3px;
}

/* Latinský a medzinárodný názov kurzívou – odlišuje ich od bežného údaja
   ako je okres, ktorý kurzívu nepotrebuje. */
.labenka-vypis-karta__podtitul--latinsky {
	font-style: italic;
}

/* Údaje zvieraťa. Mirecove emoji stupnice (🟢⚪⚪⚪ Nízka) sa nechávajú tak –
   na karte fungujú ako drobná škála. */
.labenka-vypis-karta__udaje {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.labenka-udaj {
	font-size: 12px;
	background-color: #f4f6f0;
	border: 1px solid #e4e9da;
	border-radius: 7px;
	padding: 4px 9px;
	color: #4a5142;
	white-space: nowrap;
}

/* Guličky náročnosti vnútri štítku na karte – drobnejšie než na profile,
   aby sa zmestili do riadka s 12px textom. */
.labenka-udaj .labenka-skala {
	gap: 3px;
	margin: 0 2px 0 0;
	vertical-align: middle;
}

.labenka-udaj .labenka-skala__bodka {
	width: 7px;
	height: 7px;
}

/*
 * Zameranie odborníka.
 *
 * Taxonómia tema-zvierata má dva opačné významy: pri zvierati hovorí, ČÍM to
 * zviera je, pri profile KOMU sa venuje. Preto tu nikdy nestojí holý odznak –
 * bez slova "Zameranie" by karta tvrdila, že veterinár je hlodavec.
 */
.labenka-vypis-karta__zameranie {
	display: inline-block;
	align-self: flex-start;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--labenka-accent-vyraz);
	background-color: #f4f7ef;
	border-radius: 7px;
	padding: 5px 10px;
	margin-top: 12px;
}

.labenka-vypis-karta__zameranie b {
	font-weight: 700;
}

/* Dátum podujatia – v tom istom mieste na fotke ako pás série pri článkoch. */
.labenka-vypis-karta__datum {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 6px 11px;
	border-radius: 8px;
	background-color: var(--labenka-accent);
	color: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.labenka-vypis-karta__datum b {
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
}

.labenka-vypis-karta__datum span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Stránkovanie archívov – rovnaké ako vo výpise článkov. */
.labenka-vypis .pagination .nav-links .page-numbers {
	text-decoration: none;
}



/* ==========================================================================
   search.php – záložky nad výsledkami hľadania

   Skladajú sa z toho, čo sa naozaj našlo, takže ich počet je pri každom
   hľadaní iný. Preto sa zalamujú a nemajú pevnú šírku.
   ========================================================================== */

.labenka-vypis__zalozky {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.labenka-zalozka {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid #d8dfcd;
	border-radius: 999px;
	background-color: #ffffff;
	color: #4a5142;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.labenka-zalozka span {
	font-size: 12px;
	font-weight: 700;
	color: #767c70;
	font-variant-numeric: tabular-nums;
}

.labenka-zalozka.je-zvolena {
	background-color: var(--labenka-accent);
	border-color: var(--labenka-accent);
	color: #ffffff;
}

.labenka-zalozka.je-zvolena span {
	color: rgba(255, 255, 255, 0.85);
}

.labenka-zalozka:hover,
.labenka-zalozka:focus-visible {
	border-color: var(--labenka-accent);
}

/* ==========================================================================
   Filtre nad výpisom (labenka_render_vypis_filtre)

   Obyčajný GET formulár, žiadny JavaScript – dá sa poslať odkazom a funguje
   aj s vypnutým JS. Počet filtrov sa líši podľa typu obsahu (Atlas ich má
   šesť, veterinári zatiaľ jeden), preto sa pole zalamuje a nemá pevnú šírku.
   ========================================================================== */

/*
 * Jeden riadok: toľko stĺpcov, koľko má výpis filtrov, plus tlačidlo na konci.
 * Počet posiela PHP ako --labenka-filtre-stlpcov.
 *
 * Šesť filtrov v jednom riadku bolo stiesnené (156 px na pole), dva riadky
 * po troch zas zbytočne vysoké. Riešením nebolo rozloženie, ale počet –
 * Atlas má preto päť filtrov a vojdú sa do riadka s rozumnou šírkou.
 */
.labenka-filtre__form {
	display: grid;
	grid-template-columns: repeat(var( --labenka-filtre-stlpcov, 3 ), minmax(0, 1fr)) auto;
	align-items: end;
	gap: 16px;
}

.labenka-filtre__pole {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.labenka-filtre__popis {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #767c70;
}

/*
 * box-sizing: border-box je tu KĽÚČOVÉ.
 *
 * Bez neho sa odsadenie a rámček pripočítajú navrch k šírke 100 %, takže
 * rozbaľovačka bola o 22 px širšia než jej bunka v mriežke (namerané: pole
 * 318 px, select 340 px). Pretiekla do medzery a susedné polia sa opticky
 * dotýkali – vyzeralo to, že medzera chýba, hoci mriežka ju mala správnych
 * 16 px. Prejavilo sa to tým viac, čím užšie polia boli.
 */
.labenka-filtre__form select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 8px 30px 8px 10px;
	border: 1px solid #d8dfcd;
	border-radius: 8px;
	background-color: #ffffff;
	color: #1a1a1a;
	font-size: 14px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23688c16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
}

.labenka-filtre__tlacidlo {
	height: 39px;
	padding: 0 22px;
	border: 1px solid var(--labenka-accent);
	border-radius: 8px;
	background-color: var(--labenka-accent);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* Práve zvolené filtre. Vypisujú sa aj s počtom výsledkov, aby bolo jasné,
   prečo je záznamov zrazu málo – a každý sa dá jedným klikom odobrať. */
.labenka-filtre__zvolene {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.labenka-filtre__vysledok {
	font-size: 14px;
	font-weight: 700;
	color: #4a5142;
}

.labenka-filtre__odznak {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	background-color: var(--labenka-accent);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.labenka-filtre__odznak span[aria-hidden] {
	font-size: 15px;
	line-height: 1;
	opacity: 0.8;
}

.labenka-filtre__zrusit {
	font-size: 13px;
	font-weight: 600;
	color: var(--labenka-accent);
}

@media (max-width: 1023px) {
	/* Na užšej obrazovke by päť stĺpcov vyšlo na ~120 px – radšej dva
	   riadky po dvoch a tlačidlo pod nimi. */
	.labenka-filtre__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.labenka-filtre__tlacidlo {
		grid-column: 1 / -1;
		justify-self: end;
	}
}

@media (max-width: 599px) {
	.labenka-filtre__form {
		grid-template-columns: 1fr;
	}

	.labenka-filtre__tlacidlo {
		justify-self: stretch;
	}
}

/* --------------------------------------------------------------------------
   Rozbaľovanie filtrov na mobile.

   Šesť rozbaľovačiek pod sebou zaberie na telefóne celú výšku displeja a
   čitateľ sa k samotným záznamom prekrúti len ťažko. Na širokej obrazovke
   sa prepínač skrýva a filtre sú vždy viditeľné – tam miesto je.
   -------------------------------------------------------------------------- */

.labenka-filtre__prepinac {
	display: none;
}

@media (max-width: 767px) {
	.labenka-filtre__prepinac {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		list-style: none;
		padding: 10px 14px;
		border: 1px solid var(--labenka-accent);
		border-radius: 8px;
		background-color: #ffffff;
		color: var(--labenka-accent);
		font-size: 14px;
		font-weight: 600;
	}

	/* Safari kreslí vlastný trojuholník, ktorý by stál mimo rámčeka. */
	.labenka-filtre__prepinac::-webkit-details-marker {
		display: none;
	}

	/* Šípka podľa toho, či je pruh rozbalený. */
	.labenka-filtre__prepinac::after {
		content: "▾";
		margin-left: auto;
		font-size: 12px;
	}

	.labenka-filtre__rozbal[open] .labenka-filtre__prepinac::after {
		content: "▴";
	}

	/* Počet zvolených filtrov – aby bolo aj v zabalenom stave vidieť,
	   že je výpis zúžený. */
	.labenka-filtre__pocet-zvolenych {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 999px;
		background-color: var(--labenka-accent);
		color: #ffffff;
		font-size: 12px;
		font-weight: 700;
	}

	.labenka-filtre__rozbal[open] .labenka-filtre__form {
		margin-top: 12px;
	}
}

/* ==========================================================================
   Hlavička na celú šírku
   --------------------------------------------------------------------------
   GeneratePress drží obsah hlavičky v tej istej 1200px krabici ako obsah
   stránky, takže logo a menu stáli od okrajov ďaleko a v strede zostávalo
   prázdno. Mirec ju chcel roztiahnutú (2026-09-23).

   Mení sa len vnútro hlavičky, nie šírka obsahu stránok – tá zostáva 1200px,
   lebo dlhý text sa na celú šírku obrazovky číta zle.
   ========================================================================== */

.site-header .inside-header {
	max-width: none;
	padding-left: 32px;
	padding-right: 32px;
}

@media (max-width: 767px) {
	.site-header .inside-header {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ==========================================================================
   Horná hlavička – značka, menu s popismi, vyhľadávanie, Kontakt
   ========================================================================== */

/*
 * Vodorovné rozloženie hlavičky len na šírke. Na mobile si GeneratePress
 * rieši značku a hamburger vlastnými pravidlami a vlastný flex mu do toho
 * vstupoval – hlavička sa potom lámala do troch riadkov.
 */
@media (min-width: 768px) {
	.site-header .inside-header {
		display: flex;
		align-items: center;
		gap: 28px;
	}
}

/* Navigácia má vlastný 1200px obal – v roztiahnutej hlavičke ho netreba. */
.site-header .inside-navigation.grid-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* --- značka --- */

.labenka-znacka {
	flex: none;
}

.labenka-znacka__odkaz {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.labenka-znacka__ikona {
	display: inline-flex;
	color: var(--labenka-accent);
}

.labenka-znacka__ikona svg {
	width: 34px;
	height: 34px;
}

.labenka-znacka__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.labenka-znacka__nazov {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #1d2419;
}

.labenka-znacka__podtitul {
	font-size: 12.5px;
	font-weight: 500;
	color: #6d7665;
}

/* --- položky menu --- */

.labenka-menu-polozka {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* GP predvolene dáva každej hornej položke menu 20px odsadenie na obe
   strany – so 7 položkami (6 menu + Kontakt) s ikonkou aj podtextom sa to
   do 1200px kontajnera hlavičky nezmestilo na jeden riadok (nahlásené
   2026-09-29, pretieklo o ~144px). Zúžené len pre horné položky hlavného
   menu a pre vyhľadávaciu ikonu vedľa Kontaktu – rozbaľovacie podmenu má
   vlastné, samostatné pravidlo, tohto sa netýka. */
.main-navigation .main-nav > ul > li > a {
	padding-left: 6px;
	padding-right: 6px;
}

.main-navigation .menu-bar-item > a {
	padding-left: 6px;
	padding-right: 6px;
}

.labenka-menu-polozka__ikona {
	display: inline-flex;
	flex: none;
	color: var(--labenka-accent);
}

.labenka-menu-polozka__ikona svg {
	width: 21px;
	height: 21px;
}

.labenka-menu-polozka__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	text-align: left;
}

.labenka-menu-polozka__nazov {
	font-size: 14.5px;
	font-weight: 700;
	color: #1d2419;
}

.labenka-menu-polozka__popis {
	font-size: 12px;
	font-weight: 500;
	color: #6d7665;
	white-space: nowrap;
}

/*
 * Dvojriadkové položky potrebujú nižšie zvislé odsadenie, než má
 * GeneratePress prednastavené, inak hlavička narastie o dvadsať pixelov.
 */
.main-navigation .main-nav > ul > li > a {
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: normal;
}

.main-navigation .main-nav > ul > li:hover > a .labenka-menu-polozka__nazov,
.main-navigation .main-nav > ul > li:focus-within > a .labenka-menu-polozka__nazov,
.main-navigation .main-nav > ul > li.current-menu-item > a .labenka-menu-polozka__nazov {
	color: var(--labenka-accent);
}

/* V rozbalenom podmenu ostávajú položky jednoriadkové a bez ikon. */
.main-navigation .main-nav ul ul li a .labenka-menu-polozka {
	display: inline;
}

/* --- Kontakt --- */

.labenka-hlavicka-kontakt {
	display: inline-flex;
	align-items: center;
	margin-left: 4px;
	padding: 10px 20px;
	border-radius: 8px;
	/* Zámerne farba loga (tmavozelená), nie zdieľaná --labenka-accent – len
	   toto jedno tlačidlo v hlavičke, na želanie Mirca. */
	background-color: #073e1c;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* GeneratePress má vlastné ".main-navigation .menu-bar-items a { color:
   inherit }" s vyššou špecificitou než samotná trieda vyššie – bez tohto
   presnejšieho selektora by teda písmo zostalo tmavé namiesto bieleho. */
.main-navigation .menu-bar-items a.labenka-hlavicka-kontakt,
.main-navigation .menu-bar-items a.labenka-hlavicka-kontakt:hover,
.main-navigation .menu-bar-items a.labenka-hlavicka-kontakt:focus {
	color: #ffffff;
}

.labenka-hlavicka-kontakt:hover,
.labenka-hlavicka-kontakt:focus {
	background-color: #0a5727;
	color: #ffffff;
}

.menu-bar-items {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* --- mobil --- */

@media (max-width: 1024px) {
	.labenka-znacka__nazov {
		font-size: 21px;
	}

	.labenka-znacka__ikona svg {
		width: 28px;
		height: 28px;
	}

	.labenka-znacka__podtitul {
		font-size: 11.5px;
	}

	/* V rozbalenom mobilnom menu majú položky priestor, popisy teda zostávajú. */
	.main-navigation .main-nav > ul > li > a {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* Vyhľadávanie pred tlačidlom Kontakt – pomôcka vľavo, výzva vpravo. */
.menu-bar-items .search-item {
	order: 1;
}

.menu-bar-items .labenka-hlavicka-kontakt {
	order: 2;
}

/*
 * Mobil: hlavička sa lámala do dvoch riadkov, lebo značka, vyhľadávanie,
 * Kontakt a hamburger sa do 375 px nezmestili. Všetko sa preto zmenšuje tak,
 * aby ostal jeden riadok – dva riadky zbytočne odtláčali hero pod ohyb.
 */
@media (max-width: 767px) {
	.labenka-znacka__odkaz {
		gap: 9px;
	}

	.labenka-znacka__ikona svg {
		width: 26px;
		height: 26px;
	}

	.labenka-znacka__nazov {
		font-size: 19px;
	}

	.labenka-znacka__podtitul {
		font-size: 11px;
	}

	.labenka-hlavicka-kontakt {
		margin-left: 0;
		padding: 8px 14px;
		font-size: 13.5px;
	}

	.menu-bar-items {
		gap: 2px;
	}

	/* Do pásu sa tak zmestia tri skupiny namiesto dvoch. */
	.labenka-titulka-pas__polozka {
		gap: 6px;
		padding: 11px 8px;
	}

	.labenka-titulka-pas__ikona svg {
		width: 18px;
		height: 18px;
	}
}

/* Veľmi úzke displeje: podtitul značky ustúpi, aby sa zmestil Kontakt. */
@media (max-width: 400px) {
	.labenka-znacka__podtitul {
		display: none;
	}
}

/* ==========================================================================
   Úpravy po Mirecovej spätnej väzbe 25. 9. 2026
   ========================================================================== */

/*
 * Hlavička sa zarovnáva s obsahom, nie s okrajmi obrazovky. Na širokom
 * monitore stálo logo úplne vľavo a Kontakt úplne vpravo, ďaleko od hera –
 * takto začína logo presne tam, kde ľavý okraj hera.
 */
.site-header .inside-header {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

@media (max-width: 767px) {
	.site-header .inside-header {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* --- obrázkové logo --- */

.labenka-znacka__logo {
	display: block;
	width: auto;
	height: 52px;
}

@media (max-width: 767px) {
	.labenka-znacka__logo {
		height: 40px;
	}
}

@media (max-width: 400px) {
	.labenka-znacka__logo {
		height: 34px;
	}
}

/* Pás sedí stredom na spodnej hrane hera, nie zanorený v ňom. */
.labenka-titulka-pas {
	margin-top: -29px;
}

@media (max-width: 767px) {
	.labenka-titulka-pas {
		margin-top: -26px;
	}
}

/* --- tlačidlo a ponuka všetkých skupín --- */

/* Zobrazuje ho JavaScript až keď sa skupiny do riadka nezmestia. */
.labenka-titulka-pas__viac {
	position: relative;
	display: flex;
	flex: none;
}

.labenka-titulka-pas__viac[hidden] {
	display: none;
}

.labenka-titulka-pas__vsetky {
	font: inherit;
	border: 0;
	border-left: 1px solid var(--labenka-ramik, #e2e8dc);
	border-radius: 0 10px 10px 0;
	background: transparent;
	cursor: pointer;
}

.labenka-titulka-pas__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(2, minmax(150px, 1fr));
	gap: 2px;
	min-width: 320px;
	padding: 6px;
	background-color: #ffffff;
	border: 1px solid var(--labenka-ramik, #e2e8dc);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(22, 26, 18, 0.2);
}

.labenka-titulka-pas__panel[hidden] {
	display: none;
}

.labenka-titulka-pas__panel .labenka-titulka-pas__polozka {
	justify-content: flex-start;
	flex: 1 1 auto;
	padding: 11px 12px;
}

.labenka-titulka-pas__polozka--atlas {
	grid-column: 1 / -1;
	justify-content: center;
	margin-top: 2px;
	border-top: 1px solid var(--labenka-ramik, #e2e8dc);
	color: var(--labenka-accent);
}

/*
 * Mobil: ponuka zostáva ukotvená pod tlačidlom, len sa zúži na šírku
 * obrazovky. Pevné (fixed) umiestnenie by sa pri posúvaní stránky odtrhlo
 * od tlačidla, ku ktorému patrí.
 */
@media (max-width: 767px) {
	.labenka-titulka-pas__panel {
		right: -3px;
		min-width: 0;
		width: min(320px, calc(100vw - 36px));
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* V ponuke je miesto, takže dlhé názvy sa môžu zalomiť namiesto orezania. */
.labenka-titulka-pas__panel .labenka-titulka-pas__polozka {
	white-space: normal;
}

.labenka-titulka-pas__panel .labenka-titulka-pas__nazov {
	overflow: visible;
	text-overflow: clip;
}

/* --- rozbaľovacie podmenu v hlavičke --- */

/*
 * Zladené s dlaždicami a ponukou skupín: biela plocha, zaoblenie, tieň.
 * GeneratePress má prednastavené hranaté podmenu v inej farbe.
 *
 * BEZ medzery nad podmenu (margin-top: 0) – GeneratePress otvára/zatvára
 * podmenu čisto cez CSS :hover, žiadny JavaScript s oneskorením. Medzera
 * medzi položkou menu a podmenu je prázdne miesto bez akéhokoľvek prvku, a
 * len čo tade myš prejde, prestane byť nad čímkoľvek hoverovaným – podmenu
 * sa schová skôr, než sa doň myš dostane (presne to, čo Mirec nahlásil
 * 26. 9. 2026: "ako presúvam myš tak rozbaľovacia ponuka sa schová").
 * Podmenu preto sedí hneď pod položkou, bez voľného priestoru medzi nimi.
 */
.main-navigation .main-nav ul ul.sub-menu,
.main-navigation ul ul {
	margin-top: 0;
	padding: 6px;
	background-color: #ffffff;
	border: 1px solid var(--labenka-ramik, #e2e8dc);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(22, 26, 18, 0.2);
}

.main-navigation .main-nav ul ul li a {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #384231;
	line-height: 1.3;
}

.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus,
.main-navigation .main-nav ul ul li.current-menu-item > a {
	background-color: #f1f5ea;
	color: var(--labenka-accent);
}

/* --- ikona v názve dlaždice (rozcestník služieb) --- */

.labenka-titulka-tema__ikona {
	display: inline-flex;
	vertical-align: -3px;
	margin-right: 7px;
	color: #ffffff;
}

.labenka-titulka-tema__ikona svg {
	width: 18px;
	height: 18px;
}

/* --- nadpis samostatnej stránky --- */

.labenka-stranka-nadpis {
	margin: 0 0 14px 0;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/*
 * Čísla v heri sa držia v ľavom stĺpci, kde je stmavenie najsilnejšie.
 *
 * Na celú šírku sa tretí údaj ("14 chovateľov a odborníkov") dostal až do
 * polovice hera, teda na svetlé miesta fotky, kde už stmavenie takmer nie je
 * a biely popis sa na nich stráca. Zosilnieť stmavenie sa nedá – zmylo by to
 * zvieratá, kvôli ktorým tam tá fotka je. Stĺpec je preto zúžený a čísla sa
 * lámu do dvoch riadkov.
 */
.labenka-titulka-hero .labenka-hub-statistiky {
	max-width: 380px;
	gap: 14px 26px;
}

/* ==========================================================================
   Obľúbené sekcie + panel "Nájdi si zviera"
   --------------------------------------------------------------------------
   Dve tretiny dlaždice, jedna tretina vyhľadávanie (Mirec 25. 9. 2026).
   ========================================================================== */

.labenka-titulka-dvojica {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: start;
	gap: 24px;
}

@media (max-width: 899px) {
	.labenka-titulka-dvojica {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

.labenka-hladaj {
	position: relative;
	overflow: hidden;
	padding: 24px;
	background-color: #f3f7ec;
	border: 1px solid var(--labenka-ramik, #e2e8dc);
	border-radius: 16px;
}

/* Labka v rohu – tichý znak, nie ozdoba, ktorá by ťahala pozornosť. */
.labenka-hladaj__znak {
	position: absolute;
	top: -14px;
	right: -14px;
	color: var(--labenka-accent);
	opacity: 0.12;
	pointer-events: none;
}

.labenka-hladaj__znak svg {
	width: 96px;
	height: 96px;
}

.labenka-hladaj__nadpis {
	position: relative;
	margin: 0 0 4px 0;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.labenka-hladaj__uvod {
	position: relative;
	margin: 0 0 18px 0;
	font-size: 13.5px;
	color: #626b5b;
}

.labenka-hladaj__form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.labenka-hladaj__pole {
	position: relative;
	display: flex;
	align-items: center;
}

.labenka-hladaj__ikona {
	position: absolute;
	left: 13px;
	display: inline-flex;
	color: var(--labenka-accent);
	pointer-events: none;
}

.labenka-hladaj__ikona svg {
	width: 19px;
	height: 19px;
}

/*
 * Odsadenie zľava robí miesto ikone. box-sizing je tu nutný – bez neho
 * rozbaľovačka prerastie stĺpec, čo sme už raz na webe riešili.
 *
 * appearance: none ruší natívny vzhľad selectu – bez neho si ho Safari
 * kreslí po svojom (sivý prechod, vlastná šípka) a prekrýva sa to s ikonou
 * vľavo. Vlastná šípka vpravo sa dokresľuje cez background-image, nech
 * zostane jasné, že ide o rozbaľovačku, aj keď natívna zmizla.
 */
.labenka-hladaj__pole select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 12px 38px 12px 42px;
	background-color: #ffffff;
	border: 1px solid var(--labenka-ramik, #e2e8dc);
	border-radius: 10px;
	font-size: 14px;
	color: #384231;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23688c16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

.labenka-hladaj__tlacidlo {
	margin-top: 4px;
	padding: 13px 20px;
	border: 0;
	border-radius: 10px;
	background-color: var(--labenka-accent);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.labenka-hladaj__tlacidlo:hover,
.labenka-hladaj__tlacidlo:focus {
	background-color: var(--labenka-accent-vyraz);
}

.labenka-hladaj__viac {
	position: relative;
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--labenka-accent);
	text-decoration: none;
}

.labenka-hladaj__viac:hover,
.labenka-hladaj__viac:focus {
	text-decoration: underline;
}

/*
 * Na šírke dorastú dlaždice do výšky panela, aby bloky končili zarovno.
 * Pomer strán sa tu preto neurčuje – výšku diktuje panel vedľa a riadky si ju
 * rozdelia rovným dielom. Minimum je poistka, keby panel raz mal málo filtrov.
 */
@media (min-width: 900px) {
	.labenka-titulka-dvojica {
		align-items: stretch;
	}

	.labenka-titulka-dvojica .labenka-titulka-temy {
		grid-auto-rows: 1fr;
	}

	.labenka-titulka-dvojica .labenka-titulka-tema {
		aspect-ratio: auto;
		min-height: 150px;
	}
}

/* ==========================================================================
   Titulka – "Čo je Labenka", Vybrané články, Ďalšie články, Služby
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap");

/* --- riadok "Čo je Labenka" (1/3) + "Vybrané články" (2/3) --- */

.labenka-co-je-riadok {
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: stretch;
	gap: 24px;
}

@media (max-width: 899px) {
	.labenka-co-je-riadok {
		grid-template-columns: 1fr;
	}
}

/*
 * Karta "Čo je Labenka" – fotka na celú plochu karty, text cez teplý
 * priehľadný podklad na ľavej strane, citát v pravom dolnom rohu nad
 * viditeľnou fotkou (Mirec: text na fotke, nikde inde).
 *
 * Podklad je teplý krémový, nie tmavý – sedí na "Labenka je svetlejšia"
 * (viď labenka-hero-titulka.md) aj na zelenkastom tóne konkrétnej fotky.
 */
.labenka-co-je {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 360px;
	border-radius: 20px;
}

.labenka-co-je__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.labenka-co-je__telo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	max-width: 78%;
	padding: 28px 24px;
	background-image: linear-gradient(to right, rgba(248, 241, 224, 0.96) 0%, rgba(248, 241, 224, 0.9) 55%, rgba(248, 241, 224, 0.55) 82%, rgba(248, 241, 224, 0) 100%);
}

.labenka-co-je__nadpis {
	margin: 0 0 10px 0;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #4a3418;
}

.labenka-co-je__text p {
	margin: 0 0 16px 0;
	color: #5c4a30;
	line-height: 1.55;
	font-size: 14px;

	/* Celý text je na stránke "O Labenke" – tu stačí náhľad. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.labenka-co-je__zoznam ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px 0;
	padding: 0;
	list-style: none;
}

.labenka-co-je__zoznam li {
	position: relative;
	padding-left: 26px;
	font-size: 13.5px;
	font-weight: 600;
	color: #4a3418;
}

/* Zelený zaškrtávací kruh pred položkou, kreslený čisto v CSS. */
.labenka-co-je__zoznam li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--labenka-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 11px;
}

.labenka-co-je__tlacidlo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	align-self: flex-start;
	padding: 11px 20px;
	border-radius: 10px;
	background-color: var(--labenka-accent);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.labenka-co-je__tlacidlo:hover,
.labenka-co-je__tlacidlo:focus {
	background-color: var(--labenka-accent-vyraz);
}

.labenka-co-je__paw {
	position: absolute;
	z-index: 1;
	top: 16px;
	right: 16px;
	display: inline-flex;
	padding: 8px;
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	color: var(--labenka-accent);
}

.labenka-co-je__paw svg {
	width: 18px;
	height: 18px;
}

/*
 * Citát ako "napísaný rukou" – v pravom dolnom rohu, nad viditeľnou časťou
 * fotky, mimo textového bloku vľavo. Kurzívne písmo Caveat (Google Fonts).
 */
.labenka-co-je__citat {
	position: absolute;
	z-index: 1;
	right: 16px;
	bottom: 14px;
	max-width: 46%;
	margin: 0;
	text-align: right;
	transform: rotate(-2deg);
	transform-origin: right bottom;
	font-family: "Caveat", cursive;
	font-size: 22px;
	line-height: 1.2;
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

@media (max-width: 899px) {
	.labenka-co-je {
		min-height: 300px;
	}
}

@media (max-width: 599px) {
	.labenka-co-je__telo {
		max-width: 88%;
		padding: 22px 18px;
	}

	.labenka-co-je__nadpis {
		font-size: 20px;
	}

	.labenka-co-je__citat {
		max-width: 60%;
		font-size: 18px;
	}
}

/* --- stĺpec "Vybrané články" (v riadku vpravo, 2/3 šírky) --- */

.labenka-vybrane-stlpec {
	min-width: 0;
}

.labenka-vybrane-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 767px) {
	.labenka-vybrane-grid {
		grid-template-columns: 1fr;
	}
}

/* --- "Užitočné služby a miesta" --- */

.labenka-sluzby-pruh {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.labenka-sluzby-karta {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px;
	background-color: #ffffff;
	border: 1px solid var(--labenka-ramik, #e2e8dc);
	border-radius: 16px;
	text-decoration: none;
}

.labenka-sluzby-karta:hover,
.labenka-sluzby-karta:focus {
	border-color: var(--labenka-accent);
	box-shadow: 0 10px 26px rgba(22, 26, 18, 0.1);
}

.labenka-sluzby-karta__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.labenka-sluzby-karta__ikona svg {
	width: 22px;
	height: 22px;
}

/*
 * Tri odlišné farby na rozlíšenie troch rôznych vecí, nezávislé od
 * značkovej zelenej – tá by tu tri karty nerozlíšila.
 */
.labenka-sluzby-karta--modra .labenka-sluzby-karta__ikona {
	background-color: #e3edfb;
	color: #2f6fd6;
}

.labenka-sluzby-karta--zelena .labenka-sluzby-karta__ikona {
	background-color: #e6f0da;
	color: var(--labenka-accent);
}

.labenka-sluzby-karta--fialova .labenka-sluzby-karta__ikona {
	background-color: #ece3f8;
	color: #7c4fc4;
}

.labenka-sluzby-karta__telo {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.labenka-sluzby-karta__nazov {
	font-size: 16px;
	font-weight: 700;
	color: #1d2419;
}

.labenka-sluzby-karta__popis {
	font-size: 13.5px;
	color: #6d7665;
	line-height: 1.4;
}

.labenka-sluzby-karta__odkaz {
	margin-top: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--labenka-accent);
}

@media (max-width: 767px) {
	.labenka-sluzby-pruh {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Päta webu
   --------------------------------------------------------------------------
   Tmavá zelená z loga (#06401c) ako pozadie. Tu funguje bez problémov, ktoré
   mala ako značková farba (viď labenka-zelena-premenna.md) – slúži len ako
   podklad pod svetlý text, nie zároveň ako text na tmavom aj výplň na
   svetlom. Vlastné tóny, nezávislé od --labenka-accent.
   ========================================================================== */

.labenka-footer {
	--pata-pozadie: #0b3a1e;
	--pata-text: rgba(255, 255, 255, 0.82);
	--pata-text-tlmeny: rgba(255, 255, 255, 0.56);
	--pata-ciara: rgba(255, 255, 255, 0.14);

	background-color: var(--pata-pozadie);
	color: var(--pata-text);
}

.labenka-footer__hore {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px 36px;
}

.labenka-footer__znacka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	gap: 10px;
}

.labenka-footer__ikona {
	display: inline-flex;
	color: var(--labenka-accent);
}

.labenka-footer__ikona svg {
	width: 24px;
	height: 24px;
}

.labenka-footer__nazov {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.labenka-footer__logo {
	display: block;
	width: auto;
	height: 28px;
}

.labenka-footer__podtitul {
	flex-basis: 100%;
	margin: 4px 0 0 0;
	font-size: 13.5px;
	color: var(--pata-text-tlmeny);
	max-width: 32ch;
}

.labenka-footer__nadpis {
	margin: 0 0 14px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.labenka-footer__zoznam {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.labenka-footer__zoznam a {
	font-size: 14px;
	color: var(--pata-text);
	text-decoration: none;
}

.labenka-footer__zoznam a:hover,
.labenka-footer__zoznam a:focus {
	color: var(--labenka-accent);
	text-decoration: underline;
}

/* Spodný riadok "© rok Labenka · Kontakt" – prevzatá štruktúra GeneratePressu. */
.labenka-footer + .site-info {
	background-color: var(--pata-pozadie, #0b3a1e);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.labenka-footer + .site-info .inside-site-info {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 24px;
}

.labenka-footer + .site-info .copyright-bar,
.labenka-footer + .site-info .copyright-bar * {
	color: rgba(255, 255, 255, 0.56);
	font-size: 13px;
}

.labenka-footer + .site-info .copyright-bar a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.labenka-footer + .site-info .copyright-bar a:hover,
.labenka-footer + .site-info .copyright-bar a:focus {
	color: #ffffff;
	text-decoration: underline;
}

@media (max-width: 899px) {
	.labenka-footer__hore {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}

	.labenka-footer__znacka {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {
	.labenka-footer__hore {
		grid-template-columns: 1fr;
		padding: 36px 20px 28px;
		gap: 28px;
	}
}

/* ==========================================================================
   Viditeľný breadcrumb
   --------------------------------------------------------------------------
   Zámerne tichý – je to pomôcka na orientáciu, nie nadpis. Sedí hneď pod
   hlavičkou na každej stránke okrem titulky, vyhľadávania a 404
   (labenka_omrvinky()).
   ========================================================================== */

.labenka-omrvinky__riadok {
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #8b9382;
}

.labenka-omrvinky__odkaz {
	color: #6d7665;
	text-decoration: none;
}

.labenka-omrvinky__odkaz:hover,
.labenka-omrvinky__odkaz:focus {
	color: var(--labenka-accent);
	text-decoration: underline;
}

.labenka-omrvinky__aktualna {
	color: #43503c;
	font-weight: 600;
	/* Dlhý názov (napr. dlhší titul článku) sa na úzkej obrazovke skráti
	   výpustkou namiesto toho, aby si vynútil vlastný riadok. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60ch;
}

.labenka-omrvinky__oddelovac {
	color: #c7cfba;
}

@media (max-width: 767px) {
	.labenka-omrvinky__riadok {
		padding: 10px 12px;
		font-size: 12.5px;
	}

	.labenka-omrvinky__aktualna {
		max-width: 42vw;
	}
}

/* ==========================================================================
   Sekcia "Fotky od návštevníkov" (single-zviera.php) – galéria schválených
   fotiek + formulár na odoslanie novej. Viď
   labenka_render_navstevnicke_fotky_section() vo functions.php.
   ========================================================================== */

.labenka-navstevnicke-fotky-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}

.labenka-navstevnicka-fotka {
	margin: 0;
}

.labenka-navstevnicka-fotka img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}

.labenka-navstevnicka-fotka figcaption {
	margin-top: 4px;
	font-size: 12.5px;
	color: #767676;
}

/* Fotka je vnútri <button>, nech je klikateľná/zväčšiteľná – zrušiť
   predvolený vzhľad tlačidla, nech vyzerá presne ako predtým <figure>. */
.labenka-navstevnicka-fotka__spustac {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
}

.labenka-pridat-fotku {
	margin-top: var(--labenka-medzera-blok, 24px);
}

.labenka-pridat-fotku summary {
	width: fit-content;
	list-style: none;
}

.labenka-pridat-fotku summary::-webkit-details-marker {
	display: none;
}

.labenka-pridat-fotku__obsah {
	margin-top: 16px;
}

.labenka-formular-fotka {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 420px;
}

.labenka-formular-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
}

.labenka-formular-label input {
	font-weight: 400;
	padding: 8px 10px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
}

.labenka-formular-fotka .labenka-button {
	margin-left: 0;
}

.labenka-formular-sprava {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
}

.labenka-formular-sprava--ok {
	background-color: #e3f3e1;
	color: #2a5c26;
}

.labenka-formular-sprava--chyba {
	background-color: #fbe4e4;
	color: #7a2323;
}

/* Honeypot – skryté vizuálne aj pre čítačky obrazovky, no stále súčasť DOM,
   aby ho boti (na rozdiel od ľudí) vyplnili. */
.labenka-web-pole {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.labenka-formular-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.4;
}

.labenka-formular-checkbox input {
	margin-top: 3px;
	flex-shrink: 0;
}

/* Lightbox pre "Fotky od návštevníkov" – kliknutím na náhľad sa fotka
   zväčší cez celú obrazovku. Zámerne vlastné jednoduché riešenie (rovnaký
   princíp ako existujúci "Zobraziť všetky fotografie" prepínač vyššie),
   nie závislé od WP lightboxu blokov, ktorý táto sekcia nepoužíva. */
.labenka-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.85);
	padding: 24px;
}

/* Bez tohto by "display: flex" vyššie (rovnaká špecifickosť ako atribút
   [hidden]) prebilo skrytie a lightbox by bol vidieť hneď pri načítaní
   stránky, nie len po kliknutí na fotku. */
.labenka-lightbox:not([hidden]) {
	display: flex;
}

.labenka-lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
}

.labenka-lightbox__zatvorit {
	position: absolute;
	top: 16px;
	right: 24px;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
}

/* ==========================================================================
   Sekcia "Pre školy" (page-pre-skoly.php, taxonomy-rocnik.php) – zámerne
   jednoduchá kostra, dopĺňa sa postupne.
   ========================================================================== */

.labenka-skoly-podrocniky {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.labenka-skoly-podrocniky .labenka-button {
	margin: 0;
}

.labenka-skoly-materialy {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.labenka-skoly-material {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.labenka-skoly-material img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}

.labenka-skoly-material__nazov {
	font-weight: 600;
}

/* ==========================================================================
   Formulár "Pridajte prevádzku" (inc/formular-prevadzky.php)
   --------------------------------------------------------------------------
   Vkladá sa shortcodom [labenka_pridat_prevadzku]. Vizuálne nadväzuje na
   formulár fotiek od návštevníkov – ide o ten istý druh úlohy (návštevník
   niečo posiela redakcii), takže niet dôvodu, aby vyzeral inak.
   ========================================================================== */

/*
 * Rozostupy si formulár musí riešiť sám. Systém rozostupov sekcie
 * (.labenka-section > * + *) platí len pre PRIAME deti sekcie, a tu je
 * všetko o úroveň nižšie – vnútri <form>. Bez tohto pravidla sa fieldset,
 * súhlas aj tlačidlo lepia na seba.
 */
.labenka-prevadzka-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.labenka-prevadzka-mriezka {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 767px) {
	.labenka-prevadzka-mriezka {
		grid-template-columns: 1fr;
	}
}

/* Polia, ktoré potrebujú celú šírku – dlhý text sa v polovici zle číta. */
.labenka-pole--plna {
	grid-column: 1 / -1;
}

.labenka-pole {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	/*
	 * min-width:0 je KĽÚČOVÉ. Bez neho má flex/grid položka min-width:auto,
	 * takže sa nezmrští pod vnútornú šírku svojho obsahu – a súborové políčko
	 * (nahratie fotky) má širokú natívnu ovládaciu časť, ktorá na úzkom
	 * mobile (napr. 320 px) pretekala cez okraj okna. Mirec 2026-10-19.
	 */
	min-width: 0;
}

.labenka-pole label {
	font-size: 14px;
	font-weight: 600;
}

.labenka-pole input[type="text"],
.labenka-pole input[type="tel"],
.labenka-pole input[type="email"],
.labenka-pole input[type="number"],
.labenka-pole input[type="url"],
.labenka-pole select,
.labenka-pole textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	background-color: #ffffff;
	font-size: 15px;
	font-family: inherit;
}

.labenka-pole input:focus,
.labenka-pole select:focus,
.labenka-pole textarea:focus {
	outline: 2px solid var(--labenka-accent);
	outline-offset: 1px;
	border-color: var(--labenka-accent);
}

.labenka-pole textarea {
	resize: vertical;
}

.labenka-pole input[type="file"] {
	padding: 8px 0;
	font-size: 14px;
	max-width: 100%;
}

.labenka-povinne {
	color: #b3261e;
}

.labenka-nepovinne {
	font-weight: 400;
	color: #6a6a6a;
}

/* Súhlas je jediné pole, kde popis patrí VEDĽA ovládača, nie nad ním. */
.labenka-pole--suhlas label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	line-height: 1.45;
}

.labenka-pole--suhlas input {
	margin-top: 3px;
	flex-shrink: 0;
}

.labenka-prevadzka-odosielatel {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	padding: 16px;
}

.labenka-prevadzka-odosielatel legend {
	padding: 0 8px;
	font-size: 14px;
	font-weight: 700;
}

.labenka-prevadzka-vysvetlenie {
	font-size: 13.5px;
	color: #5a5a5a;
}

/* Honeypot: skrytý pred ľuďmi, ale nie cez display:none – časť botov taký
   vstup zámerne preskakuje a pasca by neplnila účel. */
.labenka-prevadzka-pasca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.labenka-prevadzka-hlaska {
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid;
	font-weight: 600;
}

.labenka-prevadzka-hlaska--ok {
	background-color: #eef5e3;
	border-color: var(--labenka-accent);
	color: #33501a;
}

.labenka-prevadzka-hlaska--chyba {
	background-color: #fdeceb;
	border-color: #b3261e;
	color: #8c1d18;
}

.labenka-prevadzka-form .labenka-button {
	margin-left: 0;
	margin-right: auto;
}

/* Výzva pod rozcestníkom adresára – jediná akcia na stránke, preto tlačidlo
   a nie odkaz vo vete.

   Odstup zhora musí byť väčší než medzery v mriežke nad ňou (18 px), inak
   výzva vyzerá ako jej posledný riadok – a predtým nemala žiadny, lebo
   .labenka-titulka-sekcia nie je .labenka-section a systém rozostupov sa
   na ňu nevzťahuje. Použitá hodnota zo škály: "oddelovac", teda odstup
   medzi dvoma samostatnými celkami. */
.labenka-sluzby-vyzva {
	margin-top: var(--labenka-medzera-oddelovac);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.labenka-sluzby-vyzva__otazka {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #3a3a3a;
}

/* ==========================================================================
   Detská sekcia – rozcestník typov aktivít (inc/aktivity.php,
   page-pre-skoly.php, taxonomy-aktivita.php)
   --------------------------------------------------------------------------
   Dlaždice sú zámerne iné než inde na webe: nemajú fotku na celej ploche,
   ale veľký symbol na svetlom podklade. Materiály sú tlačené listy a kvízy,
   ku ktorým náhľadová fotka buď nie je, alebo by nič nepovedala – symbol
   rozlíši typ aktivity na prvý pohľad aj dieťaťu, ktoré ešte nečíta plynulo.
   ========================================================================== */

.labenka-aktivity-mriezka {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

@media (max-width: 1023px) {
	.labenka-aktivity-mriezka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.labenka-aktivity-mriezka {
		grid-template-columns: 1fr;
	}
}

.labenka-aktivita {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 150px;
	padding: 22px 16px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background-color: #f4f7ef;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.labenka-aktivita:hover,
.labenka-aktivita:focus {
	transform: translateY(-2px);
	border-color: var(--labenka-accent);
}

@media (prefers-reduced-motion: reduce) {
	.labenka-aktivita {
		transition: none;
	}

	.labenka-aktivita:hover,
	.labenka-aktivita:focus {
		transform: none;
	}
}

.labenka-aktivita__symbol {
	font-size: 40px;
	line-height: 1;
}

.labenka-aktivita__nazov {
	color: #1a1a1a;
	font-size: 17px;
	font-weight: 700;
}

.labenka-aktivita__pocet {
	color: #6a6a6a;
	font-size: 13px;
}

/* Symbol vedľa nadpisu na stránke jedného typu aktivity. */
.labenka-hero__symbol {
	margin-right: 8px;
}

/* --- štítky materiálu (stupeň, vek, náročnosť) --- */

.labenka-material-stitky {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.labenka-material-stitok {
	padding: 2px 8px;
	border-radius: 999px;
	background-color: #eef1e8;
	color: #4a5a36;
	font-size: 12px;
	font-weight: 600;
}

/* --- "Vytvorili deti" (inc/vytvorili-deti.php) --- */

/* Dlaždica stojí medzi typmi aktivít, ale je to opačný smer – deti posielajú
   nám. Teplý podklad ju odlíši bez toho, aby vypadla z radu. */
.labenka-aktivita--deti {
	background-color: #fdf1ee;
	border-color: rgba(179, 38, 30, 0.18);
}

.labenka-aktivita--deti:hover,
.labenka-aktivita--deti:focus {
	border-color: #d4604f;
}

.labenka-deti-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 18px;
}

.labenka-detska-praca {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.labenka-detska-praca__foto {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

/* Popisok je citát dieťaťa, nie údaj – preto kurzíva a tlmená farba, nie
   štítok ako pri vlastnostiach materiálu. */
.labenka-detska-praca__popis {
	font-size: 14px;
	font-style: italic;
	color: #5a5a5a;
	text-align: center;
}

/* ==========================================================================
   Prepojenie materiálu so zvieraťom z Atlasu (inc/aktivity.php,
   single-skolsky_material.php)
   ========================================================================== */

.labenka-material-nahlad {
	display: flex;
	justify-content: center;
}

/* Jediný náhľad nemá byť na celú šírku obsahu – list papiera na výšku by
   zabral celú obrazovku a tlačidlo pod ním by vypadlo z dohľadu. */
.labenka-material-nahlad a {
	display: block;
	max-width: 420px;
}

/* Omaľovánka je prevažne biela – bez rámika by na svetlom podklade splynula
   so stránkou a nebolo by vidieť, kde končí list papiera. */
.labenka-material-nahlad__obrazok {
	max-width: 100%;
	height: auto;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	background-color: #ffffff;
}

.labenka-predloha {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 14px;
	text-decoration: none;
	background-color: #ffffff;
	transition: border-color 0.2s ease;
}

.labenka-predloha:hover,
.labenka-predloha:focus {
	border-color: var(--labenka-accent);
}

.labenka-predloha__foto {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
}

.labenka-predloha__foto--prazdna {
	background-image: linear-gradient(150deg, #3b462c 0%, #222a1a 100%);
}

.labenka-predloha__telo {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.labenka-predloha__nazov {
	color: #1a1a1a;
	font-size: 19px;
	font-weight: 700;
}

.labenka-predloha__latinsky {
	color: #6a6a6a;
	font-size: 14px;
}

.labenka-predloha__odkaz {
	margin-top: 4px;
	color: var(--labenka-accent);
	font-size: 14px;
	font-weight: 700;
}

@media (max-width: 560px) {
	.labenka-predloha {
		flex-direction: column;
		align-items: flex-start;
	}

	.labenka-predloha__foto {
		width: 100%;
		height: 180px;
	}
}

.labenka-pribuzne__uvod {
	color: #4a4a4a;
}

/* --- Viac súborov na stiahnutie (labenka_render_material_subory) --- */

/*
 * Počet stĺpcov dodáva PHP podľa počtu súborov (--labenka-subory-stlpcov),
 * nie auto-fit. Auto-fit so stropom 360 px zalamoval tri dlaždice do dvoch
 * riadkov: tri po 360 px plus medzery nevyšli do šírky obsahu o pár bodov
 * (Mirec 8. 10. 2026: "len sa to dalo do dvoch riadkov"). CSS počet
 * položiek nepozná, PHP áno.
 *
 * Strop šírky zostáva, ale je na mriežke, nie na stĺpci: náhľad vyrobený z
 * PDF má najviac 1058 px, takže nad ~360 px na dlaždicu by na displeji s
 * dvojnásobnou hustotou zmäkol. Väčšie to aj tak netreba – je to ukážka,
 * aby bolo vidieť, čo tam asi je, nie čítanie.
 */
.labenka-subory {
	display: grid;
	grid-template-columns: repeat(var( --labenka-subory-stlpcov, 3 ), minmax(0, 1fr));
	gap: 18px;
	max-width: calc(var( --labenka-subory-stlpcov, 3 ) * 360px + (var( --labenka-subory-stlpcov, 3 ) - 1) * 18px);
	margin-left: auto;
	margin-right: auto;
}

/* Na mobile vždy jeden pod druhým – tri náhľady vedľa seba by boli nečitateľné. */
@media (max-width: 560px) {
	.labenka-subory {
		grid-template-columns: 1fr;
		max-width: 360px;
	}
}

.labenka-subor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 14px;
	background-color: #ffffff;
	text-align: center;
}

.labenka-subor__obrazok {
	display: block;
	width: 100%;
	text-decoration: none;
}

/* Predlohy sú prevažne biele – rámik ukáže, kde končí list papiera. */
.labenka-subor__nahlad {
	width: 100%;
	height: auto;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	display: block;
	background-color: #ffffff;
}

.labenka-subor__nazov {
	font-size: 15px;
	font-weight: 600;
}

/* Tlačidlo vo vnútri dlaždice: sadne na jej šírku, nech sú všetky rovnaké,
   a drží sa pri spodnom okraji aj keď je názov kratší než u susedov. */
.labenka-subor .labenka-button {
	margin-top: auto;
	width: 100%;
	padding: 8px 14px;
	font-size: 14px;
}

/* Dlhší text materiálu (návod, ako na to) – nepovinný, píše sa v editore.
   Užší riadok než celá šírka sekcie: súvislý text sa na 1100 px číta zle. */
.labenka-material-text {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.labenka-material-text p {
	line-height: 1.65;
}

/* ==========================================================================
   Kvíz "Spoznáš ich?" (inc/kviz.php) – otázky sa skladajú z Atlasu, nič sa
   neodosiela. Ovládanie je stavané pre deti: veľké plochy, jasné farby,
   odpoveď hneď pod otázkou.
   ========================================================================== */

.labenka-kviz__uvod,
.labenka-kviz__skore {
	color: #4a4a4a;
}

.labenka-kviz__skore {
	font-size: 16px;
}

.labenka-kviz__spravne {
	color: var(--labenka-accent);
	font-size: 19px;
}

.labenka-kviz__otazky {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.labenka-kviz__otazka {
	padding: 18px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 16px;
	background-color: #ffffff;
}

.labenka-kviz__foto img {
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: 12px;
	display: block;
	margin: 0 auto;
}

.labenka-kviz__zadanie {
	margin-top: 14px;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}

.labenka-kviz__cislo {
	color: var(--labenka-accent);
}

.labenka-kviz__moznosti {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}

@media (max-width: 560px) {
	.labenka-kviz__moznosti {
		grid-template-columns: 1fr;
	}
}

/* Veľká plocha na klik – mieri naň aj menšie dieťa s prstom na mobile. */
.labenka-kviz__moznost {
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 10px;
	background-color: #ffffff;
	color: #1a1a1a;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.labenka-kviz__moznost:hover:not(:disabled) {
	border-color: var(--labenka-accent);
	background-color: #f4f7ef;
}

.labenka-kviz__moznost:disabled {
	cursor: default;
	opacity: 1; /* zošednutie by sťažilo čítanie práve zvolenej odpovede */
}

/* Správna je zelená vždy – aj keď dieťa kliklo vedľa, nech vie, ktorá to je. */
.labenka-kviz__moznost.je-spravna {
	border-color: var(--labenka-accent);
	background-color: #eef5e3;
	color: #33501a;
}

.labenka-kviz__moznost.je-nespravna {
	border-color: #b3261e;
	background-color: #fdeceb;
	color: #8c1d18;
}

.labenka-kviz__vysledok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 15px;
}

.labenka-kviz__hlaska {
	font-weight: 700;
}

.labenka-kviz__odkaz {
	color: var(--labenka-accent);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.labenka-kviz__zaver {
	padding: 14px 18px;
	border-radius: 12px;
	background-color: #eef5e3;
	border: 1px solid var(--labenka-accent);
	color: #33501a;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}

.labenka-kviz__znova {
	margin-left: auto;
	margin-right: auto;
}

/* Zvukový kvíz: natívny prehrávač na celú šírku otázky. */
.labenka-kviz__zvuk {
	display: flex;
	justify-content: center;
	padding: 10px 0;
}

.labenka-kviz__zvuk audio {
	width: 100%;
	max-width: 420px;
}

/* Prehrávač zvuku na profile zvieraťa. */
.labenka-zviera-zvuk audio {
	width: 100%;
	max-width: 520px;
}

/* Typ aktivity na dlaždici materiálu – aby bolo na profile zvieraťa vidieť,
   či ide o omaľovánku, kvíz alebo zvuk, bez čítania názvu. */
.labenka-material-typ {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--labenka-accent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Upozornenie pri nezostaviteľnom kvíze – vidí ho len prihlásený redaktor. */
.labenka-kviz-upozornenie {
	border: 1px dashed #b3261e;
	background-color: #fdeceb;
	color: #8c1d18;
}

.labenka-kviz-upozornenie__pozn {
	font-size: 13px;
	opacity: 0.8;
}

/* ==========================================================================
   Prebiehajúce akcie prevádzok (inc/akcie.php)
   ========================================================================== */

.labenka-akcie {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.labenka-akcia {
	display: flex;
	gap: 18px;
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 14px;
	background-color: #ffffff;
}

/*
 * Leták býva na výšku aj na šírku – namerané 1920x1080 aj 880x1000 – a
 * pôvodne sa karta prispôsobovala obrázku: pri letáku na šírku zostal
 * vedľa textu nízky pásik (160x90 v karte vysokej 164px), pri letáku na
 * výšku zas obrázok kartu zbytočne natiahol. Každá akcia preto vyzerala
 * inak podľa toho, čo prevádzka poslala.
 *
 * Rieši to rámček s pevným pomerom strán: plocha letáku je vždy rovnaká,
 * nech príde čokoľvek. Vnútri je object-fit: contain, nie cover – leták
 * je grafika s textom a dátumom, orezaním by sa z neho stratila
 * informácia (to isté robí .labenka-food-item__image). Zvyšok rámčeka
 * vyplní tlmená zelená z palety webu, takže pásy po stranách pôsobia ako
 * podklad, nie ako chyba.
 */
.labenka-akcia__letak {
	flex: 0 0 160px;
	align-self: flex-start;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
	background-color: #f4f7ef;
}

.labenka-akcia__obrazok {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.labenka-akcia__telo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.labenka-akcia__nazov {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

/* Trvanie je to najdôležitejšie po názve – podľa neho sa návštevník
   rozhoduje, či sa ešte stihne. */
.labenka-akcia__trvanie {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--labenka-accent);
}

.labenka-akcia__popis {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.labenka-akcia__odkaz {
	margin-top: 2px;
	color: var(--labenka-accent);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 560px) {
	.labenka-akcia {
		flex-direction: column;
	}

	.labenka-akcia__letak {
		flex: none;
		width: 100%;
		max-width: 260px;
	}
}

/* Odznak na karte vo výpise – teplá farba, aby sa odlíšil od zelených
   odznakov typu profilu a oko ho našlo ako "deje sa tu niečo". */
.labenka-akcia-odznak {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background-color: #fdf1ee;
	border: 1px solid #d4604f;
	color: #8c1d18;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Výzva v hlavičke archívu podujatí – odkaz na formulár. Nie tlačidlo:
   v hlavičke je už nadpis, popis aj počet, a štvrtý výrazný prvok by z nej
   spravil neprehľadný blok. */
.labenka-vypis__vyzva {
	font-size: 15px;
	color: #4a4a4a;
}

.labenka-vypis__vyzva a {
	color: var(--labenka-accent);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* ==========================================================================
   Stránka "O Labenke" (page-o-labenke.php + inc/o-labenke.php)
   --------------------------------------------------------------------------
   Stránka je stavaná z rovnakých dielov ako zvyšok webu: biele zaoblené
   .labenka-section na sivom podklade, jemne zelené .labenka-card a značková
   zelená z --labenka-accent. Nič tu nemá vlastnú paletu ani vlastné
   zaoblenie – keď sa raz zmení zelená na jednom mieste hore, zmení sa aj
   táto stránka.

   Vlastné je len rozloženie: dvojstĺpcové sekcie, dlaždice a ilustrácia,
   ktoré inde na webe nie sú.
   ========================================================================== */

/*
 * Sekcie majú vlastný margin 24px z .labenka-section, takže wrapper nemá
 * žiadny – inak by sa okraje sčítali a stránka by bola užšia než ostatné.
 */
.labenka-about {
	margin: 0;
}

.labenka-about h2 {
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: #000000;
}

.labenka-about h3 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: #000000;
	margin: 0;
}

/* Nadradený popisok nad nadpisom ("Náš príbeh", "Naše poslanie"). Hovorí,
   v ktorej časti stránky čitateľ stojí – stránka je dlhá a bez neho by
   nadpisy stáli vo vzduchoprázdne. */
.labenka-about__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px 0;
	color: var(--labenka-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.labenka-about__eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background-color: currentColor;
}

/* Textový odkaz so zelenou linkou – mäkšia alternatíva k .labenka-button
   tam, kde stoja dve akcie vedľa seba a druhá nemá kričať. */
.labenka-about__odkaz {
	display: inline-block;
	color: var(--labenka-accent);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--labenka-accent);
	padding-bottom: 2px;
}

.labenka-about__odkaz:hover {
	color: var(--labenka-accent-vyraz);
	border-bottom-color: var(--labenka-accent-vyraz);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/*
 * Hero je zámerne svetlé, nie tmavé ako na profiloch: tam fotka zvieraťa
 * nesie tému, tu by sa muselo vybrať jedno konkrétne zviera za všetky.
 * Namiesto fotky je kreslená scéna, v ktorej sú všetky.
 */
.labenka-about__hero {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 40px;
	align-items: center;
	padding: 40px;
}

/* Systém rozostupov sekcie by pridal 26px medzi stĺpce mriežky – tu
   rozostup rieši gap. */
.labenka-about__hero > * + * {
	margin-top: 0;
}

.labenka-about__nadpis {
	margin: 0;
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

/* Druhý riadok nadpisu v zelenej – kurzíva by pri tomto reze pôsobila
   staromódne, farba povie to isté potichšie. */
.labenka-about__nadpis em {
	font-style: normal;
	color: var(--labenka-accent);
}

.labenka-about__lead {
	margin: 22px 0 0 0;
	max-width: 56ch;
	font-size: 19px;
	line-height: 1.7;
	color: #4a4a4a;
}

.labenka-about__akcie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 28px;
}

/* .labenka-button sa inak centruje cez auto marginy – v heri a v pozvaní
   stojí v rade s iným odkazom, takže tu centrovanie prekáža. */
.labenka-about__akcie .labenka-button {
	margin-left: 0;
	margin-right: 0;
}

.labenka-about__art {
	margin: 0;
	background-color: #f4f7ef;
	border-radius: 24px;
	padding: 20px 20px 12px;
	justify-self: end;
	width: 100%;
	max-width: 420px;
}

.labenka-about__art-svg {
	display: block;
	width: 100%;
	height: auto;
}

.labenka-about__art figcaption {
	margin-top: 8px;
	text-align: center;
	color: var(--labenka-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Pás hlavných tém pod herom
   -------------------------------------------------------------------------- */

.labenka-about__pas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin: 24px;
	padding: 0;
	list-style: none;
	color: #4a4a4a;
	font-size: 15px;
}

.labenka-about__pas li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.labenka-about__pas li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--labenka-accent);
}

/* --------------------------------------------------------------------------
   Dvojstĺpcové sekcie (Náš príbeh, Kam smerujeme)
   -------------------------------------------------------------------------- */

.labenka-about__dvojstlpec {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	padding: 40px;
}

.labenka-about__dvojstlpec > * + * {
	margin-top: 0;
}

.labenka-about__dvojstlpec p {
	color: #4a4a4a;
}

.labenka-about__dvojstlpec h2 + p,
.labenka-about__dvojstlpec p + p,
.labenka-about__dvojstlpec h3 + p {
	margin-top: 16px;
}

.labenka-about__text p:first-child {
	margin-top: 0;
}

.labenka-about__tip {
	margin-top: 24px;
}

.labenka-about__tip p {
	color: var(--labenka-accent);
	font-style: italic;
	font-size: 17px;
}

/* --------------------------------------------------------------------------
   Hlavička sekcie: nadpis vľavo, vysvetlenie vpravo
   -------------------------------------------------------------------------- */

.labenka-about__hlava {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
}

.labenka-about__hlava-popis {
	max-width: 42ch;
	margin: 0;
	color: #4a4a4a;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Tri piliere poslania
   -------------------------------------------------------------------------- */

.labenka-about__piliere {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.labenka-about__pilier {
	background-color: #f4f7ef;
	border-radius: 8px;
	padding: 24px;
}

.labenka-about__cislo {
	margin: 0 0 20px 0;
	color: var(--labenka-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.labenka-about__pilier p:last-child {
	margin: 14px 0 0 0;
	color: #4a4a4a;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Dlaždice častí webu
   -------------------------------------------------------------------------- */

.labenka-about__dlazdice,
.labenka-about__pozvania {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* Dlaždica je odkaz, preto potrebuje zrušiť podčiarknutie a zdediť farbu
   textu – inak by ju prehliadač vykreslil ako modrý odkaz. */
.labenka-about__dlazdica {
	color: inherit;
	text-decoration: none;
}

.labenka-about__dlazdica:hover,
.labenka-about__dlazdica:focus-visible {
	background-color: #eaf0e0;
	text-decoration: none;
}

.labenka-about__dlazdica-nazov {
	display: block;
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

/* .labenka-card__sublabel počíta s blokovým prvkom; tu je to <span>
   vnútri odkazu, takže mu treba blokové správanie dodať. */
.labenka-about__dlazdica .labenka-card__sublabel,
.labenka-about__pozvania .labenka-card__sublabel {
	display: block;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Zelený panel s príkladmi prepojení
   -------------------------------------------------------------------------- */

.labenka-about__prepojenia {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 40px;
	align-items: center;
	background-color: var(--labenka-accent);
	border-radius: 16px;
	padding: 32px;
	color: #ffffff;
}

.labenka-about__prepojenia h3 {
	color: #ffffff;
	font-size: 24px;
}

.labenka-about__prepojenia p {
	margin: 14px 0 0 0;
	color: #eaf1dd;
	font-size: 15px;
}

.labenka-about__priklady {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.labenka-about__priklady li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 15px;
}

.labenka-about__priklady li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.labenka-about__priklady i {
	font-style: normal;
	color: #d7e4bb;
}

/* --------------------------------------------------------------------------
   Labenka deťom
   -------------------------------------------------------------------------- */

.labenka-about__deti {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: center;
	padding: 40px;
}

.labenka-about__deti > * + * {
	margin-top: 0;
}

.labenka-about__deti p {
	color: #4a4a4a;
}

.labenka-about__deti h2 + p,
.labenka-about__deti p + p {
	margin-top: 16px;
}

.labenka-about__deti .labenka-about__odkaz {
	margin-top: 22px;
}

/* Panel pre deti má sýtejší zelený podklad než karty, aby sa od nich
   odlíšil – je to obrázok sekcie, nie ďalšia karta v rade. */
.labenka-about__detsky-panel {
	background-color: #eef3e2;
	border-radius: 16px;
	padding: 32px;
}

.labenka-about__detsky-panel h3 {
	font-size: 26px;
}

.labenka-about__stitky {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
}

.labenka-about__stitky li {
	background-color: #ffffff;
	border-radius: 999px;
	padding: 7px 14px;
	color: var(--labenka-accent);
	font-size: 13px;
	font-weight: 600;
}

.labenka-about__detsky-panel p:last-child {
	margin-top: 20px;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Labenkovo (pripravovaná časť)
   -------------------------------------------------------------------------- */

.labenka-about__buducnost {
	background-color: #f4f7ef;
	border-radius: 16px;
	padding: 28px;
}

.labenka-about__odznak {
	display: inline-block;
	margin: 0 0 14px 0;
	background-color: #ffffff;
	border-radius: 999px;
	padding: 6px 14px;
	color: var(--labenka-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.labenka-about__buducnost h3 {
	font-size: 26px;
}

.labenka-about__buducnost p {
	margin-top: 14px;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Spolu s vami
   -------------------------------------------------------------------------- */

.labenka-about__spolu {
	text-align: center;
	padding: 40px;
}

.labenka-about__spolu .labenka-about__eyebrow {
	justify-content: center;
}

.labenka-about__spolu-uvod {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
	color: #4a4a4a;
}

.labenka-about__pozvania {
	text-align: left;
}

/* --------------------------------------------------------------------------
   Oficiálne údaje a záver
   -------------------------------------------------------------------------- */

.labenka-about__udaje {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding: 32px 40px;
}

.labenka-about__udaje > * + * {
	margin-top: 0;
}

.labenka-about__logo {
	display: block;
	width: auto;
	height: 44px;
	margin-bottom: 14px;
}

.labenka-about__udaje-nadpis {
	font-size: 20px;
	margin: 0 0 8px 0;
}

.labenka-about__udaje p {
	margin: 0;
	color: #666666;
	font-size: 14px;
}

.labenka-about__data {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 8px 16px;
	align-content: start;
	margin: 0;
	font-size: 15px;
}

.labenka-about__data dt {
	margin: 0;
	color: var(--labenka-accent);
	font-weight: 600;
}

.labenka-about__data dd {
	margin: 0;
}

.labenka-about__zaver {
	margin: 0 24px 24px 24px;
	text-align: center;
	color: #666666;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Tablet a mobil
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.labenka-about__piliere,
	.labenka-about__dlazdice,
	.labenka-about__pozvania {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.labenka-about__hero,
	.labenka-about__dvojstlpec,
	.labenka-about__deti,
	.labenka-about__prepojenia,
	.labenka-about__udaje {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.labenka-about__hero,
	.labenka-about__dvojstlpec,
	.labenka-about__deti,
	.labenka-about__spolu,
	.labenka-about__udaje {
		padding: 24px;
	}

	/* Na mobile ide ilustrácia pod text a na stred – vedľa seba by sa obe
	   zmestili len po zmenšení, ktoré by z nej urobilo ozdobu. */
	.labenka-about__art {
		justify-self: center;
		max-width: 360px;
	}

	.labenka-about__hlava {
		display: block;
	}

	.labenka-about__hlava-popis {
		margin-top: 16px;
	}

	.labenka-about__piliere,
	.labenka-about__dlazdice,
	.labenka-about__pozvania {
		grid-template-columns: 1fr;
	}

	.labenka-about__prepojenia,
	.labenka-about__detsky-panel {
		padding: 24px;
	}

	.labenka-about__pas {
		gap: 10px 24px;
		font-size: 14px;
	}
}

/* Kotvy z hero tlačidiel ("Spoznajte Labenku" → Svet Labenky). Hlavička
   na tejto stránke nie je lepkavá, takže stačí dych nad sekciou – 80px ako
   pri #chov-a-prostredie (kde kotvu prekrýva sticky navigácia profilu) by
   tu vyzeralo, že skok nedošiel až na miesto. */
.labenka-about section[id] {
	scroll-margin-top: 24px;
}

/* ==========================================================================
   Stránka "Kontakt" (page-kontakt.php + inc/kontakt.php)
   --------------------------------------------------------------------------
   Formulár a kontaktné údaje stoja vedľa seba: formulár je širší, lebo je
   to hlavná vec, kvôli ktorej sem človek prišiel. Samotné polia formulára
   si nesú vzhľad zo spoločných tried .labenka-prevadzka-form / .labenka-pole,
   rovnako ako ostatné tri formuláre na webe.
   ========================================================================== */

.labenka-kontakt {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 24px;
	align-items: start;
	margin: 24px;
}

/* Sekcie v mriežke si nesmú nechať vlastný 24px margin – inak by sa
   sčítal s medzerou mriežky a stĺpce by sa rozišli. */
.labenka-kontakt > .labenka-section {
	margin: 0;
}

.labenka-kontakt-uvod p {
	max-width: 70ch;
	color: #4a4a4a;
}

.labenka-kontakt-mriezka {
	display: grid;
	gap: 12px;
}

/* Údaje v karte sú pod sebou (popis, hodnota, doplnok), nie v riadku. */
.labenka-kontakt-udaje .labenka-card__value,
.labenka-kontakt-udaje .labenka-card__sublabel,
.labenka-kontakt-udaje .labenka-card__label {
	display: block;
}

.labenka-kontakt-tip {
	margin-top: 20px;
}

.labenka-kontakt-skratky {
	margin: 0;
	padding-left: 20px;
	font-size: 15px;
}

.labenka-kontakt-skratky li + li {
	margin-top: 8px;
}

.labenka-kontakt-skratky a {
	color: var(--labenka-accent);
	font-weight: 600;
}

.labenka-kontakt-skratky-pozn {
	margin: 12px 0 0 0;
	color: #666666;
	font-size: 14px;
}

/* Súhlas so spracovaním: zaškrtávacie pole a text vedľa seba, nie pod
   sebou – label by inak zalomil na šírku celého formulára. */
.labenka-pole--suhlas label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	line-height: 1.6;
}

.labenka-pole--suhlas input[type="checkbox"] {
	margin-top: 4px;
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.labenka-kontakt {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Obrázky v tele článku
   --------------------------------------------------------------------------
   Veľkosť obrázka v článku sa doteraz riadila rozmermi nahratej fotky:
   namerané šírky naprieč článkami boli od 599 do 2560 px, takže ten istý
   blok raz zaberal celý stĺpec a inokedy len jeho časť. Mirec 12. 10. 2026:
   "nahral som fotku a bola o poznanie väčšia" – a mal pravdu, nebol to
   dojem.

   Obrázok teraz vypĺňa miesto, kde stojí – celú šírku článku, alebo šírku
   stĺpca vo vzoroch "text vľavo, obrázok vpravo". Vzhľad už nezávisí od
   toho, akú fotku mal človek po ruke.

   Zarovnané obrázky (obtekané textom) sú vynechané: tam je menšia šírka
   zámerom. V článkoch zatiaľ žiadny taký nie je, pravidlo je do budúcnosti.
   -------------------------------------------------------------------------- */

.labenka-clanok-body figure.wp-block-image:not(.alignleft):not(.alignright) img {
	width: 100%;
	height: auto;
}

/* Poznámka s odkazom na Zásady ochrany osobných údajov pod súhlasom vo
   formulároch. Tichšia než samotný súhlas – je to doplnok, nie ďalšia
   podmienka, ktorú treba odsúhlasiť. */
.labenka-zasady-poznamka {
	display: block;
	margin-top: 6px;
	color: #666666;
	font-size: 13px;
	line-height: 1.5;
}

.labenka-zasady-poznamka a {
	color: var(--labenka-accent);
	font-weight: 600;
}

/* ==========================================================================
   Odber noviniek (inc/odber.php) – pruh v päte
   --------------------------------------------------------------------------
   Päta je tmavozelená, takže formulár nemôže použiť bežné svetlé štýly
   formulárov zo zvyšku webu – polia aj text musia byť čitateľné na tmavom.
   ========================================================================== */

/* Čiara ide cez celú šírku päty, obsah sa drží v tom istom kontajneri ako
   stĺpce nad ním (.labenka-footer__hore: 1200 px a 24 px po stranách) –
   inak sa text lepí na okraj okna. */
.labenka-odber {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	scroll-margin-top: 24px;
}

/*
 * Text vľavo, formulár vpravo. Pod sebou by pruh zaberal zbytočnú výšku a
 * pravá polovica päty by zostala prázdna – vedľa seba to vyzerá ako jeden
 * celok a formulár je hneď vedľa vety, ktorá hovorí, čo od neho čakať.
 */
.labenka-odber__vnutro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 48px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px 40px;
}

.labenka-odber__text {
	min-width: 0;
}

.labenka-odber__nadpis {
	margin: 0;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
}

.labenka-odber__uvod {
	max-width: 56ch;
	margin: 8px 0 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	line-height: 1.6;
}

.labenka-odber__hlaska {
	grid-column: 1 / -1;
	margin: 0;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 14px;
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.labenka-odber__hlaska--chyba {
	background-color: rgba(255, 180, 160, 0.18);
}

/* Medová pasca na robotov – pre človeka neviditeľná, ale nie cez
   display:none, ktoré časť robotov rozpozná. */
.labenka-odber__pasca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.labenka-odber__form {
	margin: 0;
	position: relative;
}

.labenka-odber__riadok {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Pole vyplní zvyšok stĺpca – s pevnou max-šírkou zostávala vpravo od
   tlačidla prázdna medzera a riadok pôsobil nedokončene. */
.labenka-odber__pole {
	flex: 1 1 220px;
	margin: 0;
}

.labenka-odber__pole input {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 8px;
	padding: 11px 14px;
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-size: 15px;
}

.labenka-odber__pole input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.labenka-odber__pole input:focus {
	outline: 2px solid #ffffff;
	outline-offset: 1px;
}

/* .labenka-button sa inak centruje cez auto marginy – tu stojí v rade
   vedľa poľa, takže centrovanie prekáža. */
.labenka-odber__tlacidlo {
	margin-left: 0;
	margin-right: 0;
	background-color: #ffffff;
	color: #06401c;
	font-weight: 700;
}

.labenka-odber__tlacidlo:hover {
	opacity: 0.9;
}

.labenka-odber__suhlas {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	line-height: 1.55;
}

.labenka-odber__suhlas input {
	margin-top: 3px;
	flex-shrink: 0;
}

.labenka-odber__suhlas a {
	color: #ffffff;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.labenka-odber__vnutro {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 28px 20px 32px;
	}

	/* Na dotyk je celá šírka pohodlnejší cieľ než tlačidlo v rohu. */
	.labenka-odber__tlacidlo {
		width: 100%;
	}
}

/* Odznak "+2" pri článku s viacerými témami. Nesmie sa zmršťovať – je
   krátky a jeho orezanie by nedávalo zmysel. Užšie odsadenie a žiadne
   preloženie písmen: je to číslo, nie slovo, a tých pár ušetrených pixelov
   dovolí vedľa neho dopísať celý názov typu článku. */
.labenka-odznak--viac {
	flex: 0 0 auto;
	padding-left: 6px;
	padding-right: 6px;
	letter-spacing: 0;
	cursor: default;
}

/*
 * Na mobile sa odznaky radšej zalomia, než orezávajú. Dôvod, pre ktorý sa
 * na desktope orezávajú – aby riadok držal výšku a nadpisy kariet v mriežke
 * začínali rovnako – tu neplatí: karty sú pod sebou v jednom stĺpci, takže
 * druhý riadok odznakov nemá čo rozhodiť.
 */
@media (max-width: 767px) {
	.labenka-odznak {
		overflow: visible;
		text-overflow: clip;
	}

	.labenka-odznak--typ,
	.labenka-odznak--tema {
		flex: 0 0 auto;
	}

	.labenka-odznaky {
		min-height: 0;
	}
}

/* ==========================================================================
   Článok: viac prepojených zvierat (inc/profil-clanok.php)
   --------------------------------------------------------------------------
   Pri jednom zvierati zostáva veľký banner. Pri viacerých by sa opakoval aj
   s vetou "Tento článok sa týka:" a tlačidlom – pri piatich to bolo 2001 px
   na mobile, teda dve a pol obrazovky. Mriežka povie to isté na tretine
   miesta a dlaždica je celá odkaz.
   ========================================================================== */

.labenka-clanok-zvierata__nadpis {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #000000;
}

.labenka-clanok-zvierata__uvod {
	margin: 6px 0 0 0;
	color: #666666;
	font-size: 14px;
}

.labenka-clanok-zvierata {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

.labenka-clanok-zvierata__dlazdica {
	display: block;
	background-color: #f4f7ef;
	border-radius: 8px;
	padding: 10px;
	color: inherit;
	text-decoration: none;
}

.labenka-clanok-zvierata__dlazdica:hover,
.labenka-clanok-zvierata__dlazdica:focus-visible {
	background-color: #eaf0e0;
	text-decoration: none;
}

.labenka-clanok-zvierata__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

/* Zviera bez fotky drží rovnaké miesto ako ostatné, aby mená v riadku
   začínali v jednej výške. */
.labenka-clanok-zvierata__foto--prazdna {
	background-color: #e4ecd2;
}

.labenka-clanok-zvierata__meno {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
}

@media (max-width: 480px) {
	.labenka-clanok-zvierata {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.labenka-clanok-zvierata__meno {
		font-size: 14px;
	}
}

/*
 * Na mobile ide obrázok VŽDY pod text.
 *
 * Vzory článku striedajú "text vľavo, obrázok vpravo" a naopak – na
 * desktope to dáva rytmus, ale na mobile sa stĺpce zalomia pod seba a
 * výsledok závisí od toho, ktorý stĺpec bol prvý. Raz teda text uvádza
 * obrázok, inokedy obrázok spadne nad text a čitateľ ho vidí skôr, než sa
 * dozvie, čoho sa týka (Mirec 15. 10. 2026: v článku o pavúkoch to takto
 * skákalo v piatich blokoch).
 *
 * Stĺpec s obrázkom preto dostane na mobile order: 1 a ide na koniec –
 * bez ohľadu na to, ako je blok poskladaný v editore. Mirec tak môže
 * striedať strany, ako chce, a na mobile to vyzerá vždy rovnako.
 *
 * Prehliadač bez podpory :has() pravidlo preskočí a správa sa ako doteraz.
 */
@media (max-width: 767px) {
	.labenka-clanok-body .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:has(figure.wp-block-image) {
		order: 1;
	}
}