/*
 * Style wyłącznie dla komponentów spfp-members. Wszystkie selektory
 * zaczynają się od .spfp-members, żeby nie wpłynąć przypadkowo na
 * istniejące style motywu Sydney / Elementora.
 *
 * Jedyny świadomy wyjątek: `body:has(...)`, poniżej. Wynika z techniki
 * "full-bleed" portfolio (.spfp-members-portfolio, width:100vw + ujemne
 * marginesy) — `100vw` liczy się względem szerokości włącznie z paskiem
 * przewijania, a faktyczna widoczna szerokość strony jest o tyle węższa,
 * więc bez tego powstaje kilkunastopikselowy poziomy scroll. Standardowe,
 * udokumentowane obejście tej techniki (nie da się naprawić samym
 * selektorem .spfp-members, bo dotyczy całej strony) — zawężone przez
 * :has() tylko do stron z pełnoszerokościowym portfolio, żeby nie
 * wpływać na inne strony korzystające z tego samego pliku CSS.
 */
body:has(.spfp-members-portfolio) {
	overflow-x: hidden;
}

.spfp-members {
	--spfp-gap: 1.25rem;
	--spfp-border: #e0e0e0;
	--spfp-radius: 0; /* SPFP: brak zaokrąglonych rogów, zgodnie z makietą */
	--spfp-label-col: 160px;
	box-sizing: border-box;
}

.spfp-members *,
.spfp-members *::before,
.spfp-members *::after {
	box-sizing: inherit;
}

.spfp-members-notice {
	padding: 0.75rem 1rem;
	border-radius: var(--spfp-radius);
	margin-bottom: var(--spfp-gap);
}

.spfp-members-notice-success {
	background: #eaf7ec;
	border: 1px solid #8fd19e;
	color: #1e5a2a;
}

.spfp-members-notice-error {
	background: #fdecea;
	border: 1px solid #f3a6a0;
	color: #7a1f1a;
}

.spfp-members-notice-info {
	background: #eef3fb;
	border: 1px solid #a9c6ee;
	color: #1c3f66;
}

/* Profile card (public + preview) */
.spfp-members-profile-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 720px;
}

.spfp-members-profile-photo img,
.spfp-members-profile-photo svg.spfp-members-placeholder {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: var(--spfp-radius);
}

/* Publiczny profil projektanta — makieta
   `zadanie/nasi-czlonkowie/Desktop - SPFP - Członek - Template.jpg`.
   Style celowo zawężone do .spfp-members-context-public: funkcja
   spfp_render_profile_card() ma wyłącznie ten jeden punkt użycia
   (templates/single-projektant.php), więc bezpiecznie rozszerzają układ
   bez ryzyka wpłynięcia na inny kontekst w przyszłości. */
.spfp-members-context-public {
	max-width: 1100px;
	margin: 0 auto;
	gap: 0;
}

.spfp-members-context-public .spfp-members-profile-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
}

/* Rozmiar/waga teraz z .spfp-members-page-title (współdzielony styl h1) —
   patrz markup w template-functions.php. Tu tylko odstęp pod spodem
   właściwy dla tego layoutu (nagłówek dwukolumnowy z tagami) i interlinia
   66px — tylko na tej stronie, inna niż standardowe 84px ze wspólnej
   klasy, stąd !important (musi wygrać z !important w .spfp-members-page-
   title — wygrywa dzięki wyższej specyficzności tego selektora). */
.spfp-members-context-public .spfp-members-profile-name {
	line-height: 66px !important;
	margin: 0 0 1rem;
}

.spfp-members-context-public .spfp-members-profile-header-tags {
	display: flex;
	justify-content: flex-end;
}

/* flex-wrap (nie grid) — naturalny, upakowany przepływ bez wyrównywania
   w kolumny; każdy tag ma szerokość dopasowaną do własnego tekstu, liczba
   w linii wynika z długości sąsiednich nazw (zwykle ok. 5 przy typowej
   długości). Wymuszenie sztywnej liczby w linii wymagałoby wyrównania
   w kolumny (grid) — świadomie z tego zrezygnowano na rzecz wyglądu. */
.spfp-members-context-public .spfp-members-specializations {
	justify-content: flex-end;
	max-width: 700px;
}

.spfp-members-context-public .spfp-members-profile-divider {
	display: flex;
	justify-content: center;
	margin: 80px 0;
}

.spfp-members-context-public .spfp-members-profile-divider img {
	height: 22px;
	width: auto;
}

.spfp-members-context-public .spfp-members-profile-main {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	margin-bottom: 80px;
}

.spfp-members-context-public .spfp-members-profile-photo {
	flex: 0 0 320px;
}

.spfp-members-context-public .spfp-members-profile-photo img,
.spfp-members-context-public .spfp-members-profile-photo svg.spfp-members-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
}

.spfp-members-context-public .spfp-members-profile-content {
	flex: 1;
	min-width: 0;
}

.spfp-members-context-public .spfp-members-profile-bio {
	font-size: 16px;
	line-height: 28px;
}

.spfp-members-context-public .spfp-members-social-links {
	margin-top: 1.5rem;
}

/* Full-bleed: portfolio ma sięgać całej szerokości ekranu, nie tylko
   max-width:1100px reszty profilu (.spfp-members-context-public) — "wyjście"
   z wyśrodkowanego kontenera standardową sztuczką width:100vw + ujemne
   marginesy liczone względem viewportu.
   Masonry przez CSS columns (nie grid) — zdjęcia portfolio mają bardzo
   różne proporcje (sprawdzone na realnych danych: od 0.62 do 2.15), więc
   wymuszanie jednego kwadratu/object-fit:cover mocno je przycinało.
   column-count zamiast display:grid + naturalne wymiary img (dziedziczone
   z bazowej .spfp-members-portfolio-item img, height:auto) pakują zdjęcia
   pionowo bez dużych dziur, zero nowej zależności/JS. */
.spfp-members-context-public .spfp-members-portfolio {
	/* display: block — bazowa .spfp-members-portfolio ma display:grid,
	   które ignoruje column-count/column-gap (właściwości modułu Multi-
	   column, nie Grid); bez tego nadpisania element zostawał gridem i
	   siatka auto-fill(minmax(160px,1fr)) z bazowej reguły tworzyła
	   dziesiątki wąskich kolumn zamiast 2 kolumn masonry. */
	display: block;
	column-count: 3;
	column-gap: 2px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Tablet — 3 kolumny robią się za wąskie (zdjęcia portfolio bywają pionowe),
   pośredni krok na 2 kolumny zanim mobile zejdzie do 1 (patrz media (max-width:600px)). */
@media (max-width: 900px) and (min-width: 601px) {
	.spfp-members-context-public .spfp-members-portfolio {
		column-count: 2;
	}
}

.spfp-members-context-public .spfp-members-portfolio-item {
	break-inside: avoid;
	/* margin: 0 ... — <figure> ma domyślny margines UA (1em 40px), bez
	   zresetowania bocznych marginesów zdjęcia byłyby wcięte o 40px,
	   psując full-bleed. */
	margin: 0 0 2px;
}

/* Nawigacja Poprzedni/Następny — wspólna dla strony projektanta
   (spfp_render_projektant_nav()) i strony szczegółów kafelka
   (SPFP_Tile_CPT::render_nav()), mają wyglądać identycznie. Bez
   border-top (usunięty na obu stronach, na żądanie). */
.spfp-members-profile-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1100px;
	margin: 3rem auto 0;
	padding-top: 1.5rem;
}

