/*
 * Podstrona „Terapia par”.
 *
 * Jednostką jest piksel, nie rem: witryna stoi na motywie, który ustawia
 * własną podstawę rozmiaru pisma, a układ ma odpowiadać makiecie co do
 * piksela przy 1440. Wartości poniżej pochodzą wprost z makiety.
 *
 * Wszystko jest zamknięte w `.bptp` — arkusz nie ma prawa dotknąć
 * nagłówka, stopki ani żadnej innej podstrony.
 */

.bptp {
	--bptp-granat: #0b2244;

	/*
	 * Odcień przycisków i odnośników bierzemy z zestawu stylów witryny
	 * (`.elementor-kit-6`), a nie z makiety — podstrona ma wyglądać jak
	 * reszta serwisu, nie jak osobna wyspa.
	 */
	--bptp-akcent: #2e85ff;
	--bptp-jasne: #f4f8fc;
	--bptp-wyroznione: #eaf2fb;

	/*
	 * Obwódka pudełek - kolor akcentu, nie szarość.
	 *
	 * Klient wskazał ramki z pozostałych podstron jako wzór („Kiedy jest
	 * potrzebne orzeczenie", „Do kogo umówisz wizytę"). Elementor rysuje je
	 * jako `1px solid #2e85ff` z zaokrągleniem 10 px na przezroczystym tle.
	 * Powtarzamy to co do wartości - stąd zmienna promienia, żeby nie było
	 * na stronie dwóch różnych zaokrągleń.
	 */
	--bptp-obwodka: #2e85ff;
	--bptp-obwodka-mocna: #2e85ff;
	--bptp-promien: 10px;

	/* Zdjęcia zostają w szarości: niebieska ramka wokół fotografii robi się
	   krzykliwa i przestaje być tłem dla treści. */
	--bptp-obwodka-zdjecia: #e3ecf6;

	--bptp-tekst: #4a5568;
	--bptp-kreska-cytatu: #cfe1f5;
	--bptp-zielony: #00b39b;

	font-family: 'Poppins', Helvetica, Arial, sans-serif;
	color: var(--bptp-tekst);
	-webkit-font-smoothing: antialiased;
}

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

/* Sekcje i szerokość treści ---------------------------------------- */

.bptp-sekcja {
	padding: 78px 20px;

	/*
	 * Pasy tła mają sięgać krawędzi okna, a treść strony siedzi w pojemniku
	 * motywu o szerokości 1140 px. Sekcja wychodzi więc poza niego ujemnym
	 * marginesem.
	 *
	 * Szerokość bierzemy ze zmiennej, nie z `100vw`: `100vw` liczy się razem
	 * z paskiem przewijania, więc sekcja wystawałaby o jego szerokość
	 * i strona dostałaby poziomy pasek. Zmienną ustawia skrypt; bez skryptu
	 * działa zapasowe `100vw`.
	 */
	margin-left: calc(50% - var(--bptp-szerokosc, 100vw) / 2);
	margin-right: calc(50% - var(--bptp-szerokosc, 100vw) / 2);
}

.bptp-sekcja--biala {
	background: #ffffff;
}

.bptp-sekcja--jasna {
	background: var(--bptp-jasne);
}

.bptp-sekcja--ciemna {
	background: var(--bptp-granat);
}

.bptp-sekcja--bez-gory {
	padding-top: 0;
}


.bptp-hero {
	padding: 64px 20px 72px;
}

.bptp-srodek {
	max-width: 1140px;
	margin: 0 auto;
}

/* Typografia -------------------------------------------------------- */

.bptp-h1 {
	margin: 0 0 20px;
	font-size: 38px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--bptp-granat);
	text-wrap: pretty;
}

.bptp-h2 {
	margin: 0 0 14px;
	font-size: 30px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--bptp-granat);
	text-wrap: pretty;
}

.bptp-h2--odstep {
	margin-bottom: 34px;
}

.bptp-h2--mniejszy {
	margin-bottom: 10px;
	font-size: 24px;
	line-height: 1.3;
}

.bptp-h2--karta {
	margin-bottom: 16px;
	font-size: 23px;
	line-height: 1.3;
}

.bptp-h2--bialy {
	margin-bottom: 16px;
	color: #ffffff;
}

.bptp-h3 {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	color: var(--bptp-granat);
}

.bptp-h3--mniejszy {
	font-size: 16px;
}

