/* ==========================================================================
   nis2-stopka.css - zakonczenie strony, to samo wszedzie

   Ladowany PO nis2-marka.css, PRZED lokalnym <style> strony.

   Powod powstania (29.07.2026): stopka miala w serwisie cztery wersje.
   Landing konczyl sie biala plaszczyzna z kreska u gory, szkolenia
   granatem #101820, webinar gradientem z turkusu w granat i zloto.
   Klient przechodzacy miedzy stronami widzial trzy rozne zakonczenia
   tego samego serwisu.

   Kanoniczna jest wersja z landingu: biel z kreska. Powod jest ten sam,
   dla ktorego wszystkie sekcje sa biale. Ciemna plama na koncu kazdej
   strony to czwarty raz ten sam efekt, wiec przestaje cokolwiek znaczyc.

   Selektory obejmuja obie konwencje: landing pisze .stopka, podstrony
   .footer.
   ========================================================================== */

/* STOPKA NA CIEMNYM TLE, W CZTERECH KOLUMNACH - 08.08.2026

   Trzy rzeczy naraz, na prosbe Dominika: szerzej, ciemniej, nizej. Poprzednia
   wersja miala 756 px wysokosci przy mierze 940 px na jasnym tle; cel to
   maksymalnie dwie piate tego, czyli 302 px.

   Skad ta wysokosc: wszystko idzie w jeden rzad czterech kolumn. Dane firmy
   wrocily do bloku marki, a zrodla i sprawy prawne, ktore stały osobnymi
   wierszami pod kolumnami, sa teraz kolumnami. Zostaje jeden wiersz na dole.

   Miara zdjeta - stopka trzyma szerokosc strony, nie wlasna wezsza. To jest
   odwrotnosc decyzji sprzed kilku godzin ("stopka to nie tresc do czytania
   ciagiem"), swiadomie: przy czterech kolumnach wezsza miara je sciska.

   Granat #17233D to `--wlos-mocny` z palety, nie nowy kolor. Naglowek pliku
   opisuje, dlaczego 29.07 stopki ujednolicono do bieli - ta zmiana to cofa
   i robi to dla OBU konwencji naraz, zeby landing i podstrony nie rozjechaly
   sie po raz kolejny. */
.footer,
.stopka {
  /* Granat #17233D z palety (`podstawowe/navy`). Bez, ktory stal tu przez
     chwile 08.08.2026, zszedl na prosbe Dominika - nie ma go w kanonie marki,
     a bialy tekst na nim nie przechodzil progu kontrastu. */
  --atrament:   #FFFFFF;
  --atrament-2: #FFFFFF;
  --szept:      rgba(255, 255, 255, .78);
  --wlos:       rgba(255, 255, 255, .16);
  --wlos-mocny: rgba(255, 255, 255, .32);

  border-top: 0;
  padding-block: 26px 22px;
  background: #17233D;
  color: rgba(255, 255, 255, .78);
  font-size: var(--t-nota);
}

.stopka.stopka--global {
  background: #17233D;
  color: rgba(255, 255, 255, .78);
}

.stopka.stopka--global > .miara {
  width: min(1280px, calc(100% - 40px));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.footer > .wrap,
.stopka__uklad {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}

.footer nav,
.stopka nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

/* Cel dotykowy 26 px. Odnosniki w stopce stoja gesto obok siebie, wiec
   sama wysokosc linii nie wystarcza. */
.footer a,
.stopka a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--szept);
  text-decoration: none;
}

.footer a:hover,
.stopka a:hover { color: var(--atrament); }

/* --- znak marki w stopce -------------------------------------------------- */

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  height: 22px;
  width: auto;
  display: block;
}

/* Link opakowujacy logo mial wysokosc samego obrazka (22 px), czyli ponizej
   progu 24 px z WCAG 2.2. Powiekszamy obszar klikalny, logo zostaje tej samej
   wielkosci. Regula stala w nis2-komponenty.css do 08.08.2026, przeniesiona
   tutaj razem z reszta stopki ze znakiem. */
.footer-brand a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --- zrodla i zastrzezenie ------------------------------------------------ */

/* Cztery kolumny. Kolumna ze zrodlami jest najszersza, bo nazwy dziennikow
   ustaw sa dlugie; reszta idzie po rowno. */
.stopka__kolumny {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .75fr) minmax(0, 1.15fr) minmax(0, .95fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 900px) { .stopka__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 520px) { .stopka__kolumny { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.stopka__kol,
.stopka nav.stopka__kol { display: grid; justify-items: start; gap: 4px; }

/* Odnosniki w jednej kolumnie. Wersja na dwie kolumienki, dodana zeby zbic
   wysokosc stopki, rozjezdzala sie wizualnie: dwie krotkie listy obok siebie
   czytaly sie jak dwie osobne kategorie bez nazw. Wysokosc rosnie o okolo
   100 px i to jest swiadomy koszt. */

/* Logo w wersji na ciemne tlo. Plik ma 512x72, przy 24 px wysokosci
   wychodzi 171 px szerokosci. */
.stopka__logo { height: 24px; width: auto; display: block; margin-bottom: 14px; }
.stopka__marka { gap: 0; }
/* Jeden rytm w calej kolumnie: 29 px miedzy kazdym wierszem, od adresu po
   telefon. Wczesniej byly dwa - adres szedl co 21 px (line-height), a maile
   i telefon co 29 px, bo kazdy odnosnik ma 26 px celu dotykowego z WCAG plus
   padding. Rownamy W GORE, do rytmu odnosnikow: w dol sie nie da, bo to
   znaczyloby zejscie ponizej progu celu dotykowego.

   Adres i kontakt to ta sama kategoria - dane firmy - wiec stoja jako jeden
   ciag, bez dodatkowego separatora miedzy nimi. */
.stopka__adres { margin: 0; line-height: 29px; }

/* Naglowki kolumn na bold (09.08.2026). Kolor idzie w gore razem z gruboscia:
   bold w bieli przygaszonej do 58 proc. czytalby sie jak blad renderu,
   a nie jak hierarchia. */
.stopka__tytul {
  font-size: var(--t-etyk); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82);
  margin-bottom: 6px;
}
.stopka__zrodla a { line-height: 1.35; }

/* Dolny wiersz: zastrzezenie po lewej, copyright po prawej, jedna kreska
   nad nimi. */
.stopka__dol {
  display: flex; flex-wrap: wrap; gap: 10px 32px;
  justify-content: space-between; align-items: flex-start;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.stopka__dol .zastrzezenie {
  margin: 0; padding: 0; border: 0;
  flex: 1 1 460px; max-width: 96ch; line-height: 1.5;
  font-size: 13px; color: rgba(255, 255, 255, .6);
}
.stopka__prawa { margin: 0; flex: none; margin-left: auto; font-size: 13px; }
@media (max-width: 620px) { .stopka__prawa { margin-left: 0; } }

/* Podstrony (`.footer`) nadal korzystaja z tej pary regul. */
.zastrzezenie {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--wlos);
}

@media (max-width: 620px) {
  .footer-brand {
    flex-direction: column;
    align-items: flex-start;
  }
}