/* ==========================================================================
   ROD „Słoneczny” — style motywu
   --------------------------------------------------------------------------
   Zmienne --rod-* są zdefiniowane lokalnie, dzięki czemu arkusz działa
   zarówno w WordPressie, jak i w eksporcie statycznym (`strona-statyczna/`).
   Kolory dobrane tak, by każda para tekst/tło spełniała WCAG 2.1 AA
   (minimum 4.5:1 dla tekstu, 3:1 dla elementów interfejsu).

   Układ pliku:
     1–26   podstawy, składniki i widoki
     27–36  strona główna — tło, przyklejony nagłówek, hero z planem
            ogrodu, pasma, bento ogłoszeń i skrótów, sezon
     37–51  podstrony — pasmo nagłówka z okruchami, spis treści z boku,
            karty zamiast tabel, galeria, 404
     52     tryb ciemny
     53–54  druk i systemowy tryb wysokiego kontrastu

   Sekcje 27–51 przyszły z propozycji „wzbogacenie wizualne 2026”, która
   powstała jako nakładka obok motywu, a po decyzji zarządu została do niego
   wcielona. Tryb ciemny odsłonił przy tej okazji usterkę: kilka tokenów
   pełniło po dwie role naraz (tło strony i napis na ciemnym panelu),
   a część powierzchni była malowana wartościami dosłownymi. Stąd tokeny
   ról przy palecie — patrz komentarz w `:root`.

   Druk i tryb wysokiego kontrastu stoją na końcu celowo: przesłaniają
   wszystko powyżej, więc nowe sekcje dokładamy PRZED nimi.
   ========================================================================== */

:root {
	/* Obie palety zadeklarowane wprost — bez tego przeglądarka maluje
	   własnym kolorem pola formularzy i paski przewijania, a te nie
	   wiedzą nic o tym, że strona ma tryb ciemny. */
	color-scheme: light dark;

	/* Kolory — „Gdynia: morze i modernizm”: granat Bałtyku, biel
	   funkcjonalistycznych kamienic, mosiądz. Tożsamość miasta zamiast
	   barw związkowych. */
	--rod-papier: #f7f8f9;
	--rod-tusz: #141e28;          /* 15.9:1 na papierze */
	--rod-olowek: #556575;        /*  5.6:1 na papierze */
	--rod-glowny: #1b3a5c;        /* 10.9:1 na papierze */
	--rod-glowny-ciemny: #0f2438;
	--rod-glowny-jasny: #e4ebf1;
	--rod-akcent: #d69a2d;        /*  6.4:1 na granacie */
	--rod-linia: #d2dae1;

	/* Role, nie barwy.
	   Powyższe tokeny nazywają kolory; poniższe nazywają *zadania*, które
	   kolor pełni. Rozróżnienie wygląda na formalność, dopóki paleta stoi
	   w miejscu — przy przestawieniu na ciemną okazuje się warunkiem
	   czytelności. `--rod-papier` był tu wcześniej w dwóch rolach naraz:
	   tła strony i napisu na granacie. Po przestawieniu palety obie role
	   ciemniały razem i napis znikał w tle (1,06:1).

	   · napis-ciemne    — na powierzchni, która zostaje ciemna zawsze
	                       (panel, stopka, „Przejdź do treści”)
	   · na-wypelnieniu  — na pełnym wypełnieniu --rod-glowny / --rod-tusz,
	                       czyli tam, gdzie tło odwraca się razem z paletą
	   · atrament        — ciemny napis na mosiądzu; mosiądz jest jasny
	                       w obu paletach, więc napis zostaje ciemny
	   · powierzchnia    — płaszczyzna karty uniesionej nad papier
	   · pas-tabeli      — naprzemienny pas wiersza */
	--rod-napis-ciemne: #f7f8f9;   /* 14,8:1 na --rod-glowny-ciemny */
	--rod-na-wypelnieniu: #f7f8f9; /* 10,9:1 na --rod-glowny */
	--rod-atrament: #141e28;       /*  6,4:1 na --rod-akcent */
	--rod-powierzchnia: #fff;
	--rod-pas-tabeli: rgb(228 235 241 / 0.5);
	/* Ciemne pasmo nad stopką. O stopień jaśniejsze od stopki, bo inaczej
	   oba bloki zlewają się w jedną granatową plamę i fala między nimi
	   nie ma czego rozdzielać. */
	--rod-pasmo-ciemne: #1b3a5c;   /* napis 10,9:1; stopka #0f2438 o stopień niżej */

	/* Trzeci kolor: szałwia — zieleń przygaszona do poziomu, na którym nie
	   kłóci się z granatem. Ogród bez ani jednego zielonego piksela czyta
	   się jak strona urzędu. */
	--rod-szalwia: #6e8c6a;
	--rod-szalwia-mgla: #e9efe6;

	/* Skala głębi. Jeden cień na wszystko sprawia, że każda karta „leży”
	   tak samo wysoko i strona spłaszcza się do jednej płaszczyzny. Trzy
	   poziomy wyniesienia plus górny rozbłysk (1 px światła na krawędzi)
	   wystarczą, żeby oko zobaczyło warstwy. */
	--rod-cien-1: 0 1px 2px rgb(15 36 56 / 0.06);
	--rod-cien-2: 0 2px 4px rgb(15 36 56 / 0.06), 0 10px 24px rgb(15 36 56 / 0.08);
	--rod-cien-3: 0 6px 12px rgb(15 36 56 / 0.08), 0 24px 52px rgb(15 36 56 / 0.14);
	--rod-rozblysk: inset 0 1px 0 rgb(255 255 255 / 0.85);

	--rod-promien-duzy: 22px;

	/* Wysokość przyklejonego paska nawigacji (85 px, jedna linia menu).
	   Liczą się z niej: przyklejenie spisu treści i zapas przy skoku do
	   kotwicy — obie rzeczy muszą zacząć się pod paskiem, a nie pod nim. */
	--rod-pasek: 5.3125rem;

	/* Ziarno — filmowy szum w 3%. Nie ma prawa ruszyć kontrastu, a zabiera
	   wrażenie „pustej bieli drukarkowej”. */
	--rod-ziarno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

	/* Typografia */
	--rod-font-tresc: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--rod-font-naglowki: Georgia, "Iowan Old Style", "Palatino Linotype",
		"Times New Roman", serif;

	/* Odstępy */
	--rod-tresc-szer: 44rem;
	--rod-szeroka-szer: 68rem;
	--rod-margines: clamp(1.25rem, 5vw, 2.75rem);
	--rod-sekcja: clamp(3rem, 8vw, 5.5rem);

	/* Kształt — zaokrąglenia i cienie.
	   Gdyński modernizm to opływowe narożniki i horyzontalne podziały,
	   dlatego karty są lekko zaokrąglone, a nie ostro cięte. */
	--rod-pasmo-tlo: rgb(228 235 241 / 0.6);
	--rod-promien: 14px;
	--rod-promien-maly: 10px;
	--rod-cien: 0 1px 2px rgb(20 30 40 / 0.05), 0 10px 24px rgb(20 30 40 / 0.06);
	--rod-cien-uniesiony: 0 2px 4px rgb(20 30 40 / 0.07), 0 16px 34px rgb(20 30 40 / 0.11);

	/* Motyw graficzny — słońce (nazwa ogrodu) i horyzont (Bałtyk).
	   Grafiki trzymamy jako data-URI: zero dodatkowych zapytań i zero
	   zależności od plików, których zarząd mógłby przypadkiem nie wgrać. */
	--rod-graf-slonce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M18.81 30.2A11 11 0 1 1 29.19 30.2Z' fill='%23D69A2D'/%3E%3Cg fill='%23D69A2D'%3E%3Crect x='4' y='30.2' width='40' height='3.4' rx='1.7'/%3E%3Crect x='10.5' y='36.4' width='27' height='3' rx='1.5' opacity='.55'/%3E%3Crect x='16.5' y='42' width='15' height='2.6' rx='1.3' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
	--rod-graf-horyzont: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%230F2438' d='M0 90V26c220 26 470 32 730 30s470-16 710-6v40z'/%3E%3C/svg%3E");
	--rod-graf-tarcza: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='34' fill='%23D69A2D'/%3E%3C/svg%3E");

	/* Ikony konturowe (24×24). Wersje „-maska” są jednobarwne i podawane
	   przez mask-image, więc dziedziczą kolor tekstu. */
	--rod-ikona-liscie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5C4.5 11.5 11 5 19.5 4.5c.5 8.5-6 15-15 15z'/%3E%3Cpath d='M4.5 19.5c3.8-6.6 7-9.8 12.5-12'/%3E%3C/svg%3E");
	--rod-ikona-dokument: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12.5h6M9 16.5h4'/%3E%3C/svg%3E");
	--rod-ikona-koperta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='m3.8 7.2 8.2 5.8 8.2-5.8'/%3E%3C/svg%3E");
	--rod-maska-zegar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8V12l3.4 2.2'/%3E%3C/svg%3E");
	--rod-maska-pobierz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M12 10.5v6m0 0-2.4-2.4M12 16.5l2.4-2.4'/%3E%3C/svg%3E");
	--rod-maska-uwaga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2v6M12 16.6v.01'/%3E%3C/svg%3E");
	--rod-maska-slonce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Cpath d='M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6'/%3E%3C/svg%3E");
	--rod-maska-rozwin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
	--rod-maska-pinezka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.3 7-11.5a7 7 0 1 0-14 0c0 5.2 7 11.5 7 11.5z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
	--rod-maska-ogniwo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.8a4.2 4.2 0 0 0 6.3.45l2.5-2.5a4.2 4.2 0 0 0-5.94-5.94l-1.43 1.42'/%3E%3Cpath d='M14 10.2a4.2 4.2 0 0 0-6.3-.45l-2.5 2.5a4.2 4.2 0 0 0 5.94 5.94l1.42-1.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. Podstawy
   -------------------------------------------------------------------------- */

/* Wyściółka i ramka liczone do wewnątrz. Motyw polegał tu na stylach rdzenia
   WordPressa — a te nie obowiązują w podglądzie statycznym ani w edytorze,
   przez co `width: 100%` razem z wyściółką dawało element szerszy od okna
   i poziomy pasek przewijania przy 320 px (WCAG 2.1 AA, 1.4.10 Reflow).
   Arkusz ma się bronić sam, niezależnie od tego, co dokłada rdzeń. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* Delikatna poświata w prawym górnym rogu — strona ma „świecić” od nazwy
   ogrodu, a nie od kolorowych bloków. Gradient jest tak słaby, że nie rusza
   kontrastu tekstu (papier zmienia się o ułamek procenta jasności). */
body {
	background-color: var(--rod-papier);
	background-image: radial-gradient(
		58rem 26rem at 88% -8rem,
		rgb(242 183 5 / 0.10),
		rgb(242 183 5 / 0) 70%
	);
	background-repeat: no-repeat;
	color: var(--rod-tusz);
	font-family: var(--rod-font-tresc);
	font-size: 1.125rem;          /* 18px — czytelnie dla każdego wieku */
	line-height: 1.7;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rod-font-naglowki);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--rod-glowny);
	margin-block: 0 0.6em;
	text-wrap: balance;
}

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

/* --------------------------------------------------------------------------
   2. Dostępność (WCAG)
   -------------------------------------------------------------------------- */

/* Wyraźny, ciemny pierścień fokusu + słoneczna poświata.
   Ciemny pierścień daje 15.9:1 wobec tła, więc jest widoczny zawsze. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--rod-tusz);
	outline-offset: 2px;
	border-radius: 2px;
	box-shadow: 0 0 0 6px rgb(242 183 5 / 0.55);
}

/* Na ciemnych tłach odwracamy pierścień, żeby zachować kontrast. */
.rod-panel :where(a, button):focus-visible,
.rod-stopka :where(a, button):focus-visible {
	outline-color: var(--rod-papier);
	box-shadow: 0 0 0 6px rgb(242 183 5 / 0.65);
}

/* Link „przejdź do treści” — widoczny dopiero po nadaniu fokusu klawiaturą.
   Stylujemy też `.skip-link`, który WordPress dokłada automatycznie
   w motywach blokowych, żeby oba wyglądały tak samo.

   Selektor `body > .skip-link.screen-reader-text` nie jest ozdobnikiem:
   WordPress wstawia własny arkusz z regułą `.skip-link.screen-reader-text`,
   która ma wyższą szczegółowość niż `body > .skip-link` i wygrywała z naszą.
   Bez tego dopisku odnośnik wyglądał na stronie jak szara ramka WordPressa,
   a nie jak reszta motywu. `position` musimy dołożyć z `!important`,
   bo WordPress też użył tam `!important` — inaczej odnośnik zostaje
   przyklejony do góry dokumentu i przy przewiniętej stronie po nadaniu
   fokusu wyjeżdża poza ekran (WCAG 2.1 AA, 2.4.7 Widoczny fokus). */
.rod-skip-link,
.wp-site-blocks .skip-link,
body > .skip-link,
body > .skip-link.screen-reader-text {
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	/* Poza fokusem odnośnik jest nie tylko wypchnięty poza kadr, ale też
	   przycięty — tak samo, jak robi to WordPress. Sam `transform` zostawiał
	   go w drzewie jako element renderowany, przez co narzędzia raportowały
	   treść poza obszarem orientacyjnym, a lupa ekranowa potrafiła go złapać. */
	clip-path: inset(50%);
	transform: translateY(-130%);
	display: inline-block;
	padding: 0.9rem 1.4rem;
	background: var(--rod-glowny-ciemny);
	color: var(--rod-napis-ciemne);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease-out;
}

/* Wygląd powtórzony przy `:focus` z rozmysłem. Reguła WordPressa
   `.skip-link.screen-reader-text:focus` ma szczegółowość (0,3,0) — pseudoklasa
   liczy się jak klasa — więc bije naszą regułę podstawową (0,2,1) i malowała
   odnośnik na szaro. Dopiero nasz selektor z `:focus` (0,3,1) jest wyżej. */
.rod-skip-link:focus,
.wp-site-blocks .skip-link:focus,
body > .skip-link:focus,
body > .skip-link.screen-reader-text:focus {
	top: 0;
	left: 0;
	clip-path: none;
	transform: translateY(0);
	padding: 0.9rem 1.4rem;
	background: var(--rod-glowny-ciemny);
	color: var(--rod-napis-ciemne);
	font-size: 1rem;
	line-height: 1.4;
	text-decoration: none;
}

/* Tekst tylko dla czytników ekranu. */
.rod-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   3. Układ
   -------------------------------------------------------------------------- */

.rod-obszar {
	width: 100%;
	max-width: var(--rod-szeroka-szer);
	margin-inline: auto;
	padding-inline: var(--rod-margines);
}

/* Odstęp jako margines, nie padding — sąsiadujące sekcje scalają marginesy,
   więc przerwa między nimi nie sumuje się do podwójnej wysokości. */
.rod-sekcja {
	margin-block-start: var(--rod-sekcja);
}

/* --------------------------------------------------------------------------
   3a. Pasma — tło rozciągnięte na całą szerokość okna
   --------------------------------------------------------------------------
   Kolumna treści ma 68 rem, więc przy oknie 1600 px po bokach zostawało po
   ćwierć ekranu pustki, a cała strona była jednym płaskim tłem od nagłówka
   po stopkę. Pasmo daje rytm: sekcja dostaje delikatne wypełnienie na pełnej
   szerokości, a białe karty odbijają się od niego zamiast ginąć w bieli.

   Krawędzie są wygaszone gradientem, żeby nie powstały twarde szwy w poprzek
   strony — przejście ma być odczuwalne, ale niezauważalne.
   -------------------------------------------------------------------------- */