/*
 * Wielkość pisma treści: 16 px, nie 15.
 *
 * Standard Brand Perspective nie pozwala schodzić poniżej 16 px w treści
 * sekcji, kafli i opisów - poniżej zostają wyłącznie podpisy. Podstrona
 * powstała z pismem 15/14 px i było to odstępstwo od standardu, poprawione
 * 2026-08-24 przy okazji przebudowy sekcji na listy.
 */
.bptp p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.7;
}

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

.bptp-lead {
	margin: 0 0 20px;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 600;
	color: var(--bptp-granat);
	text-wrap: pretty;
}

.bptp-mocny {
	font-weight: 600;
	color: var(--bptp-granat);
}

.bptp-maly {
	font-size: 16px;
	line-height: 1.65;
}

.bptp-maly--ciemny {
	color: var(--bptp-granat);
}

.bptp-wstep {
	max-width: 840px;
	margin-bottom: 32px;
}

/* Akapit zamykający sekcję. Odsunięty od siatki kafli, żeby nie wyglądał
   na przyklejony do ostatniego wiersza. */
.bptp-podsumowanie {
	max-width: 860px;
	margin-top: 46px;
}

.bptp-wstep--srodek {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Przyciski --------------------------------------------------------- */

/*
 * Wymiary przepisane z przycisku Elementora na pozostałych podstronach
 * (`.elementor-button.elementor-size-sm`): zaokrąglenie 10 px, wypełnienie
 * 15/20, pismo 15 px wagi 500, obwódka 0,8 px w kolorze tła. Dzięki obwódce
 * przycisk pełny i przycisk poboczny mają dokładnie tę samą wysokość.
 */
.bptp-btn {
	display: inline-block;
	margin-top: 14px;
	padding: 15px 20px;
	border: 0.8px solid transparent;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.bptp-btn--glowny {
	border-color: var(--bptp-akcent);
	background: var(--bptp-akcent);
	color: #ffffff;
}

.bptp-btn--glowny:hover,
.bptp-btn--glowny:focus {
	border-color: var(--bptp-granat);
	background: var(--bptp-granat);
	color: #ffffff;
}

.bptp-btn--poboczny {
	border-color: var(--bptp-akcent);
	background: #ffffff;
	color: var(--bptp-akcent);
}

.bptp-btn--poboczny:hover,
.bptp-btn--poboczny:focus {
	background: var(--bptp-jasne);
	color: var(--bptp-akcent);
}

.bptp-btn--pelny {
	display: block;
	width: 100%;
}

/*
 * Przycisk powtarzany pod sekcjami. Trochę większy od tego w sekcji
 * startowej, bo stoi sam na środku i nie ma sąsiada, który wyznaczałby skalę.
 */
.bptp-btn--duzy {
	padding: 17px 34px;
	font-size: 16px;
}

/*
 * Przycisk „Umów wizytę” pod sekcją.
 *
 * Wyśrodkowany, z wyraźnym odstępem od treści: ma być domknięciem sekcji,
 * a nie kolejnym akapitem.
 */
.bptp-cta {
	margin-top: 34px;
	text-align: center;
}

.bptp-cta .bptp-btn {
	margin-top: 0;
}

/*
 * Para przycisków obok siebie.
 *
 * Odstęp od tekstu daje pojemnik, nie same przyciski — inaczej przy zawinięciu
 * na wąskim ekranie drugi przycisk dokładałby swój `margin-top` do przerwy
 * siatki i odstępy między nimi wyszłyby różne.
 */
.bptp-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.bptp-przyciski .bptp-btn {
	margin-top: 0;
}

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

/* Ikony ------------------------------------------------------------- */

.bptp-ikona {
	display: inline-flex;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--bptp-wyroznione);
	color: var(--bptp-akcent);
}

.bptp-ikona svg {
	width: 19px;
	height: 19px;
}

.bptp-ikona--srednia {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 10px;
}

.bptp-ikona--srednia svg {
	width: 21px;
	height: 21px;
}

.bptp-ikona--duza {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #ffffff;
}

.bptp-ikona--duza svg {
	width: 26px;
	height: 26px;
}

.bptp-ikona--mala {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 0;
	background: none;
}

.bptp-ikona--mala svg {
	width: 16px;
	height: 16px;
}

.bptp-ikona--naga {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 0;
	background: none;
	color: #8fc2f7;
}

.bptp-ikona--naga svg {
	width: 17px;
	height: 17px;
}

.bptp-ikona--mala.bptp-ikona--gwiazda {
	color: #f2b100;
}

.bptp-ikona--naga.bptp-ikona--gwiazda {
	color: #ffd66b;
}

.bptp-gwiazdki {
	display: inline-flex;
	gap: 2px;
	color: var(--bptp-zielony);
}

.bptp-gwiazdki svg {
	width: 13px;
	height: 13px;
}

/* Siatki ------------------------------------------------------------ */

/*
 * Kafle w jednym wierszu mają być równe.
 *
 * `align-items: start` przycinał każdy kafel do jego własnej treści, więc
 * dwa zdania dawały kafel niższy od trzech i wiersz się rwał. Rozciągnięcie
 * elementu siatki nic nie da samo z siebie — kafel musi jeszcze dostać
 * `height: 100%`, bo jego wysokość liczy się od zawartości, nie od komórki.
 */
.bptp-siatka {
	display: grid;
	gap: 20px;
	align-items: stretch;
}

.bptp-siatka > .bptp-kafel {
	height: 100%;
}

.bptp-siatka--2 {
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.bptp-siatka--3 {
	grid-template-columns: repeat(3, 1fr);
}

.bptp-dwie {
	display: grid;
	gap: 52px;
	align-items: start;
}

.bptp-dwie--srodkowana {
	align-items: center;
}

.bptp-dwie--zdjecie-lewo {
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
}

.bptp-dwie--tekst-lewo {
	grid-template-columns: 1.15fr 0.85fr;
}

/*
 * Sekcja startowa: tekst i kolumna na widget.
 *
 * Prawa kolumna ma 550 px, bo tyle zajmuje widget ZnanyLekarz
 * (`big_with_calendar`) na pozostałych podstronach. Węższa kolumna
 * ścisnęłaby kalendarz i pokazałaby mniej terminów niż gdzie indziej.
 * `minmax(0, …)` po obu stronach — bez tego kolumna siatki nie schodzi
 * poniżej szerokości swojej zawartości i długi wyraz rozpycha układ.
 */
.bptp-hero__siatka {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 550px);
	gap: 48px;
	align-items: start;
}

.bptp-hero__widget {
	max-width: 100%;
}

/* Widget wstawia własną ramkę — nie może wystawać poza kolumnę. */
.bptp-hero__widget iframe,
.bptp-hero__widget > div {
	max-width: 100%;
}

/* Kafle ------------------------------------------------------------- */

.bptp-kafel {
	padding: 28px;
	border: 1px solid var(--bptp-obwodka);
	border-radius: var(--bptp-promien);
	background: #ffffff;
}

.bptp-kafel--duzy {
	padding: 32px 34px;
}

.bptp-kafel--szeroki {
	grid-column: span 2;
}

/* Ramki i wyróżnienia ----------------------------------------------- */

.bptp-ramka {
	border-radius: var(--bptp-promien);
}

.bptp-ramka--odstep {
	margin-top: 34px;
}

.bptp-ramka--jasna {
	margin-top: 26px;
	padding: 26px 28px;
	border: 1px solid var(--bptp-obwodka);
	background: var(--bptp-jasne);
}

/* Ramka wewnątrz kafla, który ma już własny kontur. Obwódka w obwódce
   czyta się jak usterka - zostaje samo tło. */
.bptp-ramka--bez-konturu {
	border-color: transparent;
}

/*
 * Ramka wokół kolumny z tekstem.
 *
 * Sekcje „tekst obok zdjęcia" były jedynymi na stronie bez pudełka i wybijały
 * się z rytmu reszty. Wypełnienie jak w ramkach z podstron usług.
 */
.bptp-ramka--tresc {
	padding: 30px 32px;
	border: 1px solid var(--bptp-obwodka);
	background: #ffffff;
}

.bptp-ramka--wyrozniona {
	margin-top: 22px;
	padding: 24px 26px;
	border: 1px solid var(--bptp-obwodka-mocna);
	background: var(--bptp-wyroznione);
}

.bptp-ramka--wyrozniona p {
	margin-bottom: 10px;
}

.bptp-ramka--wyrozniona p:last-child {
	margin-bottom: 0;
}

.bptp-blok-obawy {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 26px;
	align-items: start;
	padding: 38px 40px;
	border: 1px solid var(--bptp-obwodka-mocna);
	border-radius: var(--bptp-promien);
	background: var(--bptp-wyroznione);
}

.bptp-blok-obawy p {
	max-width: 880px;
}

.bptp-cytat-duzy {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.6;
	font-style: italic;
	color: var(--bptp-granat);
}

.bptp-odpowiedz {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 600;
	color: var(--bptp-akcent);
}

.bptp-cytaty {
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.bptp-cytaty li {
	padding: 2px 0 2px 16px;
	border-left: 3px solid var(--bptp-kreska-cytatu);
	font-size: 16px;
	line-height: 1.6;
	font-style: italic;
	color: var(--bptp-granat);
}

.bptp-cytaty--ciasne {
	gap: 9px;
	margin-bottom: 16px;
}

.bptp-cytaty--ciasne li {
	padding-left: 14px;
	font-size: 16px;
}

/* Listy wypunktowane ------------------------------------------------- */

/*
 * Jedna forma listy dla czterech sekcji: sygnałów, obszarów pracy,
 * przebiegu konsultacji i pytań przed spotkaniem.
 *
 * Zastąpiła kafle z ikonami i listy numerowane. Punktorem jest kropka
 * rysowana pseudoelementem, a nie `list-style` - znacznik listy nie da się
 * ustawić w pionie względem pierwszego wiersza tekstu, a przy dwóch
 * kolumnach różnica jest widoczna.
 *
 * Dwie kolumny robi `columns`, nie siatka: multikolumna wypełnia najpierw
 * lewą stronę do końca, a siatka układałaby punkty w poprzek wierszy,
 * czyli w kolejności, w której nikt listy nie czyta.
 */
.bptp-punkty {
	margin: 0;
	padding: 26px 30px;
	border: 1px solid var(--bptp-obwodka);
	border-radius: var(--bptp-promien);
	background: #ffffff;
	list-style: none;
}

.bptp-punkty--dwie {
	columns: 2;
	column-gap: 44px;
}

.bptp-punkty li {
	position: relative;
	padding: 9px 0 9px 24px;
	font-size: 16px;
	line-height: 1.65;
	break-inside: avoid;
}

.bptp-punkty li::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bptp-akcent);
}