.spfp-members-profile-nav a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
	font-weight: bold;
}

.spfp-members-profile-nav-arrow {
	display: inline-flex;
	width: 70px;
	height: 60px;
	flex-shrink: 0;
}

.spfp-members-profile-nav-arrow svg {
	width: 100%;
	height: 100%;
}

/* Jeden plik SVG (wskazuje w lewo) reużyty dla obu kierunków — "Następny"
   dostaje lustrzane odbicie zamiast osobnej grafiki. */
.spfp-members-profile-nav-next .spfp-members-profile-nav-arrow svg {
	transform: scaleX(-1);
}

.spfp-members-profile-nav-name {
	font-size: 16px;
	line-height: 28px;
	font-weight: normal;
	text-align: left;
}

/* Ta sama nawigacja co Poprzedni/Następny pod profilem, ale na GÓRZE strony
   edycji profilu (Wróć do Strefy członka / Wyloguj się) — 3rem odstępu od
   góry ma sens pod profilem, nie zaraz pod podnagłówkiem, więc przycinamy
   margin/padding, reszta (flex, strzałki, odstępy) zostaje dziedziczona
   z .spfp-members-profile-nav. max-width:100% (zamiast odziedziczonego
   1100px) — na tej stronie to nawigacja ma sięgać do tych samych
   lewej/prawej krawędzi co reszta siatki (.spfp-members-form/-fieldset,
   pełna szerokość .entry-content motywu), a nie własnego węższego limitu
   1100px pomyślanego pod .spfp-members-context-public (publiczny profil),
   zgłoszone jako niewyrównanie prawej krawędzi. */
.spfp-members-edit-profile-actions {
	max-width: 100%;
	margin: 1.5rem 0 2rem;
	padding-top: 0;
}

/* Strona projektanta (single-projektant.php) — 15px paddingu z boków
   strony. Portfolio zostaje pełnowidokowe mimo tego paddingu — jego
   sztuczka full-bleed (width:100vw + ujemne marginesy liczone względem
   viewportu) działa niezależnie od paddingu przodków. */
.spfp-members-single-projektant {
	padding: 0 15px;
}

/* Strona szczegółów kafelka (Strefa członka → Linki) — ten sam układ co
   publiczny profil projektanta (zdjęcie po lewej, tekst po prawej,
   .spfp-members-profile-nav pod spodem — ta klasa jest już generyczna,
   nie wymaga osobnych reguł). !important na tytule z tego samego powodu
   co .spfp-members-context-public .spfp-members-profile-name: motyw ma
   globalne `h1 { font-size/line-height !important }` w "Dodatkowym CSS". */
.spfp-members-context-tile {
	max-width: 1100px;
	margin: 0 auto;
	/* Ten sam powód co .spfp-members-single-projektant powyżej — strona
	   ładowana bez theme'owego wrappera treści (get_header()/get_footer()
	   bezpośrednio w single-spfp-tile.php), więc bez własnego paddingu
	   treść dotyka krawędzi ekranu na wąskich viewportach (zgłoszone przez
	   Zamawiającego, zrzut z mobile). */
	padding: 0 15px;
}

.spfp-members-tile-page-title {
	font-size: 2.75rem !important;
	font-weight: bold;
	line-height: 1.1 !important;
	letter-spacing: normal !important;
	margin: 32px 0 2.5rem;
}

.spfp-members-tile-page-main {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}

.spfp-members-tile-page-photo {
	flex: 0 0 320px;
}

.spfp-members-tile-page-photo img,
.spfp-members-tile-page-photo svg.spfp-members-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.spfp-members-tile-page-content {
	flex: 1;
	min-width: 0;
	line-height: 1.7;
}

/* Lista materiałów (dokumenty/uchwały/aktualności, MEM-009) pod kafelkiem —
   zwarte wiersze oddzielone cienką linią, nie osobne karty: przy
   kilkunastu-dwudziestu materiałach pod jednym kafelkiem duże, obramowane
   karty zajmowały nieproporcjonalnie dużo miejsca i trudno się je skanowało
   wzrokiem (zgłoszone przez Zamawiającego 2026-09-09). */
.spfp-members-materials-list {
	display: flex;
	flex-direction: column;
	margin-top: 1.5rem;
	border-top: 1px solid var(--spfp-border);
}

.spfp-members-material-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--spfp-border);
}

.spfp-members-material-info {
	min-width: 0; /* pozwala tekstowi obcinać się wewnątrz flexa, nie rozpychać wiersz */
}

.spfp-members-material-title {
	margin: 0;
	font-size: 1rem;
}

