/* =========================================================
   Slider Brand Perspective

   Arkusz przeniesiony z bloku `bpb-hero-karuzela` (wtyczka
   `bp-bloki` 1.3.0), z wymiarami zmierzonymi przy oknie 1536 px.

   Jednostki: `rem`. Kadence trzyma `html { font-size: 62.5% }`,
   czyli 1rem = 10px — a strony Brand Perspective skalują się
   zmieniając bazę `rem` na progach. Wartość w pikselach stałaby
   w miejscu, gdy reszta strony rośnie.

   Kreski cieńsze niż 2 px zostają w `px` — skalowanie je rozmywa.

   Wymiary paska pod sliderem (z pomiaru wzorca):
     kontener        1332 × 40
     karta zapowiedzi 436 × 118, promień 12, tło przezroczyste,
                      ramka 0,8 px
     miniatura        120 × 90, promień 6
     kropki           8 × 8 okrągłe, odstęp 16
     strzałki         40 × 40 okrągłe, tło przezroczyste
   ========================================================= */

.bps {
	--bps-wysokosc: 72rem;
	--bps-wysokosc-mobilna: 56rem;
	--bps-akcent: var(--global-palette1, #3ac2be);

	position: relative;
	height: var(--bps-wysokosc);
	overflow: hidden;
	background: #4e4e55;
}

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

.bps__kontener {
	max-width: var(--global-content-width, 133.2rem);
	margin: 0 auto;
	padding-left: var(--global-content-edge-padding, 1.2rem);
	padding-right: var(--global-content-edge-padding, 1.2rem);
	width: 100%;
}

/* --- slajdy -------------------------------------------------------- */

.bps__tor {
	position: absolute;
	inset: 0;
}

.bps__slajd {
	position: absolute;
	inset: 0;
	display: flex;
	/* Treść WYŚRODKOWANA w pionie.

	   Do tej pory było `flex-end`, czyli treść przyklejona do dołu kadru,
	   z uzasadnieniem: „dłuższy slajd rośnie w górę, a najniższy element
	   stoi zawsze w tym samym miejscu". PRZEKREŚLONE — przy sliderze
	   720 px wysokości kolumna treści siadała w dolnej ćwiartce kadru
	   i wyglądała na zsuniętą z ekranu (zmierzone: górna krawędź nagłówka
	   478 px od góry slidera na 820 px wysokości).

	   Środkujemy razem z `padding-bottom` na `.bps__tresc` — patrz komentarz
	   tam. Cena zmiany jest ta sama, o której mówił stary komentarz:
	   slajd z akapitem i slajd bez akapitu mają przycisk na różnej
	   wysokości. To świadomy wybór. */
	align-items: center;
	/* Tlo z dwoch pomniejszonych wersji - patrz BPS_Render::tla(). */
	background-image: var(--bps-tlo-m, none);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.bps__slajd.jest-aktywny {
	opacity: 1;
	pointer-events: auto;
}

/* Wideo w tle. Leży POD przyciemnieniem i pod treścią, ale NAD tłem
   ze zdjęcia — zdjęcie zostaje jako plakat i obraz zastępczy.

   `object-fit: cover` zachowuje się jak `background-size: cover`:
   film wypełnia kadr, nadmiar jest przycinany. */
.bps__wideo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

/* Na telefonie wideo w tle nie jest warte transferu — zostaje plakat,
   czyli zwykłe zdjęcie. To samo dla osób, które w systemie wyłączyły
   animacje. */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {

	.bps__wideo {
		display: none;
	}
}

/* PUŁAPKA: przyciemnienie musi siedzieć na TYM SAMYM elemencie,
   który niesie zdjęcie. Powieszone na rodzicu ląduje POD zdjęciem —
   reguła się wylicza, a efektu nie widać. */
.bps__cien {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Przyciemnienie idzie z LEWEJ w prawo, nie od dołu do góry
	   (zmiana z 2026-08-04). Treść slajdu stoi przy lewej krawędzi,
	   więc to po lewej potrzebny jest kontrast — tam, gdzie leżą
	   litery, a nie u dołu kadru. Prawa strona zostaje czysta,
	   żeby zdjęcie było widać. */
	background: linear-gradient(90deg, rgba(12, 14, 20, 0.78) 0%, rgba(12, 14, 20, 0.55) 34%, rgba(12, 14, 20, 0.18) 62%, rgba(12, 14, 20, 0) 82%);
	pointer-events: none;
}

.bps__slajd .bps__kontener {
	position: relative;
	z-index: 2;
}

/* Układ treści (1.3.0).

   W 1.2.0 całość była wyśrodkowana — bez podstaw w projekcie.
   Wracamy do stanu wyjściowego: kolumna przy LEWEJ krawędzi, wsunięta
   niżej, tak jak w pierwowzorze.

   Kolejność: nagłówek → akapit → przycisk → dopisek → mały obrazek.
   Wszystko wyrównane do lewej.

   `max-width` akapitu w `ch`, nie w `rem`: długość wiersza mierzy się
   liczbą znaków, nie pikselami. 52 znaki to około trzech linii. */
.bps__tresc {
	max-width: 72rem;
	margin: 0;
	/* Wyściółka dolna przy WYŚRODKOWANEJ kolumnie działa inaczej niż przy
	   przyklejonej do dołu: podnosi treść o połowę swojej wysokości ponad
	   geometryczny środek kadru. I o to chodzi — pasek z kropkami
	   i strzałkami zajmuje dół slidera (40 px wysokości + 24 px od dołu),
	   więc treść ma być wyśrodkowana w przestrzeni NAD paskiem, nie
	   w całym kadrze. 6,4 rem = 64 px = dokładnie wysokość tego paska. */
	/* ZSUNIĘTE Z 6,4 NA 3 REM — treść miała zejść jeszcze niżej. Przy
	   wyśrodkowanej kolumnie ta wyściółka podnosi treść o POŁOWĘ
	   swojej wysokości, więc jej zmniejszenie opuszcza treść o 17 px.
	   Poniżej zera zejść się nie da bez wjechania na pasek z kropkami. */
	padding-bottom: 3rem;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Metka nad nagłówkiem — pigułka z obwódką, w kolorze akcentu.
   Świadomie BEZ wypełnienia: na zdjęciu hero pełne tło robiłoby z niej
   drugi przycisk, a to jest etykieta, nie coś do klikania. */
.bps__metka {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin: 0 0 2rem;
	padding: 0.8rem 1.8rem;
	border: 1px solid var(--bpmh-akcent-jasny, #4fdbd4);
	border-radius: 999px;
	background: rgba(79, 219, 212, 0.12);
	color: var(--bpmh-akcent-jasny, #4fdbd4);
	font-size: 1.5rem;
	line-height: 2.1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bps__tekst {
	max-width: 52ch;
	margin: 0 0 2.8rem;
	font-size: 1.9rem;
	line-height: 2.9rem;
	color: rgba(255, 255, 255, 0.92);
}

.bps__obraz-pod {
	display: block;
	/* Wyraźny odstęp od przycisku — obrazek to osobny element,
	   nie podpis przycisku. */
	margin-top: 4rem;
}

/* Szerokość obrazka ustawia się w kokpicie — `--bps-obrazek`
   podstawia PHP (ustawienie zestawu albo nadpisanie przy slajdzie).

   PUŁAPKA, PRZEZ KTÓRĄ SUWAK W PANELU NIC NIE ROBIŁ (2026-08-04).
   Było tu `width: auto` + `max-width: var(--bps-obrazek)`, a render
   wstawiał obrazek w rozmiarze `medium`, czyli najwyżej 300 px szerokości.
   `max-width` NIE POWIĘKSZA — ogranicza. Obrazek trzymał więc swoją
   naturalną szerokość (220 px zmierzone na żywo) i każda wartość powyżej
   niej była bez znaczenia: ustawienie liczby w kokpicie nie dawało
   żadnego efektu.

   Teraz: `width` ustawia rozmiar naprawdę, a plik idzie w rozmiarze
   `full` (patrz `BPS_Render::html()`), więc jest z czego powiększać.
   `max-width: 100%` pilnuje, żeby szeroki obrazek nie wyszedł poza
   kolumnę treści na wąskim ekranie. */
.bps__obraz-pod img {
	display: block;
	width: var(--bps-obrazek, 22rem);
	max-width: 100%;
	height: auto;
}

/* Rozmiar Z GLOBALNEGO H1.

   Wartości pochodzą z Customizer → Typografia → H1: 6 rem na komputerze,
   4 rem na telefonie, interlinia 1,15. Odczytane ze zrzutu
   `_stan/ustawienia.json` → `theme_mods.h1_font`, nie zgadnięte.

   DLACZEGO LICZBA, A NIE DZIEDZICZENIE: nagłówek slajdu jest znacznikiem
   `h2`, bo na stronie może stać kilka slajdów i kilka `h1` byłoby błędem.
   Znacznik `h2` dziedziczyłby rozmiar H2, nie H1 — stąd wartość wpisana.
   **Zmieniasz H1 w Customizerze — zmień też tutaj.** */
.bps__tytul {
	/* 5 rem, nie 6 (2026-08-05): globalne H1 okazalo sie za duze na slajdzie.
	   Nagłówek slajdu jest krótki i stoi na zdjęciu, więc czyta się większy,
	   niż wynika z liczby. Wersja z 6 rem jest w historii wydań. */
	font-size: 5rem;
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.4px;
	color: #fff;
	margin: 0 0 1.6rem;
}

/* Przycisk wygląda dokładnie jak „Zapytaj o ofertę" w nagłówku:
   turkusowy gradient, biały tekst.

   NIE bierzemy tego z `--global-palette1` — na części witryn ta zmienna
   trzyma NIEBIESKI, więc przycisk wyszedł niebieski zamiast turkusowego
   (widziane na żywo 2026-08-04). Kolory są te same co w `Mega Header BP`,
   ze zmiennymi wtyczki jako pierwszym źródłem: gdy nagłówek jest na
   stronie, oba przyciski zmienią się razem. */
.bps__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 5.6rem;
	padding: 1.7rem 3.2rem;
	border-radius: 1rem;
	background: linear-gradient(135deg, var(--bpmh-akcent-jasny, #4fdbd4) 0%, var(--bpmh-akcent, #2cb8b4) 100%);
	color: #fff;
	font-size: 1.7rem;
	line-height: 2.4rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.18s ease;
}

.bps__btn:hover,
.bps__btn:focus {
	background: linear-gradient(135deg, var(--bpmh-akcent, #2cb8b4) 0%, var(--bpmh-akcent, #2cb8b4) 100%);
	color: #fff;
}

/* --- pasek sterowania ---------------------------------------------- */

/* Pełna ścieżka `.bps .bps__spod`: `bps__kontener` wyżej nie ustawia
   `position`, a bez niej `bottom` nie miałby do czego się odnieść. */
.bps .bps__spod {
	position: absolute;
	left: 50%;
	bottom: 2.4rem;
	transform: translateX(-50%);
	z-index: 4;
	pointer-events: none;
}

/* Kropki po LEWEJ, karta zapowiedzi i strzałki jedną grupą po PRAWEJ.
   `row-reverse` + `space-between` na trzech elementach rozrzuca je
   równomiernie i karta ląduje na środku — wygląda zupełnie inaczej. */
.bps__pasek {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2.4rem;
	width: 100%;
	pointer-events: none;
}

.bps__pasek > * {
	pointer-events: auto;
}

.bps__kropki {
	display: flex;
	align-items: center;
	align-self: center;
	gap: 1.6rem;
	padding: 0.8rem;
}

.bps__kropka {
	width: 0.8rem;
	height: 0.8rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.18s ease;
}

.bps__kropka.jest-aktywny {
	background: #fff;
}

.bps__prawo {
	display: flex;
	align-items: center;
	gap: 2.4rem;
}

.bps__nawigacja {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.bps__strzalka {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	padding: 0.8rem;
	border: 0.8px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.18s ease;
}

.bps__strzalka:hover,
.bps__strzalka:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.bps__strzalka svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bps__strzalka--lewo svg {
	transform: rotate(180deg);
}

/* --- węższe ekrany -------------------------------------------------- */

@media (max-width: 76.7rem) {

	.bps {
		height: var(--bps-wysokosc-mobilna);
	}

	.bps__tekst {
		font-size: 1.7rem;
		line-height: 2.6rem;
		margin-bottom: 2.4rem;
	}

	/* Telefon: też z globalnego H1 (`theme_mods.h1_font.size.mobile` = 4 rem). */
	.bps__tytul {
		font-size: 3.4rem;
	}

	.bps__pasek {
		align-items: center;
	}
}

/* =====================================================================
   Wspólny hover przycisków

   Wszystkie przyciski na stronie — także te w sliderze i w mega menu —
   mają tę samą reakcję na najechanie. Wzorcem jest przycisk z nagłówka:
   uniesienie o 1 px i turkusowa poświata, bez zmiany tła.

   Dotychczasowy hover slidera spłaszczał gradient do jednego koloru —
   to była trzecia, osobna reakcja na tej samej stronie.

   Reguła stoi PO tej z linii 266, więc wygrywa kolejnością. Wagi są
   równe, więc kolejność jest tu jedynym rozstrzygnięciem — nie
   przestawiaj jej wyżej.
   ===================================================================== */
.bps__btn {
	transition: background 0.18s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bps__btn:hover,
.bps__btn:focus,
.bps__btn:focus-visible {
	background: linear-gradient(135deg, var(--bpmh-akcent-jasny, #4fdbd4) 0%, var(--bpmh-akcent, #2cb8b4) 100%);
	box-shadow: 0 0.8rem 2rem rgba(44, 184, 180, 0.35);
	transform: translateY(-1px);
	color: #fff;
}

/* =====================================================================
   TELEFON — ZDJĘCIE MA BYĆ WIDOCZNE (2026-08-20)

   PROBLEM. Slajd niesie zdjęcie jako tło z `background-size: cover`
   i przyciemnienie idące Z LEWEJ w prawo. Na monitorze to działa: tekst
   stoi po lewej na ciemnym, zdjęcie oddycha po prawej.

   Na pionowym ekranie telefonu oba założenia się rozpadają:

     1. `cover` przy kadrze 39 : 56 wycina z poziomego zdjęcia wąski
        pionowy słupek ze środka — z magazynu energii zostaje fragment
        obudowy bez kontekstu,
     2. przyciemnienie sięgające do 82% szerokości przykrywa przy takiej
        szerokości praktycznie całą klatkę.

   Efekt: zdjęcia po prostu nie widać.

   ROZWIĄZANIE. Na telefonie slajd przestaje być kadrem poziomym z tekstem
   na zdjęciu, a staje się układem pionowym: zdjęcie u góry, treść pod nim.

     - kadrowanie przesunięte do GÓRNEJ części zdjęcia (`50% 22%`),
       bo tam zwykle jest przedmiot, a nie podłoga,
     - przyciemnienie obrócone o 90°: przezroczyste u góry, gęste
       u dołu — tekst dostaje kontrast, zdjęcie zostaje widoczne,
     - treść zsunięta do dołu (`align-items: flex-end`), żeby stała
       na ciemnej części, a nie w połowie zdjęcia.

   Zdjęcie zostaje TŁEM, nie osobnym elementem — układ pozostaje
   jednym blokiem, więc nie trzeba ruszać znaczników ani skryptu.
   ===================================================================== */

@media (max-width: 767px) {

	/* Kadrowanie przesunięte w PRAWO i do GÓRY. W prawo, bo na wszystkich
	   slajdach urządzenie stoi po prawej stronie kadru — środkowanie
	   w poziomie ucinało je na wąskim ekranie. Do góry, bo dolna część
	   zdjęcia to podłoga i tło. Dobrane oglądaniem obu slajdów w kadrze
	   39 : 56, nie z wyliczenia. */
	.bps__slajd {
		align-items: flex-end;
		background-position: 68% 26%;
	}

	/* Górna ćwiartka klatki zostaje praktycznie czysta — tam ma być widać
	   zdjęcie. Od 44% w dół przyciemnienie szybko gęstnieje, żeby nagłówek
	   miał kontrast niezależnie od tego, co akurat jest pod nim. */
	.bps__cien {
		background: linear-gradient(
			180deg,
			rgba(12, 14, 20, 0.05) 0%,
			rgba(12, 14, 20, 0.14) 26%,
			rgba(12, 14, 20, 0.58) 44%,
			rgba(12, 14, 20, 0.88) 62%,
			rgba(12, 14, 20, 0.95) 100%
		);
	}

	/* Treść siada na ciemnej połowie i ma zapas na pasek z kropkami. */
	.bps__tresc {
		padding-bottom: 7rem;
	}

	/* Metka i akapit zabierają na wąskim ekranie sporo wysokości,
	   a to zdjęcie ma tu robić robotę. Akapit skrócony do dwóch linii
	   nie traci sensu, a oddaje klatce kilkadziesiąt pikseli. */
	.bps__tekst {
		margin-bottom: 2rem;
	}

	.bps__metka {
		margin-bottom: 1.4rem;
	}

	/* Mały obrazek pod przyciskiem na telefonie tylko zabiera miejsce
	   zdjęciu głównemu. */
	.bps__obraz-pod {
		display: none;
	}
}

/* Szeroki ekran albo gesty ekran tabletu - duza wersja tla. */
@media (min-width: 64em), (min-width: 40em) and (min-resolution: 1.5dppx) {
	.bps__slajd {
		background-image: var(--bps-tlo, var(--bps-tlo-m, none));
	}
}