/* =========================================================
   Warsaw Negotiation Game — arkusz glowny
   Kierunek: redakcyjny. Duza typografia, duzo swiatla, ostre rogi,
   cienkie kreski zamiast ramek i cieni. Kolor z logo pojawia sie
   punktowo — w numerach sekcji, liniach i jednym przycisku akcji.

   1. Zmienne   2. Reset      3. Typografia   4. Layout
   5. Naglowek  6. Hero       7. Komponenty   8. Strony
   9. Aktualnosci 10. Galeria 11. Formularze  12. Stopka
   13. RWD      14. Wzorce blokow
   ========================================================= */

/* --- 1. Zmienne ---------------------------------------- */
/* Paleta odczytana wprost z pliku logo (6.svg / 7.svg): cztery pierscienie
   i szary napis. Odcienie sa wyraznie stonowane — czerwien jest ceglana,
   zielen oliwkowa, niebieski granatowy. */
:root{
  /* Pozwala animowac przejscia do wysokosci auto — uzywane przy
     rozwijaniu pytan w FAQ. */
  interpolate-size: allow-keywords;

  --c-bg:          #eeece8;
  --c-bg-alt:      #f7f5f1;
  --c-bg-dark:     #2e2e2d;
  --c-bg-dark-2:   #232322;
  --c-border:      #dcd8d1;
  --c-border-dark: #454443;

  --c-text:        #000000;
  --c-text-soft:   #4a4a4a;
  --c-text-invert: #eeece8;
  --c-text-invert-soft: #adacaa;

  --c-blue:      #21538a;
  --c-blue-dark: #17406b;
  --c-red:       #b92421;
  --c-red-dark:  #981d1a;
  /* Przycisk akcji w stonowanej ceglastej odmianie — mniej krzyczy
     od czerwieni ze znaku, a nadal ma 5,9:1 kontrastu z biala etykieta. */
  --c-action:      #a34340;
  --c-action-dark: #8c3734;
  --c-yellow:    #f1a81a;
  --c-green:     #91a342;

  /* Wszystkie sekwencje uzywaja kolorow wprost ze znaku, w kolejnosci
     zolty -> czerwony -> zielony -> niebieski. Zolty i zielony maja na
     kremowym tle niski kontrast, wiec sluza jako akcent przy czarnym
     tekscie, nigdy jako jedyny nosnik tresci. */

  /* Wysokosc paska z menu. Hero odejmuje ja od wysokosci okna, zeby
     konczyc sie dokladnie na dole ekranu. */
  --header-h:  86px;

  --wrap:      1240px;
  --wrap-text: 720px;

  /* Ostre rogi to swiadomy wybor. Promien 6–10px czyta sie dzis
     jak szablon sprzed dekady; 2px wyglada jak druk. */
  --radius:    2px;
  --radius-lg: 3px;

  --ff-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Arial, sans-serif;
  /* Krój ze znaku — uzywany w tytule na ekranie glownym. */
  --ff-logo:    "Poppins", "Inter", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Arial, sans-serif;
  --ff:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

  --sp-section: clamp(76px, 9vw, 132px);
  --t: 160ms ease;
}

/* --- 2. Reset ------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:clip przycina wyjscie bloku „pelna szerokosc" poza ekran.
   W odroznieniu od hidden nie tworzy kontenera przewijania, wiec przyklejony
   naglowek dziala dalej. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:var(--ff); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-blue); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--c-blue); outline-offset:3px; border-radius:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--c-bg-dark); color:#fff; padding:.75rem 1.25rem;
}
.skip-link:focus{ left:0; }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* --- 3. Typografia ------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--ff-display); margin:0 0 .5em;
  font-weight:700; letter-spacing:-.03em;
}
h1{ font-size:clamp(2.6rem, 1.1rem + 6vw, 5.25rem); line-height:1.02; letter-spacing:-.04em; }
h2{ font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height:1.08; }
h3{ font-size:1.4rem; line-height:1.2; letter-spacing:-.02em; }
h4{ font-size:1.05rem; letter-spacing:-.01em; }
p{ margin:0 0 1.2em; }
ul,ol{ margin:0 0 1.2em; padding-left:1.35em; }
li{ margin-bottom:.5em; }
blockquote{
  margin:2.5rem 0; padding:0 0 0 1.75rem;
  border-left:2px solid var(--c-text); font-family:var(--ff-display);
  font-size:1.3rem; line-height:1.4; letter-spacing:-.02em; font-style:normal;
}
hr{ border:0; border-top:1px solid var(--c-border); margin:3rem 0; }
.lead{ font-size:1.2rem; line-height:1.6; color:var(--c-text-soft); }

/* Nadtytul sekcji: wersaliki z cienka kreska. Zastepuje kolorowe plakietki. */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-display); font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-text-soft); margin:0 0 1.6rem;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; flex:none; }
.eyebrow--invert{ color:var(--c-yellow); }

/* --- 4. Layout ----------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.wrap--text{ max-width:var(--wrap-text); }
.section{ padding:var(--sp-section) 0; }
.section--tight{ padding:calc(var(--sp-section) * .55) 0; }
.section--alt{ background:var(--c-bg-alt); }
.section--dark{ background:var(--c-bg-dark); color:var(--c-text-invert); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }
.section--dark p{ color:var(--c-text-invert-soft); }
.section-head{ max-width:var(--wrap-text); margin-bottom:3.5rem; }

/* Odnosnik do pelnej listy pod sekcja na stronie glownej. */
.section-more{
  margin:2.5rem 0 0; font-family:var(--ff-display); font-weight:600;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
}
.section-more a{ color:var(--c-blue); }
.section-head p{ color:var(--c-text-soft); margin-bottom:0; }
.section--dark .section-head p{ color:var(--c-text-invert-soft); }

.grid{ display:grid; gap:clamp(32px, 4vw, 56px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* --- 5. Naglowek / nawigacja --------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(238,236,232,.92); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--c-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px;
  min-height:var(--header-h); }
.site-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--c-text); }
.site-brand:hover{ text-decoration:none; }
.site-brand img{ max-height:44px; width:auto; height:auto; }
.site-brand__text{ font-family:var(--ff-display); font-weight:700; font-size:1.05rem; line-height:1.15; letter-spacing:-.03em; }
.site-brand__text span{
  display:block; font-family:var(--ff); font-weight:400; font-size:.74rem;
  color:var(--c-text-soft); letter-spacing:.02em; margin-top:2px;
}

.nav-toggle{
  display:none; background:none; border:1px solid var(--c-border);
  border-radius:var(--radius); padding:.6rem .7rem; cursor:pointer; color:var(--c-text);
}
.nav-toggle__bar{ display:block; width:20px; height:1px; background:currentColor; margin:5px 0; }

/* Nawigacja rozciaga sie na pelna wysokosc paska, a pozycje menu sa w niej
   wysrodkowane. Dzieki temu `top:100%` w rozwijanym panelu wypada dokladnie
   na dolnej krawedzi paska, a nie w polowie jego wysokosci. */
.main-nav{ align-self:stretch; }
.main-nav ul{ list-style:none; display:flex; margin:0; padding:0; }
/* Pelna wysokosc dotyczy wylacznie paska z zakladkami. Gdy regula obejmowala
   kazde `ul` w nawigacji, rozwijany panel tez dostawal wysokosc paska
   i miescil tylko dwie pozycje — trzecia wypadala poza jego tlo. */
.main-nav > ul{ align-items:stretch; gap:4px; height:100%; }
.main-nav > ul > li{ display:flex; align-items:center; }
.main-nav li{ margin:0; position:relative; }
.main-nav a{
  position:relative; display:block; padding:.5rem .85rem; color:var(--c-text);
  font-family:var(--ff-display); font-size:.98rem; font-weight:500;
  letter-spacing:-.01em; transition:color var(--t); border-radius:0;
}
.main-nav a:hover{ color:var(--c-text); text-decoration:none; }

/* Podkreslenie wysuwa sie od lewej. Krawedzie sa wciete o wartosc paddingu,
   zeby kreska konczyla sie rowno z tekstem, a nie z obszarem klikalnym. */
.main-nav a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem;
  height:1px; background:var(--nav-line, var(--c-blue));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 220ms ease;
}

/* Kazda zakladka dostaje wlasny kolor z pierscieni znaku; od piatej cykl
   zaczyna sie od nowa. Kreska jest elementem dekoracyjnym, wiec uzywamy
   kolorow prosto ze znaku, bez przyciemnionych wariantow. */
.main-nav > ul > li:nth-child(4n+1){ --nav-line:var(--c-yellow); }
.main-nav > ul > li:nth-child(4n+2){ --nav-line:var(--c-red); }
.main-nav > ul > li:nth-child(4n+3){ --nav-line:var(--c-green); }
.main-nav > ul > li:nth-child(4n+4){ --nav-line:var(--c-blue); }
.main-nav a:hover::after,
.main-nav a:focus-visible::after{ transform:scaleX(1); }

