/* ------------------------------------------------------------------
   SEKCJE — warstwa projektowa, pisana od nowa 2026-09-06.
   Poprzednia wersja byla poprawna i nijaka. Ta ma trzy rzeczy, ktorych
   tamta nie miala: RYTM PODLOZY (sekcje czytaja sie jako osobne pasma),
   WIEKSZY SKOK SKALI (naglowek sekcji naprawde otwiera sekcje) oraz
   OBRAZ NA PELNA SZEROKOSC zamiast pasków w pojemniku.
   Kolor, typografia i siatka sa NIETKNIETE - byly zmierzone.
   ------------------------------------------------------------------ */

.piu-v3 .wp-block-group:not(.piu-hero) { margin-block: 0; }

/* ===================== RYTM PODLOZY ============================== */
/* Sekcja domyslnie stoi na papierze. Co druga dostaje powierzchnie,
   zeby pasma bylo widac bez rysowania linii. Noc zostaje przerywnikiem
   i wystepuje dwa razy: pas terminu i stopka. */
.piu-sekcja--powierzchnia { background-color: var(--piu-powierzchnia); }
.piu-sekcja--powierzchnia + .piu-sekcja--powierzchnia { padding-top: 0; }

/* ============== NAGLOWEK SEKCJI: STEMPEL + TYTUL ================= */
/* Powtarzalna para na kazdej sekcji: drobny stempel nazywa dzial,
   pod nim tytul. To ten sam znak rozpoznawczy, ktory niesie logo. */
.piu-naglowek-sekcji { margin-bottom: var(--piu-r6); max-width: 34ch; }
.piu-naglowek-sekcji .piu-stempel { margin-bottom: var(--piu-r2); }
.piu-v3 .piu-naglowek-sekcji h2 { margin: 0; text-wrap: balance; }
@media (min-width: 1024px) {
  /* Skok skali: naglowek sekcji wchodzi o stopien wyzej niz w wersji
     poprzedniej, bo przy 29 px nie otwieral sekcji, tylko akapit. */
  .piu-v3 .piu-naglowek-sekcji h2 { font-size: var(--piu-t7); }
}
/* Linia marginesu przy naglowku - ten sam element co w logo i w kaflu. */
.piu-naglowek-sekcji { padding-left: var(--piu-r4); border-left: var(--piu-linia) solid var(--piu-akcent); }

/* ========================== KARTY ================================ */
/* "Powierzchnia + obwodka 1 px + naroznik 2 px. Naroznik jest prawie
   ostry celowo - dokument, nie pastylka." Doklada sie wlos cienia:
   tyle, zeby karta odklejala sie od tla, i ani piksela wiecej. */
.piu-karta {
  background-color: var(--piu-powierzchnia);
  border: 1px solid var(--piu-obwodka);
  border-radius: var(--piu-naroznik);
  padding: var(--piu-r5);
  box-shadow: 0 1px 2px rgba(42, 32, 40, 0.04);
}
.piu-sekcja--powierzchnia .piu-karta { background-color: var(--piu-tlo); }
.piu-kafel { border-left: var(--piu-linia) solid var(--piu-akcent); }

.piu-stempel {
  font-size: var(--piu-t1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--piu-tekst-cichy);
  margin: 0 0 var(--piu-r3);
  display: block;
}

.piu-metryczka {
  font-size: var(--piu-t2);
  line-height: 1.5;
  color: var(--piu-tekst-cichy);
  border-top: 1px solid var(--piu-obwodka);
  padding-top: var(--piu-r3);
  margin: 0;
}
.piu-metryczka .wp-block-list { margin: 0 0 var(--piu-r3); padding-left: var(--piu-r4); }
.piu-metryczka li { margin-bottom: var(--piu-r2); }

/* =========================== GUZIKI ============================== */
/* Dwa tokeny CTA, zadeklarowane w :root i NIE nadpisywane w sekcji
   nocnej. Guzik wniesiony do obcej sekcji nie ma czego odziedziczyc. */
.piu-v3 .wp-block-button.piu-cta-w .wp-block-button__link,
.piu-v3 .piu-cta-w .wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: var(--piu-r3) var(--piu-r5);
  border: 0; border-radius: var(--piu-naroznik);
  font-family: var(--piu-f-tekstowa); font-size: var(--piu-t3);
  font-weight: 700; line-height: 1.2; text-decoration: none;
  background-color: var(--piu-cta-jasny-wypelnienie);
  color: var(--piu-cta-jasny-etykieta);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.piu-v3 .piu-cta-w .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(42,32,40,0.16); }
.piu-v3 .wp-block-button.piu-cta-w--ciemny .wp-block-button__link,
.piu-v3 .piu-cta-w--ciemny .wp-block-button .wp-block-button__link {
  background-color: var(--piu-cta-ciemny-wypelnienie);
  color: var(--piu-cta-ciemny-etykieta);
}
@media (max-width: 519px) {
  .piu-v3 .piu-cta-w .wp-block-button,
  .piu-v3 .piu-cta-w .wp-block-button__link { width: 100%; }
}
.piu-akcja-drugorzedna { font-weight: 700; min-height: 48px; display: inline-flex; align-items: center; }
.piu-akcja-drugorzedna a { color: var(--piu-akcent); text-underline-offset: 0.2em; }

