/*
Theme Name: Strangest Animals
Description: Ľahká téma na mieru pre encyklopédiu najzvláštnejších zvierat. Mobile first, bez page buildera.
Version: 1.0.0
Text Domain: strangest-animals
*/

@font-face {
	font-family: "Bebas Neue";
	src: url("assets/fonts/bebas-neue.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--sa-green: #23d846;
	--sa-purple: #802ad6;
	--sa-yellow: #ffd60a;
	--sa-black: #000;
	--sa-white: #fff;
	--sa-gray: #ebebeb;
	--sa-gray-2: #e6e6e6;
	--sa-line: #d9d9d9;
	--sa-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
	--sa-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sa-gutter: 25px;
	--sa-header: 80px;
}

/* Označený text: stredne sivé pozadie s čiernym textom, čitateľné na bielych, sivých, čiernych aj fialových sekciách. */
::selection {
	color: var(--sa-black);
	background: #a6a6a6;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: var(--sa-header);
}

body {
	margin: 0;
	font-family: var(--sa-text);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--sa-black);
	background: var(--sa-white);
	/*
	 * Poistka proti posúvaniu celej stránky do strany (Safari na iPhone rozširoval stránku o biely pás).
	 * Prenesie sa na okno prehliadača, takže body sa nestane posúvanou plochou a prilepené prvky fungujú.
	 * „clip“ pre nové prehliadače, „hidden“ pre staršie Safari, ktoré clip nepozná.
	 */
	overflow-x: hidden;
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--sa-display);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

a {
	color: inherit;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--sa-purple);
	outline-offset: 2px;
}

.sa-icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex: none;
}

.sa-skip {
	position: absolute;
	left: -9999px;
}

.sa-skip:focus {
	left: 10px;
	top: 10px;
	z-index: 100;
	padding: 10px 14px;
	background: var(--sa-white);
}

/* ---------- Hlavička ---------- */

.sa-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--sa-header);
	padding: 0 var(--sa-gutter);
	background: var(--sa-black);
	color: var(--sa-white);
	transition: background-color 0.2s;
}

/* Na detaile zvieraťa leží hlavička priehľadne na fotke, kým návštevník nezačne scrollovať. */
.sa-has-hero .sa-header {
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
}

/* Prihlásenému používateľovi by hlavičku inak prekryla administračná lišta WordPressu. */
.admin-bar .sa-header {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .sa-header {
		top: 32px;
	}
}

.sa-has-hero .sa-header.is-scrolled,
.sa-has-hero .sa-header.is-open {
	background: var(--sa-black);
}

.sa-logo {
	display: inline-flex;
	flex-direction: column;
	font-family: var(--sa-display);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
}

.sa-logo__top {
	padding: 3px 5px 0;
	font-size: 30px;
	color: var(--sa-black);
	background: var(--sa-green);
}

.sa-logo__bottom {
	padding: 3px 5px 1px;
	font-size: 15px;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	color: var(--sa-white);
	background: var(--sa-black);
}

.custom-logo {
	max-height: 60px;
	width: auto;
}

.sa-header__toggle {
	display: grid;
	gap: 6px;
	width: 44px;
	height: 44px;
	padding: 11px;
	align-content: center;
}

.sa-header__toggle span {
	height: 2px;
	background: currentColor;
}

.sa-header.is-open .sa-header__toggle {
	color: var(--sa-green);
}

.sa-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 10px var(--sa-gutter) 25px;
	background: var(--sa-black);
}

.sa-header.is-open .sa-nav {
	display: block;
}

.sa-nav__link {
	display: block;
	padding: 10px 0;
	font-family: var(--sa-display);
	font-size: 28px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.sa-nav__link:hover {
	color: var(--sa-green);
}

/* ---------- Štítky ---------- */

.sa-label {
	margin: 0;
	padding: 10px;
	font-family: var(--sa-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sa-white);
}

.sa-label--purple {
	--sa-label-bg: var(--sa-purple);
}

.sa-label--black {
	--sa-label-bg: var(--sa-black);
}

.sa-label {
	background: var(--sa-label-bg);
}

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

.sa-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 100svh;
	/* Spodný pás prekrytia zaberá 16 % výšky hero; štítky musia skončiť nad ním. */
	padding: calc(var(--sa-header) + 20px) var(--sa-gutter) calc(16svh + 35px);
	background: #0b1a26;
	color: var(--sa-white);
}

.sa-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Na mobile je prekrytie vysoké ako hero a posunuté tak, aby šípka (18,75 % jeho šírky) bola v strede. */
.sa-hero__overlay {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: auto;
	aspect-ratio: 2560 / 1440;
	transform: translateX(-18.75%);
	pointer-events: none;
}

/* Zakryje vlasovú medzeru, ktorá pri zaokrúhľovaní vzniká medzi prekrytím a ďalšou sekciou. */
.sa-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--sa-gray);
}

.sa-hero__content {
	position: relative;
	width: 100%;
	text-align: center;
}

.sa-hero__title {
	margin-bottom: 20px;
	font-size: calc(clamp(56px, 20vw, 75px) * var(--sa-title-scale, 1));
	line-height: 1.1;
	overflow-wrap: break-word;
}

/* ---------- Úvod a porovnanie veľkosti ---------- */

.sa-intro__text {
	padding: 40px var(--sa-gutter);
	background: var(--sa-gray);
}

.sa-intro__size {
	padding: 40px var(--sa-gutter);
}

.sa-prose {
	font-size: 18px;
	line-height: 1.6;
}

.sa-prose > :first-child {
	margin-top: 0;
}

.sa-prose > :last-child {
	margin-bottom: 0;
}

.sa-prose a {
	color: var(--sa-purple);
}

.sa-intro__text.sa-prose {
	font-size: 20px;
}

/* ---------- Fakty: na mobile karusel po 5 položkách ---------- */

.sa-facts {
	padding: 30px 0 40px;
}

.sa-facts__list {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sa-facts__list::-webkit-scrollbar {
	display: none;
}

.sa-facts__item {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0 var(--sa-gutter);
	padding: 16px 0;
	border-bottom: 1px solid var(--sa-line);
	scroll-snap-align: start;
	scroll-margin-left: var(--sa-gutter);
}

.sa-facts__item .sa-icon {
	font-size: 26px;
	color: var(--sa-green);
}

.sa-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.sa-dots:empty {
	display: none;
}

.sa-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sa-line);
}

.sa-dots .is-active {
	background: var(--sa-green);
}

.sa-facts__dots {
	margin-top: 22px;
}

/* ---------- Highlighty: slider cez celú šírku ---------- */

.sa-highlights {
	position: relative;
}

.sa-highlights__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sa-highlights__track::-webkit-scrollbar {
	display: none;
}

.sa-highlights__slide {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	min-height: min(690px, 85svh);
	padding: 40px 55px;
	overflow: hidden;
	text-align: center;
	color: var(--sa-white);
	background: #0b1a26;
	scroll-snap-align: start;
}

.sa-highlights__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Polopriehľadné čierne stmavenie fotky, aby bol text čitateľný na akomkoľvek obrázku. */
.sa-highlights__slide:has(.sa-highlights__img)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.sa-highlights__slide .sa-label {
	position: relative;
	z-index: 1;
	padding-inline: 16px;
}

.sa-highlights__text {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--sa-display);
	font-size: 34px;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}

.sa-highlights__nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5px;
	color: var(--sa-white);
	pointer-events: none;
}

.sa-highlights__nav[hidden] {
	display: none;
}

.sa-highlights__nav button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 30px;
	pointer-events: auto;
}

.sa-highlights .sa-dots {
	padding: 14px 0;
}

/* Šípky sa centrujú na fotku, nie na pás s bodkami pod ňou. */
.sa-highlights:has(.sa-dots:not(:empty)) .sa-highlights__nav {
	bottom: 38px;
}

/* ---------- Explore: tagy ---------- */

.sa-explore {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 25px;
	min-height: 400px;
	padding: 50px var(--sa-gutter);
	background: var(--sa-black);
}

.sa-explore .sa-label {
	padding-inline: 16px;
}

.sa-explore__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.sa-tag {
	display: block;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: var(--sa-black);
	background: var(--sa-green);
	transition: background-color 0.15s, color 0.15s;
}

.sa-tag:hover {
	color: var(--sa-white);
	background: var(--sa-purple);
}

/* ---------- Texty: rozbaľovacie bloky ---------- */

.sa-story {
	position: relative;
	color: var(--sa-white);
	background: var(--sa-black);
}

.sa-story__media {
	position: absolute;
	inset: 0;
}

.sa-story__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.sa-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-story__texts {
	position: relative;
	z-index: 1;
	padding: 60px var(--sa-gutter);
}

.sa-acc {
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.sa-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 30px 0;
	list-style: none;
	cursor: pointer;
}

/* Pri prejdení myšou sa nadpis aj plus zafarbia na fialovo (plus má farbu textu).
   Len od tabletu s myšou: na mobile je akordeón na tmavej fotke a ťuknutie by farbu „prilepilo“. */
.sa-acc__head {
	transition: color 0.15s;
}

@media (min-width: 768px) and (hover: hover) {
	.sa-acc__head:hover {
		color: var(--sa-purple);
	}
}

@media (min-width: 768px) {
	.sa-acc__head:focus-visible {
		color: var(--sa-purple);
	}
}

.sa-acc__head::-webkit-details-marker {
	display: none;
}

.sa-acc__title {
	font-size: 30px;
}

.sa-acc__icon {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}

.sa-acc__icon::before,
.sa-acc__icon::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	width: 18px;
	height: 4px;
	background: currentColor;
	transition: transform 0.2s;
}

.sa-acc__icon::after {
	transform: rotate(90deg);
}

.sa-acc[open] .sa-acc__icon::after {
	transform: rotate(0deg);
}

.sa-acc__body {
	padding-bottom: 30px;
}

.sa-story .sa-prose a {
	color: var(--sa-green);
}

/* ---------- Karusely ---------- */

.sa-carousel {
	padding: 30px 0 40px;
}

.sa-carousel--green {
	color: var(--sa-white);
	background: var(--sa-green);
}