/* Biezaca zakladka ma podkreslenie na stale, w kolorze marki. */
.main-nav .current-menu-item > a,
.main-nav .current_page_parent > a,
.main-nav .current-menu-ancestor > a{ color:var(--c-text); font-weight:600; }
.main-nav .current-menu-item > a::after,
.main-nav .current_page_parent > a::after,
.main-nav .current-menu-ancestor > a::after{
  transform:scaleX(1); background:var(--nav-line, var(--c-blue)); height:2px;
}
/* Przycisk rozwijania istnieje tylko w widoku mobilnym. */
.submenu-toggle{ display:none; }

/* Rozwijane podmenu na komputerze. Panel zaczyna sie tuz pod paskiem,
   a nie pod samym odnosnikiem — dzieki temu miedzy zakladka a lista nie
   ma szczeliny, w ktorej kursor gubil hover i menu znikalo w polowie ruchu. */
.main-nav li > .sub-menu{
  position:absolute; top:calc(100% + 1px); left:-10px; z-index:120;
  min-width:232px; margin:0; padding:8px; list-style:none;
  display:flex; flex-direction:column; gap:2px;
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.09);
  /* Zamiast `visibility:hidden` — samo krycie i wylaczone zdarzenia myszy.
     Ukryty w ten sposob panel pozostaje dostepny dla klawiatury, wiec Tab
     wchodzi w podstrony. Przy `display:none` albo `visibility:hidden`
     odnosniki nie daja sie zogniskowac i `:focus-within` nigdy nie zadziala. */
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity 140ms ease, transform 140ms ease;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{
  opacity:1; pointer-events:auto; transform:none;
}

/* Pozycje w panelu podkreslaja sie tak samo jak zakladki wyzej i licza
   kolory od poczatku — kazda podstrona ma wlasny kolor ze znaku. */
.main-nav .sub-menu li:nth-child(4n+1){ --nav-line:var(--c-yellow); }
.main-nav .sub-menu li:nth-child(4n+2){ --nav-line:var(--c-red); }
.main-nav .sub-menu li:nth-child(4n+3){ --nav-line:var(--c-green); }
.main-nav .sub-menu li:nth-child(4n+4){ --nav-line:var(--c-blue); }

.main-nav .sub-menu a{
  display:block; padding:.55rem .7rem; font-size:.92rem; font-weight:500;
  color:var(--c-text-soft); border-radius:0;
  transition:color var(--t);
}
.main-nav .sub-menu a::after{
  content:""; left:.7rem; right:.7rem; bottom:.3rem; height:1px;
  background:var(--nav-line, var(--c-blue));
}
.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus-visible{ background:none; color:var(--c-text); }
.main-nav .sub-menu .current-menu-item > a{ color:var(--c-text); font-weight:600; }
.main-nav .sub-menu .current-menu-item > a::after{ transform:scaleX(1); height:2px; }

/* Strzalka przy zakladce, ktora ma podstrony. Rysowana na elemencie listy,
   bo oba pseudoelementy odnosnika sa juz zajete: ::after to podkreslenie,
   ::before to kreska hovera w menu mobilnym. */
.main-nav > ul > li.menu-item-has-children > a,
.main-nav > ul > li.page_item_has_children > a{ padding-right:1.6rem; }
.main-nav > ul > li.menu-item-has-children::after,
.main-nav > ul > li.page_item_has_children::after{
  content:""; position:absolute; right:.78rem; top:calc(50% - 3px);
  width:6px; height:6px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg);
  opacity:.45; transition:opacity var(--t); pointer-events:none;
}
.main-nav > ul > li:hover::after{ opacity:1; }
/* Nawigacja dosunieta do prawej. Bez tego, gdy przycisk zapisow nie jest
   ustawiony, pusty kontener rozpychal pasek i menu wisialo na srodku. */
.main-nav{ margin-left:auto; }
.header-cta{ display:flex; align-items:center; gap:10px; margin-left:24px; }
.header-cta:empty{ display:none; margin-left:0; }

/* Naglowek i stopka menu istnieja tylko w widoku mobilnym. */
.main-nav__head,
.main-nav__foot{ display:none; }

/* --- 6. Hero ------------------------------------------- */
.hero{
  position:relative; background:var(--c-bg-dark); color:#fff; overflow:hidden;
  display:flex; align-items:center;
  /* Ekran glowny siega dokladnie do dolu okna: wysokosc widoku minus pasek
     z menu i jego kreska. `svh` zamiast `vh`, bo na telefonie `vh` liczy
     okno bez paskow przegladarki i hero wystawaloby poza ekran. */
  min-height:calc(100vh - var(--header-h) - 1px);
  min-height:calc(100svh - var(--header-h) - 1px);
  padding:clamp(56px, 8vh, 120px) 0;
}
.hero__media{ position:absolute; inset:0; }
/* Zdjecie pokazujemy w pelni — za czytelnosc tekstu odpowiada wylacznie
   gradient nad nim, sterowany zmienna --hero-shade z ustawien. */
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:1; }
/* <picture> pojawia sie tylko tam, gdzie ustawiono osobne zdjecie na telefon.
   Bez tego wrapper mialby wysokosc wiersza tekstu i zdjecie by sie splaszczylo. */
.hero__media picture{ position:absolute; inset:0; display:block; }

/* Jedno zdjecie pionowe pod wszystkimi slajdami: na telefonie nie ma
   czego przelaczac, wiec kropki znikaja. Prog ten sam co przy wyborze
   zdjecia w <picture>, zeby jedno nie wyprzedzalo drugiego. */
@media (max-width:700px){
  .hero--mobile-static .hero__dots{ display:none; }
}

/* Slider: wszystkie zdjecia leza na sobie, widoczne jest jedno.
   Przenikanie zamiast przesuwania — spokojniejsze pod tekstem. */
.hero--slider .hero__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 900ms ease;
}
.hero--slider .hero__slide.is-active{ opacity:.3; }

.hero__dots{
  position:absolute; z-index:2; left:0; right:0; bottom:24px;
  display:flex; gap:8px; justify-content:center;
}
.hero__dot{
  width:26px; height:3px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.3); transition:background var(--t);
}
.hero__dot:hover{ background:rgba(255,255,255,.6); }
.hero__dot.is-active{ background:var(--c-yellow); }

/* Gdy uzytkownik prosi o mniej ruchu, pokazujemy pierwsze zdjecie bez zmian. */
@media (prefers-reduced-motion: reduce){
  .hero--slider .hero__slide{ transition:none; }
}
/* Gradient mocniejszy tam, gdzie lezy tekst (lewa strona), slabszy po prawej —
   dzieki temu zdjecie jest widoczne, a naglowek nadal czytelny. */
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(46,46,45, calc(var(--hero-shade, .55) + .22)) 0%,
      rgba(46,46,45, calc(var(--hero-shade, .55) + .06)) 42%,
      rgba(46,46,45, calc(var(--hero-shade, .55) * .5)) 100%),
    linear-gradient(180deg,
      rgba(46,46,45, calc(var(--hero-shade, .55) * .3)) 0%,
      rgba(46,46,45, calc(var(--hero-shade, .55) * .55)) 100%);
}
.hero__inner{ position:relative; width:100%; max-width:960px; }
/* Tytul na ekranie glownym w kroju ze znaku. Rozmiar liczony z szerokosci
   okna, zeby cala nazwa zawsze miescila sie w jednej linii — 23 znaki
   Poppins Bold to okolo 14,3em, wiec 5,6vw nie przekracza szerokosci ekranu. */
.hero h1{
  color:#fff; margin-bottom:.35em; text-shadow:0 1px 18px rgba(0,0,0,.45);
  font-family:var(--ff-logo); font-weight:700;
  font-size:clamp(1.25rem, 5.6vw, 4rem); line-height:1.08; letter-spacing:-.015em;
  white-space:nowrap;
}
/* Na waskim ekranie jedna linia wymusza stopien okolo 21px, czyli mniej
   niz naglowki w tresci. Lepiej pozwolic nazwie zlamac sie na dwie linie
   i zostawic ja duza — jedna linia zostaje na szerokich ekranach. */