/* ==================== OBRAZ NA PELNA SZEROKOSC =================== */
/* Pas wychodzi POZA pojemnik, na pelna szerokosc okna. Kadr przyciety
   do pojemnika czytal sie jak ilustracja doklejona do akapitu. */
.piu-pas-pelny {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  margin-block: 0;
}
.piu-pas-pelny img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover;
}
@media (max-width: 719px) { .piu-pas-pelny img { aspect-ratio: 3 / 2; } }

/* ============ 1. HERO — tresc na ruchomym tle ==================== */
.piu-hero .piu-hero__tresc > .wp-block-group { max-width: 42ch; }
.piu-hero .piu-hero__tresc h1 { margin-bottom: var(--piu-r4); }
.piu-hero .piu-hero__tresc p { margin-bottom: var(--piu-r5); font-size: var(--piu-t4); }
.piu-hero .wp-block-buttons { margin: 0; }
.piu-hero__stempel { color: var(--piu-akcent-noc); margin-bottom: var(--piu-r3); }

/* ============ 2. KAFLE SZESCIU DZIALOW =========================== */
/* BENTO, nie siatka. Trzy rozne relacje obrazu i tekstu: kafel duzy
   niesie tekst NA kadrze, wysoki ma kadr nad tekstem, cztery poziome
   maja kadr OBOK tekstu.

   UWAGA O SZCZEGOLOWOSCI: wszystkie reguly ukladu kafla pisane sa jako
   `.piu-kafle .piu-kafel--<wariant>`, czyli z ta sama sila co regula
   wspolna. Pierwsza wersja miala wspolne `.piu-kafle .piu-kafel
   { display:flex }` i warianty jako `.piu-kafel--poziomy { display:grid }`
   - slabsze o jedna klase, wiec grid nigdy sie nie wlaczal, a kadry
   rozdymaly sie na cala wysokosc kolumny. */
