/* ===== Brzozowa – Zdjęcia z budowy =====
   Selektory są celowo podniesione, a wartości oznaczone !important: motyw
   (Astra/Elementor) ma własne reguły dla <button>, <img> i <figure>, które
   inaczej zjadają kolory, wymuszają padding i psują proporcje kadrów. */

.brz-budowa,
.brz-budowa__popup {
	--brzb-akcent: #C1682B;
	--brzb-navy: #232936;
	--brzb-txt: #232936;
	--brzb-txt-mut: #7A7E88;
	--brzb-bg: #FFFFFF;
	--brzb-kadr: #EDEAE2;
	--brzb-linia: #E3E1DA;
	--brzb-obrys: #C4C0B5;
	--brzb-kurtyna: rgba(20, 24, 32, 0.72);
	--brzb-radius: 5px;
	--brzb-maxw: 1100px;
	--brzb-proporcja: 1.35;
}

.brz-budowa *,
.brz-budowa *::before,
.brz-budowa *::after,
.brz-budowa__popup *,
.brz-budowa__popup *::before,
.brz-budowa__popup *::after {
	box-sizing: border-box !important;
}

/* ---------- Link otwierający ---------- */

.brz-budowa {
	display: flex;
	justify-content: flex-start;
}

.brz-budowa .brz-budowa__link {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0 0 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--brzb-txt) !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: 0;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: color 0.2s ease;
}

/* Podkreślenie rozjeżdża się do pełnej szerokości po najechaniu */
.brz-budowa .brz-budowa__link::after {
	content: "" !important;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 62%;
	background: currentColor;
	transition: width 0.35s ease;
}

.brz-budowa .brz-budowa__link:hover::after,
.brz-budowa .brz-budowa__link:focus-visible::after {
	width: 100%;
}

.brz-budowa__ico {
	width: 17px !important;
	height: 17px !important;
	flex: 0 0 auto;
}

/* ---------- Popup ---------- */

.brz-budowa__popup {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147483000 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 32px 20px !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s;
}

.brz-budowa__popup[hidden] {
	display: none !important;
}

.brz-budowa__popup.is-otwarty {
	opacity: 1;
	visibility: visible;
}

.brz-budowa__kurtyna {
	position: absolute !important;
	inset: 0 !important;
	background: var(--brzb-kurtyna) !important;
	cursor: pointer;
}

.brz-budowa__okno {
	position: relative !important;
	z-index: 1;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: var(--brzb-maxw) !important;
	/* Nigdy wyżej niż ekran – przewija się tylko treść pod nagłówkiem */
	max-height: calc(100vh - 64px) !important;
	max-height: calc(100dvh - 64px) !important;
	overflow: hidden !important;
	border-radius: calc(var(--brzb-radius) * 2) !important;
	background: var(--brzb-bg) !important;
	color: var(--brzb-txt) !important;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35) !important;
	transform: translateY(16px);
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.brz-budowa__popup.is-otwarty .brz-budowa__okno {
	transform: translateY(0);
}

/* ---------- Nagłówek (nieruchomy) ---------- */

.brz-budowa__head {
	position: relative !important;
	flex: none !important;
	padding: 30px 88px 24px 32px !important;
	border-bottom: 1px solid var(--brzb-linia) !important;
}

.brz-budowa .brz-budowa__eyebrow,
.brz-budowa__popup .brz-budowa__eyebrow {
	margin: 0 0 10px !important;
	color: var(--brzb-akcent) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
}

.brz-budowa__popup .brz-budowa__tytul {
	margin: 0 !important;
	color: var(--brzb-txt) !important;
	font-size: 34px !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
}

/* Krzyżyk – wymuszone wszystko, żeby wyglądał tak samo w każdym motywie */
.brz-budowa__popup .brz-budowa__zamknij {
	position: absolute !important;
	top: 26px !important;
	right: 26px !important;
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(58, 68, 79, 0.22) !important;
	border-radius: var(--brzb-radius) !important;
	background: rgba(58, 68, 79, 0.10) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--brzb-txt) !important;
	font-family: inherit !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.brz-budowa__popup .brz-budowa__zamknij:hover,
