/*
Theme Name: Beat - Ignition Child
Theme URI: https://www.cssigniter.com/themes/beat/
Author: CSSIgniter
Author URI: https://www.cssigniter.com/
Description: Child theme for Beat - Ignition
Version: 1.0.98
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ignition-beat
Text Domain: ignition-beat-child
*/

/*
 * Add your custom styles below. The parent theme's styles are loaded automatically by default.
 * If you need to change this, see functions.php
 */

/*
 * PSAT: oba bloki Cover stykają się bez odstępu. Zdjęcie hero znika w
 * osobnej masce dla każdego kadru, a zdjęcie sekcji "O nas" pojawia się
 * przez własną maskę na tym samym granatowym tle strony.
 */

/*
 * PSAT: ciemny gradient u góry hero, żeby tekst menu zawsze był czytelny
 * niezależnie od jasności aktualnie wyświetlanego zdjęcia w tle.
 * Wysokość w % (nie px) - kontener ma 120vh, więc % skaluje się poprawnie
 * z rozmiarem okna zamiast pochłaniać nieproporcjonalnie dużo miejsca na
 * mniejszych fizycznie ekranach (błąd wykryty i naprawiony razem z ::after
 * poniżej po zgłoszeniu przez użytkownika).
 */
#block-5c0d6c-91::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20%;
	background: linear-gradient(to bottom, rgba(0, 18, 44, 0.85) 0%, rgba(0, 18, 44, 0) 100%);
	z-index: -1;
	pointer-events: none;
}

/*
 * PSAT: zwiększona wysokość hero (ze 100vh do 120vh), żeby proporcja sekcji
 * była bliższa proporcji zdjęć 16:9 - redukuje % przycinania góry/dołu przez
 * background-size: cover. Kosztem: trzeba lekko przewinąć, żeby zobaczyć
 * cały tekst/przycisk w hero.
 */
#block-5c0d6c-91 {
	height: 120vh !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	margin-bottom: 0 !important;
}
/*
 * Motto ("PSAT" + hasło) jest wstrzykiwane skryptem (psat_header_tweaks)
 * do .wp-block-cover__inner-container - odsunięte od lewej/dolnej
 * krawędzi, tak jak wcześniej robił to blockPadding GutenBee (bottom:120).
 */
#block-5c0d6c-91 .wp-block-cover__inner-container {
	width: 100%;
	padding: 0 40px 120px !important;
	text-align: left !important;
}

/*
 * "Rozpad" dolnej krawędzi zdjęć hero - ten sam, prostszy styl "fala + blur"
 * co maska sekcji "O nas" (about_reveal_v2.png): kilka sinusoid złożonych w
 * gładką falę wyznaczającą krawędź, twardy próg rozmyty DUŻYM gaussian blur,
 * lekki szum tylko przy samej krawędzi przenikania. Z INDYWIDUALNĄ maską
 * DLA KAŻDEGO zdjęcia w rotacji (różny seed => inna pozycja/amplituda fali,
 * inny promień blur) - żeby zdjęcia nie wyglądały jak wycięte tym samym
 * szablonem, ale styl pozostaje spójny między wszystkimi zdjęciami.
 *
 * (Wcześniejsza wersja używała bardziej "chrupiącego" ditheringu gęstości
 * fBm z per-kolumnowym przesunięciem progu - porzucona po porównaniu z
 * efektem Codexa na sekcji "O nas", który tą prostszą techniką wyglądał
 * znacznie bardziej organicznie.)
 *
 * Maska NIE jest tu jedną wspólną regułą CSS - każde zdjęcie ma własny plik
 * (hero_wave_2.png .. hero_wave_10.png), ustawiany wprost w JS
 * (psat_hero_bg_slideshow w functions.php) przy każdej zmianie zdjęcia
 * w rotacji. Tu zostaje tylko wspólne mask-size/repeat/position (patrz
 * styleLayer() w JS) - te trzy właściwości są identyczne dla wszystkich,
 * różni się tylko sam obraz maski.
 *
 * PUŁAPKI (zanotowane na przyszłość):
 * 1. CSS mask-image domyślnie czyta KANAŁ ALFA, nie luminancję skali
 *    szarości - obraz musi być RGBA z realnym kanałem alfa.
 * 2. Serwer (LiteSpeed) cache'uje statyczne pliki na 7 dni - podmiana
 *    pliku pod TĄ SAMĄ nazwą nie jest widoczna nawet z wymuszonym
 *    odświeżeniem przeglądarki. Każda kolejna wersja = nowa nazwa pliku.
 */
#block-5c0d6c-91 .wp-block-cover__image-background {
    /* The static first image is masked before the slideshow script runs. */
    mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/hero_wave_2.png');
    -webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/hero_wave_2.png');
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/*
 * PSAT: zdjęcie "namioty" w tle sekcji "O nas".
 *
 * PRZEBUDOWA NA NATYWNY BLOK "COVER": sekcja "O nas" (i hero) była wcześniej
 * blokiem GutenBee, który po aktualizacji wtyczki przestał się zgadzać z
 * zapisaną treścią i zablokował edytor graficzny (błąd "Blok zawiera
 * nieoczekiwaną zawartość"). Zamiast łatać niekompatybilny format wtyczki,
 * cała sekcja została przebudowana na natywny blok WordPressa "Cover" -
 * stabilny między wersjami, z wbudowanym w panel bocznym suwakiem
 * przyciemnienia/nakładki. Zdjęcie tła jest teraz zwykłym
 * <img class="wp-block-cover__image-background"> (nie diva z
 * background-image), więc stylujemy object-fit/object-position/width
 * zamiast background-size/position.
 *
 * Watermark "PSAT." przesunięty w prawo NADAL przez fizyczne przesunięcie
 * pikseli w samym pliku (namioty_shifted.jpg) - z tego samego powodu co
 * poprzednio (na "cover" przy tak szerokim kontenerze nie ma żadnego luzu
 * w positioning do przesuwania kadru bez dozoomowania).
 */
#block-895863-4e .wp-block-cover__image-background {
	width: 80% !important;
	left: auto !important;
	right: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
	filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1) !important;
    mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/about_reveal_v2.png');
    -webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/about_reveal_v2.png');
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
/*
 * Cover blok domyślnie nie ogranicza szerokości treści w
 * .wp-block-cover__inner-container - nagłówek/tekst/przycisk rozciągały
 * się na całą szerokość sekcji zamiast zostać w wąskiej kolumnie po lewej
 * (tak jak wcześniej robiły to dwie kolumny GutenBee). Wymuszona wąska
 * kolumna, żeby tekst nie nachodził na zdjęcie po prawej.
 */