.rod-pasmo {
	margin-block-start: var(--rod-sekcja);
	padding-block: var(--rod-sekcja);
	background-image: linear-gradient(
		180deg,
		rgb(228 235 241 / 0) 0,
		var(--rod-pasmo-tlo) 5rem,
		var(--rod-pasmo-tlo) calc(100% - 5rem),
		rgb(228 235 241 / 0) 100%
	);
}

/* Wewnątrz pasma odstęp niesie już samo pasmo. */
.rod-pasmo > .rod-sekcja {
	margin-block-start: 0;
}

/* Sąsiadujące pasma nie mnożą przerwy. */
.rod-pasmo + .rod-pasmo {
	margin-block-start: 0;
}

/* Pasmo niesie już wypełnienie u dołu, więc kolejna sekcja nie dokłada
   swojego marginesu — inaczej powstawała przerwa podwójnej wysokości. */
.rod-pasmo + .rod-sekcja {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   4. Etykiety i nagłówki sekcji
   Powtarzalny motyw: słoneczna belka nad nagłówkiem sekcji.
   -------------------------------------------------------------------------- */

.rod-etykieta {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--rod-font-tresc);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rod-olowek);
}

.rod-naglowek-sekcji {
	margin-block: 0 2rem;
}

/* Sygnaturka sekcji: trzy mosiężne belki o malejącej długości. Czyta się
   jednocześnie jako promienie słońca i jako reling — dwa motywy, których
   trzyma się cała strona. */
.rod-naglowek-sekcji::before {
	content: "";
	display: block;
	width: 3.25rem;
	height: 14px;
	margin-bottom: 1.1rem;
	background-image:
		linear-gradient(var(--rod-akcent), var(--rod-akcent)),
		linear-gradient(rgb(214 154 45 / 0.6), rgb(214 154 45 / 0.6)),
		linear-gradient(rgb(214 154 45 / 0.35), rgb(214 154 45 / 0.35));
	background-repeat: no-repeat;
	background-size: 3.25rem 4px, 2rem 3px, 1rem 3px;
	background-position: 0 0, 0 6px, 0 11px;
}

/* --------------------------------------------------------------------------
   Kotwice sekcji
   Każdy nagłówek podstrony ma własne id, więc da się podać odnośnik prosto
   do fragmentu — np. /o-ogrodzie/#hymn. Skrypt `kotwice.js` dokłada obok
   takiego nagłówka ogniwo: kliknięcie kopiuje gotowy adres do schowka.
   Bez JavaScriptu kotwice nadal działają, tylko bez ikony i kopiowania.
   -------------------------------------------------------------------------- */

/* Skok do kotwicy nie ma kleić nagłówka do górnej krawędzi okna — bez tego
   odstępu wygląda to, jakby sekcja zaczynała się wyżej, niż zaczyna. */
.rod-tresc [id],
.rod-sekcja [id],
.rod-zakladki [id] {
	scroll-margin-block-start: 1.5rem;
}

/* Ikona jest widoczna od razu, a nie dopiero po najechaniu myszą: na telefonie
   nie ma czego najechać, a i przy komputerze ukryta funkcja to funkcja, której
   nikt nie znajdzie. Stonowana, żeby nie konkurowała z treścią nagłówka. */
.rod-kotwica {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 2 rem = 32 px, czyli powyżej minimum 24×24 px dla celu dotykowego
	   (WCAG 2.2, 2.5.8 Rozmiar celu). */
	width: 2rem;
	height: 2rem;
	margin-inline-start: 0.35rem;
	border-radius: var(--rod-promien-maly);
	vertical-align: middle;
	opacity: 0.45;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.rod-kotwica::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	background-color: var(--rod-glowny);
	-webkit-mask: var(--rod-maska-ogniwo) center / contain no-repeat;
	mask: var(--rod-maska-ogniwo) center / contain no-repeat;
}

.rod-kotwica:hover,
.rod-kotwica:focus-visible {
	background-color: var(--rod-glowny-jasny);
	opacity: 1;
}

/* Potwierdzenie skopiowania. Dymek znika po dwóch sekundach — o zdjęciu
   znacznika `data-rod-skopiowano` dba skrypt. */
.rod-kotwica[data-rod-skopiowano]::after {
	content: "Skopiowano odnośnik";
	position: absolute;
	inset-block-end: calc(100% + 0.35rem);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 5;
	padding: 0.3rem 0.6rem;
	border-radius: var(--rod-promien-maly);
	background-color: var(--rod-glowny-ciemny);
	color: var(--rod-napis-ciemne);
	font-family: var(--rod-font-tresc);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
}

/* Sekcja wskazana kotwicą dostaje mosiężną belkę z lewej — po skoku widać,
   dokąd właściwie odnośnik prowadził. Sam kolor by nie wystarczył
   (WCAG 2.1 AA, 1.4.1 Zmysły), więc niesie to również kształt. Belkę bierze
   sam nagłówek (albo rocznik w galerii), a nie cały panel zakładki — inaczej
   obramowanie ciągnęłoby się przez pół strony. */
.rod-tresc :is(h2, h3, details):target,
.rod-sekcja :is(h2, h3):target {
	border-inline-start: 4px solid var(--rod-akcent);
	padding-inline-start: 0.85rem;
	margin-inline-start: -0.85rem;
}

/* --------------------------------------------------------------------------
   5. Nagłówek strony
   -------------------------------------------------------------------------- */

.rod-naglowek {
	border-bottom: 1px solid var(--rod-linia);
	background: var(--rod-papier);
}

/* Wąski pasek „wschodu nad zatoką” — mosiądz przechodzący w granat.
   Jedyny mocny kolor na samej górze strony; reszta nagłówka zostaje spokojna. */
.rod-naglowek::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(
		90deg,
		#e8b44a 0%,
		var(--rod-akcent) 22%,
		var(--rod-glowny) 64%,
		var(--rod-glowny-ciemny) 100%
	);
}

.rod-naglowek__wnetrze {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-block: 1.1rem;
}

.rod-marka {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	color: inherit;
	/* Element zgięty (flex item) domyślnie nie zwęża się poniżej swojej
	   treści, więc długa nazwa ogrodu rozpychała nagłówek i przy 320 px
	   strona dostawała poziomy pasek przewijania (WCAG 2.1 AA, 1.4.10).
	   Z `min-width: 0` nazwa zawija się zamiast rozpychać. */
	min-width: 0;
}

.rod-marka__znak {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
}

/* Znak ogrodu: słońce wschodzące nad horyzontem — Gdynia i „Słoneczny”
   w jednym kształcie. Przy najechaniu tarcza podnosi się o włos ponad
   wodę; obrót odpadł, bo przechylałby linię horyzontu. */
.rod-znak__tarcza {
	transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rod-marka:hover .rod-znak__tarcza {
	translate: 0 -1.6px;
}

/* Na ciemnym tle woda musi być jasna, żeby znak w ogóle było widać. */
.rod-panel .rod-znak__woda,
.rod-stopka .rod-znak__woda {
	fill: var(--rod-napis-ciemne);
}

.rod-marka__tekst {
	display: block;
}

.rod-marka__nazwa {
	display: block;
	font-family: var(--rod-font-naglowki);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--rod-glowny);
}

.rod-marka__opis {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rod-olowek);
}

/* --------------------------------------------------------------------------
   6. Nawigacja
   -------------------------------------------------------------------------- */

.rod-nawigacja ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rod-nawigacja a,
.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-block;
	padding-block: 0.35rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--rod-tusz);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.rod-nawigacja a:hover,
.rod-nawigacja a:focus-visible {
	border-bottom-color: var(--rod-akcent);
	color: var(--rod-glowny);
}

.rod-nawigacja [aria-current="page"] {
	border-bottom-color: var(--rod-glowny);
	color: var(--rod-glowny);
}

/* --------------------------------------------------------------------------
   7. Tytuł strony głównej
   -------------------------------------------------------------------------- */

.rod-tytul {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.75rem, 4vw, 2.5rem);
}

/* Kadrowane słońce przy prawej krawędzi — powiększone echo znaku ogrodu.
   Chowamy je na wąskich ekranach, gdzie leżałoby pod tekstem zajawki. */
.rod-tytul::after {
	content: "";
	position: absolute;
	right: 0;
	top: -2.5rem;
	width: clamp(10rem, 22vw, 19rem);
	aspect-ratio: 1;
	background: var(--rod-graf-slonce) center / contain no-repeat;
	opacity: 0.26;
	pointer-events: none;
}

@media (max-width: 47.99rem) {
	.rod-tytul::after {
		display: none;
	}
}

.rod-tytul__nazwa {
	margin: 0 0 0.75rem;
	font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.rod-tytul__lead {
	max-width: 46ch;
	margin: 0;
	font-size: 1.25rem;
	color: var(--rod-olowek);
}

/* --------------------------------------------------------------------------
   8. Tablica ogłoszeń — element sygnaturowy strony
   Zamiast ozdobnego zdjęcia w nagłówku pokazujemy to, po co ludzie
   naprawdę wchodzą na stronę ogrodu: kiedy i gdzie zastaną zarząd.
   -------------------------------------------------------------------------- */

.rod-panel {
	position: relative;
	isolation: isolate;
	background-color: var(--rod-glowny-ciemny);
	/* Światło wpadające zza prawego górnego rogu — ta sama „pora dnia”,
	   co poświata na tle strony. */
	background-image: radial-gradient(
		70% 100% at 100% 0%,
		rgb(242 183 5 / 0.17),
		rgb(242 183 5 / 0) 68%
	);
	color: var(--rod-napis-ciemne);
	container-type: inline-size;
	border-left: 6px solid var(--rod-akcent);
	border-radius: var(--rod-promien);
	box-shadow: var(--rod-cien);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	overflow: hidden;
}

/* Delikatne pionowe kreski wchodzące od prawej — zagony widziane z góry.
   Ujemny z-index (przy isolation: isolate) kładzie je nad tłem panelu,
   ale pod tekstem, więc nic nie traci na czytelności. */
.rod-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		90deg,
		rgb(242 183 5 / 0.13) 0 1px,
		transparent 1px 15px
	);
	-webkit-mask-image: linear-gradient(to left, #000, transparent 58%);
	mask-image: linear-gradient(to left, #000, transparent 58%);
}

.rod-panel__siatka {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 46rem) {
	.rod-panel__siatka {
		grid-template-columns: 1.35fr 1fr;
	}

	.rod-panel__kolumna + .rod-panel__kolumna {
		padding-left: clamp(1.75rem, 4vw, 3rem);
		border-left: 1px solid rgb(251 250 247 / 0.22);
	}
}

.rod-panel .rod-etykieta {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--rod-akcent);
}

/* Zegar przy etykiecie dyżuru — najczęściej szukana informacja na stronie
   ogrodu dostaje najprostszy możliwy piktogram. */
.rod-panel .rod-etykieta::before {
	content: "";
	flex: none;
	width: 1.0625rem;
	height: 1.0625rem;
	background-color: currentColor;
	-webkit-mask: var(--rod-maska-zegar) center / contain no-repeat;
	mask: var(--rod-maska-zegar) center / contain no-repeat;
}

.rod-panel__dzien {
	margin: 0;
	font-family: var(--rod-font-naglowki);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	line-height: 1.15;
	color: var(--rod-napis-ciemne);
}

.rod-panel__godziny {
	display: block;
	margin: 0.2rem 0 0.75rem;
	font-family: var(--rod-font-naglowki);
	font-size: clamp(2.75rem, 1.8rem + 4.4vw, 4.5rem);
	font-size: clamp(2.75rem, 6.5cqi, 4.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--rod-akcent);
	font-variant-numeric: tabular-nums;
}

.rod-panel__opis {
	max-width: 30ch;
	margin: 0;
	color: color-mix(in srgb, var(--rod-napis-ciemne) 86%, transparent);
}

.rod-panel dl {
	margin: 0;
	display: grid;
	gap: 1.15rem;
}

.rod-panel dt {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rod-akcent);
	margin-bottom: 0.15rem;
}

.rod-panel dd {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--rod-napis-ciemne);
	overflow-wrap: break-word;
}

.rod-panel a {
	color: var(--rod-napis-ciemne);
	text-decoration-color: rgb(242 183 5 / 0.7);
	text-underline-offset: 0.2em;
}

.rod-panel a:hover {
	color: var(--rod-akcent);
}

/* Panel wstawiony w treść podstrony (np. Kontakt): `.rod-tresc a` ma tę samą
   specyficzność co `.rod-panel a`, ale stoi niżej w arkuszu, więc bez tego
   wygrywa granat na granacie — 1.2:1, tekst praktycznie niewidoczny. */
.rod-tresc .rod-panel a {
	color: var(--rod-napis-ciemne);
}

.rod-tresc .rod-panel a:hover {
	color: var(--rod-akcent);
}

/* --------------------------------------------------------------------------
   9. Lista ogłoszeń
   Data jest najważniejszym elementem porządkującym — dlatego prowadzi wiersz.
   -------------------------------------------------------------------------- */

/* Lista wierszy oddzielonych linią, jedno ogłoszenie pod drugim — jak
   tablica przy bramie. Bez ramek i kart: porządek robi sama linia. */
.rod-ogloszenia {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rod-linia);
}

/* WordPress renderuje każdy wpis pętli jako <li>, dlatego stylujemy oba
   warianty: własną klasę (podgląd statyczny) i element listy (WordPress). */
.rod-ogloszenie,
.rod-ogloszenia > li {
	position: relative;
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--rod-linia);
	list-style: none;
}

/* Mosiężna sztachetka przy najechaniu — porządkuje wzrok na długiej liście,
   nie dokładając żadnej ramki, gdy nic się nie dzieje. */
.rod-ogloszenie::before,
.rod-ogloszenia > li::before {
	content: "";
	position: absolute;
	left: -0.9rem;
	top: 1.75rem;
	bottom: 1.75rem;
	width: 3px;
	border-radius: 3px;
	background: var(--rod-akcent);
	opacity: 0;
	transition: opacity 0.18s ease-out;
}

.rod-ogloszenie:hover::before,
.rod-ogloszenia > li:hover::before,
.rod-ogloszenie:focus-within::before,
.rod-ogloszenia > li:focus-within::before {
	opacity: 1;
}

.rod-ogloszenie__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.4rem;
}

.rod-ogloszenie__data {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rod-olowek);
	font-variant-numeric: tabular-nums;
}

/* Oznaczenia ogłoszenia (taksonomia) — domyślnie spokojny, zielony żeton.
   „Ważne” dostaje słoneczne wypełnienie, żeby rzucało się w oczy na liście. */
.rod-ogloszenie__oznaczenia {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* Oznaczenia jako pigułki: lżejsze w odbiorze niż prostokątne ramki,
   a przy okazji odróżniają się od przycisków. */
.rod-znacznik,
.rod-ogloszenie__oznaczenia a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--rod-glowny);
	border-radius: 999px;
	background: transparent;
	color: var(--rod-glowny);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.5;
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.rod-znacznik:hover,
.rod-ogloszenie__oznaczenia a:hover {
	background: var(--rod-glowny);
	color: var(--rod-na-wypelnieniu);
}

.rod-znacznik--wazne,
.rod-ogloszenie__oznaczenia a.rod-znacznik--wazne {
	background: var(--rod-akcent);
	border-color: #b98d05;
	color: var(--rod-atrament);
}

/* Słoneczko przy „Ważne” — oznaczenie działa też dla kogoś, kto czyta
   listę pobieżnie i wyłapuje tylko kształty. */