.spfp-members-material-excerpt {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.spfp-members-material-download {
	/* .spfp-members-btn samo z siebie nie ustawia paddingu/font-size (patrz
	   komentarz przy tej klasie) — bez tej reguły przycisk "Pobierz" ściągał
	   rozmiar tekstu z akapitu materiału, wyglądając inaczej niż pozostałe
	   przyciski w pluginie. Te same proporcje co .spfp-members-tile-button
	   (najbliższy odpowiednik: drugorzędna akcja "przejdź dalej" w karcie). */
	flex: none;
	padding: 0.4rem 1rem;
	font-size: 0.85rem;
}

/* Na wąskich ekranach przycisk pod tytułem zamiast obok niego — w wierszu
   zabrakłoby miejsca na dłuższy tytuł + przycisk w jednej linii. */
@media (max-width: 600px) {
	.spfp-members-material-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
}

/* Siatka kropek w stylu logo SPFP (DEC-019) — tło + kolor kropek osobno,
   żeby placeholder wyglądał spójnie niezależnie od kontenera (okrągły czy
   kwadratowy podgląd, karta wyników czy pełny profil). */
svg.spfp-members-placeholder {
	background: #f0f0f0;
}

svg.spfp-members-placeholder circle {
	fill: #000;
}

/* Losowo przypisane zdjęcie zastępcze (ADR-013) — nadpisuje object-fit:cover
   z reguł kontenerów (specyficzność .kontener img.klasa > .kontener img),
   bo to gotowe grafiki (nie zawsze kwadratowe, np. avatar-3/4.png to
   228×95), które przy "cover" byłyby brutalnie przycięte zamiast po prostu
   przeskalowane w całości — inaczej niż prawdziwe zdjęcia profilowe, gdzie
   przycięcie do kwadratu jest pożądane. */
.spfp-members-profile-photo img.spfp-members-avatar-placeholder,
.spfp-members-search-card-photo img.spfp-members-avatar-placeholder,
.spfp-members-profile-summary-photo img.spfp-members-avatar-placeholder {
	object-fit: contain;
	background: #f0f0f0;
	padding: 1rem;
	box-sizing: border-box;
}

.spfp-members-profile-name {
	margin: 0;
}

.spfp-members-specializations {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Wygląd tagu specjalizacji — współdzielony z .spfp-members-chip span
   (checkboxy-tagi w Edycji profilu i filtrze wyszukiwarki) niżej, żeby
   wszystkie miejsca z tagami specjalizacji wyglądały identycznie. */
.spfp-members-specialization,
.spfp-members-chip span {
	display: inline-flex;
	align-items: center;
	height: 43px;
	padding: 0 16px;
	border: 1px solid #000;
	border-radius: 4px;
	font-size: 16px;
	line-height: 28px;
	box-sizing: border-box;
}

.spfp-members-region {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
	font-size: 17px;
	font-weight: 300;
}

.spfp-members-contact {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.spfp-members-contact-email,
.spfp-members-contact-website {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.spfp-members-contact-website a {
	font-size: 17px;
	font-weight: 300;
}

.spfp-members-contact-label {
	font-size: 17px;
	font-weight: normal;
}

.spfp-members-email-reveal {
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
}

.spfp-members-social-links {
	display: flex;
	flex-direction: row;
	gap: 0.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spfp-members-social-links a {
	display: flex;
	color: inherit;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.spfp-members-social-links a:hover,
.spfp-members-social-links a:focus-visible {
	opacity: 0.6;
	transform: translateY(-2px);
}

.spfp-members-social-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.spfp-members-social-icon svg {
	width: 100%;
	height: 100%;
}

.spfp-members-portfolio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--spfp-gap);
}

.spfp-members-portfolio-trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.spfp-members-portfolio-item img {
	width: 100%;
	height: auto;
	border-radius: var(--spfp-radius);
	display: block;
}

/* Lightbox portfolio — patrz assets/js/spfp-members.js */
.spfp-members-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	padding: 2rem;
}

.spfp-members-lightbox.is-visible {
	display: flex;
}

body.spfp-members-lightbox-open {
	overflow: hidden;
}

.spfp-members-lightbox-figure {
	max-width: min(90vw, 1100px);
	max-height: 90vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.spfp-members-lightbox-img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.spfp-members-lightbox-close,
.spfp-members-lightbox-prev,
.spfp-members-lightbox-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.15s ease;
}

.spfp-members-lightbox-close:hover,
.spfp-members-lightbox-prev:hover,
.spfp-members-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.15);
}

.spfp-members-lightbox-close {
	top: 1.5rem;
	right: 1.5rem;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.75rem;
}

.spfp-members-lightbox-prev,
.spfp-members-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
}

.spfp-members-lightbox-prev {
	left: 1.5rem;
}

.spfp-members-lightbox-next {
	right: 1.5rem;
}

@media (max-width: 600px) {
	.spfp-members-lightbox {
		padding: 1rem;
	}

	.spfp-members-lightbox-prev,
	.spfp-members-lightbox-next {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.5rem;
	}

	.spfp-members-lightbox-prev {
		left: 0.5rem;
	}

	.spfp-members-lightbox-next {
		right: 0.5rem;
	}
}

/* Dashboard ("Strefa członka") */
.spfp-members-dashboard {
	width: 100%;
}

/* Strona-nośnik "Strefa członka" ma już własny nagłówek "Witaj [imię]!"
   (spfp-members-page-title) — tytuł strony WP ("Strefa członka") wyrenderowany
   przez motyw Sydney (content-page.php, .entry-header > h1.title-post) jest
   zbędnym duplikatem, więc chowamy go czysto wizualnie, wyłącznie na
   stronie zawierającej ten shortcode. Zero ingerencji w plik motywu. */
.content-inner:has(.spfp-members-dashboard) .entry-header {
	display: none;
}

/* Jedna, współdzielona klasa odstępu między sekcjami (80px desktop / 56px
   mobile — patrz media query niżej), używana w całym module Strefy
   członka i na stronie edycji profilu: pasek SPFP po h1 dashboardu,
   sekcje "Linki"/"Twoje dane", "Sprawdź nasz Instagram", drugi formularz
   (Dane członka) na stronie edycji. Dodawana przez PHP jako dodatkowa
   klasa na elemencie sekcji — jedno miejsce definicji wartości zamiast
   powtarzania jej w kilku różnych selektorach. */
.spfp-members-section-gap {
	margin-top: 80px;
}

/* Styl głównego nagłówka h1 stron Strefy członka (np. "Witaj [imię]!").
   margin-top: 0 !important — bez tego motyw Sydney
   ("body:not(.elementor-page):not(.panel-layout) .entry-content h1",
   margin-top: 1em) wygrywa specyficznością i dokłada własny odstęp NAD
   już istniejącym ~83px padding-top strony (.page-wrap) — podwójny odstęp
   od górnego menu. font-size/line-height/font-weight !important z tego
   samego powodu co przy .spfp-members-section-title niżej — globalna
   reguła "h1 { ... !important }" z Dodatkowego CSS motywu. */
.spfp-members-page-title {
	font-size: 56px !important;
	line-height: 84px !important;
	font-weight: bold !important;
	letter-spacing: normal !important;
	margin: 0 0 1.25rem;
	margin-top: 0 !important;
}

/* Styl nagłówków h2 sekcji w całej Strefie członka (Linki, Twoje dane, i
   kolejne). font-size/line-height/font-weight !important — bez tego
   globalna reguła "h2 { font-size:3rem !important; ... }" (Dodatkowe CSS w
   Customizerze motywu) wygrywa mimo niższej specyficzności, bo !important
   zawsze bije regułę bez !important — a przy okazji całkiem blokuje nasz
   breakpoint mobilny (32px/36px) poniżej. */
.spfp-members-section-title {
	font-size: 48px !important;
	line-height: 72px !important;
	font-weight: bold !important;
	margin: 2.5rem 0 1.25rem;
}

@media (max-width: 600px) {
	.spfp-members-page-title,
	.spfp-members-section-title {
		font-size: 32px !important;
		line-height: 36px !important;
	}
}

