/* =====================================================================
   SEKCJE

   Jedna sekcja = jeden plik w templates/sekcje/ i jeden blok reguł tutaj.
   Nazwy klas odpowiadają nazwom układów z panelu, żeby dało się przejść
   od tego, co widać na stronie, do kodu bez szukania.
   ===================================================================== */

/* --- sekcja startowa: pół na pół --- */

.bp-hero__srodek {
	display: grid;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 60em) {
	.bp-hero__srodek {
		grid-template-columns: 1fr 1fr;
		gap: 6.4rem;
	}
}

.bp-hero__nadtytul {
	margin-bottom: 1.2rem;
	color: var(--bp-akcent);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bp-hero__akapit {
	margin-top: 2.4rem;
	max-width: 52rem;
	color: var(--bp-tekst-2);
}

.bp-hero__przycisk { margin-top: 3.2rem; }

.bp-hero__zdjecie {
	overflow: hidden;
	border-radius: 1.6rem;
}

/* `cover` jest tu właściwe, bo w tym miejscu stoi fotografia, a nie
   zdjęcie produktu na białym tle. Przy produkcie użyj `contain`
   i dodaj tło - inaczej wygląda na rozciągnięty. */
.bp-hero__zdjecie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* --- wezwanie do działania --- */

.bp-cta__srodek { text-align: center; }

.bp-cta__akapit {
	margin: 1.6rem auto 3.2rem;
	max-width: 60rem;
	color: var(--bp-tekst-2);
}

.bp-sekcja--ciemna .bp-cta__akapit { color: rgba(255,255,255,.75); }

/* --- rząd kafli --- */

.bp-kafle__naglowek { text-align: center; }

.bp-kafle__wstep {
	margin: 1.6rem auto 0;
	max-width: 64rem;
	color: var(--bp-tekst-2);
	text-align: center;
}

.bp-kafle__siatka {
	display: grid;
	gap: 2.4rem;
	margin-top: 4.8rem;
}

@media (min-width: 48em) {
	.bp-kafle__siatka { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75em) {
	.bp-kafle--kolumn-3 .bp-kafle__siatka { grid-template-columns: repeat(3, 1fr); }
	.bp-kafle--kolumn-4 .bp-kafle__siatka { grid-template-columns: repeat(4, 1fr); }
}

.bp-kafel {
	position: relative;
	padding: 3.2rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.6rem;
	background: var(--bp-biel);
}

.bp-kafel__ikona img {
	width: 4.8rem;
	height: 4.8rem;
	/* Ikona ma być cała widoczna, więc `contain`. `cover` przycięłoby
	   jej krawędzie - przy znaku graficznym wygląda to na usterkę. */
	object-fit: contain;
}

/*
   Zastępnik ikony musi dostać rozmiar wprost. Domyślnie zajmuje całą
   szerokość rodzica - a rodzicem jest kafel, więc puste miejsce po ikonie
   rozpychało się na 36 rem zamiast czterech.
*/
.bp-kafel__ikona .bp-zastepnik {
	width: 4.8rem;
	border-radius: .8rem;
}

.bp-kafel__tytul { margin-top: 2rem; }
.bp-kafel__tytul a { color: inherit; }

.bp-kafel__opis {
	margin-top: 1.2rem;
	color: var(--bp-tekst-2);
}

/* Cały kafel klikalny - obszar rozciąga odnośnik z nagłówka.
   Znaczniki zostają rozdzielone, więc czytnik ekranu czyta sam tytuł,
   a nie tytuł sklejony z opisem. */
.bp-kafel--klikalny .bp-kafel__tytul a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.bp-kafel--klikalny:hover { border-color: var(--bp-akcent); }

/* --- treść i zdjęcie obok siebie --- */

.bp-duo__srodek {
	display: grid;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 60em) {
	.bp-duo__srodek { grid-template-columns: 1fr 1fr; gap: 6.4rem; }

	/* Zamiana stron wyłącznie na szerokim ekranie. Na telefonie
	   kolejność wraca do tej z kodu: najpierw treść, potem zdjęcie. */
	.bp-duo--zdjecie-lewa .bp-duo__tekst   { order: 2; }
	.bp-duo--zdjecie-lewa .bp-duo__zdjecie { order: 1; }
}

.bp-duo__tresc { color: var(--bp-tekst-2); }
.bp-duo__tresc > * + * { margin-top: 1.6rem; }
.bp-duo__przycisk { margin-top: 3.2rem; }

.bp-duo__zdjecie {
	overflow: hidden;
	border-radius: 1.6rem;
}

.bp-duo__zdjecie img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* =====================================================================
   ZASTĘPNIK ZDJĘCIA

   Szary prostokąt na miejscu, w którym stanie zdjęcie. Pokazuje ile
   miejsca zajmie i gdzie będzie - sekcja bez zdjęcia zapadałaby się
   i układ nie przypominałby tego, czym będzie po wypełnieniu.

   Znika sam w chwili wgrania pliku; nie ma przełącznika do pamiętania.
   Kreska po przekątnej odróżnia go od celowo szarego tła - bez niej
   wygląda jak element projektu, a nie jak puste miejsce.
   ===================================================================== */

.bp-zastepnik {
	width: 100%;
	border-radius: 1rem;
	background-color: var(--bp-ramka-lekka);
	background-image: linear-gradient(
		135deg,
		transparent calc(50% - 1px),
		var(--bp-ramka) calc(50% - 1px),
		var(--bp-ramka) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

/* Przycisk, którego adresu jeszcze nie ustawiono. Wygląda jak przycisk,
   ale nie udaje działającego: brak `href` i wyciszony kolor. */
.bp-btn--zastepczy {
	background: var(--bp-ramka);
	color: var(--bp-tekst-2);
	cursor: default;
}

/* =====================================================================
   PAS Z LICZBAMI
   ===================================================================== */

.bp-zaufanie__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 4rem 2rem;
	text-align: center;
}

.bp-zaufanie__liczba {
	font-size: 4.8rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--bp-akcent);
}

.bp-sekcja--ciemna .bp-zaufanie__liczba { color: var(--bp-biel); }

.bp-zaufanie__podpis {
	margin-top: .8rem;
	font-size: 1.6rem;
	line-height: 2.2rem;
	color: var(--bp-tekst-2);
}

.bp-sekcja--ciemna .bp-zaufanie__podpis { color: rgba(255,255,255,.75); }

/* =====================================================================
   OPINIE
   ===================================================================== */

.bp-opinie__naglowek { text-align: center; margin-bottom: 4.8rem; }

.bp-opinie__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	gap: 2.4rem;
}

.bp-opinia {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 3.2rem;
	background: var(--bp-biel);
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.6rem;
}

.bp-sekcja--ciemna .bp-opinia {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.12);
}