.piu-kafle__siatka { display: grid; grid-template-columns: 1fr; gap: var(--piu-r4); }
@media (min-width: 720px) {
  .piu-kafle__siatka { grid-template-columns: repeat(6, 1fr); }
  .piu-kafle .piu-kafel--duzy    { grid-column: span 6; }
  .piu-kafle .piu-kafel--wysoki  { grid-column: span 6; }
  .piu-kafle .piu-kafel--poziomy { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .piu-kafle__siatka { gap: var(--piu-r5); }
  .piu-kafle .piu-kafel--duzy    { grid-column: span 4; grid-row: span 2; }
  .piu-kafle .piu-kafel--wysoki  { grid-column: span 2; grid-row: span 2; }
  .piu-kafle .piu-kafel--poziomy { grid-column: span 3; }
}

.piu-kafle .piu-kafel {
  position: relative; padding: 0; overflow: hidden;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.piu-kafle .piu-kafel__kadr { margin: 0; overflow: hidden; position: relative; }
.piu-kafle .piu-kafel__kadr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.piu-kafle .piu-kafel__tresc { padding: var(--piu-r5); }
.piu-kafle .piu-kafel__naglowek { font-size: var(--piu-t4); margin: 0 0 var(--piu-r3); line-height: 1.25; }
.piu-kafle .piu-kafel__naglowek a { color: var(--piu-tekst); text-decoration: none; }
.piu-kafle .piu-kafel__naglowek a::after { content: ""; position: absolute; inset: 0; }
.piu-kafle .piu-kafel__zdanie { font-size: var(--piu-t2); color: var(--piu-tekst-cichy); margin: 0; }
.piu-kafle .piu-kafel:hover { border-color: var(--piu-akcent); box-shadow: 0 8px 22px rgba(42,32,40,0.12); transform: translateY(-2px); }
.piu-kafle .piu-kafel:focus-within { outline: 2px solid var(--piu-akcent); outline-offset: 3px; }
.piu-kafle .piu-kafel:hover .piu-kafel__naglowek a { text-decoration: underline; }

/* --- DUZY: tekst lezy NA kadrze --- */
.piu-kafle .piu-kafel--duzy { display: flex; flex-direction: column; }
.piu-kafle .piu-kafel--duzy .piu-kafel__kadr img { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .piu-kafle .piu-kafel--duzy .piu-kafel__kadr { position: absolute; inset: 0; }
  .piu-kafle .piu-kafel--duzy .piu-kafel__kadr img { aspect-ratio: auto; height: 100%; }
  /* Gradient jest WARSTWA STALA pod tekstem - kontrast liczy sie wobec
     niego, nie wobec zdjecia, dokladnie jak w hero. */
  .piu-kafle .piu-kafel--duzy .piu-kafel__tresc {
    position: relative; margin-top: auto;
    /* Wyscielka gorna jest DUZA celowo: gradient obejmuje tylko to
       pudlo, wiec bez zapasu jego gorna krawedz widac jako kreske
       nad tekstem - ten sam defekt, ktory wlasciciel zglosil w hero.
       136 px daje strefe wygaszania, w ktorej przejscie ginie. */
    padding: var(--piu-r8) var(--piu-r5) var(--piu-r5);
    /* Gradient obejmuje TYLKO pudlo tresci, wiec jego gorna czesc pada
       dokladnie tam, gdzie stoi stempel i tytul. Pierwsza wersja schodzila
       tam do 0.10 i pomiar zlapal pod naglowkiem piksel rgb(151,145,149)
       - kontrast 1.21 przy progu 4.5. Krzywa jest teraz mocna przez cala
       wysokosc tekstu i wygasa dopiero na samej gornej krawedzi. */
    background: linear-gradient(to top,
      rgba(46, 33, 41, 0.94) 0%,
      rgba(46, 33, 41, 0.92) 34%,
      rgba(46, 33, 41, 0.88) 50%,
      rgba(46, 33, 41, 0.80) 62%,
      rgba(46, 33, 41, 0.66) 72%,
      rgba(46, 33, 41, 0.48) 81%,
      rgba(46, 33, 41, 0.30) 89%,
      rgba(46, 33, 41, 0.14) 95%,
      rgba(46, 33, 41, 0.00) 100%);
  }
  /* Stempel na kadrze bierze JASNY tekst, nie akcent. Akcent nocny
     (#DE9AB0) przy 12 px dawal 4.02 przy progu 4.5 - dla drobnego
     pisma na zdjeciu to za malo. */
  .piu-kafle .piu-kafel--duzy .piu-stempel { color: var(--piu-tekst-noc); opacity: 0.92; }
  .piu-kafle .piu-kafel--duzy .piu-kafel__naglowek { font-size: var(--piu-t6); }
  .piu-kafle .piu-kafel--duzy .piu-kafel__naglowek a { color: var(--piu-tekst-noc); }
  .piu-kafle .piu-kafel--duzy .piu-kafel__zdanie { color: var(--piu-tekst-noc); opacity: 0.88; max-width: 36ch; font-size: var(--piu-t3); }
}

/* --- WYSOKI: kadr pionowy nad tekstem --- */
.piu-kafle .piu-kafel--wysoki { display: flex; flex-direction: column; }
.piu-kafle .piu-kafel--wysoki .piu-kafel__kadr { flex: 1 1 auto; }
.piu-kafle .piu-kafel--wysoki .piu-kafel__kadr img { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .piu-kafle .piu-kafel--wysoki .piu-kafel__kadr img { aspect-ratio: auto; height: 100%; min-height: 260px; }
}

/* --- POZIOME: kadr OBOK tekstu --- */
.piu-kafle .piu-kafel--poziomy { display: flex; flex-direction: column; }
.piu-kafle .piu-kafel--poziomy .piu-kafel__kadr img { aspect-ratio: 16 / 10; }
@media (min-width: 560px) {
  .piu-kafle .piu-kafel--poziomy {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }
  .piu-kafle .piu-kafel--poziomy .piu-kafel__kadr { height: 100%; min-height: 160px; }
  .piu-kafle .piu-kafel--poziomy .piu-kafel__kadr img { aspect-ratio: auto; position: absolute; inset: 0; }
  .piu-kafle .piu-kafel--poziomy .piu-kafel__tresc { padding: var(--piu-r4) var(--piu-r5); align-self: center; }
}

/* ============ 3. SCIEZKA PIECIU KROKOW =========================== */
/* Kadr jest KOLUMNA, nie pasem nad sekcja. Kroki jada w kolumnie prozy,
   kadr stoi obok i przykleja sie przy przewijaniu - dzieki temu prawa
   polowa sekcji, dotad pusta, niesie obraz, a obraz jest czescia
   kompozycji zamiast plansza doklejona u gory. */
.piu-sciezka__rzad { display: grid; grid-template-columns: 1fr; gap: var(--piu-r6); }
@media (min-width: 900px) {
  .piu-sciezka__rzad {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--piu-r7); align-items: start;
  }
  .piu-sciezka__kadr { position: sticky; top: calc(var(--piu-naglowek-h, 72px) + var(--piu-r5)); }
}
.piu-sciezka__kadr figure { margin: 0; border-radius: var(--piu-naroznik); overflow: hidden; }
.piu-sciezka__kadr img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 899px) { .piu-sciezka__kadr img { aspect-ratio: 16 / 9; } }

.piu-kroki { max-width: var(--piu-proza); }
.piu-krok { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: var(--piu-r4); padding-top: var(--piu-r5); }
.piu-krok + .piu-krok { border-top: 1px solid var(--piu-obwodka); }
.piu-krok:first-child { padding-top: 0; }
.piu-krok__numer {
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t6);
  line-height: var(--piu-i-naglowki); color: var(--piu-akcent); margin: 0;
}
.piu-krok__naglowek { grid-column: 2; font-size: var(--piu-t4); margin: 0 0 var(--piu-r2); }
.piu-krok__proza { grid-column: 2; margin: 0; }

/* ============ 4. TERMIN — przerywnik nocny ======================= */
/* Przyciemnienie jest WARSTWA W TYM SAMYM `background`, a nie osobnym
   pseudoelementem. Wersja z ::before i z-index:-1 nie malowala sie i kadr
   przeswitywal prawie w pelni - a zmierzony kontrast 12.92:1 obowiazuje
   wobec CZYSTEGO #2E2129, wiec bez krycia przestaje obowiazywac.
   Gradient o dwoch identycznych przystankach to najprostszy sposob na
   plaska warstwe koloru nad obrazem i nie da sie go zgubic w stosie. */