#block-895863-4e {
	justify-content: flex-start !important;
}
#block-895863-4e .wp-block-cover__inner-container {
	max-width: 630px !important;
	margin-left: 0 !important;
	padding-left: 40px !important;
	text-align: left !important;
}
#block-895863-4e::before {
	content: '';
	position: absolute;
	inset: 0;
	/*
	 * Zdjęcie zajmuje tylko prawe ~80% szerokości (background-position:
	 * right) i całą wysokość kontenera - jego WŁASNA lewa i górna krawędź
	 * leżą bezpośrednio na granicy z granatowym tłem. Gradient radialny
	 * wyśrodkowany w lewym górnym rogu (gdzie jest tekst).
	 *
	 * BŁĄD Z POPRZEDNIEJ WERSJI (naprawiony): jawnie podane promienie
	 * elipsy ("ellipse 90% 100%") zamiast domyślnego "farthest-corner"
	 * dawały promień tak duży, że już 68% z NIEGO pokrywało niemal całą
	 * przekątną boxa - w efekcie zdjęcie było w pełni odsłonięte (bez
	 * przyciemnienia) na niemal całej powierzchni, a ciemny granat zostawał
	 * tylko w wąskim punkcie przy 12%/8%. Naprawione przez powrót do
	 * domyślnego "farthest-corner" (promień liczony faktycznie względem
	 * realnych wymiarów boxa), z stopami dobranymi tak, żeby przyciemnienie
	 * sięgało wyraźnie dalej niż tylko sam narożnik z tekstem.
	 */
	background:
		radial-gradient(ellipse at 15% 10%, rgba(0, 18, 44, 1) 0%, rgba(0, 18, 44, 0.9) 35%, rgba(0, 18, 44, 0) 75%),
		linear-gradient(90deg, rgba(0, 18, 44, 0.4) 0%, rgba(0, 18, 44, 0.2) 100%),
		linear-gradient(to bottom, rgba(0, 18, 44, 0) 80%, rgba(0, 18, 44, 1) 100%);
	z-index: -1;
	pointer-events: none;
}

/*
 * PSAT: kolumny stopki wyrównane do góry (nie do środka w pionie) - żeby
 * logo w 1. kolumnie zaczynało się na tej samej wysokości co nagłówki
 * "Kontakt" / "Dane rejestrowe" / "Zarząd stowarzyszenia" w pozostałych.
 */
.footer-widgets .row {
	align-items: flex-start !important;
}
.footer-widgets .widget_text .textwidget p {
	margin-top: 0 !important;
}

/*
 * PSAT: usunięcie "poświaty" (obraz tła beat_bg_02.png z wypaloną poświatą)
 * i zamiana przerywanej linii nad stopką na cienką, subtelną, pełną linię.
 */
.footer {
	background-image: none !important;
	border-top-style: solid !important;
	border-top-color: rgba(255, 255, 255, 0.1) !important;
	border-top-width: 1px !important;
}
.footer-info {
	border-top-style: solid !important;
	border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/*
 * PSAT: kontener stopki dopasowany do tej samej szerokości/marginesów co
 * sekcje budowane w GutenBee (hero, "O nas") - płynny do max 1320px z 15px
 * paddingu z każdej strony, zamiast skokowych szerokości Bootstrapa.
 */
.footer-widgets .container {
	width: 100% !important;
	max-width: 1320px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/*
 * PSAT: Complianz domyślnie zostawia na stałe pływający przycisk
 * "Zarządzaj zgodą" w rogu ekranu (nawet po zaakceptowaniu). Użytkownik
 * chce zwykły baner: pokazuje się przy wejściu, znika po akceptacji i nic
 * po nim nie zostaje - żadnego trwałego elementu UI.
 */
#cmplz-manage-consent {
	display: none !important;
}

/*
 * PSAT: przestylowanie banera zgody Complianz na kolorystykę strony
 * (ciemny granat + zielony akcent zamiast domyślnego białego banera
 * z fioletowymi przyciskami). Complianz czyta swoje kolory ze zmiennych
 * CSS zdefiniowanych w :root w PÓŹNIEJ ładowanym pliku
 * (cmplz-banner-1-optin-css ładuje się PO naszym style.css), więc bez
 * !important zwykłe przedefiniowanie tych samych zmiennych w :root
 * zostałoby nadpisane z powrotem przez wtyczkę - stąd !important na
 * każdej zmiennej.
 */
:root {
	--cmplz_banner_background_color: #0a1f3d !important;
	--cmplz_banner_border_color: rgba(255, 255, 255, 0.12) !important;
	--cmplz_text_color: #e8eef5 !important;
	--cmplz_hyperlink_color: #2ecfa0 !important;
	--cmplz_button_accept_background_color: #05a280 !important;
	--cmplz_button_accept_border_color: #05a280 !important;
	--cmplz_button_accept_text_color: #ffffff !important;
	--cmplz_button_deny_background_color: transparent !important;
	--cmplz_button_deny_border_color: rgba(255, 255, 255, 0.3) !important;
	--cmplz_button_deny_text_color: #ffffff !important;
	--cmplz_button_settings_background_color: transparent !important;
	--cmplz_button_settings_border_color: rgba(255, 255, 255, 0.3) !important;
	--cmplz_button_settings_text_color: #ffffff !important;
	--cmplz_category_header_always_active_color: #2ecfa0 !important;
	--cmplz_slider_active_color: #05a280 !important;
	--cmplz_slider_inactive_color: #445066 !important;
	--cmplz_slider_bullet_color: #ffffff !important;
}
.cmplz-cookiebanner {
	font-family: Inter, sans-serif !important;
}
.cmplz-cookiebanner .cmplz-title {
	font-weight: 700 !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: rgba(255, 255, 255, 0.06) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background-color: #06bd91 !important;
	border-color: #06bd91 !important;
}
.cmplz-cookiebanner .cmplz-icon.cmplz-open {
	filter: invert(1);
}

/*
 * PSAT: podstrona Kontakt - zdjęcie w tle wypełnia CAŁY ekran, bez scrolla,
 * bez fali+blur (nie ma widocznej krawędzi zdjęcia do rozmywania, skoro
 * dotyka i góry, i dołu viewportu). Ten sam szablon co strona Home
 * (template-fullwidth, ustawiony przez REST API zamiast domyślnego
 * template-fullwidth-boxed) - dzięki temu blok Cover siedzi bezpośrednio
 * w .site-content-wrap, bez bootstrapowego .container/.row/.col.
 *
 * PUŁAPKA nr 1: pasek tytułu strony (.page-title-wrap, "Kontakt"/"Get in
 * touch") NIE znika razem ze zmianą szablonu - to osobne ustawienie motywu,
 * niezależne od pliku template. Trzeba go ukryć osobną regułą CSS poniżej.
 *
 * PUŁAPKA nr 2: motyw domyślnie dodaje .main{padding:65px 0}, usuwanego
 * normalnie klasą na <body> "ignition-no-main-padding-on" (Home ją ma,
 * Kontakt - nie, bo to też osobne ustawienie per-strona) - stąd ciemny
 * pasek nad zdjęciem. Zerujemy padding wprost zamiast szukać, jak włączyć
 * tamten toggle.
 *
 * PUŁAPKA nr 3 (ta najbardziej myląca): Home ma na <header> klasę
 * "header-fixed" zamiast "header-normal" - to JESZCZE JEDNO, osobne
 * ustawienie motywu ("przezroczysty nagłówek na tej stronie"), które robi
 * position:absolute + przezroczyste tło, więc nagłówek UNOSI się NAD
 * zdjęciem zamiast zajmować własny wiersz nad nim. Bez tego Kontakt ma
 * nagłówek w normalnym przepływie (position:static, tło #00122c) - to
 * WYGLĄDA jak "ciemny pasek nad zdjęciem", ale to nie jest odstęp/margines,
 * tylko inny wariant nagłówka. Naśladujemy tu dokładnie regułę .header-fixed
 * z motywu (position:absolute;top:0;left:0;width:100%;background:transparent)
 * zamiast walczyć z wysokością flexboksem - dzięki temu blok Cover
 * (min-height:100vh z własnego atrybutu bloku) wypełnia realnie CAŁY
 * viewport od samej góry, tak jak na Home, a nagłówek pływa nad nim.
 */
body.page-id-19 .footer,
body.page-id-19 .page-title-wrap {
	display: none !important;
}
body.page-id-19 .main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
body.page-id-19 header.header {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparent !important;
}

/*
 * Ten sam zielony duotone co hero/"O nas" (spójność wizualna z resztą
 * strony), zdjęcie kontaktowe nie ma własnej maski fali+blur.
 */
#block-kontakt-hero .wp-block-cover__image-background {
	filter: grayscale(1) brightness(0.45) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1) !important;
}
#block-kontakt-hero .wp-block-cover__inner-container a {
	color: #2ecfa0;
}
/* Ten sam ciemny gradient u góry co hero na Home - żeby tekst menu (teraz
 * pływającego nad zdjęciem nagłówka) był czytelny niezależnie od jasności
 * górnej części akurat tego zdjęcia. */