.sa-carousel--gray {
	background: var(--sa-gray-2);
}

/* Fotky a videá: tmavý podklad ako v kine, zelené sú len šípky. */
.sa-carousel--dark {
	color: var(--sa-white);
	background: var(--sa-black);
}

.sa-carousel--dark .sa-carousel__nav button {
	color: var(--sa-green);
}

.sa-carousel--dark .sa-carousel__nav button:hover,
.sa-carousel--dark .sa-carousel__nav button:focus-visible {
	color: var(--sa-white);
}

.sa-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 var(--sa-gutter) 20px;
}

.sa-carousel__title {
	font-size: 34px;
}

.sa-carousel__nav {
	display: flex;
	gap: 12px;
	flex: none;
}

.sa-carousel__nav[hidden] {
	display: none;
}

.sa-carousel__nav button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 30px;
}

.sa-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 88%;
	gap: 10px;
	padding: 0 15px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 15px;
	scrollbar-width: none;
}

.sa-carousel__track::-webkit-scrollbar {
	display: none;
}

.sa-carousel__item {
	scroll-snap-align: start;
}

.sa-media {
	padding: 15px;
	background: var(--sa-black);
}

.sa-media img,
.sa-video,
.sa-video__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 0;
}

.sa-video {
	position: relative;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	background: var(--sa-black);
}

/* Upozornenie, že prehrávač sa načíta z YouTube (GDPR). */
.sa-video__note {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 6px 10px;
	font-family: var(--sa-text);
	font-size: 12px;
	text-align: left;
	color: var(--sa-white);
	background: rgba(0, 0, 0, 0.6);
}

.sa-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	display: grid;
	place-items: center;
	width: 68px;
	height: 48px;
	font-size: 30px;
	color: var(--sa-white);
	background: #f00;
	border-radius: 12px;
}

/* Karty sú na výšku, lebo fotky zvierat do náhľadov sú tiež na výšku – ukáže sa z nich čo najviac. */
.sa-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	padding: 25px;
	overflow: hidden;
	text-decoration: none;
	color: var(--sa-white);
	background: #222;
}

.sa-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.sa-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15));
}

.sa-card:hover .sa-card__img {
	transform: scale(1.05);
}

.sa-card__title {
	position: relative;
	z-index: 1;
	font-family: var(--sa-display);
	font-size: 34px;
	line-height: 1;
	text-transform: uppercase;
}

/* ---------- Bežný článok, výpisy, pätička ---------- */

.sa-article,
.sa-archive {
	max-width: 1265px;
	margin-inline: auto;
	padding: 40px var(--sa-gutter) 60px;
}

.sa-article {
	max-width: 800px;
}

.sa-article__title,
.sa-archive__title {
	margin-bottom: 25px;
	font-size: clamp(44px, 12vw, 80px);
}

.sa-article__img {
	margin-bottom: 25px;
}

.sa-archive__grid {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Pätička: fialový pás, veľký slogan, výzva na notifikácie a spodný riadok s copyrightom a odkazmi. */
.sa-footer {
	padding: 56px var(--sa-gutter) 24px;
	font-size: 14px;
	color: var(--sa-white);
	background: var(--sa-purple);
}

.sa-footer p {
	margin: 0;
}

.sa-footer__top {
	display: grid;
	gap: 40px;
	align-items: center;
}

.sa-footer__claim {
	font-family: var(--sa-display);
	font-size: clamp(60px, 18vw, 110px);
	line-height: 0.9;
	text-transform: uppercase;
}

.sa-footer__heart {
	display: inline-block;
	width: 0.82em;
	height: 0.82em;
	margin: 0 0.04em;
	vertical-align: -0.06em;
	fill: currentColor;
	transform-origin: 50% 60%;
}

/*
 * Keď pätička vyjde na obrazovku, srdce 4× zabúcha a stíchne (trieda is-beating z assets/main.js).
 * Pri prejdení myšou bije, kým na ňom myš je. Ľuďom s vypnutými animáciami v systéme sa nehýbe.
 */
@media (prefers-reduced-motion: no-preference) {
	.sa-footer__claim.is-beating .sa-footer__heart {
		animation: sa-heartbeat 0.6s ease-in-out 4;
	}

	.sa-footer__claim:hover .sa-footer__heart {
		animation: sa-heartbeat 0.6s ease-in-out infinite;
	}
}

@keyframes sa-heartbeat {
	0%, 40%, 100% { transform: scale(1); }
	15% { transform: scale(1.18); }
	28% { transform: scale(1.06); }
}

.sa-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.sa-footer__copy {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.sa-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-footer__menu a {
	font-weight: 700;
	color: var(--sa-white);
	text-decoration: none;
	text-underline-offset: 4px;
}

.sa-footer__menu a:hover,
.sa-footer__menu a:focus-visible,
.sa-footer__menu .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
	.sa-footer {
		padding: 80px 60px 28px;
	}

	.sa-footer__top {
		grid-template-columns: 1fr minmax(300px, 400px);
		gap: 60px;
	}

	.sa-footer__claim {
		font-size: clamp(72px, 7vw, 160px);
	}

	.sa-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 72px;
	}
}

/* ---------- Tablet a desktop ---------- */

@media (min-width: 768px) {
	:root {
		--sa-gutter: 50px;
		/* Výška spodného pásu prekrytia v hero: 230/2560 šírky alebo 230/1440 výšky, podľa toho, čo je viac. */
		--sa-hero-band: max(8.984vw, 15.97svh);
	}

	.sa-header {
		padding: 0 60px;
	}

	.sa-logo__top {
		font-size: 34px;
	}

	.sa-logo__bottom {
		font-size: 17px;
	}

	.sa-label {
		font-size: 40px;
		line-height: 0.9;
	}

	/*
	 * Texty v hero rastú so šírkou okna, aby na každom monitore zaberali zhruba 40 % šírky fotky.
	 * --sa-hero-u je veľkosť hlavného nadpisu (130 px pri šírke 1280 px, ako v návrhu); ostatné rozmery
	 * sú jej násobky. Strop podľa výšky okna bráni tomu, aby text na širokom nízkom okne pretiekol.
	 */
	.sa-hero {
		--sa-hero-u: max(80px, min(10.2vw, 18svh));
		/*
		 * Blok textov je v strede fotky nad spodným pásom prekrytia: spodný odstup je o výšku pásu
		 * väčší než horný.
		 */
		--sa-hero-pad: 110px;
		align-items: center;
		padding: var(--sa-hero-pad) var(--sa-gutter) calc(var(--sa-hero-pad) + var(--sa-hero-band));
	}

	/* Od tabletu sa prekrytie správa ako pozadie „cover“ zarovnané dole na stred, rovnako ako v návrhu. */
	.sa-hero__overlay {
		left: 0;
		width: 100%;
		aspect-ratio: auto;
		transform: none;
	}

	.sa-hero::after {
		background: linear-gradient(to right, var(--sa-gray) 50%, var(--sa-white) 50%);
	}

	/* Blok je široký ako hlavný nadpis (najviac 4,15 a najmenej 2,4 násobku jeho veľkosti). */
	.sa-hero__content {
		width: fit-content;
		min-width: calc(var(--sa-hero-u) * 2.4);
		max-width: calc(var(--sa-hero-u) * 4.15);
		padding: 0 10px;
		text-align: left;
	}

	.sa-hero__title {
		margin-bottom: calc(var(--sa-hero-u) * 0.154);
		font-size: calc(var(--sa-hero-u) * var(--sa-title-scale, 1));
		line-height: 0.9;
	}

	/* Štítky šírku bloku neurčujú, len ju preberajú – zalomia sa až vtedy, keď presiahnu šírku nadpisu. */
	.sa-hero__labels {
		width: 0;
		min-width: 100%;
	}

	/* Podfarbenie nesie text, nie odsek, takže pri zalomení má každý riadok vlastný pás. */
	.sa-hero .sa-label {
		padding: 0;
		font-size: calc(var(--sa-hero-u) * 0.308);
		line-height: 1.4;
		background: none;
	}

	.sa-hero .sa-label span {
		padding: 0.06em 0.25em;
		background: var(--sa-label-bg);
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	.sa-intro {
		display: grid;
		grid-template-columns: 1fr 1fr;
		min-height: 400px;
	}

	.sa-intro--single {
		grid-template-columns: 1fr;
	}

	/*
	 * Sivý a biely pás z hero opticky patrí k tejto sekcii. Spodný odstup je preto o jeho výšku
	 * väčší, aby text aj porovnanie veľkosti sedeli v strede celej farebnej plochy.
	 */
	.sa-intro__text,
	.sa-intro__size {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 50px 50px calc(50px + var(--sa-hero-band));
	}

	.sa-facts {
		padding: 70px var(--sa-gutter);
	}

	.sa-facts__list {
		grid-template-rows: repeat(var(--sa-rows, 10), auto);
		grid-auto-columns: 1fr;
		column-gap: 100px;
		overflow: visible;
	}

	.sa-facts__item {
		margin: 0;
		padding: 13px 0;
	}

	.sa-facts__dots {
		display: none;
	}

	.sa-highlights__slide {
		min-height: 680px;
	}

	.sa-highlights__text {
		font-size: clamp(60px, 10.2vw, 130px);
		line-height: 0.9;
	}

	.sa-highlights__nav {
		padding: 0 10px;
	}

	.sa-story {
		display: grid;
		grid-template-columns: 3fr 2fr;
		min-height: 680px;
		color: var(--sa-black);
		background: var(--sa-gray);
	}

	.sa-story__media {
		position: relative;
		inset: auto;
	}

	.sa-story__media::after {
		content: none;
	}

	.sa-story__media img {
		position: absolute;
		inset: 0;
	}

	.sa-story__texts {
		padding: 50px;
	}

	.sa-acc {
		border-color: #999;
	}

	.sa-story .sa-prose a {
		color: var(--sa-purple);
	}

	.sa-carousel {
		padding: 55px 0 40px;
	}

	.sa-carousel__head {
		padding: 0 30px 25px;
	}

	.sa-carousel__title {
		font-size: 40px;
	}

	.sa-carousel__track {
		grid-auto-columns: calc((100% - 20px) / 3);
		padding: 0 5px;
		scroll-padding-inline: 5px;
	}

	.sa-media {
		padding: 25px;
	}

	.sa-card__title {
		font-size: 45px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Megamenu ---------- */

/* Mobil: položky menu sa rozbaľujú pod sebou, panel sa dá scrollovať. */
.sa-nav {
	max-height: calc(100svh - var(--sa-header));
	overflow-y: auto;
}

.sa-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sa-nav__more {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 20px;
	color: var(--sa-green);
}

.sa-nav__more .sa-icon {
	transform: rotate(90deg);
	transition: transform 0.2s;
}

.sa-nav__item.is-open .sa-nav__more .sa-icon {
	transform: rotate(-90deg);
}

.sa-mega {
	display: none;
	width: 100%;
	padding: 5px 0 25px;
}

.sa-nav__item.is-open > .sa-mega {
	display: block;
}

.sa-mega__inner {
	display: grid;
	gap: 28px;
}

.sa-mega__heading {
	margin-bottom: 12px;
	font-size: 20px;
	color: var(--sa-green);
}

.sa-mega__subs ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
}

.sa-mega__subs li a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sa-mega__subs li a span {
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
}

.sa-mega__subs li a:hover {
	color: var(--sa-green);
}

.sa-mega__all {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--sa-green);
}

.sa-mega__all:hover {
	text-decoration: underline;
}

.sa-mega__cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 62%;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sa-mega__cards::-webkit-scrollbar {
	display: none;
}

.sa-mega__cards li {
	scroll-snap-align: start;
}

/* Tablet: karty o 40 % menšie, inak by jedna zabrala celú výšku obrazovky. */
@media (min-width: 768px) and (max-width: 1099px) {
	.sa-mega__cards {
		grid-auto-columns: 37%;
	}
}

.sa-mega .sa-card {
	padding: 14px;
}

.sa-mega .sa-card__title {
	font-size: 22px;
}

.sa-mega__tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sa-mega .sa-tag {
	padding: 9px 12px;
	font-size: 13px;
}

.sa-mega__random {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 14px 8px;
	font-family: var(--sa-display);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--sa-white);
	background: var(--sa-purple);
	transition: background-color 0.15s, color 0.15s;
}