.bp-opinia__ocena { margin-bottom: 1.6rem; font-size: 1.8rem; letter-spacing: .2rem; }
.bp-opinia__gwiazdka { color: var(--bp-ramka); }
.bp-opinia__gwiazdka.jest-pelna { color: #f59e0b; }

.bp-opinia__tresc {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.7rem;
	line-height: 2.7rem;
	color: var(--bp-tekst);
}

.bp-sekcja--ciemna .bp-opinia__tresc { color: rgba(255,255,255,.85); }

.bp-opinia__tresc p { margin: 0 0 1.2rem; }
.bp-opinia__tresc p:last-child { margin-bottom: 0; }

.bp-opinia__podpis {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bp-ramka-lekka);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--bp-czern);
}

.bp-sekcja--ciemna .bp-opinia__podpis {
	border-top-color: rgba(255,255,255,.12);
	color: #fff;
}

/* =====================================================================
   NAJCZĘSTSZE PYTANIA
   ===================================================================== */

.bp-faq__naglowek { text-align: center; margin-bottom: 4rem; }

.bp-faq__pozycja {
	border-bottom: 1px solid var(--bp-ramka-lekka);
}

.bp-faq__pozycja:first-child { border-top: 1px solid var(--bp-ramka-lekka); }

.bp-faq__pytanie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 2.4rem 0;
	font-size: 1.8rem;
	line-height: 2.6rem;
	font-weight: 600;
	color: var(--bp-czern);
	cursor: pointer;
	/* Domyślny trójkącik przeglądarki zastępujemy własnym znakiem. */
	list-style: none;
}

.bp-faq__pytanie::-webkit-details-marker { display: none; }

.bp-faq__pytanie:focus-visible {
	outline: 2px solid var(--bp-akcent);
	outline-offset: 2px;
}

/* Znak plus/minus rysowany dwiema kreskami - jedna znika po rozwinięciu. */
.bp-faq__znak {
	position: relative;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
}

.bp-faq__znak::before,
.bp-faq__znak::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--bp-akcent);
	transform: translateY(-50%);
	transition: transform .18s ease, opacity .18s ease;
}

.bp-faq__znak::after { transform: translateY(-50%) rotate(90deg); }

.bp-faq__pozycja[open] .bp-faq__znak::after {
	transform: translateY(-50%) rotate(0);
	opacity: 0;
}

.bp-faq__odpowiedz {
	padding: 0 0 2.4rem;
	font-size: 1.7rem;
	line-height: 2.7rem;
	color: var(--bp-tekst-2);
}

.bp-faq__odpowiedz p { margin: 0 0 1.2rem; }
.bp-faq__odpowiedz p:last-child { margin-bottom: 0; }

/* =====================================================================
   LOGOTYPY
   ===================================================================== */

.bp-sekcja--waska { padding-block: 4rem; }

.bp-logotypy__naglowek {
	margin: 0 0 3.2rem;
	text-align: center;
	font-size: 1.4rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bp-tekst-2);
}

.bp-logotypy__pas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3.2rem 5rem;
}

.bp-logotyp { flex: 0 0 auto; width: 14rem; }

.bp-logotyp img {
	width: 100%;
	height: 6rem;
	object-fit: contain;
	/*
	   Wyszarzenie i przywrócenie koloru po najechaniu. Kilkanaście cudzych
	   znaków w pełnych barwach obok siebie przeciąga uwagę z treści strony.
	*/
	filter: grayscale(1);
	opacity: .6;
	transition: filter .2s ease, opacity .2s ease;
}

.bp-logotyp:hover img,
.bp-logotyp a:focus-visible img {
	filter: grayscale(0);
	opacity: 1;
}

