/* ==========================================================================
   BAURAD - Architekturprojekte (komponent Architekci, czesc frontowa)
   Style wylacznie dla strony projektow: hero z wyszukiwarka, polecane projekty,
   featureds, panel filtrow, siatka projektow, paginacja, teasery.
   Bazujemy na tokenach (css/tokens.css) i klasach frameworka
   (css/general.css: .br-container, .br-hero, .br-card, .br-btn, .br-chip,
   .br-field, .br-icon, .br-meta, .br-display...), dlatego tutaj jest tylko to,
   czego framework nie ma (prefiks br-arch-*).
   ========================================================================== */

/* --- Wspolny rytm sekcji ------------------------------------------------- */
.br-arch > section {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-4);
}
/* Hero to baner od krawedzi do krawedzi z tlem (makieta: sekcja na 100%
   szerokosci). Wieksza specyficznosc niz regula kontenera powyzej. */
.br-arch > .br-hero.br-arch-hero {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	/* Hero NIE przycina tresci: lista podpowiedzi wyszukiwarki
	   (.br-arch-suggest, position: absolute pod polem) wystaje poza jego dolna
	   krawedz i byla ucinana przez `overflow: hidden` — takze z reguly
	   frameworka `general.css` `.br-hero` (nizsza specyficznosc niz ta regula).
	   Warstwy tla przycina ich wlasne opakowanie .br-arch-hero__bg. */
	overflow: visible;
}

/* --- HERO: baner na pelna szerokosc + wyszukiwarka ----------------------- */
/* Rytm pionowy hero trzyma WYLACZNIE .br-hero__inner (framework:
   6.5rem gora / 7.5rem dol; na desktopie dol nadpisany do 5rem jak w makiecie
   liste.html). Sekcja NIE doklada wlasnego paddingu — poprzednio sumowalo sie
   to z paddingiem .br-hero__inner (104+104 px nad trescia, 120+72 px pod
   wyszukiwarka) i hero byl o 216 px wyzszy od makiety. */
.br-arch-hero {
	position: relative;
	background-color: var(--color-paper);
	padding: 0;
}
/* Opakowanie dekoracyjnych warstw hero (obraz parallax + dolne przejscie w tlo).
   Tylko ono przycina zawartosc: obraz ma top:-10%/height:120% (zapas na
   translate3d z parallaxu), wiec musi byc przyciety do granic hero. */
.br-arch-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
/* Warstwa obrazu banera (parallax jak w makiecie). Nadmiar 10% u gory i 20%
   wysokosci daje zapas na przesuniecie translate3d(0, scrollY*0.14, 0). */
.br-arch-hero__img {
	position: absolute;
	left: 0;
	right: 0;
	top: -10%;
	height: 120%;
	z-index: 0;
	background-position: 62% 42%;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
	pointer-events: none;
}
/* Dolne przejscie w tlo tresci (makieta: .br-hero-fade, wys. 12.5rem). */
.br-arch-hero__veil {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 12.5rem;
	background: linear-gradient(0deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.3) 45%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}
.br-arch-hero__inner { position: relative; z-index: 2; }
/* Makieta (theme/baurad/pages/architekten/liste.html): pod trescia hero zostaje
   --space-10 (5rem = 80px); framework daje 7.5rem. Na waskich ekranach
   (<=864px) zostaje rytm frameworka: 4rem gora / 2.5rem dol. */
@media (min-width: 865px){
	.br-arch-hero__inner { padding-bottom: var(--space-10); }
}
.br-arch-hero__eyebrow { margin-bottom: var(--space-3); color: var(--color-ink-2); }
.br-arch-hero__title {
	font-size: var(--text-hero);
	line-height: var(--text-hero-lh);
	letter-spacing: -0.025em;
	max-width: 39rem;
	margin-bottom: var(--space-3);
	text-wrap: pretty;
}
.br-arch-hero__lead {
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	color: var(--color-ink-2);
	max-width: 34rem;
	margin: 0;
	text-wrap: pretty;
}
/* Mobile (makieta: @media max-width 864px): baner przestaje byc tlem —
   zdjecie schodzi POD tresc hero jako blok 16:10 (order 2), a tresc wraz
   z wyszukiwarka zostaje na gorze (order 1). Hero dostaje tlo strony i rytm
   pionowy z makiety (2.5rem gora / 3rem dol), a wewnetrzny kontener tylko
   padding boczny. Parallax (JS: translate3d) jest na mobile wylaczony.
   Selektor :not(.br-reg-hero) zostawia nietknieta strone rejestracji
   architektow, ktora uzywa tych samych klas i ma wlasny uklad mobilny. */
@media (max-width: 864px) {
	.br-arch > .br-hero.br-arch-hero:not(.br-reg-hero) {
		display: flex;
		flex-direction: column;
		background: var(--color-bg);
		padding: var(--space-5) 0 var(--space-6);
	}
	.br-arch-hero:not(.br-reg-hero) .br-arch-hero__bg {
		position: relative;
		inset: auto;
		order: 2;
		width: 100%;
		aspect-ratio: 16 / 10;
		margin-top: var(--space-5);
	}
	.br-arch-hero:not(.br-reg-hero) .br-arch-hero__img {
		position: relative;
		top: 0;
		left: auto;
		right: auto;
		width: 100%;
		height: 100%;
		transform: none !important;
	}
	.br-arch-hero:not(.br-reg-hero) .br-arch-hero__veil { display: none; }
	.br-arch-hero:not(.br-reg-hero) > .br-hero__inner {
		order: 1;
		width: 100%;
		padding: 0 var(--space-4);
	}
	.br-arch-hero:not(.br-reg-hero) .br-arch-hero__title { font-size: var(--text-h2); }
	.br-arch-hero:not(.br-reg-hero) .br-arch-search { margin-top: var(--space-4); }
}

/* --- Wyszukiwarka w hero ------------------------------------------------- */
.br-arch-search { position: relative; max-width: 62.5rem; margin: var(--space-12) auto 0; }
.br-arch-search__field {
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-search);
	padding: var(--space-15) var(--space-15) var(--space-15) var(--space-4);
}
.br-arch-search__icon { display: inline-flex; flex-shrink: 0; }
.br-arch-search__icon .br-icon { opacity: 0.7; }
.br-arch-search__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-family: var(--font-ui);
	font-size: var(--text-body-lg);
	color: var(--color-ink);
	padding: var(--space-2) 0;
}
.br-arch-search__input:focus-visible { outline: none; }
.br-arch-search__clear {
	border: none;
	background: none;
	color: var(--color-ink-3);
	font-size: var(--text-h3);
	line-height: 1;
	padding: var(--space-1) var(--space-05);
}
.br-arch-search__clear:hover { color: var(--color-ink); }
.br-arch-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: var(--btn-height);
	border: none;
	border-radius: var(--radius-pill);
	background: var(--color-action);
	color: var(--color-bg);
	flex-shrink: 0;
	transition: background 0.15s ease;
}
.br-arch-search__submit:hover { background: var(--color-action-hover); }
.br-arch-search__submit .br-icon { filter: brightness(0) invert(1); }

