/* Style sekcji (Flexible Content) - kierunek docs/design.md v2. Tokeny w style.css (:root). */

/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJE - wspólne
   ═══════════════════════════════════════════════════════════════════════════ */
.sekcja { padding-block: var(--odstep-sekcji); }
.sekcja--beton { background: var(--beton); }
/* Dwie sekcje o tym samym tle pod rząd: druga bez górnego odstępu, inaczej odstępy się sumują i przejście wygląda jak
   dziura (uwaga użytkownika 2026-10-12). Szare karty w kolumnie stron usług są osobnymi kartami - tam bez zmian. */
.sekcja:not(.sekcja--beton):not(.sekcja--grafit):not(.sekcja--cta) + .sekcja:not(.sekcja--beton):not(.sekcja--grafit):not(.sekcja--cta),
main > .sekcja--beton + .sekcja--beton, main > .sekcja--grafit + .sekcja--grafit { padding-top: 0; }
.sekcja > .kontener > h2 { margin-bottom: clamp(18px, 2.4vw, 28px); }
.sekcja > .kontener > h2 + .lead-sekcji { margin-top: -8px; margin-bottom: clamp(20px, 2.6vw, 32px); }
@media (max-width: 640px) { .sekcja > .kontener > h2 + .lead-sekcji { margin-top: 0; } } /* mniejszy H2: ujemny margines kleił lead do liter */

/* ═══════════════════════════════════════════════════════════════════════════
   HERO - napis bezpośrednio na przyciemnionym zdjęciu (odświeżenie po uwagach klienta, 2026-10-19, cały serwis);
   bez zdjęcia - ciemny pas z tytułem. Pasek menu nad zdjęciem: style.css §6.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; color: #fff; background: var(--grafit); }
/* Ze zdjęciem: pasek menu leży na zdjęciu, więc u góry miejsce na jego wysokość. Podstrony ~72% ekranu (od razu widać
   początek treści), strona główna z kaflami problemów - cały ekran minus wystające kafle. svh = bez skoku przy pasku adresu. */
.hero--na-zdjeciu { min-height: max(520px, 72vh); min-height: max(520px, 72svh); padding: calc(var(--wysokosc-naglowka) + clamp(36px, 5vw, 64px)) 0 clamp(56px, 7vw, 96px); }
.hero--na-zdjeciu:has(+ .hero-pas) { min-height: max(600px, calc(100vh - 48px)); min-height: max(600px, calc(100svh - 48px)); padding-bottom: clamp(96px, 11vw, 150px); }
.hero--bez-zdjecia { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); }
.hero__tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--grafit); }
.hero__obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.hero__obraz.jest-aktywne { opacity: 1; }
.hero__tlo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
	linear-gradient(180deg, rgba(14, 17, 19, .6) 0, rgba(14, 17, 19, 0) 210px),
	linear-gradient(90deg, rgba(14, 17, 19, .88) 0%, rgba(14, 17, 19, .7) 34%, rgba(14, 17, 19, .22) 68%, rgba(14, 17, 19, .1) 100%); }
.hero__ramka { width: min(100% - 2 * var(--margines), var(--kontener)); margin-inline: auto; }
/* Limit szerokości tekstu - bez H1: duże „Hydroizolacje” (~990 px) łamało się w środku słowa przy limicie 860 px. */
.hero__ramka > :where(:not(.hero__naglowek)) { max-width: 860px; } /* :where - zerowa specyficzność, węższy limit leadu (36em) wygrywa */
.hero__naglowek { max-width: 1120px; }
.home .hero__ramka::before { content: ''; display: block; width: 72px; height: 6px; margin-bottom: clamp(22px, 2.6vw, 34px); background: var(--czerwien); }
/* Szeroki krój (wdth 116): dolny limit niski, a rozmiar w vw - najdłuższe słowo („przeciwwilgociowe”, 17 liter) mieści się
   na telefonie 320 px (przy limicie 1.75rem wychodziło o 40 px poza kontener). */