.sa-mega__random:hover {
	color: var(--sa-black);
	background: var(--sa-green);
}

/*
 * Desktop (od 1100 px): menu v riadku, panel cez celú šírku pod hlavičkou, otvára sa prejdením myšou,
 * klávesnicou aj šípkou pri položke. Užší tablet (aj na výšku) má hamburger menu ako mobil.
 */
@media (min-width: 1100px) {
	.sa-header__toggle {
		display: none;
	}

	.sa-nav {
		display: block;
		position: static;
		padding: 0;
		background: none;
		max-height: none;
		overflow: visible;
		margin-left: auto;
	}

	.sa-nav__link {
		padding: 0;
		font-size: 26px;
	}

	.sa-header__search {
		order: 0;
		margin-left: 26px;
	}

	.sa-nav__list {
		display: flex;
		gap: 0;
		height: var(--sa-header);
	}

	/* Položky sú vysoké ako hlavička, aby myš cestou z odkazu do panela neprešla prázdnym miestom. */
	.sa-nav__item {
		flex-wrap: nowrap;
		gap: 2px;
		height: 100%;
		padding-left: 32px;
		border: 0;
	}

	.sa-nav__more {
		width: 18px;
		font-size: 13px;
		color: inherit;
	}

	.sa-mega {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		padding: 40px 60px 45px;
		background: var(--sa-black);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: 0 30px 40px rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
	}

	.sa-nav__item.has-mega:hover > .sa-mega,
	.sa-nav__item.has-mega:focus-within > .sa-mega,
	.sa-nav__item.is-open > .sa-mega {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0.08s, 0.08s, 0.08s;
	}

	.sa-nav__item.has-mega:hover > .sa-nav__link,
	.sa-nav__item.is-open > .sa-nav__link {
		color: var(--sa-green);
	}

	/* Priehľadná hlavička na detaile zvieraťa stmavne, keď je panel otvorený. */
	.sa-has-hero .sa-header:has(.has-mega:hover),
	.sa-has-hero .sa-header:has(.has-mega:focus-within),
	.sa-has-hero .sa-header:has(.sa-nav__item.is-open) {
		background: var(--sa-black);
	}

	.sa-mega__inner {
		grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr) minmax(200px, 1fr);
		gap: 50px;
		max-width: 1500px;
		margin-inline: auto;
	}

	.sa-mega__subs ul {
		grid-template-columns: 1fr;
	}

	.sa-mega__cards {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
		overflow: visible;
	}

	.sa-mega .sa-card {
		padding: 18px;
	}

	.sa-mega .sa-card__title {
		font-size: 28px;
	}
}

/* ---------- Výpisy kategórií a hubov ---------- */

.sa-archive__intro {
	max-width: 800px;
	margin-bottom: 30px;
}

.sa-archive__grid--terms {
	margin-bottom: 40px;
}

.sa-card__title small {
	font-family: var(--sa-text);
	font-size: 14px;
	font-weight: 700;
	vertical-align: middle;
	padding: 2px 7px;
	margin-left: 6px;
	color: var(--sa-black);
	background: var(--sa-green);
}

.sa-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 30px;
	font-weight: 700;
}

.sa-archive .page-numbers {
	padding: 8px 14px;
	text-decoration: none;
	background: var(--sa-gray);
}

.sa-archive .page-numbers.current {
	color: var(--sa-white);
	background: var(--sa-black);
}

/* ---------- Vyhľadávanie ---------- */

.sa-header__search {
	order: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	font-size: 24px;
}

.sa-header__search:hover {
	color: var(--sa-green);
}

.sa-header__toggle {
	order: 3;
}

/* Kým je okno otvorené, stránka pod ním sa nescrolluje. */
html:has(.sa-search[open]) {
	overflow: hidden;
}

.sa-search {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--sa-white);
	background: rgba(0, 0, 0, 0.96);
	overflow-y: auto;
}

.sa-search::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.sa-search__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px var(--sa-gutter) 60px;
}

.sa-search__form {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 3px solid var(--sa-green);
	background: #000;
}

.sa-search__form > .sa-icon {
	font-size: 28px;
	color: var(--sa-green);
}

.sa-search__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family: var(--sa-display);
	font-size: 34px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sa-white);
	background: none;
	appearance: none;
}

.sa-search__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.sa-search__input::-webkit-search-cancel-button {
	display: none;
}

.sa-search__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	font-size: 24px;
}

.sa-search__close:hover {
	color: var(--sa-green);
}

.sa-search__heading {
	margin: 28px 0 12px;
	font-size: 20px;
	color: var(--sa-green);
}

.sa-search__note {
	margin: 28px 0 0;
	color: rgba(255, 255, 255, 0.7);
}

.sa-search__list {
	display: grid;
	gap: 4px;
}

.sa-search__list:has(.sa-tag) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

a.sa-search__item:not(.sa-tag) {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	text-decoration: none;
}

a.sa-search__item:not(.sa-tag):hover,
a.sa-search__item:not(.sa-tag):focus-visible {
	background: rgba(255, 255, 255, 0.12);
	outline: 0;
}

.sa-search__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: cover;
	background: #222;
}

.sa-search__text {
	display: grid;
	min-width: 0;
}

.sa-search__text strong {
	font-family: var(--sa-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.sa-search__text small {
	overflow: hidden;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 768px) {
	.sa-search__inner {
		padding-top: 10vh;
	}

	.sa-search__input {
		font-size: 60px;
	}

	.sa-search__form > .sa-icon {
		font-size: 40px;
	}

	.sa-search__list:not(:has(.sa-tag)) {
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
	}
}

/* ---------- Úvodná stránka ---------- */

.sa-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sa-btn {
	display: inline-block;
	padding: 14px 20px 11px;
	font-family: var(--sa-display);
	font-size: 24px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--sa-white);
	background: var(--sa-purple);
	transition: background-color 0.15s, color 0.15s;
}

.sa-btn:hover {
	color: var(--sa-black);
	background: var(--sa-white);
}

.sa-btn--green {
	color: var(--sa-black);
	background: var(--sa-green);
}

.sa-btn--black {
	background: var(--sa-black);
}

/* Zviera dňa: hero bez spodného pásu, so stmavením pod textom. */
.sa-home-hero {
	padding-bottom: 60px;
}

.sa-home-hero::after {
	inset: 0;
	height: auto;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 60%);
}

.sa-home-hero .sa-hero__content {
	z-index: 1;
}

.sa-home-hero .sa-hero__title {
	margin: 12px 0;
}

.sa-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 24px 0 0;
}

/* Sekcie kategórií: fotka cez celú obrazovku, text v tmavom pruhu na jednej strane. */
.sa-home-section {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100svh;
	padding: 90px var(--sa-gutter) 70px;
	overflow: hidden;
	color: var(--sa-white);
	background: #0b1a26;
}

.sa-home-section__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-home-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 35%, rgba(0, 0, 0, 0.15) 85%);
}

.sa-home-section__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.sa-home-section .sa-label {
	display: inline-block;
	padding-inline: 16px;
}

.sa-home-section__title {
	margin: 14px 0;
	font-size: clamp(48px, 14vw, 64px);
	line-height: 0.95;
	text-wrap: balance;
}

.sa-home-section__text {
	max-width: 34em;
	margin: 0 0 24px;
}

.sa-home-section__cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 62%;
	gap: 10px;
	margin: 0 calc(var(--sa-gutter) * -1) 22px;
	padding: 0 var(--sa-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sa-gutter);
	scrollbar-width: none;
}

.sa-home-section__cards::-webkit-scrollbar {
	display: none;
}

.sa-home-section__cards li {
	scroll-snap-align: start;
}

.sa-home-section .sa-card {
	padding: 14px;
	outline: 2px solid rgba(255, 255, 255, 0.25);
	outline-offset: -2px;
}

.sa-home-section .sa-card__title {
	font-size: 24px;
}