.piu-termin {
  position: relative;
  background-color: var(--piu-tlo-noc);
  background-image:
    linear-gradient(rgba(46, 33, 41, 0.93), rgba(46, 33, 41, 0.93)),
    var(--piu-termin-tlo, none);
  background-size: cover;
  background-position: center;
}
.piu-termin .piu-naglowek-sekcji { border-left-color: var(--piu-akcent-noc); }
.piu-termin__rzad { display: grid; grid-template-columns: 1fr; gap: var(--piu-r6); align-items: start; }
@media (min-width: 900px) {
  .piu-termin__rzad { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--piu-r7); }
  /* Panel z licznikiem JEDZIE Z TEKSTEM. Bez tego lewa kolumna konczyla
     sie na podpisie licznika, a pod nia zostawala pustka na wysokosc
     calej prozy z prawej strony - zglosil to wlasciciel na zrzucie. */
  .piu-licznik { position: sticky; top: calc(var(--piu-naglowek-h, 72px) + var(--piu-r5)); }
}
.piu-licznik .wp-block-buttons { margin-top: var(--piu-r5); }
.piu-datownik { font-size: var(--piu-t2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--piu-akcent); margin: 0 0 var(--piu-r3); }
.piu-licznik__liczba { font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t8); line-height: 1; color: var(--piu-akcent); margin: 0; }
@media (min-width: 1024px) { .piu-licznik__liczba { font-size: 68px; } }
.piu-licznik__jednostka { font-size: var(--piu-t5); }
.piu-licznik__podpis { font-size: var(--piu-t3); color: var(--piu-tekst-cichy); margin: var(--piu-r3) 0 0; }
.piu-para { margin-block: var(--piu-r6); gap: var(--piu-r5); }
.piu-para .wp-block-column { border-left: var(--piu-linia) solid var(--piu-obwodka); padding-left: var(--piu-r4); }
.piu-para .wp-block-column:first-child { border-left-color: var(--piu-akcent); }
.piu-para__nie-mowimy { color: var(--piu-tekst-cichy); text-decoration: line-through; }
@media (max-width: 719px) { .piu-para { flex-wrap: wrap; } .piu-para .wp-block-column { flex-basis: 100% !important; } }
.piu-termin .piu-metryczka { border-top-color: var(--piu-obwodka); margin-top: var(--piu-r6); }
.piu-termin .piu-metryczka a { color: var(--piu-akcent); }

/* ============ 5. WZOR I JEGO GRANICA ============================= */
.piu-wzor__kolumny { margin-block: 0 var(--piu-r6); gap: var(--piu-r6); }
.piu-wzor__kolumny .wp-block-column { padding-left: var(--piu-r4); border-left: var(--piu-linia) solid var(--piu-obwodka); }
.piu-wzor__kolumny .wp-block-column:first-child { border-left-color: var(--piu-akcent); }
.piu-lista-pol, .piu-lista-granic { margin: 0; padding-left: var(--piu-r4); font-size: var(--piu-t3); }
.piu-lista-pol li, .piu-lista-granic li { margin-bottom: var(--piu-r4); }
.piu-lista-pol li:last-child, .piu-lista-granic li:last-child { margin-bottom: 0; }

/* ============ 6. ZMIANY W PRAWIE ================================= */
.piu-nowosci__siatka { display: grid; grid-template-columns: 1fr; gap: var(--piu-r4); }
@media (min-width: 720px) { .piu-nowosci__siatka { grid-template-columns: repeat(2, 1fr); gap: var(--piu-r5); } }
.piu-notatka { position: relative; display: flex; flex-direction: column; }
.piu-notatka .piu-datownik { color: var(--piu-akcent); }
.piu-notatka__naglowek { font-size: var(--piu-t4); margin: 0 0 var(--piu-r3); }
.piu-notatka__naglowek a { color: var(--piu-tekst); text-decoration: none; }
.piu-notatka__naglowek a::after { content: ""; position: absolute; inset: 0; }
.piu-notatka:hover { border-color: var(--piu-akcent); }
.piu-notatka:focus-within { outline: 2px solid var(--piu-akcent); outline-offset: 3px; }
.piu-notatka:hover .piu-notatka__naglowek a { text-decoration: underline; }
.piu-notatka__zdania { flex: 1 1 auto; margin: 0 0 var(--piu-r4); }
.piu-notatka__metryczka {
  font-size: var(--piu-t1); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--piu-tekst-cichy); border-top: 1px solid var(--piu-obwodka);
  padding-top: var(--piu-r3); margin: 0;
}

/* ============ 7. JAK POWSTAJA TEKSTY ============================= */
.piu-zaufanie__siatka { display: grid; grid-template-columns: 1fr; gap: var(--piu-r4); margin-bottom: var(--piu-r5); }
@media (min-width: 900px) { .piu-zaufanie__siatka { grid-template-columns: repeat(3, 1fr); gap: var(--piu-r5); } }
.piu-sygnal { display: flex; flex-direction: column; }
.piu-sygnal__naglowek { font-size: var(--piu-t4); margin: 0 0 var(--piu-r3); }
.piu-sygnal p { margin: 0 0 var(--piu-r4); }
.piu-sygnal__sprawdzic {
  margin: auto 0 0; padding-top: var(--piu-r3);
  border-top: 1px solid var(--piu-obwodka);
  font-size: var(--piu-t2); color: var(--piu-tekst-cichy);
}

