/* ===========================================================================
 * Fundacja GOTÓW — uzupełnienie wyglądu dla podstron
 * Plik: /fundacja/podstrony.css   •   wersja: 21.09.2026
 *
 * CO TU JEST, A CZEGO NIE MA
 * Cały wygląd stoi w /fundacja/wspolne/fundacja.css: barwy, kroje pisma,
 * szerokości, przyciski, karty, pasy, pasek bezpieczeństwa, nagłówek i stopka.
 * Ten plik dokłada wyłącznie te kilka rzeczy, których podstrony potrzebują,
 * a warstwa wspólna ich nie ma, bo nie występują na stronie głównej:
 *   • listę „zakres działań",
 *   • ramkę „brak materiału" i stan pusty (aktualności, wydarzenia),
 *   • wyjaśnienie pod przyciskiem nieczynnym,
 *   • sylwetkę osoby ze zdjęciem,
 *   • podgląd nieczynnego formularza kontaktowego.
 *
 * Wszystkie barwy bierzemy ze zmiennych --f-*, więc motyw ciemny działa
 * tak samo jak na stronie głównej. Żadnej własnej palety.
 * =========================================================================== */

/* ── nagłówek podstrony ───────────────────────────────────────────────────── */
/* Podstrona używa hero z warstwy wspólnej, ale bez klina i bez takiej
   wysokości jak strona główna — treść zaczyna się wyżej. */
.fn-czolo .f-hero-tresc { padding-block: clamp(32px, 5vw, 60px); max-width: 780px; }
.fn-czolo h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }

/* ── listy ────────────────────────────────────────────────────────────────── */
.fn-lista { margin: 0 0 1.2em; padding-left: 1.3em; max-width: 62ch; }
.fn-lista li { margin-bottom: .5em; }

/* Zakres działań: kafelki z żółtą belką, obwódka neutralna trzyma kształt. */
.fn-zakres {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.fn-zakres li {
  background: var(--f-plansza);
  border: 1px solid var(--f-linia);
  border-left: 6px solid var(--f-zolc);
  border-radius: 6px;
  padding: 14px 18px;
  color: var(--f-tekst-2);
}
.fn-zakres li strong { color: var(--f-tekst); }

/* ── ramka „brak materiału" ───────────────────────────────────────────────── */
.fn-uwaga {
  background: var(--f-nieczynny-tlo);
  border: 1px dashed var(--f-nieczynny-brzeg);
  border-left: 6px solid var(--f-nieczynny-brzeg);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 0 0 22px;
  max-width: 68ch;
  color: var(--f-tekst);
}
.fn-uwaga p { color: var(--f-tekst-2); }
.fn-uwaga .f-plakietka { margin-bottom: 10px; }

/* Wyjaśnienie, dlaczego przycisk obok jest nieczynny. */
.fn-powod {
  margin: 14px 0 0;
  max-width: 68ch;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--f-tekst-2);
  border-left: 3px solid var(--f-linia-mocna);
  padding-left: 14px;
}
.fn-powod code {
  font-size: .92em;
  background: var(--f-tlo-3);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── stan pusty: brak aktualności, brak wydarzeń ─────────────────────────── */
.fn-pusto {
  border: 2px dashed var(--f-linia-mocna);
  border-radius: 6px;
  background: var(--f-tlo-2);
  color: var(--f-tekst-2);
  padding: clamp(26px, 4vw, 40px) 24px;
  text-align: center;
}
.fn-pusto strong { color: var(--f-tekst); }
.fn-pusto p { max-width: 56ch; margin-inline: auto; }

/* ── sylwetka osoby ze zdjęciem ──────────────────────────────────────────── */
.fn-osoba {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.fn-osoba figure { margin: 0; }
.fn-osoba img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--f-linia);
  border-radius: 6px;
  display: block;
}
.fn-osoba figcaption {
  margin-top: 8px;
  font-size: .86rem;
  color: var(--f-slaby);
  line-height: 1.5;
}
.fn-osoba h3 { margin-top: 0; }
.fn-funkcja {
  font-family: 'Poppins', 'Lato', sans-serif;
  font-weight: 700;
  color: var(--f-tekst);
}
@media (max-width: 680px) {
  .fn-osoba { grid-template-columns: 1fr; gap: 18px; }
  .fn-osoba figure { max-width: 260px; }
}