.sa-home-section__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.sa-home-section__all {
	display: inline-block;
	padding: 6px 4px;
	font-weight: 700;
	text-decoration: none;
	color: var(--sa-green);
}

.sa-home-section__all:hover {
	text-decoration: underline;
}

/* Pásik s popiskom „Pictured: …“ a (na mobile) tlačidlom s okom. */
.sa-home-section__photo {
	position: absolute;
	top: 16px;
	right: var(--sa-gutter);
	left: var(--sa-gutter);
	z-index: 3;
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

.sa-home-section__credit {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: var(--sa-white);
	background: rgba(0, 0, 0, 0.55);
}

.sa-home-section__credit:hover {
	background: var(--sa-purple);
}

.sa-home-cta {
	padding: 80px var(--sa-gutter);
	text-align: center;
	background: var(--sa-green);
}

.sa-home-cta__title {
	font-size: clamp(56px, 12vw, 130px);
	line-height: 0.9;
}

.sa-home-cta__text {
	margin: 16px 0 26px;
	font-size: 20px;
}

@media (min-width: 768px) {
	.sa-home-hero {
		padding-bottom: var(--sa-hero-pad);
	}

	.sa-home-hero::after {
		background: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 65%);
	}

	.sa-home-hero__actions {
		justify-content: flex-start;
	}

	.sa-home-section {
		align-items: center;
		padding: 100px 60px 70px;
	}

	.sa-home-section::before {
		background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 75%);
	}

	.sa-home-section--flip::before {
		background: linear-gradient(to left, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 75%);
	}

	.sa-home-section__inner {
		width: min(46%, 680px);
	}

	.sa-home-section--flip .sa-home-section__inner {
		margin-left: auto;
	}

	.sa-home-section__title {
		font-size: clamp(64px, 7.2vw, 130px);
		line-height: 0.9;
	}

	.sa-home-section__text {
		font-size: 20px;
	}

	.sa-home-section__cards {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		/* Šírka kariet sa riadi výškou okna, aby sa celá sekcia zmestila na jednu obrazovku. */
		max-width: 62svh;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.sa-home-section__photo {
		top: auto;
		bottom: 30px;
		right: 60px;
		left: auto;
	}

	.sa-home-section--flip .sa-home-section__photo {
		right: auto;
		left: 60px;
	}
}

/* Fotka otočená zrkadlovo, aby zviera nebolo pod textom. */
.is-mirrored {
	transform: scaleX(-1);
}

/* Karusel článkov na detaile zvieraťa: štvorcové karty (o 50 % vyššie ako pôvodné 3 : 2). */
.sa-carousel .sa-card {
	aspect-ratio: 1 / 1;
}

/* Hero zvieraťa s inou fotkou na mobile a tablete na výšku: zrkadlí sa len desktopová fotka. */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1200px) {
	.is-mirrored-desktop {
		transform: scaleX(-1);
	}
}

/* ---------- Stránka Animals ---------- */

.sa-animals-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100svh;
	padding: calc(var(--sa-header) + 30px) var(--sa-gutter) 40px;
	overflow: hidden;
	color: var(--sa-white);
	background: #0b1a26;
}

.sa-animals-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-animals-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 40%, rgba(0, 0, 0, 0.2) 90%);
}

.sa-animals-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.sa-animals-hero .sa-label {
	display: inline-block;
	padding-inline: 16px;
}

.sa-animals-hero__title {
	margin: 14px 0;
	font-size: clamp(52px, 15vw, 70px);
	line-height: 0.95;
	text-wrap: balance;
}

.sa-animals-hero__text {
	max-width: 34em;
	margin: 0 0 26px;
}

.sa-animals-hero__groups {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 42%;
	gap: 8px;
	margin: 0 calc(var(--sa-gutter) * -1);
	padding: 0 var(--sa-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sa-gutter);
	scrollbar-width: none;
}

.sa-animals-hero__groups::-webkit-scrollbar {
	display: none;
}

.sa-animals-hero__groups li {
	scroll-snap-align: start;
}

.sa-animals-hero__groups .sa-card {
	padding: 12px;
	outline: 2px solid rgba(255, 255, 255, 0.25);
	outline-offset: -2px;
}

.sa-animals-hero__groups .sa-card__title {
	font-size: 22px;
}

.sa-animals {
	background: var(--sa-black);
	scroll-margin-top: var(--sa-header);
}

/* Lišta s filtrami ostáva pri scrollovaní prilepená pod hlavičkou. */
.sa-filter {
	position: sticky;
	top: var(--sa-header);
	z-index: 20;
	display: grid;
	gap: 10px;
	padding: 12px var(--sa-gutter);
	color: var(--sa-white);
	background: var(--sa-black);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-bar .sa-filter {
	top: calc(var(--sa-header) + 46px);
}

.sa-filter__chips,
.sa-filter__selects {
	display: flex;
	gap: 8px;
	margin: 0 calc(var(--sa-gutter) * -1);
	padding: 0 var(--sa-gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.sa-filter__chips::-webkit-scrollbar,
.sa-filter__selects::-webkit-scrollbar {
	display: none;
}

.sa-chip {
	flex: none;
	padding: 9px 14px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--sa-white);
	border: 1px solid rgba(255, 255, 255, 0.35);
	transition: background-color 0.15s, color 0.15s;
}

.sa-chip:hover {
	border-color: var(--sa-green);
}

.sa-chip[aria-pressed="true"] {
	color: var(--sa-black);
	background: var(--sa-green);
	border-color: var(--sa-green);
}

.sa-select {
	flex: none;
	max-width: 100%;
	padding: 9px 34px 9px 12px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sa-white);
	background: #1a1a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2323d846' d='M1.4 0 6 4.6 10.600 0 12 1.4 6 7.400 0 1.4z'/%3E%3C/svg%3E") no-repeat right 12px center / 10px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0;
	appearance: none;
}

.sa-select option {
	color: var(--sa-black);
	background: var(--sa-white);
}

.sa-filter__name {
	width: 170px;
	padding-right: 12px;
	background-image: none;
}

.sa-filter__name::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.sa-filter__status {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 14px;
}

.sa-filter__reset {
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	color: var(--sa-green);
}

/* Stena fotiek: karty tesne vedľa seba cez celú šírku. */
.sa-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
	padding: 3px;
}

.sa-grid__item[hidden] {
	display: none;
}

.sa-grid .sa-card {
	padding: 14px;
}

.sa-grid .sa-card__title {
	font-size: 24px;
}

.sa-animals__empty {
	padding: 80px var(--sa-gutter) 100px;
	font-family: var(--sa-display);
	font-size: 40px;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: var(--sa-white);
}

.sa-animals__empty p {
	margin: 0 0 24px;
}

@media (min-width: 768px) {
	.sa-animals-hero {
		padding: calc(var(--sa-header) + 40px) 60px 50px;
	}

	.sa-animals-hero::before {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 80%), linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 60%);
	}

	.sa-animals-hero__title {
		font-size: clamp(70px, 8.5vw, 150px);
		line-height: 0.9;
	}

	.sa-animals-hero__text {
		font-size: 20px;
	}

	/* Dlaždice skupín sa zmestia vedľa seba; ich výška sa riadi výškou okna, aby hero ostal na jednu obrazovku. */
	.sa-animals-hero__groups {
		grid-auto-columns: minmax(0, 1fr);
		gap: 10px;
		max-width: 150svh;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.sa-animals-hero__groups .sa-card__title {
		font-size: clamp(18px, 1.7vw, 30px);
	}

	.sa-filter {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 12px 24px;
		padding: 14px 60px;
	}

	.admin-bar .sa-filter {
		top: calc(var(--sa-header) + 32px);
	}

	.sa-filter__chips,
	.sa-filter__selects {
		flex-wrap: wrap;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.sa-filter__selects {
		grid-column: 1 / -1;
	}

	.sa-filter__sort {
		margin-left: auto;
	}

	.sa-filter__status {
		grid-row: 1;
		grid-column: 2;
	}

	.sa-select {
		font-size: 14px;
	}

	.sa-grid {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 4px;
		padding: 4px;
	}

	.sa-grid .sa-card {
		padding: 18px;
	}

	.sa-grid .sa-card__title {
		font-size: 30px;
	}
}

/* Na podstránke skupiny sú štítky skupín odkazy; aktuálna skupina je zvýraznená. */
a.sa-chip {
	text-decoration: none;
}

.sa-chip[aria-current="page"] {
	color: var(--sa-black);
	background: var(--sa-green);
	border-color: var(--sa-green);
}

.sa-animals-hero__groups .sa-card[aria-current="page"] {
	outline: 3px solid var(--sa-green);
	outline-offset: -3px;
}

/* ---------- Stránka Regions: bodková mapa sveta ---------- */

.sa-regions-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	min-height: 100svh;
	padding: calc(var(--sa-header) + 30px) var(--sa-gutter) 40px;
	overflow-x: clip;
	color: var(--sa-white);
	background: radial-gradient(ellipse at 50% 60%, #0f2a1b 0%, #000 70%);
}

.sa-regions-hero .sa-label {
	display: inline-block;
	padding-inline: 16px;
}

.sa-regions-hero__title {
	margin: 14px 0;
	font-size: clamp(52px, 15vw, 70px);
	line-height: 0.95;
}

.sa-regions-hero__text {
	max-width: 34em;
	margin: 0;
}

.sa-map {
	position: relative;
	width: 100%;
	margin-inline: auto;
}

.sa-map__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Každá bodka je čiara nulovej dĺžky s okrúhlym koncom. */
.sa-map__svg path {
	fill: none;
	stroke-width: 0.78;
	stroke-linecap: round;
}

.sa-map__land {
	stroke: rgba(255, 255, 255, 0.16);
}

.sa-map__region path {
	stroke: rgba(35, 216, 70, 0.55);
	transition: stroke 0.2s;
}

.sa-map__region:hover path,
.sa-map__region.is-active path {
	stroke: var(--sa-green);
	filter: drop-shadow(0 0 0.6px rgba(35, 216, 70, 0.9));
}

.sa-map__pin {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 6px;
	transform: translate(-5px, -50%);
	text-decoration: none;
	color: var(--sa-white);
}

/* Štítok naľavo od bodu: poradie prvkov sa otočí a bod ostane presne na mieste. */
.sa-map__pin--left {
	flex-direction: row-reverse;
	transform: translate(calc(-100% + 5px), -50%);
}

.sa-map__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sa-green);
	box-shadow: 0 0 0 4px rgba(35, 216, 70, 0.25);
}