.bptp-punkty__tytul {
	color: var(--bptp-granat);
}

/* Pasek z najważniejszymi informacjami ------------------------------- */

/*
 * Opinie, adres, forma, czas i cena w jednej ramce.
 *
 * Stoi dwa razy: w sekcji startowej nad przyciskiem (wariant pionowy)
 * i w sekcji końcowej (poziomy). Bez przycisku w środku - w obu miejscach
 * „Umów wizytę" stoi tuż pod spodem. `flex-wrap` zamiast sztywnych kolumn:
 * pozycje mają bardzo różną długość i podział na pięć równych części
 * zostawiałby dziurę po „300 zł”.
 */
.bptp-pasek {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 30px;
	align-items: center;
	justify-content: center;
	padding: 20px 26px;
	border: 1px solid var(--bptp-obwodka);
	border-radius: var(--bptp-promien);
	background: #ffffff;
}

/*
 * Wariant pionowy - w wąskiej kolumnie sekcji startowej, nad przyciskiem.
 * Pozycje jedna pod drugą: przy 550 px poziomy pasek łamałby się w trzech
 * miejscach i przestałby się czytać jako lista.
 */
.bptp-pasek--pionowy {
	margin-top: 22px;
	padding: 20px 24px;

	/* Do lewej, w jednej linii z akapitem nad ramką. Wyśrodkowana lista
	   odsuwa się od tekstu i wygląda na wklejoną z innego układu. */
	justify-content: flex-start;
}