/* ── podgląd nieczynnego formularza ──────────────────────────────────────── */
.fn-formularz {
  background: var(--f-tlo-2);
  border: 1px dashed var(--f-linia-mocna);
  border-radius: 6px;
  padding: clamp(18px, 3vw, 26px);
  max-width: 640px;
}
.fn-pole { margin-bottom: 16px; }
.fn-pole > label {
  display: block;
  font-family: 'Poppins', 'Lato', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--f-tekst);
  margin-bottom: 5px;
}
.fn-pole input,
.fn-pole select,
.fn-pole textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--f-linia-mocna);
  border-radius: 4px;
  background: var(--f-plansza);
  color: var(--f-tekst);
}
/* Pola są nieczynne, ale muszą pozostać czytelne — nie wygaszamy ich
   przezroczystością, tylko zmieniamy tło i dajemy przerywaną obwódkę. */
.fn-pole input:disabled,
.fn-pole select:disabled,
.fn-pole textarea:disabled {
  background: var(--f-tlo-3);
  color: var(--f-tekst-2);
  -webkit-text-fill-color: var(--f-tekst-2);
  border-style: dashed;
  opacity: 1;
  cursor: not-allowed;
}
.fn-zgoda { display: flex; gap: 10px; align-items: flex-start; }
.fn-zgoda input { width: auto; margin-top: 5px; flex: 0 0 auto; }
.fn-zgoda > span { font-size: .93rem; line-height: 1.55; color: var(--f-tekst-2); }
.fn-zgoda > span label { display: inline; font-weight: 700; color: var(--f-tekst); }

/* ── znak wydawnictwa i produkcji na podstronie ──────────────────────────── */
.fn-znak { max-height: 56px; width: auto; margin: 0 0 16px; display: block; }

/* ── odstęp między sekcjami treści wewnątrz jednego pasa ─────────────────── */
.fn-blok { margin: 0 0 clamp(32px, 4vw, 52px); }
.fn-blok:last-child { margin-bottom: 0; }
.fn-blok > p, .fn-blok > h2 + p { max-width: 68ch; }

/* ── kotwice ─────────────────────────────────────────────────────────────── */
/* Podmenu „O NAS" prowadzi do /fundacja/o-nas#misja i #zarzad. Zostawiamy
   odstęp nad celem skoku, żeby nagłówek sekcji nie przylegał do krawędzi. */
[id="misja"], [id="zarzad"] { scroll-margin-top: 24px; }

/* ===========================================================================
 * JĘZYK SKOSU NA PODSTRONACH
 * dopisane 21.09.2026
 *
 * SKĄD KĄT I KSZTAŁTY — NIE STĄD
 * Geometrię skosu trzyma warstwa wspólna: `--f-skos` (19,1° od pionu),
 * `--f-skos-gradient` oraz para `--f-klin-szer` / `--f-klin-wys`, której
 * proporcja 0,3463 jest tangensem tego kąta. Ten plik NIE definiuje
 * własnego kąta ani własnych barw — bierze tamte zmienne, żeby podstrony
 * i strona główna miały ten sam kąt i tę samą rękę.
 *
 * Warstwa wspólna ubrała już w skos to, co ma wspólnego z główną:
 * nadtytuł, panel, pas ciemny i klin hero. Tutaj zostaje wyłącznie to,
 * czego na stronie głównej nie ma:
 *   • ukośne zamknięcie czoła podstrony,
 *   • klin zamiast punktora w listach,
 *   • klin narożny w kafelkach zakresu, kartach i ramkach stanu.
 *
 * KSZTAŁT JEST JEDEN: trójkąt oparty o narożnik, o bokach w proporcji
 * 0,3463, cięty przez `clip-path: polygon(0 0, 100% 0, 0 100%)`. Procenty
 * nie psują tu kąta, bo o kącie decyduje zadany stosunek szerokości do
 * wysokości, a nie proporcja pudełka.
 *
 * SKOSÓW POD PISMEM NIE MA. Każdy klin mieści się w marginesie wewnętrznym
 * albo maleje razem z marginesem bocznym strony. Sprawdza to pomiar:
 *   node pomiar-podstron-skos.cjs
 * =========================================================================== */

