/* SEKCJA 20 „Wspierają nas" - znaki patronów, partnerów i mediów.
   Barwy i rytm wzięte z sekcji sąsiednich: żółty pasek `.kick`, czerwony
   tytuł, tło #F5F4ED, środek 1240 px. Znaki na bieli, bo większość ma
   przezroczyste tło i na kremowym gubi kontur.
   Wszystkie dziewiętnaście plików ma proporcje 647x250 - siatka trzyma
   stałą proporcję kafla, więc żaden znak nie skacze ani się nie rozciąga.

   LICZBA KOLUMN WZIĘTA Z POMIARU, nie z oka. Przy sześciu kolumnach znak
   rysował się na 159 px, czyli 4,06 raza mniej niż źródłowe 647 px, a napisy
   wewnątrz znaków („PRYMAS POLSKI ABP WOJCIECH POLAK" i podobne) miały
   4 px wysokości. Na telefonie przy dwóch kolumnach było jeszcze gorzej:
   135 px, pomniejszenie 4,79 raza, napisy 3 px - czyli telefon wypadał
   gorzej od pulpitu. Stąd cztery kolumny na pulpicie i jedna na telefonie.
   Sekcja jest przez to wyższa; to świadomy koszt czytelności. */

#pzs-20{background:#F5F4ED}
#pzs-20 .pzs-20-srodek{max-width:1240px;margin:0 auto;padding:64px 32px;text-align:center}
#pzs-20 .kick{display:inline-block;margin:0 0 14px;background:#FFD431;padding:6px 18px;
  font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#1A1A1A}
#pzs-20 h2.tyt{margin:0 0 10px;font-size:46px;line-height:1.08;color:#C21319}
#pzs-20 .pzs-20-pod{margin:38px 0 18px;font-size:20px;line-height:1.3;color:#3A3A3A;
  font-weight:700;letter-spacing:.02em}

#pzs-20 .pzs-20-siatka{display:grid;gap:16px;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(4,minmax(0,1fr));justify-items:stretch}
#pzs-20 .pzs-20-kafel{display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid #E4E1D6;border-radius:6px;padding:14px 16px;
  aspect-ratio:647 / 250}
/* `<picture>` JEST ELEMENTEM GIĘTKIM, NIE `<img>`. Bez `display:block;width:100%`
   poniżej obrazek liczy swoje `width:100%` wobec kurczliwej szerokości rodzica,
   a ta bierze się z atrybutu `sizes` - czyli o wielkości na ekranie decydowała
   podpowiedź dla przeglądarki, nie układ. Zmierzone przy oknie 1400 px: kafel
   miał 264 px treści, a znak rysował się na 248 px, bo tyle mówił `sizes`.
   Po tej regule znak wypełnia kafel i `sizes` wybiera już tylko plik. */
#pzs-20 .pzs-20-kafel picture{display:block;width:100%}
#pzs-20 .pzs-20-kafel img{display:block;width:100%;height:auto;max-height:100%;
  object-fit:contain}

@media(max-width:900px){
  #pzs-20 .pzs-20-srodek{padding:48px 20px}
  #pzs-20 h2.tyt{font-size:36px}
  #pzs-20 .pzs-20-siatka{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media(max-width:600px){
  #pzs-20 .pzs-20-siatka{grid-template-columns:minmax(0,1fr)}
  #pzs-20 .pzs-20-pod{font-size:18px;margin:30px 0 14px}
}

/* ODNOŚNIKI PRZY LOGOTYPACH (7.11.2026).
   Logo prowadzi do strony podmiotu, więc musi być widać, że jest klikalne —
   samo zmienienie kursora nie wystarcza, bo na dotyku kursora nie ma.
   Stąd widoczna reakcja na wskazanie i na ustawienie klawiaturą: obramowanie
   ciemnieje, kafel lekko się podnosi. Logotypy bez potwierdzonego adresu nie
   mają odnośnika i zachowują się jak dotąd — różnica jest celowa. */
#pzs-20 .pzs-20-link{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;text-decoration:none;border-radius:4px}
#pzs-20 .pzs-20-kafel:has(.pzs-20-link){transition:border-color .15s ease,
  box-shadow .15s ease,transform .15s ease}
#pzs-20 .pzs-20-kafel:has(.pzs-20-link:hover),
#pzs-20 .pzs-20-kafel:has(.pzs-20-link:focus-visible){
  border-color:#C21319;box-shadow:0 2px 10px rgba(0,0,0,.12);transform:translateY(-2px)}
/* Obrys skupienia na samym odnośniku — dla osób idących klawiszem Tab.
   Kolor czerwony akcji na białym tle kafla daje kontrast 5,9:1. */
#pzs-20 .pzs-20-link:focus-visible{outline:3px solid #C21319;outline-offset:2px}
/* Starsze przeglądarki bez `:has` — wtedy reaguje sam odnośnik. */
@supports not selector(:has(*)){
  #pzs-20 .pzs-20-link:hover,#pzs-20 .pzs-20-link:focus-visible{
    outline:2px solid #C21319;outline-offset:-2px}
}
@media(prefers-reduced-motion:reduce){
  #pzs-20 .pzs-20-kafel:has(.pzs-20-link){transition:none}
  #pzs-20 .pzs-20-kafel:has(.pzs-20-link:hover){transform:none}
}