/* Wspólny wygląd wszystkich przyciskowych elementów w pluginie (Zapisz w
   edycji profilu, Edytuj w strefie członka, Przejdź na kafelkach) — jedna
   klasa z obrysem + hover (ciemne tło, jasny tekst), żeby nie powielać tych
   samych właściwości w kilku miejscach. Klasy specyficzne dodają już tylko
   to, co faktycznie się różni (padding, rozmiar, pozycja w layoucie).
   !important przy color jest celowe: motyw ma regułę
   ".entry-content a:not(.button):not(.elementor-button-link) { color:#000 }"
   o wyższej specyficzności niż nasza klasa (bo doliczają się dwa :not()),
   więc bez !important przycisk "Edytuj" (to <a>) zostawałby czarny na
   czarnym tle po najechaniu. */
.spfp-members-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1px solid #222;
	border-radius: var(--spfp-radius);
	background: #fff;
	color: #222 !important;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.spfp-members-btn:hover,
.spfp-members-tile:hover .spfp-members-tile-button {
	background: #222;
	color: #fff !important;
}

/* Ikony (np. fa-search) nie dziedziczą koloru przycisku same z siebie —
   motyw ma globalne `* { color:#000; }` w "Dodatkowym CSS", które ustawia
   kolor BEZPOŚREDNIO na <i>, więc bezpośrednia reguła zawsze wygrywa z
   dziedziczeniem po rodzicu, niezależnie od specyficzności. Trzeba
   nadpisać jawnie, tak samo jak przy samym .spfp-members-btn wyżej.
   Dla ikony SVG (lupa w przycisku "Szukaj") ta sama globalna reguła `*`
   trafia też BEZPOŚREDNIO w <path> (stroke="currentColor"), nie tylko w
   <svg> — samo pokolorowanie <svg> nie wystarcza, trzeba nadpisać kolor
   też na potomkach (path), inaczej currentColor i tak rozwiąże się do
   czarnego z tamtej reguły. */
.spfp-members-btn:hover i,
.spfp-members-btn:hover svg,
.spfp-members-btn:hover svg *,
.spfp-members-btn:hover span,
.spfp-members-tile:hover .spfp-members-tile-button i,
.spfp-members-tile:hover .spfp-members-tile-button svg,
.spfp-members-tile:hover .spfp-members-tile-button svg *,
.spfp-members-tile:hover .spfp-members-tile-button span {
	color: #fff !important;
}

.spfp-members-search-submit-icon {
	flex: 0 0 auto;
}

.spfp-members-search-submit-icon,
.spfp-members-search-submit-icon * {
	color: #222;
}

/* Stan "trwa zapis" — po pomyślnej walidacji, tuż przed faktycznym
   wysłaniem formularza (patrz showSubmitLoadingState() w JS). Zapis bywa
   zauważalnie wolny (np. przez wysyłkę maila), więc użytkownik musi
   dostać sygnał, że kliknięcie zadziałało i trwa przetwarzanie. */
.spfp-members-btn-loading {
	cursor: wait;
	opacity: 0.75;
}

.spfp-members-btn-loading::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spfp-members-spin 0.6s linear infinite;
}

@keyframes spfp-members-spin {
	to {
		transform: rotate(360deg);
	}
}

.spfp-members-edit-button {
	height: 48px;
	min-width: 137px;
	justify-content: center;
	padding: 0 1rem;
	font-size: 16px;
	line-height: 15px;
	font-weight: normal;
}


/* Siatka kafelków "Linki" — 3 kolumny. Obrazek/placeholder zarządzany przez
   administratora (Ustawienia → SPFP — Kafelki, patrz SPFP_Tile_Settings) —
   brak obrazka dla danego slotu pokazuje tę samą siatkę kropek co reszta
   serwisu (spfp_placeholder_svg()), nie kolorowy blok jak wcześniej. */
.spfp-members-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spfp-gap);
}

.spfp-members-tile {
	display: flex;
	flex-direction: column;
	height: 437px;
	border: 1px solid #000;
	border-radius: var(--spfp-radius);
	text-decoration: none;
	color: inherit;
}

.spfp-members-tile-graphic {
	height: 261px;
	overflow: hidden;
	border-bottom: 1px solid #000;
}

.spfp-members-tile-graphic img,
.spfp-members-tile-graphic svg.spfp-members-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.spfp-members-tile-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	flex: 1;
}

/* !important: motyw Sydney ma regułę
   "body:not(.elementor-page):not(.panel-layout) .entry-content h3" o wyższej
   specyficzności (margin-top: 1.2em), która inaczej wygrywa z tą klasą. */
.spfp-members-tile-body h3 {
	margin: 0 !important;
	font-size: 24px;
	line-height: 32px;
}

.spfp-members-tile-button {
	height: 48px;
	min-width: 137px;
	justify-content: center;
	padding: 0 1rem;
	font-size: 16px;
	line-height: 15px;
	font-weight: normal;
	margin-top: auto;
}

/* Strzałka w przyciskach "Przejdź"/"Edytuj" — wektorowy SVG (spfp_chevron_svg,
   patrz spfp_tile_button_arrow() w template-functions.php) zamiast dawnego
   ::after z mask-image, który przy 16px potrafił wyjść nieostro (maska
   rastrowa, nie wektor). Domyślny kolor #222 (jak reszta przycisku) — bez
   tego globalne `* { color:#000 }` motywu trafiłoby bezpośrednio w <path>,
   pomijając dziedziczenie; hover na biało już obsługuje generyczna reguła
   .spfp-members-btn:hover svg * wyżej. */
.spfp-members-tile-button-arrow,
.spfp-members-tile-button-arrow * {
	color: #222;
}

.spfp-members-tile-button-arrow {
	display: inline-flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.spfp-members-tile-button-arrow svg {
	width: 100%;
	height: 100%;
}

/* Karta "Twoje dane" (wariant v1 makiety) */
.spfp-members-profile-summary-card {
	display: flex;
	flex-direction: column;
	height: 600px;
	border: 1px solid #000;
	border-radius: var(--spfp-radius);
}

.spfp-members-profile-summary-photo {
	height: 344px;
	overflow: hidden;
	border-bottom: 1px solid #000;
}

.spfp-members-profile-summary-photo img,
.spfp-members-profile-summary-photo svg.spfp-members-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.spfp-members-profile-summary-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px;
	gap: 32px;
	flex: 1;
}

/* !important: patrz komentarz przy .spfp-members-tile-body h3 — ta sama
   reguła motywu Sydney o wyższej specyficzności. */
.spfp-members-profile-summary-body h3 {
	margin: 0 !important;
	font-size: 24px;
	line-height: 32px;
}