/* ==================== STRONA NARZEDZIOWA ========================= */
/* Caly pulpit kalkulatorow mieszka w `kalkulatory.css` - jeden
   wlasciciel stylu na wlasciwosc. Przy szesciu narzedziach zamiast
   jednego reguly stojace tu obok sekcji strony glownej rozjechalyby
   sie z powloka pulpitu. */

/* ===================== WPIS ====================================== */
/* Uklad ten sam co na stronie dzialu: otwarcie z kadrem obok tytulu,
   pod nim proza z panelem bocznym. Wczesniej wpis stal w kolumnie 608 px
   na srodku pustej strony, a kadr byl wciety miedzy naglowek a tresc,
   gdzie rozbijal czytanie. */
.piu-wpis__otwarcie {
  display: grid; grid-template-columns: 1fr;
  gap: var(--piu-r5); margin-bottom: var(--piu-r7);
}
@media (min-width: 900px) {
  .piu-wpis__otwarcie {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--piu-r7); align-items: center;
  }
  .piu-wpis__otwarcie--bez-kadru { grid-template-columns: 1fr; max-width: 46rem; }
}
.piu-wpis__wstep { border-left: var(--piu-linia) solid var(--piu-akcent); padding-left: var(--piu-r4); }
.piu-wpis__wstep .piu-stempel a { color: inherit; text-decoration: none; }
.piu-wpis__wstep .piu-stempel a:hover { color: var(--piu-akcent); text-decoration: underline; }
.piu-wpis__tytul {
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t7);
  line-height: var(--piu-i-naglowki); font-weight: 600;
  margin: 0 0 var(--piu-r3); text-wrap: balance;
}
@media (min-width: 1024px) { .piu-wpis__tytul { font-size: var(--piu-t8); } }
.piu-wpis__datownik {
  font-size: var(--piu-t2); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--piu-tekst-cichy); margin: 0;
}
.piu-wpis__kadr { margin: 0; border-radius: var(--piu-naroznik); overflow: hidden; }
.piu-wpis__kadr img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.piu-wpis__rzad { display: grid; grid-template-columns: 1fr; gap: var(--piu-r6); }
@media (min-width: 1024px) {
  .piu-wpis__rzad {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--piu-r7); align-items: start;
  }
}

/* --- PROZA WPISU --- */
.piu-wpis__tresc { max-width: none; }
.piu-wpis__tresc > * { max-width: var(--piu-proza); }
.piu-wpis__tresc h2 {
  font-size: var(--piu-t6); margin-top: var(--piu-r7); margin-bottom: var(--piu-r4);
  scroll-margin-top: calc(var(--piu-naglowek-h, 72px) + var(--piu-r4));
}
.piu-wpis__tresc h3 { font-size: var(--piu-t5); margin-top: var(--piu-r6); margin-bottom: var(--piu-r3); }
.piu-wpis__tresc ul, .piu-wpis__tresc ol { padding-left: var(--piu-r4); }
.piu-wpis__tresc li { margin-bottom: var(--piu-r2); }
.piu-wpis .piu-metryczka { margin-top: var(--piu-r7); max-width: var(--piu-proza); }

/* --- TABELA: dane, nie ozdoba ---------------------------------- */
/* Wiersz naglowka na tle, liczby wyrownane kolumnowo, wlos miedzy
   wierszami zamiast ramek dookola kazdej komorki. Tabela ma sie czytac
   jak zestawienie, a nie jak siatka. */
.piu-wpis__tresc .wp-block-table { max-width: var(--piu-proza); margin: var(--piu-r6) 0; overflow-x: auto; }
.piu-wpis__tresc .wp-block-table table {
  width: 100%; border-collapse: collapse;
  font-size: var(--piu-t3); background-color: var(--piu-powierzchnia);
  border: 1px solid var(--piu-obwodka); border-radius: var(--piu-naroznik);
  overflow: hidden;
}
.piu-wpis__tresc .wp-block-table th {
  text-align: left; font-size: var(--piu-t2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--piu-tekst-cichy);
  background-color: var(--piu-tlo);
  padding: var(--piu-r3) var(--piu-r4);
  border-bottom: 1px solid var(--piu-obwodka);
}
.piu-wpis__tresc .wp-block-table td {
  padding: var(--piu-r3) var(--piu-r4);
  border-bottom: 1px solid var(--piu-obwodka);
  vertical-align: top;
}
.piu-wpis__tresc .wp-block-table tr:last-child td { border-bottom: 0; }
.piu-wpis__tresc .wp-block-table td + td { font-variant-numeric: tabular-nums; }
.piu-wpis__tresc .wp-block-table tbody tr:hover td { background-color: var(--piu-tlo); }

/* --- AKORDEON (core/details) ----------------------------------- */
/* Gotowy komponent na pytania i odpowiedzi. Znacznik <details> dziala
   bez JavaScriptu, otwiera sie klawiatura, a po rozwinieciu tresc znajduje
   wyszukiwarka przegladarki - dlatego nie budujemy tego na divach ze skryptem. */