@media (max-width:700px){
  .hero h1{
    white-space:normal;
    font-size:clamp(2rem, 9.5vw, 3rem); line-height:1.1;
  }
}
.hero__lead{
  font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height:1.55;
  color:rgba(255,255,255,.94); max-width:600px; margin-bottom:2.75rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.hero__socials{ margin-top:3.5rem; }

/* Cztery pasy w kolejnosci pierscieni ze znaku — cienki cytat z logo. */
.accent-bar{ display:flex; height:2px; }
.accent-bar span{ flex:1; }
/* Kolejnosc kolorow ze znaku: zolty, czerwony, zielony, niebieski. */
.accent-bar span:nth-child(1){ background:var(--c-yellow); }
.accent-bar span:nth-child(2){ background:var(--c-red); }
.accent-bar span:nth-child(3){ background:var(--c-green); }
.accent-bar span:nth-child(4){ background:var(--c-blue); }

/* --- 7. Komponenty ------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
  padding:1rem 1.9rem; border-radius:var(--radius); border:1px solid transparent;
  font-family:var(--ff); font-weight:600; font-size:.95rem; cursor:pointer;
  text-align:center; transition:background var(--t), color var(--t), border-color var(--t);
}
.btn:hover{ text-decoration:none; }
.btn--primary{ background:var(--c-text); color:#fff; }
.btn--primary:hover{ background:#000; color:#fff; }
/* Czerwien rezerwujemy dla jednej akcji na ekranie: zapisow. */
.btn--accent{ background:var(--c-action); color:#fff; }
.btn--accent:hover{ background:var(--c-action-dark); color:#fff; }
.btn--ghost{ background:transparent; color:var(--c-text); border-color:var(--c-text); }
.btn--ghost:hover{ background:var(--c-text); color:#fff; }
/* Jasny przycisk na ciemnym tle. Uzywany tam, gdzie potrzebny jest wyrazny
   przycisk, ale czerwien ma zostac zarezerwowana dla zapisow. */
.btn--light{ background:#fff; color:var(--c-bg-dark); border-color:#fff; }
.btn--light:hover{ background:var(--c-bg); color:var(--c-bg-dark); border-color:var(--c-bg); }
.btn--ghost-invert{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn--ghost-invert:hover{ background:#fff; color:var(--c-bg-dark); border-color:#fff; }
.btn--sm{ padding:.6rem 1.15rem; font-size:.85rem; }
.btn--block{ width:100%; }

/* Karta bez ramki i cienia: kreska u gory, reszta zalatwia swiatlo. */
.card{
  background:none; border:0; border-top:2px solid var(--c-text);
  border-radius:0; padding:24px 0 0;
}
.card h3{ margin-bottom:.4em; }
.card p{ color:var(--c-text-soft); }
.card p:last-child{ margin-bottom:0; }

/* Numer sekcji jako duza cyfra — zastepuje kolorowy kwadracik z ikona. */
.card__icon{
  display:block; width:auto; height:auto; background:none; border:0; border-radius:0;
  font-family:var(--ff-display); font-size:clamp(2.25rem, 4vw, 3rem);
  font-weight:700; line-height:1; letter-spacing:-.04em; margin:0 0 .6rem;
}
/* Podwojona klasa podnosi specyficznosc ponad regule `.card p`,
   ktora inaczej przemalowuje numer na kolor tekstu pomocniczego. */
/* Kolor numeru wynika z pozycji karty, a nie z klasy w tresci. Klasy
   card__icon--* zostaja w starszych stronach, ale nic juz nie ustawiaja —
   dzieki temu kolejnosc ze znaku obowiazuje wszedzie bez edycji tresci.
   Podwojona klasa podnosi specyficznosc ponad regule `.card p`. */
.card__icon.card__icon{ color:var(--c-yellow); }
:is(.wp-block-column, .card):nth-child(4n+2) .card__icon.card__icon{ color:var(--c-red); }
:is(.wp-block-column, .card):nth-child(4n+3) .card__icon.card__icon{ color:var(--c-green); }
:is(.wp-block-column, .card):nth-child(4n+4) .card__icon.card__icon{ color:var(--c-blue); }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,4vw,48px); }
.stat__num{
  font-family:var(--ff-display); font-size:clamp(2.8rem, 5vw, 4.25rem);
  font-weight:700; line-height:1; letter-spacing:-.045em;
  color:var(--c-yellow); margin-bottom:.25em;
}
/* Cztery liczby = cztery kolory ze znaku, w tej samej kolejnosci. */
:is(.wp-block-column, .stat):nth-child(4n+2) .stat__num{ color:var(--c-red); }
:is(.wp-block-column, .stat):nth-child(4n+3) .stat__num{ color:var(--c-green); }
:is(.wp-block-column, .stat):nth-child(4n+4) .stat__num{ color:var(--c-blue); }
.stat__label{
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-text-invert-soft); margin-bottom:0;
}

.timeline{
  list-style:none; margin:2rem 0; padding-left:0; margin-left:0;
  border-left:1px solid var(--c-border);
}
.timeline li{ position:relative; padding:0 0 1.75rem 32px; margin:0; }
.timeline li::before{
  content:""; position:absolute; left:-4px; top:11px;
  width:7px; height:7px; background:var(--c-yellow);
}
/* Kolejne pozycje przechodza przez cztery kolory pierscieni ze znaku.
   Zolty i zielony w wersji przyciemnionej, bo markowe sa za jasne na bieli. */
.timeline li:nth-child(4n+2)::before{ background:var(--c-red); }
.timeline li:nth-child(4n+3)::before{ background:var(--c-green); }
.timeline li:nth-child(4n+4)::before{ background:var(--c-blue); }
.timeline li:last-child{ padding-bottom:0; }
.timeline strong{
  display:block; font-family:var(--ff-display); font-size:1.2rem;
  font-weight:700; letter-spacing:-.02em; color:var(--c-text); margin-bottom:.15em;
}
.timeline li{ line-height:1.6; }

.steps{ list-style:none; margin:2.5rem 0; padding-left:0; counter-reset:step; }
.steps li{
  position:relative; padding:20px 0 0; margin:0 0 1.75rem;
  counter-increment:step; border-top:1px solid var(--c-border); line-height:1.6;
}
.steps li::before{
  content:"0" counter(step); display:block;
  font-family:var(--ff-display); font-size:.8rem; font-weight:600;
  letter-spacing:.14em; color:var(--c-yellow); margin-bottom:.6rem;
}
/* Numery krokow ida przez cztery kolory znaku, tak jak numery kart.
   Zolty i zielony w wersji przyciemnionej — markowe nie przechodza
   kontrastu jako maly tekst na bialym tle. */
.steps li:nth-child(4n+2)::before{ color:var(--c-red); }
.steps li:nth-child(4n+3)::before{ color:var(--c-green); }
.steps li:nth-child(4n+4)::before{ color:var(--c-blue); }
.steps strong{
  display:block; font-family:var(--ff-display); font-size:1.25rem;
  font-weight:700; letter-spacing:-.02em; margin-bottom:.25em;
}

.faq details{ border:0; border-bottom:1px solid var(--c-border); margin:0; background:none; }
.faq summary{
  cursor:pointer; padding:22px 0; list-style:none;
  font-family:var(--ff-display); font-size:1.15rem; font-weight:600; letter-spacing:-.02em;
  display:flex; justify-content:space-between; gap:24px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-size:1.4rem; font-weight:400; color:var(--c-blue); line-height:1;
  transition:transform 260ms ease, color var(--t);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 0 22px; color:var(--c-text-soft); max-width:var(--wrap-text); }
.faq details > p{ color:var(--c-text-soft); max-width:var(--wrap-text); margin:0 0 1rem; }
.faq details > div p:last-child,
.faq details > p:last-child{ margin-bottom:22px; }

/* Plynne rozwijanie. `interpolate-size` pozwala animowac przejscie do
   wysokosci auto — bez niego przegladarka nie ma czego interpolowac.
   Tam, gdzie tej wlasciwosci nie ma, pytanie otwiera sie od razu,
   dokladnie tak jak dotychczas. */
.faq details::details-content{
  block-size:0; overflow:hidden;
  transition:block-size 280ms ease, content-visibility 280ms allow-discrete;
}
.faq details[open]::details-content{ block-size:auto; }

.partners{ display:flex; flex-wrap:wrap; gap:48px; align-items:center; justify-content:center; }
.partners img{ max-height:52px; width:auto; filter:grayscale(1); opacity:.55; transition:var(--t); }
.partners img:hover{ filter:none; opacity:1; }

.socials{ display:flex; gap:8px; flex-wrap:wrap; }
.socials a{
  width:44px; height:44px; border-radius:var(--radius); display:grid; place-items:center;
  border:1px solid var(--c-border); color:var(--c-text);
  transition:background var(--t), color var(--t), border-color var(--t);
}
.socials a:hover{ text-decoration:none; }
.socials svg{ width:19px; height:19px; fill:currentColor; }
.socials--invert a{ border-color:rgba(255,255,255,.22); color:#fff; }

/* Kazdy kanal dostaje na hover inny kolor z logo. Zolty i zielony sa jasne,
   wiec ikona na nich musi byc grafitowa, nie biala. */
.socials a.is-facebook:hover,
.socials a.is-facebook:focus-visible{ background:var(--c-blue); border-color:var(--c-blue); color:#fff; }
.socials a.is-instagram:hover,
.socials a.is-instagram:focus-visible{ background:var(--c-red); border-color:var(--c-red); color:#fff; }
.socials a.is-mail:hover,
.socials a.is-mail:focus-visible{ background:var(--c-yellow); border-color:var(--c-yellow); color:var(--c-bg-dark); }
.socials a.is-linkedin:hover,
.socials a.is-linkedin:focus-visible{ background:var(--c-green); border-color:var(--c-green); color:var(--c-bg-dark); }
.socials a.is-youtube:hover,
.socials a.is-youtube:focus-visible{ background:var(--c-red-dark); border-color:var(--c-red-dark); color:#fff; }
.socials--lg a{ width:52px; height:52px; }
.socials--lg svg{ width:22px; height:22px; }

.notice{ padding:16px 20px; border-radius:var(--radius); margin-bottom:28px; border:1px solid; font-size:.95rem; }
.notice--ok{ background:#f0f6f1; border-color:#c3ddc8; color:#2c5c37; }
.notice--err{ background:#fdf0ef; border-color:#e8c0be; color:var(--c-red-dark); }
.notice p:last-child,.notice ul:last-child{ margin-bottom:0; }

/* Potwierdzenie wyslania. Zajmuje miejsce formularza, zeby nie kusilo
   do wyslania tej samej wiadomosci drugi raz. */
.form-done{
  border-top:2px solid var(--c-green); padding:32px 0 0;
  max-width:var(--wrap-text);
}
.form-done__mark{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; background:var(--c-green); color:#fff; margin-bottom:20px;
}
.form-done__mark svg{ width:24px; height:24px; }
.form-done h3{ margin:0 0 .5em; font-size:1.5rem; }
.form-done p{ color:var(--c-text-soft); margin-bottom:1rem; }
.form-done__again a{
  font-family:var(--ff-display); font-weight:600; font-size:.95rem;
  border-bottom:1px solid currentColor;
}
.form-done__again a:hover{ text-decoration:none; color:var(--c-text); }
.notice ul{ margin:.5em 0 0; }

/* --- 8. Sekcje stron ----------------------------------- */
.page-hero{
  position:relative;
  border-bottom:1px solid var(--c-border);
  padding:clamp(48px, 6vw, 76px) 0 clamp(28px, 3.5vw, 44px);
}

/* Wariant ze zdjeciem wyrozniajacym w tle — ten sam jezyk co ekran glowny. */
.page-hero--media{
  background:var(--c-bg-dark); color:#fff; border-bottom:0; overflow:hidden;
  padding:clamp(72px, 9vw, 128px) 0 clamp(56px, 6vw, 88px);
}
/* Wysokosc ustawiona przy wpisie. Pasek nie moze byc nizszy niz jego
   tresc, dlatego `min-height`, a nie sztywne `height` — dlugi tytul
   rozepchnie go zamiast wyjsc poza kadr. */
.page-hero--media[style*="--hero-h"]{
  min-height:var(--hero-h); display:flex; align-items:center;
  padding-block:clamp(32px, 4vw, 56px);
}
.page-hero--media[style*="--hero-h"] > .wrap{ width:100%; }
.page-hero__media{ position:absolute; inset:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; opacity:1; }
.page-hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(46,46,45, calc(var(--hero-shade, .55) + .24)) 0%,
      rgba(46,46,45, calc(var(--hero-shade, .55) + .1)) 45%,
      rgba(46,46,45, calc(var(--hero-shade, .55) * .6)) 100%),
    linear-gradient(180deg,
      rgba(46,46,45, calc(var(--hero-shade, .55) * .35)) 0%,
      rgba(46,46,45, calc(var(--hero-shade, .55) * .6)) 100%);
}
.page-hero--media .wrap{ position:relative; }
/* Na zdjeciu tekst musi byc jasniejszy niz na plaskim ciemnym tle —
   szarosc pomocnicza ginie na jasnych fragmentach fotografii.
   Cien nadaje kontrast tam, gdzie samo przyciemnienie nie wystarcza. */
.page-hero--media h1{ color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.45); }
.page-hero--media p,
.page-hero--media .breadcrumbs,
.page-hero--media .breadcrumbs a{
  color:rgba(255,255,255,.94); text-shadow:0 1px 12px rgba(0,0,0,.5);
}
/* Sekcja tuz pod naglowkiem strony nie potrzebuje pelnego odstepu —
   kreska naglowka juz oddziela tresc. */
.page-hero + .section{ padding-top:clamp(40px, 5vw, 68px); }
.page-hero h1{ margin-bottom:.3em; }
.page-hero p{ color:var(--c-text-soft); max-width:var(--wrap-text); margin-bottom:0; }
.breadcrumbs{
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-text-soft); margin-bottom:1.5rem;
}
.breadcrumbs a{ color:var(--c-text-soft); }

.entry-content > *:first-child{ margin-top:0; }
.entry-content img{ border-radius:var(--radius); }
.entry-content h2{ margin-top:2.75rem; }
.entry-content h3{ margin-top:2rem; }
/* Sam tekst trzymamy w wygodnej do czytania szerokosci, a sekcje z kolumnami,
   ciemne pasy i galerie moga zajac cala szerokosc kontenera. */
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.wng-section > p,
.wng-section > h2,
.wng-section > h3{ max-width:var(--wrap-text); }
.entry-content table{ width:100%; border-collapse:collapse; margin:2rem 0; font-size:.95rem; }
.entry-content th,.entry-content td{ border-bottom:1px solid var(--c-border); padding:14px 16px 14px 0; text-align:left; }
.entry-content th{ font-family:var(--ff-display); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.entry-content figcaption{ font-size:.85rem; color:var(--c-text-soft); margin-top:.6rem; }

.cta-band{
  background:var(--c-bg-dark); color:#fff; border-radius:var(--radius-lg);
  padding:clamp(36px, 5vw, 64px); display:flex; flex-wrap:wrap; gap:32px;
  align-items:center; justify-content:space-between;
}
.cta-band h2{ color:#fff; margin-bottom:.25em; }
.cta-band p{ color:var(--c-text-invert-soft); margin-bottom:0; max-width:520px; }
/* Naglowki dziedzicza duzy odstep gorny (44 px) i maly dolny (12 px).
   W pasku oba bloki sa wysrodkowane w pionie, wiec ta roznica przesuwala
   napis o ~16 px w dol wzgledem przycisku. W pasku odstepy sa zbedne —
   o powietrze dba padding samego paska. */
.cta-band h2{ margin:0; }
.cta-band h2 + p{ margin-top:.6rem; }

/* --- 9. Aktualnosci ------------------------------------ */
.post-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,52px); }
/* Kafelek bez pudelka: zdjecie, kreska, tekst. */
.post-card{
  display:flex; flex-direction:column; background:none;
  border:0; border-radius:0; overflow:visible;
}
.post-card__thumb{
  display:block; aspect-ratio:3/2; background:var(--c-bg-alt);
  overflow:hidden; margin-bottom:20px; border-radius:var(--radius);
}
.post-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--t); }
.post-card:hover .post-card__thumb img{ opacity:.85; }
/* Zastepnik, gdy wpis nie ma obrazka wyroznionego */
.post-card__thumb--fallback{ position:relative; background:var(--c-bg-dark); }
.post-card__thumb--fallback::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,
    var(--c-yellow) 0 25%, var(--c-red) 25% 50%,
    var(--c-green) 50% 75%, var(--c-blue) 75% 100%);
}
.post-card__thumb--fallback span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-display); color:rgba(255,255,255,.34);
  font-weight:700; font-size:1.6rem; letter-spacing:.16em;
}
.post-card__body{ padding:0; display:flex; flex-direction:column; flex:1; border-top:1px solid var(--c-border); padding-top:18px; }
.post-card__meta{
  font-family:var(--ff-display); font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--c-text-soft);
  margin-bottom:.85rem; display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.post-card__title{
  font-size:1.45rem; line-height:1.2; letter-spacing:-.025em;
  margin-bottom:.5em; overflow-wrap:break-word;
}
.post-card__title a{ color:var(--c-text); }
.post-card__title a:hover{ color:var(--c-blue); text-decoration:none; }
.post-card__excerpt{ color:var(--c-text-soft); font-size:.97rem; margin-bottom:1.25rem; }
.post-card__more{
  margin-top:auto; margin-bottom:0; font-family:var(--ff-display);
  font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
}
.cat-badge{ display:inline-block; color:var(--c-blue); font-weight:600; }

