/*
Theme Name: Koło Łowieckie Jeleń Będzin
Description: Motyw potomny Twenty Twenty-Five dla strony koła łowieckiego. Wszystkie
             własne zmiany wyglądu trafiają tutaj, nigdy do motywu nadrzędnego -
             inaczej aktualizacja TT5 je nadpisze.
Template: twentytwentyfive
Version: 3.4.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: jelen-bedzin
*/

/* Na razie pusto - styl budujemy razem z układem strony. */

/* ------------------------------------------------------------------ *
 *  Kafle skrótów na stronie głównej
 *
 *  Kolumny bloku "columns" rozciągają się na równą wysokość, ale grupa
 *  w środku kolumny już nie — więc trzy kafle z tekstem różnej długości
 *  kończyły się na różnych wysokościach. Kafel dostaje pełną wysokość
 *  kolumny, a odnośnik ląduje przy dolnej krawędzi, żeby strzałki
 *  stały w jednej linii niezależnie od długości opisu.
 * ------------------------------------------------------------------ */

.jb-kafel {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-top: 3px solid var(--wp--preset--color--accent-1);
}

/* Układ "constrained" daje dzieciom `margin-inline: auto` i `max-width`
   równy contentSize. Dopóki kafel był zwykłym blokiem, nic to nie zmieniało,
   ale jako kontener flex te automatyczne marginesy zaczynają centrować —
   tekst w kaflach uciekł na środek. Zdejmujemy je z powrotem. */
.jb-kafel > * {
	margin-inline: 0;
	max-width: none;
	width: 100%;
}

.jb-kafel__link {
	/* `auto` dosuwa odnośnik do dołu kafla, ale kasuje przy tym odstęp
	   międzyblokowy: gdy kafle stają jeden pod drugim (wąski ekran) wolnego
	   miejsca nie ma, `auto` wynosi zero i strzałka przykleja się do opisu.
	   Dlatego minimalny odstęp trzyma padding, a nie margines. */
	margin-top: auto;
	padding-top: 1.2rem;
}

.jb-kafel__link a {
	color: var(--wp--preset--color--accent-3);
	font-weight: 500;
	text-decoration: none;
}