.bp-logotyp .bp-zastepnik { height: 6rem; }

/* =====================================================================
   PROCES KROK PO KROKU
   ===================================================================== */

.bp-proces__naglowek { max-width: 60rem; margin-bottom: 4.8rem; }
.bp-proces__wstep { margin-top: 1.6rem; color: var(--bp-tekst-2); }

.bp-proces__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	gap: 3.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Licznik: numery dopisują się same, więc usunięcie kroku ze środka
	   nie zostawia dziury w numeracji. */
	counter-reset: bp-krok;
}

.bp-krok {
	position: relative;
	counter-increment: bp-krok;
	padding-top: 6rem;
}

.bp-krok::before {
	content: counter(bp-krok, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 3.6rem;
	line-height: 1;
	font-weight: 700;
	color: var(--bp-akcent);
	opacity: .35;
}

/* Kreska łącząca kroki - tylko na szerokim ekranie, gdzie stoją w rzędzie. */
@media (min-width: 64em) {
	.bp-krok::after {
		content: "";
		position: absolute;
		top: 1.8rem;
		left: 6rem;
		right: -3.2rem;
		height: 1px;
		background: var(--bp-ramka);
	}

	.bp-krok:last-child::after { display: none; }
}

.bp-krok__tytul { margin: 0 0 1.2rem; font-size: 2rem; }
.bp-krok__opis { margin: 0; color: var(--bp-tekst-2); }

/* =====================================================================
   GALERIA
   ===================================================================== */

.bp-galeria__naglowek { text-align: center; margin-bottom: 4rem; }

.bp-galeria__siatka {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6rem;
}

@media (min-width: 48em) {
	.bp-galeria--kolumn-3 .bp-galeria__siatka { grid-template-columns: repeat(3, 1fr); }
	.bp-galeria--kolumn-4 .bp-galeria__siatka { grid-template-columns: repeat(4, 1fr); }
}

.bp-galeria__kafel {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 1rem;
	overflow: hidden;
	background: none;
	cursor: pointer;
}

.bp-galeria__kafel--pusty { cursor: default; }

.bp-galeria__kafel img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	/* W siatce liczy się równy rytm, więc przycinamy do kwadratu.
	   W powiększeniu odwrotnie - tam nic nie może zostać ucięte. */
	object-fit: cover;
	transition: transform .3s ease;
}

.bp-galeria__kafel:hover img { transform: scale(1.04); }

.bp-galeria__kafel:focus-visible {
	outline: 2px solid var(--bp-akcent);
	outline-offset: 3px;
}

/* Okno powiększenia - znacznik `dialog` przeglądarki. */
.bp-lupa {
	max-width: 92vw;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 1rem;
	background: none;
	overflow: visible;
}

.bp-lupa::backdrop { background: rgba(2, 6, 23, .88); }

.bp-lupa img {
	display: block;
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 1rem;
}

.bp-lupa__zamknij {
	position: absolute;
	top: -1.2rem;
	right: -1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--bp-czern);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

/* =====================================================================
   PAKIETY
   ===================================================================== */

.bp-cennik__naglowek { text-align: center; max-width: 60rem; margin: 0 auto 4.8rem; }
.bp-cennik__wstep { margin-top: 1.6rem; color: var(--bp-tekst-2); }

.bp-cennik__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
	gap: 2.4rem;
	align-items: start;
}

.bp-pakiet {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 3.2rem;
	background: var(--bp-biel);
	border: 1px solid var(--bp-ramka);
	border-radius: 1.6rem;
}

.bp-pakiet--wyrozniony {
	border-color: var(--bp-akcent);
	border-width: 2px;
	box-shadow: 0 20px 50px rgba(37, 99, 235, .12);
}

.bp-pakiet__plakietka {
	position: absolute;
	top: -1.4rem;
	left: 3.2rem;
	padding: .5rem 1.5rem;
	border-radius: 5rem;
	background: var(--bp-akcent);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bp-pakiet__nazwa { margin: 0 0 1.6rem; font-size: 2rem; }

.bp-pakiet__cena {
	margin: 0 0 2.4rem;
	font-size: 3.6rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--bp-czern);
}

.bp-pakiet__dopisek {
	display: block;
	margin-top: .6rem;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--bp-tekst-2);
}

.bp-pakiet__lista {
	flex: 1;
	margin: 0 0 2.4rem;
	padding: 2.4rem 0 0;
	border-top: 1px solid var(--bp-ramka-lekka);
	list-style: none;
}

.bp-pakiet__lista li {
	position: relative;
	padding: 0 0 1.2rem 2.8rem;
	font-size: 1.6rem;
	line-height: 2.4rem;
	color: var(--bp-tekst-2);
}

/* Ptaszek rysowany dwiema kreskami - bez pliku i bez zestawu ikon. */
.bp-pakiet__lista li::before {
	content: "";
	position: absolute;
	left: .4rem;
	top: .7rem;
	width: .6rem;
	height: 1.1rem;
	border-right: 2px solid var(--bp-akcent);
	border-bottom: 2px solid var(--bp-akcent);
	transform: rotate(45deg);
}

.bp-pakiet__przycisk { width: 100%; }