.single-hero{ padding:clamp(48px,6vw,88px) 0 0; }
.single-hero h1{ margin-bottom:.3em; font-size:clamp(2.2rem, 1.2rem + 3.6vw, 3.75rem); }
.entry-meta{
  font-family:var(--ff-display); font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-text-soft);
  margin-bottom:2.5rem; display:flex; gap:16px; flex-wrap:wrap; align-items:center;
}
.featured-image{ margin:0 0 3rem; }
.featured-image img{ width:100%; border-radius:var(--radius); }
.post-nav{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:1px solid var(--c-border); margin-top:4rem; padding-top:2rem;
  font-family:var(--ff-display); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
}

.pagination{ display:flex; gap:6px; justify-content:center; margin-top:clamp(48px,6vw,72px); flex-wrap:wrap; }
.pagination .page-numbers{
  display:grid; place-items:center; min-width:46px; height:46px; padding:0 14px;
  border:1px solid var(--c-border); border-radius:var(--radius);
  color:var(--c-text); font-weight:500; font-size:.92rem;
}
.pagination .page-numbers:hover{ border-color:var(--c-text); text-decoration:none; }
.pagination .current{ background:var(--c-text); border-color:var(--c-text); color:#fff; }

.empty-state{
  text-align:center; padding:clamp(56px,7vw,88px) 24px;
  border:1px solid var(--c-border); border-radius:var(--radius); color:var(--c-text-soft);
}

/* --- 10. Galeria --------------------------------------- */
.album-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,52px); }
.album-card{ display:block; background:none; border:0; border-radius:0; overflow:visible; }
.album-card:hover{ text-decoration:none; }
.album-card__thumb{
  aspect-ratio:4/3; background:var(--c-bg-alt); overflow:hidden;
  border-radius:var(--radius); margin-bottom:18px;
}
.album-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--t); }
.album-card:hover .album-card__thumb img{ opacity:.85; }
.album-card__body{ padding:0; border-top:1px solid var(--c-border); padding-top:16px; }
.album-card__body h3{ font-size:1.3rem; margin:0; color:var(--c-text); }
.album-card:hover .album-card__body h3{ color:var(--c-blue); }
/* Styl podpisu zostaje na wypadek, gdyby kiedys wrocil jakis drugi wiersz
   pod nazwa albumu — dzis kafelek pokazuje sam tytul. */