.sa-map__label {
	padding: 4px 7px 3px;
	font-family: var(--sa-display);
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	background: rgba(0, 0, 0, 0.75);
	transition: background-color 0.15s, color 0.15s;
}

.sa-map__label small {
	margin-left: 3px;
	font-family: var(--sa-text);
	font-size: 11px;
	font-weight: 700;
	color: var(--sa-green);
}

.sa-map__pin:hover .sa-map__label,
.sa-map__pin:focus-visible .sa-map__label,
.sa-map__pin.is-active .sa-map__label {
	color: var(--sa-black);
	background: var(--sa-green);
}

.sa-map__pin:hover .sa-map__label small,
.sa-map__pin.is-active .sa-map__label small {
	color: var(--sa-black);
}

.sa-regions {
	background: var(--sa-black);
}

/* Mobil: mapa cez celú šírku, štítky regiónov sa nezmestia – zoznam regiónov je hneď pod mapou. */
@media (max-width: 767px) {
	.sa-regions-hero {
		min-height: auto;
		padding-bottom: 28px;
	}

	.sa-map {
		width: calc(100% + var(--sa-gutter) * 2);
		margin-inline: calc(var(--sa-gutter) * -1);
	}

	.sa-map__label {
		display: none;
	}

	/* Väčšia plocha na ťuknutie okolo bodu. */
	.sa-map__pin {
		padding: 10px;
		transform: translate(-15px, -50%);
	}

	.sa-map__pin--left {
		transform: translate(-15px, -50%);
	}
}

.sa-grid--regions .sa-card.is-active {
	outline: 3px solid var(--sa-green);
	outline-offset: -3px;
}

@media (min-width: 768px) {
	.sa-regions-hero {
		padding: calc(var(--sa-header) + 30px) 60px 50px;
	}

	.sa-regions-hero__title {
		font-size: clamp(70px, 8vw, 140px);
		line-height: 0.9;
	}

	.sa-regions-hero__text {
		font-size: 20px;
	}

	/* Mapa sa zmenší tak, aby nadpis aj mapa zostali na jednej obrazovke. */
	.sa-map {
		width: min(100%, calc((100svh - 440px) * 2.65));
	}

	.sa-map__label {
		font-size: clamp(16px, 1.4vw, 24px);
	}

	.sa-map__label small {
		font-size: 13px;
	}

	.sa-grid--regions {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1100px) {
	.sa-grid--regions {
		grid-template-columns: repeat(7, 1fr);
	}
}

/* ---------- Huby (Venomous, Deep Sea, Africa…): najsledovanejšie zviera a mriežka ostatných ---------- */

.sa-hub-hero h1.sa-label {
	font-size: 22px;
}

.sa-hub-hero__kicker {
	margin: 18px 0 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sa-green);
}

.sa-hub-hero .sa-hero__title {
	margin-top: 4px;
}

.sa-hub {
	scroll-margin-top: var(--sa-header);
}

.sa-hub__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 40px var(--sa-gutter) 20px;
	color: var(--sa-white);
}

.sa-hub__title {
	font-size: clamp(36px, 10vw, 64px);
	overflow-wrap: anywhere;
}

.sa-hub__back {
	font-weight: 700;
	color: var(--sa-green);
}

.sa-hub__intro {
	max-width: 800px;
	padding: 0 var(--sa-gutter) 30px;
	color: var(--sa-white);
}

@media (min-width: 768px) {
	.sa-hub-hero h1.sa-label {
		font-size: calc(var(--sa-hero-u) * 0.22);
	}

	.sa-hub-hero__kicker {
		margin-top: 28px;
		font-size: 16px;
	}

	.sa-hub__head {
		padding: 60px 60px 30px;
	}

	.sa-hub__intro {
		padding: 0 60px 40px;
	}
}

/* ---------- Push notifikácie v pätičke ---------- */

.sa-push {
	max-width: 400px;
}

.sa-push[hidden] {
	display: none;
}

.sa-push__title {
	margin: 0 0 10px !important;
	font-family: var(--sa-display);
	font-size: 36px;
	line-height: 1;
	text-transform: uppercase;
}

.sa-push__text {
	margin: 0 0 20px !important;
	font-size: 16px;
	line-height: 1.5;
}

.sa-push.is-on .sa-push__btn {
	color: var(--sa-white);
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--sa-white);
}

.sa-push__btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

@media (min-width: 768px) {
	.sa-push {
		padding-left: 32px;
		border-left: 3px solid var(--sa-white);
	}
}

/* Dlaždice ostatných skupín pod zvieratami (napr. na /birds/). */
.sa-hub--more {
	border-top: 3px solid var(--sa-green);
}

/* Skupiny vždy cez celú šírku: na mobile 2, na tablete 3 a na desktope všetky v jednom riadku. */
@media (min-width: 768px) {
	.sa-grid--groups {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.sa-grid--groups {
		grid-template-columns: repeat(var(--sa-cols, 6), 1fr);
	}
}

/* ---------- Stránka 404 ---------- */

.sa-404 {
	padding: 40px var(--sa-gutter) 70px;
	text-align: center;
	color: var(--sa-white);
	background: var(--sa-black);
}

.sa-404__big {
	margin: 0 0 10px;
	font-family: var(--sa-display);
	font-size: clamp(150px, 48vw, 360px);
	line-height: 0.85;
	color: var(--sa-green);
}

/* Prostredná nula občas „žmurkne“ ako oko zvieraťa, ktoré sa skrýva. */
.sa-404__big span {
	display: inline-block;
	transform-origin: 50% 55%;
}

@media (prefers-reduced-motion: no-preference) {
	.sa-404__big span {
		animation: sa-blink 4s ease-in-out infinite;
	}
}

@keyframes sa-blink {
	0%, 90%, 100% { transform: scaleY(1); }
	94% { transform: scaleY(0.08); }
}

.sa-404__title {
	margin-bottom: 16px;
	font-size: clamp(42px, 11vw, 84px);
}

.sa-404__text {
	max-width: 600px;
	margin: 0 auto 32px;
	font-size: 18px;
	line-height: 1.55;
}

.sa-404__search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 640px;
	margin: 0 auto 26px;
	padding: 6px 6px 6px 16px;
	color: var(--sa-black);
	background: var(--sa-white);
}

.sa-404__search > .sa-icon {
	flex: none;
	font-size: 24px;
	color: var(--sa-purple);
}

.sa-404__input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	outline: 0;
	font-family: var(--sa-display);
	font-size: 26px;
	text-transform: uppercase;
	color: var(--sa-black);
	background: transparent;
}

.sa-404__search:focus-within {
	box-shadow: 0 0 0 3px var(--sa-green);
}

.sa-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

.sa-btn--outline {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--sa-white);
}

@media (min-width: 768px) {
	.sa-404 {
		padding: 60px 60px 90px;
	}

	.sa-404__input {
		font-size: 30px;
	}
}

/* =====================================================================
   Články: výpis (Articles, Lists, Compare) a detail článku
   ===================================================================== */

/* ---------- Karta článku ---------- */

.sa-acard {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--sa-white);
	text-decoration: none;
	background: #111;
}

.sa-acard__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #1d1d1d;
}

.sa-acard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sa-acard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 20px 22px;
}

/* Typ článku: každý má svoju farbu (zoznam zelená, porovnanie fialová, článok biela). */
.sa-acard__type {
	display: inline-block;
	padding: 5px 8px 3px;
	font-family: var(--sa-display);
	font-size: 17px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sa-black);
	background: var(--sa-white);
}

.sa-acard__type--list {
	background: var(--sa-green);
}

.sa-acard__type--story {
	background: var(--sa-yellow);
}

.sa-acard__type--compare {
	color: var(--sa-white);
	background: var(--sa-purple);
}

.sa-acard__title {
	font-family: var(--sa-display);
	font-size: 30px;
	line-height: 1;
	text-transform: uppercase;
	transition: color 0.15s;
}

.sa-acard__title em,
.sa-ahero__title em,
.sa-post__title em {
	font-style: normal;
	color: var(--sa-purple);
}

.sa-acard__meta {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9a9a9a;
}

@media (hover: hover) {
	.sa-acard:hover .sa-acard__media img {
		transform: scale(1.05);
	}

	.sa-acard:hover .sa-acard__title {
		color: var(--sa-green);
	}
}

/* ---------- Výpis článkov ---------- */

.sa-ahero {
	display: grid;
	color: var(--sa-white);
	background: var(--sa-black);
}

.sa-ahero__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.sa-ahero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-ahero__text {
	padding: 32px var(--sa-gutter) 48px;
}

.sa-ahero__label {
	display: inline-block;
	font-size: 22px;
}

.sa-ahero__title {
	margin: 8px 0 16px;
	font-size: clamp(40px, 11vw, 72px);
	line-height: 0.95;
}

.sa-ahero__title a {
	color: inherit;
	text-decoration: none;
}

.sa-ahero__title a:hover {
	color: var(--sa-green);
}

.sa-ahero__lead {
	max-width: 560px;
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.55;
}

.sa-ahero__meta {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.sa-ahero__actions {
	justify-content: flex-start;
}

.sa-articles__chips {
	display: flex;
	gap: 8px;
	padding: 0 var(--sa-gutter) 24px;
	overflow-x: auto;
	scrollbar-width: none;
}

.sa-articles__chips::-webkit-scrollbar {
	display: none;
}

.sa-chip small {
	margin-left: 4px;
	font-size: 12px;
	opacity: 0.7;
}

.sa-articles__grid {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0 var(--sa-gutter) 60px;
	list-style: none;
}

.sa-articles__grid > li[hidden] {
	display: none;
}

@media (min-width: 700px) {
	.sa-articles__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.sa-articles__chips {
		padding: 0 60px 30px;
	}

	.sa-articles__grid {
		gap: 24px;
		padding: 0 60px 80px;
	}
}

@media (min-width: 900px) {
	.sa-ahero {
		grid-template-columns: 7fr 5fr;
		min-height: calc(100svh - var(--sa-header));
	}

	.sa-ahero__media {
		aspect-ratio: auto;
		order: 2;
	}

	.sa-ahero__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 60px;
	}

	.sa-ahero__title {
		font-size: clamp(52px, 5vw, 84px);
	}
}