/* =====================================================================
   NADTYTUŁ - wspólny dla sekcji odwzorowanych ze wzorców

   Krótki napis nad nagłówkiem, wersalikami, w kolorze akcentu.
   Na wzorcach bywa poprzedzony podwójnym ukośnikiem („// USŁUGI”) -
   to część treści, nie kodu, więc wpisuje się go w polu.
   ===================================================================== */

.bp-nadtytul {
	margin: 0 0 1.2rem;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bp-akcent);
}

.bp-sekcja--ciemna .bp-nadtytul { color: rgba(255,255,255,.6); }

/* =====================================================================
   PASEK FAKTÓW
   ===================================================================== */

.bp-fakty__pas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem 5rem;
}

.bp-fakt {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	font-size: 1.6rem;
	line-height: 2.4rem;
	font-weight: 500;
}

.bp-fakt__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(37, 99, 235, .12);
	color: var(--bp-akcent);
}

.bp-sekcja--ciemna .bp-fakt__ikona {
	background: rgba(255,255,255,.1);
	color: #fff;
}

/* =====================================================================
   WIADOMOŚĆ OD OSOBY
   ===================================================================== */

.bp-wiadomosc__srodek {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 60em) {
	.bp-wiadomosc__srodek { grid-template-columns: 2fr 3fr; gap: 6.4rem; }
}

.bp-wiadomosc__zdjecie {
	margin: 0;
	overflow: hidden;
	border-radius: 1.6rem;
}

.bp-wiadomosc__zdjecie img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	/* Do góry kadru - wyśrodkowanie ucina czubki głów przy zdjęciach
	   robionych z różnej odległości. */
	object-position: center top;
}

.bp-wiadomosc__nadtytul {
	margin: 0 0 1.6rem;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bp-akcent);
}

.bp-wiadomosc__tresc {
	font-size: 1.8rem;
	line-height: 3rem;
	color: var(--bp-tekst);
}

.bp-wiadomosc__tresc p { margin: 0 0 1.6rem; }
.bp-wiadomosc__tresc p:last-child { margin-bottom: 0; }

.bp-wiadomosc__podpis {
	margin-top: 3.2rem;
	padding-top: 2.4rem;
	border-top: 1px solid var(--bp-ramka);
}

.bp-wiadomosc__odreczny { height: 5rem; width: auto; margin-bottom: 1rem; }
.bp-wiadomosc__imie { margin: 0; font-size: 1.7rem; font-weight: 700; color: var(--bp-czern); }
.bp-wiadomosc__funkcja { margin: .4rem 0 0; font-size: 1.5rem; color: var(--bp-tekst-2); }

/* =====================================================================
   ZESPÓŁ
   ===================================================================== */

.bp-zespol__naglowek { max-width: 60rem; margin-bottom: 4.8rem; }
.bp-zespol__wstep { margin-top: 1.6rem; color: var(--bp-tekst-2); }

.bp-zespol__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	gap: 3.2rem 2.4rem;
}

.bp-osoba__zdjecie {
	margin: 0 0 2rem;
	overflow: hidden;
	border-radius: 1.6rem;
	background: var(--bp-tlo-jasne);
}

.bp-osoba__zdjecie img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
}

.bp-osoba__imie { margin: 0; font-size: 1.9rem; }
.bp-osoba__funkcja { margin: .6rem 0 0; font-size: 1.5rem; color: var(--bp-tekst-2); }

.bp-osoba__kontakt {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 1.2rem 0 0;
	font-size: 1.4rem;
}

/* =====================================================================
   USŁUGI
   ===================================================================== */

.bp-uslugi__naglowek { max-width: 62rem; margin-bottom: 4.8rem; }
.bp-uslugi__wstep { margin-top: 1.6rem; color: var(--bp-tekst-2); }

.bp-uslugi__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	gap: 2.4rem;
}

.bp-usluga {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.6rem;
	background: var(--bp-biel);
}

.bp-usluga__zdjecie { margin: 0; }

.bp-usluga__zdjecie img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}

.bp-usluga--klikalna:hover img { transform: scale(1.04); }
.bp-usluga--klikalna:hover { border-color: var(--bp-akcent); }

.bp-usluga__tresc { padding: 2.8rem 3.2rem 3.2rem; }
.bp-usluga__tytul { margin: 0; font-size: 2rem; }
.bp-usluga__tytul a { color: inherit; }

/* Cały kafel klikalny - obszar rozciąga odnośnik z nagłówka. */
.bp-usluga--klikalna .bp-usluga__tytul a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.bp-usluga__opis { margin: 1.2rem 0 0; color: var(--bp-tekst-2); }

/* =====================================================================
   KARTY OFERTOWE
   ===================================================================== */

.bp-karty__naglowek { max-width: 60rem; margin: 0 auto 4.8rem; text-align: center; }
.bp-karty__wstep { margin-top: 1.6rem; color: var(--bp-tekst-2); }

.bp-karty__siatka {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem;
}

@media (min-width: 60em) {
	.bp-karty__siatka { grid-template-columns: repeat(2, 1fr); }
}

.bp-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 4rem;
	border: 1px solid var(--bp-ramka);
	border-radius: 2rem;
	background: var(--bp-biel);
}