.album-card__body span{
  font-family:var(--ff-display); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-text-soft);
}

/* --- Zdjecia w tresci wpisow ------------------------------ */
/* Motyw deklaruje align-wide, wiec redaktor widzi w edytorze opcje
   „Szeroka szerokosc" i „Pelna szerokosc" — bez tych regul nic by nie robily. */
.entry-content .wp-block-image{ margin-block:2rem; }
.entry-content .wp-block-image img{ border-radius:var(--radius); }

.entry-content .aligncenter{ margin-inline:auto; text-align:center; }

/* Wyrownanie do boku z oplywaniem tekstem. Na waskich ekranach oplywanie
   nie ma sensu, wiec ponizej znosimy je razem z floatem. */
.entry-content .alignleft{
  float:left; margin:.4rem 2.25rem 1.5rem 0; max-width:min(48%, 360px);
}
.entry-content .alignright{
  float:right; margin:.4rem 0 1.5rem 2.25rem; max-width:min(48%, 360px);
}

/* Wyjscie poza kolumne tekstu. margin-left:50% + przesuniecie o polowe
   wlasnej szerokosci centruje element wzgledem kontenera niezaleznie
   od tego, jak waska jest kolumna tekstu. */
.entry-content .alignwide{
  width:min(var(--wrap), calc(100vw - 56px));
  max-width:none; margin-left:50%; translate:-50% 0;
}
.entry-content .alignfull{
  width:100vw; max-width:none; margin-left:50%; translate:-50% 0;
  border-radius:0;
}
.entry-content .alignfull img{ border-radius:0; }

@media (max-width:640px){
  .entry-content .alignleft,
  .entry-content .alignright{ float:none; margin-inline:0; max-width:100%; }
  .entry-content .alignwide{ width:calc(100vw - 40px); }
}

/* --- Galeria: uklad kaskadowy (masonry) ------------------- */
/* Rdzen WordPressa uklada zdjecia we flexie i wyrownuje wiersze, przez co
   przy mieszanych proporcjach powstaja puste pasy. Kolumny CSS zachowuja
   naturalne proporcje kazdego zdjecia i skladaja je ciasno jedno pod drugim. */
.entry-content .wp-block-gallery.has-nested-images{
  display:block; column-gap:14px; margin-block:2rem;
  columns:3;
}
.entry-content .wp-block-gallery.columns-1{ columns:1; }
.entry-content .wp-block-gallery.columns-2{ columns:2; }
.entry-content .wp-block-gallery.columns-4{ columns:4; }
.entry-content .wp-block-gallery.columns-5{ columns:5; }

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image{
  display:block; width:100%!important; max-width:100%;
  margin:0 0 14px; break-inside:avoid; page-break-inside:avoid;
}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img{
  width:100%; height:auto; border-radius:var(--radius); display:block;
}
/* Podpisy w siatce sa zbedne — w powiekszeniu i tak pokazujemy nazwe albumu. */
.entry-content .wp-block-gallery.has-nested-images figcaption{ display:none; }

/* Uklad „rowne kafelki": siatka zamiast kolumn. Wszystkie zdjecia dostaja
   ten sam ksztalt i sa przycinane do srodka, wiec album z mieszanka kadrow
   pionowych i poziomych przestaje wygladac przypadkowo. Kolejnosc czyta sie
   wierszami (lewo-prawo), a nie w dol kolumny jak w mozaice. */
body.wng-galeria-kafelki .entry-content .wp-block-gallery.has-nested-images{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:14px; columns:auto;
}
body.wng-galeria-kafelki .entry-content .wp-block-gallery.columns-2{ grid-template-columns:repeat(2, 1fr); }
body.wng-galeria-kafelki .entry-content .wp-block-gallery.columns-4{ grid-template-columns:repeat(4, 1fr); }
body.wng-galeria-kafelki .entry-content .wp-block-gallery.columns-5{ grid-template-columns:repeat(5, 1fr); }
body.wng-galeria-kafelki .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image{
  margin:0; height:100%;
}
body.wng-galeria-kafelki .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img{
  aspect-ratio:4 / 3; height:100%; object-fit:cover;
}

@media (max-width:900px){
  .entry-content .wp-block-gallery.has-nested-images,
  .entry-content .wp-block-gallery.columns-4,
  .entry-content .wp-block-gallery.columns-5{ columns:2; }

  body.wng-galeria-kafelki .entry-content .wp-block-gallery.has-nested-images,
  body.wng-galeria-kafelki .entry-content .wp-block-gallery.columns-4,
  body.wng-galeria-kafelki .entry-content .wp-block-gallery.columns-5{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width:560px){
  .entry-content .wp-block-gallery.has-nested-images,
  .entry-content .wp-block-gallery.columns-2,
  .entry-content .wp-block-gallery.columns-4,
  .entry-content .wp-block-gallery.columns-5{ columns:1; }

/* Na telefonie zostaja dwie kolumny — jedna robi z albumu bardzo dlugi pas,
   przez ktory trzeba przewijac bez konca. */
body.wng-galeria-kafelki .entry-content .wp-block-gallery.has-nested-images,
body.wng-galeria-kafelki .entry-content .wp-block-gallery.columns-2,
body.wng-galeria-kafelki .entry-content .wp-block-gallery.columns-4,
body.wng-galeria-kafelki .entry-content .wp-block-gallery.columns-5{
  grid-template-columns:repeat(2, 1fr);
}
}

/* --- Powiekszanie zdjec (lightbox) ------------------------ */
.entry-content figure.is-zoomable img{ cursor:zoom-in; transition:opacity var(--t); }
.entry-content figure.is-zoomable:hover img{ opacity:.86; }

body.lightbox-open{ overflow:hidden; }

.wng-lightbox{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(23,23,22,.97);
  align-items:center; justify-content:center;
  padding:clamp(44px, 5vh, 60px) clamp(14px, 4vw, 76px);
}
.wng-lightbox.is-open{ display:flex; }

.wng-lightbox__figure{
  margin:0; max-width:100%; max-height:100%;
  display:flex; align-items:center; justify-content:center;
}
.wng-lightbox__img{
  max-width:100%; max-height:calc(100vh - clamp(118px, 14vh, 150px));
  width:auto; height:auto; object-fit:contain; border-radius:var(--radius);
}
/* Chrome podgladu: cienkie obrysy zamiast wypelnionych kol. */
.wng-lightbox__close,
.wng-lightbox__nav{
  position:absolute; background:none; color:#fff; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--radius);
  display:grid; place-items:center; line-height:1;
  transition:background var(--t), border-color var(--t);
}
.wng-lightbox__close:hover,
.wng-lightbox__nav:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); }

.wng-lightbox__close{ top:20px; right:20px; width:46px; height:46px; font-size:1.8rem; }
.wng-lightbox__nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:1.3rem; }
.wng-lightbox__nav--prev{ left:16px; }
.wng-lightbox__nav--next{ right:16px; }

.wng-lightbox__counter{
  position:absolute; bottom:18px; left:0; right:0; margin:0; text-align:center;
  font-family:var(--ff-display); font-size:.76rem; font-weight:500;
  letter-spacing:.14em; color:var(--c-text-invert-soft);
}

@media (max-width:640px){
  .wng-lightbox{ padding:56px 10px 72px; }
  .wng-lightbox__nav{ top:auto; bottom:18px; transform:none; width:46px; height:46px; }
  .wng-lightbox__nav--prev{ left:calc(50% - 60px); }
  .wng-lightbox__nav--next{ right:calc(50% - 60px); }
  .wng-lightbox__counter{ bottom:78px; }
}