#block-kontakt-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20%;
	background: linear-gradient(to bottom, rgba(0, 18, 44, 0.85) 0%, rgba(0, 18, 44, 0) 100%);
	z-index: 1;
	pointer-events: none;
}
#block-kontakt-hero .wp-block-cover__inner-container {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 24px;
}

/*
 * PSAT: subtelna, powolna animacja kolorów logo w nagłówku (inline SVG,
 * wstrzykiwany przez psat_get_inline_logo_svg() w functions.php).
 *
 * Trzy grupy ścieżek (.logo-green/.logo-orange/.logo-white) animują się
 * NIEZALEŻNIE - każda ma własny @keyframes i ujemny animation-delay, żeby
 * cykle były przesunięte w fazie (inaczej wszystko zmieniałoby kolor
 * jednocześnie i wyglądałoby jak miganie, nie organiczne "życie" logo).
 * Puls (scale) i glow (drop-shadow) są połączone w JEDNĄ animację na
 * kontenerze .psat-logo-svg, żeby nie nadpisywały sobie wzajemnie
 * właściwości filter/transform, gdyby były osobnymi regułami.
 *
 * Zmiana czasu cyklu koloru: zmień "27s" w .logo-green/.logo-orange/
 * .logo-white (animation-delay -3.6s/-7.2s to przesunięcie fazy WZGLĘDEM
 * TEGO czasu, nie względem pulsu - jeśli zmienisz 27s na inną wartość,
 * warto przeskalować też -3.6s/-7.2s proporcjonalnie - to zawsze 2/15 i
 * 4/15 nowego czasu cyklu). Zmiana czasu pulsu/glow:
 * zmień "6s" w .psat-logo-svg. Zmiana kolorów: edytuj wartości "fill"
 * w odpowiednich @keyframes poniżej.
 */
.psat-logo-svg {
	animation: psat-logo-pulse 6s ease-in-out infinite;
	transform-origin: center center;
}
@keyframes psat-logo-pulse {
	0%, 100% {
		transform: scale(1);
		filter: drop-shadow(0 0 0 rgba(0, 180, 180, 0));
	}
	50% {
		transform: scale(1.018);
		filter: drop-shadow(0 0 8px rgba(0, 180, 180, 0.18));
	}
}