.spfp-members-profile-summary-body p {
	margin: 0;
	font-size: 0.9rem;
	color: #444;
}

/* Dedykowana strona logowania (DEC-031) — wąska, wyśrodkowana kolumna,
   w odróżnieniu od pełnej szerokości formularza edycji profilu. */
.spfp-members-login {
	max-width: 480px;
	margin: 0 auto;
}

.spfp-members-login-form .spfp-members-field {
	grid-template-columns: 1fr;
}

.spfp-members-login-form .spfp-members-field > label {
	padding-top: 0;
}

.spfp-members-login-form .spfp-members-checkbox {
	margin: 0.5rem 0 1rem;
}

.spfp-members-login-links {
	margin-top: 1rem;
}

.spfp-members-login-links a {
	font-weight: bold;
	text-decoration: underline;
}

/* Pasek "SPFP | Stowarzyszenie Projektowe" nad formularzem edycji */
.spfp-members-subheader {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	height: 106px;
	margin-bottom: var(--spfp-gap);
}

.spfp-members-subheader-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	white-space: nowrap;
	font-weight: bold;
	font-size: 24px;
	line-height: 32px;
	margin-left: 32px;
}

.spfp-members-subheader-brand span {
	font-weight: bold;
	margin-left: 32px;
	border-left: 2px solid var(--spfp-border);
	padding-left: 25px;
	white-space: normal;
}

.spfp-members-subheader-text {
	flex: 0 1 480px; /* nie rozciąga się na całą szerokość — zwija do 2 linii jak w makiecie */
	font-size: 16px;
	line-height: 28px;
	color: #6b6b6b;
	margin: 0;
}

/* Forms */
.spfp-members-form {
	display: flex;
	flex-direction: column;
	gap: var(--spfp-gap);
	width: 100%; /* pełna szerokość kontenera treści motywu (.entry-content), nie sztywny limit */
}

.spfp-members-fieldset {
	border: 1px solid #000;
	border-radius: var(--spfp-radius);
	padding: 0 70px 50px;
}

/* .spfp-members-section-title (h1/h2, patrz sekcja Dashboard wyżej) ma
   własny margin-top do rytmu pionowego między sekcjami — zbędny/szkodliwy
   tutaj, bo .spfp-members-fieldset ma już padding-top, więc dokładałby się
   podwójny odstęp nad pierwszym nagłówkiem w boksie. */
.spfp-members-fieldset > .spfp-members-section-title:first-child {
	margin-top: 0;
}

/* Wstępny opis całej karty, tuż pod H2 — więcej oddechu przed pierwszą
   podsekcją niż zwykły odstęp międzyakapitowy (wyraźny podział "intro vs.
   treść"). */
.spfp-members-fieldset > h2 + .spfp-members-hint {
	margin-bottom: 2rem;
}

.spfp-members-preview-link {
	margin: 0 0 2rem;
}

/* Na stronie publicznego profilu ma być wyrównany do prawej — mniej
   więcej na wysokości imienia/nazwiska, do tej samej krawędzi co tagi
   specjalizacji. Renderowany PRZED .spfp-members-context-public (poza tym
   kontenerem), więc dostaje tu tę samą szerokość/wyśrodkowanie osobno,
   żeby prawa krawędź faktycznie się pokrywała. */
.spfp-members-edit-profile-link {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
}

.spfp-members-preview-link a {
	color: #222;
	font-weight: bold;
	text-decoration: none;
}

/* Podkreślenie tylko na hover — spójnie dla wszystkich czterech linków
   tego typu (Wróć do Strefy członka, Wyloguj się, Zobacz swój profil
   publicznie, Zmień hasło), zamiast na stałe. */
.spfp-members-preview-link a:hover {
	text-decoration: underline;
}

/* Wszystkie cztery linki tego typu (Wróć do Strefy członka, Wyloguj się,
   Zobacz swój profil publicznie, Zmień hasło) same wstawiają w PHP swoją
   ikonę chevron (spfp_nav_chevron_inline() — ta sama co w nawigacji
   Poprzedni/Następny pod profilem, w małym rozmiarze dopasowanym do
   wysokości linii tekstu), przed albo za tekstem — stąd brak tu już
   generycznej strzałki "→" z ::after. */
.spfp-members-inline-arrow {
	display: inline-flex;
	width: 14px;
	height: 14px;
	vertical-align: -1.5px; /* dokładnie wymierzone (Playwright) wycentrowanie względem 16px tekstu linku */
}

.spfp-members-inline-arrow svg {
	width: 100%;
	height: 100%;
}

/* Ten sam rozmiar co pozostałe nagłówki h3 w pluginie (np. tytuł kafelka
   .spfp-members-tile-body h3) — 24px/32px. !important z tego samego powodu
   co przy .spfp-members-page-title/.spfp-members-section-title wyżej:
   globalna reguła "h3 { ... !important }" z Dodatkowego CSS motywu. */
.spfp-members-section-heading {
	margin: 64px 0 0.35rem;
	font-size: 24px !important;
	line-height: 32px !important;
	font-weight: bold !important;
}

.spfp-members-section-heading:first-of-type {
	margin-top: 0;
}

/* Opis podsekcji tuż pod nagłówkiem H3 — ciasno przy nagłówku (para razem),
   ale z wyraźnym odstępem przed pierwszym polem poniżej. */
.spfp-members-section-heading + .spfp-members-hint {
	margin-bottom: 1.25rem;
}

.spfp-members-inline-hint {
	font-weight: normal;
	font-size: 0.8rem;
	opacity: 0.7;
}

/* Układ dwukolumnowy z makiety: etykieta w lewej kolumnie, zawartość pola
   (input/hint/toggle) w prawej — zastosowany do WSZYSTKICH pól formularza. */
.spfp-members-field {
	display: grid;
	grid-template-columns: var(--spfp-label-col) 1fr;
	gap: 0.5rem 1.5rem;
	align-items: start;
	margin-bottom: 16px;
}

.spfp-members-field > label {
	font-weight: bold;
	font-size: 16px;
	line-height: 28px;
	padding-top: 0.6rem;
}

.spfp-members-field-content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.spfp-members-field input[type="text"],
.spfp-members-field input[type="email"],
.spfp-members-field input[type="url"],
.spfp-members-field input[type="date"],
.spfp-members-field textarea {
	padding: 0.6rem 0.75rem;
	border: 1px solid #000;
	border-radius: var(--spfp-radius);
	width: 100%;
	font-weight: normal;
	font-size: 16px;
	line-height: 28px;
	color: rgba(0, 0, 0, 0.55);
}