.piu-wpis__tresc .wp-block-details {
  max-width: var(--piu-proza);
  border: 1px solid var(--piu-obwodka);
  border-radius: var(--piu-naroznik);
  background-color: var(--piu-powierzchnia);
  padding: 0; margin-bottom: var(--piu-r3);
}
.piu-wpis__tresc .wp-block-details summary {
  cursor: pointer; list-style: none;
  padding: var(--piu-r4) var(--piu-r7) var(--piu-r4) var(--piu-r5);
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t4);
  line-height: 1.3; position: relative;
}
.piu-wpis__tresc .wp-block-details summary::-webkit-details-marker { display: none; }
.piu-wpis__tresc .wp-block-details summary::after {
  content: ""; position: absolute; right: var(--piu-r5); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--piu-akcent); border-bottom: 2px solid var(--piu-akcent);
  transform: rotate(45deg); transition: transform 160ms ease;
}
.piu-wpis__tresc .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.piu-wpis__tresc .wp-block-details summary:focus-visible { outline: 2px solid var(--piu-akcent); outline-offset: -2px; }
.piu-wpis__tresc .wp-block-details > *:not(summary) { padding-left: var(--piu-r5); padding-right: var(--piu-r5); }
.piu-wpis__tresc .wp-block-details > *:last-child { padding-bottom: var(--piu-r5); }

/* --- WTRETY STAREJ REDAKCJI ------------------------------------ */
/* Mu-plugin `piu-redakcja` dokleja do tresci okruszki i linie
   weryfikacji. Sa uzyteczne, wiec ich nie zdejmuje - ubieram je
   w jezyk tej powloki zamiast zostawiac nieostylowane. */
.piu-redakcja-breadcrumbs {
  font-size: var(--piu-t2); color: var(--piu-tekst-cichy);
  margin: 0 0 var(--piu-r4); max-width: var(--piu-proza);
}
.piu-redakcja-breadcrumbs a { color: var(--piu-tekst-cichy); text-decoration: none; }
.piu-redakcja-breadcrumbs a:hover { color: var(--piu-akcent); text-decoration: underline; }
.piu-redakcja-bar {
  font-size: var(--piu-t2); color: var(--piu-tekst-cichy);
  border-left: var(--piu-linia) solid var(--piu-obwodka);
  padding: var(--piu-r2) 0 var(--piu-r2) var(--piu-r4);
  margin: 0 0 var(--piu-r5); max-width: var(--piu-proza);
}
.piu-redakcja-bar a { color: var(--piu-akcent); }

/* --- KARTA "W SKROCIE" (stackable z zastanej tresci) ------------ */
.piu-wpis__tresc .stk-block-card,
.piu-wpis__tresc .wp-block-stackable-card {
  max-width: var(--piu-proza);
  background-color: var(--piu-powierzchnia) !important;
  border: 1px solid var(--piu-obwodka) !important;
  border-left: var(--piu-linia) solid var(--piu-akcent) !important;
  border-radius: var(--piu-naroznik) !important;
  margin-bottom: var(--piu-r6);
  /* Zmierzone: karta przychodzi z padding-top 0, przez co naglowek
     "W skrocie" siedzial 1 px od gornej krawedzi, na obwodce. */
  padding: var(--piu-r5) !important;
}

/* --- KARTA "W SKROCIE" (stackable z zastanej tresci) ------------ */
/* Streszczenie ma sie czytac jak notatka na marginesie akapitu, a nie
   jak druga strona tytulowa: naglowek schodzi do rozmiaru stempla,
   punkty ida drobniej niz proza. */
.piu-wpis__tresc .stk-block-card h2,
.piu-wpis__tresc .wp-block-stackable-card h2 {
  font-family: var(--piu-f-tekstowa); font-size: var(--piu-t2);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  color: var(--piu-tekst-cichy); margin: 0 0 var(--piu-r3);
}
.piu-wpis__tresc .stk-block-card li,
.piu-wpis__tresc .wp-block-stackable-card li { font-size: var(--piu-t3); }

/* --- ZASTRZEZENIE PRAWNE (ostatni akapit wpisu) ----------------- */
/* Jedno na wpis. Wczesniej stalo obok drugiego z mu-plugina i trzeciego
   z szablonu — trzy zdania o tym samym pod rzad czytaly sie jak usterka. */
.piu-wpis__tresc .piu-disclaimer {
  margin-top: var(--piu-r7); padding-top: var(--piu-r4);
  border-top: 1px solid var(--piu-obwodka);
  font-size: var(--piu-t2); color: var(--piu-tekst-cichy);
}
.piu-wpis__tresc .piu-disclaimer em { font-style: normal; }

/* --- PODSTAWA PRAWNA (warstwa dowodowa) ------------------------- */
.piu-wpis__tresc .piu-redakcja-box {
  max-width: var(--piu-proza); margin: var(--piu-r7) 0 0;
  background-color: var(--piu-powierzchnia);
  border: 1px solid var(--piu-obwodka);
  border-left: var(--piu-linia) solid var(--piu-akcent);
  border-radius: var(--piu-naroznik);
  padding: var(--piu-r5);
}
.piu-wpis__tresc .piu-redakcja-box h2 {
  font-family: var(--piu-f-tekstowa); font-size: var(--piu-t2);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  color: var(--piu-tekst-cichy); margin: 0 0 var(--piu-r3);
}
.piu-wpis__tresc .piu-redakcja-box ul { margin: 0; padding: 0; list-style: none; }
.piu-wpis__tresc .piu-redakcja-box li + li { border-top: 1px solid var(--piu-obwodka); }
.piu-wpis__tresc .piu-redakcja-box a {
  display: block; padding: var(--piu-r2) 0; font-size: var(--piu-t3);
}