.logo-green {
	fill: #215429;
	animation: psat-logo-green-cycle 27s ease-in-out infinite;
	animation-delay: 0s;
}
@keyframes psat-logo-green-cycle {
	0%, 100% { fill: #215429; }
	20% { fill: #009688; }
	40% { fill: #00a8b5; }
	60% { fill: #2f6fff; }
	80% { fill: #008f8f; }
}

.logo-orange {
	fill: #cd712e;
	animation: psat-logo-orange-cycle 27s ease-in-out infinite;
	animation-delay: -3.6s;
}
@keyframes psat-logo-orange-cycle {
	0%, 100% { fill: #cd712e; }
	20% { fill: #ff9a2f; }
	40% { fill: #ff5a36; }
	60% { fill: #c94cff; }
	80% { fill: #cd712e; }
}

.logo-white {
	fill: #ffffff;
	animation: psat-logo-white-cycle 27s ease-in-out infinite;
	animation-delay: -7.2s;
}
@keyframes psat-logo-white-cycle {
	0%, 100% { fill: #ffffff; }
	33% { fill: #eaffff; }
	66% { fill: #dff7ff; }
}

@media (prefers-reduced-motion: reduce) {
	.psat-logo-svg {
		animation: none !important;
		transform: none !important;
		filter: none !important;
	}
	.logo-green,
	.logo-orange,
	.logo-white {
		animation: none !important;
	}
	.logo-green { fill: #215429 !important; }
	.logo-orange { fill: #cd712e !important; }
	.logo-white { fill: #ffffff !important; }
}

/*
 * PSAT: siatka "O Stowarzyszeniu" (blok GutenBee "post-types" nad CPT
 * "ignition-discography", pozostałość po demo dyskografii zespołu) -
 * miniaturki zamienione z kwadratu 690x690 (rozmiar "ignition_sidebar_tall"
 * zarejestrowany przez motyw) na 16:9 przez CSS crop, bez regenerowania
 * plików - działa od razu dla obecnych i przyszłych zdjęć w tej siatce.
 */
.wp-block-gutenbee-post-types .entry-item-thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
	border: 3px solid transparent;
	box-sizing: border-box;
	transition: border-color 0.3s ease;
}
.wp-block-gutenbee-post-types .entry-item-thumb:hover {
	border-color: var(--ignition-primary-color);
}
.wp-block-gutenbee-post-types .entry-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* zeruje domyślne padding:10px + border:1px dashed z motywu
	 * (mixin border-image w _archives.scss) - kolidowało z object-fit:cover
	 * na pełnej wysokości/szerokości i robiło niewyraźną, złamaną ramkę;
	 * własna, wyraźna ramka 3px jest teraz na .entry-item-thumb powyżej. */
	padding: 0 !important;
	border: none !important;
}

/*
 * PSAT: efekt "odkrywania oryginału" na WSZYSTKICH miniaturkach siatki -
 * w spoczynku zielony duotone + ta sama maska rozpadu krawędzi co STATUT
 * (ujednolica całą siatkę, wcześniej tylko STATUT ją miał, reszta to
 * zwykłe, nieprzefiltrowane rozmyte zdjęcia demo - rażąco inny styl).
 * Po najechaniu (0.75s): pełny oryginalny kolor, bez filtra, bez maski,
 * ostre krawędzie.
 *
 * mask-image i filter NIE da się płynnie animować między dwoma różnymi
 * wartościami (przeglądarki nie interpolują url() ani list filtrów w
 * ten sposób) - dlatego technika to PRZENIKANIE DWÓCH WARSTW: spodnia
 * (oryginalny <img>, zawsze z filtrem+maską) i nałożona na nią kopia
 * (sklonowana przez JS w psat_discography_grid_tweaks, functions.php -
 * bez filtra/maski, opacity:0), która na hover dochodzi do opacity:1
 * w 0.75s, płynnie zasłaniając spodnią warstwę razem z jej rozmytymi
 * krawędziami.
 */
.wp-block-gutenbee-post-types .entry-item-thumb img:not(.entry-item-thumb-reveal) {
	filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
.entry-item-thumb-reveal {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.75s ease;
	pointer-events: none;
}
.wp-block-gutenbee-post-types .entry-item-thumb:hover .entry-item-thumb-reveal {
	opacity: 1;
}

/*
 * PSAT: zdjęcie w tle całej strony "O Stowarzyszeniu" (zastępuje domyślną,
 * ledwo widoczną dekoracyjną poświatę motywu "beat_bg_01.png", ustawioną
 * przez Customizer jako background-attachment:fixed na <body>).
 *
 * CELOWO inny mechanizm niż hero/Kontakt: tam zdjęcie jest prawdziwym
 * elementem <img> wewnątrz bloku Cover, więc PRZEWIJA SIĘ razem z resztą
 * strony. Tu, zgodnie z poleceniem, ma zachowywać się jak obecna poświata -
 * stać w miejscu (position:fixed), a treść ma scrollować POD NIM. Dlatego
 * to zwykłe CSS tło na pseudo-elemencie ::before, nie blok Cover.
 *
 * Zielony duotone nałożony na ::before, NIE na <body> - filter na samym
 * body ufarbowałby też cały tekst/menu/siatkę elementów, bo filter działa
 * na CAŁY element, nie tylko jego background-image.
 *
 * POPRAWKA: jednak maska fali+blur po bokach i na dole (góra zostaje ostra,
 * bo tam nic jej nie przecina - nawigacja i pasek filtrów stoją na swoim
 * tle). Maska wygenerowana tą samą techniką co hero (fala + duży gaussian
 * blur), tylko na trzech krawędziach zamiast jednej: ostow_bg_mask_v1.png,
 * mask-size:cover żeby skalowała się dokładnie tak samo jak samo zdjęcie
 * niezależnie od proporcji okna. Kontrast lekko obniżony (1.1 -> 0.9) na
 * prośbę użytkownika.
 */
body.page-id-242 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-242 .page-title-wrap {
	display: none !important;
}
body.page-id-242 .main {
	padding-top: 0 !important;
}
/* PSAT: karty siatki zawsze wyśrodkowane - po filtrze kategorii (np. PDPH
 * z 2 kartami) i w niepełnym ostatnim rzędzie, zamiast do lewej.
 * Kontener to bootstrapowy .row.row-items (motyw podmienia klasy
 * gutenbee-row), flex z flex-wrap; filtr tylko chowa karty (display:none),
 * więc wystarczy justify-content. */
body.page-id-242 .wp-block-gutenbee-post-types .row-items {
	justify-content: center;
}

/*
 * PSAT: nowa podstrona /ostowarzyszeniu/statut/ (id=355, dziecko strony
 * O Stowarzyszeniu) - zastępuje stary CPT "ignition-discography" jako cel
 * przycisku WIĘCEJ... na karcie STATUT (patrz filtr post_type_link w
 * functions.php). Jeden ekran, bez stopki, bez scrolla - jak Kontakt, ale
 * TU nagłówek zostaje w normalnym przepływie (nie unosi się nad zdjęciem
 * jak na Kontakcie), bo zdjęcie ma być wyśrodkowanym, OGRANICZONYM
 * prostokątem (nie pełnoekranowym tłem) - stąd ten sam flexboksowy
 * łańcuch co pierwsza, bezpieczna wersja Kontaktu (bez magicznych pikseli,
 * działa niezależnie od faktycznej wysokości nawigacji).
 */
body.page-id-355 .page-wrap {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}
body.page-id-355 .footer,
body.page-id-355 .page-title-wrap {
	display: none !important;
}
body.page-id-355 .main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
body.page-id-355 .site-content-wrap,
body.page-id-355 .site-content-wrap main.main,
body.page-id-355 .site-content-wrap #site-content,
body.page-id-355 .site-content-wrap article,
body.page-id-355 .site-content-wrap .entry-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* flex-start, nie center - zdjęcie ma stać od razu pod nagłówkiem,
	 * bez pustego pasa nad nim (wcześniej "center" zostawiało tam lukę,
	 * widoczną jako oderwana od góry krawędź zdjęcia). */
	justify-content: flex-start;
	min-height: 0;
}
/*
 * Szerokość zdjęcia I tekstu = dokładnie ta sama klasa ".container", której
 * motyw używa w nagłówku (logo/menu/ikony) - więc tekst jest zlicowany od
 * lewej z logo i od prawej z ostatnią ikoną social media PRZY KAŻDEJ
 * szerokości okna, bez twardo wpisanych pikseli (".container" ma własne,
 * responsywne breakpointy z resztą motywu). Zdjęcie dostało tę samą
 * szerokość co tekst, żeby oba elementy wizualnie się zgadzały zamiast
 * węższego zdjęcia z szerszym tekstem wystającym poza nie po bokach.
 */
#block-statut-hero {
	height: auto !important;
	min-height: 0 !important;
	max-height: 100%;
	/* WordPress dopisuje temu blokowi inline style="aspect-ratio:unset"
	 * (bo blok ma ustawiony minHeight) - inline zawsze bije zewnętrzny
	 * arkusz niezależnie od specyficzności selektora, stąd !important,
	 * inaczej box wychodził na 1320x368 zamiast 16:9 i zdjęcie było
	 * przycięte do wąskiego, powiększonego paska (stąd wrażenie, że widać
	 * "dwie" grafiki - to był jeden, mocno obcięty kadr). */
	aspect-ratio: 16 / 9 !important;
	flex: none;
}
#block-statut-hero .wp-block-cover__image-background {
	filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
#block-statut-hero .wp-block-cover__inner-container {
	text-align: left;
}
#block-statut-hero .wp-block-cover__inner-container p {
	text-align: left;
}

/* Statut: the theme's fixed decorative background shows through above the
 * cover. Use the same photo from the cover at the top of the page instead.
 * Keep the existing cover box so its text remains in its current position. */
body.page-id-355 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-355 .page-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/statut.jpg');
	background-size: cover;
	/* The lettering ends about 49vw below the photo's top. On a short,
	 * wide viewport, raise only the amount needed to keep it in view. */
	background-position: center min(0px, calc(100vh - 49vw));
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	pointer-events: none;
}
body.page-id-355 .page-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 18, 44, 0.65);
	pointer-events: none;
}
body.page-id-355 header.header,
body.page-id-355 .site-content-wrap {
	position: relative;
	z-index: 1;
}
body.page-id-355 header.header {
	z-index: 2;
}
body.page-id-355 #block-statut-hero .wp-block-cover__image-background,
body.page-id-355 #block-statut-hero .wp-block-cover__background {
	display: none !important;
}

@media (max-width: 767px) {
	body.page-id-355 .page-wrap {
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}
	body.page-id-355 #block-statut-hero {
		aspect-ratio: auto !important;
		max-height: none;
		padding: 1.5rem 1rem;
	}
}

/*
 * PSAT: podstrona "1,5% OPP" (id=360, dziecko O Stowarzyszeniu) -
 * dokładnie ten sam mechanizm co poprawiona strona Statut powyżej (pełna
 * fotografia jako nieruchome tło na ::before/::after .page-wrap, zamiast
 * ograniczonego do wąskiego boxa bloku Cover - ten zostaje tylko jako
 * kontener na tekst, jego własny obrazek/tło jest ukryty).
 *
 * Różnica: bez specjalnego przesunięcia "min(0px, calc(100vh - 49vw))" -
 * ta ilustracja (1-5-procent-psat.webp) ma treść rozłożoną równomiernie
 * po całym kadrze, nie ma "martwej strefy" u góry jak statut.jpg, więc
 * zwykłe center/center wystarcza.
 */
body.page-id-360 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-360 .page-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/1-5-procent-psat.webp');
	/* "contain", nie "cover" - ta ilustracja ma ważną treść (dymki z
	 * tekstem) tuż przy górnej krawędzi; "cover" przycinał ją, gdy
	 * proporcje okna są szersze niż 16:9 obrazka. "contain" pokazuje
	 * całe zdjęcie bez kadrowania, kosztem granatowych pasów po bokach
	 * (lub górze/dole) przy skrajnych proporcjach okna. */
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	pointer-events: none;
}
body.page-id-360 .page-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 18, 44, 0.65);
	pointer-events: none;
}
body.page-id-360 header.header,
body.page-id-360 .site-content-wrap {
	position: relative;
	z-index: 1;
}
body.page-id-360 header.header {
	z-index: 2;
}
body.page-id-360 #block-15opp-hero .wp-block-cover__image-background,
body.page-id-360 #block-15opp-hero .wp-block-cover__background {
	display: none !important;
}
body.page-id-360 .page-wrap {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}
body.page-id-360 .footer,
body.page-id-360 .page-title-wrap {
	display: none !important;
}
body.page-id-360 .main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
body.page-id-360 .site-content-wrap,
body.page-id-360 .site-content-wrap main.main,
body.page-id-360 .site-content-wrap #site-content,
body.page-id-360 .site-content-wrap article,
body.page-id-360 .site-content-wrap .entry-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 0;
}
#block-15opp-hero {
	height: auto !important;
	min-height: 0 !important;
	max-height: 100%;
	aspect-ratio: 16 / 9 !important;
	flex: none;
}
#block-15opp-hero .wp-block-cover__inner-container {
	text-align: left;
}
#block-15opp-hero .wp-block-cover__inner-container p {
	text-align: left;
}