.hero__naglowek { color: #fff; font-size: clamp(1.45rem, 7.2vw, 4.6rem); font-weight: 880; font-variation-settings: 'wdth' 116; line-height: .96; letter-spacing: -.025em; text-wrap: balance; }
.hero__naglowek--dlugi { font-size: clamp(1.4rem, 6.2vw, 3.5rem); line-height: 1.02; }
.home .hero__naglowek { font-size: clamp(2rem, 10.4vw, 7rem); line-height: .9; letter-spacing: -.03em; }
.hero__lead { max-width: 36em; margin: clamp(18px, 2.2vw, 28px) 0 clamp(24px, 3vw, 36px); color: rgba(255, 255, 255, .9); font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; }
.hero .przycisk { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.hero .przycisk--obrys { border-color: rgba(255, 255, 255, .85); color: #fff; }
.hero .przycisk--obrys:hover { background: #fff; border-color: #fff; color: var(--grafit); }
.hero__tresc { margin: -6px 0 24px; line-height: 1.6; }
.hero__tresc ul { padding-left: 0; list-style: none; }
.hero__tresc li { position: relative; padding-left: 26px; }
.hero__tresc li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 12px; height: 2px; background: var(--czerwien); }
.hero .tresc a { color: #fff; }
/* Okruszki na zdjęciu / ciemnym pasie */
.hero .okruszki { color: rgba(255, 255, 255, .78); }
.hero .okruszki a { color: #fff; }
.hero .okruszki__pozycja + .okruszki__pozycja::before { color: rgba(255, 255, 255, .45); }

/* Kontakt: tekst po lewej, formularz w białej karcie po prawej - na zdjęciu */
.hero--formularz { display: block; }
.hero__uklad { width: min(100% - 2 * var(--margines), var(--kontener)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.hero--formularz .hero__ramka { width: auto; margin: 0; }
.hero--formularz .hero__naglowek { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.hero__formularz { scroll-margin-top: calc(var(--wysokosc-naglowka) + 16px); color: var(--grafit); }
.hero__formularz .formularz { border: 0; box-shadow: var(--cien-duzy); }
@media (max-width: 960px) { .hero__uklad { grid-template-columns: minmax(0, 1fr); } }

/* Kafle problemów NA PRZECIĘCIU hero i następnej sekcji (strona główna) */
.hero-pas { background: var(--beton); }
.hero-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 2; margin-top: clamp(-52px, -3.6vw, -40px); }
.kafel-problem { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px 18px; background: var(--biel); color: var(--grafit); border: 1px solid var(--rysa); border-radius: var(--promien); box-shadow: var(--cien); font-weight: 700; line-height: 1.25; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.kafel-problem:hover { border-color: var(--czerwien); box-shadow: 0 14px 38px rgba(30, 35, 38, .2); }
.kafel-problem__ikona { width: 46px; height: 46px; }
.kafel-problem__strzalka { margin-left: auto; color: var(--czerwien); }

/* Telefon i tablet: napis wyśrodkowany w pionie i poziomie (uwaga użytkownika 2026-10-19), przyciemnienie równe na
   całej wysokości, przyciski jeden pod drugim o tej samej szerokości. Kontakt zostaje wyrównany do lewej (lista + formularz). */
@media (max-width: 960px) {
	.hero--na-zdjeciu { flex-direction: column; justify-content: center; align-items: stretch; min-height: 78vh; min-height: 78svh; padding: calc(var(--wysokosc-naglowka) + 24px) 0 48px; text-align: center; }
	.hero--na-zdjeciu:has(+ .hero-pas) { min-height: 88vh; min-height: 88svh; padding-bottom: 48px; }
	.hero__tlo::after { background: linear-gradient(180deg, rgba(14, 17, 19, .7) 0, rgba(14, 17, 19, .62) 30%, rgba(14, 17, 19, .62) 70%, rgba(14, 17, 19, .82) 100%); }
	.hero--na-zdjeciu .hero__ramka > * { margin-inline: auto; }
	.home .hero__ramka::before { margin-inline: auto; }
	.hero--na-zdjeciu .okruszki__lista { justify-content: center; }
	.hero--na-zdjeciu .przyciski { flex-direction: column; align-items: center; }
	.hero--na-zdjeciu .przyciski .przycisk { width: min(100%, 300px); }
	.hero--formularz { text-align: left; }
	.hero--formularz .hero__ramka > * { margin-inline: 0; }
	.hero--formularz .okruszki__lista { justify-content: flex-start; }
	.hero--formularz .przyciski { align-items: flex-start; }
	.hero-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
	.hero-pas { padding-top: 18px; }
}
@media (max-width: 640px) {
	.kafel-problem { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; font-size: .95rem; }
	.kafel-problem__strzalka { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRONA USŁUGI - treść obok panelu bocznego, FAQ pod siatką
   ═══════════════════════════════════════════════════════════════════════════ */
.uklad-uslugi { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; padding-block: clamp(36px, 5vw, 64px) 0; }
.uklad-uslugi .kontener { width: auto; margin: 0; }
.uklad-uslugi__tresc > .sekcja { padding-block: clamp(26px, 3.4vw, 40px); }
.uklad-uslugi__tresc > .sekcja:first-child { padding-top: 0; }
.uklad-uslugi__tresc > .sekcja--beton { padding-inline: clamp(20px, 3vw, 40px); border-radius: var(--promien-duzy); margin-block: 8px; }
.uklad-uslugi + .sekcja--faq { padding-top: clamp(32px, 4vw, 56px); }
/* Kolumna treści obok panelu bocznego (~800 px): H2 o stopień mniejsze niż pełnoszerokie, długie pytania-nagłówki
   nie rozpadają się na 3-4 linie (nagłówki 2026-10-19 urosły do 3.15rem). */
.uklad-uslugi__tresc h2 { font-size: clamp(1.5rem, 2.9vw, 2.45rem); }

/* Panel na całą wysokość kolumny; przykleja się TYLKO boks kontaktowy, żeby dane kontaktowe były widoczne
   przy przewijaniu nawet przy długiej liście usług (feedback 2026-10-08). */
.panel-uslug { align-self: stretch; }
.panel-uslug__wnetrze { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.panel-uslug__blok { background: var(--beton); border-radius: var(--promien); padding: 18px 20px; }
.panel-uslug__kontakt { position: sticky; top: calc(var(--wysokosc-naglowka) + 24px); }
.panel-uslug__tytul { margin: 0 0 8px; font-family: var(--font-display); font-weight: 760; font-size: 1.08rem; }
.panel-uslug__tytul a { text-decoration: none; }
.panel-uslug__tytul a:hover { color: var(--czerwien); }
.panel-uslug__lista { list-style: none; margin: 0; padding: 0; font-size: .97rem; }
.panel-uslug__lista li { border-top: 1px solid var(--rysa); }
.panel-uslug__lista li:first-child { border-top: 0; }
.panel-uslug__lista a, .panel-uslug__lista span { display: block; padding: 6px 0; line-height: 1.3; text-decoration: none; }
.panel-uslug__lista a:hover { color: var(--czerwien); }
.panel-uslug__lista .jest-biezaca span { font-weight: 700; color: var(--czerwien-ciemna); }
.panel-uslug__kontakt { background: var(--grafit); color: var(--stopka-tekst); }
.panel-uslug__kontakt .panel-uslug__tytul { color: #fff; }
.panel-uslug__tekst { margin: 0 0 12px; font-size: 1rem; }
.panel-uslug__dane { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.panel-uslug__dane li { display: flex; align-items: center; gap: 10px; }
.panel-uslug__dane a { color: #fff; font-weight: 700; text-decoration: none; }
.panel-uslug__dane a:hover { text-decoration: underline; }
.przyciski--panel .przycisk { width: 100%; }

@media (max-width: 1080px) {
	.uklad-uslugi { grid-template-columns: minmax(0, 1fr); }
	.panel-uslug__wnetrze { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); height: auto; }
	.panel-uslug__kontakt { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEKST
   ═══════════════════════════════════════════════════════════════════════════ */
.sekcja--tekst h2 { margin-bottom: 18px; }
.tekst-uklad { display: grid; gap: clamp(24px, 4vw, 48px); }
.sekcja--z-obrazem .tekst-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: stretch; }
.tekst-uklad__obraz { margin: 0; }
.tekst-uklad__obraz img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--promien); }
@media (max-width: 760px) { .sekcja--z-obrazem .tekst-uklad { grid-template-columns: 1fr; } }
.sekcja--obraz-szeroki .tekst-uklad__obraz img { height: auto; object-fit: contain; } /* schemat pod tekstem, w całości */

/* ═══════════════════════════════════════════════════════════════════════════
   TABELA - ciemny nagłówek, obramowania, przewijanie tylko w obrębie tabeli
   ═══════════════════════════════════════════════════════════════════════════ */
.tabela-przewijana { overflow-x: auto; border: 1px solid var(--rysa); border-radius: var(--promien); background: var(--biel); }
.tabela { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; line-height: 1.4; }
.tabela thead th { background: var(--grafit); color: #fff; font-family: var(--font-display); font-weight: 700; text-align: left; padding: 14px 16px; }
.tabela th, .tabela td { padding: 12px 16px; border: 1px solid var(--rysa); text-align: left; vertical-align: top; }
.tabela thead th { border-color: var(--grafit); }
.tabela tbody th { font-weight: 700; }
.tabela tbody tr:nth-child(even) { background: #FAFBFB; }
.tabela a { color: var(--czerwien-ciemna); font-weight: 700; }
/* Telefon: 3 kolumny nie mieszczą się w 343 px bez łamania słów, a przewijanie było niewygodne (prośba 2026-10-13).
   Wiersz = karta: nagłówek wiersza w ciemnym pasku (jak nagłówek tabeli), komórki pod nim z nazwą kolumny
   z atrybutu data-etykieta. Nagłówek tabeli zostaje dla czytników ekranu, wizualnie ukryty. */
@media (max-width: 640px) {
	.tabela-przewijana { overflow: visible; border: 0; border-radius: 0; background: none; }
	.tabela { min-width: 0; }
	.tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
	.tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.tabela tbody tr, .tabela tbody tr:nth-child(even) { background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); overflow: hidden; }
	.tabela tbody tr + tr { margin-top: 12px; }
	.tabela tbody th { background: var(--grafit); color: #fff; font-family: var(--font-display); border: 0; padding: 12px 16px; }
	.tabela td { border: 0; padding: 10px 16px; }
	.tabela td + td { border-top: 1px solid var(--rysa); }
	.tabela td[data-etykieta]::before { content: attr(data-etykieta); display: block; margin-bottom: 2px; color: var(--grafit-2); font-size: .85rem; font-weight: 700; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KROKI - realna kolejność, numeracja niesie informację
   ═══════════════════════════════════════════════════════════════════════════ */
/* Oś czasu (uwagi użytkownika 2026-10-12): numery w czerwonych kółkach na osi, opisy w kafelkach. Desktop - oś pozioma,
   kafle na przemian pod osią i nad nią; tablet i telefon - oś pionowa po lewej, kafle obok. Wąska kolumna stron usług -
   oś pionowa bez kafli (kafle dotyczyły osi na pełnej szerokości). Każdy krok na desktopie to siatka trzech wierszy (kafel nad osią /
   kółko / kafel pod osią) o równych połówkach, więc oś wypada na tej samej wysokości we wszystkich krokach. Odcinek osi
   rysuje ::after każdego kroku (od środka jego kółka do środka następnego), więc działa przy każdej liczbie kroków.
   Obwódka kółka w kolorze tła „przecina” oś. */
.kroki { --kroki-tlo: var(--biel); --kolko: 56px; --odstep-krokow: 28px; --lacznik: 22px; display: grid; gap: 22px; list-style: none; margin: 0; padding: 0; counter-reset: krok; }
.sekcja--beton .kroki { --kroki-tlo: var(--beton); }
.kroki__krok { position: relative; counter-increment: krok; padding-left: calc(var(--kolko) + 18px); min-height: var(--kolko); }
.kroki__krok::before { content: counter(krok); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: var(--kolko); height: var(--kolko); border-radius: 50%; background: var(--czerwien); color: var(--biel); font-family: var(--font-display); font-weight: 820; font-size: 1.45rem; line-height: 1; box-shadow: 0 0 0 7px var(--kroki-tlo); }
.kroki__krok:not(:last-child)::after { content: ''; position: absolute; top: var(--kolko); bottom: -22px; left: calc(var(--kolko) / 2 - 1px); width: 2px; background: #A9B2B8; }
.kroki__karta { position: relative; padding: 16px 18px 18px; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); box-shadow: var(--cien); }
.kroki__karta::before { content: ''; position: absolute; left: -18px; top: calc(var(--kolko) / 2 - 1px); width: 18px; height: 2px; background: #A9B2B8; }
.kroki__karta h3 { margin: 0; }
.kroki__krok p { margin: 8px 0 0; color: var(--grafit-2); font-size: 1rem; line-height: 1.5; }
@media (min-width: 961px) {
	.kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--odstep-krokow); }
	.kroki__krok { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; padding-left: 0; }
	.kroki__krok::before { grid-row: 2; position: relative; }
	.kroki__krok:not(:last-child)::after { top: calc(50% - 1px); bottom: auto; left: 50%; right: calc(-50% - var(--odstep-krokow)); width: auto; height: 2px; }
	.kroki__karta { grid-row: 3; align-self: start; width: 100%; margin-top: var(--lacznik); padding: 20px 22px 22px; }
	.kroki__karta::before { left: calc(50% - 1px); top: calc(-1 * var(--lacznik) - 1px); width: 2px; height: var(--lacznik); }
	.kroki__krok:nth-child(even) .kroki__karta { grid-row: 1; align-self: end; margin: 0 0 var(--lacznik); }
	.kroki__krok:nth-child(even) .kroki__karta::before { top: auto; bottom: calc(-1 * var(--lacznik) - 1px); }
}
/* Strony usług - wąska kolumna obok panelu bocznego: zawsze oś pionowa, opisy bez kafli. */
.uklad-uslugi .kroki { grid-template-columns: 1fr; gap: 26px 0; }
.uklad-uslugi .kroki__krok { display: block; padding-left: calc(var(--kolko) + 22px); }
.uklad-uslugi .kroki__krok::before { position: absolute; }
.uklad-uslugi .kroki__krok:not(:last-child)::after { top: var(--kolko); bottom: -26px; left: calc(var(--kolko) / 2 - 1px); right: auto; width: 2px; height: auto; }
.uklad-uslugi .kroki__krok .kroki__karta, .uklad-uslugi .kroki__krok:nth-child(even) .kroki__karta { margin: 0; padding: 14px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.uklad-uslugi .kroki__karta::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ZAPROSZENIE (CTA) - pas między sekcjami albo karta
   ═══════════════════════════════════════════════════════════════════════════ */
.sekcja--cta { padding-block: clamp(20px, 3vw, 32px); }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; border-radius: var(--promien-duzy); }
.cta h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.cta p { margin: 8px 0 0; color: var(--grafit-2); }
/* CTA „pas” jako kafel na przecięciu sekcji (uwaga użytkownika 2026-10-12): biała karta stoi na granicy dwóch sekcji.
   Tło sekcji CTA jest podzielone na pół kolorem sekcji poprzedniej i następnej, więc granica wypada w połowie karty. */
.sekcja--cta-pas { --gora: var(--biel); --dol: var(--biel); position: relative; z-index: 2; padding-block: 0; background: linear-gradient(var(--gora) 50%, var(--dol) 50%); }
.sekcja--beton + .sekcja--cta-pas { --gora: var(--beton); }
.sekcja--cta-pas:has(+ .sekcja--beton) { --dol: var(--beton); }
.sekcja--grafit + .sekcja--cta-pas { --gora: var(--grafit); }
.sekcja--cta-pas:has(+ .sekcja--grafit) { --dol: var(--grafit); }
.cta--pas { background: var(--biel); padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 40px); border: 1px solid var(--rysa); border-top: 5px solid var(--czerwien); box-shadow: var(--cien-duzy); }
.cta--karta { background: var(--grafit); padding: clamp(26px, 4vw, 48px); }
.cta--karta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.cta--karta p { color: var(--stopka-tekst); font-size: 1.1rem; }
.cta--karta .przycisk--obrys { border-color: #fff; color: #fff; }
.cta--karta .przycisk--obrys:hover { background: #fff; color: var(--grafit); }
.uklad-uslugi .cta { grid-template-columns: 1fr; }
/* Biała karta na przecięciu z ciemną stopką (ostatnia sekcja strony): zachodzi na stopkę, a stopka dostaje tyle
   samo miejsca u góry. Działa tylko, gdy sekcja jest ostatnim dzieckiem <main> - inaczej zostaje zwykłą kartą. */
.sekcja--cta-stopka { --zachodzenie: clamp(48px, 6vw, 80px); position: relative; z-index: 2; padding-bottom: 0; }
main > .sekcja--cta-stopka:last-child { margin-bottom: calc(-1 * var(--zachodzenie)); }
main:has(> .sekcja--cta-stopka:last-child) + .stopka { padding-top: calc(var(--stopka-gora, 72px) + clamp(48px, 6vw, 80px)); }
.cta--stopka { background: var(--biel); border: 1px solid var(--rysa); border-top: 5px solid var(--czerwien); padding: clamp(24px, 3.6vw, 44px); box-shadow: var(--cien-duzy); }
.cta--stopka h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   GALERIA / REALIZACJE + LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════ */
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.galeria--album { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galeria__figura { margin: 0; }
.galeria__przycisk { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--promien-maly); overflow: hidden; }
.galeria__obraz { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria__podpis { margin-top: 6px; font-size: .92rem; color: var(--grafit-2); display: grid; gap: 2px; }
.galeria__podpis a { color: var(--czerwien-ciemna); font-weight: 700; }
.galeria__wiecej { margin: 22px 0 0; }
@media (max-width: 960px) { .galeria--album { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .galeria, .galeria--album { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Same pionowe zdjęcia: całe ujęcie w naturalnych proporcjach, 3 w rzędzie także na telefonie (bez sieroty w 2. rzędzie). */
.galeria--pionowe .galeria__obraz { height: auto; } /* proporcje: inline aspect-ratio z galeria.php */
@media (max-width: 640px) { .galeria.galeria--pionowe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(14, 17, 19, .9); }
.lightbox__figura { display: grid; place-items: center; height: 100%; padding: 56px 64px; }
.lightbox__obraz { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: var(--promien-maly); }
.lightbox__opis { color: #fff; margin-top: 12px; text-align: center; font-size: 1rem; }
.lightbox__sterowanie button { position: fixed; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox__sterowanie button:hover { background: var(--czerwien); }
.lightbox__zamknij { top: 16px; right: 16px; }
.lightbox__poprzedni { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nastepny { right: 16px; top: 50%; transform: translateY(-50%); }

/* ═══════════════════════════════════════════════════════════════════════════
   OPINIE - cytaty 1:1
   ═══════════════════════════════════════════════════════════════════════════ */
.opinie { display: grid; gap: 18px; }
/* Pełne rzędy (dev §10.1): siatka 6 kolumn, karta = 2 (trzy w rzędzie); przy 2 i 4 opiniach po dwie, przy 5 - 3+2. */
.opinie--siatka { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.opinie--siatka .opinia { grid-column: span 2; }
/* Tylko desktop: `.opinie--5 .opinia:nth-child(n+4)` ma wyższą specyficzność niż reguły mobilne niżej - bez media
   query 4. opinia z 5 zostawała na telefonie w pół szerokości (uwaga użytkownika 2026-10-13). */
@media (min-width: 961px) {
	.opinie--2 .opinia, .opinie--4 .opinia, .opinie--5 .opinia:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 960px) {
	.opinie--siatka .opinia { grid-column: span 3; }
	.opinie--siatka .opinia:last-child:nth-child(odd) { grid-column: span 6; }
}
@media (max-width: 640px) { .opinie--siatka .opinia { grid-column: span 6; } }
.opinia { margin: 0; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); padding: 26px 28px 24px; display: flex; flex-direction: column; }
.opinia blockquote { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.6; }
.opinia blockquote::before { content: ''; display: block; width: 34px; height: 26px; margin-bottom: 14px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath fill='%23CD2122' d='M0 26V15C0 6.7 4.6 1.6 13 0l1.4 3.4C9.6 5 7.6 8 7.4 12H14v14H0Zm20 0V15c0-8.3 4.6-13.4 13-15l1 3.4C29.6 5 27.6 8 27.4 12H34v14H20Z'/%3E%3C/svg%3E"); }
.opinia blockquote p { margin: 0; }
.opinia figcaption { margin-top: auto; }
.opinia cite { font-style: normal; font-weight: 700; }
.opinia__nota { display: block; color: var(--grafit-2); font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ - ostatnia sekcja, pełna szerokość
   ═══════════════════════════════════════════════════════════════════════════ */
.faq { display: grid; gap: 10px; }
.faq__pozycja { background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); }
.sekcja--faq:not(.sekcja--beton) .faq__pozycja { background: var(--beton); border-color: transparent; }
.faq__pytanie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie h3 { font-size: 1.12rem; }
.faq__pytanie::after { content: ''; flex: none; width: 10px; height: 10px; border: solid var(--czerwien); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); margin-top: -5px; transition: transform .2s; }
.faq__pozycja[open] .faq__pytanie::after { transform: rotate(-135deg); margin-top: 5px; }
.faq__odpowiedz { padding: 0 22px 20px; }
.faq__odpowiedz p { margin: 0; }
.faq__odpowiedz p + p { margin-top: .8em; }

/* ═══════════════════════════════════════════════════════════════════════════
   JAKI MASZ PROBLEM? - [auto] z menu „problemy”: karty 4+4 (strona główna) albo wiersze (oferta)
   Link „co proponujemy” rozciągnięty na całą pozycję (::after), nazwą linku zostaje nazwa usługi.
   ═══════════════════════════════════════════════════════════════════════════ */
.problemy { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.problemy--kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.problem { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); padding: 22px 22px 20px; transition: border-color .2s, box-shadow .2s; }
.problem:hover { border-color: var(--czerwien); box-shadow: var(--cien); }
.problem__znak:empty { display: none; }
.problem__ikona { width: 54px; height: 54px; color: var(--grafit); }
.problem__tytul { font-size: 1.14rem; }
.problem__opis { margin: 0; color: var(--grafit-2); font-size: 1rem; line-height: 1.5; }
.problem__cel { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 8px; color: var(--czerwien-ciemna); font-weight: 700; line-height: 1.3; text-decoration: none; }
.problem__cel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.problem:hover .problem__cel span { text-decoration: underline; text-underline-offset: 3px; }
.problemy--lista { gap: 0; border-top: 1px solid var(--rysa); }
.problemy--lista .problem { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .9fr); align-items: center; gap: 6px 22px; padding: 16px 12px; background: none; border: 0; border-bottom: 1px solid var(--rysa); border-radius: 0; }
.problemy--lista .problem:hover { box-shadow: none; background: rgba(255, 255, 255, .7); }
.problemy--lista .problem__znak:empty { display: block; }
.problemy--lista .problem__ikona { width: 44px; height: 44px; }
.problemy--lista .problem__tytul { font-size: 1.06rem; }
.problemy--lista .problem__cel { margin-top: 0; padding-top: 0; justify-self: end; text-align: right; }
@media (max-width: 960px) { .problemy--kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.problemy--lista .problem { grid-template-columns: 40px minmax(0, 1fr); padding-inline: 4px; }
	.problemy--lista .problem__opis, .problemy--lista .problem__cel { grid-column: 2; justify-self: start; text-align: left; }
}
/* Telefon: dalej 2 w rzędzie (dev §4.4: „tablet i telefon 2 w rzędzie”), karta ciaśniej i mniejszym pismem. */
@media (max-width: 520px) {
	.problemy--kafle { gap: 10px; }
	.problemy--kafle .problem { gap: 8px; padding: 14px 12px 14px; }
	.problemy--kafle .problem__ikona { width: 40px; height: 40px; }
	.problemy--kafle .problem__tytul { font-size: .98rem; line-height: 1.2; }
	.problemy--kafle .problem__opis { font-size: .9rem; line-height: 1.45; }
	.problemy--kafle .problem__cel { font-size: .9rem; gap: 4px; }
	.problemy--kafle .problem__cel .ikona { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KATALOG USŁUG - [auto] z menu głównego: 3 kolumny linków albo karty z opisem
   ═══════════════════════════════════════════════════════════════════════════ */
.katalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.2vw, 44px); }
.katalog__tytul { font-size: 1.2rem; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--czerwien); }
.katalog__tytul a { color: inherit; text-decoration: none; }
.katalog__tytul a:hover { color: var(--czerwien-ciemna); text-decoration: underline; text-underline-offset: 3px; }
.katalog__lista { display: grid; list-style: none; margin: 0; padding: 0; }
.katalog--linki .katalog__lista { gap: 8px; }
/* Wąskie panele zamiast suchych linków (uwaga użytkownika 2026-10-12). Wszystkie jednakowe - bez zdjęć i wyróżnień,
   więc tarasy i balkon nie są eksponowane (dev §4.5, cop §12). */
.katalog--linki .katalog__lista a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 10px 14px 10px 16px; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien-maly); color: var(--grafit); font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color .2s, color .2s, box-shadow .2s; }
.katalog--linki .katalog__lista a::after { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border: solid var(--czerwien); border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 4px; }
.katalog--linki .katalog__lista a:hover { border-color: var(--czerwien); color: var(--czerwien-ciemna); box-shadow: var(--cien); }
.katalog--karty { grid-template-columns: 1fr; }
/* Pełne rzędy (dev §10.1) przy dowolnej liczbie usług w silosie: siatka 12 ścieżek, karta = 3 (cztery w rzędzie),
   karty ostatniego, niepełnego rzędu dzielą całą szerokość między siebie (1 → 12, 2 → 6, 3 → 4). */
.katalog--karty .katalog__lista { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 961px) {
	.katalog--karty .katalog__karta { grid-column: span 3; }
	.katalog--karty .katalog__karta:nth-child(4n+1):last-child { grid-column: span 12; }
	.katalog--karty .katalog__karta:nth-child(4n+1):nth-last-child(2),
	.katalog--karty .katalog__karta:nth-child(4n+1):nth-last-child(2) + .katalog__karta { grid-column: span 6; }
	.katalog--karty .katalog__karta:nth-child(4n+1):nth-last-child(3),
	.katalog--karty .katalog__karta:nth-child(4n+1):nth-last-child(3) ~ .katalog__karta { grid-column: span 4; }
}
@media (max-width: 960px) {
	.katalog--karty .katalog__karta { grid-column: span 6; }
	.katalog--karty .katalog__karta:nth-child(2n+1):last-child { grid-column: span 12; }
}
@media (max-width: 520px) { .katalog--karty .katalog__karta { grid-column: span 12; } }
.katalog__karta { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); padding: 18px 20px 20px; transition: border-color .2s, box-shadow .2s; }
.katalog__karta:hover { border-color: var(--czerwien); box-shadow: var(--cien); }
.katalog__ikona { width: 44px; height: 44px; }
.katalog__nazwa { font-family: var(--font-display); font-weight: 760; font-size: 1.08rem; line-height: 1.25; color: var(--grafit); text-decoration: none; }
.katalog__nazwa::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.katalog__opis { margin: 0; color: var(--grafit-2); font-size: 1rem; line-height: 1.5; }
@media (max-width: 960px) { .katalog--linki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .katalog--linki { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   POWIĄZANE ARTYKUŁY - [auto], napis z Ustawień bez Hx
   ═══════════════════════════════════════════════════════════════════════════ */
.artykuly__napis { margin: 0 0 16px; color: var(--grafit-2); }
/* 2-6 kart zawsze w pełnych rzędach (dev §10.1): klasa artykuly--N z liczbą kart, siatka 12 ścieżek -
   2 = 2, 3 = 3, 4 = 4 (obok panelu bocznego 2+2), 5 = 3+2, 6 = 3+3. Na telefonie lista: miniatura + tytuł. */
.artykuly { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.artykul { grid-column: 1 / -1; }
/* Rozpiętości tylko od 761 px - reguły z :nth-child przebijały mobilne `1 / -1` (karty 4-5 z 5 w pół szerokości). */
@media (min-width: 761px) {
	.artykul { grid-column: span 4; }
	.artykuly--2 .artykul { grid-column: span 6; }
	.artykuly--4 .artykul { grid-column: span 3; }
	.uklad-uslugi .artykuly--4 .artykul { grid-column: span 6; }
	.artykuly--5 .artykul:nth-child(n+4) { grid-column: span 6; }
}
.artykul a { display: flex; flex-direction: column; height: 100%; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); overflow: hidden; color: var(--grafit); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.artykul a:hover { border-color: var(--czerwien); box-shadow: var(--cien); }
.artykul__obraz { display: block; background: var(--beton); } /* tło = zaślepka, zanim leniwe zdjęcie się wczyta */
.artykul img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.artykul__tytul { display: block; min-width: 0; padding: 14px 18px 18px; font-weight: 700; line-height: 1.35; overflow-wrap: break-word; } /* element flex: bez min-width 0 długie słowo wypychało kartę na 320 px */
/* Telefon: lista - miniatura na całą wysokość karty po lewej, tytuł obok (uwaga użytkownika 2026-10-13: miniatura
   84 px wisiała pośrodku z pustymi pasami nad i pod). Obraz absolutnie w ramce, bo w flexie img brał wysokość pliku. */
@media (max-width: 760px) {
	.artykul a { flex-direction: row; }
	.artykul__obraz { position: relative; flex: 0 0 112px; min-height: 96px; }
	.artykul__obraz img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
	.artykul__tytul { align-self: center; padding: 12px 16px; font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAPA STRONY - [auto], drzewo z menu
   ═══════════════════════════════════════════════════════════════════════════ */
.mapa-strony ul { list-style: none; margin: 0; padding: 0; }
.mapa-strony > ul { display: grid; gap: 22px; }
.mapa-strony > ul > li > a, .mapa-strony > ul > li > span { font-family: var(--font-display); font-weight: 760; font-size: 1.12rem; }
.mapa-strony ul ul { margin-top: 8px; padding-left: 18px; border-left: 2px solid var(--rysa); }
.mapa-strony ul ul li { margin: 5px 0; }
.mapa-strony ul ul > li > span { font-weight: 700; }
.mapa-strony a { color: var(--grafit); }
.mapa-strony a:hover { color: var(--czerwien-ciemna); }

/* ═══════════════════════════════════════════════════════════════════════════
   DANE KONTAKTOWE (layout `salon`) - 2 lokalizacje, kontakt z ikonami, mapa obok
   ═══════════════════════════════════════════════════════════════════════════ */
.salon__tekst { margin-bottom: clamp(20px, 2.6vw, 32px); }
.salon { display: grid; gap: 22px; }
.salon--z-mapa { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; }
.salon__karta { display: flex; flex-direction: column; gap: 22px; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien-duzy); padding: clamp(22px, 3vw, 36px); }
.salon__lokalizacje { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.salon__adres { font-style: normal; line-height: 1.55; }
.salon__etykieta { display: block; margin-bottom: 2px; font-family: var(--font-display); font-weight: 760; }
.salon__kontakt { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.salon__kontakt li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.salon__kontakt li > a { display: inline-flex; align-items: center; gap: 12px; color: var(--grafit); text-decoration: none; overflow-wrap: anywhere; }
.salon__kontakt li > a:hover { color: var(--czerwien-ciemna); }
.salon__kontakt .ikona { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--czerwien); }
.salon__kontakt li > a .ikona { margin-top: 0; }
.salon__telefon a { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.salon__nip { margin: 0; color: var(--grafit-2); }
.salon__przyciski { margin-top: auto; }
.salon__mapa { min-height: 360px; border-radius: var(--promien-duzy); overflow: hidden; background: var(--beton); }
.salon__mapa iframe { display: block; width: 100%; height: 100%; min-height: 360px; }
@media (max-width: 860px) { .salon--z-mapa { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .salon__lokalizacje { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARZ „UMÓW OGLĘDZINY” (Contact Form 7) - wstęp obok, pola w karcie
   Klasy `hs-*` pochodzą z szablonu formularza w CF7 (cms/seed/seed-formularze.mjs).
   ═══════════════════════════════════════════════════════════════════════════ */
.formularz-uklad { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.formularz { background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien-duzy); padding: clamp(22px, 3vw, 36px); box-shadow: var(--cien); }
.formularz--zastepczy { display: grid; gap: 12px; }
.formularz--zastepczy p { margin: 0; }
.hs-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.hs-pole { margin: 0 0 16px; }
.hs-pole label { display: block; margin-bottom: 6px; font-weight: 700; }
.formularz .wpcf7-form-control:not(.wpcf7-submit):not([type="file"]) { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #A9B2B8; border-radius: var(--promien-maly); background: var(--biel); color: var(--grafit); font: inherit; }
.formularz textarea.wpcf7-form-control { min-height: 150px; resize: vertical; }
/* Pole „zdjęcie”: natywne pole pliku miało 21 px wysokości - za mały cel na telefonie (audyt 2026-10-13). */
.formularz input[type="file"] { width: 100%; min-height: 48px; padding: 2px 0; font: inherit; }
.formularz input[type="file"]::file-selector-button { min-height: 44px; margin-right: 12px; padding: 0 16px; border: 1px solid #A9B2B8; border-radius: var(--promien-maly); background: var(--beton); color: var(--grafit); font: inherit; font-weight: 700; cursor: pointer; }
.formularz .wpcf7-form-control:focus { outline: 3px solid rgba(205, 33, 34, .22); outline-offset: 0; border-color: var(--czerwien); }
.formularz .wpcf7-not-valid { border-color: var(--czerwien) !important; }
.formularz .wpcf7-not-valid-tip { display: block; margin-top: 4px; color: var(--czerwien-ciemna); font-size: .92rem; }
.hs-uwaga { margin: -4px 0 16px; color: var(--grafit-2); font-size: .95rem; }
.hs-pulapka { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hs-wyslij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 0; }
.hs-rodo { margin: 18px 0 0; color: var(--grafit-2); font-size: .86rem; line-height: 1.5; }
.hs-rodo a { color: var(--czerwien-ciemna); }
.formularz .wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--promien-maly); }
@media (max-width: 860px) { .formularz-uklad { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .hs-siatka { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG - wpis (treść 1:1 ze starej strony: spis treści, bloki FAQ, obrazy z prawej) i lista /blog/
   ═══════════════════════════════════════════════════════════════════════════ */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sekcja--wpis, .sekcja--lista { padding-top: clamp(18px, 2.6vw, 32px); }
.wpis__naglowek { margin: 0 0 clamp(18px, 2.4vw, 28px); }
.wpis__naglowek h1, .lista__naglowek { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; }
.wpis__meta { margin: 12px 0 0; color: var(--grafit-2); font-size: .95rem; }
.wpis__obraz { margin: 0 0 clamp(24px, 3vw, 36px); }
.wpis__obraz img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--promien-duzy); }
.tresc--wpis { font-size: 1.1rem; }
.tresc--wpis::after { content: ''; display: table; clear: both; }
.tresc--wpis h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-top: 1.7em; }
.tresc--wpis h3 { font-size: 1.22rem; margin-top: 1.4em; }
.tresc--wpis h2, .tresc--wpis h3 { scroll-margin-top: calc(var(--wysokosc-naglowka) + 16px); }
.tresc--wpis h5, .tresc--wpis .spis-tresci__naglowek { font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tresc--wpis blockquote { margin: 1.2em 0; padding: 14px 20px; border-left: 4px solid var(--czerwien); background: var(--beton); border-radius: 0 var(--promien-maly) var(--promien-maly) 0; }
.tresc--wpis blockquote p { margin: 0; }
.tresc--wpis hr { border: 0; border-top: 1px solid var(--rysa); margin: 2em 0; }
.tresc--wpis img { max-width: 100%; height: auto; border-radius: var(--promien-maly); }
.tresc--wpis .alignright { float: right; max-width: 45%; margin: 6px 0 16px 28px; }
.tresc--wpis .alignleft { float: left; max-width: 45%; margin: 6px 28px 16px 0; }
.tresc--wpis .aligncenter { display: block; margin: 1.4em auto; }
.tresc--wpis figure { margin: 1.6em 0; text-align: center; }
.tresc--wpis figcaption { margin-top: 8px; color: var(--grafit-2); font-size: .92rem; }
.tresc--wpis .spis-tresci { margin: 1.4em 0; padding: 18px 22px; background: var(--beton); border: 1px solid var(--rysa); border-radius: var(--promien); font-size: 1rem; }
.tresc--wpis .spis-tresci ul ul { margin-top: .4em; }
.tresc--wpis .gogler-faq-question { padding: 14px 0; border-top: 1px solid var(--rysa); }
.tresc--wpis .gogler-faq-question-title { margin: 0 0 6px; font-size: 1.12rem; }
.tresc--wpis .gogler-faq-answer-text { margin: 0; }
.sekcja--box-wpisu { padding-block: 0 clamp(28px, 4vw, 48px); }
.wpis__faq { margin-top: clamp(28px, 4vw, 44px); }
.wpis__faq h2 { margin-bottom: 18px; }
@media (max-width: 640px) {
	.tresc--wpis { font-size: 1.05rem; }
	.tresc--wpis .alignright, .tresc--wpis .alignleft { float: none; display: block; max-width: 100%; margin: 1em auto; }
}

/* Lista /blog/: pierwszy (najnowszy) wpis na całą szerokość, dalej rzędy po trzy (na tablecie po dwa) -
   karty niepełnego ostatniego rzędu dzielą szerokość między siebie (dev §10.1: bez niepełnych rzędów). */
.lista-wpisow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; }
.karta-wpisu { grid-column: span 4; }
.karta-wpisu:first-child { grid-column: 1 / -1; }
.karta-wpisu__link { display: flex; flex-direction: column; height: 100%; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); overflow: hidden; color: var(--grafit); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.karta-wpisu__link:hover { border-color: var(--czerwien); box-shadow: var(--cien); }
.karta-wpisu__obraz img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.karta-wpisu__tresc { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 20px; }
.karta-wpisu__data { color: var(--grafit-2); font-size: .9rem; }
.karta-wpisu__tytul { font-size: 1.15rem; line-height: 1.25; }
.karta-wpisu__link:hover .karta-wpisu__tytul { color: var(--czerwien-ciemna); }
.karta-wpisu__zajawka { color: var(--grafit-2); font-size: .98rem; line-height: 1.5; }
@media (min-width: 961px) {
	.karta-wpisu:first-child .karta-wpisu__link { flex-direction: row; }
	/* Obraz absolutnie: inaczej img z height:100% brał wysokość z naturalnego rozmiaru pliku (2000 px → karta 1500 px). */
	.karta-wpisu:first-child .karta-wpisu__obraz { position: relative; flex: 0 0 52%; min-height: 320px; }
	.karta-wpisu:first-child .karta-wpisu__obraz img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.karta-wpisu:first-child .karta-wpisu__tresc { justify-content: center; padding: clamp(24px, 3vw, 44px); }
	.karta-wpisu:first-child .karta-wpisu__tytul { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
	.karta-wpisu:nth-child(3n+2):last-child { grid-column: 1 / -1; }
	.karta-wpisu:nth-child(3n+2):nth-last-child(2),
	.karta-wpisu:nth-child(3n+2):nth-last-child(2) + .karta-wpisu { grid-column: span 6; }
}
@media (max-width: 960px) {
	.karta-wpisu:not(:first-child) { grid-column: span 6; }
	.karta-wpisu:nth-child(2n):last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .karta-wpisu:not(:first-child) { grid-column: 1 / -1; } }

.pagination { margin-top: clamp(28px, 4vw, 44px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--rysa); border-radius: var(--promien-maly); background: var(--biel); color: var(--grafit); font-weight: 700; text-decoration: none; }
.pagination a.page-numbers:hover { border-color: var(--czerwien); color: var(--czerwien-ciemna); }
.pagination .page-numbers.current { background: var(--grafit); border-color: var(--grafit); color: #fff; }
.pagination .page-numbers.dots { border: 0; background: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   KAFELKI, KARTY WPISÓW, POZOSTAŁE SZABLONY
   ═══════════════════════════════════════════════════════════════════════════ */
.kafelki { display: grid; grid-template-columns: repeat(var(--kolumny, 4), minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.kafelki--2 { --kolumny: 2; } .kafelki--3 { --kolumny: 3; } .kafelki--4 { --kolumny: 4; }
.kafelek { background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.kafelek--link:hover { border-color: var(--czerwien); box-shadow: var(--cien); }
.kafelek__wrap { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.kafelek__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kafelek__ikona { width: 44px; height: 44px; margin: 20px 20px 0; color: var(--czerwien); }
.kafelek__tytul, .kafelek__opis { margin: 0; padding: 0 20px; }
.kafelek__tytul { padding-top: 18px; }
.kafelek--link .kafelek__tytul { color: var(--grafit); }
.kafelek--link:hover .kafelek__tytul { color: var(--czerwien-ciemna); }
.kafelek__opis { padding-bottom: 20px; color: var(--grafit-2); font-size: 1rem; margin-top: 8px; }
.kafelek__liczba { display: block; padding: 4px 20px 0; color: var(--czerwien-ciemna); font-weight: 700; font-size: .95rem; }
.kafelek__opis--akcja { margin-top: auto; padding-top: 10px; color: var(--czerwien-ciemna); font-weight: 700; } /* podpis-akcja na dole kafla, równo w rzędzie */
.kafelek--link:hover .kafelek__opis--akcja { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
	.kafelki { --kolumny: 2 !important; } /* rzędy pełne 4/2/2 (dev §10.1) */
	.kafelki > .kafelek:nth-child(2n+1):last-child { grid-column: 1 / -1; } /* nieparzysta liczba: ostatni na całą szerokość */
}
@media (max-width: 520px) {
	.kafelki { gap: 10px; }
	.kafelek__tytul, .kafelek__opis { padding-inline: 12px; }
	.kafelek__tytul { padding-top: 12px; font-size: 1rem; line-height: 1.2; }
	.kafelek__opis { padding-bottom: 14px; font-size: .9rem; line-height: 1.45; }
	.kafelek__liczba { padding-inline: 12px; font-size: .88rem; }
}
.siatka-kart { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.karta { background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); overflow: hidden; }
.karta__tresc { padding: 18px 20px 22px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ODŚWIEŻENIE WYGLĄDU (uwagi klienta 2026-10-19) - warianty sekcji wybierane w panelu;
   dostępne na każdej stronie. Ostre rogi i typografia: tokeny w style.css (§1-2).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ciemne tło sekcji (przeplatanie) ── */
.sekcja--grafit { background: var(--grafit); color: var(--stopka-tekst); }
.sekcja--grafit h2, .sekcja--grafit h3 { color: #fff; }
.sekcja--grafit .lead-sekcji { color: var(--stopka-tekst); }
.sekcja--grafit .lead-sekcji a, .sekcja--grafit .tresc a { color: #fff; }

/* ── Kafelki „tytuł na zdjęciu”: pionowe zdjęcia, tekst na przyciemnionym dole; bez zoomu (preferencja przestrzeni) ── */
.kafelki--na-zdjeciu { gap: clamp(10px, 1.4vw, 18px); }
.kafelki--na-zdjeciu .kafelek { position: relative; border: 0; background: var(--grafit); }
.kafelki--na-zdjeciu .kafelek__wrap { position: relative; justify-content: flex-end; aspect-ratio: 3 / 4; padding: clamp(18px, 2vw, 26px); color: #fff; }
.kafelki--na-zdjeciu .kafelek__obraz { position: absolute; inset: 0; }
.kafelki--na-zdjeciu .kafelek__obraz img { height: 100%; aspect-ratio: auto; }
.kafelki--na-zdjeciu .kafelek__wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 17, 19, .94) 0%, rgba(14, 17, 19, .68) 36%, rgba(14, 17, 19, .06) 68%); }
.kafelki--na-zdjeciu .kafelek__wrap::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 5px; background: var(--czerwien); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.kafelki--na-zdjeciu .kafelek--link:hover .kafelek__wrap::before, .kafelki--na-zdjeciu .kafelek__wrap:focus-visible::before { transform: scaleX(1); }
.kafelki--na-zdjeciu .kafelek__tytul, .kafelki--na-zdjeciu .kafelek__opis { position: relative; z-index: 1; padding: 0; }
.kafelki--na-zdjeciu .kafelek__tytul, .kafelki--na-zdjeciu .kafelek--link:hover .kafelek__tytul { color: #fff; }
.kafelki--na-zdjeciu .kafelek__tytul { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-variation-settings: 'wdth' 112; }
.kafelki--na-zdjeciu .kafelek__opis { margin-top: 10px; color: rgba(255, 255, 255, .84); font-size: .98rem; line-height: 1.5; }
.kafelki--na-zdjeciu .kafelek__liczba { position: relative; z-index: 1; order: -1; margin-bottom: 8px; padding: 0; color: rgba(255, 255, 255, .8); font-size: .9rem; } /* albumy realizacji: „N zdjęć” nad tytułem */
.kafelki--na-zdjeciu .kafelek__opis--akcja { color: #fff; }
@media (max-width: 640px) {
	.kafelki.kafelki--na-zdjeciu { --kolumny: 1 !important; }
	.kafelki--na-zdjeciu .kafelek__wrap { aspect-ratio: 4 / 3; }
}

/* ── Karty „Jaki masz problem?” ze zdjęciem problemu zamiast ikony ── */
.problem--zdjecie { padding-top: 0; overflow: hidden; }
.problem__zdjecie { display: block; margin: 0 -22px 6px; }
.problem__zdjecie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 520px) { .problemy--kafle .problem__zdjecie { margin: 0 -12px 4px; } }

/* ── Tekst ze zdjęciem „do krawędzi”: zdjęcie od środka ekranu do prawej krawędzi, na całą wysokość sekcji ── */
@media (min-width: 961px) {
	.sekcja--obraz-krawedz { position: relative; display: flex; align-items: center; min-height: clamp(560px, 46vw, 760px); }
	.sekcja--obraz-krawedz .kontener > h2, .sekcja--obraz-krawedz .tresc { max-width: calc(50% - clamp(28px, 4vw, 72px)); }
	.sekcja--obraz-krawedz .tekst-uklad { display: block; }
	.sekcja--obraz-krawedz .tekst-uklad__obraz { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
	.sekcja--obraz-krawedz .tekst-uklad__obraz img { border-radius: 0; }
}
@media (max-width: 760px) {
	.sekcja--obraz-krawedz { padding-bottom: 0; } /* zdjęcie jest ostatnie w sekcji - dochodzi do następnej, bez białego paska */
	.sekcja--obraz-krawedz .tekst-uklad__obraz { margin-inline: calc(-1 * var(--margines)); }
	.sekcja--obraz-krawedz .tekst-uklad__obraz img { height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
}

/* ── Pas CTA „ze zdjęciem w tle”: mocno przyciemnione zdjęcie z realizacji, napis na nim ── */
.sekcja--cta-zdjecie { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 11vw, 150px); background: var(--grafit); }
.cta__tlo { position: absolute; inset: 0; z-index: -1; }
.cta__tlo img { width: 100%; height: 100%; object-fit: cover; }
.cta__tlo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 17, 19, .9) 0%, rgba(14, 17, 19, .74) 55%, rgba(14, 17, 19, .52) 100%); }
.cta--zdjecie h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); max-width: 14em; }
.cta--zdjecie p { max-width: 40em; margin-top: 14px; color: rgba(255, 255, 255, .88); font-size: clamp(1.08rem, 1.4vw, 1.25rem); }
.cta--zdjecie .przycisk { min-height: 56px; padding: 0 28px; }
.cta--zdjecie .przycisk--obrys { border-color: rgba(255, 255, 255, .85); color: #fff; }
.cta--zdjecie .przycisk--obrys:hover { background: #fff; border-color: #fff; color: var(--grafit); }

/* ── Galeria „mozaika”: jedno duże zdjęcie (2 rzędy) i cztery mniejsze; podpis-link na zdjęciu ── */
.galeria--mozaika { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 17vw, 270px); gap: clamp(8px, 1vw, 12px); }
.galeria--mozaika .galeria__pozycja:first-child { grid-row: span 2; }
.galeria--mozaika .galeria__figura { position: relative; height: 100%; }
.galeria--mozaika .galeria__przycisk { height: 100%; }
.galeria--mozaika .galeria__obraz { height: 100%; aspect-ratio: auto; }
.galeria--mozaika .galeria__podpis { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 32px 14px 12px; background: linear-gradient(0deg, rgba(14, 17, 19, .85), rgba(14, 17, 19, 0)); pointer-events: none; }
.galeria--mozaika .galeria__podpis a { color: #fff; pointer-events: auto; }
@media (max-width: 760px) {
	.galeria--mozaika { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 40vw, 220px); }
	.galeria--mozaika .galeria__pozycja:first-child { grid-column: 1 / -1; grid-row: span 2; } /* duże zdjęcie na całą szerokość i 2 rzędy - w 1 rzędzie było płaskim paskiem */
}