.spfp-members-field input::placeholder,
.spfp-members-field textarea::placeholder {
	font-size: 16px;
	line-height: 28px;
	color: rgba(0, 0, 0, 0.55);
	opacity: 1;
}

.spfp-members-field input[type="text"],
.spfp-members-field input[type="email"],
.spfp-members-field input[type="url"],
.spfp-members-field input[type="date"] {
	height: 48px;
}

/* Pole "E-mail" w sekcji "Dane członka" — jedyne dziś użycie disabled=""
   w tym formularzu (patrz field_text_with_hint() w class-spfp-profile-
   form.php). Wygląd "wyszarzony" ponad domyślne szarzenie przeglądarki,
   żeby jednoznacznie odróżnić od zwykłych, edytowalnych pól. */
.spfp-members-field input:disabled {
	background: #f4f4f4;
	border-color: #d0d0d0;
	color: rgba(0, 0, 0, 0.35);
	cursor: not-allowed;
}

/* Bio — dwukrotnie wyższe pole niż domyślna wysokość textarea (120px), na
   dłuższy opis; min-height, nie height, żeby ręczne rozciągnięcie (resize)
   dalej działało w górę. */
#spfp-bio {
	min-height: 240px;
}

/* Błąd walidacji pola: czarna ramka -> czerwona + komunikat pod polem.
   !important jest tu celowe: reguła bazowa ustawia border przez skrócony
   zapis (border: 1px solid #000), więc przy takiej samej specyficzności
   selektora sama kolejność w pliku nie wystarcza, żeby czerwony kolor
   niezawodnie wygrał — a stan błędu ma być zawsze widoczny, bez wyjątków. */
.spfp-members-field-error input[type="text"],
.spfp-members-field-error input[type="email"],
.spfp-members-field-error input[type="url"],
.spfp-members-field-error input[type="date"],
.spfp-members-field-error textarea {
	border-color: #c0392b !important;
}

.spfp-members-field-error-message {
	color: #c0392b;
	font-size: 0.8rem;
	line-height: 1.4;
	margin: 0.35rem 0 0;
}

.spfp-members-required-marker {
	color: #c0392b;
}

.spfp-members-required-legend {
	font-size: 0.8rem;
	color: #6b6b6b;
	margin: 0 0 var(--spfp-gap);
}

.spfp-members-checkbox {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: normal;
}

.spfp-members-toggle-text {
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	opacity: 0.8;
	margin: 0;
	padding-top: 0.6rem; /* wyrównanie z etykietą pola (np. "E-mail"), która ma to samo padding-top */
}

.spfp-members-switch {
	display: inline-block;
	cursor: pointer;
}

.spfp-members-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.spfp-members-switch-track {
	display: inline-flex;
	border: 1px solid #222;
	border-radius: var(--spfp-radius);
	overflow: hidden;
	font-size: 0.8rem;
}

.spfp-members-switch-track span {
	padding: 0.3rem 0.75rem;
}

.spfp-members-switch-yes {
	background: #222;
	color: #fff;
}

.spfp-members-switch-no {
	background: transparent;
}

.spfp-members-switch input:not(:checked) ~ .spfp-members-switch-track .spfp-members-switch-yes {
	background: transparent;
	color: #222;
}

.spfp-members-switch input:not(:checked) ~ .spfp-members-switch-track .spfp-members-switch-no {
	background: #222;
	color: #fff;
}