@media (max-width: 767px) {
	body.page-id-360 .page-wrap {
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}
	body.page-id-360 #block-15opp-hero {
		aspect-ratio: auto !important;
		max-height: none;
		padding: 1.5rem 1rem;
	}
}

/*
 * PSAT: płynne znikanie/pojawianie się napisów menu nad dymkiem na
 * podstronie "1,5% OPP" - JS (psat_15opp_bubble_hover w functions.php)
 * tylko przełącza opacity przez inline style, to tutaj dodaje samo
 * przejście.
 */
body.page-id-360 .navigation-main a {
	transition: opacity 0.25s ease;
}

/*
 * PSAT: podstrony PDPH 2018-2019 (id=375) i PDPH 2022-2023 (id=377) -
 * DŁUGA, scrollowalna treść (inaczej niż Statut/1,5% OPP), zdjęcie w tle
 * NIERUCHOME (position:fixed, jak na samej stronie O Stowarzyszeniu) -
 * przewija się tylko treść, zdjęcie stoi w miejscu przez cały czas
 * czytania. Bez maski rozpadu krawędzi (nikt o to nie prosił dla tła
 * całej strony - to osobna rzecz od miniaturki/efektu na siatce).
 * Stopka ukryta na życzenie, mimo że strona scrolluje.
 */
body.page-id-375,
body.page-id-377 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-375::before,
body.page-id-377::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: #00122c;
	/* "contain", nie "cover" - zdjęcie ma być widoczne w całości (jak na
	 * podstronie 1,5% OPP), kosztem granatowych pasów po bokach/górze/dole
	 * przy proporcjach okna innych niż proporcje zdjęcia. */
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
}
body.page-id-375::before {
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/pdph1-podstrona-psat.webp');
	/* Rozmycie na wszystkich 4 krawędziach (ta sama maska fala+blur co na
	 * miniaturach galerii) + przyciemnienie: 0.6 -> 0.48 (-20%) -> 0.24
	 * (jeszcze -50% na wyraźną prośbę) - tylko dla PDPH1, PDPH2 zostaje bez
	 * przyciemnienia. */
	filter: grayscale(1) brightness(0.24) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
}
body.page-id-377::before {
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/pdph2-podstrona-psat.webp');
	/* Rozmycie na wszystkich 4 krawędziach jak na PDPH1, przyciemnienie
	 * 0.6 -> 0.3 (-50%), na wyraźną prośbę (wcześniej było bez
	 * przyciemnienia, potem użytkownik zmienił zdanie). */
	filter: grayscale(1) brightness(0.3) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
}
body.page-id-375 .footer,
body.page-id-375 .page-title-wrap,
body.page-id-377 .footer,
body.page-id-377 .page-title-wrap,
body.page-id-405 .footer,
body.page-id-405 .page-title-wrap,
body.page-id-419 .footer,
body.page-id-419 .page-title-wrap,
body.page-id-429 .footer,
body.page-id-429 .page-title-wrap,
body.page-id-440 .footer,
body.page-id-440 .page-title-wrap,
body.page-id-449 .footer,
body.page-id-449 .page-title-wrap {
	display: none !important;
}
body.page-id-375 .main,
body.page-id-377 .main,
body.page-id-405 .main,
body.page-id-419 .main,
body.page-id-429 .main,
body.page-id-440 .main,
body.page-id-449 .main {
	padding-top: 0 !important;
}
body.page-id-375 .entry-content,
body.page-id-377 .entry-content,
body.page-id-405 .entry-content,
body.page-id-419 .entry-content,
body.page-id-429 .entry-content,
body.page-id-440 .entry-content,
body.page-id-449 .entry-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 60px 24px;
}
body.page-id-375 .entry-content p,
body.page-id-377 .entry-content p,
body.page-id-405 .entry-content p,
body.page-id-419 .entry-content p,
body.page-id-429 .entry-content p,
body.page-id-440 .entry-content p,
body.page-id-449 .entry-content p {
	font-size: 19px;
	line-height: 1.7;
	color: #eef3f8;
}
body.page-id-405 .entry-content a,
body.page-id-405 .entry-content a:visited,
body.page-id-419 .entry-content a,
body.page-id-419 .entry-content a:visited,
body.page-id-429 .entry-content a,
body.page-id-429 .entry-content a:visited,
body.page-id-440 .entry-content a,
body.page-id-440 .entry-content a:visited,
body.page-id-449 .entry-content a,
body.page-id-449 .entry-content a:visited {
	color: var(--ignition-primary-color);
	text-decoration: underline;
}