@media (min-width: 1100px) {
	.sa-articles__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Detail článku ---------- */

/* Ukazovateľ prečítania: zelený pásik na spodku hlavičky. */
.sa-progress {
	position: fixed;
	top: var(--sa-header);
	left: 0;
	right: 0;
	z-index: 49;
	height: 4px;
	pointer-events: none;
}

.sa-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sa-green);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* Hlavička je čierna; fotka prečnieva do bielej plochy pod ňou. */
.sa-post__hero {
	color: var(--sa-white);
	background: linear-gradient(var(--sa-black) 0, var(--sa-black) calc(100% - 80px), var(--sa-white) calc(100% - 80px));
}

.sa-post__intro {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px var(--sa-gutter) 32px;
	text-align: center;
}

.sa-post__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.sa-post__title {
	margin: 0 0 18px;
	font-size: clamp(42px, 11vw, 96px);
	line-height: 0.95;
}

.sa-post__lead {
	max-width: 680px;
	margin: 0 auto 18px;
	font-size: 19px;
	line-height: 1.55;
}

.sa-post__byline {
	margin: 0;
	font-size: 14px;
	color: #9a9a9a;
}

.sa-post__figure {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
}

.sa-post__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sa-post__figure figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 700;
	background: rgba(0, 0, 0, 0.7);
}

.sa-post__figure figcaption a {
	color: var(--sa-white);
	text-decoration: none;
}

.sa-post__figure figcaption a:hover {
	color: var(--sa-green);
}

/* Na mobile: obsah, text, hviezda článku a zdieľanie pod sebou. Na desktope text vľavo a panel vpravo. */
.sa-post__layout {
	display: grid;
	gap: 32px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px var(--sa-gutter) 70px;
	background: var(--sa-white);
}

/* ---------- Obsah (kapitoly) ---------- */

.sa-toc {
	border: 2px solid var(--sa-black);
}

.sa-toc__toggle {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 14px 16px 12px;
	font-family: var(--sa-display);
	font-size: 22px;
	line-height: 1;
	text-align: left;
	text-transform: uppercase;
	color: var(--sa-black);
	background: none;
	border: 0;
	cursor: pointer;
}

.sa-toc__toggle small {
	margin-left: 8px;
	padding: 3px 6px 1px;
	font-size: 15px;
	background: var(--sa-green);
}

.sa-toc__toggle::after {
	content: "+";
	margin-left: auto;
	font-size: 28px;
}

.sa-toc__toggle[aria-expanded="true"]::after {
	content: "\2013";
}

.sa-toc__list {
	display: none;
	margin: 0;
	padding: 0 16px 14px 36px;
	font-size: 15px;
	line-height: 1.4;
}

.sa-toc__toggle[aria-expanded="true"] + .sa-toc__list {
	display: block;
}

.sa-toc__list li {
	padding: 5px 0;
}

.sa-toc__list li::marker {
	font-weight: 700;
	color: var(--sa-purple);
}

.sa-toc__list a {
	color: var(--sa-black);
	text-decoration: none;
}

.sa-toc__list a:hover,
.sa-toc__list a.is-active {
	color: var(--sa-purple);
}

.sa-toc__list a.is-active {
	font-weight: 700;
}

/* ---------- Text článku ---------- */

.sa-post__body {
	min-width: 0;
	font-size: 18px;
	line-height: 1.7;
}

.sa-post__body > p:first-child {
	font-size: 21px;
	line-height: 1.55;
	font-weight: 500;
}

.sa-post__body h2 {
	margin: 56px 0 16px;
	font-size: clamp(36px, 8vw, 48px);
	line-height: 1;
	scroll-margin-top: calc(var(--sa-header) + 24px);
}

.sa-post__body h3 {
	margin: 36px 0 10px;
	font-size: 28px;
	line-height: 1.05;
}

.sa-post__body ul,
.sa-post__body ol {
	padding-left: 24px;
}

.sa-post__body li {
	margin: 6px 0;
}

.sa-post__body ul li::marker {
	color: var(--sa-green);
	font-size: 1.2em;
}

.sa-post__body ol li::marker {
	font-weight: 700;
	color: var(--sa-purple);
}

.sa-post__body a {
	color: var(--sa-purple);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.sa-post__body a:hover {
	color: var(--sa-black);
	background: var(--sa-green);
	text-decoration: none;
}

.sa-post__body img {
	display: block;
	max-width: 100%;
	height: auto;
}

.sa-post__body figure {
	margin: 32px 0;
}

.sa-post__body figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: #6e6e6e;
}

/* Citát ako výrazný „pull quote“. */
.sa-post__body blockquote {
	margin: 40px 0;
	padding: 4px 0 4px 24px;
	border-left: 6px solid var(--sa-purple);
	font-family: var(--sa-display);
	font-size: clamp(30px, 7vw, 40px);
	line-height: 1.05;
	text-transform: uppercase;
}

.sa-post__body blockquote p {
	margin: 0;
}

.sa-post__body blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--sa-text);
	font-size: 14px;
	font-style: normal;
	text-transform: none;
	color: #6e6e6e;
}

/* Rámček „Strange but true“: blok s triedou sa-callout (v editore: Ďalšie CSS triedy). */
.sa-post__body .sa-callout {
	margin: 36px 0;
	padding: 22px 24px;
	background: var(--sa-green);
}

.sa-post__body .sa-callout > :first-child {
	margin-top: 0;
}

.sa-post__body .sa-callout > :last-child {
	margin-bottom: 0;
}

.sa-post__body .sa-callout strong:first-child {
	display: block;
	margin-bottom: 6px;
	font-family: var(--sa-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

.sa-post__body .sa-callout a {
	color: var(--sa-black);
}

/* Tabuľka (napr. porovnanie dvoch zvierat). Na mobile sa dá posúvať do strany. */
.sa-post__body table {
	display: block;
	width: 100%;
	margin: 32px 0;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.4;
}

.sa-post__body th,
.sa-post__body td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--sa-line);
}

.sa-post__body thead th {
	font-family: var(--sa-display);
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sa-white);
	background: var(--sa-black);
	border: 0;
}

.sa-post__body tbody th,
.sa-post__body td:first-child {
	font-weight: 700;
}

.sa-post__body tbody tr:nth-child(even) {
	background: var(--sa-gray);
}

.sa-post__body hr {
	margin: 48px 0;
	border: 0;
	border-top: 3px solid var(--sa-black);
}

/* Zoznamy: položky (nadpisy s menom zvieraťa) majú veľké poradové číslo v zelenom štítku. */
.sa-post--list .sa-post__body {
	counter-reset: sa-rank;
}

.sa-post__body h2.sa-rank {
	counter-increment: sa-rank;
}

.sa-post__body h2.sa-rank::before {
	content: "#" counter(sa-rank);
	display: table;
	margin-bottom: 10px;
	padding: 6px 10px 3px;
	font-size: 0.6em;
	line-height: 1;
	color: var(--sa-black);
	background: var(--sa-green);
}

/* ---------- Hviezda článku a zdieľanie ---------- */

.sa-star {
	padding: 20px;
	color: var(--sa-white);
	background: var(--sa-black);
}

.sa-star__kicker {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sa-green);
}

.sa-star__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.sa-star__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-star__name {
	margin: 16px 0 6px;
	font-family: var(--sa-display);
	font-size: 36px;
	line-height: 1;
	text-transform: uppercase;
}

.sa-star__tagline {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.45;
	color: #cfcfcf;
}

.sa-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.sa-share__title {
	flex-basis: 100%;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sa-share__btn {
	font-size: 20px;
	cursor: pointer;
	border: 0;
}

.sa-btn--outline-dark {
	color: var(--sa-black);
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--sa-black);
}

.sa-btn--outline-dark:hover {
	color: var(--sa-white);
	background: var(--sa-black);
}

.sa-articles--related {
	padding-top: 10px;
}

@media (min-width: 768px) {
	.sa-post__intro {
		padding: 70px 60px 48px;
	}

	.sa-post__hero {
		background: linear-gradient(var(--sa-black) 0, var(--sa-black) calc(100% - 160px), var(--sa-white) calc(100% - 160px));
	}

	.sa-post__figure {
		padding: 0 60px;
	}

	.sa-post__figure figcaption {
		right: 60px;
	}

	.sa-post__layout {
		padding: 60px 60px 90px;
	}

	.sa-post__body {
		font-size: 19px;
	}
}

/* Mobil: časti bočného panelu sa zaradia priamo do mriežky – obsah pred text, hviezda a zdieľanie za neho. */
.sa-post__side {
	display: contents;
}

.sa-post__side .sa-toc {
	order: -1;
}

/* Desktop: text vľavo, vpravo panel s hviezdou článku a zdieľaním; obsah sa pri čítaní prilepí pod hlavičku. */
@media (min-width: 1100px) {
	.sa-post__layout {
		grid-template-columns: minmax(0, 720px) 320px;
		justify-content: space-between;
		column-gap: 60px;
	}

	.sa-post__side {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.sa-post__side .sa-toc {
		order: 3;
		position: sticky;
		top: calc(var(--sa-header) + 24px);
		background: var(--sa-white);
	}

	/* Na desktope je obsah vždy rozbalený. */
	.sa-toc__toggle {
		cursor: default;
		pointer-events: none;
	}

	.sa-toc__toggle::after {
		content: none;
	}

	.sa-toc__list {
		display: block;
	}
}

/* ---------- Fotky a videá v galérii a lightbox ---------- */

.sa-photo {
	display: block;
	overflow: hidden;
	cursor: zoom-in;
}

.sa-photo img {
	transition: transform 0.4s ease;
}

@media (hover: hover) {
	.sa-photo:hover img {
		transform: scale(1.04);
	}
}

.sa-photo:focus-visible,
.sa-video:focus-visible {
	outline: 3px solid var(--sa-white);
	outline-offset: 2px;
}

/*
 * Lightbox v dizajne webu: čierne pozadie, počítadlo v zelenom štítku, meno zvieraťa v Bebas,
 * hranaté zelené tlačidlá a pás náhľadov dole (fotky aj videá).
 */
.sa-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--sa-white);
	background: var(--sa-black);
	overscroll-behavior: contain;
}