/* --- Podpowiedzi wyszukiwarki ------------------------------------------- */
.br-arch-suggest {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 30;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-dropdown);
	overflow: hidden;
}
.br-arch-suggest__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-2) var(--space-25);
	border: 0;
	border-bottom: 1px solid var(--color-surface);
	background: none;
	text-align: left;
	font-family: var(--font-ui);
	font-size: var(--text-body);
	color: var(--color-ink);
	cursor: pointer;
}
.br-arch-suggest__item:hover { background: var(--color-surface); }
.br-arch-suggest__kind {
	font-size: var(--text-badge);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	min-width: 4.5rem;
}
.br-arch-suggest__label { color: var(--color-ink); font-weight: 600; }

/* --- Polecane projekty (karuzela nad listą) ----------------------------- */
.br-arch-promo { margin-top: 4.5rem; }
.br-arch-promo__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-bottom: var(--space-25);
}
.br-arch-promo__titles {
	display: flex;
	align-items: baseline;
	gap: var(--space-15);
	flex-wrap: wrap;
}
.br-arch-promo__nav { display: flex; gap: var(--space-15); }
.br-arch-promo__arrow {
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-line);
	background: var(--color-bg);
	color: var(--color-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.br-arch-promo__arrow:hover { border-color: var(--color-action); color: var(--color-action); }
.br-arch-promo__arrow:disabled { opacity: 0.4; color: var(--color-disabled); cursor: default; border-color: var(--color-line); }
.br-arch-promo__viewport { overflow: hidden; }
.br-arch-promo__track {
	width: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--space-3)) / 3);
	gap: var(--space-3);
	margin-left: 0;
	transition: margin-left 0.35s cubic-bezier(.4,0,.2,1);
}
.br-arch-promo__track > * { min-width: 0; }

/* --- Pasek zaufania (makieta: „VERTRAUENS-LEISTE") ---------------------- */
/* Trzy kafle pod polecanymi projektami, nad nagłówkiem listy: ikona, wartosc
   (duza liczba albo krotki tekst) i etykieta. Tresc i ikony z ustawien
   komponentu (Architekci → Ustawienia → „Pasek zaufania"), per jezyk. */
.br-arch-trust { margin-top: var(--space-7); }
.br-trust-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-25);
}
.br-trust-grid > * { min-width: 0; }
.br-trust-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	padding: var(--space-3);
}
.br-trust-card__icon {
	display: inline-flex;
	align-items: center;
	color: var(--color-action);
}
.br-trust-card__value {
	font-size: var(--text-h2);
	font-weight: 700;
	line-height: 1;
	color: var(--color-ink);
}
/* Kafel z tekstem zamiast liczby (makieta: „Direktkontakt" / „Bezposredni kontakt"). */
.br-trust-card--text .br-trust-card__value {
	font-size: var(--text-body-lg);
	line-height: var(--text-body-lg-lh);
}
.br-trust-card__label {
	font-size: var(--text-caption);
	color: var(--color-ink-2);
}

/* --- Featureds (kafle z ikonami) ---------------------------------------- */
.br-arch-feat { margin-top: var(--space-7); }
.br-arch-feat__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-25);
}
.br-arch-feat__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	padding: var(--space-3);
	min-width: 0;
}
.br-arch-feat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-action);
}
.br-arch-feat__title {
	font-size: var(--text-body-lg);
	font-weight: 700;
	line-height: var(--text-body-lg-lh);
	color: var(--color-ink);
	text-decoration: none;
}
.br-arch-feat__title:hover { color: var(--color-action); }
.br-arch-feat__text {
	font-size: var(--text-caption);
	line-height: var(--text-caption-lh);
	color: var(--color-ink-2);
	margin: 0;
}

/* --- Nagłówek sekcji listy ---------------------------------------------- */
.br-arch-sechead { margin-top: 5.5rem; }
.br-arch-sechead__title { margin: 0; }
.br-arch-sechead__lead {
	margin: var(--space-25) 0 0;
	max-width: 39rem;
	text-wrap: pretty;
}
/* Mobile: makieta daje temu tytulowi stala --text-h3 (plynna --text-display
   nie zmniejsza sie wystarczajaco i lamie slowa na waskich ekranach). */
@media (max-width: 640px) {
	.br-arch-sechead .br-arch-sechead__title {
		font-size: var(--text-h3);
		line-height: 1.04;
		letter-spacing: -0.02em;
	}
}

/* --- Panel filtrów ------------------------------------------------------ */
.br-arch-filters { margin-top: var(--space-4); }
.br-arch-filters__bar {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	padding: var(--space-2) var(--space-25);
	background: var(--color-surface);
}
.br-arch-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-15);
}
.br-arch-filters__divider {
	height: 1px;
	background: var(--color-bg);
	margin: var(--space-2) 0;
}
.br-arch-filters__spacer { flex: 1; min-width: 0.75rem; }
/* Pionowy separator między grupami kontrolek w pasku filtrów (makieta). */
.br-arch-sep {
	width: 0.0625rem;
	height: 1.5rem;
	background: var(--color-line);
	margin: 0 var(--space-05);
	flex-shrink: 0;
}
.br-arch-label {
	font-size: var(--text-badge);
	font-weight: 700;
	letter-spacing: var(--text-label-track);
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-right: var(--space-05);
}
.br-arch-label--push { margin-left: var(--space-2); }

.br-arch-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 2.5rem;
	padding: 0 var(--space-15);
	border-radius: var(--radius-control);
	border: 1px solid var(--color-line);
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: 600;
	white-space: nowrap;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.br-arch-chip:hover { border-color: var(--color-action); }
.br-arch-chip.is-active {
	border-color: var(--color-action);
	background: var(--color-action-tint);
	color: var(--color-action-text);
}
.br-arch-chip__svg { flex-shrink: 0; }
.br-arch-chip--pill {
	height: var(--btn-height-sm);
	padding: 0 var(--space-2);
	border-radius: var(--radius-pill);
}

/* --- Pola wyboru w pasku filtrów (pigułki) ------------------------------ */
.br-arch-select-wrap { position: relative; display: inline-flex; align-items: center; }
.br-arch-select {
	height: 2rem;
	padding: 0 var(--space-4) 0 var(--space-2);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-line);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: 600;
	color: var(--color-ink);
	background-color: var(--color-bg);
	-webkit-appearance: none;
	appearance: none;
	min-width: 10.5rem;
}
.br-arch-select--pill { border-radius: var(--radius-pill); min-width: 9rem; }
.br-arch-select--block { width: 100%; min-width: 0; height: 2.5rem; border-radius: var(--radius-control); }
.br-arch-select-wrap::after {
	content: "";
	position: absolute;
	right: 0.75rem;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	transform: translateY(-60%) rotate(45deg);
	border-right: 1.5px solid var(--color-ink-2);
	border-bottom: 1.5px solid var(--color-ink-2);
	pointer-events: none;
}