/*
 * PSAT: podstrona "Szkolenia strzeleckie dla młodzieży w ramach EDB"
 * (id=405, kategoria STRZELECTWO) - ten sam układ i te same efekty tła co
 * GUN 'N RUN (brightness 0.1 + maska rozpadu na 4 krawędziach), na
 * wyraźną prośbę.
 */
body.page-id-405 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-405::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: #00122c;
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/edb-main-psat.webp');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.1) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
}

/*
 * PSAT: podstrona "RODZINNE IMPREZY STRZELECKIE" (/pikniki/, id=429,
 * kategoria STRZELECTWO) - te same efekty tła co EDB/GUN 'N RUN
 * (brightness 0.1 + maska rozpadu na 4 krawędziach), na wyraźną prośbę.
 */
body.page-id-429 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-429::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: #00122c;
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/pikniki-main-psat.webp');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.1) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
}

/*
 * PSAT: podstrona "ZAWODY" (dawniej IPSC; /zawody/, id=440, kategoria
 * STRZELECTWO) - te same efekty tła co EDB/GUN 'N RUN/pikniki (brightness
 * 0.1 + maska rozpadu na 4 krawędziach). Dwa rozdziały: LEKKA PIECHOTA i
 * IPSC - nagłówki h3.psat-chapter.
 */
body.page-id-440 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-440::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: #00122c;
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/zawody-main-psat.webp');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.1) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
}

/*
 * PSAT: podstrona "SZKOLENIA I TRENINGI" (/treningi/, id=449, kategoria
 * SZKOLENIA I TRENINGI) - te same efekty tła co IPSC/EDB/GUN 'N RUN
 * (brightness 0.1 + maska rozpadu na 4 krawędziach).
 */
body.page-id-449 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-449::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: #00122c;
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/treningi-main-psat.webp');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.1) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
}

/*
 * PSAT: strona OFERTA (id=15, /oferta/) - jedna strona, bez zdjęcia w tle
 * i bez paska podstron, tekst przeplatany zdjęciami (ta sama galeria i
 * lightbox co O Stowarzyszeniu, ramki z inline aspect-ratio = dokładne
 * proporcje zdjęcia). Bez stopki (na wyraźną prośbę).
 */
body.page-id-15 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-15 .page-title-wrap,
body.page-id-15 .footer {
	display: none !important;
}
body.page-id-15 .main {
	padding-top: 0 !important;
}
body.page-id-15 .entry-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 60px 24px;
}
body.page-id-15 .entry-content p,
body.page-id-15 .entry-content li {
	font-size: 19px;
	line-height: 1.7;
	color: #eef3f8;
}
body.page-id-15 .entry-content a,
body.page-id-15 .entry-content a:visited {
	color: var(--ignition-primary-color);
	text-decoration: underline;
}
body.page-id-15 .entry-content p.psat-subtitle {
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	color: var(--ignition-primary-color);
	margin-bottom: 40px;
}
body.page-id-15 .entry-content h3.psat-chapter {
	clear: both;
}
/* Pionowe zdjęcie wpasowane w akapit: tekst po lewej, zdjęcie po prawej
 * (30% kolumny), tekst wyśrodkowany w pionie względem zdjęcia - bez pustej
 * przerwy pod akapitem, jaką dawał float. Na wąskim ekranie zdjęcie nad
 * tekstem. */
.psat-media-row {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 40px 0;
}
.psat-media-row > p {
	flex: 1;
	margin: 0;
}
.psat-media-row > .psat-gallery-item.psat-media-row-photo {
	flex: 0 0 30%;
	margin: 0;
}
.psat-media-row-photo .psat-gallery-trigger {
	max-width: 100%;
}
@media (max-width: 600px) {
	.psat-media-row {
		flex-direction: column-reverse;
	}
	.psat-media-row > .psat-gallery-item.psat-media-row-photo {
		flex-basis: auto;
		width: 60%;
	}
}

/*
 * PSAT: podstrona "NAMS-POCZĄTEK" (id=419, kategoria NAMS-POCZĄTEK) - te
 * same efekty tła co GUN 'N RUN (brightness 0.1 + maska rozpadu na 4
 * krawędziach), na wyraźną prośbę ("filtrami takimi samymi co w gnr").
 */
body.page-id-419 {
	background-image: none !important;
	background-color: #00122c;
}
body.page-id-419::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: #00122c;
	background-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/10/nams-main-psat.webp');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	filter: grayscale(1) brightness(0.1) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
}

/*
 * PSAT: galeria zdjęć na podstronach PDPH - te same efekty co miniaturki
 * w siatce "O Stowarzyszeniu" (.entry-item-thumb): zielony duotone +
 * maska rozpadu krawędzi w spoczynku, pełny kolor + ostre krawędzie +
 * zielona ramka na hover (klon <img> dla płynnego przenikania, patrz
 * psat_pdph_gallery() w functions.php - mask-image/filter nie da się
 * animować bezpośrednio). Osobne klasy (.psat-gallery-*) zamiast
 * .entry-item-thumb, żeby nie mieszać z regułami specyficznymi dla
 * bloku GutenBee na stronie siatki.
 *
 * Zdjęcia są teraz wstawione pojedynczo, bezpośrednio w treści między
 * akapitami (nie w osobnej siatce na końcu) - stąd .psat-gallery-item
 * ma pełną szerokość kolumny tekstu, a nie 1/3 w gridzie.
 */
.psat-gallery-item {
	margin: 40px 0;
}
/* PSAT: wszystkie miniatury galerii (zdjęcia i filmy, na wszystkich
 * podstronach PDPH/GNR/EDB/NAMS) zmniejszone o 25% względem pełnej
 * kolumny tekstu i wyśrodkowane, na wyraźną prośbę. */
.psat-gallery-trigger {
	max-width: 75%;
	margin: 0 auto;
}
/* PSAT: wyjątek dla zdjęć w innej proporcji niż 16:9 (np. "ja ak" w
 * galerii NAMS, pionowe 720x960 = 3:4) - box dopasowuje WYSOKOŚĆ do
 * rzeczywistych proporcji zdjęcia zamiast wymuszać 16:9 - zdjęcie
 * wypełnia go w całości, bez przycinania (cover) i bez pustych pasów
 * (contain). Szerokość zmniejszona o 50% (max-width:50%) i wyśrodkowana
 * na wyraźną prośbę - zamiast pełnej kolumny tekstu jak reszta galerii. */
.psat-gallery-item-auto .psat-gallery-trigger {
	aspect-ratio: 3 / 4;
	max-width: 37.5%;
	margin: 0 auto;
}
/* PSAT: wyjątek dla zdjęć 3:2 (np. "11 listopada 3" w galerii pikniki) -
 * box dopasowany do proporcji zdjęcia, bez przycinania, szerokość jak
 * reszta galerii (75%), na wyraźną prośbę. */