.bptp-pasek--pionowy .bptp-pasek__lista {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
}

/* Wyśrodkowane, bo pięć pozycji nie mieści się w jednym wierszu i piąta
   zawija się do drugiego - dosunięta do lewej wyglądałaby na urwaną. */
.bptp-pasek__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bptp-pasek__lista li {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 16px;
	line-height: 1.4;
	color: var(--bptp-granat);
}

.bptp-pasek .bptp-btn {
	margin-top: 0;
	white-space: nowrap;
}

/* Sekcja końcowa ----------------------------------------------------- */

.bptp-koniec__tresc {
	max-width: 860px;
	text-align: center;
}

.bptp-koniec .bptp-pasek {
	justify-content: center;
}

.bptp-koniec .bptp-pasek__lista {
	justify-content: center;
}

/* Zdjęcia ----------------------------------------------------------- */

.bptp-ramka-zdjecia {
	overflow: hidden;
	border: 1px solid var(--bptp-obwodka-zdjecia);
	border-radius: var(--bptp-promien);
}

.bptp-ramka-zdjecia--bez-obwodki {
	border: 0;
}

.bptp-ramka-zdjecia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bptp-ramka-zdjecia--430 img {
	height: 430px;
}

.bptp-ramka-zdjecia--450 img {
	height: 450px;
}