/* --- 11. Formularze ------------------------------------ */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-family:var(--ff-display); font-weight:600; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.field .req{ color:var(--c-red); }
.field input,.field textarea,.field select{
  font:inherit; font-size:1rem; padding:.85rem 0; border:0;
  border-bottom:1px solid var(--c-border); border-radius:0;
  background:none; color:var(--c-text); width:100%;
  transition:border-color var(--t);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-bottom-color:var(--c-text); border-bottom-width:2px; padding-bottom:calc(.85rem - 1px);
}
.field textarea{ min-height:140px; resize:vertical; }
.field__hint{ font-size:.85rem; color:var(--c-text-soft); text-transform:none; letter-spacing:0; }
.field--consent{ flex-direction:row; align-items:flex-start; gap:12px; }
.field--consent input{ width:auto; margin-top:.3rem; flex:none; border-bottom:0; padding:0; }
.field--consent label{
  font-family:var(--ff); font-weight:400; font-size:.9rem;
  letter-spacing:0; text-transform:none; color:var(--c-text-soft); line-height:1.5;
}
.hp-field{ position:absolute!important; left:-9999px; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-bottom-color:var(--c-red); border-bottom-width:2px; }

.contact-layout{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(48px,6vw,88px); align-items:start; }
.contact-box{ background:none; border-top:2px solid var(--c-text); border-radius:0; padding:24px 0 0; }
.contact-box h3{ font-size:1.15rem; margin-bottom:1.25rem; }
.contact-box + .contact-box{ margin-top:40px; }
/* Bez ikony obok — sam podpis i adres. */
.contact-item{ margin-bottom:18px; }
.contact-item div{ font-size:.97rem; overflow-wrap:anywhere; }
.contact-item strong{
  display:block; font-family:var(--ff-display); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--c-text-soft); font-weight:600;
}

/* Przycisk powrotu na gore. Trzyma sie prawego dolnego naroznika, nad
   trescia. Na telefonie siedzi nizej i blizej krawedzi, zeby nie
   zaslanial tekstu, ale pozostal w zasiegu kciuka. */
.to-top{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  z-index:90; width:46px; height:46px; padding:0;
  display:grid; place-items:center; cursor:pointer;
  background:var(--c-bg-dark); color:#fff;
  border:0; border-radius:var(--radius);
  font-size:1.15rem; line-height:1;
  opacity:0; transform:translateY(8px);
  transition:opacity 200ms ease, transform 200ms ease, background var(--t);
}
.to-top.is-visible{ opacity:1; transform:none; }
.to-top:hover{ background:var(--c-action); }
.to-top:focus-visible{ outline:2px solid var(--c-yellow); outline-offset:3px; }
/* Przy otwartym menu mobilnym przycisk tylko by przeszkadzal. */
body.nav-open .to-top{ display:none; }

/* Baner zgody na ciasteczka. Siedzi przy dolnej krawedzi okna, nad
   trescia, ale nie zaslania calego ekranu — strone da sie przeczytac
   przed podjeciem decyzji. */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:190;
  background:var(--c-bg-dark); color:#fff;
  border-top:2px solid var(--c-yellow);
  opacity:0; transform:translateY(100%);
  transition:opacity 220ms ease, transform 220ms ease;
}
.cookie-bar.is-visible{ opacity:1; transform:none; }
.cookie-bar__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:22px clamp(20px,4vw,40px);
  display:flex; align-items:center; gap:32px; flex-wrap:wrap;
}
.cookie-bar__text{ flex:1 1 420px; min-width:0; }
.cookie-bar h2{
  font-size:1.05rem; margin:0 0 .35em; color:#fff;
  font-family:var(--ff-display); letter-spacing:-.01em;
}
.cookie-bar p{ margin:0; font-size:.92rem; color:var(--c-text-invert-soft); }
.cookie-bar a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }
.cookie-bar a:hover{ text-decoration:none; border-bottom-color:#fff; }
.cookie-bar__actions{ display:flex; gap:12px; flex:0 0 auto; }
.cookie-bar .btn{ padding:.75rem 1.4rem; font-size:.92rem; }
.cookie-bar .btn--ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
/* Odmowa po najechaniu tylko sie rozjasnia. Gdyby robila sie biala, byla by
   nie do odroznienia od przycisku zgody, ktory biale tlo ma na stale. */
.cookie-bar .btn--ghost:hover{
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.65);
}

/* Przycisk przywracajacy baner — wyglada jak odnosnik, bo tym w istocie jest. */
.cookie-reset{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline;
}
.cookie-reset:hover{ text-decoration:none; }

@media (max-width:640px){
  .cookie-bar__inner{ gap:18px; padding:18px 20px; }
  .cookie-bar__actions{ width:100%; }
  .cookie-bar__actions .btn{ flex:1 1 0; }
}

/* --- 12. Stopka ---------------------------------------- */
.site-footer{
  background:var(--c-bg-dark-2); color:var(--c-text-invert-soft);
  padding:clamp(56px,7vw,88px) 0 0; font-size:.94rem;
}
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(32px,4vw,56px); padding-bottom:clamp(40px,5vw,64px); }
/* Naglowki w stopce sa h3, a nie h4: po sekcji h2 przeskok o dwa poziomy
   gubi osoby korzystajace z czytnika ekranu, ktore skacza po naglowkach.
   Wyglad bez zmian — rozmiar ustawia ta regula, nie poziom naglowka. */
.site-footer h3{
  font-family:var(--ff-display); color:#fff; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.16em; margin-bottom:1.4rem;
}
.site-footer a{ color:var(--c-text-invert-soft); }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:.7em; }
/* width:auto jest tu konieczne: sama max-height nie koryguje szerokosci,
   ktora ustala atrybut width obrazka, i logo wychodzi rozciagniete. */
.footer-brand img{ max-height:48px; width:auto; height:auto; margin-bottom:20px; }

/* Ikony social mediow: przy opisie projektu na szerokich ekranach,
   a na telefonie pod kolumna „Kontakt", bo tam ich szukamy. */