.brz-budowa__popup .brz-budowa__zamknij:focus-visible {
	background: rgba(58, 68, 79, 0.22) !important;
	border-color: rgba(58, 68, 79, 0.42) !important;
	color: var(--brzb-txt) !important;
}

/* ---------- Treść (przewijana) ---------- */

.brz-budowa__tresc {
	flex: 1 1 auto !important;
	/* Bez min-height:0 element flex nie zwęża się poniżej swojej treści
	   i nagłówek wypadłby poza okno przy niskim ekranie. */
	min-height: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	padding: 24px 32px 30px !important;
}

/* ---------- Zakładki miesięcy ---------- */

.brz-budowa__tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 0 0 24px !important;
}

.brz-budowa__popup .brz-budowa__tab {
	margin: 0 !important;
	padding: 13px 19px !important;
	border: 1px solid var(--brzb-obrys) !important;
	border-radius: var(--brzb-radius) !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--brzb-txt) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.brz-budowa__popup .brz-budowa__tab:hover,
.brz-budowa__popup .brz-budowa__tab:focus-visible,
.brz-budowa__popup .brz-budowa__tab.is-aktywna {
	background: var(--brzb-navy) !important;
	border-color: var(--brzb-navy) !important;
	color: #fff !important;
}

/* ---------- Siatka zdjęć ---------- */

.brz-budowa__panel[hidden] {
	display: none !important;
}

.brz-budowa__siatka {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
}

/* Slider (telefon): opakowanie na pas i strzałki; na desktopie strzałek nie ma. */
.brz-budowa__slider {
	position: relative;
}

.brz-budowa__popup .brz-budowa__strzalka {
	display: none !important;
}

.brz-budowa__popup .brz-budowa__kafel {
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: var(--brzb-proporcja);
	overflow: hidden !important;
	border-radius: var(--brzb-radius) !important;
	background: var(--brzb-kadr) !important;
}

/* Elementor ma w resecie ".elementor img{height:auto}" – specyficzność wyższa
   niż sama klasa, stąd podniesiony selektor i !important. */
.brz-budowa__popup .brz-budowa__kafel img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center;
	border-radius: 0 !important;
}

.brz-budowa__popup .brz-budowa__podpis {
	position: absolute !important;
	left: 12px !important;
	bottom: 12px !important;
	z-index: 2;
	max-width: calc(100% - 24px);
	margin: 0 !important;
	padding: 8px 13px !important;
	border-radius: var(--brzb-radius) !important;
	background: rgba(35, 41, 54, 0.82) !important;
	color: #fff !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	text-align: left !important;
}

/* ---------- Lupa na kafelku ---------- */

.brz-budowa__popup .brz-budowa__lupa {
	position: absolute !important;
	inset: 0 !important;
	z-index: 3;
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: zoom-in;
}