.jb-kafel__link a:hover,
.jb-kafel__link a:focus {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 *  Akapit prowadzący (sekcja "O naszym kole")
 *
 *  Blok jest wyrównany do siatki (1318px), żeby zaczynał się w tej samej
 *  linii co kafle, ale wiersz tekstu o takiej długości jest nieczytelny —
 *  oko gubi początek następnej linii. Ograniczamy sam tekst, nie blok.
 * ------------------------------------------------------------------ */

.jb-lead {
	max-width: 62ch;
}

/* ------------------------------------------------------------------ *
 *  Emblemat koła
 *
 *  Logo powstało na szarobeżowym tle: napisy w pierścieniu i data założenia
 *  są kremowe. Wycięliśmy tło, więc w stopce — ciemnej — emblemat czyta się
 *  wzorowo. W nagłówku, na kolorze papieru, kremowe litery by zniknęły,
 *  dlatego dostaje krążek w SWOIM oryginalnym kolorze (#938A81, wprost z pliku,
 *  który dostaliśmy). To nie jest kolor z palety strony i celowo za nią nie
 *  idzie: to część znaku koła, a nie element motywu.
 * ------------------------------------------------------------------ */

.jb-naglowek .wp-block-site-logo img {
	background-color: #938A81;
	border-radius: 50%;
	padding: 0.3rem;
	box-sizing: border-box;
}

.jb-logo-stopka {
	margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------ *
 *  Mapa obwodów łowieckich
 * ------------------------------------------------------------------ */

.jb-mapa {
	margin-block: 2rem;
}

.jb-mapa__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.jb-mapa__przycisk {
	border: 1px solid var(--wp--preset--color--accent-2);
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.45rem 0.9rem;
	cursor: pointer;
}

.jb-mapa__przycisk:hover,
.jb-mapa__przycisk:focus-visible {
	background: var(--wp--preset--color--accent-2);
}

/* Wysokość podana w jednostkach widoku, ale z ograniczeniem: na monitorze mapa
   ma być duża, na telefonie nie może zająć całego ekranu, bo nie da się wtedy
   przewinąć strony obok niej. */
.jb-mapa__plotno {
	height: clamp(320px, 60vh, 620px);
	border: 1px solid var(--wp--preset--color--accent-2);
	background: var(--wp--preset--color--accent-5);
}

/* Leaflet rysuje własne kontrolki w swoim kroju; wyrównujemy je do strony. */
.jb-mapa__plotno .leaflet-container {
	font-family: inherit;
}

.jb-mapa-etykieta {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--lora);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(30, 42, 32, 0.9);
}

.jb-mapa-etykieta::before {
	display: none;   /* Leaflet dokleja do dymka strzałkę — przy etykiecie jest zbędna */
}

.jb-mapa__legenda {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.75rem;
}

.jb-obwod {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	background: var(--wp--preset--color--accent-5);
	border-left: 4px solid var(--wp--preset--color--accent-4);
	padding: 0.85rem 1rem;
}

/* Te same kolory co obrysy na mapie — inaczej legenda niczego nie tłumaczy. */
.jb-obwod--52 { border-left-color: #B08A3E; }
.jb-obwod--99 { border-left-color: #2F4A34; }

.jb-obwod--razem {
	background: transparent;
	border-left-color: var(--wp--preset--color--contrast);
}

.jb-obwod__nr {
	font-family: var(--wp--preset--font-family--lora);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

.jb-obwod__pow {
	font-size: var(--wp--preset--font-size--large);
}

.jb-obwod__zo {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}

.jb-mapa__zrodlo {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
	margin-top: 1rem;
}

.jb-mapa-blad {
	padding: 1.5rem;
}

/* Przycisk warstwy działa jak przełącznik — wciśnięty ma wyglądać na wciśnięty. */
.jb-mapa__przycisk--warstwa[aria-pressed="true"] {
	background: #9B3B2A;
	border-color: #9B3B2A;
	color: var(--wp--preset--color--base);
}

.jb-mapa__przycisk--warstwa[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* ------------------------------------------------------------------ *
 *  Kadr powitalny — powolne oddalanie i powrót
 *
 *  Zdjęcie samo z siebie stoi, więc strona po wejściu wygląda na zastygłą.
 *  Kadr powoli oddala się do pełnego zdjęcia i wraca. Bardzo wolno, żeby
 *  ożywić stronę, a nie ciągnąć wzrok z tekstu.
 *
 *  Skala nie schodzi poniżej 1 — zdjęcie jest dopasowane przez `object-fit: cover`
 *  i przy mniejszej skali przestałoby wypełniać kadr, odsłaniając tło po bokach.
 *  Sufit zależy od zdjęcia: na lesie we mgle nie ma pojedynczego kształtu przy
 *  krawędzi, który zbliżenie mogłoby uciąć, więc 1.06 przechodzi bez szkody
 *  (przy poprzednim zdjęciu, z chmarą jeleni, granicą było 1.08, a jeszcze
 *  wcześniej — przy łbie wypełniającym kadr — zaledwie 1.02).
 *
 *  Punkt zaczepienia na środku: pnie zbiegają się w głąb kadru mniej więcej
 *  w jego osi, więc zbliżenie z tego punktu wygląda jak wchodzenie w las.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.jb-hero .wp-block-cover__image-background {
		animation: jb-hero-oddech 18s ease-in-out infinite alternate;
		transform-origin: 50% 50%;
		will-change: transform;
	}

	/* Nagłówek wchodzi łagodnie, żeby początek nie był skokiem. */
	.jb-hero .wp-block-cover__inner-container > * {
		animation: jb-hero-wejscie 1.1s ease-out both;
	}

	.jb-hero .wp-block-cover__inner-container > *:nth-child(2) {
		animation-delay: 0.25s;
	}
}

@keyframes jb-hero-oddech {
	from { transform: scale(1.06); }   /* lekko przybliżony */
	to   { transform: scale(1); }      /* pełny kadr; niżej nie schodzimy */
}

@keyframes jb-hero-wejscie {
	from { opacity: 0; transform: translateY(0.9rem); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------ *
 *  Kalendarz myśliwski
 * ------------------------------------------------------------------ */

.jb-kal {
	margin-block: 2rem;
}

.jb-kal__nawigacja {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.jb-kal__miesiac {
	font-family: var(--wp--preset--font-family--lora);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	text-transform: capitalize;
}

.jb-kal__krok {
	font-size: var(--wp--preset--font-size--small);
	text-transform: capitalize;
	white-space: nowrap;
}

/* Tabela ma sześć kolumn i na telefonie się nie zmieści. Zamiast ją zwijać
   w nieczytelne kafelki, pozwalamy przewinąć ją w poziomie — kalendarz czyta
   się wierszami, więc przewijanie nie gubi kontekstu. */
.jb-kal__przewijanie,
.jb-kal__tabela {
	width: 100%;
}

.jb-kal__tabela {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.jb-kal__tabela th,
.jb-kal__tabela td {
	padding: 0.35rem 0.6rem;
	text-align: center;
	border-bottom: 1px solid var(--wp--preset--color--accent-2);
}

.jb-kal__tabela thead th {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 500;
	background: var(--wp--preset--color--accent-5);
	border-bottom-color: var(--wp--preset--color--accent-4);
}

.jb-kal__tabela tbody th {
	text-align: left;
	font-weight: 400;
	white-space: nowrap;
}

.jb-kal__nr {
	display: inline-block;
	min-width: 1.6em;
	font-weight: 600;
}

.jb-kal__dt {
	color: var(--wp--preset--color--accent-4);
}

.jb-kal__weekend {
	background: color-mix(in srgb, var(--wp--preset--color--accent-5) 55%, transparent);
}

/* Dzisiejszy wiersz ma się rzucać w oczy od razu po wejściu — to najczęstszy
   powód, dla którego ktoś tu zagląda. */
.jb-kal__dzis {
	background: var(--wp--preset--color--accent-2);
	font-weight: 600;
}

.jb-kal__dzis th[scope="row"] {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent-1);
}

.jb-kal__brak {
	color: var(--wp--preset--color--accent-4);
}

.jb-kal__faza {
	white-space: nowrap;
	text-align: left;
}

.jb-kal__faza-opis {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
}

.jb-kal__procent {
	color: var(--wp--preset--color--accent-4);
	font-size: 0.85em;
}

.jb-ksiezyc {
	vertical-align: -0.3em;
	margin-right: 0.4rem;
}

.jb-ksiezyc__cien {
	fill: var(--wp--preset--color--contrast);
	opacity: 0.85;
}

.jb-ksiezyc__swiatlo {
	fill: var(--wp--preset--color--accent-2);
}

.jb-kal__nota {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
	margin-top: 1rem;
	max-width: 70ch;
}

@media (max-width: 782px) {
	.jb-kal__tabela {
		font-size: 0.8rem;
	}

	.jb-kal__tabela th,
	.jb-kal__tabela td {
		padding: 0.3rem 0.35rem;
	}

	.jb-kal__faza-opis {
		display: none;   /* na telefonie zostaje sama tarcza — nazwa nie mieści się w wierszu */
	}
}

/* ------------------------------------------------------------------ *
 *  Pogoda w rogu hero
 * ------------------------------------------------------------------ */

.jb-pog {
	--jb-pog-tlo: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
	background: var(--jb-pog-tlo);
	color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-2) 35%, transparent);
	padding: 0.9rem 1rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	text-align: left;
	max-width: 22rem;
	margin-inline: auto;
	backdrop-filter: blur(3px);
}

.jb-pog__gora {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-2) 30%, transparent);
	padding-bottom: 0.6rem;
	margin-bottom: 0.7rem;
}

.jb-pog__tytul {
	display: block;
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	font-size: 0.8rem;
}

.jb-pog__miejsce {
	display: block;
	font-size: 1.05rem;
}

.jb-pog__przycisk {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-2) 45%, transparent);
	color: var(--wp--preset--color--accent-2);
	font: inherit;
	font-size: 0.72rem;
	padding: 0.3rem 0.5rem;
	cursor: pointer;
	white-space: nowrap;
}

.jb-pog__przycisk:hover:not(:disabled),
.jb-pog__przycisk:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 18%, transparent);
}