.bp-karta--ciemna {
	background: var(--bp-czern);
	border-color: var(--bp-czern);
	color: rgba(255,255,255,.8);
}

.bp-karta__numer {
	position: absolute;
	top: 1.6rem;
	right: 2.4rem;
	font-size: 7rem;
	line-height: 1;
	font-weight: 700;
	color: var(--bp-czern);
	opacity: .06;
}

.bp-karta--ciemna .bp-karta__numer { color: #fff; opacity: .12; }

.bp-karta__nadtytul {
	margin: 0 0 1.2rem;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bp-akcent);
}

.bp-karta__tytul { margin: 0 0 1.6rem; font-size: 2.6rem; line-height: 1.25; }
.bp-karta--ciemna .bp-karta__tytul { color: #fff; }

.bp-karta__opis { margin: 0 0 2.4rem; color: var(--bp-tekst-2); }
.bp-karta--ciemna .bp-karta__opis { color: rgba(255,255,255,.7); }

.bp-karta__punkty {
	flex: 1;
	margin: 0 0 3.2rem;
	padding: 2.4rem 0 0;
	border-top: 1px solid var(--bp-ramka-lekka);
	list-style: none;
}

.bp-karta--ciemna .bp-karta__punkty { border-top-color: rgba(255,255,255,.15); }

.bp-karta__punkty li {
	position: relative;
	padding: 0 0 1.2rem 2.8rem;
	font-size: 1.6rem;
	line-height: 2.4rem;
}

.bp-karta__punkty li::before {
	content: "";
	position: absolute;
	left: .4rem;
	top: .7rem;
	width: .6rem;
	height: 1.1rem;
	border-right: 2px solid var(--bp-akcent);
	border-bottom: 2px solid var(--bp-akcent);
	transform: rotate(45deg);
}

.bp-karta__przycisk { width: 100%; }

/* =====================================================================
   ARGUMENTY
   ===================================================================== */

.bp-argumenty__naglowek { margin-bottom: 4rem; text-align: center; }

.bp-argumenty__lista { margin: 0; padding: 0; list-style: none; }

.bp-argument {
	display: flex;
	gap: 2rem;
	padding: 2.4rem 0;
	border-bottom: 1px solid var(--bp-ramka-lekka);
}

.bp-sekcja--ciemna .bp-argument { border-bottom-color: rgba(255,255,255,.12); }

.bp-argument:first-child { border-top: 1px solid var(--bp-ramka-lekka); }
.bp-sekcja--ciemna .bp-argument:first-child { border-top-color: rgba(255,255,255,.12); }

.bp-argument__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: rgba(37, 99, 235, .12);
	color: var(--bp-akcent);
}

.bp-sekcja--ciemna .bp-argument__ikona {
	background: rgba(255,255,255,.1);
	color: #fff;
}

.bp-argument__tytul { margin: 0; font-size: 1.9rem; }
.bp-argument__opis { margin: .8rem 0 0; color: var(--bp-tekst-2); }
.bp-sekcja--ciemna .bp-argument__opis { color: rgba(255,255,255,.7); }

/* =====================================================================
   HARMONOGRAM
   ===================================================================== */

.bp-harmonogram__naglowek { max-width: 62rem; margin-bottom: 4.8rem; }
.bp-harmonogram__wstep { margin-top: 1.6rem; color: var(--bp-tekst-2); }

.bp-etap {
	margin-bottom: 1.6rem;
	border: 1px solid var(--bp-ramka);
	border-radius: 1.6rem;
	overflow: hidden;
	background: var(--bp-biel);
}

.bp-etap[open] { border-color: var(--bp-akcent); }

.bp-etap__naglowek {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 2.4rem 3.2rem;
	cursor: pointer;
	list-style: none;
}

.bp-etap__naglowek::-webkit-details-marker { display: none; }

.bp-etap__numer {
	flex: 0 0 auto;
	padding: .5rem 1.4rem;
	border-radius: 5rem;
	background: var(--bp-tlo-jasne);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bp-akcent);
}

.bp-etap[open] .bp-etap__numer { background: var(--bp-akcent); color: #fff; }

.bp-etap__tytul { flex: 1; font-size: 1.9rem; font-weight: 600; color: var(--bp-czern); }

.bp-etap__znak {
	position: relative;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
}

.bp-etap__znak::before,
.bp-etap__znak::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--bp-akcent);
	transform: translateY(-50%);
	transition: transform .18s ease, opacity .18s ease;
}

.bp-etap__znak::after { transform: translateY(-50%) rotate(90deg); }
.bp-etap[open] .bp-etap__znak::after { transform: translateY(-50%); opacity: 0; }

.bp-etap__tresc { padding: 0 3.2rem 3.2rem; }
.bp-etap__opis { margin: 0 0 1.6rem; color: var(--bp-tekst-2); }

.bp-etap__punkty { margin: 0; padding: 0; list-style: none; }

.bp-etap__punkty li {
	position: relative;
	padding: 0 0 1rem 2.8rem;
	color: var(--bp-tekst-2);
}

.bp-etap__punkty li::before {
	content: "";
	position: absolute;
	left: .4rem;
	top: .7rem;
	width: .6rem;
	height: 1.1rem;
	border-right: 2px solid var(--bp-akcent);
	border-bottom: 2px solid var(--bp-akcent);
	transform: rotate(45deg);
}