.psat-gallery-item-3x2 .psat-gallery-trigger {
	aspect-ratio: 3 / 2;
}
/* PSAT: wyjątek dla zdjęć 4:3 (np. "4" w galerii IPSC) - jak 3x2 wyżej,
 * ramka dopasowana do proporcji, szerokość jak reszta galerii. */
.psat-gallery-item-4x3 .psat-gallery-trigger {
	aspect-ratio: 4 / 3;
}
/* PSAT: wyjątek dla zdjęć 2:1 (np. "BEST 1600_800" w galerii ZAWODY). */
.psat-gallery-item-2x1 .psat-gallery-trigger {
	aspect-ratio: 2 / 1;
}
/* PSAT: nagłówki rozdziałów na podstronie (np. ZAWODY: LEKKA PIECHOTA,
 * IPSC) - wyśrodkowane, wielkie litery, mniejsze od tytułu (h2), z
 * wyraźnym odstępem od poprzedniego rozdziału. */
.entry-content h3.psat-chapter {
	text-transform: uppercase;
	margin-top: 80px;
	margin-bottom: 24px;
}
.entry-content h2 + h3.psat-chapter {
	margin-top: 32px;
}
/* Na telefonie długie nagłówki rozdziałów (np. EDUKACJA DLA
 * BEZPIECZEŃSTWA W SZKOŁACH) łamały się w środku słowa - mniejsza czcionka
 * i łamanie tylko między słowami. */