.jb-pog__przycisk:disabled {
	opacity: 0.55;
	cursor: progress;
}

.jb-pog__przycisk svg {
	stroke: currentColor;
	stroke-width: 1.4;
	fill: none;
}

.jb-pog__przycisk svg circle:first-child {
	fill: currentColor;
}

.jb-pog__teraz {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.7rem;
}

.jb-pog__temperatura {
	font-family: var(--wp--preset--font-family--lora);
	font-size: 1.9rem;
	line-height: 1;
}

.jb-pog__opis {
	color: var(--wp--preset--color--accent-2);
	font-size: 0.8rem;
}

/* Ikony: kreska w kolorze piasku, tarcza słońca wypełniona mosiądzem. */
.jb-pog__ikona {
	flex: 0 0 auto;
	stroke: var(--wp--preset--color--accent-2);
	stroke-width: 1.6;
	stroke-linecap: round;
	fill: none;
}

.jb-pog__slonce { fill: var(--wp--preset--color--accent-1); stroke: none; }
.jb-pog__chmura { fill: color-mix(in srgb, var(--wp--preset--color--accent-2) 88%, transparent); stroke: none; }
.jb-pog__blyskawica { fill: var(--wp--preset--color--accent-1); stroke: none; }

.jb-pog__dane {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem 0.8rem;
	margin: 0 0 0.7rem;
}

.jb-pog__dane dt {
	color: var(--wp--preset--color--accent-2);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.jb-pog__dane dd {
	margin: 0;
}

/* Strzałka pokazuje, DOKĄD wieje: kierunek meteorologiczny mówi, skąd,
   więc obracamy o 180°, bo myśliwego interesuje, gdzie poniesie wiatr. */
.jb-pog__strzalka {
	display: inline-block;
	transform: rotate(var(--jb-kat, 0deg));
	color: var(--wp--preset--color--accent-1);
}

.jb-pog__roza {
	color: var(--wp--preset--color--accent-2);
	font-size: 0.8em;
}

.jb-pog__niebo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-2) 30%, transparent);
	padding-top: 0.6rem;
}

.jb-pog__etykieta {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--wp--preset--color--accent-2);
	font-size: 0.75rem;
}

.jb-pog__czasy {
	display: block;
	font-variant-numeric: tabular-nums;
}

.jb-pog__komunikat {
	margin: 0.6rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-1);
}

.jb-pog--blad {
	max-width: 22rem;
}

/* ------------------------------------------------------------------ *
 *  Nagłówek nad kadrem (strona główna)
 *
 *  Na stronie głównej nagłówek leży NA zdjęciu, a nie nad nim: pasek papieru
 *  nad kadrem odcinałby zdjęcie od górnej krawędzi okna i zjadał wysokość,
 *  na której ma się zmieścić nazwa koła.
 *
 *  Kotwicą jest `.wp-site-blocks`, a nie okno przeglądarki: bez niej nagłówek
 *  liczyłby położenie od kadru widoku i zostawałby na ekranie przy przewijaniu,
 *  jak pasek przyklejony.
 *
 *  Emblemat z nazwą znika z paska, bo jedno i drugie stoi w środku kadru —
 *  powtórzone dwa razy, jedno pod drugim, wyglądałoby jak pomyłka.
 * ------------------------------------------------------------------ */

