/* ------------------------------------------------------------------
   UKLAD — profil ukladu z teczka.json#wyglad.profil_ukladu.
   CALOSC jest zakresowana klasa .piu-v3 na <body>. Powod jest
   procesowy, nie estetyczny: serwis jest przebudowywany W MIEJSCU na
   zywej domenie, a "produkcja nigdy nie pokazuje polzbudowanej strony".
   Dopoki klase nosi tylko strona podgladu, zywy serwis stoi nietkniety.
   Przy podmianie zakres podnosi sie do wszystkich stron — jedna zmiana
   w functions.php, nie przepisywanie tego pliku.
   ------------------------------------------------------------------ */

.piu-v3 {
  margin: 0;
  background-color: var(--piu-tlo);
  color: var(--piu-tekst);
  font-family: var(--piu-f-tekstowa);
  font-size: var(--piu-t3);
  line-height: var(--piu-i-tekst);
  -webkit-font-smoothing: antialiased;
}

/* Faktura papieru — kanwa dokumentu. Krycie 0.06, warstwa stala pod
   trescia. Karty i pola formularza maja wlasne, NIEPRZEZROCZYSTE tlo,
   wiec ziarno samo z siebie nie wchodzi pod metryczke, stempel ani
   pole formularza — granica z `faktura_papieru.granica` jest tu
   pilnowana struktura, nie wyjatkiem. */
.piu-v3::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--piu-faktura, none);
  background-size: 480px auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.piu-v3 > * { position: relative; z-index: 1; }

/* --- pojemnik: JEDEN na naglowek, sekcje i stopke --- */
.piu-pojemnik {
  max-width: var(--piu-strona);
  margin-inline: auto;
  padding-inline: var(--piu-margines);
}

/* --- kolumna prozy: 608 px, trzyma LEWA krawedz pojemnika,
       nie jest wysrodkowana osobno --- */
.piu-proza { max-width: var(--piu-proza); }

/* --- sekcja: tlo na pelna szerokosc okna, tresc w pojemniku --- */
.piu-sekcja { padding-block: var(--piu-sekcja); }
.piu-sekcja--noc { background-color: var(--piu-tlo-noc); }

/* --- typografia --- */
.piu-v3 h1, .piu-v3 h2, .piu-v3 h3, .piu-v3 h4 {
  font-family: var(--piu-f-naglowkowa);
  line-height: var(--piu-i-naglowki);
  font-weight: 600;
  color: var(--piu-tekst);
  margin: 0 0 var(--piu-r4);
  text-wrap: balance;
}
.piu-v3 h1 { font-size: var(--piu-t7); }
.piu-v3 h2 { font-size: var(--piu-t6); }
.piu-v3 h3 { font-size: var(--piu-t5); }
.piu-v3 h4 { font-size: var(--piu-t4); }
.piu-v3 p  { margin: 0 0 var(--piu-r4); }
.piu-v3 p:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .piu-v3 h1 { font-size: var(--piu-t8); }
}

.piu-v3 a { color: var(--piu-akcent); text-underline-offset: 0.18em; }

/* --- znak rozpoznawczy: stempel + linia marginesu --- */
.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;
}

/* --- karta: powierzchnia + wlos obwodki + prawie ostry naroznik --- */
.piu-karta {
  background-color: var(--piu-powierzchnia);
  border: 1px solid var(--piu-obwodka);
  border-radius: var(--piu-naroznik);
  padding: var(--piu-r5);
}
/* Kafel wejsciowy dostaje lewa krawedz 4 px w akcencie — ta sama
   linia marginesu, ktora niesie logo. */
.piu-kafel { border-left: var(--piu-linia) solid var(--piu-akcent); }

/* --- metryczka: gesty tekst, zawsze rozwinieta, nigdy za "szczegolami" --- */
.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 dt { font-weight: 700; }
.piu-metryczka dd { margin: 0 0 var(--piu-r2); }

/* --- CTA: dwa tokeny, wyrownane do LEWEJ krawedzi kolumny tekstu,
       w kierunku czytania. Minimalna wysokosc 48 px wszedzie. --- */
.piu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  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;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--piu-cta-jasny-wypelnienie);
  color: var(--piu-cta-jasny-etykieta);
}
.piu-cta--ciemny {
  background-color: var(--piu-cta-ciemny-wypelnienie);
  color: var(--piu-cta-ciemny-etykieta);
}
/* Ponizej 520 px guzik jest blokiem na pelna szerokosc. */
@media (max-width: 519px) {
  .piu-cta { display: flex; width: 100%; }
}
/* Dzialanie drugorzedne jest LINKIEM z podkresleniem, nie trzecim
   tokenem guzika — patrz kolor.cta.trzeci_token_nie_istnieje. */
.piu-akcja-drugorzedna {
  font-weight: 700;
  text-decoration: underline;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

/* Skok do kotwicy nie moze wsadzic naglowka sekcji POD przyklejony
   pasek. Guzik hero prowadzi do #kafle-szesciu-dzialow, wiec bez tego
   pierwsze klikniecie na stronie glownej ladowalo z naglowkiem
   schowanym za paskiem. Wartosc = wysokosc paska (64) + oddech. */
.piu-v3 [id] { scroll-margin-top: calc(var(--piu-naglowek-h, 108px) + var(--piu-r4)); }