:root {
  /* Klin drobny — kafelki i ramki stanu są niższe niż panel, więc dostają
     mniejszy trójkąt. Skalujemy oba boki tym samym mnożnikiem, więc kąt
     zostaje, a przy 560 px klin maleje razem ze zmiennymi wspólnymi. */
  --fn-klin-maly-wys: calc(var(--f-klin-wys) * .42);
  --fn-klin-maly-szer: calc(var(--f-klin-szer) * .42);
  --fn-gniazdo-male: 24px;      /* klin drobny sięga najdalej 14,7 px */

  /* Klin czoła rośnie razem z marginesem bocznym strony: przy 1180 px
     i węziej ma 26 px i chowa się w marginesie, przy szerokim oknie
     dochodzi do 86 px. Dzięki temu nigdy nie sięga kolumny tekstu.
     UWAGA PRZY ZMIANIE KĄTA: dzielnik 0,3463 to ten sam tangens 19,1°,
     z którego warstwa wspólna wylicza --f-klin-szer z --f-klin-wys
     (80 × 0.3463 = 27.70). Zmiana --f-skos wymaga zmiany obu miejsc. */
  --fn-czolo-szer: clamp(26px, calc((100vw - 1180px) / 2 + 26px), 86px);
  --fn-czolo-wys: calc(var(--fn-czolo-szer) / .4369);
  --fn-czolo-szer-kant: calc(var(--fn-czolo-szer) * 1.3);
  --fn-czolo-wys-kant: calc(var(--fn-czolo-wys) * 1.3);
}

/* ── czoło podstrony: ukośne zamknięcie pasa nagłówkowego ────────────────── */
/* Pas nagłówkowy nie kończy się samą prostą krawędzią. Prostą część niesie
   cienka granatowa kreska u dołu, a przy prawym dolnym narożniku kreska
   podnosi się granatowym klinem obrysowanym żółtym kantem. Ten sam kąt,
   ten sam kształt, co klin panelu i pasa ciemnego — tylko oparty o
   przeciwległy narożnik, bo tu zamyka pas, a tam go otwiera.
   Na stronach, gdzie zaraz pod czołem zaczyna się pas granatowy
   (Wesprzyj, Wspieramy KSM), klin jest ukośnym przejściem z jasnego
   w ciemne. Kliny są ozdobą: nie łapią wskaźnika i nic nie mówią
   czytnikowi ekranu. */
.fn-czolo { border-bottom: 3px solid var(--f-granat-2); }
.fn-czolo::before,
.fn-czolo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.fn-czolo::before {
  width: var(--fn-czolo-szer-kant);
  height: var(--fn-czolo-wys-kant);
  background: var(--f-zolc);
}
.fn-czolo::after {
  width: var(--fn-czolo-szer);
  height: var(--fn-czolo-wys);
  background: var(--f-granat-2);
}

/* Kolumna tekstu trzyma się z dala od klina niezależnie od szerokości okna. */
.fn-czolo .f-hero-tresc { padding-right: 16px; }
@media (min-width: 900px) {
  .fn-czolo .f-hero-tresc { padding-right: clamp(32px, 5vw, 80px); max-width: 860px; }
}

/* ── klin zamiast punktora ───────────────────────────────────────────────── */
/* Znacznik pozycji listy zastępuje typografię, a nie ozdabia pole, więc jest
   granatowy jak litery znaku — żółć zostaje dla akcentów graficznych i dla
   pasów ciemnych, gdzie granat byłby niewidoczny. Kształt i obrót ten sam,
   co w znaczniku nadtytułu z warstwy wspólnej. */
.fn-lista { list-style: none; padding-left: 0; }
.fn-lista li { position: relative; padding-left: 26px; }
.fn-lista li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .42em;
  width: 6px;
  height: 13px;
  border-radius: 2px;
  background: var(--f-tekst);
  transform: rotate(calc(-1 * var(--f-skos)));
}
.f-pas-ciemny .fn-lista li::before { background: var(--f-zolc); }