.home .wp-site-blocks {
	position: relative;
}

.home .jb-naglowek {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 10;
}

/* Tło paska podaje arkusz, a nie blok — dzięki temu strona główna zdejmuje je
   zwykłą regułą. Blok zapisałby je klasą `has-base-background-color`, którą
   WordPress oznacza jako `!important`. */
.jb-naglowek {
	background-color: var(--wp--preset--color--base);
}

.home .jb-naglowek {
	background-color: transparent;
}

.home .jb-naglowek__marka {
	display: none;
}

/* Bez marki rząd ma tylko jedno dziecko i `space-between` nie ma czego rozsuwać —
   menu samo z siebie zostałoby przy lewej krawędzi. */
.home .jb-naglowek .wp-block-navigation {
	margin-inline-start: auto;
}

/* Kolor podajemy kontenerowi nawigacji, a nie samym odnośnikom: pozycje menu
   mają w rdzeniu `color: inherit` z selektorem mocniejszym od naszego, więc
   przemalowanie odnośnika po nazwie znacznika i tak by przegrało. */
.home .jb-naglowek,
.home .jb-naglowek .wp-block-navigation,
.home .jb-naglowek a,
.home .jb-naglowek .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base);
}

/* Rozwinięte podmenu ma własne, jasne tło — tam kremowe litery by zniknęły. */
.home .jb-naglowek .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--contrast);
}

.home .jb-naglowek .wp-block-navigation__submenu-container a {
	color: inherit;
	text-shadow: none;
}

.home .jb-naglowek a:hover,
.home .jb-naglowek a:focus {
	color: var(--wp--preset--color--accent-2);
}

/* Litery na zdjęciu: cień jest tu czytelnością, nie ozdobą — zdjęcie ma jasne
   partie (przecinki nieba między pniami), na których biel sama by się zgubiła. */
.home .jb-naglowek a {
	text-shadow: 0 1px 3px rgba(20, 28, 20, 0.55);
}

/* Menu nakładkowe na telefonie ma własne, ciemne tło — tam obowiązują jego
   kolory, nie te od przezroczystego paska. */
.home .jb-naglowek .wp-block-navigation__responsive-container.is-menu-open a {
	color: inherit;
	text-shadow: none;
}

.jb-naglowek__marka .wp-block-site-title a {
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 *  Kadr powitalny
 * ------------------------------------------------------------------ */

/* Lekkie zejście treści w dół, żeby emblemat nie ocierał się o pasek nawigacji.
   Cały odstęp wchodzi do wyśrodkowania w pionie, więc każdy dodany piksel zabiera
   dwa u dołu kadru — przy 3,5rem, z czasów małego emblematu, pod emblematem PZŁ
   nie zostawało już nic. */
.jb-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	padding-top: 1rem;
}

/* Przyciemnienie całego kadru (`dimRatio`) działa równomiernie, a menu stoi przy
   górnej krawędzi — tam potrzeba ciemniej niż w środku. Stąd druga zasłona,
   gęstsza u góry i schodząca do zera na jednej trzeciej wysokości. */
.jb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(18, 26, 18, 0.55) 0%, rgba(18, 26, 18, 0) 34%);
}

.jb-hero .wp-block-site-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 1.25rem;
}

/* Emblemat stoi na zdjęciu, więc krążek z nagłówka jest zbędny — kremowe napisy
   w pierścieniu czytają się na ciemnym tle same z siebie. */
.jb-hero .wp-block-site-logo img {
	background: none;
	height: auto;
	/* Dwa cienie, nie jeden: pierwszy jest ciemną poświatą, która odkleja emblemat
	   od rozświetlonej mgły za nim (bez niej kremowe napisy w pierścieniu giną
	   w jasnych partiach zdjęcia), drugi daje mu zwykłą głębię. */
	filter: drop-shadow(0 0 22px rgba(18, 26, 18, 0.9)) drop-shadow(0 2px 6px rgba(18, 26, 18, 0.55));
}

.jb-hero h1 {
	text-shadow: 0 2px 12px rgba(18, 26, 18, 0.45);
}

/* ------------------------------------------------------------------ *
 *  Sekcja pergaminowa
 *
 *  Wzór liści jest MASKĄ, nie zwykłym tłem: maska bierze z pliku SVG tylko
 *  kształt, a kolor podaje `background-color`. Dzięki temu ten sam plik da się
 *  pokazać w dowolnej barwie palety, bez kopii pliku na każdy odcień. Rysunek
 *  wczytany jako obrazek nie dziedziczy koloru ze strony — bez maski świeciłby
 *  zawsze tym, co zapisano w pliku.
 * ------------------------------------------------------------------ */

.jb-pergamin {
	position: relative;
	overflow: hidden;
}

.jb-pergamin::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--wp--preset--color--accent-4);
	opacity: 0.14;
	-webkit-mask: url(assets/ozdoby/wzor-lisc.svg) repeat 0 0 / 240px 240px;
	mask: url(assets/ozdoby/wzor-lisc.svg) repeat 0 0 / 240px 240px;
}