.footer-socials{ margin-top:20px; }
@media (max-width:640px){

}
.footer-bottom{
  border-top:1px solid var(--c-border-dark); padding:24px 0;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--ff-display); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
}
/* Etykieta edycji i podpis autora stoja razem po prawej stronie. */
.footer-meta{ display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; }
.footer-credit{ color:var(--c-text-invert-soft); }
.footer-credit:hover{ color:#fff; text-decoration:none; }

/* --- 13. RWD ------------------------------------------- */
@media (max-width:1000px){
  .grid--4,.grid--3{ grid-template-columns:repeat(2,1fr); }
  .post-list,.album-list{ grid-template-columns:repeat(2,1fr); }
  .contact-layout{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  /* Hamburger dosuniety do prawej krawedzi. Bez tego pusty kontener
     przycisku zapisow rozpychal pasek i ikona ladowala na srodku. */
  .nav-toggle{ display:block; margin-left:auto; order:3; }
  .header-cta{ display:none; }

  /* Menu mobilne: pelnoekranowa nakladka w grafitowym tle strony,
     z ta sama typografia co naglowki. Zamiast listy pod paskiem. */
  .main-nav{
    display:none; position:fixed; inset:0; z-index:200;
    background:var(--c-bg-dark); color:#fff;
    padding:24px 28px 36px; overflow-y:auto;
    flex-direction:column;
    /* `inset:0` odnosi sie do okna bez paskow przegladarki, wiec przy ich
       chowaniu na gorze i na dole zostawal pasek tla strony. `dvh` liczy
       realna wysokosc widoku, a bezpieczne marginesy chronia przed
       zaslonieciem tresci przez pasek gestow. */
    min-height:100vh;
    min-height:100dvh;
    padding-bottom:calc(36px + env(safe-area-inset-bottom, 0px));
    padding-top:calc(24px + env(safe-area-inset-top, 0px));
  }
  .main-nav.is-open{ display:flex; opacity:1; }

  /* Nakladka wchodzi przenikaniem zamiast pojawiac sie skokiem.
     `allow-discrete` pozwala animowac przelaczenie display; bez niego
     menu otwiera sie natychmiast, tak jak wczesniej. */
  .main-nav{ opacity:0; transition:opacity 200ms ease, display 200ms allow-discrete; }
  @starting-style{ .main-nav.is-open{ opacity:0; } }

  .main-nav__head{
    display:flex; align-items:center; justify-content:space-between;
    min-height:56px; margin-bottom:clamp(24px,6vh,56px);
    border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:20px;
  }
  .main-nav__label{
    font-family:var(--ff-display); font-size:.74rem; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--c-text-invert-soft);
  }
  .main-nav__close{
    background:none; border:0; color:#fff; cursor:pointer;
    font-size:2.1rem; line-height:1; padding:0 4px;
  }

  .main-nav{ align-self:auto; }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  /* Selektory musza byc tak samo mocne jak te z widoku desktopowego
     (`.main-nav > ul > li`), inaczej pozycja menu zostaje elementem
     elastycznym i rozwinieta lista ustawia sie obok napisu, a nie pod nim. */
  .main-nav > ul{ height:auto; }
  .main-nav > ul > li,
  .main-nav li{ display:block; }
  .main-nav > ul > li.menu-item-has-children::after,
  .main-nav > ul > li.page_item_has_children::after{ content:none; }
  .main-nav a{
    font-family:var(--ff-display); font-size:clamp(1.65rem, 7vw, 2.4rem);
    font-weight:700; letter-spacing:-.03em; color:#fff;
    padding:.55em 0; border-bottom:1px solid rgba(255,255,255,.12);
  }
  /* Hover w menu: pozycja przesuwa sie w prawo i wysuwa sie kolorowa kreska. */
  .main-nav a{ position:relative; transition:color var(--t), padding-left var(--t); }
  .main-nav a::after{ display:none; }
  /* Kreska hovera. `border:0` kasuje strzalke, ktora ten sam pseudoelement
     rysuje w widoku desktopowym przy zakladkach z podstronami. */
  .main-nav a::before{
    content:""; position:absolute; left:0; top:50%; right:auto; width:0; height:2px;
    border:0; transform:none; opacity:1;
    background:var(--c-yellow); transition:width var(--t);
  }
  .main-nav a:hover,
  .main-nav a:focus-visible{ color:var(--c-yellow); padding-left:24px; }
  .main-nav a:hover::before,
  .main-nav a:focus-visible::before{ width:14px; }
  .main-nav > ul > li:last-child > a{ border-bottom:0; }
  .main-nav .current-menu-item > a,
  .main-nav .current_page_parent > a,
  .main-nav .current-menu-ancestor > a{ box-shadow:none; color:var(--c-yellow); }

  /* Zakladka z podstronami: odnosnik prowadzi do strony nadrzednej,
     a strzalka obok rozwija liste. Wczesniej podmenu bylo rozwiniete
     zawsze i lista zakladek robila sie dwa razy dluzsza. */
  .main-nav li.menu-item-has-children > a,
  .main-nav li.page_item_has_children > a{ padding-right:56px; }

  .submenu-toggle{
    display:block; position:absolute; right:0; top:0;
    width:52px; height:3.2rem; padding:0;
    background:none; border:0; cursor:pointer; color:#fff;
  }
  .submenu-toggle span{
    display:block; width:9px; height:9px; margin:0 auto;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform 200ms ease;
  }
  .submenu-open > .submenu-toggle span{ transform:rotate(-135deg) translate(-3px,-3px); }
  .submenu-toggle:focus-visible{ outline:2px solid var(--c-yellow); outline-offset:-4px; }

  .main-nav li{ position:relative; }

  /* Selektor musi byc tak samo mocny jak ten z widoku desktopowego
     (`.main-nav li > .sub-menu`), inaczej tamten wygrywa i podmenu
     zostaje rozwiniete mimo `display:none`. */
  .main-nav li > .sub-menu{
    display:none; position:static; border:0; background:none;
    box-shadow:none; opacity:1; pointer-events:auto; transform:none;
    padding:0 0 12px 20px; min-width:0;
  }
  .main-nav li.submenu-open > .sub-menu{ display:block; }

  /* Na ciemnej nakladce biezaca podstrona jest oznaczona kolorem, a nie
     jasnym prostokatem — ten pochodzil z panelu desktopowego, gdzie tlo
     jest jasne, i na telefonie wygladal jak pole formularza. */
  .main-nav .sub-menu a{ border-radius:0; padding-inline:0; }
  .main-nav .sub-menu .current-menu-item > a{
    background:none; color:var(--c-yellow); font-weight:600;
  }
  .main-nav .sub-menu a:hover,
  .main-nav .sub-menu a:focus-visible{ background:none; color:var(--c-yellow); }
  .main-nav .sub-menu a{
    font-size:1.05rem; font-weight:500; letter-spacing:0;
    color:var(--c-text-invert-soft); border-bottom:0; padding:.4em 0;
  }

  /* Przycisk i ikony ida tuz pod lista zakladek, jako jedna grupa.
     Wczesniej `margin-top:auto` spychal je na sam dol ekranu i na wyzszych
     telefonach odrywaly sie od menu, wiszac osobno przy krawedzi. */
  .main-nav__foot{
    display:flex; flex-direction:column; gap:24px; align-items:center;
    margin-top:0; padding-top:clamp(28px,5vh,48px); padding-bottom:8px;
  }
  .main-nav__foot .btn{ width:100%; }
  .main-nav__foot .socials{ justify-content:center; }

  /* Pasek zostaje przyklejony takze na telefonie, ale bez rozmycia tla.
     backdrop-filter tworzy blok zawierajacy dla potomkow position:fixed,
     wiec nakladka menu pozycjonowalaby sie wzgledem paska, a nie okna
     i zajmowalaby tylko jego wysokosc. Samo position:sticky takiego
     bloku nie tworzy, dlatego przyklejenie moze zostac. */
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--c-bg); }

  /* Blokada przewijania tla, gdy nakladka jest otwarta. */
  /* Blokada przewijania tla. `overflow:hidden` na <body> nie wystarcza:
     na telefonach kontenerem przewijania jest czesto <html>, wiec strona
     dalej daje sie przesuwac palcem. Dlatego przy otwartym menu <body>
     jest wyjete z przewijania (position:fixed), a skrypt pamieta pozycje
     i wraca do niej po zamknieciu. */
  html.nav-open{ overflow:hidden; background:var(--c-bg-dark); }
  body.nav-open{
    position:fixed; left:0; right:0; width:100%;
    overflow:hidden; overscroll-behavior:none;
    background:var(--c-bg-dark);
  }
  /* Przewijanie wewnatrz menu nie przenosi sie na strone pod nim. */
  .main-nav{ overscroll-behavior:contain; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .hero{ min-height:auto; }
  .hero__dots{ bottom:16px; }
  /* Na telefonie tekst idzie przez cala szerokosc, wiec gradient poziomy
     zostawilby jasny prawy brzeg pod literami. Zastepujemy go rownym. */
  .hero__media::after,
  .page-hero__media::after{
    background:linear-gradient(180deg,
      rgba(46,46,45, calc(var(--hero-shade, .55) + .1)) 0%,
      rgba(46,46,45, calc(var(--hero-shade, .55) + .22)) 100%);
  }
  .grid--2,.grid--3,.grid--4,.post-list,.album-list,.form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  /* Przyciski na cala szerokosc ekranu wygladaly przesadnie duzo —
     wystarcza naturalna szerokosc tekstu i mniejsze wypelnienie.
     46px wysokosci nadal mieszczy sie w zalecanym minimum dotyku. */
  .hero__actions{ gap:12px; }
  .hero__actions .btn{ width:auto; padding:.8rem 1.4rem; font-size:.92rem; }
  .stats{ grid-template-columns:1fr 1fr; }
  .main-nav{ padding-inline:20px; }
}

@media print{
  .site-header,.site-footer,.hero__actions,.cta-band,.nav-toggle,.post-nav,.to-top{ display:none!important; }
  body{ font-size:12pt; }
}

/* =========================================================
   14. Klasy uzywane przez wzorce blokow
   Wzorce skladaja sie z blokow rdzenia WordPressa; te reguly
   nadaja im wyglad motywu, zeby redaktor nie musial nic stylowac.
   ========================================================= */
.entry-content .wng-section{ margin-block:clamp(48px,6vw,84px); }
.entry-content > .wng-section:first-child{ margin-top:0; }
.entry-content > .wng-section:last-child{ margin-bottom:0; }