.rod-znacznik--wazne::before,
.rod-ogloszenie__oznaczenia a.rod-znacznik--wazne::before {
	content: "";
	flex: none;
	width: 0.95rem;
	height: 0.95rem;
	background-color: currentColor;
	-webkit-mask: var(--rod-maska-slonce) center / contain no-repeat;
	mask: var(--rod-maska-slonce) center / contain no-repeat;
}

.rod-znacznik--wazne:hover,
.rod-ogloszenie__oznaczenia a.rod-znacznik--wazne:hover {
	background: var(--rod-tusz);
	border-color: var(--rod-tusz);
	color: var(--rod-akcent);
}

.rod-ogloszenie__tytul {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
}

.rod-ogloszenie__tytul a {
	color: var(--rod-glowny);
	text-decoration: none;
}

.rod-ogloszenie__tytul a:hover {
	color: var(--rod-tusz);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.rod-ogloszenie__zajawka {
	max-width: 62ch;
	margin: 0;
	color: var(--rod-olowek);
}

/* --------------------------------------------------------------------------
   10. Kafelki skrótów
   -------------------------------------------------------------------------- */

.rod-kafelki {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Kafelek to biała karta odbijająca się od papieru miękkim cieniem —
   lżej niż wypełnienie kolorem, a hierarchia zostaje ta sama. */
.rod-kafelek {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--rod-powierzchnia);
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	box-shadow: var(--rod-cien);
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out,
		border-color 0.18s ease-out;
}

.rod-kafelek:hover,
.rod-kafelek:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--rod-cien-uniesiony);
	border-color: rgb(214 154 45 / 0.55);
}

/* Bulaj — okrągłe okno z gdyńskich kamienic i statków. Ikona w środku mówi,
   o czym jest kafelek, zanim ktoś przeczyta nagłówek. */
.rod-kafelek::before {
	content: "";
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background-color: var(--rod-glowny-jasny);
	background-image: var(--rod-ikona-liscie);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.5rem 1.5rem;
	box-shadow: inset 0 0 0 1px rgb(27 58 92 / 0.12);
}

.rod-kafelek--dokumenty::before {
	background-image: var(--rod-ikona-dokument);
}

.rod-kafelek--kontakt::before {
	background-image: var(--rod-ikona-koperta);
}

.rod-kafelek h3 {
	margin: 0 0 0.5rem;
	font-size: 1.3125rem;
}

.rod-kafelek p {
	margin: 0 0 1.25rem;
	color: var(--rod-olowek);
	font-size: 1.0625rem;
}

.rod-kafelek a {
	margin-top: auto;
	font-weight: 600;
	color: var(--rod-glowny);
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   11. Lista dokumentów do pobrania
   -------------------------------------------------------------------------- */

.rod-dokumenty {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rod-linia);
}

.rod-dokument {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--rod-linia);
}

/* Ikona pliku przed nazwą — od razu widać, że odnośnik prowadzi do pobrania,
   a nie na kolejną podstronę. */
.rod-dokument__nazwa::before {
	content: "";
	display: inline-block;
	width: 1.15rem;
	height: 1.15rem;
	margin-right: 0.55rem;
	vertical-align: -0.18em;
	background-color: var(--rod-akcent);
	-webkit-mask: var(--rod-maska-pobierz) center / contain no-repeat;
	mask: var(--rod-maska-pobierz) center / contain no-repeat;
}

.rod-dokument__nazwa {
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--rod-glowny);
	text-underline-offset: 0.2em;
}

.rod-dokument__info {
	font-size: 0.9375rem;
	color: var(--rod-olowek);
	font-variant-numeric: tabular-nums;
}

/* Wyjaśnienie, komu służy dany druk („dotyczy osoby bliskiej innej niż
   współmałżonek”). Schodzi do własnego wiersza — obok nazwy i rozmiaru
   rozpychałoby pozycję listy na trzy poziomy tekstu w jednej linii. */
.rod-dokument__opis {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--rod-olowek);
}

/* --------------------------------------------------------------------------
   12. Galeria
   -------------------------------------------------------------------------- */

.rod-galeria {
	display: grid;
	gap: 1rem;
	/* `min(…, 100%)` zamiast samego 16rem: na wąskim ekranie kafelek nie może
	   być szerszy niż miejsce, które ma — inaczej siatka wypycha stronę
	   w poziomie (WCAG 2.1 AA, 1.4.10 Reflow). */
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Reguła `.rod-tresc ul` z sekcji 19 pilnuje czytelności list w tekście:
   62 znaki szerokości i wcięcie na punktory. Siatka zdjęć jest listą tylko
   technicznie — ani miara wiersza, ani wcięcie nie mają do niej zastosowania,
   a bez tego zdjęcia trzymały się szerokości akapitu mimo szerszej kolumny. */
.rod-tresc .rod-galeria {
	max-width: none;
	padding-left: 0;
}

.rod-galeria figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--rod-promien);
}

.rod-galeria img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--rod-glowny-jasny);
	transition: transform 0.4s ease;
}

.rod-galeria figure:hover img {
	transform: scale(1.04);
}

.rod-galeria figcaption {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	color: var(--rod-olowek);
}

/* --- Zakładki galerii ------------------------------------------------------
   Pasek zakładek składa skrypt (`zakladki.js`). Bez JavaScriptu nie powstaje,
   a sekcje leżą jedna pod drugą i wszystkie są widoczne — dlatego poniższe
   reguły opisują wyłącznie stan „z paskiem”. */

.rod-zakladki {
	margin-block: 2rem;
}

/* Siatka zdjęć dostaje szerszą kolumnę niż tekst. 44rem to miara wygodna do
   czytania, ale na kafelki za wąska — mieszczą się w niej ledwie dwa.
   Klasa `alignwide` WordPressa tu nie wystarcza: rodzic („.rod-obszar”) jest
   już ograniczony do szerokości treści, a `max-width` nie rozepchnie elementu
   ponad rodzica. Wychodzimy więc symetrycznym marginesem ujemnym.

   Selektor z dwiema klasami i `!important` nie są ozdobnikiem — tak samo jak
   przy odnośniku „Przejdź do treści” w sekcji 2. WordPress wstawia własny
   arkusz z regułą `.is-layout-constrained > :where(…)`, która ma tę samą
   szczegółowość co sama nazwa klasy (więc wygrywa kolejnością), a marginesy
   ustawia z `!important`. Bez tego zakładki zostają w kolumnie tekstu.

   Odjęte 1rem to zapas na pasek przewijania: `100vw` liczy go do szerokości
   okna, a `clientWidth` już nie — bez zapasu strona dostałaby przewijanie
   w poziomie (WCAG 2.1 AA, 1.4.10 Reflow). */
.rod-tresc > .rod-zakladki {
	--rod-zakladki-szer: max(
		100%,
		min(var(--rod-szeroka-szer), 100vw - 2 * var(--rod-margines) - 1rem)
	);

	width: var(--rod-zakladki-szer);
	max-width: none;
	margin-inline: calc((100% - var(--rod-zakladki-szer)) / 2) !important;
}

.rod-zakladki__pasek {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 1.75rem;
	border-bottom: 2px solid var(--rod-linia);
}

.rod-zakladki__zakladka {
	appearance: none;
	position: relative;
	bottom: -2px;
	padding: 0.7rem 1.15rem;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: var(--rod-promien-maly) var(--rod-promien-maly) 0 0;
	background: none;
	color: var(--rod-olowek);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.rod-zakladki__zakladka:hover {
	color: var(--rod-glowny);
	background: var(--rod-glowny-jasny);
}

.rod-zakladki__zakladka[aria-selected="true"] {
	color: var(--rod-glowny);
	border-bottom-color: var(--rod-akcent);
}

.rod-zakladki__panel[hidden] {
	display: none;
}

.rod-zakladki__tytul {
	margin-top: 0;
}

/* --- Rocznik — jedna edycja Dnia Działkowca ------------------------------- */

/* Kwadratowy kadr miniatur. Zdjęcia w roczniku bywają i poziome (aparat),
   i pionowe (telefon) — kwadrat obcina jedne i drugie po równo i trzyma
   siatkę w rytmie. Pełny kadr widać po kliknięciu, w pokazie zdjęć. */
.rod-rocznik .rod-galeria img {
	aspect-ratio: 1;
}

.rod-rocznik__tytul {
	margin: 0;
	font-family: var(--rod-font-naglowki);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--rod-glowny);
}

.rod-rocznik__meta {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--rod-olowek);
	font-variant-numeric: tabular-nums;
}

/* Tegoroczne zdjęcia — wyróżnione kartą w barwach `.rod-uwaga`, żeby na
   pierwszy rzut oka było widać, który rocznik jest ten świeży. */
.rod-rocznik--biezacy {
	padding: 1.5rem;
	background: var(--rod-glowny-jasny);
	border-left: 4px solid var(--rod-akcent);
	border-radius: 0 var(--rod-promien) var(--rod-promien) 0;
}

.rod-rocznik__znacznik {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--rod-glowny);
	color: var(--rod-na-wypelnieniu);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rod-rocznik--biezacy .rod-rocznik__meta {
	margin-top: 0.35rem;
}

.rod-rocznik--biezacy .rod-rocznik__opis {
	margin: 0.75rem 0 0;
}

.rod-rocznik--biezacy .rod-galeria {
	margin-top: 1.5rem;
	/* Kafelki nieco większe niż w archiwum — najnowszy rocznik ma się rzucać
	   w oczy. Nie więcej niż 17rem: przy 20rem na tablecie zostawała jedna
	   kolumna, czyli mniej niż w archiwum obok. */
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* Zapowiedź — zakładka „Najnowsze zdjęcia”, zanim tegoroczne zdjęcia
   trafią do zarządu. Bez siatki karta nie potrzebuje tyle miejsca. */
.rod-rocznik--zapowiedz .rod-rocznik__opis {
	max-width: 46ch;
}

/* Reszta zdjęć rocznika — rozwinięcie pod pierwszą partią.
   `summary` udaje przycisk, bo tym w praktyce jest; trójkącik systemowy
   chowamy, żeby nie dublował strzałki nagłówka rocznika. */
.rod-rocznik__reszta {
	margin-top: 1.25rem;
}

.rod-rocznik__wiecej {
	display: inline-block;
	padding: 0.7rem 1.35rem;
	background: transparent;
	border: 2px solid var(--rod-glowny);
	border-radius: var(--rod-promien-maly);
	color: var(--rod-glowny);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.rod-rocznik__wiecej::-webkit-details-marker {
	display: none;
}

.rod-rocznik__wiecej:hover {
	background: var(--rod-glowny);
	color: var(--rod-na-wypelnieniu);
}

/* Napis zmienia się razem ze stanem rozwinięcia — „Pokaż pozostałe 86 zdjęć”
   po rozwinięciu byłoby nieprawdą. */
.rod-rocznik__reszta:not([open]) .rod-rocznik__wiecej-zwin,
.rod-rocznik__reszta[open] .rod-rocznik__wiecej-pokaz {
	display: none;
}

/* Rocznik archiwalny — zwinięty `<details>`. Zamknięty nie pobiera miniatur,
   więc archiwum z setkami zdjęć nie obciąża wejścia na stronę. */
.rod-rocznik--archiwalny {
	padding-inline: 1.25rem;
	background: var(--rod-powierzchnia);
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
}

/* Rozwinięty rocznik potrzebuje dołu. Bez niego ostatni element — siatka
   albo przycisk „Pokaż pozostałe” — dotyka krawędzi karty, a jego margines
   dolny w ogóle z niej ucieka: karta nie ma tam ani ramki, ani wypełnienia,
   więc margines nie ma się o co zatrzymać i przycisk wychodzi poza kartę.
   Zamknięty rocznik ma zostać samym paskiem nagłówka, stąd `[open]`. */
.rod-rocznik--archiwalny[open] {
	padding-bottom: 1.25rem;
}

.rod-rocznik--archiwalny + .rod-rocznik--archiwalny {
	margin-top: 1rem;
}

.rod-rocznik__naglowek {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 1rem;
	padding: 1.1rem 0;
	list-style: none;
	cursor: pointer;
}

/* Trójkącik systemowy — Safari rysuje go osobnym pseudoelementem. */
.rod-rocznik__naglowek::-webkit-details-marker {
	display: none;
}

.rod-rocznik__naglowek::before {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	align-self: center;
	background-color: var(--rod-glowny);
	-webkit-mask: var(--rod-maska-rozwin) center / contain no-repeat;
	mask: var(--rod-maska-rozwin) center / contain no-repeat;
	transition: rotate 0.2s ease;
}

.rod-rocznik--archiwalny[open] .rod-rocznik__naglowek::before {
	rotate: 90deg;
}

.rod-rocznik--archiwalny[open] .rod-rocznik__naglowek {
	border-bottom: 1px solid var(--rod-linia);
}

.rod-rocznik--archiwalny .rod-galeria {
	margin-block: 1.25rem 0;
}

/* --------------------------------------------------------------------------
   13. Tabela (np. terminarz, opłaty)
   -------------------------------------------------------------------------- */

.rod-tabela-otoczka {
	overflow-x: auto;
	margin-block: 1.5rem;
}

.rod-tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.0625rem;
}

.rod-tabela caption {
	text-align: left;
	margin-bottom: 0.75rem;
	color: var(--rod-olowek);
	font-size: 0.9375rem;
}

.rod-tabela th,
.rod-tabela td {
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--rod-linia);
	vertical-align: top;
}

/* Naprzemienne tło wierszy — palec sam prowadzi wzrok po terminarzu. */
.rod-tabela tbody tr:nth-child(even) {
	background: var(--rod-pas-tabeli);
}

/* Zakresy godzin i dat łamały się po półpauzie („10:00–” / „12:00”), przez co
   jeden termin czytało się jako dwa. Komórka z godzinami ma zostać w wierszu;
   gdyby przez to zabrakło miejsca, otoczka tabeli i tak daje przewijanie. */
.rod-tabela .rod-godziny {
	white-space: nowrap;
}

.rod-tabela th {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rod-glowny);
	border-bottom: 2px solid var(--rod-glowny);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. Przyciski
   -------------------------------------------------------------------------- */

.rod-przycisk {
	display: inline-block;
	padding: 0.85rem 1.5rem;
	background: var(--rod-glowny);
	color: var(--rod-na-wypelnieniu);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--rod-glowny);
	border-radius: var(--rod-promien-maly);
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out,
		transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.rod-przycisk:hover,
.rod-przycisk:focus-visible {
	background: var(--rod-tusz);
	border-color: var(--rod-tusz);
	color: var(--rod-na-wypelnieniu);
	transform: translateY(-2px);
	box-shadow: var(--rod-cien);
}

.rod-przycisk--obrys {
	background: transparent;
	color: var(--rod-glowny);
}

.rod-przycisk--obrys:hover,
.rod-przycisk--obrys:focus-visible {
	background: var(--rod-glowny);
	color: var(--rod-na-wypelnieniu);
	border-color: var(--rod-glowny);
}

/* Przycisk wklejony w treść strony: `.rod-tresc a` ma wyższą specyficzność
   niż `.rod-przycisk`, więc bez tego granatowy napis lądował na granatowym
   tle. Zarząd ma prawo wstawić przycisk gdziekolwiek — kolory muszą się
   bronić same. */
.rod-tresc .rod-przycisk {
	color: var(--rod-na-wypelnieniu);
}

.rod-tresc .rod-przycisk--obrys {
	color: var(--rod-glowny);
}