/* --- Suwak powierzchni (dwa uchwyty) ----------------------------------- */
.br-arch-area { width: 14rem; flex-shrink: 0; }
/* Miarka nad szyną: równo rozłożone wartości (makieta). Odsad 0.5rem z boków
   wyrównuje skrajne liczby z zakresem ruchu uchwytów. */
.br-arch-area__ticks {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-badge);
	color: var(--color-ink-3);
	padding: 0 var(--space-1);
}
.br-arch-area__rail {
	position: relative;
	height: 1.25rem;
}
.br-arch-area__rail::before {
	content: "";
	position: absolute;
	left: 0.5rem;
	right: 0.5rem;
	top: 0.5rem;
	height: 0.25rem;
	border-radius: var(--radius-pill);
	background: var(--color-line);
}
.br-arch-area__fill {
	position: absolute;
	left: 0.5rem;
	right: 0.5rem;
	top: 0.5rem;
	height: 0.25rem;
	border-radius: var(--radius-pill);
	background: var(--color-ink-2);
}
.br-arch-range {
	position: absolute;
	left: 0;
	width: 100%;
	top: 0;
	margin: 0;
	height: 1.25rem;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}
.br-arch-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--color-bg);
	border: 2px solid var(--color-ink-2);
	cursor: pointer;
	pointer-events: auto;
}
.br-arch-range::-moz-range-thumb {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--color-bg);
	border: 2px solid var(--color-ink-2);
	cursor: pointer;
	pointer-events: auto;
}
.br-arch-area__value {
	font-size: var(--text-badge);
	font-weight: 600;
	color: var(--color-ink-2);
	text-align: center;
}

/* --- Przycisk „Więcej filtrów" ----------------------------------------- */
.br-arch-more {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	height: 2rem;
	padding: 0 var(--space-2);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-line);
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: 600;
	transition: border-color 0.15s ease;
}
.br-arch-more:hover { border-color: var(--color-action); }
.br-arch-more.is-open { border-color: var(--color-action); color: var(--color-action-text); background: var(--color-action-tint); }
.br-arch-more__count {
	background: var(--color-action);
	color: var(--color-bg);
	font-size: var(--text-badge);
	font-weight: 700;
	min-width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-05);
}
/* Licznik jest przełączany atrybutem `hidden` (JS: updateExtraCount() →
   badge.hidden = count === 0). Autorowy `display` wygrywa z UA `[hidden]`,
   więc bez tej reguły pusty znacznik widać jako pomarańczowe kółko przy
   „Więcej filtrów" (makieta pokazuje licznik tylko, gdy są aktywne filtry
   z panelu). Ten sam wzorzec co .br-arch-loader[hidden]. */
.br-arch-more__count[hidden] { display: none; }
.br-arch-more__chevron { display: inline-flex; transition: transform 0.2s ease; }
.br-arch-more.is-open .br-arch-more__chevron { transform: rotate(180deg); }

/* --- Rozwijany panel (Weitere Filter) ---------------------------------- */
.br-arch-filters__panel {
	position: relative;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	background: var(--color-bg);
	box-shadow: var(--shadow-panel);
	padding: var(--space-3);
	margin-top: var(--space-15);
}
.br-arch-filters__panel[hidden] { display: none; }
.br-arch-filters__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-line);
	background: var(--color-bg);
	color: var(--color-ink-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.br-arch-filters__close:hover { border-color: var(--color-action); color: var(--color-action); }
.br-arch-panel-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3) var(--space-5);
	align-items: start;
	padding-right: var(--space-5);
}
.br-arch-panel__group {
	font-size: var(--text-badge);
	font-weight: 700;
	letter-spacing: var(--text-label-track);
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-bottom: var(--space-15);
}
.br-arch-panel__hint {
	font-size: var(--text-badge);
	color: var(--color-ink-2);
	margin-bottom: var(--space-1);
}
.br-arch-panel__hint--top { margin-top: var(--space-25); }
.br-arch-panel__chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.br-arch-panel__plot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-15); }
.br-arch-plot {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--text-badge);
	color: var(--color-ink-3);
}
.br-arch-input {
	width: 100%;
	height: 2.5rem;
	padding: 0 var(--space-15);
	border-radius: var(--radius-control);
	border: 1px solid var(--color-line);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	background: var(--color-bg);
	color: var(--color-ink);
}
/* Pola wielolinijkowe (np. „Wiadomość” w panelu kontaktowym) — ten sam
   wygląd co .br-arch-input; bez tej reguły textarea zostawała z domyślną
   (ciemniejszą) ramką przeglądarki. */
.br-arch-textarea {
	width: 100%;
	min-height: 7rem;
	padding: var(--space-15);
	border-radius: var(--radius-control);
	border: 1px solid var(--color-line);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	background: var(--color-bg);
	color: var(--color-ink);
	resize: vertical;
}
.br-arch-input:focus-visible,
.br-arch-textarea:focus-visible {
	border-color: var(--focus-field-border);
	outline: none;
}
.br-arch-filters__status {
	margin-top: var(--space-3);
	padding-top: var(--space-25);
	border-top: 1px solid var(--color-surface);
}

/* --- Wyniki: chipy filtrów, licznik + sortowanie, siatka ---------------- */
.br-arch-results { margin-top: var(--space-7); padding-bottom: var(--space-10); }
.br-arch-results__inner { position: relative; min-height: 6rem; }
.br-arch-results__inner.is-loading { opacity: 0.55; pointer-events: none; }

/* Preloader na czas odpytywania bazy (JS: setLoading() przygasza wyniki i
   pokazuje modal [data-arch-loader] z backdropem). */
@keyframes br-arch-spin { to { transform: rotate(360deg); } }

.br-arch-loader {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-page);
	background: rgba(43, 38, 34, 0.45);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.br-arch-loader[hidden] { display: none; }
.br-arch-loader__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	width: min(22rem, 100%);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-surface);
	background: var(--color-bg);
	box-shadow: var(--shadow-overlay);
	text-align: center;
}
.br-arch-loader__spinner {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 3px solid var(--color-line);
	border-top-color: var(--color-action);
	animation: br-arch-spin 0.8s linear infinite;
}
.br-arch-loader__text {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	font-weight: 600;
	color: var(--color-ink);
}
@media (prefers-reduced-motion: reduce) {
	.br-arch-loader__spinner { animation: none; }
}

.br-arch-active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-15);
	margin-bottom: var(--space-3);
}
.br-arch-active[hidden] { display: none; }
.br-arch-chip--active-filter {
	border-color: var(--color-action);
	background: var(--color-action-tint);
	color: var(--color-action-text);
	padding: var(--space-1) var(--space-2);
	height: auto;
	border-radius: var(--radius-pill);
	font-size: var(--text-caption);
	font-weight: 600;
}
.br-arch-chip--active-filter:hover { background: var(--color-selection); }
.br-arch-reset {
	border: none;
	background: none;
	color: var(--color-ink-2);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: var(--space-05) var(--space-1);
}
.br-arch-reset:hover { color: var(--color-action); }

