/* ==========================================================================
   Meble na wymiar — strona podstawowa
   ========================================================================== */

.btn-outline--light { color: #fff; }
.btn-outline--light:hover { background: #fff; color: var(--color-ink); }

/* ==========================================================================
   Sekcja jakości — tekst + zdjęcie
   ========================================================================== */
.quality-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.quality-split__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 1.5vw, 20px);
}
.quality-split__photos img {
	border-radius: var(--radius);
	aspect-ratio: 1 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
}
@media (max-width: 880px) {
	.quality-split { grid-template-columns: 1fr; }
	.quality-split__photos img { aspect-ratio: 2 / 3; }
}

/* ==========================================================================
   Akcent — okręgi napędzane scrollem (nie myszką): sekcja "Jakość" (prawy
   górny róg, animacja a2 — wychylenie po łuku z opóźnieniem fazowym) i
   sekcja "Realizacje" (lewy dolny róg, animacja a1 — pulsacja z przekątnym
   przesuwem). JS w page-na-wymiar.js. Kolory zamienione względem pierwotnej
   mouse-follow wersji (duże kółko niebieskie, małe żółte), bez opacity.
   ========================================================================== */
.quality-split-section,
.realizacje-section { position: relative; overflow: hidden; }
.quality-split,
.realizacje-content { position: relative; z-index: 1; }

.quality-accent,
.realizacje-accent {
	position: absolute;
	width: clamp(253px, 34.5vw, 529px);
	height: clamp(253px, 34.5vw, 529px);
	z-index: 0;
	pointer-events: none;
}
.quality-accent { top: 0; right: 0; }
.realizacje-accent { bottom: 0; left: 0; }

.quality-accent__circle,
.realizacje-accent__circle {
	position: absolute;
	display: block;
	will-change: transform;
	--tx: 0px;
	--ty: 0px;
	--scale: 1;
	transition: none;
	transform: translate(var(--tx), var(--ty)) scale(var(--scale));
}
.quality-accent__circle--gold {
	width: 75%;
	height: 75%;
	top: -18%;
	right: -12%;
}
.realizacje-accent__circle--gold {
	width: 75%;
	height: 75%;
	bottom: -18%;
	left: -12%;
}
.quality-accent__circle--gold circle,
.realizacje-accent__circle--gold circle { fill: var(--color-blue); fill-opacity: 0.9; }

.quality-accent__circle--blue {
	width: 46%;
	height: 46%;
	top: 26%;
	right: 30%;
}
.realizacje-accent__circle--blue {
	width: 46%;
	height: 46%;
	bottom: 26%;
	left: 30%;
}
.quality-accent__circle--blue circle,
.realizacje-accent__circle--blue circle { fill: var(--color-gold); fill-opacity: 0.85; }

/* Na węższych ekranach (laptopy) niebieskie kółko chowało się za zdjęciem —
   bliżej krawędzi. Na szerokim desktopie zostaje jak było. */
@media (max-width: 1680px) {
	.quality-accent__circle--blue { top: 30%; right: 15%; }
	.realizacje-accent__circle--blue { bottom: 30%; left: 15%; }
}

/* Jeszcze węższe laptopy — kółko jeszcze bliżej krawędzi. */
@media (max-width: 1440px) {
	.quality-accent__circle--blue { top: 30px; right: calc(15% + 140px); }
	.realizacje-accent__circle--blue { bottom: 30px; left: calc(15% + 140px); }
}

/* Tablety/małe laptopy — 50px bliżej krawędzi względem breakpointu 1440px. */
@media (max-width: 1024px) {
	.quality-accent__circle--blue { right: calc(15% + 90px); }
	.realizacje-accent__circle--blue { left: calc(15% + 90px); }
}

/* Mobile — tekst i zdjęcia "Jakość" stoją jedno pod drugim (tekst pierwszy),
   więc akcent przypięty u góry nachodził na nagłówek. Przenosimy go na dół
   sekcji (pod zdjęcia) — JS dostaje flipYMobile:false, żeby ruch po łuku
   szedł w tę samą stronę co referencyjny dół z /test. */
@media (max-width: 720px) {
	.quality-accent { top: auto; bottom: 0; }
	.quality-accent__circle--gold { top: auto; bottom: -18%; }
	.quality-accent__circle--blue { top: auto; bottom: 26%; right: 30%; }
}

/* ==========================================================================
   Sekcja tytułowa
   ========================================================================== */
/* .section-intro przeniesione do main.css (współdzielone z blokami
   melbex/process-steps i melbex/benefit-grid na innych podstronach). */
@media (max-width: 720px) {
	.quality-split > div:first-child { text-align: center; }
}

/* ==========================================================================
   Filtry kategorii realizacji
   ========================================================================== */
.wymiar-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: clamp(28px, 4vw, 40px);
}
.wymiar-filters .filter-btn {
	padding: 0.65em 1.4em;
	border: 1.5px solid var(--color-border);
	border-radius: 999px;
	background: #fff;
	color: var(--color-ink);
	font-weight: 600;
	font-size: 0.9rem;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.wymiar-filters .filter-btn:hover { border-color: var(--color-blue); color: var(--color-blue); }
.wymiar-filters .filter-btn.is-active { background: var(--color-blue); border-color: var(--color-blue); color: #fff; }
@media (max-width: 720px) {
	.wymiar-filters { justify-content: center; }
}

/* ==========================================================================
   Galeria realizacji
   ========================================================================== */
.wymiar-gallery {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}
.wymiar-gallery__item {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--color-bg-soft);
	cursor: zoom-in;
}
.wymiar-gallery__item.is-hidden { display: none; }
.wymiar-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.94);
	transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.wymiar-gallery__item:hover img,
.wymiar-gallery__item:focus-visible img { transform: scale(1.06); filter: brightness(1); }
.wymiar-gallery__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(20, 36, 51, 0.32);
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}
.wymiar-gallery__item:hover .wymiar-gallery__overlay,
.wymiar-gallery__item:focus-visible .wymiar-gallery__overlay { opacity: 1; }

@media (max-width: 880px) {
	.wymiar-gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
	.wymiar-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
	.wymiar-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Sekcja galerii — odstęp pod spodem
   ========================================================================== */
#realizacje { padding-bottom: 100px; }

/* ==========================================================================
   Pasek CTA — pełna szerokość ze zdjęciem w tle, wzorowany na stronie głównej
   ========================================================================== */
.cta-band {
	position: relative;
	text-align: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.cta-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-ink);
	opacity: 0.8;
}
.cta-band__inner {
	position: relative;
	z-index: 1;
	max-width: 920px;
	margin-inline: auto;
}
.cta-band .eyebrow { color: var(--color-gold); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #dce6ef; font-size: 1.05rem; }
.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 2rem;
}
.cta-band__outline { color: #fff; }
.cta-band__outline:hover { background: #fff; color: var(--color-blue-dark); }

@media (max-width: 720px) {
	.cta-band__actions { flex-direction: column; align-items: stretch; }
	.cta-band__actions .btn { justify-content: center; }
}