/* --- SPIS ZWINIETY NA MALYM EKRANIE ----------------------------- */
.piu-spis-mobil {
  border: 1px solid var(--piu-obwodka); border-radius: var(--piu-naroznik);
  background-color: var(--piu-powierzchnia);
  margin-bottom: var(--piu-r6); padding: 0;
}
.piu-spis-mobil > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--piu-r3) var(--piu-r7) var(--piu-r3) var(--piu-r4);
  font-size: var(--piu-t2); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--piu-tekst-cichy);
}
.piu-spis-mobil > summary::-webkit-details-marker { display: none; }
.piu-spis-mobil > summary::after {
  content: ""; position: absolute; right: var(--piu-r4); top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--piu-akcent); border-bottom: 2px solid var(--piu-akcent);
  transform: rotate(45deg); transition: transform 160ms ease;
}
.piu-spis-mobil[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.piu-spis-mobil > summary:focus-visible { outline: 2px solid var(--piu-akcent); outline-offset: -2px; }
.piu-spis-mobil .piu-spis__lista { padding: 0 var(--piu-r4) var(--piu-r3); }
/* Jeden spis na ekran: powyzej 1024 px zwiniety znika i zostaje ten
   w panelu bocznym, ponizej odwrotnie. Bez tego mobil pokazywal oba -
   zwiniety nad tekstem i rozwiniety pod calym artykulem. */
@media (min-width: 1024px) { .piu-spis-mobil { display: none; } }
@media (max-width: 1023.98px) { .piu-bok .piu-spis { display: none; } }

/* --- SPIS TRESCI w panelu bocznym ------------------------------- */
.piu-spis__lista { margin: 0; padding: 0; list-style: none; counter-reset: piu-spis; }
.piu-spis__lista li { counter-increment: piu-spis; border-top: 1px solid var(--piu-obwodka); }
.piu-spis__lista li:first-child { border-top: 0; }
.piu-spis__lista a {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--piu-r2);
  padding: var(--piu-r3) 0; font-size: var(--piu-t2);
  color: var(--piu-tekst); text-decoration: none; line-height: 1.4;
}
.piu-spis__lista a::before {
  content: counter(piu-spis); color: var(--piu-akcent);
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t3);
}
.piu-spis__lista a:hover { color: var(--piu-akcent); text-decoration: underline; }

/* ---- STRONA DZIALU: otwarcie z kadrem + panel boczny ------------- */
/* Dzialy byly puste i nierozroznialne: sam tytul i lista wpisow. Teraz
   kazdy ma wlasny kadr otwierajacy - ten sam, ktory niesie jego kafel na
   stronie glownej, wiec czytelnik przychodzacy z kafla widzi ten sam
   obraz i wie, ze trafil tam, gdzie klikal. */
.piu-archiwum__otwarcie {
  display: grid; grid-template-columns: 1fr;
  gap: var(--piu-r5); margin-bottom: var(--piu-r7);
}
@media (min-width: 900px) {
  .piu-archiwum__otwarcie {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--piu-r7); align-items: center;
  }
}
.piu-archiwum__wstep { border-left: var(--piu-linia) solid var(--piu-akcent); padding-left: var(--piu-r4); }
.piu-archiwum__tytul {
  font-family: var(--piu-f-naglowkowa); font-size: var(--piu-t7);
  line-height: var(--piu-i-naglowki); font-weight: 600;
  margin: 0 0 var(--piu-r4); text-wrap: balance;
}
@media (min-width: 1024px) { .piu-archiwum__tytul { font-size: var(--piu-t8); } }
.piu-archiwum__opis { font-size: var(--piu-t4); color: var(--piu-tekst-cichy); max-width: 46ch; }
.piu-archiwum__opis p { margin: 0; }
.piu-archiwum__kadr figure { margin: 0; border-radius: var(--piu-naroznik); overflow: hidden; }
.piu-archiwum__kadr img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- Rzad: lista wpisow + panel boczny -------------------------- */
.piu-archiwum__rzad { display: grid; grid-template-columns: 1fr; gap: var(--piu-r6); }
@media (min-width: 1024px) {
  .piu-archiwum__rzad {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--piu-r7); align-items: start;
  }
}
.piu-archiwum__lista { display: grid; grid-template-columns: 1fr; gap: var(--piu-r4); }
@media (min-width: 620px) { .piu-archiwum__lista { grid-template-columns: repeat(2, 1fr); } }
.piu-archiwum__lista .piu-stronicowanie { grid-column: 1 / -1; }