/* Treść musi stać NAD wzorem, inaczej maska przykryłaby tekst. */
.jb-pergamin > * {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------ *
 *  Karty aktualności na stronie głównej
 * ------------------------------------------------------------------ */

.jb-wpisy__naglowek {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.jb-wpisy__naglowek h2 {
	margin: 0;
}

.jb-wpis-karta {
	background-color: var(--wp--preset--color--accent-8);
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(30, 42, 32, 0.08), 0 10px 24px -14px rgba(30, 42, 32, 0.45);
}

/* Zdjęcie ma dotykać krawędzi karty, więc odstęp międzyblokowy przy nim znika. */
.jb-wpis-karta .wp-block-post-featured-image {
	margin: 0;
}

.jb-wpis-karta .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

/* Wpis bez zdjęcia dostaje pasek w kolorze pergaminu.
   Bez tego karty w rzędzie zaczynałyby się na różnych wysokościach — jedna od
   tytułu, sąsiednie od kadru — i rząd wyglądałby na uszkodzony. */
.jb-wpis-karta:not(:has(.wp-block-post-featured-image)) .jb-wpis-karta__tresc::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	margin: -1.15rem -1.3rem 1rem;
	background: var(--wp--preset--color--accent-7);
	opacity: 0.75;
}

.jb-wpis-karta__tresc {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
	padding: 1.15rem 1.3rem 1.4rem;
}

.jb-wpis-karta__tresc .wp-block-post-title {
	margin: 0;
	line-height: 1.25;
}

.jb-wpis-karta__tresc .wp-block-post-title a {
	text-decoration: none;
}

.jb-wpis-karta__tresc .wp-block-post-title a:hover,
.jb-wpis-karta__tresc .wp-block-post-title a:focus {
	text-decoration: underline;
}

.jb-wpis-karta__tresc .wp-block-post-date,
.jb-wpis-karta__tresc .wp-block-post-excerpt {
	margin: 0;
}

.jb-wpis-karta__tresc .wp-block-post-date {
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ *
 *  Zielony panel z pogodą i kalendarzem
 *
 *  Pudełko pogody ma własne tło i obramowanie — potrzebne, gdy stało na
 *  zdjęciu. W panelu tło jest już ciemne, więc pudełko zdejmuje swoje
 *  i zostaje przy samej treści.
 * ------------------------------------------------------------------ */

.jb-panel {
	position: relative;
	overflow: hidden;
	height: 100%;
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	border-top: 3px solid var(--wp--preset--color--accent-1);
	padding: 1.4rem 1.5rem 1.6rem;
}

.jb-panel__tytul {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--accent-2);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.jb-panel .jb-pog {
	background: none;
	border: 0;
	padding: 0;
	max-width: none;
	backdrop-filter: none;
	position: relative;
	z-index: 1;
}

.jb-panel__link {
	position: relative;
	z-index: 1;
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.jb-panel__link a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

.jb-panel__link a:hover,
.jb-panel__link a:focus {
	text-decoration: underline;
}

/* Gałązka w rogu panelu wychodzi poza krawędź, żeby wyglądała na wsuniętą pod
   panel, a nie postawioną w nim jak ikona. */
.jb-panel::after {
	content: "";
	position: absolute;
	right: -26px;
	bottom: -34px;
	width: 158px;
	height: 158px;
	z-index: 0;
	pointer-events: none;
	background-color: var(--wp--preset--color--accent-2);
	opacity: 0.13;
	-webkit-mask: url(assets/ozdoby/galazka.svg) no-repeat center / contain;
	mask: url(assets/ozdoby/galazka.svg) no-repeat center / contain;
}

/* ------------------------------------------------------------------ *
 *  Stopka
 * ------------------------------------------------------------------ */

/* Na stronie głównej pasy mają się stykać — kolor przy kolorze. Bez tego odstęp
   międzyblokowy (`--wp--style--block-gap`) wstawia między nie 24 px papieru,
   co czyta się jak szpara w układzie. Na podstronach treść kończy się na papierze
   i odstęp nad stopką jest potrzebny. */
.home .jb-pergamin,
.home .jb-stopka {
	margin-block-start: 0;
}

.jb-pergamin {
	margin-block-end: 0;
}

body:not(.home) .jb-stopka {
	margin-top: 4rem;
}

.jb-stopka__pasek {
	margin-top: 0.5rem;
}

.jb-stopka__pasek p {
	margin: 0;
}

.jb-stopka__zrodla {
	margin-top: 1.75rem;
	margin-inline: auto;
	max-width: 78ch;
	font-size: 0.76rem;
	line-height: 1.6;
}

.jb-stopka__zrodla a {
	color: inherit;
}

/* ------------------------------------------------------------------ *
 *  Aktualności i panel na węższych ekranach
 *
 *  WordPress rozkłada kolumny jedna pod drugą dopiero poniżej 782 px,
 *  a podział 68/32 tego nie wytrzymuje. Na tablecie (800–1080 px) panel
 *  ściskał tytuł do jednej litery w wierszu — „P O G O D A" w pionie —
 *  a trzy karty do słupków po 90 px z tytułami łamanymi w środku wyrazu.
 *  Rozłączamy kolumny wcześniej, na 1080 px.
 *
 *  Dwa `!important` są tu konieczne i oba mają powód: `flex-basis` stoi
 *  w atrybucie `style` bloku kolumny, a `flex-wrap: nowrap` rdzeń zapisuje
 *  z `!important` w zapytaniu `min-width: 782px`. Bez zdjęcia obu kolumny
 *  zostają obok siebie, tylko węższe.
 * ------------------------------------------------------------------ */

@media (max-width: 1079px) {
	.jb-wpisy {
		flex-wrap: wrap !important;
	}

	.jb-wpisy > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Panel na całej szerokości rozciągnąłby dwie kolumny danych pogodowych
	   na 800 px, z pustką pośrodku. Sama pogoda zostaje przy swojej szerokości. */
	.jb-panel .jb-pog {
		max-width: 30rem;
	}
}

/* Poniżej 700 px trzy karty w rzędzie mają po dwieście kilkadziesiąt pikseli
   i tytuły znowu łamią się w środku wyrazu — wtedy jedna karta na wiersz. */
@media (max-width: 699px) {
	.jb-wpisy .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 *  Kiedy menu zwija się do przycisku
 *
 *  Rdzeń zwija nawigację dopiero poniżej 600 px. Przy pięciu pozycjach i nazwie
 *  koła obok wychodziło z tego pasmo 600–639 px, w którym menu łamało się na
 *  DWA wiersze — na stronie głównej nad zdjęciem wyglądało to jak usterka.
 *  Przesuwamy próg na 782 px, czyli tam, gdzie i tak przechodzimy na układ
 *  jednokolumnowy (kolumny WordPressa, karty aktualności).
 *
 *  Obie reguły są odwróceniem tego, co rdzeń robi w `min-width: 600px`, więc
 *  muszą trafić dokładnie w te same elementy — stąd powtórzone `:not(...)`.
 *  Próg zmienia się w jednym miejscu: w wartości `max-width` poniżej.
 * ------------------------------------------------------------------ */

@media (min-width: 600px) and (max-width: 781px) {
	.jb-naglowek .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.jb-naglowek .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Rozwinięta nakładka: pozycje na środek. Wyrównanie „do prawej" jest własnością
   paska — na całym ekranie zostawiałoby pustą lewą połowę. W nakładce lista staje
   się kolumną, więc o poziomie decyduje `align-items`, nie `justify-content`. */
.jb-naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.jb-naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.jb-naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: center;
	justify-content: center;
}

/* Pozycja z rozwijanym podmenu jest tak szeroka jak jej najszersze dziecko,
   więc bez tego jej własny odnośnik zostawał przy prawej krawędzi tego pudełka,
   a dzieci stały na środku — nazwy działów uciekały wtedy w prawo względem reszty. */
.jb-naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: center;
}

/* ------------------------------------------------------------------ *
 *  Emblematy w kadrze na niskich i wąskich ekranach
 *
 *  Emblemat koła ma 296 px, emblemat PZŁ 148 px — razem z nazwą koła to około
 *  595 px treści. Kadr ma 78% wysokości okna, czyli na laptopie 768 px wysokości
 *  zostaje 599 px: treść dosłownie ociera się o krawędź, a przy zawiniętej na dwa
 *  wiersze nazwie już z niej wychodzi. Na telefonie z kolei 296 px to prawie cała
 *  szerokość ekranu.
 *
 *  Rozmiary zapisują same bloki, w atrybucie `style` — i tak ma zostać, bo dzięki
 *  temu w edytorze widać ten sam rozmiar co na stronie. Przykrycie ich z arkusza
 *  wymaga więc `!important`; poza tymi zapytaniami medialnymi obowiązuje wartość
 *  z bloku.
 * ------------------------------------------------------------------ */

/* Emblemat koła skaluje się płynnie z wysokością okna, zamiast skakać na progach:
   `min()` bierze najmniejszą z trzech wartości, więc 360 px to sufit na dużym
   monitorze, 34vh pilnuje, żeby na niskim ekranie zostało miejsce na nazwę koła
   i emblemat PZŁ, a 52vw — żeby na telefonie znak nie sięgał krawędzi.

   Emblemat PZŁ zostaje przy skokowych progach: ma być wyraźnie mniejszy i tyle,
   a przy dwóch płynnych skalach trudniej przewidzieć, co się z czym zrówna. */
.jb-hero .wp-block-site-logo img {
	width: min(360px, 33vh, 52vw) !important;
}

@media (max-height: 860px) {
	.jb-hero__pzl img {
		width: 116px !important;
	}
}

@media (max-height: 700px) {
	.jb-hero__pzl img {
		width: 90px !important;
	}
}

@media (max-width: 600px) {
	.jb-hero__pzl img {
		width: 100px !important;
	}
}

/* ------------------------------------------------------------------ *
 *  Belka z tytułem na podstronach
 *
 *  Podstrony zaczynają się tym samym pergaminem co sekcja na stronie głównej —
 *  dzięki temu witryna czyta się jak całość, a nie jak ładna strona główna
 *  i osobne, białe podstrony. Sama treść zostaje na papierze: pergamin pod
 *  długim tekstem męczy oczy, a wzór liści przebijałby przez akapity.
 * ------------------------------------------------------------------ */

.jb-belka {
	margin-block-start: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-4) 25%, transparent);
}

.jb-belka h1 {
	margin-block: 0;
}

.jb-belka__opis {
	margin-block-start: 0.6rem;
	max-width: 62ch;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent);
}

