/* Theme Name: G-PRO ECO ENERGY
* Theme URI: https://g-pro.com.pl
* Author: KamikStudio - Patryk Dariusz Kowalski
* Author URI: https://kamikstudio.pl
* Description: Autorski motyw WordPress dla G-PRO ECO ENERGY - fotowoltaika, pompy ciepla, dachy, magazyny energii, klimatyzacja, stacje ladowania i monitoring. Kalisz i poludniowa Wielkopolska.
* Version: 1.0.0
* Requires at least: 6.5
* Requires PHP: 8.1
* License: Licencja wlasnosciowa KamikStudio
* Text Domain: gpro
* Tags: business, local-business, responsive, custom-menu, featured-images, seo-friendly
*/
/**
 * Projekt: G-PRO ECO ENERGY - nowa strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-09
 * Wersja: 1.0.0
 * Opis: Globalne style motywu. Zmienne CSS trzymaja cala identyfikacje - kolory pochodza
 *       z logotypu G-PRO (granat #052C63, zielen #41B000, blekit #3D87CC).
 */

/* ============================================================
   1. ZMIENNE - JEDYNE ZRODLO PRAWDY DLA CALEJ IDENTYFIKACJI
   ============================================================ */
:root{--granat:#052c63;--granat-ciemny:#03203f;--granat-jasny:#0e4a8f;--blekit:#3d87cc;--blekit-jasny:#e8f1fa;--zielen:#41b000;--zielen-ciemna:#348c00;--zielen-jasna:#f0f9e8;--biel:#fff;--tlo:#fff;--tlo-szare:#f5f7fa;--tlo-szare-2:#eaeef3;--tekst:#1c2733;--tekst-drugi:#5a6b7d;--tekst-jasny:#fff;--obramowanie:#dde3ea;--obramowanie-mocna:#c3cdd8;--blad:#c62828;--font:'Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-naglowki:'Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--tekst-xs:.75rem;--tekst-sm:.875rem;--tekst-base:1rem;--tekst-lg:1.125rem;--tekst-xl:1.25rem;--tekst-2xl:1.5rem;--tekst-3xl:1.875rem;--tekst-4xl:2.25rem;--tekst-5xl:2.75rem;--tekst-6xl:3.5rem;--waga-normalna:400;--waga-srednia:500;--waga-polgruba:600;--waga-gruba:700;--interlinia-ciasna:1.15;--interlinia:1.6;--interlinia-luzna:1.75;--odstep-xs:.25rem;--odstep-sm:.5rem;--odstep-md:1rem;--odstep-lg:1.5rem;--odstep-xl:2rem;--odstep-2xl:3rem;--odstep-3xl:4.5rem;--odstep-4xl:6rem;--zaokr-sm:4px;--zaokr:8px;--zaokr-lg:14px;--zaokr-xl:20px;--zaokr-pelne:9999px;--cien-sm:0 1px 2px rgba(5,44,99,.06);--cien:0 4px 14px rgba(5,44,99,.08);--cien-lg:0 12px 32px rgba(5,44,99,.12);--cien-xl:0 24px 56px rgba(5,44,99,.16);--przejscie:200ms cubic-bezier(.4,0,.2,1);--przejscie-wolne:400ms cubic-bezier(.4,0,.2,1);--kontener:1240px;--kontener-waski:820px;--padding-boczny:1.25rem;--wys-naglowka:78px;--z-dropdown:1000;--z-sticky:1020;--z-naglowek:1030;--z-modal:1040;--z-cookie:1050}

/* ============================================================
   2. RESET I PODSTAWY
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:calc(var(--wys-naglowka) + 1rem);-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{font-family:var(--font);font-size:var(--tekst-base);line-height:var(--interlinia);color:var(--tekst);background:var(--tlo);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{font-family:var(--font-naglowki);font-weight:var(--waga-gruba);line-height:var(--interlinia-ciasna);color:var(--granat);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,var(--tekst-6xl))}
h2{font-size:clamp(1.65rem,1.2rem + 1.9vw,var(--tekst-4xl))}
h3{font-size:clamp(1.3rem,1.1rem + .8vw,var(--tekst-2xl))}
h4{font-size:var(--tekst-xl)}
h5{font-size:var(--tekst-lg)}
h6{font-size:var(--tekst-base)}
p{margin-bottom:var(--odstep-md);text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--granat-jasny);text-decoration:none;transition:color var(--przejscie)}
a:hover{color:var(--zielen-ciemna)}
img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{padding-left:1.25rem;margin-bottom:var(--odstep-md)}
li{margin-bottom:.4rem}
li:last-child{margin-bottom:0}
strong,b{font-weight:var(--waga-polgruba)}
hr{border:0;border-top:1px solid var(--obramowanie);margin:var(--odstep-xl) 0}
::selection{background:var(--zielen);color:#fff}
::-moz-selection{background:var(--zielen);color:#fff}
*:focus-visible{outline:3px solid var(--zielen);outline-offset:3px;border-radius:2px}
body{scrollbar-color:var(--granat) var(--tlo-szare);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--tlo-szare)}
::-webkit-scrollbar-thumb{background:var(--granat);border-radius:var(--zaokr-pelne);border:3px solid var(--tlo-szare)}
::-webkit-scrollbar-thumb:hover{background:var(--granat-jasny)}

/* ============================================================
   3. UKLAD - KONTENERY I SEKCJE
   ============================================================ */
.kontener{width:100%;max-width:var(--kontener);margin-inline:auto;padding-inline:var(--padding-boczny)}
.kontener--waski{max-width:var(--kontener-waski)}
.sekcja{padding-block:clamp(3rem,2rem + 4vw,var(--odstep-4xl))}
.sekcja--ciasna{padding-block:clamp(2rem,1.5rem + 2.5vw,var(--odstep-2xl))}
.sekcja--szara{background:var(--tlo-szare)}
.sekcja--granat{background:var(--granat);color:rgba(255,255,255,.88)}
.sekcja--granat h1,.sekcja--granat h2,.sekcja--granat h3,.sekcja--granat h4{color:#fff}
.sekcja--granat a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sekcja__naglowek{max-width:60ch;margin-bottom:var(--odstep-2xl)}
.sekcja__naglowek--srodek{margin-inline:auto;text-align:center}
.sekcja__nadtytul{display:block;font-size:var(--tekst-sm);font-weight:var(--waga-gruba);letter-spacing:.12em;text-transform:uppercase;color:var(--zielen-ciemna);margin-bottom:var(--odstep-sm)}
.sekcja--granat .sekcja__nadtytul{color:#8ede4d}
.sekcja__opis{font-size:var(--tekst-lg);color:var(--tekst-drugi);margin-top:var(--odstep-md)}
.sekcja--granat .sekcja__opis{color:rgba(255,255,255,.82)}

/* ============================================================
   4. PRZYCISKI
   ============================================================ */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.85rem 1.75rem;font-family:var(--font);font-size:var(--tekst-base);font-weight:var(--waga-polgruba);line-height:1.2;text-align:center;border:2px solid transparent;border-radius:var(--zaokr);cursor:pointer;transition:background var(--przejscie),border-color var(--przejscie),color var(--przejscie),transform var(--przejscie),box-shadow var(--przejscie)}
.przycisk:hover{transform:translateY(-2px)}
.przycisk:active{transform:translateY(0)}
.przycisk--glowny{background:var(--zielen);border-color:var(--zielen);color:#fff;box-shadow:0 4px 14px rgba(65,176,0,.28)}
.przycisk--glowny:hover{background:var(--zielen-ciemna);border-color:var(--zielen-ciemna);color:#fff;box-shadow:0 8px 22px rgba(65,176,0,.34)}
.przycisk--granat{background:var(--granat);border-color:var(--granat);color:#fff}
.przycisk--granat:hover{background:var(--granat-jasny);border-color:var(--granat-jasny);color:#fff}
.przycisk--obrys{background:transparent;border-color:var(--granat);color:var(--granat)}
.przycisk--obrys:hover{background:var(--granat);color:#fff}
.przycisk--obrys-bialy{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.przycisk--obrys-bialy:hover{background:#fff;border-color:#fff;color:var(--granat)}
.przycisk--pelna{width:100%}
.przycisk svg{width:18px;height:18px;flex-shrink:0}

/* ============================================================
   5. NAGLOWEK STRONY
   ============================================================ */
/* Bez backdrop-filter. Ta wlasciwosc tworzy blok zawierajacy dla potomkow position:fixed,
   przez co menu mobilne pozycjonowalo sie wzgledem naglowka zamiast wzgledem ekranu
   i po przewinieciu strony otwieralo sie poza widokiem. */
.naglowek{position:sticky;top:0;z-index:var(--z-naglowek);background:#fff;border-bottom:1px solid var(--obramowanie);transition:box-shadow var(--przejscie)}
.naglowek--przewiniety{box-shadow:var(--cien)}
.naglowek__wnetrze{display:flex;align-items:center;justify-content:space-between;gap:var(--odstep-lg);min-height:var(--wys-naglowka)}
.naglowek__logo{flex-shrink:0;display:flex;align-items:center}
.naglowek__logo img{height:52px;width:auto}
.naglowek__prawa{display:flex;align-items:center;gap:var(--odstep-lg)}
.naglowek__telefon{display:inline-flex;align-items:center;gap:.5rem;font-weight:var(--waga-gruba);font-size:var(--tekst-lg);color:var(--granat);white-space:nowrap}
.naglowek__telefon:hover{color:var(--zielen-ciemna)}
.naglowek__telefon svg{width:20px;height:20px;flex-shrink:0}

/* Menu glowne */
.menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.menu li{margin:0;position:relative}
.menu > li > a{display:flex;align-items:center;gap:.35rem;padding:.7rem .85rem;font-size:var(--tekst-base);font-weight:var(--waga-srednia);color:var(--tekst);border-radius:var(--zaokr-sm)}
.menu > li > a:hover,.menu > li.current-menu-item > a,.menu > li.current-page-ancestor > a{color:var(--granat);background:var(--blekit-jasny)}
.menu > li.menu-item-has-children > a::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--przejscie)}
.menu > li.menu-item-has-children:hover > a::after{transform:rotate(225deg) translateY(-2px)}
.menu .sub-menu{position:absolute;top:100%;left:0;min-width:260px;list-style:none;margin:0;padding:.5rem;background:#fff;border:1px solid var(--obramowanie);border-radius:var(--zaokr-lg);box-shadow:var(--cien-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--przejscie),transform var(--przejscie),visibility var(--przejscie);z-index:var(--z-dropdown)}
.menu li:hover > .sub-menu,.menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu .sub-menu a{display:block;padding:.65rem .85rem;font-size:var(--tekst-base);color:var(--tekst);border-radius:var(--zaokr-sm)}
.menu .sub-menu a:hover{background:var(--blekit-jasny);color:var(--granat)}

/* Hamburger */
.hamburger{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--obramowanie);border-radius:var(--zaokr);cursor:pointer}
.hamburger__kreska{display:block;position:relative;width:22px;height:2px;background:var(--granat);transition:background var(--przejscie)}
.hamburger__kreska::before,.hamburger__kreska::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--granat);transition:transform var(--przejscie),top var(--przejscie)}
.hamburger__kreska::before{top:-7px}
.hamburger__kreska::after{top:7px}
.hamburger[aria-expanded="true"] .hamburger__kreska{background:transparent}
.hamburger[aria-expanded="true"] .hamburger__kreska::before{top:0;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] .hamburger__kreska::after{top:0;transform:rotate(-45deg)}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{position:relative;background:var(--granat-ciemny);color:#fff;overflow:hidden}
.hero__tlo{position:absolute;inset:0;z-index:0}
.hero__tlo img{width:100%;height:100%;object-fit:cover}
.hero__tlo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,32,63,.94) 0%,rgba(5,44,99,.86) 42%,rgba(5,44,99,.42) 100%)}
.hero__wnetrze{position:relative;z-index:1;padding-block:clamp(3.5rem,2.5rem + 5vw,7rem);max-width:62ch}
.hero__nadtytul{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;margin-bottom:var(--odstep-lg);font-size:var(--tekst-sm);font-weight:var(--waga-polgruba);letter-spacing:.04em;color:#fff;background:rgba(65,176,0,.22);border:1px solid rgba(65,176,0,.5);border-radius:var(--zaokr-pelne)}
.hero h1{color:#fff;margin-bottom:var(--odstep-lg)}
.hero h1 em{font-style:normal;color:#8ede4d}
.hero__opis{font-size:clamp(1.05rem,1rem + .4vw,var(--tekst-xl));color:rgba(255,255,255,.9);margin-bottom:var(--odstep-xl);max-width:52ch}
.hero__akcje{display:flex;flex-wrap:wrap;gap:var(--odstep-md)}
.hero__zaufanie{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:var(--odstep-lg) var(--odstep-2xl);margin-top:var(--odstep-2xl);padding-top:var(--odstep-lg);border-top:1px solid rgba(255,255,255,.18)}
.hero__fakt{display:flex;flex-direction:column;gap:.15rem}
.hero__fakt b{font-size:var(--tekst-2xl);font-weight:var(--waga-gruba);color:#8ede4d;line-height:1;white-space:nowrap}
.hero__fakt span{font-size:var(--tekst-sm);color:rgba(255,255,255,.78);white-space:nowrap}

/* ============================================================
   7. KAFELKI USLUG - GLOWNY ELEMENT STRONY STARTOWEJ
   Dwa duze kafle (fotowoltaika, dachy) + siatka pozostalych uslug.
   ============================================================ */
.uslugi{display:grid;gap:var(--odstep-lg)}
.uslugi__glowne{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--odstep-lg)}
.uslugi__pozostale{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--odstep-lg)}
.kafel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;padding:var(--odstep-lg);color:#fff;background:var(--granat);border-radius:var(--zaokr-lg);overflow:hidden;isolation:isolate;transition:transform var(--przejscie),box-shadow var(--przejscie)}
.kafel:hover{transform:translateY(-4px);box-shadow:var(--cien-xl);color:#fff}
.kafel__foto{position:absolute;inset:0;z-index:-2}
.kafel__foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--przejscie-wolne)}
.kafel:hover .kafel__foto img{transform:scale(1.05)}
.kafel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(3,32,63,.94) 0%,rgba(3,32,63,.74) 40%,rgba(3,32,63,.34) 72%,rgba(3,32,63,.30) 100%)}
/* Ikona dostaje wlasna podkladke - bez niej biala kreska ginie na jasnym zdjeciu.
   Dzieki temu kafel wyglada tak samo dobrze niezaleznie od tego, jakie zdjecie wgra klient. */
.kafel__ikona{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;padding:10px;margin-bottom:var(--odstep-md);background:rgba(3,32,63,.55);border:1px solid rgba(255,255,255,.22);border-radius:var(--zaokr);backdrop-filter:blur(6px) saturate(140%);-webkit-backdrop-filter:blur(6px) saturate(140%)}
.kafel__ikona img,.kafel__ikona svg{width:100%;height:100%}
.kafel__tytul{font-size:var(--tekst-xl);font-weight:var(--waga-gruba);color:#fff;line-height:1.2;margin:0}
.kafel__opis{margin-top:.5rem;font-size:var(--tekst-sm);color:rgba(255,255,255,.86);max-width:44ch}
.kafel__strzalka{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--odstep-md);font-size:var(--tekst-sm);font-weight:var(--waga-polgruba);color:#8ede4d}
.kafel__strzalka svg{width:16px;height:16px;transition:transform var(--przejscie)}
.kafel:hover .kafel__strzalka svg{transform:translateX(4px)}
.kafel--duzy{min-height:420px;padding:var(--odstep-xl)}
.kafel--duzy .kafel__ikona{width:68px;height:68px;padding:12px}
.kafel--duzy .kafel__tytul{font-size:clamp(1.5rem,1.2rem + 1.2vw,var(--tekst-3xl))}
.kafel--duzy .kafel__opis{font-size:var(--tekst-base)}
/* Etykieta w prawym rogu - w lewym siedzi ikona uslugi i wzajemnie sie zaslanialy. */
.kafel__etykieta{position:absolute;top:var(--odstep-lg);right:var(--odstep-lg);z-index:1;max-width:calc(100% - 5.5rem);padding:.35rem .8rem;font-size:var(--tekst-xs);font-weight:var(--waga-gruba);letter-spacing:.06em;text-transform:uppercase;line-height:1.3;text-align:right;color:var(--granat-ciemny);background:#8ede4d;border-radius:var(--zaokr-pelne);box-shadow:0 2px 10px rgba(3,32,63,.28)}

/* ============================================================
   8. KARTY TRESCI
   ============================================================ */
.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--odstep-lg)}
.karta{padding:var(--odstep-xl);background:#fff;border:1px solid var(--obramowanie);border-radius:var(--zaokr-lg);transition:border-color var(--przejscie),box-shadow var(--przejscie),transform var(--przejscie)}
.karta:hover{border-color:var(--blekit);box-shadow:var(--cien-lg);transform:translateY(-3px)}
.karta__ikona{width:48px;height:48px;margin-bottom:var(--odstep-md)}
.karta__tytul{font-size:var(--tekst-xl);margin-bottom:var(--odstep-sm)}
.karta__tresc{color:var(--tekst-drugi);font-size:var(--tekst-base)}
.karta--wyroznik{border-left:4px solid var(--zielen)}

.o-firmie{display:grid;grid-template-columns:1fr 1fr;gap:var(--odstep-2xl);align-items:center}
.o-firmie__foto{border-radius:var(--zaokr-lg);overflow:hidden;box-shadow:var(--cien-lg)}
.o-firmie__foto img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* Liczby / statystyki */
.liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--odstep-lg)}
.liczba{text-align:center}
.liczba__wartosc{display:block;font-family:var(--font-naglowki);font-size:clamp(2.25rem,1.8rem + 2vw,var(--tekst-5xl));font-weight:var(--waga-gruba);line-height:1;color:var(--zielen)}
.liczba__opis{display:block;margin-top:var(--odstep-sm);font-size:var(--tekst-sm);color:var(--tekst-drugi)}
.sekcja--granat .liczba__opis{color:rgba(255,255,255,.78)}

/* Obszar dzialania - miejscowosci pogrupowane wedlug uslugi.
   Powiazanie "usluga + miasto" jest cenne dla wyszukiwarki, wiec nie splaszczamy go
   do jednej listy - kazda grupa ma wlasny naglowek. */
.obszar{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--odstep-xl) var(--odstep-2xl)}
.obszar__naglowek{font-size:var(--tekst-lg);color:#8ede4d;margin-bottom:var(--odstep-md);padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.16)}
.obszar__miasta{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.obszar__miasta li{margin:0;padding:.4rem .85rem;font-size:var(--tekst-sm);color:rgba(255,255,255,.9);background:rgba(255,255,255,.09);border-radius:var(--zaokr-pelne)}

/* ============================================================
   9. GALERIA REALIZACJI
   ============================================================ */
/* Galeria w ukladzie masonry. Kolumny CSS zamiast siatki - zdjecia z budowy maja
   rozne proporcje (pion, poziom, kwadrat) i przycinanie ich do jednego formatu
   psuje kadr. Tutaj kazde zachowuje wlasne proporcje i uklada sie ciasno. */
.galeria{columns:4;column-gap:var(--odstep-md)}
.galeria__element{break-inside:avoid;margin:0 0 var(--odstep-md);border-radius:var(--zaokr-lg);overflow:hidden;background:var(--tlo-szare-2);position:relative}
.galeria__element img{width:100%;height:auto;display:block;transition:transform var(--przejscie-wolne)}
.galeria__element:hover img{transform:scale(1.04)}
.galeria__element figcaption{position:absolute;inset:auto 0 0 0;padding:var(--odstep-lg) var(--odstep-md) var(--odstep-md);font-size:var(--tekst-sm);color:#fff;background:linear-gradient(to top,rgba(3,32,63,.92),rgba(3,32,63,0));opacity:0;transition:opacity var(--przejscie)}
.galeria__element:hover figcaption,.galeria__element:focus-within figcaption{opacity:1}
.galeria a{display:block}

/* Proces - ponumerowane etapy wspolpracy. Licznik CSS zamiast recznych numerkow,
   zeby dodanie kroku w panelu nie wymagalo poprawiania niczego w kodzie. */
.proces{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:var(--odstep-xl);list-style:none;padding:0;margin:0;counter-reset:krok}
.proces__krok{position:relative;margin:0;padding-top:var(--odstep-lg);border-top:2px solid rgba(255,255,255,.18)}
.proces__numer{display:block;font-family:var(--font-naglowki);font-size:var(--tekst-3xl);font-weight:var(--waga-gruba);line-height:1;color:#8ede4d;margin-bottom:var(--odstep-sm)}
.proces__tytul{font-size:var(--tekst-xl);color:#fff;margin-bottom:.5rem}
.proces__opis{font-size:var(--tekst-base);color:rgba(255,255,255,.8);margin:0}

/* Realizacja - metryczka z parametrami inwestycji */
.metryczka{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--odstep-md);margin-bottom:var(--odstep-2xl);padding:var(--odstep-lg);background:var(--tlo-szare);border-radius:var(--zaokr-lg)}
.metryczka__pozycja{display:flex;flex-direction:column;gap:.2rem}
.metryczka__etykieta{font-size:var(--tekst-xs);font-weight:var(--waga-gruba);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-drugi)}
.metryczka__wartosc{font-size:var(--tekst-lg);font-weight:var(--waga-polgruba);color:var(--granat)}

/* ============================================================
   10. TRESC PODSTRON (wpis / strona)
   ============================================================ */
.tresc{font-size:var(--tekst-lg);line-height:var(--interlinia-luzna);color:var(--tekst)}
.tresc > * + *{margin-top:var(--odstep-lg)}
.tresc h2{margin-top:var(--odstep-2xl)}
.tresc h3{margin-top:var(--odstep-xl)}
.tresc h2:first-child,.tresc h3:first-child{margin-top:0}
.tresc ul,.tresc ol{padding-left:1.5rem}
.tresc li::marker{color:var(--zielen)}
.tresc img,.tresc figure{border-radius:var(--zaokr-lg);overflow:hidden}
.tresc figure img{width:100%}
.tresc figcaption{margin-top:.6rem;font-size:var(--tekst-sm);color:var(--tekst-drugi);text-align:center}
.tresc blockquote{padding:var(--odstep-lg);border-left:4px solid var(--zielen);background:var(--zielen-jasna);border-radius:0 var(--zaokr) var(--zaokr) 0;font-size:var(--tekst-lg)}
.tresc a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Grafika marketingowa w tresci - plakat kwadratowy, wiec ograniczamy szerokosc,
   zeby nie zdominowal calej podstrony. */
.grafika-dotacje{max-width:560px;margin-inline:auto;border-radius:var(--zaokr-lg);overflow:hidden;box-shadow:var(--cien-lg)}
.grafika-dotacje img{width:100%;height:auto;display:block}

/* Naglowek podstrony */
.naglowek-strony{position:relative;padding-block:clamp(2.5rem,2rem + 3vw,4.5rem);background:var(--granat);color:#fff;overflow:hidden}
.naglowek-strony__tlo{position:absolute;inset:0;z-index:0;opacity:.28}
.naglowek-strony__tlo img{width:100%;height:100%;object-fit:cover}
.naglowek-strony__wnetrze{position:relative;z-index:1}
.naglowek-strony h1{color:#fff;margin-bottom:var(--odstep-sm)}
.naglowek-strony__opis{font-size:var(--tekst-lg);color:rgba(255,255,255,.85);max-width:62ch}

/* Okruszki */
.okruszki{font-size:var(--tekst-sm);margin-bottom:var(--odstep-md)}
.okruszki ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.okruszki li{margin:0;display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.7)}
.okruszki li:not(:last-child)::after{content:"/";color:rgba(255,255,255,.4)}
.okruszki a{color:rgba(255,255,255,.85);text-decoration:none}
.okruszki a:hover{color:#fff;text-decoration:underline}


/* ============================================================
   10b. FAQ - znaczniki details/summary, dzialaja bez JavaScriptu
   ============================================================ */
.faq{display:grid;gap:.75rem}
.faq__pozycja{background:#fff;border:1px solid var(--obramowanie);border-radius:var(--zaokr-lg);overflow:hidden;transition:border-color var(--przejscie),box-shadow var(--przejscie)}
.faq__pozycja[open]{border-color:var(--blekit);box-shadow:var(--cien)}
.faq__pytanie{display:flex;align-items:center;justify-content:space-between;gap:var(--odstep-md);padding:var(--odstep-lg);font-family:var(--font-naglowki);font-size:var(--tekst-lg);font-weight:var(--waga-polgruba);color:var(--granat);cursor:pointer;list-style:none;min-height:64px}
.faq__pytanie::-webkit-details-marker{display:none}
.faq__pytanie::after{content:"";flex-shrink:0;width:12px;height:12px;border-right:2px solid var(--zielen);border-bottom:2px solid var(--zielen);transform:rotate(45deg) translateY(-3px);transition:transform var(--przejscie)}
.faq__pozycja[open] .faq__pytanie::after{transform:rotate(225deg) translateY(-3px)}
.faq__pytanie:hover{background:var(--tlo-szare)}
.faq__odpowiedz{padding:0 var(--odstep-lg) var(--odstep-lg);color:var(--tekst-drugi);line-height:var(--interlinia-luzna)}

/* Paginacja listy wpisow */
.wp-block-query-pagination,.navigation.pagination{margin-top:var(--odstep-2xl)}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem}
.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 .85rem;border:1px solid var(--obramowanie);border-radius:var(--zaokr);color:var(--granat)}
.navigation.pagination .page-numbers.current{background:var(--granat);border-color:var(--granat);color:#fff}
.navigation.pagination .page-numbers:hover{border-color:var(--blekit)}

/* Menu prawne w stopce - poziomo, oddzielone kropkami */
.stopka__prawne{display:flex;flex-wrap:wrap;gap:.4rem 1rem;list-style:none;margin:0;padding:0}
.stopka__prawne li{margin:0}

/* ============================================================
   11. FORMULARZ KONTAKTOWY
   ============================================================ */
.kontakt{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:var(--odstep-2xl);align-items:start}
.kontakt__dane p{margin-bottom:var(--odstep-md)}
.kontakt__pozycja{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:var(--odstep-lg)}
.kontakt__pozycja svg{width:22px;height:22px;flex-shrink:0;margin-top:3px;color:var(--zielen)}
.kontakt__pozycja b{display:block;color:var(--granat)}
.formularz{display:grid;gap:var(--odstep-md)}
.formularz__rzad{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--odstep-md)}
.pole{display:flex;flex-direction:column;gap:.4rem}
.pole label{font-size:var(--tekst-sm);font-weight:var(--waga-polgruba);color:var(--granat)}
.pole label .wymagane{color:var(--blad)}
.pole input,.pole select,.pole textarea{width:100%;min-height:52px;padding:.8rem 1rem;font-family:var(--font);font-size:16px;color:var(--tekst);background:#fff;border:1px solid var(--obramowanie-mocna);border-radius:var(--zaokr);transition:border-color var(--przejscie),box-shadow var(--przejscie)}
.pole textarea{min-height:150px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:none;border-color:var(--blekit);box-shadow:0 0 0 3px rgba(61,135,204,.18)}
.pole input[aria-invalid="true"],.pole textarea[aria-invalid="true"]{border-color:var(--blad)}
.pole__podpowiedz{font-size:var(--tekst-sm);color:var(--tekst-drugi)}
.pole__blad{font-size:var(--tekst-sm);color:var(--blad);font-weight:var(--waga-srednia)}
.zgoda{display:flex;gap:.75rem;align-items:flex-start}
.zgoda input[type="checkbox"]{width:22px;height:22px;min-height:auto;margin-top:2px;flex-shrink:0;accent-color:var(--zielen)}
.zgoda label{font-size:var(--tekst-sm);font-weight:var(--waga-normalna);color:var(--tekst-drugi);line-height:var(--interlinia)}
.formularz__komunikat{padding:var(--odstep-md) var(--odstep-lg);border-radius:var(--zaokr);font-weight:var(--waga-srednia)}
.formularz__komunikat--ok{background:var(--zielen-jasna);border:1px solid var(--zielen);color:var(--zielen-ciemna)}
.formularz__komunikat--blad{background:#fdecec;border:1px solid var(--blad);color:var(--blad)}

/* ============================================================
   12. STOPKA
   ============================================================ */
.stopka{background:var(--granat-ciemny);color:rgba(255,255,255,.72);padding-block:var(--odstep-3xl) var(--odstep-lg);font-size:var(--tekst-base)}
.stopka__siatka{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--odstep-2xl);padding-bottom:var(--odstep-2xl)}
.stopka__tytul{font-size:var(--tekst-base);font-weight:var(--waga-gruba);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:var(--odstep-md);padding-bottom:var(--odstep-sm);border-bottom:2px solid var(--zielen);display:inline-block}
.stopka__logo{margin-bottom:var(--odstep-md)}
.stopka__logo img{height:82px;width:auto;opacity:.95}
.stopka ul{list-style:none;padding:0;margin:0}
.stopka li{margin-bottom:.55rem}
.stopka a{color:rgba(255,255,255,.72);text-decoration:none}
.stopka a:hover{color:#8ede4d}
.stopka__spod{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--odstep-md);padding-top:var(--odstep-lg);border-top:1px solid rgba(255,255,255,.12);font-size:var(--tekst-sm);color:rgba(255,255,255,.55)}
.stopka__social{display:flex;gap:.75rem;margin-top:var(--odstep-md)}
.stopka__social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,.08);border-radius:var(--zaokr);transition:background var(--przejscie)}
.stopka__social a:hover{background:var(--zielen)}
.stopka__social svg{width:20px;height:20px}

/* ============================================================
   13. BANER COOKIE (Google Consent Mode v2)
   ============================================================ */
.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:var(--z-cookie);max-width:560px;margin-inline:auto;padding:var(--odstep-lg);background:#fff;border:1px solid var(--obramowanie);border-radius:var(--zaokr-lg);box-shadow:var(--cien-xl)}
.cookie__tytul{font-size:var(--tekst-lg);margin-bottom:.5rem}
.cookie__opis{font-size:var(--tekst-sm);color:var(--tekst-drugi);margin-bottom:var(--odstep-md)}
.cookie__kategorie{display:grid;gap:.75rem;margin-bottom:var(--odstep-md);padding:var(--odstep-md);background:var(--tlo-szare);border-radius:var(--zaokr)}
.cookie__kategoria{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--tekst-sm)}
.cookie__kategoria input{width:22px;height:22px;margin-top:2px;flex-shrink:0;accent-color:var(--zielen)}
.cookie__kategoria strong{display:block;color:var(--granat)}
.cookie__kategoria span{color:var(--tekst-drugi)}
.cookie__akcje{display:flex;flex-wrap:wrap;gap:.6rem}
.cookie__akcje .przycisk{flex:1 1 auto;min-height:48px;padding-inline:1rem;font-size:var(--tekst-sm)}

/* ============================================================
   14. NARZEDZIA POMOCNICZE
   ============================================================ */
.tylko-dla-czytnikow{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pomin-do-tresci{position:absolute;top:-100px;left:1rem;z-index:calc(var(--z-naglowek) + 1);padding:.75rem 1.25rem;background:var(--granat);color:#fff;border-radius:0 0 var(--zaokr) var(--zaokr);transition:top var(--przejscie)}
.pomin-do-tresci:focus{top:0;color:#fff}
.srodek{text-align:center}
.bez-marginesu{margin:0}

/* ============================================================
   15. RESPONSYWNOSC - mobile first w praktyce (korekty w dol)
   ============================================================ */
@media (max-width:1024px){
.uslugi__pozostale{grid-template-columns:repeat(2,1fr)}
.galeria{columns:3}
.o-firmie{grid-template-columns:1fr;gap:var(--odstep-xl)}
.obszar{grid-template-columns:1fr;gap:var(--odstep-lg)}
.stopka__siatka{grid-template-columns:repeat(2,1fr);gap:var(--odstep-xl)}
.kontakt{grid-template-columns:1fr;gap:var(--odstep-xl)}
}
@media (max-width:900px){
.hamburger{display:inline-flex}
.naglowek__telefon span{display:none}
/* Wysokosc podana wprost, a nie przez bottom:0. Naglowek ma backdrop-filter, ktory tworzy
   nowy blok zawierajacy dla potomkow position:fixed - przez to bottom:0 odnosilo sie
   do wysokosci naglowka (78 px), a nie do ekranu, i menu mialo zerowa wysokosc. */
.menu{position:fixed;top:var(--wys-naglowka);left:0;right:0;height:calc(100dvh - var(--wys-naglowka));z-index:var(--z-naglowek);flex-direction:column;align-items:stretch;gap:0;padding:var(--odstep-md);background:#fff;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform var(--przejscie);border-top:1px solid var(--obramowanie)}
.menu[data-otwarte="true"]{transform:translateX(0)}
.menu > li > a{padding:.95rem .75rem;font-size:var(--tekst-lg);border-bottom:1px solid var(--obramowanie)}
.menu > li.menu-item-has-children > a::after{margin-left:auto}
.menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0 0 .5rem 1rem;min-width:0;display:none}
.menu li[data-rozwiniete="true"] > .sub-menu{display:block}
.menu .sub-menu a{padding:.7rem .75rem;color:var(--tekst-drugi)}
}
@media (max-width:768px){
.uslugi__glowne{grid-template-columns:1fr}
.galeria{columns:2}
.kafel--duzy{min-height:320px}
.formularz__rzad{grid-template-columns:1fr}
.hero__zaufanie{grid-template-columns:repeat(2,1fr);gap:var(--odstep-md) var(--odstep-lg)}
}
@media (max-width:560px){
.uslugi__pozostale{grid-template-columns:1fr}
.stopka__siatka{grid-template-columns:1fr}
.galeria{columns:2;column-gap:.75rem}
.hero__akcje .przycisk{width:100%}
.cookie{left:.5rem;right:.5rem;bottom:.5rem;padding:var(--odstep-md)}
}

/* ============================================================
   15b. URZADZENIA DOTYKOWE
   Na telefonie nie ma kursora, wiec efekty hover albo nie dzialaja, albo zostaja
   "zablokowane" po dotknieciu i zdjecie zostaje powiekszone. Wylaczamy je calkowicie.
   ============================================================ */
@media (hover:none),(pointer:coarse){
.kafel:hover{transform:none;box-shadow:none}
.kafel:hover .kafel__foto img{transform:none}
.kafel__foto img{transition:none}
.galeria__element:hover img{transform:none}
.galeria__element img{transition:none}
.galeria__element figcaption{position:static;opacity:1;background:var(--granat);padding:.6rem .85rem}
.karta:hover{transform:none;box-shadow:none}
.przycisk:hover{transform:none}
.o-firmie__foto img{transition:none}
}

/* Zabezpieczenie przed poziomym przewijaniem - nic nie ma prawa wyjsc poza krawedz.
   Dlugie adresy i nazwy w tresci lamiemy zamiast rozpychac nimi uklad. */
.tresc a,.tresc p,.tresc li,.kafel__opis,.karta__tresc{overflow-wrap:anywhere}
.galeria,.uslugi,.karty,.obszar,.proces,.metryczka,.formularz{max-width:100%;min-width:0}
.kontener > *{min-width:0}
table{display:block;max-width:100%;overflow-x:auto}
pre,code{max-width:100%;overflow-x:auto}
iframe{max-width:100%}

/* ============================================================
   16. DRUK I DOSTEPNOSC
   ============================================================ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
.naglowek,.stopka,.cookie,.hero__akcje,.hamburger{display:none!important}
body{color:#000;background:#fff}
a::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}