.piu-wypis { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.piu-wypis__kadr { margin: 0; }
.piu-wypis__kadr img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.piu-wypis__tresc { padding: var(--piu-r5); display: flex; flex-direction: column; flex: 1 1 auto; }
.piu-wypis__naglowek { font-size: var(--piu-t4); line-height: 1.25; margin: 0 0 var(--piu-r3); }
.piu-wypis__naglowek a { color: var(--piu-tekst); text-decoration: none; }
.piu-wypis__naglowek a::after { content: ""; position: absolute; inset: 0; }
.piu-wypis__zdanie { font-size: var(--piu-t2); color: var(--piu-tekst-cichy); margin: 0; }
.piu-wypis { transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.piu-wypis:hover { border-color: var(--piu-akcent); box-shadow: 0 8px 22px rgba(42,32,40,0.12); transform: translateY(-2px); }
.piu-wypis:focus-within { outline: 2px solid var(--piu-akcent); outline-offset: 3px; }
.piu-wypis:hover .piu-wypis__naglowek a { text-decoration: underline; }

/* ---- Panel boczny ----------------------------------------------- */
.piu-bok { display: grid; gap: var(--piu-r5); }
@media (min-width: 1024px) { .piu-bok { position: sticky; top: calc(var(--piu-naglowek-h, 72px) + var(--piu-r5)); } }
.piu-bok__blok { }
.piu-bok__blok--cichy { border-top: 1px solid var(--piu-obwodka); padding-top: var(--piu-r4); }
.piu-bok__zdanie { font-size: var(--piu-t2); color: var(--piu-tekst-cichy); margin: 0 0 var(--piu-r3); }
.piu-bok__dzialy { margin: 0; padding: 0; list-style: none; }
.piu-bok__dzialy li + li { border-top: 1px solid var(--piu-obwodka); }
.piu-bok__dzialy a { display: block; padding: var(--piu-r3) 0; text-decoration: none; color: var(--piu-tekst); }
.piu-bok__nazwa { display: block; font-weight: 700; font-size: var(--piu-t3); margin-bottom: 2px; }
.piu-bok__dzialy a:hover .piu-bok__nazwa { color: var(--piu-akcent); text-decoration: underline; }
.piu-bok__dzialy .piu-bok__zdanie { margin: 0; }

.piu-stronicowanie { margin-top: var(--piu-r6); }
.piu-stronicowanie a, .piu-stronicowanie .page-numbers {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 var(--piu-r3); color: var(--piu-akcent);
}

/* ---- 5. OTWARCIE SEKCJI WZORU: naglowek i kadr obok siebie ------- */
/* Kontrakt zamawial "waski kadr przy naglowku sekcji". Pas na pelna
   szerokosc doklejony pod trescia niczego nie komponowal. */
.piu-wzor__otwarcie { display: grid; grid-template-columns: 1fr; gap: var(--piu-r5); margin-bottom: var(--piu-r6); }
@media (min-width: 900px) {
  .piu-wzor__otwarcie { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--piu-r7); align-items: center; }
}
.piu-wzor__otwarcie .piu-naglowek-sekcji { margin-bottom: 0; max-width: none; }
.piu-wzor__kadr figure { margin: 0; border-radius: var(--piu-naroznik); overflow: hidden; }
.piu-wzor__kadr img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 900px) { .piu-wzor__kadr img { aspect-ratio: 21 / 9; } }

/* ---- 7. ZAUFANIE: kadr instytucji jako TLO sekcji ---------------- */
/* Trzy karty leza NA kadrze, zamiast stac obok niego. Przyciemnienie
   jest warstwa w tym samym `background`, nie pseudoelementem - ta sama
   lekcja co w sekcji terminu, gdzie ::before z z-index:-1 sie nie malowal. */
.piu-zaufanie {
  background-color: var(--piu-tlo-noc);
  background-image:
    linear-gradient(rgba(46, 33, 41, 0.90), rgba(46, 33, 41, 0.90)),
    var(--piu-zaufanie-tlo, none);
  background-size: cover;
  background-position: center;
}
.piu-zaufanie .piu-naglowek-sekcji { border-left-color: var(--piu-akcent-noc); }
.piu-zaufanie .piu-karta {
  background-color: rgba(59, 43, 52, 0.72);
  border-color: var(--piu-obwodka-noc);
  backdrop-filter: blur(2px);
}
.piu-zaufanie .piu-sygnal__sprawdzic { border-top-color: var(--piu-obwodka-noc); }
.piu-zaufanie .piu-akcja-drugorzedna a { color: var(--piu-akcent-noc); }

/* Naglowek sekcji zaufania stal tuz nad krawedzia pierwszej karty. */
.piu-zaufanie .piu-naglowek-sekcji { margin-bottom: var(--piu-r7); }

/* Para "Mowimy / Nie mowimy" stoi teraz w waskiej lewej kolumnie przy
   liczniku, wiec jej dwie kolumny musza sie ulozyc jedna pod druga. */
/* `!important` jest tu konieczne, nie niechlujne: WordPress wymusza
   `.wp-block-columns { flex-wrap: nowrap !important }` powyzej 782 px,
   wiec zwykla regula przegrywa niezaleznie od szczegolowosci. Przy
   190 px na kolumne tekst lamal sie co drugie slowo. */
.piu-licznik .piu-para { flex-wrap: wrap !important; margin-block: var(--piu-r5) 0; gap: var(--piu-r4); }
.piu-licznik .piu-para .wp-block-column { flex-basis: 100% !important; }