.br-arch-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-15);
	margin-bottom: var(--space-4);
}
.br-arch-bar__count { font-size: var(--text-body-sm); color: var(--color-ink-2); }
.br-arch-bar__sort { display: flex; align-items: center; gap: var(--space-15); }
.br-arch-bar__sort-label { font-size: var(--text-caption); color: var(--color-ink-2); }

.br-arch-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
}
.br-arch-grid > * { min-width: 0; }

/* --- Karta projektu (rozbudowa .br-card z frameworka) ------------------- */
.br-arch-card__media { aspect-ratio: 4 / 3; }
.br-arch-card__badge {
	font-size: var(--text-badge);
	font-weight: 600;
	padding: 0.3125rem 0.75rem;
	border: 1px solid transparent;
}
.br-arch-card__badge.is-ad {
	background: rgba(255,255,255,0.92);
	border-color: var(--color-disabled);
	color: var(--color-ink-2);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.625rem;
}
.br-arch-card__body { gap: var(--space-15); }
.br-arch-card__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-1);
	justify-content: space-between;
}
.br-arch-card__title {
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: var(--text-body-lg-lh);
}
.br-arch-card__status {
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	padding: 0.125rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 0.875rem;
	color: var(--color-ink-2);
}
.br-arch-card__meta { gap: var(--space-25); }
.br-arch-card__price { font-size: var(--text-body); font-weight: 600; }
.br-arch-empty { font-size: var(--text-body); color: var(--color-ink-2); margin: 0; }

/* --- Paginacja ---------------------------------------------------------- */
.br-arch-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-25);
	flex-wrap: wrap;
	margin-top: var(--space-7);
}
.br-arch-pager__range { font-size: var(--text-body); color: var(--color-ink-2); }
.br-arch-pager__nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.br-arch-pager__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 3rem;
	padding: 0 var(--space-25);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	font-family: var(--font-ui);
	font-size: var(--text-body);
	font-weight: 500;
	color: var(--color-ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.br-arch-pager__btn:hover { border-color: var(--color-action); color: var(--color-ink); }
.br-arch-pager__btn.is-disabled { opacity: 0.45; pointer-events: none; }
.br-arch-pager__num {
	min-width: 3rem;
	height: 3rem;
	padding: 0 var(--space-15);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-ink);
	font-family: var(--font-ui);
	font-size: var(--text-body);
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.br-arch-pager__num:hover { background: var(--color-surface); color: var(--color-ink); }
.br-arch-pager__num.is-active { background: var(--color-action); color: var(--color-bg); }

/* --- Teasery: „To może Cię również zainteresować" ----------------------- */
.br-arch-teaser { padding-bottom: 5.5rem; }
.br-arch-teaser__label {
	font-size: var(--text-badge);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-bottom: var(--space-3);
}
.br-arch-teaser__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
}
.br-arch-teaser__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-decoration: none;
	color: var(--color-ink);
	transition: transform 0.2s ease;
}
.br-arch-teaser__card:hover { transform: translateY(-4px); color: var(--color-ink); }
.br-arch-teaser__media {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-card-lg);
	overflow: hidden;
	background-color: var(--color-surface);
	background-size: cover;
	background-position: center;
	margin-bottom: var(--space-25);
	transition: box-shadow 0.2s ease;
}
.br-arch-teaser__card:hover .br-arch-teaser__media { box-shadow: var(--shadow-card-hover); }
.br-arch-teaser__meta { display: flex; align-items: center; gap: var(--space-15); margin-bottom: var(--space-1); }
.br-arch-teaser__tag { font-size: var(--text-caption); font-weight: 600; color: var(--color-ink-2); }
.br-arch-teaser__title {
	font-family: var(--font-serif);
	font-size: var(--text-teaser-title);
	font-weight: 600;
	line-height: var(--text-teaser-title-lh);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-1);
	text-wrap: pretty;
}
.br-arch-teaser__sub { font-size: var(--text-caption); color: var(--color-ink-3); }

/* --- Sekcja modułów (Pozostałe moduły BAURAD + CTA + newsletter) -------- */
/* Pasek tła od krawędzi do krawędzi (makieta: `background: --color-surface`
   + hairline na całej szerokości, treść dopiero w kontenerze). Wyższa
   specyficzność niż reguła kontenera `.br-arch > section` powyżej — bez tego
   tło kończyło się na --container (1126 px), a kontener wewnętrzny dostawał
   dodatkowy padding sekcji. Ten sam wzorzec co `.br-hero.br-arch-hero`. */
.br-arch > .br-arch-modules {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
.br-arch-modules {
	background: var(--color-surface);
	border-top: 1px solid var(--color-line);
}
.br-arch-modules__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: 4.5rem var(--space-4) 5.5rem;
}
.br-arch-modules .module { margin: 0; }
.br-arch-modules__inner > * + * { margin-top: var(--space-6); }
/* Odstęp label → kafle trzyma margin-bottom labela (makieta), a nie reguła
   odstępów między modułami. */
.br-arch-modules__inner > .br-arch-teaser__label + * { margin-top: 0; }

/* --- Responsywność ------------------------------------------------------ */

/* ========================================================================
   Strona szczegółów projektu (Architekturprojekt Detail)
   ====================================================================== */
.br-arch-project > section {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-4);
}
.br-arch-project > section + section { margin-top: var(--space-5); }

/* --- Powrót + H1 + galeria --------------------------------------------- */
.br-arch-backrow { padding-top: var(--space-5) !important; }
.br-arch-back {
	font-size: var(--text-caption);
	color: var(--color-ink-2);
	text-decoration: none;
	transition: color 0.15s ease;
}
.br-arch-back:hover { color: var(--color-action); }

.br-arch-phero { padding-top: var(--space-25) !important; }
/* Makieta: miedzy wierszem „Powrot” a H1 projektu nie ma marginesu sekcji —
   odstep trzyma wylacznie padding-top hero (space-25), a nie dodatkowe
   `section + section` (space-5). Bez tego na mobile i desktopie bylo o 40 px
   za duzo. */
.br-arch-project > .br-arch-backrow + .br-arch-phero { margin-top: 0; }
.br-arch-phero__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-1);
	justify-content: space-between;
	margin-bottom: var(--space-25);
}
.br-arch-phero__title { font-size: var(--text-h1); font-weight: 700; line-height: var(--text-h1-lh); margin: 0; }
.br-arch-phero__status {
	display: inline-block;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	padding: 2px 8px;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 0.875rem;
	color: var(--color-ink-2);
}