.rod-tresc .rod-przycisk--obrys:hover,
.rod-tresc .rod-przycisk--obrys:focus-visible {
	color: var(--rod-na-wypelnieniu);
}

/* --------------------------------------------------------------------------
   15. Mapa dojazdu (Mapy Google — osadzone na stronie Kontakt)
   -------------------------------------------------------------------------- */

.rod-mapa {
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	overflow: hidden;
	background: var(--rod-glowny-jasny);
	box-shadow: var(--rod-cien);
}

.rod-mapa iframe {
	display: block;
	width: 100%;
	height: clamp(18rem, 45vw, 26rem);
	border: 0;
}

/* --------------------------------------------------------------------------
   16. Plan ogrodu — zdjęcie tablicy z rozkładem alejek i numerami działek
   -------------------------------------------------------------------------- */

/* Plan jest gęsty: 205 numerów działek na jednym arkuszu. Na telefonie i tak
   nie da się go odczytać w całości, dlatego obrazek jest odnośnikiem do pełnej
   rozdzielczości, a pod spodem stoi opis alejek słowami — dla czytników ekranu
   i dla każdego, kto woli tekst od wpatrywania się w mapę. */
.rod-plan {
	margin-block: 1.75rem;
}

.rod-plan__ramka {
	display: block;
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	overflow: hidden;
	background: var(--rod-glowny-jasny);
	box-shadow: var(--rod-cien);
}

.rod-plan__ramka:hover,
.rod-plan__ramka:focus-visible {
	box-shadow: var(--rod-cien-uniesiony);
}

.rod-plan__ramka img {
	display: block;
	width: 100%;
	height: auto;
}

.rod-plan__podpis {
	margin-top: 0.75rem;
	font-size: 0.95rem;
	color: var(--rod-olowek);
}

/* --------------------------------------------------------------------------
   16b. Hymn PZD — nagranie wraz z tekstem
   --------------------------------------------------------------------------
   Tekst pod odtwarzaczem nie jest ozdobnikiem: dla nagrania dźwiękowego to
   alternatywa wymagana przez WCAG 2.1 AA (1.2.1). Dlatego siedzi w tej samej
   karcie co odtwarzacz, a nie w osobnym rozwijanym bloku.
   -------------------------------------------------------------------------- */

.rod-hymn {
	margin-block: 1.75rem;
	padding: clamp(1.25rem, 4vw, 1.75rem);
	background: var(--rod-powierzchnia);
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	box-shadow: var(--rod-cien);
}

.rod-hymn__etykieta {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rod-glowny);
}

.rod-hymn__tytul {
	margin: 0;
	font-family: var(--rod-font-naglowki);
	font-size: 1.375rem;
	color: var(--rod-glowny);
}

.rod-hymn__meta {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--rod-olowek);
}

.rod-hymn__odtwarzacz {
	display: block;
	width: 100%;
	margin-top: 1.25rem;
}

.rod-hymn__slowa {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rod-linia);
}

.rod-hymn__slowa-tytul {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rod-olowek);
	font-family: var(--rod-font-tresc);
}

/* Wersy składamy krojem nagłówkowym i luźniej niż zwykły akapit — to pieśń,
   a nie proza, i łamanie wierszy ma być widoczne. */
.rod-hymn__slowa p {
	margin: 0;
	font-family: var(--rod-font-naglowki);
	font-size: 1.0625rem;
	line-height: 1.9;
	color: var(--rod-tusz);
}

/* --------------------------------------------------------------------------
   17. Pokaz zdjęć — podgląd grafiki w dedykowanym oknie

   Okno jest ulepszeniem: bez JavaScriptu zdjęcie zostaje zwykłym odnośnikiem
   do pliku. Kolorystyka celowo schodzi do granatu z --rod-glowny-ciemny,
   żeby zdjęcie miało neutralne, ciemne tło i żeby okno nie udawało strony.
   -------------------------------------------------------------------------- */

/* Strona pod oknem nie może się przewijać — inaczej gest przewijania
   „przechodzi” przez zdjęcie i przesuwa treść, której nie widać. */
body.rod-pokaz-otwarty {
	overflow: hidden;
}

.rod-pokaz {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto 1fr;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.25rem);
	padding: clamp(0.75rem, 2vw, 1.5rem);
	/* Prawie krycie: przy 0.94 tekst strony prześwitywał spod zdjęcia.
	   Rozmycie tła jest dodatkiem — gdzie go nie ma, wystarczy sam kolor. */
	background: rgb(15 36 56 / 0.985);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	/* Zdjęcie ma być czytelne także wtedy, gdy przeglądarka rysuje pasek
	   adresu na dole ekranu telefonu. */
	padding-bottom: max(clamp(0.75rem, 2vw, 1.5rem), env(safe-area-inset-bottom));
}

.rod-pokaz[hidden] {
	display: none;
}

.rod-pokaz__pasek {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: rgb(251 250 247 / 0.92);
}

.rod-pokaz__zamknij {
	margin-left: auto;
}