.jb-belka__data {
	margin-block-end: 0.5rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ *
 *  Tabele w treści
 *
 *  Domyślne tabele bloku mają cienką kreskę wokół każdej komórki i wyglądają
 *  jak arkusz kalkulacyjny. Tutaj zostaje sama linia pod wierszem, nagłówek
 *  na piasku, a liczby i daty nie łamią się w środku.
 * ------------------------------------------------------------------ */

.jb-tabela table {
	border-collapse: collapse;
	width: 100%;
}

.jb-tabela th,
.jb-tabela td {
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-4) 30%, transparent);
	padding: 0.7rem 0.9rem;
	text-align: left;
	vertical-align: top;
}

.jb-tabela thead th {
	background-color: var(--wp--preset--color--accent-5);
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 600;
	border-bottom-color: var(--wp--preset--color--accent-1);
}

.jb-tabela tbody tr:nth-child(even) {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-5) 45%, transparent);
}

/* Pierwsza kolumna to nazwa gatunku albo termin — ma się nie łamać na siłę,
   dopóki jest na to miejsce. */
.jb-tabela td:first-child {
	text-wrap: balance;
}

.jb-tabela sup {
	color: var(--wp--preset--color--accent-1);
}

@media (max-width: 600px) {
	.jb-tabela th,
	.jb-tabela td {
		padding: 0.55rem 0.6rem;
		font-size: 0.92rem;
	}
}