.br-arch-gallerytabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); flex-wrap: wrap; }
.br-arch-gallerytab {
	border: none;
	background: transparent;
	color: var(--color-ink);
	border-radius: var(--radius-control);
	padding: var(--space-15) var(--space-25);
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.br-arch-gallerytab.is-active { background: var(--color-ink); color: var(--color-bg); }

.br-arch-gallery {
	position: relative;
	aspect-ratio: 21 / 9;
	border-radius: var(--radius-card-lg);
	overflow: hidden;
	background-color: var(--color-surface);
}
.br-arch-gallery__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.br-arch-gallery__media--empty,
.br-arch-gallery__media.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono, monospace);
	font-size: var(--text-caption);
	color: var(--color-ink-3);
}
.br-arch-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	border: none;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-ink);
	font-size: var(--text-body-lg);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: background 0.15s ease, transform 0.15s ease;
}
.br-arch-gallery__nav:hover { background: var(--color-bg); transform: translateY(-50%) scale(1.06); }
.br-arch-gallery__nav--prev { left: 1.25rem; }
.br-arch-gallery__nav--next { right: 1.25rem; }
.br-arch-gallery__nav[hidden] { display: none; }
.br-arch-gallery__counter {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--radius-pill);
	padding: 4px 12px;
	font-size: var(--text-caption);
	font-weight: 600;
	color: var(--color-ink-2);
}
.br-arch-gallery__counter[hidden] { display: none; }
.br-arch-gallery__dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--space-1);
}
.br-arch-gallery__dot {
	border: none;
	height: 8px;
	width: 8px;
	padding: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: width 0.15s ease, background 0.15s ease;
}
.br-arch-gallery__dot.is-active { background: var(--color-action); width: 24px; }

/* --- Dane podstawowe (kafelki) ----------------------------------------- */
.br-arch-pstats__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	padding: var(--space-3) var(--space-1);
	gap: var(--space-1);
}
.br-arch-pstats__grid > * { min-width: 0; }
.br-arch-pstats__grid > *:not(:first-child) { border-left: 1px solid var(--color-line); }
.br-arch-pstat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	padding: 0 var(--space-1);
	text-align: center;
}
.br-arch-pstat .br-icon { color: var(--color-action); }
.br-arch-pstat__value { font-size: var(--text-body); font-weight: 700; }
.br-arch-pstat__label { font-size: var(--text-badge); color: var(--color-ink-2); }
@media (max-width: 1024px) {
	.br-arch-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-arch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-arch-teaser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-arch-promo__track { grid-auto-columns: calc((100% - var(--space-3)) / 2); }
	.br-arch-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	/* Hero: odstep pionowy trzyma .br-hero__inner (4rem gora / 2.5rem dol wg
	   general.css @media max-width:864px) — sekcja bez wlasnego paddingu. */
	.br-arch-hero__img { background-position: 68% 60%; }
	.br-arch-hero__veil { height: 8rem; }
	.br-arch-hero__title { font-size: var(--text-h2); }
	.br-arch-search { margin-top: var(--space-4); }
	.br-arch-feat__grid,
	.br-arch-grid,
	.br-arch-teaser__grid { grid-template-columns: minmax(0, 1fr); }
	/* Pasek zaufania: jedna kolumna i mniejszy odstep (makieta). */
	.br-trust-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
	.br-arch-promo__track { grid-auto-columns: 88%; }
	.br-arch-panel-grid { grid-template-columns: minmax(0, 1fr); }
	.br-arch-area { width: 100%; }
	.br-arch-filters__bar { padding: var(--space-2) var(--space-15); }
	.br-arch-pager { justify-content: center; }
}




/* --- Przełącznik konstrukcji + architekt -------------------------------- */
.br-arch-pbauart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-25);
}
.br-arch-pbauart__toggle { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.br-arch-bauart { display: flex; border: 1px solid var(--color-line); border-radius: var(--radius-pill); overflow: hidden; }
.br-arch-bauart__btn {
	border: none;
	background: transparent;
	color: var(--color-ink);
	padding: var(--space-15) var(--space-25);
	font-family: var(--font-ui);
	font-size: var(--text-body-sm);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: all 0.15s ease;
}
.br-arch-bauart__btn.is-active { background: var(--color-ink); color: var(--color-bg); }
.br-arch-pbauart__price { font-size: var(--text-h3); font-weight: 700; }

.br-arch-parchitect {
	display: flex;
	align-items: center;
	gap: var(--space-15);
	text-decoration: none;
	color: var(--color-ink);
}
.br-arch-parchitect__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.br-arch-parchitect__name { display: block; font-size: var(--text-caption); font-weight: 600; }
.br-arch-parchitect__link { font-size: var(--text-badge); color: var(--color-ink-2); text-decoration: underline; }

/* --- Opis --------------------------------------------------------------- */
.br-arch-pdesc { max-width: 56.5rem !important; margin-top: var(--space-7) !important; }
.br-arch-pdesc > *:first-child { margin-top: 0; }
.br-arch-pdesc > *:last-child { margin-bottom: 0; }

/* --- Cechy projektu (featureds) ---------------------------------------- */
.br-arch-pfeat__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-25);
}
.br-arch-pfeat__grid > * { min-width: 0; }
.br-arch-pfeat__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	background: var(--color-surface);
	border-radius: var(--radius-field);
	padding: var(--space-3);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.br-arch-pfeat__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.br-arch-pfeat__icon { color: var(--color-action); }
.br-arch-pfeat__title { font-size: var(--text-body); font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.br-arch-pfeat__text { margin: 0; font-size: var(--text-body-sm); color: var(--color-ink-2); }

/* --- Koszty budowy ------------------------------------------------------ */
.br-arch-pcosts__label {
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: var(--text-nav-track);
	text-transform: uppercase;
	color: var(--color-ink-2);
	margin-bottom: var(--space-25);
}
.br-arch-pcosts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	overflow: hidden;
}
.br-arch-pcost { padding: var(--space-3) var(--space-4); }
.br-arch-pcost:not(:first-child) { border-left: 1px solid var(--color-line); }
.br-arch-pcost__name { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-ink-2); margin-bottom: var(--space-1); }
.br-arch-pcost__value { font-size: var(--text-h3); font-weight: 700; }
.br-arch-pcosts__hint { margin: var(--space-15) 0 0; font-size: var(--text-caption); color: var(--color-ink-3); }
/* --- Elementy dodatkowe + potencjał oszczędności ----------------------- */
.br-arch-pextra {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-25);
}
.br-arch-pextra__card {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	padding: var(--space-3);
}
.br-arch-pextra__title { font-size: var(--text-body); font-weight: 600; margin-bottom: var(--space-2); }
.br-arch-pextra__list { display: flex; flex-direction: column; gap: var(--space-15); }
.br-arch-pextra__item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-body-sm);
	color: var(--color-ink-2);
}
.br-arch-pextra__item .br-icon { flex-shrink: 0; color: var(--color-action); }
.br-arch-pextra__text { font-size: var(--text-body-sm); color: var(--color-ink-2); line-height: var(--text-body-sm-lh); }
.br-arch-pextra__text > *:first-child { margin-top: 0; }
.br-arch-pextra__text > *:last-child { margin-bottom: 0; }

/* --- Załączniki (pobieranie) ------------------------------------------- */
.br-arch-pdownload__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	padding: var(--space-25) var(--space-3);
}
.br-arch-pdownload__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body); font-weight: 600; }
.br-arch-pdownload__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.br-arch-pdownload__item { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-ink-2); }