.rod-pokaz__licznik {
	margin: 0;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rod-pokaz__scena {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin: 0;
	min-width: 0;
	min-height: 0;
	height: 100%;
}

.rod-pokaz__obraz {
	max-width: 100%;
	/* Podpis i pasek muszą zmieścić się nad i pod zdjęciem, stąd odjęte 9rem. */
	max-height: calc(100vh - 9rem);
	object-fit: contain;
	border-radius: var(--rod-promien-maly);
	background: var(--rod-glowny);
	transition: opacity 0.18s ease;
}

.rod-pokaz--wczytuje .rod-pokaz__obraz {
	opacity: 0.35;
}

.rod-pokaz__podpis {
	max-width: 46rem;
	margin: 0;
	text-align: center;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgb(251 250 247 / 0.85);
}

.rod-pokaz__podpis[hidden] {
	display: none;
}

/* Przyciski: mosiężny obrys na granacie daje kontrast 6.4:1, więc spełniają
   1.4.11 również jako elementy nietekstowe. */
.rod-pokaz__przycisk {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgb(214 154 45 / 0.55);
	border-radius: 50%;
	background: rgb(20 30 40 / 0.55);
	color: var(--rod-akcent);
	cursor: pointer;
}

.rod-pokaz__przycisk:hover {
	background: rgb(214 154 45 / 0.18);
	border-color: var(--rod-akcent);
}

.rod-pokaz__przycisk:focus-visible {
	outline: 3px solid var(--rod-akcent);
	outline-offset: 3px;
}

.rod-pokaz__przycisk[hidden] {
	display: none;
}

/* Znaki rysujemy maską, więc dziedziczą kolor przycisku i pozostają widoczne
   również w trybie wymuszonych kolorów. */
.rod-pokaz__przycisk::before {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	background-color: currentColor;
	-webkit-mask: var(--znak) center / contain no-repeat;
	mask: var(--znak) center / contain no-repeat;
}

.rod-pokaz__zamknij {
	--znak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.rod-pokaz__strzalka {
	grid-row: 2;
}

.rod-pokaz__strzalka--wstecz {
	grid-column: 1;
	--znak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}

.rod-pokaz__strzalka--dalej {
	grid-column: 3;
	--znak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Na wąskim ekranie strzałki po bokach zjadłyby szerokość zdjęcia,
   więc schodzą pod nie, do jednego rzędu z licznikiem gestów. */
@media (max-width: 34rem) {
	.rod-pokaz {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr auto;
	}

	.rod-pokaz__scena {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.rod-pokaz__strzalka {
		grid-row: 3;
		justify-self: center;
	}

	.rod-pokaz__strzalka--wstecz {
		grid-column: 1;
	}

	.rod-pokaz__strzalka--dalej {
		grid-column: 2;
	}

	.rod-pokaz__obraz {
		max-height: calc(100vh - 12rem);
	}
}

/* Miniatura zapowiada, co się stanie po kliknięciu. */
.rod-plan__ramka {
	cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   18. Stopka
   -------------------------------------------------------------------------- */

.rod-stopka {
	position: relative;
	margin-top: var(--rod-sekcja);
	background: var(--rod-glowny-ciemny);
	color: rgb(251 250 247 / 0.9);
	padding-block: clamp(2.75rem, 6vw, 4rem);
}

/* Linia brzegowa: granat stopki podchodzi łagodną falą, a za nią chowa się
   mosiężna tarcza słońca. Zamiast prostego cięcia — zamknięcie strony
   obrazem, od którego ogród ma nazwę, a miasto charakter. */
.rod-stopka::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: clamp(2.5rem, 6vw, 4.5rem);
	pointer-events: none;
	background-image: var(--rod-graf-horyzont), var(--rod-graf-tarcza);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom center, right 18% bottom 0;
	background-size: 100% 100%, clamp(3rem, 6vw, 4.5rem) auto;
}

/* 12rem, nie 14rem: przy szerokości treści 68rem cztery kolumny po 14rem
   plus odstępy nie mieściły się i ostatnia kolumna spadała do nowego wiersza. */
.rod-stopka__siatka {
	display: grid;
	gap: 2rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.rod-stopka h2 {
	margin: 0 0 0.9rem;
	font-size: 0.8125rem;
	font-family: var(--rod-font-tresc);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rod-akcent);
}

.rod-stopka ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.rod-stopka a {
	color: var(--rod-napis-ciemne);
	text-decoration-color: rgb(251 250 247 / 0.4);
	text-underline-offset: 0.2em;
}

.rod-stopka a:hover {
	color: var(--rod-akcent);
	text-decoration-color: currentColor;
}

.rod-stopka p {
	margin: 0 0 0.5rem;
}

/* Belka logotypów: przynależność do PZD i miasto, w którym leży ogród.
   Oba znaki mają barwy własne i są rysowane pod jasne tło, więc kładziemy je
   na białych płytkach. Przebarwianie cudzego logotypu pod granat stopki
   byłoby ingerencją w znak, a wersji na ciemne tło nie mamy. */
.rod-stopka__znaki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgb(251 250 247 / 0.18);
}

.rod-stopka__znaki p {
	margin: 0;
	max-width: 28rem;
	font-size: 0.9375rem;
}

/* Dwie klasy, bo `.rod-stopka ul` z siatką ma wyższą szczegółowość
   niż sama nazwa listy. */
.rod-stopka .rod-stopka__logotypy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
}

.rod-stopka__logotypy a {
	display: block;
	padding: 0.6rem 0.9rem;
	background: #fff;
	border-radius: var(--rod-promien-maly);
}

.rod-stopka__logotypy img {
	display: block;
	width: auto;
	height: 3.25rem;
}

/* Dolny wiersz stopki: nota o ciasteczkach, podpis autora i wejście
   w ustawienia zgód. Na szerokim ekranie stoją w jednej linii, na telefonie
   układają się jeden pod drugim. */
.rod-stopka__nota {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem 2rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(251 250 247 / 0.2);
	font-size: 0.9375rem;
	color: rgb(251 250 247 / 0.75);
}

.rod-stopka__nota p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   19. Treść wpisu / strony
   -------------------------------------------------------------------------- */

.rod-tresc > * + * {
	margin-top: 1.25rem;
}

/* Karty wstawione w treść (liczby, godziny, osoby, alejki, konto). Ich
   reguły zerują marginesy list — dobrze, ale nie wolno im przy tym zerować
   górnego odstępu, bo wtedy karta przykleja się do nagłówka nad sobą.
   Odstęp nadaje tylko ta reguła, więc zostaje spójny na każdej podstronie. */
.rod-tresc > * + :is(.rod-statystyki, .rod-czynne, .rod-osoby, .rod-alejki, .rod-konto) {
	margin-block-start: 1.5rem;
}

/* Wygodna długość wiersza w treści redakcyjnej — ok. 62 znaki. */
.rod-tresc p {
	max-width: 62ch;
}

.rod-tresc h2 {
	margin-top: 2.75rem;
}

.rod-tresc h3 {
	margin-top: 2rem;
}

.rod-tresc ul,
.rod-tresc ol {
	max-width: 62ch;
	padding-left: 1.35rem;
}

.rod-tresc li + li {
	margin-top: 0.5rem;
}

.rod-tresc a {
	color: var(--rod-glowny);
	text-underline-offset: 0.2em;
}

/* Wyróżniona informacja w treści (np. ważny termin). */
.rod-uwaga {
	position: relative;
	padding: 1.35rem 1.5rem 1.35rem 3.6rem;
	background: var(--rod-glowny-jasny);
	border-left: 4px solid var(--rod-akcent);
	border-radius: 0 var(--rod-promien-maly) var(--rod-promien-maly) 0;
}

.rod-uwaga::before {
	content: "";
	position: absolute;
	left: 1.35rem;
	top: 1.5rem;
	width: 1.35rem;
	height: 1.35rem;
	background-color: #a97c12;
	-webkit-mask: var(--rod-maska-uwaga) center / contain no-repeat;
	mask: var(--rod-maska-uwaga) center / contain no-repeat;
}

.rod-uwaga > :first-child {
	margin-top: 0;
}

.rod-uwaga > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   20. Do uzupełnienia — widoczne oznaczenie treści zastępczej.
   Po wypełnieniu strony realnymi danymi ta klasa powinna zniknąć z treści.
   -------------------------------------------------------------------------- */

.rod-placeholder {
	background: repeating-linear-gradient(
		45deg,
		rgb(242 183 5 / 0.14),
		rgb(242 183 5 / 0.14) 10px,
		transparent 10px,
		transparent 20px
	);
	border: 1px dashed #b98d05;
	border-radius: var(--rod-promien-maly);
	padding: 1.25rem 1.5rem;
}

.rod-placeholder::before {
	content: "Do uzupełnienia";
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7a5c00;
}

.rod-placeholder > :last-child {
	margin-bottom: 0;
}

/* Na ciemnym tle (stopka, panel) brązowy tekst etykiety byłby nieczytelny —
   przechodzimy na słoneczny akcent, który daje 8.2:1 wobec ciemnej zieleni. */
.rod-stopka .rod-placeholder,
.rod-panel .rod-placeholder {
	background: rgb(242 183 5 / 0.1);
	border-color: rgb(242 183 5 / 0.6);
	color: var(--rod-napis-ciemne);
}

.rod-stopka .rod-placeholder::before,
.rod-panel .rod-placeholder::before {
	color: var(--rod-akcent);
}

/* --------------------------------------------------------------------------
   21. Instrukcja obsługi — kroki, porównania, klawisze
   Numeracja niesie informację: kolejność czynności naprawdę ma znaczenie.
   -------------------------------------------------------------------------- */

.rod-kroki {
	list-style: none;
	counter-reset: rod-krok;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

.rod-kroki > li {
	counter-increment: rod-krok;
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: 1rem;
	align-items: start;
	max-width: none;
}

.rod-kroki > li::before {
	content: counter(rod-krok);
	font-family: var(--rod-font-naglowki);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--rod-glowny);
	background: var(--rod-glowny-jasny);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(27 58 92 / 0.12);
	display: grid;
	place-items: center;
	font-variant-numeric: tabular-nums;
}

.rod-kroki strong {
	color: var(--rod-glowny);
}

/* Zestawienie „tak / nie tak” przy pisaniu ogłoszeń */
.rod-porownanie {
	display: grid;
	gap: 1rem;
	margin-block: 1.5rem;
}

@media (min-width: 40rem) {
	.rod-porownanie {
		grid-template-columns: 1fr 1fr;
	}
}

.rod-porownanie > div {
	padding: 1.15rem 1.35rem;
	background: var(--rod-glowny-jasny);
	border-top: 4px solid var(--rod-linia);
	border-radius: var(--rod-promien-maly);
}

.rod-porownanie .rod-dobrze {
	border-top-color: var(--rod-glowny);
}

.rod-porownanie .rod-zle {
	border-top-color: #b98d05;
	background: rgb(242 183 5 / 0.1);
}

.rod-porownanie p:last-child {
	margin-bottom: 0;
}

kbd {
	font: 600 0.9em var(--rod-font-tresc);
	background: var(--rod-glowny-jasny);
	border: 1px solid var(--rod-linia);
	border-bottom-width: 2px;
	border-radius: 3px;
	padding: 0.1em 0.45em;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   22. Paginacja
   -------------------------------------------------------------------------- */

.rod-paginacja {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.rod-paginacja a,
.rod-paginacja span {
	display: inline-block;
	min-width: 2.75rem;
	padding: 0.6rem 0.85rem;
	text-align: center;
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien-maly);
	text-decoration: none;
	color: var(--rod-tusz);
	font-variant-numeric: tabular-nums;
}

.rod-paginacja a:hover {
	border-color: var(--rod-glowny);
	background: var(--rod-glowny-jasny);
}

.rod-paginacja [aria-current="page"] {
	background: var(--rod-glowny);
	border-color: var(--rod-glowny);
	color: var(--rod-papier);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   23. Zgoda na ciasteczka
   --------------------------------------------------------------------------
   Baner pojawia się tylko wtedy, gdy zarząd faktycznie włączył analitykę.
   Oba przyciski mają ten sam rozmiar i tę samą wagę — „Odrzucam” nie jest
   schowane ani wyszarzone, bo zgoda ma być dobrowolna, a nie wymuszona
   układem graficznym.
   -------------------------------------------------------------------------- */

/* Wąska karta w rogu, a nie pasek na całą szerokość treści. Wersja na
   60 rem miała niemal dokładnie szerokość kolumny tekstu, więc czytała się
   jak kolejna sekcja strony — najbardziej myliła się z ciemnym panelem
   dyżuru, na który nachodziła. Węższa karta, odsunięta od osi strony
   i z wyraźnie głębszym cieniem, jest czytelna jako warstwa nad treścią. */
.rod-zgody {
	position: fixed;
	inset-inline-start: 1.25rem;
	inset-inline-end: auto;
	bottom: 1.25rem;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	width: min(27rem, calc(100% - 2.5rem));
	padding: 1.35rem 1.5rem;
	background: var(--rod-powierzchnia);
	border: 1px solid var(--rod-linia);
	border-top: 4px solid var(--rod-akcent);
	border-radius: var(--rod-promien);
	/* Cień mocniejszy niż w kartach treści — to jedyne, co oddziela biały
	   baner od jasnego tła strony, gdy nie nachodzi akurat na ciemny panel. */
	box-shadow: 0 2px 6px rgb(20 30 40 / 0.1), 0 22px 48px rgb(20 30 40 / 0.26);
}

/* `display: flex` wygrywa z domyślnym ukrywaniem atrybutem `hidden`,
   więc trzeba je przywrócić jawnie. */
.rod-zgody[hidden] {
	display: none;
}

.rod-zgody__tresc {
	flex: 0 1 auto;
}

.rod-zgody__tytul {
	margin: 0 0 0.35rem;
	font-size: 1.1875rem;
}

.rod-zgody__opis {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--rod-olowek);
}

.rod-zgody__opis a {
	color: var(--rod-glowny);
	text-underline-offset: 0.2em;
}

.rod-zgody__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Jednakowa szerokość obu przycisków — żaden nie jest „tym większym”. */
.rod-zgody__przyciski .rod-przycisk {
	flex: 1 1 0;
	min-width: 8.5rem;
	text-align: center;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
	.rod-zgody {
		animation: rod-zgody-wjazd 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}
}

@keyframes rod-zgody-wjazd {
	from {
		opacity: 0;
		translate: 0 1.25rem;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

/* Przycisk „Ustawienia ciasteczek” jest domyślnie schowany i pokazuje go
   dopiero skrypt zgód — po sprawdzeniu, że analityka w ogóle jest włączona.
   Bez tego wisiał w stopce zawsze: przy wyłączonych statystykach, w wersji
   statycznej i w podglądzie klikanie w niego nic nie dawało, bo skryptu
   obsługi po prostu nie było na stronie. */
.rod-stopka__zgody {
	display: none;
}

.rod-zgody-aktywne .rod-stopka__zgody {
	display: inline;
}

.rod-stopka__zgody {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--rod-napis-ciemne);
	text-decoration: underline;
	text-decoration-color: rgb(251 250 247 / 0.4);
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.rod-stopka__zgody:hover {
	color: var(--rod-akcent);
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   24. Ruch — animacje sterowane przewijaniem i przejścia między stronami
   --------------------------------------------------------------------------
   Wszystko tutaj jest dodatkiem, nie warunkiem czytelności strony: każda
   reguła siedzi za @supports albo za zapytaniem o preferencje ruchu, więc
   starsza przeglądarka i osoba z włączonym „ogranicz ruch” dostają zwykłą,
   statyczną stronę. Zero JavaScriptu.
   -------------------------------------------------------------------------- */

/* Płynne przejście między podstronami (View Transitions). Przeglądarki bez
   obsługi po prostu przeładowują stronę jak dotąd. Reguła musi stać na
   najwyższym poziomie arkusza, dlatego ruch wyłączamy niżej — na
   pseudoelementach przejścia, których gwiazdka z sekcji 2 nie obejmuje. */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* Wejście przesuwa element, ale NIE zmienia przezroczystości. Wygaszanie
   do zera wyglądało dobrze przy przewijaniu i fatalnie wszędzie indziej:
   element poza oknem zostaje w stanie początkowym, więc zrzut całej strony
   (`tools/zrzuty.mjs`), eksport do PDF czy wejście z kotwicy w środek strony
   pokazywały puste miejsca zamiast ogłoszeń. Sam przesuw jest bezpieczny —
   najgorszy przypadek to treść odsunięta o kilkanaście pikseli.

   Osobna właściwość `translate`, a nie `transform` — dzięki temu animacja
   nie kasuje uniesienia kafelka przy najechaniu. */
@keyframes rod-wejscie {
	from {
		translate: 0 14px;
	}

	to {
		translate: none;
	}
}

@keyframes rod-wschod {
	from {
		opacity: 0;
		translate: 0 20px;
	}

	to {
		opacity: 0.26;
		translate: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Słońce w nagłówku wschodzi raz, przy wejściu na stronę. */
	.rod-tytul::after {
		animation: rod-wschod 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}

	/* Treść pojawia się w miarę przewijania. `animation-timeline: view()`
	   robi to bez JavaScriptu; elementy widoczne od razu po wczytaniu mają
	   zakres już za sobą, więc są po prostu widoczne. */
	@supports (animation-timeline: view()) {
		.rod-naglowek-sekcji,
		.rod-kafelek,
		.rod-ogloszenia > li,
		.rod-dokument,
		.rod-galeria figure {
			animation: rod-wejscie linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 24%;
		}
	}
}

/* --------------------------------------------------------------------------
   27. Tło strony — siatka świateł zamiast jednej poświaty
   --------------------------------------------------------------------------
   Dziś tło niesie jeden radialny gradient w prawym górnym rogu i niżej jest
   już tylko płaski papier. Trzy źródła światła (mosiądz u góry, mgła morska
   po lewej w połowie, szałwia przy stopce) dają stronie „porę dnia”, która
   zmienia się w trakcie przewijania. Wszystkie poniżej 12% krycia.
   -------------------------------------------------------------------------- */

body {
	background-image:
		radial-gradient(62rem 30rem at 88% -6rem, rgb(242 183 5 / 0.14), transparent 68%),
		radial-gradient(48rem 38rem at -10% 42%, rgb(27 58 92 / 0.09), transparent 70%),
		radial-gradient(54rem 30rem at 106% 78%, rgb(110 140 106 / 0.12), transparent 72%);
	background-attachment: fixed, fixed, fixed;
}

/* Ziarno kładziemy nad tłem, pod treścią. Osobna warstwa, bo `body` ma już
   zajęte `background-image`, a mieszanie szumu z gradientami przez
   background-blend-mode zabarwia je nierówno. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--rod-ziarno);
	opacity: 0.035;
	mix-blend-mode: multiply;
}

body > * {
	position: relative;
	z-index: 1;
}

@media print {
	body::before { display: none; }
}

/* --------------------------------------------------------------------------
   28. Nagłówek przyklejony do góry
   --------------------------------------------------------------------------
   Na podstronach z długą treścią (regulamin, galeria) nawigacja znika po
   pierwszym przewinięciu. Przyklejony pasek z rozmyciem tła to dziś norma,
   a tutaj ma dodatkową zaletę: trzyma „Kontakt” w zasięgu ręki przez całą
   stronę. Tło jest kryjące w 88%, więc tekst nawigacji nie traci kontrastu
   nawet tam, gdzie pod spodem przejeżdża ciemny panel.
   -------------------------------------------------------------------------- */

/* Przyklejamy opakowanie, nie sam nagłówek. WordPress wstawia część szablonu
   w `div.wp-block-template-part`, a element przyklejony trzyma się tylko
   w obrębie rodzica — opakowanie jest dokładnie tak wysokie jak nagłówek,
   więc sam `.rod-naglowek` nie miał gdzie się przykleić i odjeżdżał z resztą
   strony. Opakowanie leży już w całej wysokości strony i tam to działa.
   `top` uwzględnia pasek administratora, gdy zarząd jest zalogowany. */
.wp-block-template-part:has(> .rod-naglowek),
.rod-naglowek {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* Tło kryjące w całości. Wariant miał tu 88% krycia z rozmyciem, ale pod
   przyklejonym paskiem przejeżdża cała strona — granatowy panel, karty,
   zdjęcia — i przebijające kształty rozpraszały przy czytaniu nawigacji.
   Bez `backdrop-filter` nie ma też kłopotu z menu mobilnym: ta właściwość
   zamykała w pasku jego pełnoekranową nakładkę (`position: fixed`). */
.rod-naglowek {
	background: var(--rod-papier);
	transition: box-shadow 0.2s ease;
}

/* Między nagłówkiem, treścią i stopką WordPress wstawia własny odstęp
   (`blockGap` z theme.json, 28 px). Te trzy bloki same pilnują swoich
   odstępów — pasmo podstrony ma przylegać do paska, a stopka ma własny
   margines i falę — więc odstęp rdzenia dokładał tylko pustą szczelinę
   w kolorze papieru. `body` podnosi specyficzność ponad regułę rdzenia. */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Skok do kotwicy (spis treści, odnośnik „Godziny kasy i szlabanu”) musi
   zatrzymać nagłówek sekcji poniżej przyklejonego paska, a nie pod nim. */
/* Sam pasek plus odrobina: resztę oddechu dokładają nagłówki sekcji
   własnym `scroll-margin-block-start` (1.5 rem, sekcja 4). Razem wychodzi
   ~30 px pod paskiem — tyle, ile ma przyklejony spis treści. */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--rod-pasek) + 0.5rem);
}

/* Cień pojawia się dopiero, gdy pasek odkleił się od góry dokumentu.
   `animation-timeline: scroll()` robi to bez linijki JavaScriptu. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.rod-naglowek {
			animation: rod-naglowek-cien linear both;
			animation-timeline: scroll();
			animation-range: 0 8rem;
		}
	}
}

@keyframes rod-naglowek-cien {
	from { box-shadow: 0 0 0 rgb(15 36 56 / 0); }
	to   { box-shadow: 0 10px 30px rgb(15 36 56 / 0.10); }
}

/* --------------------------------------------------------------------------
   29. Nagłówek strony głównej — dwie kolumny zamiast pustego prawego marginesu
   --------------------------------------------------------------------------
   Obecny tytuł zajmuje lewą połowę ekranu, a prawa zostaje pusta — stąd
   w dużej mierze wrażenie „za dużo białego”. Kolumna obok dostaje kartę
   z planem ogrodu: jedyny obraz, którego nie ma żaden inny ROD w Polsce,
   a przy okazji odpowiedź na najczęstsze pytanie gościa („gdzie jest 149?”).
   -------------------------------------------------------------------------- */

.rod-tytul {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}

/* Duże kadrowane słońce z motywu chowamy — jego rolę przejmuje karta planu. */
.rod-tytul::after { display: none; }

.rod-tytul__siatka {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 60rem) {
	.rod-tytul__siatka {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	}
}

/* Tytuł na tyle duży, żeby był wydarzeniem, i z opadającym gradientem —
   granat u góry, mosiądz w podcięciu ostatniej linii. */
.rod-tytul__nazwa {
	font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	background: linear-gradient(168deg, var(--rod-glowny) 34%, #2E5D8C 78%, var(--rod-akcent) 140%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Awaryjnie: gdzie gradientowy tekst nie działa, zostaje pełny granat. */
@supports not (background-clip: text) {
	.rod-tytul__nazwa { color: var(--rod-glowny); }
}

.rod-tytul__lead {
	font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
	color: var(--rod-tusz);
	opacity: 0.82;
	max-width: 34ch;
}

/* Pasek liczb — „stat strip”. Trzy fakty, które w rozmowie padają pierwsze,
   podane na tyle dużym stopniem, żeby dało się je przeczytać z drugiego
   końca pokoju. Liczby są danymi, nie ozdobą, więc idą w <dl>. */
.rod-liczby {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.5rem, 4vw, 3rem);
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rod-linia);
}

.rod-liczby > div { min-width: 0; }

.rod-liczby dt {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rod-olowek);
}

.rod-liczby dd {
	margin: 0.2rem 0 0;
	font-family: var(--rod-font-naglowki);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--rod-glowny);
	font-variant-numeric: tabular-nums;
}

.rod-liczby dd small {
	display: block;
	font-family: var(--rod-font-tresc);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--rod-olowek);
}

/* Karta z planem — najwyższy poziom wyniesienia na stronie. */
.rod-plan-karta {
	position: relative;
	overflow: hidden;
	border-radius: var(--rod-promien-duzy);
	border: 1px solid var(--rod-linia);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-3), var(--rod-rozblysk);
	rotate: -0.9deg;
	transition: rotate 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}

.rod-plan-karta:hover,
.rod-plan-karta:focus-within {
	rotate: 0deg;
}

.rod-plan-karta__obraz {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--rod-glowny-jasny);
	-webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}

.rod-plan-art {
	display: block;
	width: 100%;
	height: 100%;
}

.rod-plan-karta__stopka {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 1.1rem clamp(1.1rem, 3vw, 1.6rem) 1.3rem;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--rod-powierzchnia) 0%, transparent),
		var(--rod-powierzchnia) 46%);
}

.rod-plan-karta__stopka strong {
	font-family: var(--rod-font-naglowki);
	font-size: 1.125rem;
	color: var(--rod-glowny);
}

.rod-plan-karta__stopka span {
	display: block;
	font-size: 0.9375rem;
	color: var(--rod-olowek);
}

/* --------------------------------------------------------------------------
   30. Fala między pasmami
   --------------------------------------------------------------------------
   Sekcje rozdziela dziś wyłącznie pustka. Jedna miękka fala na styku pasm
   robi to, czego nie zrobi odstęp: mówi, że zaczyna się co innego. Motyw
   horyzontu jest już w arkuszu (--rod-graf-horyzont), tylko nieużywany.
   -------------------------------------------------------------------------- */

.rod-fala {
	display: block;
	width: 100%;
	height: clamp(2.5rem, 6vw, 4.5rem);
	margin-bottom: -1px;
	color: var(--rod-glowny-jasny);
}

.rod-fala path { fill: currentColor; }