/* ------------------------------------------------------------------ *
 *  Cytat (roty ślubowania i pasowania)
 * ------------------------------------------------------------------ */

.jb-cytat {
	border-left: 3px solid var(--wp--preset--color--accent-1);
	padding: 0.2rem 0 0.2rem 1.4rem;
	margin-inline: 0;
	font-family: var(--wp--preset--font-family--lora);
	font-style: italic;
}

.jb-cytat p {
	margin-block: 0.4rem;
}

/* ------------------------------------------------------------------ *
 *  Znak PZŁ
 * ------------------------------------------------------------------ */

.jb-hero__pzl,
.jb-stopka__pzl {
	margin-inline: auto;
}

.jb-hero__pzl a,
.jb-stopka__pzl a {
	display: inline-block;
	transition: opacity 0.2s ease;
}

.jb-hero__pzl a:hover,
.jb-hero__pzl a:focus-visible,
.jb-stopka__pzl a:hover,
.jb-stopka__pzl a:focus-visible {
	opacity: 0.75;
}

.jb-stopka__pzl {
	margin: 0;
}

.jb-stopka__pzl img {
	display: block;
}

/* ------------------------------------------------------------------ *
 *  Treść podstrony
 *
 *  Akapity zaczynają się w linii tytułu z belki, a nie na środku strony —
 *  wyśrodkowana kolumna pod tytułem wyrównanym do lewej wyglądała jak pomyłka.
 *  Długość wiersza ogranicza `max-width` liczony w znakach, więc tekst zostaje
 *  czytelny, a tabele, mapa i kalendarz mogą zająć całą siatkę.
 * ------------------------------------------------------------------ */

.jb-tresc .wp-block-post-content > * {
	margin-inline: 0;
	max-width: 66ch;
}

.jb-tresc .wp-block-post-content > .alignwide,
.jb-tresc .wp-block-post-content > .alignfull,
.jb-tresc .wp-block-post-content > .wp-block-table,
.jb-tresc .wp-block-post-content > .jb-mapa,
.jb-tresc .wp-block-post-content > .jb-kal,
.jb-tresc .wp-block-post-content > .wp-block-image {
	max-width: none;
}

/* Nagłówki sekcji dostają powietrze nad sobą — inaczej długa strona zlewa się
   w jeden blok tekstu. */
.jb-tresc .wp-block-post-content > h2 {
	margin-block-start: 2.6rem;
}

.jb-tresc .wp-block-post-content > h3 {
	margin-block-start: 1.8rem;
}

/* ------------------------------------------------------------------ *
 *  Formularz hasła (strefa członków)
 *
 *  Pudełko jest wąskie z premedytacją: pole na hasło rozciągnięte na 66ch
 *  wygląda jak pole na adres, a nie jak zamek. Mosiężna kreska u góry to ten
 *  sam znak co na kaflach i w zielonym panelu — strona ma czytać się jak
 *  całość także tam, gdzie nie ma jeszcze treści.
 * ------------------------------------------------------------------ */

.jb-haslo {
	max-width: 34rem;
	margin-block: 0.5rem 2rem;
	padding: 1.6rem 1.7rem 1.7rem;
	background-color: var(--wp--preset--color--accent-5);
	border-top: 3px solid var(--wp--preset--color--accent-1);
}

/* Kolumna treści podstrony ustawia 66ch selektorem o dwóch klasach, więc sama
   `.jb-haslo` przegrywa z nią specyficznością i pole na hasło rozciąga się na
   całe 920 px. Zwężenie musi być równie mocne. */