/* --- Panel kontaktowy „Zapytaj o projekt" ------------------------------ */
.br-arch-request { max-width: var(--container-read) !important; margin-top: 4.5rem !important; }
.br-arch-request__title { margin-bottom: var(--space-25); }
.br-arch-request__hint {
	background: var(--color-surface);
	border-radius: var(--radius-field);
	padding: var(--space-2) var(--space-25);
	font-size: var(--text-caption);
	color: var(--color-ink-2);
	line-height: var(--text-caption-lh);
	margin-bottom: var(--space-3);
}
.br-arch-request__notice {
	border-radius: var(--radius-field);
	padding: var(--space-15) var(--space-25);
	font-size: var(--text-body-sm);
	font-weight: 600;
	margin-bottom: var(--space-2);
}
.br-arch-request__notice--ok { background: var(--color-success-tint); color: var(--color-success); }
.br-arch-request__notice--err { background: var(--color-surface); color: var(--color-danger, #B3261E); }
.br-arch-request__form { display: flex; flex-direction: column; gap: var(--space-2); }
.br-arch-request__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.br-arch-request__grid > * { min-width: 0; }
.br-arch-request__message { display: flex; flex-direction: column; }
.br-arch-request__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-15);
	font-size: var(--text-caption);
	color: var(--color-ink-2);
	line-height: var(--text-caption-lh);
}
.br-arch-request__consent input { margin-top: 0.125rem; flex-shrink: 0; }
.br-arch-request__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* --- Podobne projekty --------------------------------------------------- */
.br-arch-psimilar { margin-top: 5.5rem !important; padding-bottom: var(--space-15x) !important; }
.br-arch-psimilar__label {
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: var(--text-nav-track);
	text-transform: uppercase;
	color: var(--color-ink-2);
	margin-bottom: var(--space-4);
}
.br-arch-psimilar__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.br-arch-psimilar__grid > * { min-width: 0; }
.br-arch-psimilar__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--color-ink);
	transition: transform 0.2s ease;
}
.br-arch-psimilar__card:hover { transform: translateY(-4px); color: var(--color-ink); }
.br-arch-psimilar__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-field);
	overflow: hidden;
	background-color: var(--color-surface);
	background-size: cover;
	background-position: center;
	margin-bottom: var(--space-2);
}
.br-arch-psimilar__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--color-bg);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	padding: 5px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-ink);
}
.br-arch-psimilar__badge.is-ad {
	background: rgba(255, 255, 255, 0.92);
	border-color: var(--color-disabled);
	color: var(--color-ink-2);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
}
.br-arch-psimilar__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-1);
	justify-content: space-between;
	margin-bottom: var(--space-1);
}
.br-arch-psimilar__name { font-size: var(--text-body); font-weight: 600; }
.br-arch-psimilar__status {
	display: inline-block;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	padding: 2px 8px;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 0.875rem;
	color: var(--color-ink-2);
}
.br-arch-psimilar__price { font-size: var(--text-body-sm); font-weight: 600; }

/* --- Responsywność strony projektu ------------------------------------- */
@media (max-width: 1024px) {
	.br-arch-pstats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-2); }
	.br-arch-pstats__grid > * { border-left: none !important; }
	.br-arch-pfeat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-arch-psimilar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.br-arch-gallery { aspect-ratio: 4 / 3; }
	/* Makieta: dwie kolumny kafelkow z pionowym separatorem miedzy nimi
	   (parzyste kafle dostaja border-left, nieparzyste go nie maja). */
	.br-arch-pstats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; column-gap: 0; }
	.br-arch-pstats__grid > * { padding-block: var(--space-25); border-bottom: 1px solid var(--color-line); }
	.br-arch-pstats__grid > *:nth-child(even) { border-left: 1px solid var(--color-line) !important; }
	.br-arch-pstats__grid > *:nth-last-child(-n+2) { border-bottom: none; }
	/* Cechy projektu: na mobile ikona i tytul w jednej linii (makieta). */
	.br-arch-pfeat__item { flex-direction: row; align-items: center; padding: var(--space-25); }
	.br-arch-pfeat__icon { flex-shrink: 0; }
	.br-arch-pfeat__grid,
	.br-arch-pextra,
	.br-arch-pcosts__grid,
	.br-arch-psimilar__grid { grid-template-columns: minmax(0, 1fr); }
	.br-arch-pcost:not(:first-child) { border-left: none; border-top: 1px solid var(--color-line); }
	.br-arch-pbauart { align-items: flex-start; }
	/* Makieta: mniejszy odstep wiersza miedzy grupa toggle a cena (8 px). */
	.br-arch-pbauart__toggle { row-gap: var(--space-1); }
}
/* ==========================================================================
   BAURAD — Rejestracja architektów (strona „Fuer Architekten")
   Sekcje: baner hero, kroki przyjęcia, karty pakietów (+ Premium),
   dwukrokowy formularz ze strefami na pliki.
   Bazujemy na tokenach i klasach frameworka (.br-section, .br-h2, .br-btn,
   .br-muted, .br-form-error, .br-input).
   ========================================================================== */

/* --- Hero rejestracji (makieta „Fuer Architekten\") -----------------------
   Baner na pełną szerokość: zdjęcie po prawej, POZIOME przejście w papier
   (makieta: .br-hero-veil), min. 39rem wysokości, treść wyśrodkowana w pionie.
   Ten sam hero współdzieli strona projektów (.br-arch-hero — zdjęcie pod całym
   tekstem, dolna winieta), dlatego nadpisania są zawężone znacznikiem
   .br-reg-hero i NIE zmieniają tamtej strony.
   Specyficzność: `.br-arch > .br-hero.br-reg-hero` (3 klasy) bije zarówno
   `.br-arch > section`, jak i `.br-arch > .br-hero.br-arch-hero`. */
.br-arch > .br-hero.br-reg-hero {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	overflow: hidden;
}
.br-reg-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 39rem;
	padding: 0;
	background-color: var(--color-paper);
}
/* Zapas obrazu na przesunięcie parallaxu (makieta: top:-18% / height:140%). */
.br-reg-hero .br-arch-hero__img {
	top: -18%;
	height: 140%;
	background-position: 50% 50%;
}
/* Poziome przejście: lewa krawędź to pełny papier (tekst), prawa — zdjęcie.
   Wartości z makiety: 640px / 760px / 980px. */
.br-reg-hero .br-arch-hero__veil {
	top: 0;
	height: auto;
	background: linear-gradient(90deg,
		var(--color-paper) 0,
		var(--color-paper) 40rem,
		rgba(247,243,232,0.92) 47.5rem,
		rgba(247,243,232,0) 61.25rem);
}
.br-reg-hero__copy-wrap {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	align-items: center;
}
.br-reg-hero .br-arch-hero__inner { width: 100%; padding: 6.5rem var(--space-4) 7rem; }