.bptp-ramka-zdjecia--420 img {
	height: 420px;
}

.bptp-ramka-zdjecia--340 img {
	height: 340px;
}

.bptp-ramka-zdjecia--gora img {
	object-position: center top;
}

.bptp-ramka-zdjecia--pelna {
	height: 100%;
}

.bptp-ramka-zdjecia--pelna img {
	min-height: 300px;
}

.bptp-kolumna-zdjecia {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bptp-kolumna-zdjecia .bptp-btn {
	margin-top: 0;
}

/* Sekcja startowa: karta osoby -------------------------------------- */

.bptp-karta-osoby {
	padding: 20px 22px 20px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(11, 34, 68, .06);
}

.bptp-karta-osoby__gora {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding-bottom: 14px;
}

.bptp-karta-osoby__zdjecie {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
}

.bptp-karta-osoby__imie {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--bptp-granat);
}

.bptp-karta-osoby__specjalnosc {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #7a8798;
}

.bptp-karta-osoby__fakty {
	display: grid;
	gap: 12px;
	margin: 0 0 18px;
	padding: 16px 0 0;
	border-top: 1px solid #eef1f5;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.5;
}

.bptp-karta-osoby__fakty li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

/* Sekcja LGBTQ+ ------------------------------------------------------ */

/*
 * Zdjęcie w kadrze kwadratowym, kafle ciaśniej.
 *
 * Wcześniej wysokość wiersza brała się z czterech kafli, więc zdjęcie
 * rozciągało się w wąski pas na całą tę wysokość, a sekcja robiła się
 * nienaturalnie długa. Teraz kadr jest ustalony (`aspect-ratio`), a kafle
 * dostają mniejsze wypełnienie i mniejszy odstęp — sekcja skraca się
 * o jakieś sto pikseli i przestaje być pionowym pasem.
 *
 * Zapytania medialne niżej celują w `.bptp-ramka-zdjecia img`, czyli mają
 * tę samą wagę co reguła zwykła i stoją później. Dlatego tutaj sięgamy
 * po `.bptp-lgbt .bptp-ramka-zdjecia img` — o klasę wyżej, więc wygrywa
 * niezależnie od kolejności.
 */
.bptp-lgbt {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 26px;
	align-items: stretch;
}

.bptp-lgbt .bptp-ramka-zdjecia {
	align-self: center;
	height: auto;
	aspect-ratio: 1 / 1;
}

.bptp-lgbt .bptp-ramka-zdjecia img {
	height: 100%;
	min-height: 0;
	max-height: none;
}

/*
 * Punkty w jednym pudełku, rozdzielone włosem.
 *
 * Cztery osobne kafle z własnymi obwódkami robiły z listy siatkę i rozbijały
 * jeden ciąg myśli na cztery. Ikona stoi w rzędzie z tekstem, więc bierze
 * wariant podstawowy - `--srednia` ma własny odstęp od dołu, przewidziany
 * dla ikony nad nagłówkiem.
 */
.bptp-kafel--lista {
	padding: 8px 28px;
}

.bptp-lista-ikon {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bptp-lista-ikon li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 0;
}

.bptp-lista-ikon li + li {
	border-top: 1px solid var(--bptp-obwodka-zdjecia);
}

/* Przedrostek obowiązkowy: `.bptp p` ma wagę (0,1,1) i bije samą klasę. */
.bptp .bptp-lista-ikon p {
	margin: 0;
}

/* Opinie ------------------------------------------------------------- */

.bptp-naglowek-z-pigulka {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}

.bptp-naglowek-z-pigulka .bptp-h2 {
	margin: 0;
}