.entry-content .wng-section--dark{ padding:clamp(36px,5vw,72px); border-radius:var(--radius-lg); }
.entry-content .wng-section--dark h2{ color:#fff; }
.entry-content .wng-section--dark .stat__label{ color:var(--c-text-invert-soft); }

.entry-content .wng-cards{ gap:clamp(32px,4vw,56px); margin-top:3rem; }
/* Pas z liczbami idzie przez cala szerokosc okna. Gdy sekcja nie miesci
   sie juz w kolumnie tekstu, naglowek przy lewej krawedzi nie ma sie do
   czego wyrownac — dlatego cala zawartosc jest wysrodkowana. Odstepy sa
   mniejsze niz w zwyklej sekcji, zeby pas byl wyrazie szerszy niz wyzszy. */
.entry-content .wng-section--dark:has(.wng-stats){
  width:100vw; max-width:none; margin-left:50%; translate:-50% 0;
  border-radius:0; background:var(--c-bg-dark-2);
  padding-block:clamp(36px, 3.6vw, 52px);
  padding-inline:max(24px, calc(50vw - (var(--wrap) / 2)));
  text-align:center;
}
.entry-content .wng-section--dark:has(.wng-stats) .wng-stats{ margin-top:2rem; }
/* Naglowek i przypis sa akapitami, wiec obejmuje je regula wygodnej
   szerokosci czytania. Ta szerokosc jest wezsza niz pas z liczbami i lezy
   przy jego lewej krawedzi, przez co wysrodkowany w niej tekst wypadal
   wyraznie na lewo od srodka pasa. Doklejamy automatyczne marginesy,
   zeby sama kolumna tekstu stanela na srodku. */
.entry-content .wng-section--dark:has(.wng-stats) > h2,
.entry-content .wng-section--dark:has(.wng-stats) > .stat__note{
  margin-inline:auto;
}
.entry-content .wng-stats > .wp-block-column{ text-align:center; }
.entry-content .wng-stats{ gap:clamp(28px,4vw,48px); margin-top:3rem; }
/* Przypis pod liczbami — mniejszy i przygaszony, zeby tlumaczyl gwiazdki,
   a nie konkurowal z samymi liczbami. */
.entry-content .stat__note{
  margin-top:1.75rem; font-size:.82rem; line-height:1.5;
  color:var(--c-text-invert-soft); text-align:center;
}
.entry-content .wng-contact{ gap:clamp(48px,6vw,88px); margin-top:3rem; }
.entry-content .wng-contact .contact-box h3{ margin-top:0; }

/* Rowne kolumny niezaleznie od stylow rdzenia WordPressa.
   Samo flex-basis:0 bez flex-grow zwija kolumne do zera — stad pelny skrot flex.
   min-width:0 pozwala dlugim slowom sie lamac zamiast rozpychac kolumne. */
.entry-content .wng-cards > .wp-block-column,
.entry-content .wng-stats > .wp-block-column{ flex:1 1 0; min-width:0; }

/* Uklad kontaktu ma zadane szerokosci procentowe, wiec zostawiamy je w spokoju
   i dokladamy tylko to, co potrzebne do poprawnego kurczenia. */
.entry-content .wng-contact > .wp-block-column{ flex-grow:1; min-width:0; }

/* Trzy bloki tekstu w „O nas" — oddzielone kreska, nie ramka. */
.entry-content .wng-blocks .wng-block + .wng-block{
  border-top:1px solid var(--c-border); padding-top:2.5rem; margin-top:2.5rem;
}
.entry-content .wng-blocks .wng-block h2{ margin-top:0; }

/* Drobny druk pod przyciskiem zapisow. Ma byc czytelny, ale nie ma
   konkurowac z samym przyciskiem — stad mniejszy stopien i wezsza kolumna. */
.signup-note{
  margin:12px 0 0; font-size:.78rem; line-height:1.5;
  max-width:46ch; color:var(--c-text-soft);
}
.cta-band .signup-note{ color:var(--c-text-invert-soft); }
.cta-band .signup-note a,
.signup-note a{ text-decoration:underline; }

/* Lista plikow z panelu — skrot [wng_pliki].
   Nazwa po lewej, przycisk po prawej, kreska miedzy pozycjami. Rozmiar
   i typ podajemy obok nazwy, zeby nikt nie klikal w ciemno. */
.entry-content .wng-pliki{ margin-top:3rem; }
.entry-content .wng-pliki__lista{ list-style:none; margin:2rem 0 0; padding:0; }
.entry-content .wng-plik{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px;
  border-top:1px solid var(--c-border); padding:18px 0; margin:0;
}
.entry-content .wng-plik:last-child{ border-bottom:1px solid var(--c-border); }
.entry-content .wng-plik__nazwa{ font-weight:600; flex:1 1 320px; min-width:0; }
.entry-content .wng-plik__meta{
  font-size:.82rem; color:var(--c-text-soft); letter-spacing:.02em;
}
.entry-content .wng-plik .btn{ flex:0 0 auto; padding:.6rem 1.3rem; font-size:.9rem; }

@media (max-width:560px){
  .entry-content .wng-plik .btn{ width:100%; text-align:center; }
}

/* Lista plikow do pobrania */
.entry-content .wng-files{ margin-top:2rem; }
.entry-content .wp-block-file{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px; border-top:1px solid var(--c-border); padding:18px 0; margin:0;
}

/* Podglad PDF-a. Blok „Plik" wstawia <object> jako pierwsze dziecko, wiec
   bez tych regul staje sie zwyklym elementem elastycznym: rozpycha rzad,
   ignoruje wysokosc i nachodzi na to, co jest pod sekcja. Tu dostaje cala
   szerokosc, wlasna wysokosc i wraca nad nazwe pliku. */
.entry-content .wp-block-file object,
.entry-content .wp-block-file embed,
.entry-content .wp-block-file iframe{
  order:-1; flex:1 0 100%; width:100%;
  height:clamp(320px, 62vh, 620px);
  margin-bottom:18px; border:1px solid var(--c-border); background:#fff;
}
.entry-content .wng-files .wp-block-file:last-child,
/* Pliki wstawione wprost w sekcji, bez dodatkowej grupy — ostatni
   domyka liste kreska, zeby nie konczyla sie w powietrzu. */
.entry-content .wng-section > .wp-block-file:last-child{ border-bottom:1px solid var(--c-border); }
.entry-content .wp-block-file > a:first-child{
  font-family:var(--ff-display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em; color:var(--c-text);
}
.entry-content .wp-block-file > a:first-child:hover{ color:var(--c-blue); }
.entry-content .wp-block-file__button{
  background:none; border:1px solid var(--c-border); border-radius:var(--radius);
  color:var(--c-text); padding:.5rem 1.1rem; font-family:var(--ff);
  font-size:.85rem; font-weight:600; flex:none;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.entry-content .wp-block-file__button:hover{
  background:var(--c-text); border-color:var(--c-text); color:#fff; text-decoration:none;
}

/* Na telefonie podglad PDF-a zajmuje caly ekran i nie da sie go wygodnie
   przewijac — zostaje sama nazwa pliku i przycisk pobierania. */
@media (max-width:640px){
  .entry-content .wp-block-file object,
  .entry-content .wp-block-file embed,
  .entry-content .wp-block-file iframe{ display:none; }
}

/* Logotypy partnerow */
.entry-content .partners{
  display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px);
  align-items:center; justify-content:center; margin-top:2.5rem;
}
.entry-content .partners figure{ margin:0; }
.entry-content .partners img{
  max-height:64px; width:auto; filter:grayscale(1); opacity:.55;
  transition:filter var(--t), opacity var(--t);
}
.entry-content .partners img:hover{ filter:none; opacity:1; }

@media (max-width:560px){
  .entry-content .wp-block-file{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* Bloki „Szczegoly" w sekcji FAQ */
.entry-content .faq .wp-block-details{
  border:0; border-bottom:1px solid var(--c-border);
  margin:0; background:none; padding:0;
}
.entry-content .faq .wp-block-details summary{
  cursor:pointer; padding:22px 0; font-family:var(--ff-display);
  font-size:1.15rem; font-weight:600; letter-spacing:-.02em;
  display:flex; justify-content:space-between; gap:24px; align-items:center;
}
.entry-content .faq .wp-block-details summary::-webkit-details-marker{ display:none; }
.entry-content .faq .wp-block-details summary::marker{ content:""; }
.entry-content .faq .wp-block-details summary::after{
  content:"+"; font-size:1.4rem; font-weight:400; color:var(--c-blue); line-height:1;
  transition:transform 260ms ease, color var(--t);
}
.entry-content .faq .wp-block-details[open] summary::after{ transform:rotate(45deg); }
.entry-content .faq .wp-block-details > *:not(summary){ padding:0; color:var(--c-text-soft); max-width:var(--wrap-text); }
.entry-content .faq .wp-block-details > *:last-child{ padding-bottom:22px; margin-bottom:0; }

/* Kolumny w sekcjach skladaja sie na waskich ekranach. WordPress robi to sam,
   ale wlasna regula chroni uklad, gdyby styl rdzenia kiedys sie zmienil. */
@media (max-width:781px){
  .entry-content .wng-cards,
  .entry-content .wng-stats,
  .entry-content .wng-contact{ flex-wrap:wrap; }

  .entry-content .wng-cards > .wp-block-column,
  .entry-content .wng-contact > .wp-block-column{ flex-basis:100%!important; }

  /* Liczby czytaja sie lepiej w ukladzie 2x2 niz w jednej kolumnie.
     Siatka zamiast zawijanego flexa, bo przy flex-basis trzeba odjac
     polowe odstepu — a odstep jest podany przez clamp() i przy waskim
     ekranie wychodzilo ponad 100%, wiec kolumny spadaly jedna pod druga. */
  .entry-content .wng-stats{ display:grid; grid-template-columns:1fr 1fr; }
  .entry-content .wng-stats > .wp-block-column{ flex-basis:auto!important; }

  /* Nad siatka 2x2 naglowek przy lewej krawedzi wisi nad jedna kolumna
     i wyglada na przypadkowy — tu srodek jest naturalny. Na szerokim
     ekranie naglowek zostaje po lewej, jak wszystkie pozostale. */
  .entry-content .wng-section--dark:has(.wng-stats){ text-align:center; }
}