.rod-fala--odwrocona { transform: scaleY(-1); margin: -1px 0 0; }

/* Pasmo z falą nie potrzebuje już gradientowego wygaszania krawędzi —
   fala jest krawędzią. */
.rod-pasmo--fala {
	margin-block-start: 0;
	padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
	background: linear-gradient(180deg, var(--rod-glowny-jasny), color-mix(in srgb, var(--rod-glowny-jasny) 55%, var(--rod-papier)));
}

/* --------------------------------------------------------------------------
   31. Panel dyżuru — więcej głębi, ten sam kontrast
   -------------------------------------------------------------------------- */

.rod-panel {
	border-radius: var(--rod-promien-duzy);
	box-shadow: var(--rod-cien-3);
}

/* Poświata pod panelem w kolorze mosiądzu — panel przestaje być prostokątem
   przyklejonym do tła, a zaczyna nad nim wisieć. */
.rod-panel::before {
	content: "";
	position: absolute;
	inset: auto 8% -1.75rem 8%;
	z-index: -2;
	height: 4rem;
	border-radius: 50%;
	background: rgb(214 154 45 / 0.35);
	filter: blur(28px);
	pointer-events: none;
}

.rod-panel__godziny {
	background: linear-gradient(120deg, #F0C25E, var(--rod-akcent) 62%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@supports not (background-clip: text) {
	.rod-panel__godziny { color: var(--rod-akcent); }
}

/* --------------------------------------------------------------------------
   32. Ogłoszenia jako karty, z jednym wyróżnionym
   --------------------------------------------------------------------------
   Dziś ogłoszenia to płaska lista tekstu oddzielona liniami — wszystkie
   ważą tyle samo, więc oko nie wie, gdzie zacząć. Układ „bento”: pierwsze,
   najświeższe ogłoszenie dostaje szerokość dwóch kolumn i większy stopień,
   reszta układa się w siatkę kart.
   -------------------------------------------------------------------------- */

.rod-ogloszenia--bento {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.rod-ogloszenia--bento > li {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(1.4rem, 3vw, 1.9rem);
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-1), var(--rod-rozblysk);
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out,
		border-color 0.18s ease-out;
}

.rod-ogloszenia--bento > li::before { display: none; }

.rod-ogloszenia--bento > li:hover,
.rod-ogloszenia--bento > li:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--rod-cien-2);
	border-color: rgb(214 154 45 / 0.55);
}

@media (min-width: 52rem) {
	.rod-ogloszenia--bento > li:first-child {
		grid-column: span 2;
	}
}

/* Wyróżnione ogłoszenie na ciemnym tle. Granat głęboki + papier to 14.6:1,
   więc wyróżnienie nie kosztuje czytelności.

   Wyróżnienie idzie przez `:first-child`, a nie przez klasę na pierwszym
   wpisie: pętla WordPressa daje wszystkim ogłoszeniom ten sam znacznik
   i nie ma gdzie wpisać klasy tylko dla pierwszego. Klasa zostaje obok
   jako droga dla znaczników pisanych ręką (eksport statyczny, 404). */
.rod-ogloszenie--glowne,
.rod-ogloszenia--bento > li:first-child {
	background:
		radial-gradient(70% 120% at 100% 0%, rgb(242 183 5 / 0.18), transparent 64%),
		var(--rod-glowny-ciemny) !important;
	border-color: transparent !important;
	box-shadow: var(--rod-cien-2) !important;
}

.rod-ogloszenie--glowne .rod-ogloszenie__tytul a,
.rod-ogloszenia--bento > li:first-child .rod-ogloszenie__tytul a { color: #fff; }
.rod-ogloszenie--glowne .rod-ogloszenie__tytul,
.rod-ogloszenia--bento > li:first-child .rod-ogloszenie__tytul { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.rod-ogloszenie--glowne .rod-ogloszenie__zajawka,
.rod-ogloszenia--bento > li:first-child .rod-ogloszenie__zajawka { color: rgb(247 248 249 / 0.84); }
.rod-ogloszenie--glowne .rod-ogloszenie__data,
.rod-ogloszenia--bento > li:first-child .rod-ogloszenie__data { color: rgb(247 248 249 / 0.72); }

.rod-ogloszenie__zajawka { margin-bottom: 0; }

/* Data jako znacznik, nie jako szary tekst w tłumie. */
.rod-ogloszenie__data {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   33. „Stałe informacje” — bento zamiast trzech bliźniaków
   --------------------------------------------------------------------------
   Trzy identyczne kafelki obok siebie to najbardziej szablonowy układ, jaki
   istnieje. Bento różnicuje wagę: „O ogrodzie” dostaje dwa pola i wyraźną
   ilustrację, pozostałe zostają kompaktowe, a dochodzi czwarty kafelek
   (Galeria), który dziś jest tylko w nawigacji.
   -------------------------------------------------------------------------- */

.rod-kafelki--bento {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

@media (min-width: 56rem) {
	.rod-kafelki--bento {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	/* Kafelek wiodący bierze cztery pola z ośmiu, dwa średnie stają obok
	   niego, a czwarty kładzie się szeroko pod nimi. Każde pole ma inną
	   wagę — i o to w bento chodzi. */
	.rod-kafelki--bento > li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	.rod-kafelki--bento > li:nth-child(4) { grid-column: span 2; }
}

.rod-kafelki--bento .rod-kafelek {
	border-radius: var(--rod-promien);
	box-shadow: var(--rod-cien-1), var(--rod-rozblysk);
	background:
		radial-gradient(28rem 14rem at 108% -4rem, rgb(27 58 92 / 0.07), transparent 70%),
		var(--rod-powierzchnia);
}

.rod-kafelki--bento .rod-kafelek:hover,
.rod-kafelki--bento .rod-kafelek:focus-within {
	box-shadow: var(--rod-cien-2);
}

/* Duży kafelek niesie własną ilustrację i większy nagłówek. */
.rod-kafelek--duzy {
	justify-content: flex-start;
	min-height: 22rem;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	position: relative;
	/* Bez `overflow: hidden`. Element siatki z `overflow` innym niż `visible`
	   traci automatyczny rozmiar minimalny — schodzi do zera, więc wiersz
	   siatki przestaje rosnąć razem z treścią i tekst zostaje ucięty
	   (WCAG 1.4.12, widoczne dopiero po wymuszeniu odstępów). `clip-path`
	   też nie: przycina malowanie, ale obszar przewijania zostaje, więc
	   dekoracja wychodząca poza kafelek rozpycha stronę w poziomie
	   (WCAG 1.4.10). Zamiast przycinać, grządki po prostu nie wychodzą
	   poza kafelek — patrz `::after` niżej. */
}

.rod-kafelek--duzy h3 { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); }
.rod-kafelek--duzy p { max-width: 38ch; font-size: 1.125rem; }
.rod-kafelek--duzy a { margin-top: auto; }

/* Grządki w perspektywie — powtórzenie motywu z panelu, ale w skali,
   w której naprawdę je widać. */
.rod-kafelek--duzy::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background-image:
		repeating-linear-gradient(74deg, rgb(27 58 92 / 0.26) 0 2px, transparent 2px 18px),
		repeating-linear-gradient(-8deg, rgb(110 140 106 / 0.34) 0 2px, transparent 2px 24px);
	/* Maska robi to, co wcześniej robiło wystawanie za krawędź: skupia
	   grządki w dolnym prawym rogu i wygasza je ku środkowi kafelka. */
	-webkit-mask-image: radial-gradient(72% 72% at 104% 104%, #000, transparent 76%);
	mask-image: radial-gradient(72% 72% at 104% 104%, #000, transparent 76%);
}

.rod-kafelek--galeria::before {
	background-color: var(--rod-szalwia-mgla);
	background-image: var(--rod-ikona-liscie);
}

/* --------------------------------------------------------------------------
   34. Sezon w ogrodzie — ciemne pasmo przed stopką
   --------------------------------------------------------------------------
   Strona kończy się dziś jasnym kafelkiem i od razu stopką, więc „gaśnie”.
   Ciemne pasmo z rytmem sezonu daje jej ciężar u dołu, a zarządowi miejsce
   na to, o co działkowcy pytają najczęściej: kiedy woda, kiedy opłaty,
   kiedy zebranie.
   -------------------------------------------------------------------------- */

.rod-sezon {
	position: relative;
	margin-block-start: var(--rod-sekcja);
	padding-block: clamp(3rem, 7vw, 5rem);
	background:
		radial-gradient(52rem 24rem at 12% 0%, rgb(110 140 106 / 0.22), transparent 66%),
		radial-gradient(44rem 22rem at 92% 104%, rgb(214 154 45 / 0.18), transparent 68%),
		var(--rod-pasmo-ciemne);
	color: var(--rod-napis-ciemne);
}

.rod-sezon h2 { color: #fff; }
.rod-sezon .rod-etykieta { color: rgb(247 248 249 / 0.7); }

.rod-sezon__siatka {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.rod-sezon__pole {
	padding: 1.4rem;
	border: 1px solid rgb(247 248 249 / 0.16);
	border-radius: var(--rod-promien);
	background: rgb(247 248 249 / 0.05);
}

/* Aktualna pora roku wychodzi na wierzch — kolorem i kształtem naraz
   (WCAG 1.4.1: sam kolor nie może nieść znaczenia). */
.rod-sezon__pole--teraz {
	border-color: var(--rod-akcent);
	background: rgb(214 154 45 / 0.12);
}

.rod-sezon__pole--teraz::before {
	content: "Teraz";
	display: inline-block;
	margin-bottom: 0.6rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--rod-akcent);
	color: var(--rod-glowny-ciemny);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rod-sezon__pole h3 {
	margin: 0 0 0.35rem;
	font-size: 1.1875rem;
	color: #fff;
}

.rod-sezon__pole p {
	margin: 0;
	font-size: 1rem;
	color: rgb(247 248 249 / 0.82);
}

/* --------------------------------------------------------------------------
   35. Odsłanianie przy przewijaniu (bez JavaScriptu)
   --------------------------------------------------------------------------
   `animation-timeline: view()` jest w 2026 dostępne w każdej z trzech
   przeglądarek. Ruch jest minimalny — 14 px i krycie — bo strona ma
   czytelników po siedemdziesiątce, a nie widzów teledysku. Bez obsługi
   timeline’ów albo przy prefers-reduced-motion nie dzieje się nic:
   treść jest widoczna od początku, animacja tylko się nie odpala.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.rod-odslon {
			animation: rod-odslon linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 28%;
		}
	}
}

@keyframes rod-odslon {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   36. Styk ciemnego pasma ze stopką
   --------------------------------------------------------------------------
   Stopka ma nad sobą margines obliczony na jasną sekcję powyżej. Nad ciemnym
   pasmem „Sezon w ogrodzie” ten margines przebijałby się jasną szczeliną
   między dwoma granatami, więc go zdejmujemy — bloki się stykają.

   Cięcie robi fala stopki, ta sama co wszędzie. Działa tylko dlatego, że
   pasmo stoi na `--rod-pasmo-ciemne`, o stopień jaśniejszym od stopki.
   Wcześniej oba bloki miały ten sam granat: fala nie miała czego rozdzielać,
   trzeba było ją zdjąć i sezon zlewał się ze stopką w jedną plamę.
   -------------------------------------------------------------------------- */

/* WordPress owija stopkę w `div.wp-block-template-part`, więc stopka nie
   jest sąsiadem `<main>` — sąsiadem jest opakowanie. Zdejmujemy margines
   z obu: opakowanie dostaje go od odstępu między blokami witryny, stopka
   od własnej reguły. Sam `main + .rod-stopka` działał tylko w znacznikach
   pisanych ręką i w WordPressie nie trafiał nigdy. Margines samego
   opakowania zdejmuje ogólna reguła przy przyklejonym nagłówku (sekcja 28). */
main:has(> .rod-sezon:last-child) + .wp-block-template-part > .rod-stopka,
main:has(> .rod-sezon:last-child) + .rod-stopka {
	margin-top: 0;
}

/* Fala stopki wschodzi ponad stopkę, w dół pasma. Pasmo dostaje od spodu
   tyle miejsca, ile fala ma wysokości, żeby nie wjechała na karty sezonu. */
main > .rod-sezon:last-child {
	padding-block-end: calc(clamp(3rem, 7vw, 5rem) + clamp(2.5rem, 6vw, 4.5rem));
}

/* --------------------------------------------------------------------------
   37. Nagłówek podstrony
   --------------------------------------------------------------------------
   Pasmo z własnym tłem, ścieżką okruszków, tytułem i zdaniem wprowadzającym,
   zakończone falą wchodzącą w treść. Zdanie wprowadzające nie jest dopisane —
   to pierwszy akapit strony, przeniesiony tam, gdzie jego miejsce.
   -------------------------------------------------------------------------- */

/* Pasmo kończy się dokładnie na `--rod-glowny-jasny`, bo tym samym tokenem
   wypełniona jest fala — i tym samym fala na stronie głównej. Dzięki temu
   styk pasma z falą jest z definicji niewidoczny, a sama krzywa czyta się
   na podstronie tak samo mocno jak na głównej. Gradient idzie więc od tintu
   nieco głębszego u góry do tokenu u dołu, a nie odwrotnie ku tłu strony. */
.rod-strona-naglowek {
	position: relative;
	margin-bottom: 0;
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
	background:
		radial-gradient(40rem 20rem at 88% -20%, rgb(242 183 5 / 0.16), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--rod-glowny) 7%, var(--rod-glowny-jasny)), var(--rod-glowny-jasny));
	overflow: hidden;
}

/* Grządki w perspektywie przy prawej krawędzi — ten sam rysunek, co na
   kafelku „O ogrodzie”, w roli sygnatury pasma. Chowany na wąskich
   ekranach, gdzie wchodziłby pod tekst. */
.rod-strona-naglowek::after {
	content: "";
	position: absolute;
	inset-inline-end: -4rem;
	inset-block-start: -2rem;
	width: 28rem;
	height: 20rem;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(74deg, rgb(27 58 92 / 0.16) 0 2px, transparent 2px 20px),
		repeating-linear-gradient(-8deg, rgb(110 140 106 / 0.20) 0 2px, transparent 2px 26px);
	-webkit-mask-image: radial-gradient(70% 70% at 74% 30%, #000, transparent 72%);
	mask-image: radial-gradient(70% 70% at 74% 30%, #000, transparent 72%);
}

@media (max-width: 54rem) {
	.rod-strona-naglowek::after { display: none; }
}

.rod-strona-naglowek .rod-tytul__nazwa {
	margin: 0;
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--rod-glowny);
	background: none;
	-webkit-text-fill-color: currentColor;
}

.rod-strona-naglowek__lead {
	max-width: 54ch;
	margin: 1rem 0 0;
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	line-height: 1.6;
	color: var(--rod-tusz);
	opacity: 0.84;
}

/* Fala zamykająca pasmo. Stoi za pasmem, nie w nim: wypełniona jest część
   n a d  krzywą, czyli przedłużenie pasma, a pod krzywą zostaje przezroczysto
   i widać prawdziwe tło strony — z gradientami i ziarnem. Tak samo robi
   `.rod-fala` na stronie głównej. Gdyby falę wypełnić „kolorem tła”, byłaby
   to płaska podróbka trójwarstwowego gradientu i zostawiałaby widoczny pas. */
.rod-strona-naglowek__fala {
	display: block;
	width: 100%;
	height: clamp(1.75rem, 4vw, 3rem);
	margin: -1px 0 clamp(1.5rem, 4vw, 2.5rem);
	color: var(--rod-glowny-jasny);
}

.rod-strona-naglowek__fala path { fill: currentColor; }

/* --------------------------------------------------------------------------
   1a. Zerowanie resztek motywu na siatkach kart
   --------------------------------------------------------------------------
   Motyw trzyma `.rod-tresc ul { padding-left: 1.35rem; max-width: 62ch }`
   oraz `.rod-dokumenty { border-top: 1px }` — reguły z czasów, gdy to były
   zwykłe listy w kolumnie tekstu. Tu są siatkami kart na pełną szerokość
   kolumny, więc te trzy rzeczy zostawiały: wcięcie 21,6 px z lewej (karty
   nie w linii z nagłówkiem), ucięty prawy brzeg i wiszącą kreskę nad siatką
   — dokładnie tę, którą widać pod nagłówkiem „Przepisy związkowe”.

   Selektor musi być scalony przez `:is()`, bo `.rod-dokumenty` samo w sobie
   (0,1,0) przegrywa z `.rod-tresc ul` (0,1,1). Stąd też `!important`
   przy `max-width` w regułach niżej jest zbędne i zostało usunięte.
   -------------------------------------------------------------------------- */

.rod-tresc :is(.rod-dokumenty, .rod-alejki, .rod-osoby, .rod-czynne) {
	max-width: none;
	padding-inline: 0;
	border-block-start: 0;
}

/* --------------------------------------------------------------------------
   38. Ścieżka okruszków
   --------------------------------------------------------------------------
   Strony nie mają dziś żadnej informacji o tym, gdzie się jest. Przy pięciu
   podstronach to nie katastrofa, ale okruszki kosztują jeden wiersz,
   a wyszukiwarki pokazują je w wynikach.
   -------------------------------------------------------------------------- */

.rod-okruchy { margin-bottom: 0.9rem; }

.rod-okruchy ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--rod-olowek);
}

.rod-okruchy li + li::before {
	content: "";
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	margin-inline-end: 0.45rem;
	background-color: currentColor;
	opacity: 0.6;
	-webkit-mask: var(--rod-maska-rozwin) center / contain no-repeat;
	mask: var(--rod-maska-rozwin) center / contain no-repeat;
}

.rod-okruchy a { color: var(--rod-glowny); text-underline-offset: 0.2em; }

.rod-okruchy [aria-current="page"] { color: var(--rod-olowek); }

/* --------------------------------------------------------------------------
   39. Spis treści przyklejony z boku
   --------------------------------------------------------------------------
   „O ogrodzie” i „Kontakt” to strony na kilkanaście ekranów. Bez spisu
   jedyną nawigacją jest kółko myszy. Spis pokazujemy dopiero od 76 rem —
   niżej stałby nad treścią i tylko odsuwał ją w dół; tam rolę spisu pełnią
   same nagłówki.
   -------------------------------------------------------------------------- */

/* Dwie kolumny tylko wtedy, gdy spis rzeczywiście jest. Krótkie strony
   (Galeria, 404) mają mniej niż trzy nagłówki i spisu nie dostają — bez
   tego warunku rezerwowały puste 15 rem i treść uciekała w prawo. */
@media (min-width: 76rem) {
	.rod-uklad:has(> .rod-spis) {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 3.5rem;
		align-items: start;
	}
}

/* Zakładki galerii rozpychają się w motywie do szerokości okna (100vw).
   W zwężonej kolumnie obok spisu ta arytmetyka wypycha je poza ekran,
   więc tam rozpychanie wyłączamy. */
.rod-uklad:has(> .rod-spis) .rod-tresc > .rod-zakladki {
	width: 100% !important;
	margin-inline: 0 !important;
}

.rod-spis {
	display: none;
}

@media (min-width: 76rem) {
	.rod-spis {
		display: block;
		position: sticky;
		/* Pod przyklejonym paskiem, z tym samym oddechem co skok do kotwicy.
		   Wcześniej stało tu na sztywno 5.5 rem, czyli 3 px pod paskiem
		   — „Na tej stronie” dotykało jego krawędzi. */
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--rod-pasek) + 2rem);
		padding-inline-start: 1.1rem;
		border-inline-start: 2px solid var(--rod-linia);
	}
}

.rod-spis__tytul {
	margin: 0 0 0.8rem;
	font-family: var(--rod-font-tresc);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rod-olowek);
}

.rod-spis ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.rod-spis a {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--rod-olowek);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	margin-inline-start: -1.1rem;
	padding-inline-start: 1.1rem;
}