@media (max-width: 600px) {
	.entry-content h3.psat-chapter {
		font-size: 26px;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
}
.psat-gallery-trigger {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 3px solid transparent;
	box-sizing: border-box;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: border-color 0.3s ease;
}
.psat-gallery-trigger:hover {
	border-color: var(--ignition-primary-color);
}
.psat-gallery-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.psat-gallery-thumb:not(.psat-gallery-thumb-reveal) {
	filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(130deg) saturate(3.2) contrast(1.1);
	mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	-webkit-mask-image: url('https://host862681.stronawcal.pl/wp-content/uploads/2026/09/statut_4edge_mask.png');
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
.psat-gallery-thumb-reveal {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.75s ease;
	pointer-events: none;
}
.psat-gallery-trigger:hover .psat-gallery-thumb-reveal {
	opacity: 1;
}

/*
 * PSAT: ikona YT wyśrodkowana na miniaturach filmów (GUN 'N RUN) - sama
 * miniatura/hover/maska to dokładnie ten sam .psat-gallery-trigger/
 * .psat-gallery-thumb co zdjęcia, tylko dochodzi ta nakładka. pointer-
 * events:none, żeby nie przejmowała kliknięcia na przycisku pod spodem.
 */
.psat-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	pointer-events: none;
	z-index: 1;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.psat-video-play svg {
	width: 100%;
	height: 100%;
	display: block;
}

/*
 * PSAT: prosty lightbox do pełnego podglądu zdjęć z galerii PDPH -
 * przyciemnione tło na cały ekran, wyśrodkowany obrazek w oryginalnym
 * kolorze/rozmiarze (bez filtra/maski), zamknięcie przez X/Esc/klik w tło.
 */
.psat-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 18, 44, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	padding: 40px;
	box-sizing: border-box;
}
.psat-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.psat-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.psat-lightbox-img.is-hidden {
	display: none;
}
.psat-lightbox-video {
	display: none;
	width: min(90vw, 1280px);
	aspect-ratio: 16 / 9;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.psat-lightbox-video.is-active {
	display: block;
}
.psat-lightbox-video iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
.psat-lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 42px;
	line-height: 1;
	cursor: pointer;
	padding: 10px;
}

/* ===== Calendarium (lista wpisów, wpis, kategorie): bez tła motywu,
 * bez stopki i bez tagów (na wyraźną prośbę). */
body.blog,
body.single-post,
body.archive {
	background-image: none !important;
	background-color: #00122c;
}
body.blog .footer,
body.single-post .footer,
body.archive .footer,
body.single-post .entry-tags {
	display: none !important;
}

/* ===== Calendarium: efekt zdjęć jak w galeriach O Stowarzyszeniu
 * (markup budowany w JS, psat_calendarium_images). Proporcje = proporcje
 * zdjęcia (bez przycinania do 16:9). Zdjęcia w tekście 75% (jak na
 * podstronach), obrazek wyróżniający i galerie na całą szerokość. */
.psat-gallery-trigger[class*="psat-cal-"] {
	aspect-ratio: auto;
}
.psat-gallery-trigger[class*="psat-cal-"] .psat-gallery-thumb {
	height: auto;
}
.psat-gallery-trigger[class*="psat-cal-"] .psat-gallery-thumb-reveal {
	height: 100%;
}
figure.wp-block-image:has(> .psat-cal-image) {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}
.psat-cal-image .psat-gallery-thumb:not(.psat-gallery-thumb-reveal) {
	width: 100% !important;
}
.psat-cal-featured,
.psat-cal-gallery {
	max-width: none;
	margin: 0;
}
/* galeria (rdzeń WP, przycięte kafelki): przycisk wypełnia kafelek */
.wp-block-gallery figure.wp-block-image > .psat-cal-gallery {
	flex-grow: 1;
	height: 100%;
}
.wp-block-gallery.is-cropped .psat-cal-gallery .psat-gallery-thumb {
	height: 100%;
	object-fit: cover;
}
/* lista wpisów: filtr + hover na obrazku wyróżniającym, klik = wpis */
.psat-cal-list-link {
	display: block;
	position: relative;
	overflow: hidden;
	border: 3px solid transparent;
	transition: border-color 0.3s ease;
}
.psat-cal-list-link:hover {
	border-color: var(--ignition-primary-color);
}
.psat-cal-list-link .psat-gallery-thumb {
	height: auto;
}
.psat-cal-list-link .psat-gallery-thumb-reveal {
	height: 100%;
}
.psat-cal-list-link:hover .psat-gallery-thumb-reveal {
	opacity: 1;
}

/* ===== AKTUALNOŚCI: filmy (mp4 i YouTube) jako miniatury z filtrem +
 * ikona play, klik = lightbox (psat_aktualnosci_video_block/_youtube_block). */
.psat-cal-video-figure {
	margin: 40px 0;
}
.psat-cal-video-figure figcaption {
	text-align: center;
}
/* YouTube: okładka hqdefault ma czarne pasy (4:3) - kadr 16:9 je obcina. */
.psat-gallery-trigger.psat-cal-yt {
	aspect-ratio: 16 / 9;
}
.psat-gallery-trigger.psat-cal-yt .psat-gallery-thumb {
	height: 100%;
}
video.psat-gallery-thumb {
	pointer-events: none;
}
.psat-video-play-mp4 {
	width: 64px;
	height: 64px;
}
/* lightbox mp4: proporcje filmu (także pionowe z telefonu), bez wymuszania 16:9 */
.psat-lightbox-video.is-mp4 {
	width: auto;
	aspect-ratio: auto;
}
.psat-lightbox-video.is-mp4 video {
	display: block;
	max-width: 90vw;
	max-height: 85vh;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ===== AKTUALNOŚCI: rozmiar zdjęcia/filmu/galerii ustawiany przez Michała
 * w edytorze - Zaawansowane -> Dodatkowe klasy CSS: rozmiar-25/50/75/100
 * (% szerokości kolumny, wyśrodkowane). Bez klasy: domyślne 75% miniatur. */
.entry-content > .rozmiar-25 {
	width: 25% !important;
	max-width: 25% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.entry-content > .rozmiar-50 {
	width: 50% !important;
	max-width: 50% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.entry-content > .rozmiar-75 {
	width: 75% !important;
	max-width: 75% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.entry-content > .rozmiar-100 {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.entry-content > [class*="rozmiar-"] .psat-gallery-trigger {
	max-width: 100%;
}
.entry-content > [class*="rozmiar-"] > img,
.entry-content > [class*="rozmiar-"] > video {
	width: 100%;
	height: auto;
}

/* ===== WERSJA MOBILNA (2026-10-06, decyzje Michała) =====
 * Telefon = poniżej 768 px szerokości. Nagłówek i motto także przy niskim
 * ekranie (telefon w poziomie, wysokość do 500 px). */

/* Motto na START: każde zdanie w osobnej linii zamiast jednej uciętej. */
@media (max-width: 767px) {
	.psat-motto-wrap h1 {
		white-space: normal !important;
	}
	.psat-motto-line {
		display: block;
	}
}
/* Niski ekran (telefon w poziomie): bez przesunięcia w górę - inaczej
 * motto wchodzi pod logo. */
@media (max-height: 500px) {
	.psat-motto-wrap {
		transform: none !important;
	}
}

/* Przyklejony nagłówek po przewinięciu: mniejsze logo, pełne granatowe tło. */
@media (max-width: 767px), (max-height: 500px) {
	.head-mast.sticky-fixed {
		background-color: #00122c !important;
	}
	.head-mast.sticky-fixed .psat-logo-svg {
		height: 60px;
	}
}

/* Zdjęcia i filmy w treści: domyślnie pełna szerokość, rozmiar-* większy. */
@media (max-width: 767px) {
	.psat-gallery-trigger {
		max-width: 100%;
	}
	.psat-gallery-item-auto .psat-gallery-trigger {
		max-width: 75%;
	}
	.entry-content > .rozmiar-25 {
		width: 50% !important;
		max-width: 50% !important;
	}
	.entry-content > .rozmiar-50,
	.entry-content > .rozmiar-75 {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Tła podstron O Stowarzyszeniu: na telefonie gładki granat. */
@media (max-width: 767px) {
	body.parent-pageid-242 {
		background-image: none !important;
		background-color: #00122c !important;
	}
	body.parent-pageid-242::before,
	body.parent-pageid-242 .page-wrap::before,
	body.parent-pageid-242 .page-wrap::after {
		display: none !important;
	}
}

/* Baner cookies: mniejszy, Akceptuję/Odrzucam obok siebie. */
@media (max-width: 767px) {
	.cmplz-cookiebanner {
		padding: 12px 14px !important;
		row-gap: 8px !important;
	}
	.cmplz-cookiebanner .cmplz-message {
		font-size: 12.5px !important;
		line-height: 1.45 !important;
	}
	.cmplz-cookiebanner .cmplz-buttons {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
	}
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		flex: 1 1 calc(50% - 4px) !important;
		width: auto !important;
		min-width: 0 !important;
		height: 40px !important;
		margin: 0 !important;
		font-size: 14px !important;
	}
	.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences {
		flex-basis: 100% !important;
	}
}

/* Strzałka "do góry": mniejsza, półprzezroczysta, przy krawędzi; stopka
 * z zapasem pod nią, żeby nie zasłaniała linku Cookies. */
@media (max-width: 1199px) {
	.btn-to-top {
		width: 40px !important;
		height: 40px !important;
		right: 10px !important;
		bottom: 10px !important;
	}
	.btn-to-top.btn-to-top-visible {
		opacity: 0.7;
	}
	.footer-info {
		padding-bottom: 60px !important;
	}
}

/* ===== WERSJA MOBILNA, runda 2 (zgłoszenia z prawdziwego telefonu,
 * okno ok. 310 px przy powiększonym tekście w Chrome) ===== */

/* Logo 80 px (po przewinięciu 60 px - reguła wyżej) i napis PSAT 40 px. */
@media (max-width: 767px), (max-height: 500px) {
	.head-mast .psat-logo-svg {
		height: 80px;
	}
	.head-mast.sticky-fixed .psat-logo-svg {
		height: 60px;
	}
	.psat-motto {
		font-size: 40px !important;
	}
}

/* Ikony sociali: zawsze w jednej linii; na telefonie widoczne obok MENU,
 * 22 px (rozmiar przez zmienne, bo JS ustawia go inline z !important). */
.head-content-slot .ignition-menu-social-menu {
	flex-wrap: nowrap !important;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.head-content-slot-end {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
	}
	.head-content-slot-end .head-content-slot-item {
		display: flex !important;
		align-items: center;
	}
	.head-content-slot .ignition-menu-social-menu {
		display: flex !important;
		align-items: center;
		margin: 0 4px 0 0;
		padding: 0;
		--psat-icon: 22px;
		--psat-icon-gap: 10px;
	}
}

/* Bardzo wąski ekran (poniżej 360 px, np. telefon z powiększonym tekstem):
 * ciaśniej, żeby logo + ikony + MENU zmieściły się w jednej linii. */
@media (max-width: 359px) {
	.head-mast .site-branding {
		margin-right: 0;
	}
	.head-mast .head-menu-slot {
		display: none;
	}
	.head-content-slot .ignition-menu-social-menu {
		margin: 0 8px 0 0;
		--psat-icon: 20px;
		--psat-icon-gap: 8px;
	}
	.head-content-slot .ignition-menu-social-menu li:last-child a {
		margin-right: 0 !important;
	}
	.head-mast .mobile-nav-trigger {
		padding: 7px 8px;
	}
}

/* O Stowarzyszeniu: pasek filtrów jako lista rozwijana (przycisk z JS,
 * psat_discography_grid_tweaks). Na komputerze/tablecie bez zmian. */
.psat-filter-toggle,
.psat-filter-all-label {
	display: none;
}
@media (max-width: 767px) {
	.psat-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0 0 4px;
		padding: 12px 16px;
		background: transparent;
		border: 2px solid #ffffff;
		color: #ffffff;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
	}
	.psat-filter-toggle-arrow {
		transition: transform 0.2s ease;
	}
	.psat-filter-toggle.is-open .psat-filter-toggle-arrow {
		transform: rotate(180deg);
	}
	.ci-item-filters {
		display: none !important;
		flex-direction: column;
		align-items: stretch !important;
		margin: 0 0 30px !important;
		background: #0a1f3d;
		border: 1px solid rgba(255, 255, 255, 0.15);
	}
	.ci-item-filters.is-open {
		display: flex !important;
	}
	.ci-item-filters .ci-item-filter {
		display: flex !important;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin: 0 !important;
		padding: 12px 16px !important;
		text-align: left;
		justify-content: flex-start;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	}
	.ci-item-filters .ci-item-filter:last-child {
		border-bottom: 0 !important;
	}
	.psat-filter-all-label {
		display: inline;
	}
}