.spfp-members-switch input:focus-visible ~ .spfp-members-switch-track {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

/* Wybór pliku: pole tylko-do-odczytu z nazwą + przycisk "Wybierz plik" —
   odstęp 32px między nimi, przycisk w tym samym stylu co "Edytuj"/"Przejdź"
   (.spfp-members-btn + te same wymiary/font co .spfp-members-edit-button). */
.spfp-members-file-row {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.spfp-members-file-display {
	flex: 1 1 auto;
	/* Wysokość i tak nadpisuje motyw Sydney regułą o wyższej specyficzności
	   dla input[type="text"] (wychodzi ~50px) — dopasowujemy przycisk do
	   TEJ wartości zamiast walczyć z motywem przez !important. */
	background: #fff;
	opacity: 1;
}

.spfp-members-file-button {
	position: relative;
	flex: 0 0 auto;
	height: 48px;
	min-width: 137px;
	justify-content: center;
	padding: 0 1rem;
	font-size: 16px;
	line-height: 15px;
	font-weight: normal;
	cursor: pointer;
	white-space: nowrap;
}

.spfp-members-file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
}

.spfp-members-current-file {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.spfp-members-current-file img {
	border-radius: var(--spfp-radius);
}

.spfp-members-portfolio-slot {
	padding: 1rem 0;
}

/* :not(.spfp-members-file-display) — reguła ma odsuwać pola "Tytuł"/"Opis"
   od rzędu z plikiem nad nimi, ale bez wyłączenia łapała też samo pole
   nazwy pliku (to też input[type="text"]), zbijając je 8px w dół względem
   przycisku "Wybierz plik" i psując wyrównanie z nim. */
.spfp-members-portfolio-slot input[type="text"]:not(.spfp-members-file-display),
.spfp-members-portfolio-slot textarea {
	margin-top: 0.5rem;
}

/* Chipy specjalizacji (checkboxy stylizowane jako przyciski-tagi) — wygląd
   samego tagu (span) zdefiniowany współdzielnie przy .spfp-members-specialization wyżej. */
.spfp-members-chip-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
}

.spfp-members-chip {
	position: relative;
	cursor: pointer;
	/* .spfp-members-chip to <label> — motyw (Bootstrap w Sydney) narzuca
	   globalnie label{margin-bottom:5px}, co dokłada się do gap:16px z
	   .spfp-members-chip-group i psuje równe odstępy między zawijanymi
	   rzędami tagów. */
	margin-bottom: 0;
}

.spfp-members-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.spfp-members-chip span {
	transition: border-color 0.15s ease;
}

.spfp-members-chip:hover span {
	border-color: #222;
}

.spfp-members-chip input:checked ~ span {
	background: #222;
	border-color: #222;
	color: #fff;
}

.spfp-members-chip input:focus-visible ~ span {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

.spfp-members-hint {
	font-size: 16px;
	line-height: 28px;
	opacity: 0.75;
	margin: 0;
}

.spfp-members-submit {
	align-self: flex-start;
	padding: 0.6rem 1.75rem;
	margin-top: 2rem;
}

/* Stopka z logotypami dofinansowania/partnerów (Ministerstwo Kultury, IPK,
   SPFP) — wspólna dla wszystkich stron Strefy członka (patrz
   spfp_render_partners_footer() w template-functions.php). */
.spfp-members-partners-footer {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #000;
}

.spfp-members-partners-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.spfp-members-partner-logo {
	height: 55px;
	width: auto;
	display: block;
}

.spfp-members-partner-logo-spfp {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.spfp-members-partner-logo-spfp img {
	height: 24px;
	width: auto;
}

.spfp-members-partner-divider {
	width: 1px;
	align-self: stretch;
	background: #000;
}

.spfp-members-partner-text {
	font-weight: bold;
	font-size: 1.05rem;
	line-height: 1.2;
	max-width: 110px;
}

/* Bez max-width (usunięty poprzedni limit 900px) — ten limit łamał tekst
   zaraz po "Przemysłów" mimo że kontener strony bywa znacznie szerszy niż
   900px i całe zdanie zmieściłoby się w jednej linii. Bez sztywnego limitu
   tekst zajmuje tyle miejsca, ile faktycznie ma dostępne — jedna linia na
   szerokich ekranach, naturalne zawijanie (bez poziomego scrolla) tam,
   gdzie viewport jest węższy niż samo zdanie (patrz też
   .spfp-members-partners-footer niżej — full-bleed portfolio na stronie
   projektanta ma zabezpieczenie przed poziomym scrollem, ale reszta stron
   z tą stopką nie, więc wymuszanie tu białych znaków bez zawijania
   (white-space:nowrap) byłoby ryzykowne na mobile). */
.spfp-members-partners-text {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

/* Strona szczegółów kafelka ma węższy kontener (.spfp-members-context-tile,
   max-width:1100px, patrz wyżej) niż pozostałe strony ze stopką partnerów
   (np. Znajdź projektanta, bez takiego limitu) — przy 1rem to jedyne
   miejsce, gdzie zdanie i tak łamałoby się (o ok. 150px za wąsko, sprawdzone
   pomiarem), mimo usunięcia sztywnego max-width wyżej. Nieco mniejszy
   font-size tylko w tym kontekście, żeby zdanie zmieściło się w jednej
   linii tak samo jak wszędzie indziej, zamiast łamać ten jeden przypadek. */
.spfp-members-context-tile .spfp-members-partners-text {
	font-size: 0.85rem;
}

/* Wyszukiwarka projektantów ("Znajdź Projektanta") */
.spfp-members-search-page {
	width: 100%;
}

.spfp-members-search-intro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 1rem auto 32px;
	max-width: 640px;
}

.spfp-members-search-intro-icon {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
}

.spfp-members-search-intro span {
	font-size: 16px;
	line-height: 28px;
}

.spfp-members-search-filters {
	margin: 0;
}

/* "Wybierz filtr:" — mniejszy niż standardowy .spfp-members-section-title
   (48px/72px, myślany pod nagłówki sekcji Dashboardu), styl h4 wg makiety
   wyszukiwarki: 24px/36px bold. Selektor potomny (wyższa specyficzność niż
   sam .spfp-members-section-title) wygrywa mimo !important po obu stronach. */
.spfp-members-search-filters .spfp-members-section-title {
	font-size: 24px !important;
	line-height: 36px !important;
	font-weight: bold !important;
	/* !important: motyw Sydney ma regułę
	   "body:not(.elementor-page):not(.panel-layout) .entry-content h2"
	   (margin-bottom: 0.5em) o wyższej specyficzności niż ten selektor. */
	margin-bottom: 32px !important;
}

/* Tagi filtra wyrównane do lewej (w odróżnieniu od
   .spfp-members-chip-group w Edycji profilu, wyrównanego do prawej). */
.spfp-members-search-tags {
	justify-content: flex-end;
	margin-bottom: 32px;
}

.spfp-members-search-text-row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 0;
}

/* Grupuje input + przycisk "Szukaj", żeby na mobile mogły zostać razem w
   jednym wierszu (biorąc dostępną szerokość), podczas gdy "Wyczyść filtry"
   schodzi osobno do wiersza pod nimi z własną, naturalną szerokością — nie
   na całą szerokość, patrz .spfp-members-search-clear w media query. */
.spfp-members-search-input-group {
	display: flex;
	flex: 1;
	min-width: 0;
}

/* !important na border: motyw Sydney ma regułę na input[type="text"] (ten
   sam typ co to pole) z tą samą specyficznością (0,1,0) co
   .spfp-members-search-input — o kolejności rozstrzyga wtedy tylko
   kolejność ładowania arkuszy, czego nie chcemy się trzymać. */
.spfp-members-search-input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid #000 !important;
	border-right: none !important;
	border-radius: var(--spfp-radius);
	font-weight: normal;
}

.spfp-members-search-submit {
	flex: 0 0 auto;
	padding-left: 16px;
}

.spfp-members-search-clear {
	flex: 0 0 auto;
	margin-left: 0.75rem;
}

.spfp-members-search-clear:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.spfp-members-search-clear:disabled:hover {
	background: #fff;
	color: #222 !important;
}

.spfp-members-breadcrumb {
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	color: #000;
	margin: 80px 0 1.5rem;
}

/* Strona szczegółów kafelka (single-spfp-tile.php) — bez górnego/dolnego
   odstępu, w odróżnieniu od wyszukiwarki (jedyne inne miejsce z tą klasą). */
.spfp-members-context-tile .spfp-members-breadcrumb {
	margin: 0;
}

.spfp-members-breadcrumb a {
	color: #000;
}

.spfp-members-search-results {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 2rem;
}

/* Stan ładowania podczas AJAX-owego filtrowania (patrz assets/js/
   spfp-members.js) — przygasza stare wyniki zamiast czyścić je od razu,
   żeby siatka nie "mrugała" pustką między zapytaniami. */
.spfp-members-search-results-area.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.spfp-members-search-card {
	display: flex;
	flex-direction: column;
	height: 420px;
	border: 1px solid #13DD64;
	border-radius: var(--spfp-radius);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	/* outline siada tuż za istniejącym border (domyślny offset: 0, poza
	   krawędzią border) — na hover oba razem dają wizualnie grubszą ramkę,
	   bez zmiany box modelu, więc karta nie "skacze"/nie przesuwa
	   sąsiednich elementów o piksel, tak jak zmiana samego border-width by
	   zrobiła. */
	outline: 2px solid transparent;
	transition: all 0.3s ease-in-out;
}

/* outline (nie tylko outline-color) — motyw ma globalne `a:hover { outline:
   0; }`, więc bez jawnego ustawienia width/style tutaj też, reguła motywu
   (wyższa specyficzność niż nasza baza bez :hover) zerowałaby grubość na
   hover, mimo że kolor by się zmieniał. Border 1px (bez hover) + outline
   2px = 3px łącznie na hover. */
.spfp-members-search-card:hover {
	outline: 2px solid #13DD64;
}

.spfp-members-search-card-photo {
	height: 240px;
	overflow: hidden;
}

.spfp-members-search-card-photo img,
.spfp-members-search-card-photo svg.spfp-members-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Padding 32px dookoła treści karty (imię/nazwisko + przycisk), tak samo
   jak .spfp-members-tile-body w kafelkach "Linki" — spójny odstęp od
   krawędzi karty niezależnie od typu kafelka. */
.spfp-members-search-card-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	flex: 1;
}