.rod-spis a:hover,
.rod-spis a:focus-visible {
	color: var(--rod-glowny);
	border-inline-start-color: var(--rod-akcent);
}

/* --------------------------------------------------------------------------
   40. Liczby jako karty, nie jako tabela
   --------------------------------------------------------------------------
   „Ogród w liczbach” to dziś czterowierszowa tabela — układ dobry do
   porównywania, a tu nie ma czego porównywać. Cztery karty czytają się
   z odległości i dają stronie pierwszy mocny akcent po nagłówku.
   -------------------------------------------------------------------------- */

.rod-statystyki {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	margin-inline: 0;
	margin-block-end: 0;
}

.rod-statystyki > div {
	padding: 1.35rem 1.4rem;
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-1), var(--rod-rozblysk);
}

.rod-statystyki dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--rod-olowek);
}

.rod-statystyki dd {
	margin: 0.35rem 0 0;
	font-family: var(--rod-font-naglowki);
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--rod-glowny);
	font-variant-numeric: tabular-nums;
}

/* Wartości nieliczbowe („Pomorski w Gdańsku”) w kroju treści — inaczej
   długa nazwa w szeryfach rozbija równy rytm kart. */
.rod-statystyki dd.rod-statystyki__tekst {
	font-family: var(--rod-font-tresc);
	font-size: 1.125rem;
	line-height: 1.35;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   41. Plan ogrodu — na ciemnym, jak kalka techniczna
   --------------------------------------------------------------------------
   Zdjęcie tablicy z planem jest jasne i płaskie, więc na białym tle ginie.
   Osadzone w ciemnej ramie zaczyna wyglądać na to, czym jest: na dokumencie.
   -------------------------------------------------------------------------- */

.rod-plan {
	padding: clamp(1rem, 3vw, 1.75rem);
	border-radius: var(--rod-promien-duzy);
	background:
		radial-gradient(60% 90% at 100% 0%, rgb(242 183 5 / 0.14), transparent 66%),
		var(--rod-glowny-ciemny);
	box-shadow: var(--rod-cien-3);
}

.rod-plan__ramka {
	display: block;
	border-radius: var(--rod-promien-maly);
	overflow: hidden;
	background: #fff;
}

.rod-plan__ramka img { display: block; width: 100%; height: auto; }

.rod-plan__podpis {
	margin-top: 0.9rem;
	color: rgb(232 237 242 / 0.82);
	font-size: 0.9375rem;
}

/* Podpowiedź, że obrazek się powiększa — na telefonie to jedyny sposób
   odczytania numerów działek, a dziś mówi o tym tylko akapit obok. */
.rod-plan__ramka::after {
	content: "Kliknij, aby powiększyć";
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: rgb(15 36 56 / 0.9);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

.rod-plan__ramka { position: relative; }

/* --------------------------------------------------------------------------
   42. Alejki jako znaczniki
   --------------------------------------------------------------------------
   Trzynaście nazw alejek w wypunktowanej liście to ściana tekstu, przez
   którą trzeba przejść wzrokiem od góry. Jako znaczniki dają się przeskanować.
   -------------------------------------------------------------------------- */

.rod-alejki {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	margin-inline: 0;
	margin-block-end: 0;
	padding: 0;
	list-style: none;
}

.rod-alejki li {
	margin: 0 !important;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien-maly);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-1), var(--rod-rozblysk);
}

.rod-alejki__nazwa {
	display: block;
	font-family: var(--rod-font-naglowki);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rod-glowny);
}

.rod-alejki__opis {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--rod-olowek);
}

/* --------------------------------------------------------------------------
   43. Numer konta — karta zamiast wiersza tabeli
   --------------------------------------------------------------------------
   Numer konta jest najczęściej przepisywaną rzeczą na całej stronie.
   Dziś siedzi w trzecim wierszu tabeli, złożony tym samym stopniem, co
   reszta. Tutaj dostaje własną kartę, cyfry w grupach po cztery, krój
   o stałej szerokości znaku i przycisk kopiowania.
   -------------------------------------------------------------------------- */

.rod-konto {
	max-width: none;
	padding: clamp(1.4rem, 3vw, 2rem);
	border: 1px solid var(--rod-linia);
	border-inline-start: 6px solid var(--rod-akcent);
	border-radius: var(--rod-promien);
	background:
		radial-gradient(34rem 16rem at 108% -4rem, rgb(214 154 45 / 0.10), transparent 70%),
		var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-2), var(--rod-rozblysk);
}

.rod-konto dl { display: grid; gap: 1rem; margin: 0; }

@media (min-width: 40rem) {
	.rod-konto dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rod-konto .rod-konto__numer { grid-column: 1 / -1; }
}

.rod-konto dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--rod-olowek);
}

.rod-konto dd { margin: 0.3rem 0 0; font-size: 1.0625rem; }

.rod-konto__numer dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: clamp(1.125rem, 1rem + 0.9vw, 1.625rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--rod-glowny);
}

/* Przycisk kopiowania to dodatek, nie warunek: bez JavaScriptu znika,
   a numer i tak jest widoczny i można go zaznaczyć. */
.rod-kopiuj {
	display: none;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--rod-linia);
	border-radius: 999px;
	background: var(--rod-glowny-jasny);
	color: var(--rod-glowny);
	font: 600 0.875rem/1.4 var(--rod-font-tresc);
	cursor: pointer;
}

[data-rod-kopiowanie] .rod-kopiuj { display: inline-flex; }

.rod-kopiuj:hover { background: var(--rod-glowny); color: var(--rod-na-wypelnieniu); }

.rod-kopiuj[data-rod-skopiowano] {
	background: var(--rod-akcent);
	border-color: #b98d05;
	color: var(--rod-atrament);
}

/* --------------------------------------------------------------------------
   44. Dokumenty — karty z plakietką formatu
   --------------------------------------------------------------------------
   Lista druków ma dziś ikonę i szary dopisek „DOC · 33 kB”. Format pliku
   jest informacją, którą sprawdza się przed kliknięciem (czy to się
   w ogóle otworzy?), więc należy mu się plakietka, a nie przypis.
   -------------------------------------------------------------------------- */

.rod-dokumenty { display: grid; gap: 0.85rem; }

.rod-dokument {
	position: relative;
	padding: 1.2rem 1.35rem 1.2rem 3.5rem;
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-1), var(--rod-rozblysk);
	transition: transform 0.16s ease-out, box-shadow 0.16s ease-out,
		border-color 0.16s ease-out;
}

.rod-dokument:hover,
.rod-dokument:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--rod-cien-2);
	border-color: rgb(214 154 45 / 0.55);
}

/* Plakietka zawsze w nowym wierszu: przy krótkiej nazwie druku wskakiwała
   obok niej i lista traciła równy rytm. */
.rod-dokument__nazwa { display: block; }

.rod-dokument__info {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--rod-glowny-jasny);
	color: var(--rod-glowny);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Odnośnik zewnętrzny to co innego niż plik do pobrania — inny kolor
   plakietki i inny kształt mówią o tym, zanim ktoś kliknie. */
.rod-dokument--zewnetrzny .rod-dokument__info {
	background: transparent;
	border: 1px dashed var(--rod-linia);
	color: var(--rod-olowek);
}

/* --------------------------------------------------------------------------
   45. Zarząd i komisja — karty osób
   --------------------------------------------------------------------------
   Tabela „Funkcja / Imię i nazwisko” to dwie kolumny, z których jedna jest
   etykietą. Karty czytają się szybciej i lepiej znoszą wąski ekran, gdzie
   tabela zaczyna się przewijać w poziomie.
   -------------------------------------------------------------------------- */

.rod-osoby {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin-inline: 0;
	margin-block-end: 0;
	padding: 0;
	list-style: none;
}

.rod-osoby li {
	margin: 0 !important;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-1), var(--rod-rozblysk);
}

.rod-osoby__funkcja {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rod-olowek);
}

.rod-osoby__nazwisko {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--rod-font-naglowki);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--rod-glowny);
}

/* --------------------------------------------------------------------------
   46. Godziny otwarcia — karty z rytmem sezonu
   --------------------------------------------------------------------------
   Tabela zostaje (do porównywania trzech instytucji i czterech okresów
   nadaje się najlepiej), ale dostaje nad sobą trzy karty odpowiadające na
   pytanie zadawane naprawdę: „czy dziś zastanę kogoś w biurze?”.
   -------------------------------------------------------------------------- */

.rod-czynne {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	margin-inline: 0;
	margin-block-end: 1.75rem;
	padding: 0;
	list-style: none;
}

.rod-czynne li {
	margin: 0 !important;
	padding: 1.3rem 1.4rem;
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-1), var(--rod-rozblysk);
}

.rod-czynne__co {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rod-olowek);
}

.rod-czynne__co::before {
	content: "";
	width: 1rem;
	height: 1rem;
	flex: none;
	background-color: var(--rod-akcent);
	-webkit-mask: var(--rod-maska-zegar) center / contain no-repeat;
	mask: var(--rod-maska-zegar) center / contain no-repeat;
}

.rod-czynne__godziny {
	display: block;
	margin-top: 0.45rem;
	font-family: var(--rod-font-naglowki);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--rod-glowny);
	font-variant-numeric: tabular-nums;
}

.rod-czynne__kiedy {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.9375rem;
	color: var(--rod-olowek);
}

/* Kasa ma w sezonie dwa różne rytmy. Karta pokazująca tylko pierwszy z nich
   mówiłaby nieprawdę, więc drugi okres dostaje własny wiersz. */
.rod-czynne__kiedy + .rod-czynne__kiedy {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--rod-linia);
}

/* --------------------------------------------------------------------------
   47. Mapa
   -------------------------------------------------------------------------- */

.rod-mapa {
	border-radius: var(--rod-promien-duzy);
	box-shadow: var(--rod-cien-2);
}

.rod-mapa iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 18rem;
	border: 0;
}

/* --------------------------------------------------------------------------
   48. Ogłoszenia — lista i pojedynczy wpis
   -------------------------------------------------------------------------- */

/* Filtry po oznaczeniu. Ogłoszeń będzie z każdym sezonem więcej, a jedyną
   dostępną dziś operacją jest przewijanie. */
.rod-filtry {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.rod-filtry a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--rod-linia);
	border-radius: 999px;
	background: var(--rod-powierzchnia);
	color: var(--rod-glowny);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.rod-filtry a:hover,
.rod-filtry a:focus-visible {
	border-color: var(--rod-akcent);
	background: var(--rod-glowny-jasny);
}

.rod-filtry [aria-current="page"] {
	background: var(--rod-glowny);
	border-color: var(--rod-glowny);
	color: var(--rod-na-wypelnieniu);
}

/* Wpis ogłoszenia: data i oznaczenie jako szyna z boku, tekst w kolumnie
   o wygodnej długości wiersza. */
@media (min-width: 62rem) {
	.rod-artykul {
		display: grid;
		grid-template-columns: 11rem minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}
}

.rod-artykul__szyna {
	padding-block: 0.4rem;
	border-block-start: 3px solid var(--rod-akcent);
}