/* ── klin narożny w kafelkach, kartach i ramkach ─────────────────────────── */
/* Żółta belka na całą wysokość ustępuje trójkątowi w górnym lewym narożniku —
   temu samemu, który warstwa wspólna dała panelom. Kształt karty trzyma
   pełna obwódka neutralna, więc żółć dalej nie jest ani pismem, ani jedyną
   granicą czegokolwiek. */
.fn-zakres li,
.fn-uwaga,
.fn-pusto,
.fn-formularz {
  position: relative;
  overflow: hidden;
  padding-left: var(--fn-gniazdo-male);
}
.fn-zakres li::before,
.fn-uwaga::before,
.fn-pusto::before,
.fn-formularz::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--fn-klin-maly-szer);
  height: var(--fn-klin-maly-wys);
  background: var(--f-zolc);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-top-left-radius: 6px;
  pointer-events: none;
}
.fn-zakres li > *,
.fn-uwaga > *,
.fn-pusto > *,
.fn-formularz > * { position: relative; z-index: 1; }

/* Kafelek zakresu: obwódka z lewej wraca do neutralnej, bo kolor niesie
   teraz klin, a nie belka. */
.fn-zakres li { border-left: 1px solid var(--f-linia); }

/* Ramki „brak materiału", pustego modułu i podglądu formularza mają zostać
   WIDOCZNIE nieczynne, więc ich klin jest w barwie ich obwódki, nie w żółci. */
.fn-uwaga { border-left: 1px dashed var(--f-nieczynny-brzeg); }
.fn-uwaga::before { background: var(--f-nieczynny-brzeg); }
.fn-pusto::before,
.fn-formularz::before { background: var(--f-linia-mocna); }
.fn-pusto { padding-right: var(--fn-gniazdo-male); }

/* Karta prostsza dostaje klin pełnej wielkości, tak jak panel — jest tej
   samej wagi i stoi w tej samej siatce. Wcięcie jak w panelu: na wysokości
   nagłówka (26 px) klin sięga 24 px, tekst zaczyna się od 30 px. */
.f-karta {
  position: relative;
  overflow: hidden;
  padding-left: 30px;
}
.f-karta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--f-klin-szer);
  height: var(--f-klin-wys);
  background: var(--f-zolc);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-top-left-radius: 6px;
  pointer-events: none;
}
.f-karta > * { position: relative; z-index: 1; }
@media (max-width: 560px) {
  .f-karta { padding-left: 24px; }
}

/* Poprawka „Wesprzyj nie gaśnie na własnej stronie" przeniesiona 21.09.2026
   do `wspolne/fundacja.css` - tam jest jej przyczyna. Tutaj była łatą, która
   działałaby tylko na stronach wczytujących ten arkusz. */

/* ── druk ────────────────────────────────────────────────────────────────── */
/* Znika tylko granatowe zamknięcie czoła — na papierze byłoby dużą czarną
   plamą, dokładnie z tego powodu warstwa wspólna chowa w druku .f-hero-klin.
   Drobne kliny narożne zostają, bo panele z warstwy wspólnej też zostają
   i karta obok panelu ma wyglądać tak samo. */
@media print {
  .fn-czolo::before, .fn-czolo::after { display: none !important; }
  .fn-czolo { border-bottom: 1px solid #000000; }
}

/* ── liczby przy wydarzeniu ─────────────────────────────────────────────── */
.fn-liczby { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.fn-liczby > div { flex: 1 1 7rem; background: var(--f-plansza);
  border: 1px solid var(--f-linia-mocna); border-radius: 10px; padding: .7rem .8rem; }
.fn-liczby b { display: block; font-size: 1.8rem; line-height: 1.1; font-weight: 700;
  color: var(--f-karmin); }
.fn-liczby span { font-size: .92rem; color: var(--f-tekst-2); }
.fn-drobne { font-size: .95rem; line-height: 1.55; color: var(--f-tekst-2); }

/* ── podstawa prawna przy formularzu wpłat ──────────────────────────────── */
.w-dokumenty { font-size: 1rem; line-height: 1.55; color: var(--f-tekst-2);
  margin: .8rem 0 0; }
.w-dokumenty a { color: var(--f-karmin); text-decoration: underline; }