/* !important: patrz komentarz przy .spfp-members-tile-body h3 — ta sama
   reguła motywu Sydney o wyższej specyficzności (margin-top: 1.2em na
   .entry-content h3), która inaczej wygrywa z tą klasą. */
.spfp-members-search-card-name {
	margin: 0 !important;
	font-size: 24px;
	line-height: 32px;
}

/* Przycisk "Przejdź" — ten sam styl co .spfp-members-tile-button (kafelki
   "Linki") i .spfp-members-edit-button ("Edytuj"): .spfp-members-btn +
   te same wymiary/font, patrz markup w class-spfp-search.php. Inset od
   krawędzi karty daje teraz padding na .spfp-members-search-card-body,
   margin-top: auto z klasy bazowej zostaje nietknięty — przypina
   przycisk do dołu karty. */
.spfp-members-search-card .spfp-members-tile-button {
	align-self: flex-start;
}

.spfp-members-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 2rem 0;
	padding: 0;
}

.spfp-members-pagination a,
.spfp-members-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid #000;
	text-decoration: none;
	color: #222;
}

.spfp-members-pagination .current {
	background: #222;
	color: #fff;
}

/* Responsywność podstawowa */
@media (max-width: 600px) {
	.spfp-members-profile-photo img,
	.spfp-members-profile-photo svg.spfp-members-placeholder {
		width: 120px;
		height: 120px;
	}

	.spfp-members-subheader {
		flex-direction: column;
		align-items: flex-start;
		height: auto;
		gap: 1rem;
	}

	.spfp-members-subheader-text {
		flex-basis: auto;
		margin-left: 32px;
	}

	/* Odstęp między sekcjami (.spfp-members-section-gap) zmniejszony na mobile. */
	.spfp-members-section-gap {
		margin-top: 56px;
	}

	.spfp-members-section-heading {
		margin-top: 56px;
	}

	/* .page-wrap (motyw Sydney) ma padding-top: 83px na każdej szerokości —
	   na mobile zmniejszamy na tej jednej stronie, bez edycji pliku motywu. */
	.page-wrap:has(.spfp-members-dashboard) {
		padding-top: 53px;
	}

	/* Ten sam zabieg co wyżej, na stronie wyszukiwarki — 56px nad "Znajdź
	   Projektanta", tak jak w Edycji profilu (.spfp-members-section-heading/
	   .spfp-members-section-gap mają ten sam mobilny odstęp 56px). */
	.page-wrap:has(.spfp-members-search-page) {
		padding-top: 56px;
	}

	/* Ten sam zabieg, na stronie projektanta. */
	.page-wrap:has(.spfp-members-single-projektant) {
		padding-top: 56px;
	}

	.spfp-members-tile-grid {
		grid-template-columns: 1fr;
	}

	.spfp-members-fieldset {
		padding: 1.25rem;
	}

	.spfp-members-file-row {
		flex-direction: column;
	}

	.spfp-members-field {
		grid-template-columns: 1fr;
	}

	.spfp-members-field > label {
		padding-top: 0;
	}

	.spfp-members-partner-logo {
		height: 40px;
	}

	.spfp-members-partners-logos {
		gap: 1.5rem;
	}

	.spfp-members-context-public .spfp-members-profile-header {
		flex-direction: column;
	}

	.spfp-members-context-public .spfp-members-profile-header-tags,
	.spfp-members-context-public .spfp-members-specializations {
		justify-content: flex-start;
		max-width: none;
	}

	.spfp-members-context-public .spfp-members-profile-divider {
		margin: 56px 0;
	}

	.spfp-members-context-public .spfp-members-profile-name {
		line-height: 36px !important;
	}

	.spfp-members-context-public .spfp-members-profile-main {
		flex-direction: column;
		margin-bottom: 56px;
	}

	.spfp-members-context-public .spfp-members-profile-photo {
		flex-basis: auto;
		width: 100%;
		max-width: 280px;
	}

	.spfp-members-tile-page-title {
		font-size: 2rem !important;
	}

	.spfp-members-tile-page-main {
		flex-direction: column;
	}

	.spfp-members-tile-page-photo {
		flex-basis: auto;
		width: 100%;
		max-width: 280px;
	}

	.spfp-members-context-public .spfp-members-portfolio {
		column-count: 1;
	}

	/* Mniejsza strzałka i tekst na mobile — wspólne dla obu stron (patrz
	   komentarz przy .spfp-members-profile-nav wyżej). */
	.spfp-members-profile-nav-arrow {
		width: 36px;
		height: 20px;
	}

	.spfp-members-profile-nav-name {
		font-size: 12px;
		line-height: 20px;
	}

	.spfp-members-search-results {
		grid-template-columns: 1fr;
	}

	/* Ikonka nad tekstem, wycentrowana (zamiast obok tekstu jak na desktopie)
	   — tekst zostaje wyrównany do lewej, nie centrujemy go. */
	.spfp-members-search-intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.spfp-members-search-intro-icon {
		align-self: center;
		margin-bottom: 32px;
	}

	.spfp-members-search-filters .spfp-members-section-title {
		margin-bottom: 16px !important;
	}

	.spfp-members-search-tags {
		margin-bottom: 16px;
	}

	.spfp-members-breadcrumb {
		margin-top: 56px;
	}

	/* Przycisk "Szukaj" tylko z ikoną (bez tekstu) na mobile — kwadratowy
	   padding zamiast desktopowego padding-left:16px myślanego pod tekst
	   obok ikony. */
	.spfp-members-search-submit-label {
		display: none;
	}

	.spfp-members-search-submit {
		padding: 0.6rem 0.9rem;
	}

	/* "Wyczyść filtry" pod inputem/przyciskiem Szukaj, nie obok nich —
	   .spfp-members-search-input-group zajmuje całą szerokość wiersza jako
	   pierwszy element w kolumnie, przycisk "Wyczyść filtry" ląduje pod nim
	   z własną, naturalną szerokością (bez flex-grow/stretch). */
	.spfp-members-search-text-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.spfp-members-search-input-group {
		width: 100%;
	}

	.spfp-members-search-clear {
		flex: 0 0 auto;
		margin-left: 0;
		margin-top: 16px;
	}
}

@media (max-width: 900px) and (min-width: 601px) {
	.spfp-members-search-results {
		grid-template-columns: repeat(2, 1fr);
	}
}