@media (max-width: 1024px){
	/* Parallax wyłączony na wąskich ekranach (makieta). */
	.br-reg-hero .br-arch-hero__img { transform: none !important; }
}
@media (max-width: 864px){
	/* Makieta: zdjęcie schodzi pod treść (blok 4:3), winieta znika. */
	.br-reg-hero { min-height: 0; }
	.br-reg-hero > .br-arch-hero__bg {
		position: relative;
		inset: auto;
		order: 2;
		width: 100%;
		aspect-ratio: 4 / 3;
	}
	.br-reg-hero .br-arch-hero__img {
		top: 0;
		height: 100%;
		background-position: 88% 50%;
	}
	.br-reg-hero .br-arch-hero__veil { display: none; }
	.br-reg-hero__copy-wrap { order: 1; background: var(--color-paper); }
	.br-reg-hero .br-arch-hero__inner { padding: var(--space-7) var(--space-3) var(--space-6); }
}

/* --- Nagłówki sekcji (makieta: rozmiar --text-h1, waga 700) --------------
   Makieta „Fuer Architekten" daje nagłówkom sekcji `font-size: var(--text-h1)`
   (frameworkowa klasa .br-h2 to --text-h2), dlatego tytuły sekcji strony
   rejestracji wyrównujemy do makiety. */
.br-arch-reg .br-h2 {
	font-size: var(--text-h1);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: var(--text-h1-lh);
}

/* --- Sekcja formularza: wyśrodkowana kolumna 62.5rem (makieta) ----------
   Makieta: `max-width: 62.5rem; margin: 0 auto; padding: 96px 32px 120px`,
   a karta wypełnia całą szerokość kolumny (tekst i karta są względem siebie
   wyśrodkowane na stronie). */
.br-arch > .br-reg-formsec {
	max-width: 62.5rem;
	margin-inline: auto;
	padding: var(--space-12) var(--space-4) var(--space-15x);
}

.br-reg-lead { max-width: 40rem; margin-top: var(--space-2); margin-bottom: var(--space-6); }
.br-reg-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* --- Kroki „Jak przebiega przyjęcie" ------------------------------------ */
.br-reg-steps__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}
.br-reg-step {
	background: var(--color-surface);
	border-radius: var(--radius-card-lg);
	padding: var(--space-4) var(--space-3);
}
.br-reg-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: var(--space-25);
	border-radius: var(--radius-pill);
	background: var(--color-ink);
	color: var(--color-bg);
	font-size: var(--text-body-sm);
	font-weight: 700;
}
.br-reg-step__title { font-size: var(--text-body); font-weight: 600; margin: 0 0 var(--space-15); }
.br-reg-step__text { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin: 0; }

/* --- Karty pakietów ----------------------------------------------------- */
.br-reg-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
	margin-top: var(--space-6);
	align-items: stretch;
}
.br-plan {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-surface);
	padding: var(--space-5) var(--space-4);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.br-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-dropdown); }
.br-plan.is-featured { border: 2px solid var(--color-ink); }
.br-plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-15); margin-bottom: var(--space-3); }
.br-plan__name { font-size: var(--text-body); font-weight: 700; letter-spacing: var(--text-nav-track); text-transform: uppercase; }
.br-plan__badge {
	font-size: var(--text-badge);
	font-weight: 600;
	letter-spacing: var(--text-badge-track);
	text-transform: uppercase;
	background: var(--color-ink);
	color: var(--color-bg);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-15);
}
.br-plan__price { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-1); }
.br-plan__amount { font-size: var(--text-h2); font-weight: 700; letter-spacing: var(--text-h2-track); }
.br-plan__per { font-size: var(--text-body); color: var(--color-ink-2); }
.br-plan__note { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin: 0 0 var(--space-3); }
.br-plan__benefits { display: flex; flex-direction: column; gap: var(--space-15); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.br-plan__benefits li { display: flex; align-items: flex-start; gap: var(--space-15); font-size: var(--text-body); line-height: var(--text-body-lh); }
.br-plan__tick {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.0625rem;
	border-radius: var(--radius-pill);
	background: var(--color-action);
	color: var(--color-bg);
	font-size: var(--text-badge);
}
.br-plan__cta { margin-top: auto; width: 100%; }

/* Pasek „early adopter" w sekcji „Zwiększ widoczność" (makieta): ciemny
   panel na --color-ink, biały tekst 1rem/500, pomarańczowa kropka 0.5rem,
   promień --radius-card-lg i padding 1.25rem / 2rem. Następna siatka kart
   nie dokłada już marginesu górnego — odstęp trzyma pasek (space-3). */
.br-reg-early {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
	padding: var(--space-25) var(--space-4);
	border-radius: var(--radius-card-lg);
	background: var(--color-ink);
	color: var(--color-bg);
}
.br-reg-early + .br-reg-plans { margin-top: 0; }
.br-reg-early__dot {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-action);
}
.br-reg-early__text {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	font-weight: 500;
	color: var(--color-bg);
}
/* Opcjonalna etykieta (domyślnie pusta — makieta rysuje sam pasek z kropką). */
.br-reg-early__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: var(--space-05) var(--space-15);
	border-radius: var(--radius-pill);
	background: var(--color-action-tint);
	color: var(--color-action-text);
	font-size: var(--text-badge);
	font-weight: 600;
	letter-spacing: var(--text-badge-track);
	text-transform: uppercase;
	white-space: nowrap;
}
.br-reg-legal { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); color: var(--color-ink-3); margin: var(--space-3) 0 0; }

/* --- Wyróżniony pakiet Premium (makieta: bundel na całą szerokość) --------
   Układ dwukolumnowy 1.4fr / 1fr: treść + korzyści po lewej, cena + CTA
   po prawej (makieta „Fuer Architekten": .br-premium). */
.br-premium {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-5);
	align-items: center;
	margin-top: var(--space-3);
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-surface);
	background: var(--color-surface);
}
.br-premium__body { min-width: 0; }
.br-premium__tag {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-badge);
	font-weight: 600;
	letter-spacing: var(--text-badge-track);
	text-transform: uppercase;
	color: var(--color-ink-2);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	padding: var(--space-05) var(--space-15);
	margin-bottom: var(--space-2);
}
.br-premium__name { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--space-15); }
.br-premium__lead { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin: 0 0 var(--space-3); max-width: 32.5rem; }
.br-premium__benefits { display: flex; flex-direction: column; gap: var(--space-15); margin: 0; padding: 0; list-style: none; }
.br-premium__benefits li { display: flex; align-items: flex-start; gap: var(--space-15); font-size: var(--text-body); line-height: var(--text-body-lh); }
.br-premium__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.br-premium__price { display: flex; align-items: baseline; gap: var(--space-1); margin: 0; }
.br-premium__cta { width: 100%; justify-content: center; }