.sa-lightbox::backdrop {
	background: var(--sa-black);
}

.sa-lightbox[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	animation: sa-lightbox-in 0.2s ease;
}

@keyframes sa-lightbox-in {
	from { opacity: 0; }
}

.sa-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 12px 12px var(--sa-gutter);
}

.sa-lightbox__title {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	margin: 0;
	font-family: var(--sa-display);
	text-transform: uppercase;
	line-height: 1;
}

.sa-lightbox__count {
	flex: none;
	padding: 7px 10px 4px;
	font-size: 20px;
	color: var(--sa-black);
	background: var(--sa-green);
}

.sa-lightbox__name {
	overflow: hidden;
	font-size: 28px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sa-lightbox__btn {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 22px;
	color: var(--sa-black);
	background: var(--sa-green);
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.sa-lightbox__btn:hover,
.sa-lightbox__btn:focus-visible {
	background: var(--sa-white);
}

/* Rámik pri ovládaní klávesnicou v zelenej farbe webu namiesto predvoleného modrého. */
.sa-lightbox__btn:focus,
.sa-lightbox__thumb:focus,
.sa-lightbox__poster:focus {
	outline: none;
}

.sa-lightbox__btn:focus-visible,
.sa-lightbox__thumb:focus-visible,
.sa-lightbox__poster:focus-visible {
	outline: 3px solid var(--sa-green);
	outline-offset: 3px;
}

.sa-lightbox__btn[hidden] {
	display: none;
}

.sa-lightbox__close {
	color: var(--sa-white);
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--sa-white);
}

.sa-lightbox__close:hover,
.sa-lightbox__close:focus-visible {
	color: var(--sa-black);
}

.sa-lightbox__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0 var(--sa-gutter);
}

.sa-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
}

.sa-lightbox__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	flex: 1;
}

.sa-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
}

/* Video: prehrávač 16:9, čo najväčší, ktorý sa zmestí. */
.sa-lightbox__media .sa-video__frame,
.sa-lightbox__poster {
	display: block;
	width: min(100%, (100dvh - 220px) * 16 / 9);
	aspect-ratio: 16 / 9;
	border: 0;
}

.sa-lightbox__poster {
	position: relative;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: #111;
}

.sa-lightbox__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-lightbox__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	margin: auto;
	font-size: 40px;
	color: var(--sa-black);
	background: var(--sa-green);
	transition: transform 0.15s;
}

.sa-lightbox__poster:hover .sa-lightbox__play {
	transform: scale(1.08);
}

.sa-lightbox__note {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 12px;
	font-size: 13px;
	text-align: left;
	color: var(--sa-white);
	background: rgba(0, 0, 0, 0.7);
}

.sa-lightbox__caption {
	margin-top: 12px;
	font-size: 15px;
	text-align: center;
	color: #cfcfcf;
}

/* Na mobile sú šípky dole vedľa seba, aby nezakrývali fotku. */
.sa-lightbox__prev,
.sa-lightbox__next {
	position: absolute;
	bottom: -60px;
	z-index: 1;
}

.sa-lightbox__prev {
	left: var(--sa-gutter);
}

.sa-lightbox__next {
	right: var(--sa-gutter);
}

.sa-lightbox__strip {
	display: flex;
	gap: 8px;
	padding: 72px var(--sa-gutter) 16px;
	overflow-x: auto;
	scrollbar-width: none;
}

.sa-lightbox__strip::-webkit-scrollbar {
	display: none;
}

.sa-lightbox__strip[hidden] {
	display: none;
}

.sa-lightbox__thumb {
	position: relative;
	flex: none;
	width: 72px;
	height: 48px;
	padding: 0;
	overflow: hidden;
	background: #1d1d1d;
	border: 0;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.15s;
}

.sa-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-lightbox__thumb span {
	position: absolute;
	right: 0;
	bottom: 0;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	font-size: 12px;
	color: var(--sa-black);
	background: var(--sa-green);
}

.sa-lightbox__thumb:hover,
.sa-lightbox__thumb.is-active {
	opacity: 1;
}

.sa-lightbox__thumb.is-active {
	box-shadow: inset 0 0 0 3px var(--sa-green);
}

@media (min-width: 768px) {
	.sa-lightbox__bar {
		padding: 16px 20px 16px 30px;
	}

	.sa-lightbox__name {
		font-size: 34px;
	}

	.sa-lightbox__btn {
		width: 56px;
		height: 56px;
	}

	.sa-lightbox__stage {
		gap: 24px;
		padding: 0 20px;
	}

	/* Na desktope sú šípky po stranách fotky. */
	.sa-lightbox__prev,
	.sa-lightbox__next {
		position: static;
		order: 0;
	}

	.sa-lightbox__figure {
		order: 1;
		flex: 1;
		min-width: 0;
	}

	.sa-lightbox__next {
		order: 2;
	}

	.sa-lightbox__strip {
		justify-content: center;
		padding: 20px 30px 24px;
	}

	.sa-lightbox__thumb {
		width: 96px;
		height: 64px;
	}

	.sa-lightbox__media .sa-video__frame,
	.sa-lightbox__poster {
		width: min(100%, (100dvh - 240px) * 16 / 9);
	}
}

/* ---------- Štítok AI obrázka (inc/ai-images.php) ---------- */

.sa-ai-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	padding: 3px 7px;
	border-radius: 3px;
	background: rgb(0 0 0 / 0.6);
	color: var(--sa-white);
	font: 600 10px/1.2 var(--sa-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	pointer-events: none;
}

/* V hero je hore pevná hlavička, štítok ide pod ňu. */
.sa-hero > .sa-ai-badge,
.sa-animals-hero > .sa-ai-badge {
	top: calc(var(--sa-header) + 12px);
	right: var(--sa-gutter);
}

/* Obaly obrázkov, ktoré inak nemajú pozíciu, aby štítok ostal v rohu obrázka. */
.sa-ahero__media,
.sa-acard__media,
.sa-star__media,
.sa-photo {
	position: relative;
}

/* Poznámka o AI obrázkoch v pätičke (inc/ai-images.php). */
.sa-footer__note {
	margin: 16px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

.sa-footer__note a {
	color: var(--sa-white);
	text-underline-offset: 3px;
}

/* ---------- Kvíz v profile zvieraťa (inc/quiz.php) ---------- */

.sa-quiz {
	padding: 60px var(--sa-gutter);
	color: var(--sa-white);
	background: var(--sa-purple);
}

.sa-quiz[hidden] {
	display: none;
}

.sa-quiz__inner {
	max-width: 760px;
	margin: 0 auto;
}

.sa-quiz .sa-label {
	display: inline-block;
	padding-inline: 16px;
}

.sa-quiz__lead {
	margin: 16px 0 30px;
}

.sa-quiz__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-quiz__step {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sa-green);
}

.sa-quiz__question {
	margin: 0 0 20px;
	font-family: var(--sa-display);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.05;
	outline: none;
}

.sa-quiz__options {
	display: grid;
	gap: 12px;
}

.sa-quiz__option {
	padding: 14px 18px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	color: var(--sa-black);
	background: var(--sa-white);
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

@media (hover: hover) {
	.sa-quiz__option:not(:disabled):hover {
		background: var(--sa-green);
	}
}

.sa-quiz__option:disabled {
	cursor: default;
	opacity: 0.55;
}

.sa-quiz__option.is-correct,
.sa-quiz__option.is-wrong {
	opacity: 1;
}

.sa-quiz__option.is-correct {
	background: var(--sa-green);
}

.sa-quiz__option.is-correct::after {
	content: " ✓";
}

.sa-quiz__option.is-wrong {
	color: var(--sa-white);
	background: var(--sa-black);
	text-decoration: line-through;
}

.sa-quiz__feedback {
	margin-top: 20px;
}

.sa-quiz__verdict {
	margin: 0;
	font-family: var(--sa-display);
	font-size: 30px;
	line-height: 1.1;
}

.sa-quiz__explain {
	margin: 4px 0 0;
}

.sa-quiz__next {
	margin-top: 20px;
	padding: 14px 24px;
	font-family: var(--sa-display);
	font-size: 24px;
	line-height: 1;
	color: var(--sa-black);
	background: var(--sa-green);
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.sa-quiz__next:hover {
	color: var(--sa-white);
	background: var(--sa-black);
}

.sa-quiz__score {
	margin: 0;
	font-family: var(--sa-display);
	font-size: 96px;
	line-height: 1;
	color: var(--sa-green);
	outline: none;
}

.sa-quiz__rank {
	margin: 10px 0 0;
	font-size: 20px;
}

@media (min-width: 768px) {
	.sa-quiz {
		padding: 90px 60px;
	}

	.sa-quiz__question {
		font-size: 44px;
	}

	.sa-quiz__options {
		grid-template-columns: 1fr 1fr;
	}
}

/* Štítok typu a čas čítania nad nadpisom karty článku (sa_card). */
.sa-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 12px;
	font-family: var(--sa-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.sa-card__meta .sa-acard__type {
	letter-spacing: 0;
}

/* Fotka zvieraťa pod položkou zoznamu (sa_list_photos v inc/articles.php). */
.sa-list-photo {
	margin: 0 0 20px;
}

.sa-list-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * Detail zvieraťa na mobile: tmavé stmavenie fotky, aby bol nadpis čitateľný. Po malom zoscrollovaní
 * (trieda is-revealed z assets/main.js) nadpis, štítky aj stmavenie zmiznú a ostane čistá fotka.
 */
@media (max-width: 767px) {
	.sa-hero--animal::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.2) 100%);
		pointer-events: none;
		transition: opacity 0.45s ease;
	}

	.sa-hero--animal .sa-hero__overlay,
	.sa-hero--animal > .sa-ai-badge {
		z-index: 2;
	}

	.sa-hero--animal .sa-hero__content {
		z-index: 2;
		transition: opacity 0.45s ease, transform 0.45s ease;
	}

	.sa-hero--animal.is-revealed::before {
		opacity: 0;
	}

	.sa-hero--animal.is-revealed .sa-hero__content {
		opacity: 0;
		transform: translateY(16px);
		pointer-events: none;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.sa-hero--animal::before,
	.sa-hero--animal .sa-hero__content {
		transition: none;
	}
}

/* ---------- Šípka na návrat hore (mobil) ---------- */

.sa-to-top {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	font-size: 24px;
	color: var(--sa-black);
	background: var(--sa-green);
	box-shadow: 0 0 0 2px var(--sa-black), 0 6px 18px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s;
}

.sa-to-top[hidden] {
	display: none;
}

.sa-to-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.sa-to-top:active {
	background: var(--sa-white);
}

.sa-to-top:focus-visible {
	outline: 3px solid var(--sa-white);
	outline-offset: 3px;
}

@media (min-width: 768px) {
	.sa-to-top {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sa-to-top {
		transition: none;
	}
}

/* ---------- Úvodná stránka na mobile: zobrazenie celej fotky ---------- */

/* Fialové tlačidlo s okom a textom, aby si ho ľudia všimli (fialová ako štítky sekcií). */
.sa-home-section__eye {
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	font-family: var(--sa-display);
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sa-white);
	background: var(--sa-purple);
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.sa-home-section__eye .sa-icon {
	font-size: 20px;
}

.sa-home-section__eye-text {
	padding-top: 2px;
}

/* Jemné pulzovanie (2×) pri prvom príchode na sekciu. */
@media (prefers-reduced-motion: no-preference) {
	.sa-home-section__eye.is-pulsing {
		animation: sa-eye-pulse 0.9s ease-in-out 0.3s 2;
	}
}

@keyframes sa-eye-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(128, 42, 214, 0.7); }
	45% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(128, 42, 214, 0); }
}