/* =====================================================================
   WIDEO
   ===================================================================== */

.bp-wideo__naglowek { text-align: center; }
.bp-wideo__wstep { margin: 1.6rem auto 0; text-align: center; color: var(--bp-tekst-2); max-width: 56rem; }
.bp-sekcja--ciemna .bp-wideo__wstep { color: rgba(255,255,255,.7); }

.bp-wideo__ramka {
	position: relative;
	margin-top: 4rem;
	overflow: hidden;
	border-radius: 1.6rem;
	background: #000;
}

.bp-wideo__okladka {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bp-wideo__okladka--pusta { cursor: default; }

.bp-wideo__okladka img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .35s ease, opacity .2s ease;
}

.bp-wideo__okladka:hover img { transform: scale(1.03); opacity: .9; }

.bp-wideo__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	background: var(--bp-akcent);
	color: #fff;
	box-shadow: 0 10px 40px rgba(0,0,0,.4);
	/* Ikona ma być odsunięta w prawo - trójkąt wygląda na przesunięty
	   w lewo, gdy jest wyśrodkowany geometrycznie. */
	padding-left: .4rem;
}

.bp-wideo__ramka iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* =====================================================================
   ZASTĘPNIK SEKCJI STARTOWEJ

   Stoi na stronie głównej wzorca, dopóki nikt nie wpisze tam treści.
   Pusta strona wygląda jak usterka; szare pole z napisem mówi wprost,
   że to miejsce czeka na sekcję z projektu.

   Wysokość w `svh`, nie `vh`: na telefonie `100vh` to wysokość okna
   z UKRYTYMI paskami przeglądarki, czyli więcej niż widać naprawdę.
   ===================================================================== */

.bp-zastepnik-startowy {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60svh;
	/* Boczny oddech daje `.bp-tresc` w środku (zasada M9) - własny
	   margines boczny przesuwał napis względem logo. */
	padding-block: 8rem;
	background: #e9ecef;
	text-align: center;
}

@supports not (height: 100svh) {
	.bp-zastepnik-startowy { min-height: 60vh; }
}

.bp-zastepnik-startowy__napis {
	margin: 0;
	color: #000;
	font-size: max(2.8rem, 24px);
	font-weight: 600;
	line-height: 1.3;
}

/* =====================================================================
   LISTA WPISÓW - SIATKA KAFLI

   Trzy w rzędzie na komputerze, dwa na tablecie, jeden na telefonie.
   `auto-fill` z `minmax` zamiast sztywnych trzech kolumn: przy dwóch
   wpisach rząd nie rozciąga kafli na pół ekranu każdy.
   ===================================================================== */

.bp-wpisy__tytul {
	margin: 0 0 4rem;
}

/* Wstęp pod nagłówkiem listy: odbiera nagłówkowi dolny odstęp, żeby
   stać tuż pod nim, i oddaje go liście. Te same miary co wstęp opinii. */
.bp-wpisy__tytul + .bp-wpisy__wstep {
	margin: -2.4rem 0 4rem;
}

.bp-wpisy__wstep {
	max-width: 72rem;
	font-size: max(1.8rem, 17px);
	line-height: 1.6;
	color: var(--bp-tekst-2);
}

.bp-wpisy {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3.2rem;
}

@media (max-width: 61.99em) {
	.bp-wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
}

@media (max-width: 39.99em) {
	.bp-wpisy { grid-template-columns: 1fr; }
}

.bp-wpis-kafel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.6rem;
	background: var(--bp-biel);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.bp-wpis-kafel:hover {
	border-color: var(--bp-akcent);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(2, 6, 23, .08);
}

@media (prefers-reduced-motion: reduce) {
	.bp-wpis-kafel { transition: none; }
	.bp-wpis-kafel:hover { transform: none; }
}

/* Kadr o stałej proporcji - inaczej zdjęcia o różnych wymiarach
   rozjeżdżają wysokość rzędu i kafle przestają być równe. */
.bp-wpis-kafel__zdjecie {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--bp-tlo-jasne);
}

.bp-wpis-kafel__zdjecie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bp-wpis-kafel__zastepnik {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--bp-tlo-jasne);
}

.bp-wpis-kafel__tresc {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 2.4rem;
}

.bp-wpis-kafel__data {
	margin: 0 0 1rem;
	font-size: max(1.4rem, 14px);
	color: var(--bp-tekst-2);
}

.bp-wpis-kafel__tytul {
	margin: 0 0 1.2rem;
	font-size: max(2rem, 19px);
	line-height: 1.35;
}

.bp-wpis-kafel__tytul a {
	color: inherit;
	text-decoration: none;
}

.bp-wpis-kafel__tytul a:hover,
.bp-wpis-kafel__tytul a:focus-visible {
	color: var(--bp-akcent);
}

.bp-wpis-kafel__zajawka {
	margin: 0 0 2rem;
	font-size: max(1.6rem, 16px);
	line-height: 1.6;
	color: var(--bp-tekst-2);
}

/* Napis dosunięty do dołu kafla - żeby stał równo we wszystkich,
   niezależnie od długości zajawki. */