.bptp-pigulka {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 10px 20px;
	border: 1px solid var(--bptp-obwodka);
	border-radius: 40px;
	background: #ffffff;
	font-size: 13px;
	font-weight: 500;
	color: var(--bptp-granat);
}

/*
 * Kafle opinii: kolumna z podpisem dociśniętym do dna.
 *
 * Bez tego podpis wędrował tuż pod cytatem, więc krótka opinia zostawiała
 * pustkę pod spodem, a wiersz wyglądał na rozjechany — mimo że same kafle
 * są już równej wysokości.
 */
.bptp-siatka--opinie .bptp-kafel {
	display: flex;
	flex-direction: column;
	padding: 26px 28px;
}

.bptp-siatka--opinie .bptp-podpis {
	margin-top: auto;
	padding-top: 6px;
}

.bptp-opinia {
	margin: 12px 0 14px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--bptp-granat);
}

.bptp-podpis {
	font-size: 12.5px;
	color: #98a4b3;
}

/* Układ na węższych ekranach ----------------------------------------- */

@media (max-width: 1024px) {
	.bptp-sekcja {
		padding: 58px 20px;
	}

	.bptp-hero {
		padding: 48px 20px 56px;
	}

	.bptp-hero__siatka,
	.bptp-dwie,
	.bptp-dwie--zdjecie-lewo,
	.bptp-dwie--tekst-lewo,
	.bptp-lgbt {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.bptp-siatka--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Sekcja startowa schodzi do jednej kolumny, więc pasek nie jest już
	   ciasny - może wrócić do układu poziomego. */
	.bptp-pasek--pionowy .bptp-pasek__lista {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 14px 26px;
	}

	.bptp-ramka-zdjecia img {
		height: auto;
		min-height: 260px;
		max-height: 420px;
	}

	.bptp-ramka-zdjecia--pelna img {
		min-height: 260px;
	}

	/* Na wąskim ekranie zdjęcie sekcji startowej idzie nad tekst kafli. */
	.bptp-dwie--zdjecie-lewo .bptp-ramka-zdjecia {
		order: -1;
	}
}

@media (max-width: 767px) {
	.bptp-sekcja {
		padding: 46px 18px;
	}

	.bptp-hero {
		padding: 36px 18px 44px;
	}

	.bptp-h1 {
		font-size: 29px;
	}

	.bptp-h2 {
		font-size: 24px;
	}

	.bptp-h2--karta,
	.bptp-h2--mniejszy {
		font-size: 21px;
	}

	.bptp-siatka--2,
	.bptp-siatka--3 {
		grid-template-columns: 1fr;
	}

	/* Dwie kolumny punktów nie mieszczą się na telefonie - zdanie łamałoby
	   się co trzy wyrazy. */
	.bptp-punkty--dwie {
		columns: 1;
	}

	.bptp-punkty {
		padding: 20px 22px;
	}

	.bptp-pasek {
		padding: 20px 22px;
	}

	/* Przedrostek `--pionowy` obowiązkowy: reguła z progu 1024 px ma dwie klasy
	   i wygrałaby z pojedynczą, niezależnie od kolejności w pliku. */
	.bptp-pasek__lista,
	.bptp-pasek--pionowy .bptp-pasek__lista {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 12px;
	}

	.bptp-kafel--szeroki {
		grid-column: span 1;
	}

	.bptp-kafel--duzy {
		padding: 26px 22px;
	}

	.bptp-kafel--lista {
		padding: 6px 20px;
	}

	.bptp-blok-obawy {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 26px 22px;
	}

	.bptp-naglowek-z-pigulka {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.bptp-ramka-zdjecia img {
		min-height: 220px;
		max-height: 320px;
	}

	.bptp-btn {
		width: 100%;
	}

	.bptp-ramka--jasna,
	.bptp-ramka--wyrozniona,
	.bptp-ramka--tresc {
		padding: 22px 20px;
	}

}

/* Wejście sekcji przy przewijaniu ------------------------------------ */

/*
 * Stan ukryty włącza dopiero skrypt, klasą na pojemniku.
 *
 * Gdyby siedział w arkuszu na stałe, awaria skryptu albo wyłączony
 * JavaScript zostawiłyby pustą stronę - a to jest strona przychodni,
 * nie pokaz animacji. Bez skryptu wszystko jest po prostu widoczne.
 */
.bptp--anim .bptp-sekcja {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .45s ease, transform .45s ease;
}

.bptp--anim .bptp-sekcja.bptp-widoczna {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.bptp-btn {
		transition: none;
	}

	.bptp--anim .bptp-sekcja {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Nadpisania stylów globalnych witryny.
 *
 * Zestaw stylów budowniczego stron celuje w znaczniki z przedrostkiem klasy
 * zestawu (`.elementor-kit-6 h1`, `.elementor-kit-6 a`), czyli ma wagę (0,1,1)
 * i wygrywa z naszą pojedynczą klasą (0,1,0) — mimo że nasz arkusz wczytuje
 * się później. Widać to na kolorze nagłówków, grubości pisma w przyciskach
 * i podkreśleniu odnośników.
 *
 * Przedrostek `.bptp` wyrównuje wagę do (0,2,0) i rozstrzyga to na naszą
 * korzyść wyłącznie wewnątrz tej podstrony.
 */

.bptp .bptp-h1,
.bptp .bptp-h2,
.bptp .bptp-h3 {
	color: var(--bptp-granat);
}

.bptp .bptp-h2--bialy {
	color: #ffffff;
}

.bptp .bptp-btn {
	font-weight: 500;
	text-decoration: none;
}

.bptp .bptp-btn--glowny {
	color: #ffffff;
}

.bptp .bptp-btn--poboczny {
	color: var(--bptp-akcent);
}

.bptp .bptp-lead,
.bptp .bptp-mocny,
.bptp .bptp-cytat-duzy,
.bptp .bptp-cytaty li,
.bptp .bptp-opinia,
.bptp .bptp-maly--ciemny,
.bptp .bptp-karta-osoby__imie {
	color: var(--bptp-granat);
}

.bptp .bptp-odpowiedz {
	color: var(--bptp-akcent);
}

.bptp .bptp-karta-osoby__specjalnosc {
	color: #7a8798;
}

.bptp .bptp-podpis {
	color: #98a4b3;
}

.bptp .bptp-pigulka {
	color: var(--bptp-granat);
}

/* Zestaw stylów budowniczego stron ustawia własne pismo na `li`. */
.bptp .bptp-punkty li {
	font-size: 16px;
	line-height: 1.65;
	color: var(--bptp-tekst);
}

.bptp .bptp-pasek__lista li {
	font-size: 16px;
	color: var(--bptp-granat);
}

.bptp .bptp-punkty__tytul {
	color: var(--bptp-granat);
}

/*
 * Odstępy akapitów — nadpisanie własnej reguły, nie cudzej.
 *
 * `.bptp p { margin: 0 0 14px }` ma wagę (0,1,1) i bije każdą pojedynczą
 * klasę akapitu (0,1,0) niezależnie od kolejności w pliku. Przez to
 * `margin-top` wpisany przy `.bptp-podsumowanie` i `margin-bottom` przy
 * `.bptp-wstep` nigdy nie działały — zdanie zamykające sekcję siedziało
 * 14 px pod ostatnim kaflem, tak jakby odstępu nie było wcale.
 *
 * Przedrostek `.bptp` podnosi wagę do (0,2,0) i rozstrzyga to na naszą
 * korzyść. To ta sama sztuczka, co przy kolorach wyżej.
 */
.bptp .bptp-wstep {
	margin-bottom: 32px;
}

.bptp .bptp-podsumowanie {
	margin-top: 46px;
}

.bptp .bptp-lead {
	margin-bottom: 20px;
}

.bptp .bptp-opinia {
	margin: 12px 0 14px;
}

.bptp .bptp-cytat-duzy {
	margin-bottom: 6px;
}

.bptp .bptp-odpowiedz {
	margin-bottom: 16px;
}

/*
 * Zerowanie list — celowo w `:where()`.
 *
 * Napisane zwyczajnie jako `.bptp ul` miałoby wagę (0,1,1) i **wygrywało
 * z każdą naszą klasą listy** (0,1,0). Tak było do 21.08.2026: lista kroków
 * pierwszej konsultacji miała wpisane `padding: 20px 24px`, a renderowała się
 * z zerem — numery dotykały ramki, ostatni wiersz dotykał dna.
 *
 * `:where()` nie dolicza wagi, więc reguła ma (0,0,1) i ustawia punkt wyjścia,
 * zamiast wygrywać ze wszystkim, co po niej.
 */
:where(.bptp) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}