.sa-home-section__eye .sa-eye-closed,
.sa-home-section__eye[aria-pressed="true"] .sa-eye-open {
	display: none;
}

.sa-home-section__eye[aria-pressed="true"] .sa-eye-closed {
	display: block;
}

/* Zapnuté: zelené, aby bolo jasné, ako sa vrátiť späť k textu. */
.sa-home-section__eye[aria-pressed="true"] {
	color: var(--sa-black);
	background: var(--sa-green);
}

.sa-home-section__eye:focus-visible {
	outline: 3px solid var(--sa-green);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	/* Miesto pre pásik s popiskom nad obsahom sekcie. */
	.sa-home-section {
		padding-top: 72px;
	}

	.sa-home-section::before,
	.sa-home-section__inner {
		transition: opacity 0.4s ease, visibility 0.4s;
	}

	.sa-home-section.is-photo::before,
	.sa-home-section.is-photo .sa-home-section__inner {
		opacity: 0;
		visibility: hidden;
	}

	/* Zviera dňa: po malom zoscrollovaní zmizne text aj stmavenie (trieda is-revealed z assets/main.js). */
	.sa-home-hero::after,
	.sa-home-hero .sa-hero__content {
		transition: opacity 0.45s ease, transform 0.45s ease;
	}

	.sa-home-hero.is-revealed::after {
		opacity: 0;
	}

	.sa-home-hero.is-revealed .sa-hero__content {
		opacity: 0;
		transform: translateY(16px);
		pointer-events: none;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.sa-home-section::before,
	.sa-home-section__inner,
	.sa-home-hero::after,
	.sa-home-hero .sa-hero__content {
		transition: none;
	}
}

/* Na desktope je text na boku a fotka je vidieť aj tak, tlačidlo s okom netreba. */
@media (min-width: 768px) {
	.sa-home-section__eye {
		display: none;
	}
}

/*
 * Texty na detaile zvieraťa (mobil): fotka v pozadí má výšku obrazovky a pri čítaní ostáva prilepená.
 * Sekcia je mriežka s fotkou a textami v tej istej bunke, takže sa pri rozbalení položky predĺži bez
 * absolútneho roztiahnutia (Safari na iPhone ho pri <details> neprekreslí). Stmavenie je filter fotky.
 */
@media (max-width: 767px) {
	.sa-story {
		display: grid;
	}

	.sa-story__texts,
	.sa-story__media {
		grid-area: 1 / 1;
	}

	/* Výšku sekcie určujú texty; fotka, ktorá je vyššia, sa orezá (clip nevytvára posúvanú plochu, takže prilepenie funguje). */
	.sa-story__media {
		position: relative;
		inset: auto;
		contain: size;
		overflow: clip;
	}

	.sa-story__media::after {
		content: none;
	}

	.sa-story__media img {
		position: sticky;
		top: var(--sa-header);
		display: block;
		height: calc(100svh - var(--sa-header));
		filter: brightness(0.45);
		transition: filter 0.3s ease;
	}

	/* Pri otvorenej odpovedi sa fotka stmaví ešte viac, aby bol drobný text čitateľný. */
	.sa-story:has(.sa-acc[open]) .sa-story__media img {
		filter: brightness(0.2);
	}
}

/* ---------- Mobilné menu (mobil a tablet): stmavenie stránky pod otvoreným menu (ťuknutie naň menu zavrie) ---------- */

@media (max-width: 1099px) {
	.sa-header.is-open::after {
		content: "";
		position: fixed;
		inset: var(--sa-header) 0 0;
		z-index: -1;
		background: rgba(0, 0, 0, 0.6);
		animation: sa-fade-in 0.2s ease;
	}
}

@keyframes sa-fade-in {
	from { opacity: 0; }
}

/* ---------- Riadky posúvateľné do strany (mobil): stmavenie okraja a šípka ---------- */

.sa-scroll-wrap {
	position: relative;
	min-width: 0;
}

.sa-scroll-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 16px;
	color: var(--sa-black);
	background: var(--sa-green);
	border: 0;
	cursor: pointer;
	transform: translateY(-50%);
}

.sa-scroll-arrow[hidden] {
	display: none;
}

/* Šípka trikrát jemne „ťukne“ doprava, aby si ju človek všimol. */
@media (prefers-reduced-motion: no-preference) {
	.sa-scroll-arrow {
		animation: sa-nudge 1.1s ease-in-out 0.6s 3;
	}
}

@keyframes sa-nudge {
	0%, 100% { transform: translate(0, -50%); }
	50% { transform: translate(5px, -50%); }
}

@media (max-width: 767px) {
	/* Obsah sa na okraji, za ktorým pokračuje, postupne stratí do pozadia. */
	.sa-scroll-fade {
		--sa-fade-l: 0px;
		--sa-fade-r: 0px;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sa-fade-l), #000 calc(100% - var(--sa-fade-r)), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--sa-fade-l), #000 calc(100% - var(--sa-fade-r)), transparent 100%);
	}

	.sa-scroll-fade.has-more-left {
		--sa-fade-l: 36px;
	}

	.sa-scroll-fade.has-more-right {
		--sa-fade-r: 64px;
	}
}

@media (min-width: 768px) {
	.sa-scroll-arrow {
		display: none;
	}
}

/*
 * Hero podkategórií (Deep Sea, Ugliest…): silnejšie stmavenie fotky, lebo text zaberá väčšiu časť hero
 * ako pri zvierati dňa. Pri zoscrollovaní na mobile zmizne spolu s textom (.is-revealed).
 */
.sa-hero.sa-hub-hero::after {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.3) 100%);
}

@media (min-width: 768px) {
	.sa-hero.sa-hub-hero::after {
		background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.15) 100%);
	}
}

/* ---------- Zdieľanie (inc/share.php) ---------- */

/* Pás v detaile zvieraťa: svetlý, aby sa nezlial s fialovým kvízom nad ním. */
.sa-share-band {
	padding: 48px var(--sa-gutter) 52px;
	text-align: center;
	color: var(--sa-black);
	background: var(--sa-gray);
}

.sa-share-band__title {
	margin: 0 0 10px;
	font-size: clamp(36px, 10vw, 60px);
	line-height: 0.95;
	text-wrap: balance;
}

.sa-share-band__text {
	margin: 0 0 24px;
	font-size: 17px;
}

.sa-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sa-share-band .sa-share__buttons {
	justify-content: center;
}

/* Odkazy na siete a „Copy link“: hranaté obrysové tlačidlá písmom Bebas. */
.sa-share__link {
	display: inline-flex;
	align-items: center;
	padding: 12px 16px 9px;
	font-family: var(--sa-display);
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 2px currentColor;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.sa-share__buttons--light .sa-share__link {
	color: var(--sa-white);
}

.sa-share__buttons--light .sa-share__link:hover,
.sa-share__buttons--light .sa-share__link:focus-visible {
	color: var(--sa-purple);
	background: var(--sa-white);
	box-shadow: inset 0 0 0 2px var(--sa-white);
}

.sa-share__buttons--dark .sa-share__link {
	color: var(--sa-black);
}

.sa-share__buttons--dark .sa-share__link:hover,
.sa-share__buttons--dark .sa-share__link:focus-visible {
	color: var(--sa-white);
	background: var(--sa-black);
}

.sa-share__native {
	font-size: 22px;
	cursor: pointer;
	border: 0;
}

/* Systémové menu zdieľania len tam, kde ho prehliadač podporuje (skript odstráni hidden). */
.sa-share__native[hidden] {
	display: none;
}

/* Na mobile so systémovým menu zdieľania stačí „Share“ a „Copy link“ (siete sú v systémovom menu). */
@media (max-width: 767px) {
	.js-share-group.has-native .sa-share__social {
		display: none;
	}

	.sa-share-band .sa-share__native {
		padding-inline: 34px;
	}
}