.jb-tresc .wp-block-post-content > .jb-haslo {
	max-width: 34rem;
}

.jb-haslo__wstep {
	margin: 0 0 1.1rem;
}

.jb-haslo__blad {
	margin: 0 0 1.1rem;
	padding: 0.7rem 0.9rem;
	background-color: var(--wp--preset--color--base);
	border-left: 3px solid #8C2F1F;
	font-size: var(--wp--preset--font-size--small);
}

/* Etykieta stoi nad polem, nie obok: przy dwóch elementach w rzędzie na telefonie
   zostaje na hasło jakieś sześć znaków. */
.jb-haslo__wiersz {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.7rem;
}

.jb-haslo__etykieta {
	flex-basis: 100%;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
}

.jb-haslo__pole {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.65rem 0.8rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-4) 45%, transparent);
	border-radius: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

.jb-haslo__pole:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
}

.jb-haslo__przycisk {
	padding: 0.7rem 1.5rem;
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.jb-haslo__przycisk:hover,
.jb-haslo__przycisk:focus-visible {
	background-color: var(--wp--preset--color--contrast);
}

.jb-haslo__nota {
	margin: 1.2rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

/* ------------------------------------------------------------------ *
 *  Komunikaty zarządu (strefa członków)
 *
 *  Karty wpisów ze strony głównej mają zdjęcia i prowadzą gdzie indziej;
 *  komunikat czyta się na miejscu, więc zamiast karty z cieniem dostaje
 *  pionową kreskę i datę nad tytułem — jak wpis w książce, a nie kafelek.
 * ------------------------------------------------------------------ */

.jb-komunikaty {
	margin-block-start: 1.5rem;
}

.jb-komunikat {
	margin-block-start: 2.2rem;
	padding: 0.1rem 0 0.4rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--accent-2);
}

.jb-komunikat:first-child {
	margin-block-start: 0;
}

.jb-komunikat:hover {
	border-left-color: var(--wp--preset--color--accent-1);
}

.jb-komunikat__data {
	margin-block: 0 0.35rem;
	color: var(--wp--preset--color--accent-4);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Tytuł komunikatu nie jest sekcją strony, tylko nagłówkiem wpisu — nie należy
   mu się odstęp, który podstrona daje każdemu h3 nad akapitami. Skrótkod wypisuje
   go z pominięciem edytora bloków, więc nie ma klasy `wp-block-heading`
   i rozmiar trzeba mu podać wprost, presetem — nigdy sztywnym `rem`. */
.jb-komunikat__tytul {
	margin-block: 0 0.55rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.jb-komunikat__tresc > *:first-child {
	margin-block-start: 0;
}

.jb-komunikat__tresc > *:last-child {
	margin-block-end: 0;
}

.jb-komunikaty__brak,
.jb-komunikat__zamkniety {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	font-style: italic;
}

/* ------------------------------------------------------------------ *
 *  Galeria — siatka zdjęć zebranych z aktualności
 *
 *  Skrótkod `[galeria_aktualnosci]` wypisuje kafle z pominięciem edytora
 *  bloków, więc nie mają klas `wp-block-*` i rozmiar pisma trzeba im podać
 *  wprost — presetem, nigdy sztywnym `rem`.
 * ------------------------------------------------------------------ */

.jb-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	gap: 0.6rem;
	margin-block: 1.6rem;
}

/* Kwadratowe kadry. Zdjęcia z Facebooka przychodzą i poziome, i pionowe —
   siatka z mieszanymi proporcjami rozjeżdża się w pionie i wygląda na zepsutą.
   Pełny kadr jest zawsze o jedno kliknięcie dalej, przy swoim wpisie. */
.jb-galeria__kafel {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--accent-7);
	text-decoration: none;
}

.jb-galeria__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.jb-galeria__kafel:hover .jb-galeria__foto,
.jb-galeria__kafel:focus-visible .jb-galeria__foto {
	transform: scale(1.05);
}

.jb-galeria__kafel:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* Podpis leży na zdjęciu i wychodzi dopiero przy najechaniu — inaczej siatka
   zamieniłaby się w ścianę tekstu. Czytnik ekranu nic nie traci: odnośnik ma
   `aria-label` z tytułem wpisu, a sam podpis jest `aria-hidden`. */
.jb-galeria__podpis {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 1.6rem 0.7rem 0.55rem;
	background: linear-gradient(to top, rgba(30, 42, 32, 0.92), rgba(30, 42, 32, 0));
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.jb-galeria__kafel:hover .jb-galeria__podpis,
.jb-galeria__kafel:focus-visible .jb-galeria__podpis {
	opacity: 1;
}

/* Na ekranie dotykowym nie ma najechania — tam podpis stoi od razu. */
@media (hover: none) {
	.jb-galeria__podpis {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jb-galeria__foto,
	.jb-galeria__podpis {
		transition: none;
	}

	.jb-galeria__kafel:hover .jb-galeria__foto,
	.jb-galeria__kafel:focus-visible .jb-galeria__foto {
		transform: none;
	}
}

.jb-galeria__brak,
.jb-galeria__wiecej {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	font-style: italic;
}