.bp-wpis-kafel__wiecej {
	margin-top: auto;
	font-weight: 600;
	color: var(--bp-akcent);
}

/* =====================================================================
   POJEDYNCZY WPIS
   ===================================================================== */

.bp-wpis__naglowek { margin-bottom: 3.2rem; }
.bp-wpis__naglowek h1 { margin: 0 0 1rem; }

.bp-wpis__data {
	margin: 0;
	font-size: max(1.5rem, 15px);
	color: var(--bp-tekst-2);
}

.bp-wpis__zdjecie {
	margin: 0 0 3.2rem;
	border-radius: 1.6rem;
	overflow: hidden;
}

.bp-wpis__zdjecie img {
	display: block;
	width: 100%;
	height: auto;
}

.bp-wpis__tresc > *:first-child { margin-top: 0; }
.bp-wpis__tresc > *:last-child { margin-bottom: 0; }

/* =====================================================================
   OPINIE Z WIDGETU ZEWNĘTRZNEGO

   Widget rysuje własny układ i nie da się go o to prosić - stylujemy
   więc to, co da się ostylować z zewnątrz: szerokość, wyśrodkowanie
   i oddech wokół. Reguły celują w klasy widgetu, więc gdyby kiedyś
   zniknął, nie ruszają niczego innego.
   ===================================================================== */

.ti-widget {
	margin-inline: auto;
}

/* Plakietka z oceną stała przy lewej krawędzi, a nagłówek nad nią był
   wyśrodkowany - dwa różne wyrównania jedno pod drugim czytają się jak
   usterka składu. */
.ti-widget .ti-profile-details,
.ti-widget .ti-header {
	margin-inline: auto;
}

.ti-widget .ti-review-item {
	box-sizing: border-box;
}

/* Karuzela na całą szerokość kolumny treści pokazywała jedną opinię
   z ogromnymi marginesami po bokach. Ograniczenie szerokości sprawia,
   że karta ma proporcje karty, a nie pasa przez ekran. */
@media (min-width: 62em) {
	.ti-widget .ti-reviews-container-wrapper {
		max-width: 108rem;
		margin-inline: auto;
	}
}

/* =====================================================================
   STRONA OPINIE

   Nagłówek i wstęp wyśrodkowane, widget w węższym pojemniku. Widget
   wypełnia to, co dostanie - więc o proporcjach karty decyduje szerokość
   pojemnika, a nie reguły narzucane cudzym klasom z zewnątrz.
   ===================================================================== */

.bp-opinie__naglowek {
	max-width: 72rem;
	margin: 0 auto 4.8rem;
	text-align: center;
}

.bp-opinie__tytul { margin: 0; }

.bp-opinie__wstep {
	margin: 1.6rem 0 0;
	font-size: max(1.8rem, 17px);
	line-height: 1.6;
	color: var(--bp-tekst-2);
}

.bp-opinie__widget {
	max-width: 96rem;
	margin-inline: auto;
}

/* Plakietka z oceną nad opiniami - wyśrodkowana razem z nagłówkiem.
   Stała przy lewej krawędzi, bo widget ustawia ją do lewej, a nagłówek
   nad nią był wyśrodkowany: dwa różne wyrównania jedno pod drugim
   czytają się jak usterka składu. */
.bp-opinie__widget .ti-widget,
.bp-opinie__widget .ti-header,
.bp-opinie__widget .ti-profile-details,
.bp-opinie__widget .ti-footer {
	margin-inline: auto !important;
	float: none !important;
}

.bp-opinie__widget .ti-widget { max-width: 100%; }

/* =====================================================================
   STRONA PODZIĘKOWANIA

   Ekran po wysłaniu formularza. Szablon:
   `templates/strona-podziekowanie.php`, pola i reszta kodu:
   `includes/podziekowanie.php`.

   TO JEST PEŁNA SEKCJA, NIE KARTA NA ŚRODKU BIAŁEJ STRONY.

   Poprzednia wersja była blokiem HTML wklejonym w treść i wyświetlał ją
   szablon zwykłej podstrony - a ten owija treść w pojemnik o ograniczonej
   szerokości. Tło kończyło się więc razem z pojemnikiem, a wokół zostawał
   biały pas. Dlatego tło siedzi tutaj, na `.bp-podziekowanie`, czyli na
   elemencie, który idzie od krawędzi do krawędzi.
   ===================================================================== */

.bp-podziekowanie {
	display: flex;
	align-items: center;

	/* Sekcja ma wypełnić ekran, bo jest na stronie jedyna. `svh` liczy
	   wysokość widocznego okna BEZ pasków przeglądarki telefonu - `vh`
	   ich nie odejmuje i sekcja wystaje poniżej ekranu. Pierwszy wiersz
	   jest dla przeglądarek, które `svh` nie znają. */
	min-height: 62vh;
	min-height: 62svh;

	/* Pierwsze tło jest jednolite i służy przeglądarkom bez `color-mix`.
	   Drugie je nadpisuje wszędzie tam, gdzie `color-mix` działa. */
	background: var(--bp-tlo-jasne);
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--bp-akcent) 3%, var(--bp-biel)) 0%,
		color-mix(in srgb, var(--bp-akcent) 8%, var(--bp-biel)) 45%,
		color-mix(in srgb, var(--bp-akcent) 16%, var(--bp-biel)) 100%
	);
}