@media (max-width: 1024px){
	.br-premium { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* --- Formularz dwukrokowy („Registrierung starten") ---------------------
   Wymiary 1:1 z makietą: karta na całą szerokość kolumny, BIAŁE tło treści,
   beżowe (--color-surface) pasy zakładek i stopki, promień --radius-surface. */
.br-reg-card {
	width: 100%;
	max-width: none;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-surface);
	overflow: hidden;
}
.br-reg-tabs { display: flex; align-items: center; gap: var(--space-05); padding: var(--space-25) var(--space-4); border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.br-reg-tab { flex: 1; display: flex; align-items: center; gap: var(--space-15); min-width: 0; }
.br-reg-tab__num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-ink-3);
	border: 1px solid var(--color-line);
	font-size: var(--text-caption);
	font-weight: 700;
}
.br-reg-tab__label { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-reg-tab.is-active .br-reg-tab__num { background: var(--color-action); border-color: var(--color-action); color: var(--color-bg); }
.br-reg-tab.is-active .br-reg-tab__label,
.br-reg-tab.is-done .br-reg-tab__label { color: var(--color-ink); }
.br-reg-tab.is-done .br-reg-tab__num { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }

.br-reg-f { display: block; }
.br-reg-panel { padding: var(--space-5) var(--space-4); }
.br-reg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.br-reg-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-body-sm); font-weight: 600; }
.br-reg-field--wide { margin-top: var(--space-3); }
.br-reg-field input,
.br-reg-field textarea {
	width: 100%;
	height: var(--field-height);
	padding: 0 var(--space-2);
	font-family: var(--font-ui);
	font-size: var(--text-body);
	color: var(--color-ink);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
}
.br-reg-field textarea { height: auto; padding: var(--space-2); line-height: var(--text-body-lh); resize: vertical; }
.br-reg-field input:focus-visible,
.br-reg-field textarea:focus-visible { box-shadow: none; border-color: var(--color-action); outline: none; }

/* Wybór pakietu w kroku 1 */
.br-reg-pkg { margin: var(--space-4) 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.br-reg-pkg legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--text-body-sm); font-weight: 600; }
.br-reg-pkg__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-15);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	background: var(--color-bg);
	cursor: pointer;
}
.br-reg-pkg__item.is-featured { border-color: var(--color-ink); }
.br-reg-pkg__item:has(input:checked) { border-color: var(--color-action); box-shadow: 0 0 0 1px var(--color-action); }
.br-reg-pkg__name { font-size: var(--text-body-sm); font-weight: 600; }
.br-reg-pkg__price { font-size: var(--text-body-sm); color: var(--color-ink-2); white-space: nowrap; }

/* Strefy na pliki (logo + zdjęcia) — drop area.
   Wygląd 1:1 z makietą: etykieta pola NAD ramką, ramka 1px dashed
   (--color-line), promień --radius-card-lg, padding 24px, tło --color-surface,
   w środku kwadrat z ikoną (3rem × --field-height, białe tło) i podpowiedź
   w rozmiarze --text-body. Zachowanie: klik = natywne <label> (wybór pliku),
   przeciągnięcie pliku = wpis do ukrytego <input type="file">, więc formularz
   wysyła pliki zwykłym POST-em (multipart). */
.br-reg-uploads { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.br-reg-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	cursor: pointer;
}
.br-reg-drop__label { font-size: var(--text-body-sm); font-weight: 600; }
.br-reg-drop__box {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius-card-lg);
	background: var(--color-surface);
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.br-reg-drop:hover .br-reg-drop__box,
.br-reg-drop:focus-within .br-reg-drop__box { border-color: var(--color-action); }
.br-reg-drop.is-dragover .br-reg-drop__box {
	border-style: solid;
	border-color: var(--color-action);
	background: var(--color-action-tint);
	box-shadow: var(--focus-ring);
}
.br-reg-drop__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: var(--field-height);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-field);
	background: var(--color-bg);
}
.br-reg-drop__body { display: flex; flex-direction: column; gap: var(--space-05); min-width: 0; }
.br-reg-drop__hint { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); }
.br-reg-drop__state { font-size: var(--text-caption); color: var(--color-ink-3); }
.br-reg-drop__state.is-set { color: var(--color-action-text); font-weight: 600; }
/* Input zostaje w layoucie (nie `display: none`), żeby klik w <label>
   otwierał okno wyboru pliku w każdej przeglądarce — jest tylko niewidoczny. */
.br-reg-drop__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.br-reg-agree { display: flex; align-items: flex-start; gap: var(--space-15); margin-top: var(--space-4); font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); }
.br-reg-agree input { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; accent-color: var(--color-action); }

/* Stopka formularza: beżowy pas jak pasek zakładek + przyciski 3rem
   (makieta podaje w stopce `height: 3rem`, framework daje --btn-height 3.5rem). */
.br-reg-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-line); background: var(--color-surface); }
.br-reg-nav .br-btn { height: 3rem; }
.br-reg-nav .br-btn--ghost { background: var(--color-bg); padding: 0 var(--space-3); }
.br-reg-nav__group { display: flex; align-items: center; gap: var(--space-2); }
.br-reg-counter { font-size: var(--text-body-sm); color: var(--color-ink-2); }

/* Stepper działa TYLKO z JS (klasa is-js): bez JS widać oba kroki
   i jeden przycisk „Wyślij", więc formularz zawsze da się wysłać. */
.br-reg-card:not(.is-js) [data-reg-back],
.br-reg-card:not(.is-js) [data-reg-next],
.br-reg-card:not(.is-js) .br-reg-counter { display: none; }
.br-reg-card:not(.is-js) [data-reg-submit] { margin-left: auto; }
/* UWAGA: znacznik kroku siedzi na SAMYM kontenerze karty
   (<div class="br-reg-card" data-reg-stepper data-step="1">, a skrypt robi
   card.setAttribute('data-step', ...)), dlatego selektory muszą łapać
   [data-step] bezpośrednio przy .br-reg-card. Wariant z potomkiem
   ([data-step] na formularzu/wrapperze) nie działał — oba kroki i wszystkie
   przyciski były widoczne jednocześnie. */
.br-reg-card.is-js[data-step="2"] .br-reg-panel[data-step="1"],
.br-reg-card.is-js[data-step="1"] .br-reg-panel[data-step="2"],
.br-reg-card.is-js[data-step="1"] [data-reg-submit],
.br-reg-card.is-js[data-step="2"] [data-reg-next] { display: none; }
.br-reg-card.is-js[data-step="1"] [data-reg-back] { opacity: 0.45; pointer-events: none; }

/* Podziękowanie po pozytywnej rejestracji */
.br-reg-done { padding: var(--space-5) var(--space-4); }
.br-reg-done__title { font-size: var(--text-h3); font-weight: 700; margin: 0 0 var(--space-15); }
.br-reg-done__text { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin: 0 0 var(--space-3); }
.br-reg-done__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.br-reg-login { margin-top: var(--space-3); }
.br-reg-errors ul { margin: 0; padding-left: var(--space-4); }

@media (max-width: 1024px) {
	.br-reg-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-reg-plans { grid-template-columns: minmax(0, 1fr); }
	.br-reg-pkg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 864px) {
	.br-reg-fields,
	.br-reg-uploads { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.br-reg-steps__list { grid-template-columns: minmax(0, 1fr); }
}