.rod-artykul__szyna .rod-ogloszenie__data {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--rod-glowny);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   49. Galeria
   --------------------------------------------------------------------------
   Miniatury mają dziś jednakowy rozmiar i układają się w równiutką kratkę —
   186 zdjęć w takiej kratce wygląda jak arkusz kalkulacyjny. Co czwarty
   kafelek dostaje podwójną szerokość, przez co siatka zaczyna oddychać,
   a oko ma się o co zaczepić. Kadr trzyma `object-fit`, więc nic się nie
   rozciąga.
   -------------------------------------------------------------------------- */

.rod-galeria {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: 0.75rem;
}

.rod-galeria figure {
	border-radius: var(--rod-promien-maly);
	overflow: hidden;
	box-shadow: var(--rod-cien-1);
}

.rod-galeria img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
}

@media (min-width: 48rem) {
	.rod-galeria > li:nth-child(7n + 1) { grid-column: span 2; }
	.rod-galeria > li:nth-child(7n + 1) img { aspect-ratio: 3 / 1.32; }
}

/* Nagłówek rocznika jako pasek z licznikiem zdjęć. */
.rod-rocznik--archiwalny {
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-1);
	padding: clamp(1rem, 3vw, 1.5rem);
}

.rod-rocznik--archiwalny + .rod-rocznik--archiwalny { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   50. Tabele, ramki, uwagi — to, co zostaje w treści
   -------------------------------------------------------------------------- */

.rod-tabela-otoczka {
	border: 1px solid var(--rod-linia);
	border-radius: var(--rod-promien);
	background: var(--rod-powierzchnia);
	box-shadow: var(--rod-cien-1);
	overflow-x: auto;
}

.rod-tabela-otoczka > .rod-tabela { margin: 0; }

/* Otoczka jest tu kartą z ramką, więc podpis tabeli leży w jej środku i musi
   dostać to samo wcięcie co komórki (1 rem) — inaczej tekst dotyka ramki. */
.rod-tabela-otoczka .rod-tabela caption {
	margin: 0;
	padding: 1rem 1rem 0.5rem;
}

.rod-uwaga {
	border-radius: var(--rod-promien);
	border-inline-start-width: 6px;
	box-shadow: var(--rod-cien-1);
}

/* --------------------------------------------------------------------------
   51. Strona 404
   -------------------------------------------------------------------------- */

.rod-404 .rod-strona-naglowek { text-align: center; }
.rod-404 .rod-strona-naglowek__lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   52. Tryb ciemny
   --------------------------------------------------------------------------
   Połowa odwiedzin ogrodowej strony to telefon wieczorem. Ciemny wariant to
   dziś domyślne oczekiwanie systemu, a nie ozdoba.

   Cała sekcja sprowadza się niemal wyłącznie do przestawienia palety, bo
   arkusz stoi na tokenach — i to nie tylko na tokenach barw, ale i na
   tokenach *ról* (patrz komentarz przy `--rod-napis-ciemne` na początku
   pliku). Dzięki nim nie trzeba tu wymieniać z nazwiska żadnej karty,
   żadnego panelu ani żadnego przycisku: powierzchnie i napisy przestawiają
   się same. Zostaje garść miejsc, w których ciemny wariant nie jest tą samą
   regułą z inną wartością, tylko inną decyzją.

   Kontrasty liczone tak samo jak w jasnym: tekst ≥ 4.5:1, interfejs ≥ 3:1.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		--rod-papier: #101922;
		--rod-tusz: #e8edf2;           /* 14,1:1 na nowym papierze */
		--rod-olowek: #9fb0bf;         /*  6,9:1 */
		--rod-glowny: #9cc4e8;         /*  8,4:1 — granat rozjaśniony, bo
		                                  ciemny granat na ciemnym tle znika */
		--rod-glowny-ciemny: #0a121a;
		--rod-glowny-jasny: #18242f;
		--rod-akcent: #e8b44a;         /* 10,2:1 */
		--rod-linia: #2a3947;
		--rod-pasmo-tlo: rgb(24 36 47 / 0.75);
		--rod-szalwia-mgla: #1a2420;
		--rod-rozblysk: inset 0 1px 0 rgb(255 255 255 / 0.06);

		/* Role. Dwie z nich odwracają się razem z paletą, dwie zostają:
		   `--rod-glowny` i `--rod-tusz` robią się jasne, więc napis na nich
		   musi sczernieć; mosiądz zostaje jasny, więc atrament zostaje
		   ciemny; panel i stopka zostają granatowe, więc napis zostaje jasny. */
		--rod-napis-ciemne: #e8edf2;   /* 15,7:1 na --rod-glowny-ciemny */
		--rod-na-wypelnieniu: #101922; /*  7,9:1 na --rod-glowny */
		--rod-atrament: #101922;       /*  9,6:1 na --rod-akcent */
		--rod-powierzchnia: #16212c;
		--rod-pas-tabeli: rgb(232 237 242 / 0.05);
		--rod-pasmo-ciemne: #182a3b;  /* stopka #0a121a — ten sam stopień różnicy */

		/* Fala nad stopką musi mieć kolor stopki. Kolor siedzi w data-URI,
		   do którego zmienne nie sięgają — stąd druga wersja grafiki. Bez
		   niej nad stopką stał jaśniejszy pas granatu z jasnej palety. */
		--rod-graf-horyzont: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%230A121A' d='M0 90V26c220 26 470 32 730 30s470-16 710-6v40z'/%3E%3C/svg%3E");

		/* Paleta WordPressa musi pójść za naszą.
		   `theme.json` nie zna reguł warunkowych — WordPress wypisuje z niej
		   `--wp--preset--color--*` raz, wartościami dosłownymi, i buduje na
		   nich style odnośników, nagłówków i przycisków (`a:where(...)`
		   { color: var(--wp--preset--color--glowny) }). Bez przestawienia
		   tych zmiennych ciemny wariant łapie granat z jasnej palety
		   wszędzie tam, gdzie element maluje WordPress, a nie ten arkusz —
		   odnośnik w karcie planu ogrodu schodził tak do 1,4:1.

		   Przestawiamy je tutaj, a nie po kolei w regułach, bo wtedy
		   wystarczy jedno miejsce na każdy nowy element rdzenia. */
		--wp--preset--color--papier: var(--rod-papier);
		/* Osobny preset na napis na ciemnym tle — menu mobilne. Gdyby pisało
		   „papierem”, w ciemnej palecie napis ściemniałby razem z tłem strony
		   i zniknął na granacie menu (1,1:1). */
		--wp--preset--color--napis-ciemne: var(--rod-napis-ciemne);
		--wp--preset--color--tusz: var(--rod-tusz);
		--wp--preset--color--olowek: var(--rod-olowek);
		--wp--preset--color--glowny: var(--rod-glowny);
		--wp--preset--color--glowny-ciemny: var(--rod-glowny-ciemny);
		--wp--preset--color--glowny-jasny: var(--rod-glowny-jasny);
		--wp--preset--color--akcent: var(--rod-akcent);
		--wp--preset--color--linia: var(--rod-linia);
	}

	/* Te same trzy źródła światła, przygaszone. Granat po lewej trzeba było
	   rozjaśnić do błękitu — ciemny granat na ciemnym papierze nie świeci,
	   tylko brudzi. */
	body {
		background-image:
			radial-gradient(62rem 30rem at 88% -6rem, rgb(242 183 5 / 0.10), transparent 68%),
			radial-gradient(48rem 38rem at -10% 42%, rgb(90 140 200 / 0.10), transparent 70%),
			radial-gradient(54rem 30rem at 106% 78%, rgb(110 140 106 / 0.12), transparent 72%);
	}

	/* Ziarno na ciemnym tle musi rozjaśniać, nie przyciemniać — inaczej
	   zamiast szumu kładzie się na stronie brudna plama. */
	body::before {
		mix-blend-mode: screen;
		opacity: 0.05;
	}

	/* Plan ogrodu jest rysunkiem kreskowym na bieli. Przebarwienie go
	   filtrem jest tańsze i wierniejsze niż drugi rysunek: odwrócenie
	   z obrotem odcienia zostawia kreskom ich barwę, a zabiera tło. */
	.rod-plan-karta__obraz {
		filter: invert(1) hue-rotate(180deg) saturate(0.85) brightness(0.92);
	}

	/* Najazd na znacznik „Ważne” odwraca go: w jasnej palecie mosiądz
	   ciemnieje do atramentu, w ciemnej rozjaśnia się do papieru. Obie
	   drogi prowadzą do kontrastu, ale żadna nie jest tą samą regułą
	   z podmienioną zmienną — stąd osobny zapis. */
	.rod-znacznik--wazne:hover,
	.rod-ogloszenie__oznaczenia a.rod-znacznik--wazne:hover {
		background: var(--rod-tusz);
		border-color: var(--rod-tusz);
		color: var(--rod-atrament);
	}

	/* Pasmo nagłówka podstrony: w jasnej palecie to rozjaśnienie papieru,
	   w ciemnej — przyciemnienie. Gradient trzeba odwrócić, bo inaczej
	   pasmo wychodzi jaśniejsze od treści pod nim. */
	.rod-strona-naglowek {
		background:
			radial-gradient(40rem 20rem at 88% -20%, rgb(242 183 5 / 0.10), transparent 70%),
			linear-gradient(180deg,
				color-mix(in srgb, var(--rod-glowny) 7%, var(--rod-glowny-jasny)),
				var(--rod-glowny-jasny));
	}

	.rod-strona-naglowek::after {
		background-image:
			repeating-linear-gradient(74deg, rgb(156 196 232 / 0.16) 0 2px, transparent 2px 20px),
			repeating-linear-gradient(-8deg, rgb(110 140 106 / 0.24) 0 2px, transparent 2px 26px);
	}
}

/* --------------------------------------------------------------------------
   53. Druk — działkowcy często drukują ogłoszenia na tablicę przy bramie.
   -------------------------------------------------------------------------- */

@media print {
	/* Kotwice są narzędziem do dzielenia się odnośnikiem — na wydruku
	   zostawiłyby tylko nieczytelne ogniwo obok nagłówka. */
	.rod-kotwica {
		display: none;
	}

	.rod-naglowek,
	.rod-stopka,
	.rod-nawigacja,
	.rod-skip-link,
	.rod-zgody,
	/* Na kartce odtwarzacz jest pustym prostokątem — zostaje sam tekst hymnu. */
	.rod-hymn__odtwarzacz {
		display: none !important;
	}

	body {
		font-size: 12pt;
		background: #fff;
		color: #000;
	}

	/* Animacje wejścia sterowane przewijaniem trzymają element w opacity: 0,
	   dopóki nie wjedzie w okno. Na kartce nie ma przewijania, więc bez tego
	   wydruk mógłby wyjść pusty. */
	.rod-naglowek-sekcji,
	.rod-kafelek,
	.rod-ogloszenia > li,
	.rod-dokument,
	.rod-galeria figure {
		animation: none !important;
		opacity: 1 !important;
		translate: none !important;
	}

	/* Ozdobniki znikają — na kartce liczy się treść ogłoszenia,
	   a nie tło i cienie. */
	.rod-tytul::after,
	.rod-panel::after,
	.rod-stopka::before,
	.rod-kafelek::before,
	.rod-dokument__nazwa::before {
		display: none !important;
	}

	body {
		background-image: none;
	}

	.rod-pasmo {
		background-image: none;
		padding-block: 0;
	}

	.rod-panel {
		border: 1px solid #000;
		background: #fff;
		background-image: none;
		color: #000;
		box-shadow: none;
	}

	.rod-kafelek,
	.rod-mapa,
	.rod-przycisk {
		box-shadow: none;
	}

	.rod-panel__godziny,
	.rod-panel dt,
	.rod-panel .rod-etykieta {
		color: #000;
	}

	/* Na kartce nie ma czego klikać — reszta zdjęć musi wyjść w druku,
	   a przycisk rozwijania nie ma już sensu. */
	.rod-rocznik__reszta > .rod-galeria {
		display: grid !important;
	}

	.rod-rocznik__wiecej {
		display: none !important;
	}

	/* Rozpychanie zakładek liczy się względem okna przeglądarki (`100vw`).
	   Na kartce okna nie ma, a ujemny margines wypchnąłby zdjęcia poza
	   zadrukowany obszar — wracamy do szerokości kolumny. */
	.rod-tresc > .rod-zakladki {
		width: auto !important;
		margin-inline: 0 !important;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
		word-break: break-all;
	}
}

/* --------------------------------------------------------------------------
   54. Tryb wysokiego kontrastu systemu
   --------------------------------------------------------------------------
   Blok stoi na końcu arkusza rozmyślnie: nadpisuje reguły z sekcji powyżej,
   a ma z nimi identyczną szczegółowość — o pierwszeństwie decyduje więc
   kolejność w pliku.
   -------------------------------------------------------------------------- */

/* Tryb wysokiego kontrastu systemu (Windows, „Kontrast” w Ustawieniach
   ułatwień dostępu). System podmienia wtedy wszystkie kolory na własną
   paletę i kasuje cienie — a strona sporo na cieniach opiera: karty
   odróżniają się od tła właśnie cieniem, nie ramką. Bez poniższego bloku
   układ zlewa się w jedną płaszczyznę.

   Nie jest to wymóg WCAG 2.1 AA — to warunek, żeby wymagania 1.4.11
   (kontrast elementów nietekstowych) i 2.4.7 (widoczny fokus) były
   spełnione również wtedy, gdy o kolorach decyduje system. */
@media (forced-colors: active) {
	/* Karty i wyróżnione bloki: cień znika, więc granicę niesie ramka. */
	.rod-kafelek,
	.rod-panel,
	.rod-uwaga,
	.rod-tabela-otoczka,
	.rod-ogloszenia > li,
	.rod-galeria figure,
	.rod-rocznik--biezacy,
	.rod-rocznik--archiwalny,
	.rod-hymn {
		border: 1px solid CanvasText;
	}

	/* Zaznaczona zakładka: kolor akcentu znika razem z paletą, więc
	   aktywność niesie ramka w kolorze zaznaczenia systemu. */
	.rod-zakladki__zakladka[aria-selected="true"] {
		border-bottom-color: Highlight;
	}

	/* Piktogramy rysowane maską dziedziczą kolor tekstu — w tym trybie
	   trzeba wskazać go wprost, inaczej znikają razem z tłem. */
	.rod-panel .rod-etykieta::before,
	.rod-dokument__nazwa::before,
	.rod-ogloszenie__oznaczenia a.rod-znacznik--wazne::before,
	.rod-uwaga::before,
	.rod-rocznik__naglowek::before {
		background-color: CanvasText;
	}

	/* Ikony wstawiane jako tło mają kolory wpisane w SVG, których system
	   nie podmienia — na ciemnym tle robi się z nich plama. Treść niosą
	   sąsiadujące nagłówki, więc po prostu je chowamy. */
	.rod-kafelek::before {
		background-image: none;
	}

	/* Pierścień fokusu: poświata to `box-shadow`, a ten w tym trybie nie
	   istnieje. Zostaje sam kontur — w kolorze zaznaczenia systemu. */
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}

	/* Przycisk musi zostać przyciskiem, także po odwróceniu palety. */
	.rod-przycisk,
	.rod-rocznik__wiecej {
		border: 2px solid ButtonText;
	}

	.rod-przycisk:hover,
	.rod-przycisk:focus-visible,
	.rod-rocznik__wiecej:hover {
		border-color: Highlight;
	}

	/* Odnośnik „Przejdź do treści” po nadaniu fokusu — bez ramki potrafi
	   wtopić się w tło strony. */
	.rod-skip-link:focus,
	.wp-site-blocks .skip-link:focus,
	body > .skip-link:focus,
	body > .skip-link.screen-reader-text:focus {
		border: 2px solid CanvasText;
	}
}