/* GRADIENT WYCHODZI Z KOLORU MARKI, A NIE Z WPISANYCH ODCIENI SZAROŚCI.

   Wcześniej trzy odcienie chłodnej szarości stały w treści strony na sztywno.
   Pasowały do jednej witryny - tej, na której powstały. Na witrynie
   o ciepłej albo zielonej palecie ten sam ekran odcinał się od reszty strony.

   `color-mix` rozcieńcza kolor marki bielą, więc tło ZAWSZE wychodzi jasne,
   niezależnie od tego, jak ciemna jest sama barwa. Dzięki temu teksty mogą
   zostać ciemne na każdej witrynie i nie trzeba pilnować kontrastu
   osobno przy każdym rebrandingu. */

/* Pojemnik jest szerszy niż same akapity, żeby nagłówek zmieścił się
   w jednym wierszu. Akapity zwężamy niżej osobno: o czytelności tekstu
   decyduje długość wiersza, a nagłówka to nie dotyczy. */
.bp-podziekowanie__srodek {
	text-align: center;
}

/* JEDEN KOLOR NA WSZYSTKIE TEKSTY.

   Nagłówek, zdanie i dopisek miały wcześniej trzy różne odcienie szarości,
   coraz jaśniejsze. Na ekranie, który ma jedno zdanie do powiedzenia,
   stopniowanie ważności nie ma czego stopniować - a najsłabszy odcień
   siadał na jasnym tle. Różnicę niesie rozmiar, nie kolor. */
.bp-podziekowanie__naglowek,
.bp-podziekowanie__zdanie,
.bp-podziekowanie__dopisek,
.bp-podziekowanie__tresc {
	color: var(--bp-tekst);
}

.bp-podziekowanie__znak {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6.4rem;
	height: 6.4rem;
	margin: 0 auto 2.6rem;
	border-radius: 50%;
	background: var(--bp-biel);
	color: var(--bp-akcent-tekst, var(--bp-akcent));
}

.bp-podziekowanie__znak svg {
	width: 3rem;
	height: 3rem;
}

.bp-podziekowanie__naglowek { margin: 0 0 1.4rem; }

.bp-podziekowanie__zdanie,
.bp-podziekowanie__dopisek {
	max-width: 56rem;
	margin-inline: auto;
}

.bp-podziekowanie__zdanie { margin-block: 0; }

.bp-podziekowanie__dopisek {
	margin-block: 1rem 0;
	font-size: max(1.5rem, 15px);
	line-height: 1.6;
}

.bp-podziekowanie__tresc { margin: 1.6rem 0 0; }

.bp-podziekowanie__powrot { margin-top: 3.2rem; }


/* =====================================================================
   404 I WYNIKI WYSZUKIWANIA - SZEROKOŚĆ STRONY, RYTM DOKUMENTU (M19)

   Obie podstrony biorą z `.bp-tresc--waska` rytm nagłówków i akapitów,
   ale NIE jej wąską, wyśrodkowaną kolumnę: to nie są dokumenty pisane
   ciągiem (M10), więc treść zaczyna się na krawędzi logo, jak na każdej
   innej podstronie (M9, M19).
   ===================================================================== */

.bp-404.bp-tresc--waska,
.bp-wyszukiwanie.bp-tresc--waska {
	max-width: var(--bp-tresc);
}

/* --- formularz wyszukiwania WordPressa --------------------------------
   `get_search_form()` wypisuje surowy formularz bez stylu: kanciasty
   przycisk w wyglądzie przeglądarki. Pole dostaje wygląd pola formularza
   motywu, przycisk - wygląd przycisku motywu (M4, M5). */

.search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
	max-width: 60rem;
	margin-top: 2.4rem;
}

.search-form label { flex: 1 1 24rem; margin: 0; }

.search-form .search-field {
	width: 100%;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--bp-ramka);
	border-radius: var(--bp-pole-promien, var(--bp-btn-promien));
	background: var(--bp-biel);
	color: var(--bp-tekst);
	font: inherit;
	font-size: 1.7rem;
	line-height: 2.4rem;
}

.search-form .search-field:focus { outline: none; border-color: var(--bp-akcent); }

.search-form .search-submit {
	padding: var(--bp-btn-wysciolka);
	border: 1px solid transparent;
	border-radius: var(--bp-btn-promien);
	background: var(--bp-btn-tlo);
	background-image: var(--bp-btn-gradient);
	color: var(--bp-btn-napis);
	font-family: var(--bp-btn-pismo);
	font-size: var(--bp-btn-rozmiar, 1.7rem);
	font-weight: var(--bp-btn-grubosc, 600);
	text-transform: var(--bp-btn-litery, none);
	letter-spacing: var(--bp-btn-odstep-liter, normal);
	line-height: 1.15;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
	background: var(--bp-btn-tlo-hover);
	color: var(--bp-btn-napis-hover);
}

/* Ten sam rozmiar co `.bp-btn` na szerokim ekranie. */
@media (min-width: 60em) {
	.search-form .search-submit { font-size: var(--bp-btn-rozmiar, 1.6rem); }
}