.brz-budowa__lupa-kolo {
	display: grid !important;
	place-items: center !important;
	width: 58px !important;
	height: 58px !important;
	border-radius: 50% !important;
	background: rgba(35, 41, 54, 0.72) !important;
	color: #fff !important;
	opacity: 0;
	transform: scale(0.88);
	transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.brz-budowa__lupa-kolo .brz-budowa__ico {
	width: 24px !important;
	height: 24px !important;
}

.brz-budowa__kafel:hover .brz-budowa__lupa-kolo,
.brz-budowa__popup .brz-budowa__lupa:focus-visible .brz-budowa__lupa-kolo {
	opacity: 1;
	transform: scale(1);
}

.brz-budowa__popup .brz-budowa__lupa:hover .brz-budowa__lupa-kolo {
	background: rgba(35, 41, 54, 0.85) !important;
}

/* ---------- Lightbox ---------- */

/* ---------- Kafel z licznikiem reszty zdjęć ---------- */

/* Kafel z licznikiem to jednolity ciemny blok, nie przyciemnione zdjecie:
   liczba ma byc czytelna od razu, bez konkurencji ze zdjeciem pod spodem. */
.brz-budowa__popup .brz-budowa__kafel--wiecej {
	background: var(--brzb-navy) !important;
}

.brz-budowa__popup .brz-budowa__kafel--wiecej img {
	display: none !important;
}

.brz-budowa__popup .brz-budowa__wiecej {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.2s ease !important;
}

.brz-budowa__popup .brz-budowa__wiecej:hover,
.brz-budowa__popup .brz-budowa__wiecej:focus-visible {
	background: rgba(255, 255, 255, 0.08) !important;
}

.brz-budowa__wiecej-liczba {
	font-size: 34px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -0.01em !important;
}

.brz-budowa__wiecej-opis {
	font-size: 13px !important;
	letter-spacing: 0.04em !important;
	opacity: 0.7 !important;
}

.brz-budowa-lightbox {
	position: fixed !important;
	inset: 0 !important;
	/* nad popupem, bo otwiera się z jego wnętrza */
	z-index: 2147483100 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 32px !important;
	background: rgba(14, 17, 23, 0.92) !important;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.brz-budowa-lightbox.is-otwarty {
	display: flex !important;
	opacity: 1;
}

/* Kadr trzyma zdjęcie i podpis razem, żeby podpis nie odkleił się od obrazu
   przy wąskich ujęciach. */
.brz-budowa-lightbox__kadr {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

/* Limit rozmiaru zdjecia liczymy od OKNA, nie od kadru. Kadr jest elementem flex
   bez wlasnej szerokosci - jego rozmiar wynika z obrazu, wiec "max-width: 100%"
   na obrazie odnosilo sie do czegos, co samo czekalo na obraz. Wynik: zero na zero
   i puste miejsce zamiast zdjecia.

   Odejmujemy miejsce na strzalki po bokach oraz na pasek i podpis w pionie. */
.brz-budowa-lightbox img {
	display: block !important;
	max-width: calc(100vw - 200px) !important;
	max-height: calc(100vh - 190px) !important;
	width: auto !important;
	height: auto !important;
	border-radius: 5px !important;
	background: #fff !important;
}

.brz-budowa-lightbox__podpis {
	max-width: 60ch !important;
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-align: center !important;
}

/* Pasek u góry: miesiąc z lewej, licznik pozycji obok, krzyżyk z prawej. */
.brz-budowa-lightbox__pasek {
	position: absolute !important;
	top: 24px !important;
	left: 24px !important;
	right: 24px !important;
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	z-index: 2 !important;
}

.brz-budowa-lightbox__miesiac {
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
}

.brz-budowa-lightbox__licznik {
	margin-right: auto !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 13px !important;
	font-variant-numeric: tabular-nums !important;
}

/* Strzałki po bokach kadru – przewijają galerię bez zamykania warstwy. */
.brz-budowa-lightbox .brz-budowa-lightbox__nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: grid !important;
	place-items: center !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 5px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease !important;
}

.brz-budowa-lightbox .brz-budowa-lightbox__nav--wstecz { left: 24px !important; }
.brz-budowa-lightbox .brz-budowa-lightbox__nav--dalej  { right: 24px !important; }

.brz-budowa-lightbox .brz-budowa-lightbox__nav:hover,
.brz-budowa-lightbox .brz-budowa-lightbox__nav:focus-visible {
	background: rgba(255, 255, 255, 0.26) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: #fff !important;
}

/* [hidden] przegrywa z display:grid powyżej – stąd wymuszenie. */
.brz-budowa-lightbox .brz-budowa-lightbox__nav[hidden] {
	display: none !important;
}

/* Ten sam krzyżyk co w popupie – ale na ciemnym tle */
.brz-budowa-lightbox .brz-budowa-lightbox__zamknij {
	position: static !important;
	flex: none !important;
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 5px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.brz-budowa-lightbox .brz-budowa-lightbox__zamknij:hover,
.brz-budowa-lightbox .brz-budowa-lightbox__zamknij:focus-visible {
	background: rgba(255, 255, 255, 0.26) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: #fff !important;
}

body.brz-budowa-blokada {
	overflow: hidden !important;
}

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

@media (max-width: 900px) {
	.brz-budowa__siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	.brz-budowa__popup {
		padding: 16px 12px !important;
	}

	/* Strzalki schodza na dol kadru - po bokach nie ma na nie miejsca. */
	.brz-budowa-lightbox {
		padding: 16px !important;
	}

	.brz-budowa-lightbox .brz-budowa-lightbox__nav {
		top: auto !important;
		bottom: 18px !important;
		transform: none !important;
		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		min-height: 46px !important;
	}

	.brz-budowa-lightbox .brz-budowa-lightbox__nav--wstecz { left: 16px !important; }
	.brz-budowa-lightbox .brz-budowa-lightbox__nav--dalej  { right: 16px !important; }

	.brz-budowa-lightbox img {
		max-width: calc(100vw - 32px) !important;
		max-height: calc(100vh - 220px) !important;
	}

	.brz-budowa-lightbox__pasek {
		top: 16px !important;
		left: 16px !important;
		right: 16px !important;
		gap: 10px !important;
	}

	.brz-budowa-lightbox__miesiac {
		font-size: 14px !important;
	}

	.brz-budowa__okno {
		max-height: calc(100vh - 32px) !important;
		max-height: calc(100dvh - 32px) !important;
	}

	.brz-budowa__head {
		padding: 22px 74px 18px 20px !important;
	}

	.brz-budowa__popup .brz-budowa__tytul {
		font-size: 26px !important;
	}

	.brz-budowa__popup .brz-budowa__zamknij {
		top: 18px !important;
		right: 18px !important;
	}

	.brz-budowa__tresc {
		padding: 20px 20px 24px !important;
	}

	.brz-budowa__tabs {
		gap: 8px !important;
		margin-bottom: 18px !important;
	}

	.brz-budowa__popup .brz-budowa__tab {
		padding: 11px 15px !important;
		font-size: 13px !important;
	}

	/* Slider: poziomy pas z scroll-snap, jedno zdjęcie na całą szerokość okna,
	   strzałka w prawo przewija o jedno. Zapas z prawej pozwala dosunąć ostatni
	   kafel do lewej krawędzi. Pasek przewijania ukryty. */
	.brz-budowa__siatka {
		display: flex !important;
		gap: 12px !important;
		overflow-x: auto !important;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.brz-budowa__siatka::-webkit-scrollbar {
		display: none;
	}

	.brz-budowa__popup .brz-budowa__kafel {
		flex: 0 0 100% !important;
		min-width: 0;
		scroll-snap-align: start;
	}

	.brz-budowa__popup .brz-budowa__strzalka {
		position: absolute !important;
		top: 50% !important;
		z-index: 4 !important;
		display: grid !important;
		place-items: center !important;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid rgba(255, 255, 255, 0.5) !important;
		border-radius: 50% !important;
		background: rgba(35, 41, 54, 0.72) !important;
		background-image: none !important;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
		color: #fff !important;
		line-height: 1 !important;
		transform: translateY(-50%) !important;
		cursor: pointer;
	}

	.brz-budowa__popup .brz-budowa__strzalka[hidden] {
		display: none !important;
	}

	.brz-budowa__popup .brz-budowa__strzalka--lewo {
		left: 8px !important;
	}

	.brz-budowa__popup .brz-budowa__strzalka--prawo {
		right: 8px !important;
	}

	.brz-budowa__popup .brz-budowa__strzalka .brz-budowa__ico {
		width: 22px !important;
		height: 22px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brz-budowa__okno,
	.brz-budowa__popup,
	.brz-budowa-lightbox,
	.brz-budowa__lupa-kolo,
	.brz-budowa .brz-budowa__link::after {
		transition: none !important;
	}
}