/* ===========================================================================
   05 — KOMPONENTY

   Elementy powtarzalne: etykiety rubryk, nagłówki, przyciski, pigułki, karty,
   kafle, listy danych, tabele. Używane na wielu stronach — stąd osobna warstwa.
   =========================================================================== */

/* --- etykieta rubryki ----------------------------------------------------- */

/* Występuje nad KAŻDYM nagłówkiem sekcji w makiecie. Kapitaliki, najszersze
   światło w systemie (.32em), błękit. */
.eos_etykieta {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-12);
  font-weight: var(--eos-waga-zwykla);
  letter-spacing: var(--eos-swiatlo-32);
  text-transform: uppercase;
  color: var(--eos-blekit);
  margin: 0 0 var(--eos-odstep-14);
}

/* --- nagłówki ------------------------------------------------------------- */

.eos_naglowek {
  font-family: var(--eos-szeryf);
  font-style: italic;
  font-weight: var(--eos-waga-srednia);
  font-size: var(--eos-pismo-44);
  line-height: var(--eos-interlinia-tytul);
  letter-spacing: var(--eos-swiatlo-ciasne);
  color: var(--eos-atrament);
  margin: 0 0 var(--eos-odstep-44);
}
.eos_naglowek--bezodstepu { margin-bottom: 0; }
/* Nagłówek, pod którym stoi akapit wprowadzający — odstęp bierze na siebie
   akapit, żeby tekst nie odkleił się od tytułu. */
.eos_naglowek--zwarty { margin-bottom: var(--eos-odstep-16); }
/* Wiersze aktualności są gęstsze niż karty, więc i nagłówek stoi bliżej. */
.eos_naglowek--wiadomosci { margin-bottom: var(--eos-odstep-40); }

.eos_wprowadzenie {
  margin: 0 0 var(--eos-odstep-44);
  max-width: 64ch;
  font-size: var(--eos-pismo-16);
  line-height: var(--eos-interlinia-tekst);
  color: var(--eos-atrament-72);
}

/* Nagłówek działu w spisie treści: kapitaliki nad linią ciągnącą się na całą
   szerokość kolumny. */
.eos_dzial {
  font-family: var(--eos-etykieta);
  /* ⚠ WAGA JAWNIE 400. Ta klasa bywa nadawana `<h2>`/`<h3>`, którym
     przeglądarka domyślnie daje 700 — a Tenor Sans nie ma odmiany grubej,
     więc przeglądarka „dopogrubiłaby" go syntetycznie, rozmazując kapitaliki. */
  font-weight: var(--eos-waga-zwykla);
  font-size: var(--eos-pismo-12);
  font-weight: var(--eos-waga-zwykla);
  letter-spacing: var(--eos-swiatlo-24);
  text-transform: uppercase;
  color: var(--eos-atrament);
  padding-bottom: var(--eos-odstep-12);
  border-bottom: var(--eos-linia) solid var(--eos-atrament);
  margin: 0 0 var(--eos-odstep-4);
}

/* Podnagłówek w kolumnie treści (np. „Keywords"). */
.eos_podnaglowek {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  font-weight: var(--eos-waga-zwykla);
  letter-spacing: var(--eos-swiatlo-18);
  text-transform: uppercase;
  color: var(--eos-atrament-55);
  margin: 0 0 var(--eos-odstep-14);
}

/* --- przyciski ------------------------------------------------------------ */

.eos_przycisk,
.eos_przycisk--obrys,
.eos_przycisk--ciemny,
.eos_przycisk--kontur {
  display: inline-block;
  font-family: var(--eos-etykieta);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
  border-radius: 0;   /* projekt jest ostrokrawędzisty */
  cursor: pointer;
}

/* Jasny na ciemnym tle (hero). */
.eos_przycisk {
  background: var(--eos-tlo);
  color: var(--eos-atrament);
  border: 0;
  padding: var(--eos-odstep-16) var(--eos-odstep-30);
  font-size: var(--eos-pismo-14);
}
.eos_przycisk:hover,
.eos_przycisk:focus { background: var(--eos-blekit-jasny); color: var(--eos-atrament); text-decoration: none; }

/* Konturowy na ciemnym tle. */
.eos_przycisk--obrys {
  background: transparent;
  border: var(--eos-linia) solid var(--eos-tlo-45);
  color: var(--eos-tlo);
  padding: var(--eos-odstep-16) var(--eos-odstep-30);
  font-size: var(--eos-pismo-14);
}
.eos_przycisk--obrys:hover,
.eos_przycisk--obrys:focus { border-color: var(--eos-tlo); color: var(--eos-tlo); text-decoration: none; }

/* Ciemny na jasnym tle (wezwanie do działania). */
.eos_przycisk--ciemny {
  background: var(--eos-atrament);
  color: var(--eos-tlo);
  border: 0;
  padding: 13px var(--eos-odstep-24);
  font-size: var(--eos-pismo-13);
}
.eos_przycisk--ciemny:hover,
.eos_przycisk--ciemny:focus { background: var(--eos-blekit-ciemny); color: var(--eos-tlo); text-decoration: none; }

/* Konturowy na jasnym tle (materiały zeszytu, „Paginae priores"). */
.eos_przycisk--kontur {
  background: transparent;
  border: var(--eos-linia) solid var(--eos-atrament);
  color: var(--eos-atrament);
  padding: var(--eos-odstep-14) var(--eos-odstep-26);
  font-size: var(--eos-pismo-13);
  white-space: nowrap;
}
.eos_przycisk--kontur:hover,
.eos_przycisk--kontur:focus { background: var(--eos-atrament); color: var(--eos-tlo); text-decoration: none; }

/* --- pigułka -------------------------------------------------------------- */

/* Jedyny zaokrąglony kształt w całym projekcie. */
.eos_pigulka {
  display: inline-block;
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-14);
  text-transform: uppercase;
  /* `-50`: pigułka bywa odsyłaczem, a wtedy jej obramowanie jest granicą
     kontrolki (WCAG 1.4.11, próg 3:1). `-30` dawało 2,08:1. */
  border: var(--eos-linia) solid var(--eos-atrament-50);
  border-radius: var(--eos-promien-pigulka);
  color: var(--eos-atrament);
  padding: var(--eos-odstep-8) 15px;
}
a.eos_pigulka:hover,
a.eos_pigulka:focus {
  background: var(--eos-atrament);
  border-color: var(--eos-atrament);
  color: var(--eos-tlo);
  text-decoration: none;
}
.eos_pigulki { display: flex; flex-wrap: wrap; gap: var(--eos-odstep-8); }

/* --- karty ---------------------------------------------------------------- */

.eos_karta {
  background: var(--eos-biel);
  border: var(--eos-linia) solid var(--eos-atrament-12);
  padding: var(--eos-odstep-24);
  display: flex;
  flex-direction: column;
  gap: var(--eos-odstep-14);
}

.eos_karta--ciemna {
  background: var(--eos-atrament);
  border-color: var(--eos-atrament);
  color: var(--eos-tlo);
  gap: var(--eos-odstep-12);
}
.eos_karta--ciemna a { color: var(--eos-blekit-jasny); }
/* ⚠ WYJĄTEK DLA PRZYCISKU. Reguła wyżej maluje KAŻDY odsyłacz w ciemnej karcie
   na jasny błękit — łącznie z przyciskiem, który ma jasne tło. Wychodził
   z tego jasnobłękitny napis na pergaminie, czyli kontrast 2,4:1. */
.eos_karta--ciemna .eos_przycisk { color: var(--eos-atrament); }
.eos_karta--ciemna p { font-size: var(--eos-pismo-14); line-height: 1.55; color: var(--eos-tlo-80); }

/* Karta z większym wypełnieniem (konta bankowe). */
.eos_karta--szeroka { padding: var(--eos-odstep-32); gap: var(--eos-odstep-22); }

/* Karta akcentowa (blok „Share" przy artykule) — jedyna błękitna karta. */
.eos_karta--akcent {
  background: var(--eos-blekit-jasny);
  border-color: var(--eos-blekit-jasny);
  gap: var(--eos-odstep-12);
}
.eos_karta--akcent .eos_karta_naglowek { color: var(--eos-atrament); }
.eos_karta_akcje { display: flex; flex-wrap: wrap; gap: var(--eos-odstep-8); }
.eos_karta_akcje a,
.eos_karta_akcje button {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-14);
  text-transform: uppercase;
  background: transparent;
  border: var(--eos-linia) solid rgba(0, 0, 28, .5);
  color: var(--eos-atrament);
  padding: 9px 15px;
  cursor: pointer;
}
.eos_karta_akcje a:hover,
.eos_karta_akcje button:hover {
  background: var(--eos-atrament);
  color: var(--eos-blekit-jasny);
  text-decoration: none;
}

/* Stopka karty — dane, które są przypisem do jej treści (licencja, prawa). */
.eos_karta_stopka {
  border-top: var(--eos-linia) solid var(--eos-atrament-08);
  padding-top: var(--eos-odstep-14);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eos_karta_stopka dt,
.eos_karta_stopka .etykieta {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
  color: var(--eos-atrament-60);
}
.eos_karta_stopka dd { margin: 0; font-size: var(--eos-pismo-14); line-height: 1.5; }

/* Karta powiadomień o nowym zeszycie.
   ⚠ ŚWIADOME ODSTĘPSTWO OD MAKIETY: makieta pokazuje tu pole na adres e-mail
     z przyciskiem. OJS nie ma listy wysyłkowej niezwiązanej z kontem —
     powiadomienia o nowym zeszycie dostają zarejestrowani czytelnicy, którzy
     je włączyli. Pole, które nie zapisywałoby adresu nigdzie, byłoby atrapą.
     Zamiast niego kierujemy do rejestracji, czyli do miejsca, gdzie ta funkcja
     naprawdę działa. */
.eos_alerty p { font-size: var(--eos-pismo-14); line-height: 1.55; }

.eos_karta_naglowek {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  font-weight: var(--eos-waga-zwykla);
  letter-spacing: var(--eos-swiatlo-18);
  text-transform: uppercase;
  margin: 0;
}
.eos_karta--ciemna .eos_karta_naglowek { color: var(--eos-blekit-jasny); }

/* --- lista danych (nazwa ↔ wartość) --------------------------------------- */

.eos_dane {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: var(--eos-pismo-14);
  line-height: 1.5;
  margin: 0;
}
.eos_dane > div {
  display: flex;
  justify-content: space-between;
  gap: var(--eos-odstep-12);
  border-bottom: var(--eos-linia) solid var(--eos-atrament-08);
  padding-bottom: var(--eos-odstep-8);
}
.eos_dane > div:last-child { border-bottom: 0; padding-bottom: 0; }
.eos_dane dt { color: var(--eos-atrament-60); margin: 0; }
.eos_dane dd { margin: 0; text-align: right; }

/* Numery kont i stron: cyfry o równej szerokości, żeby kolumny się zgadzały. */
.eos_dane--liczby dd,
.eos_liczby { font-variant-numeric: tabular-nums; }

/* --- kafel ---------------------------------------------------------------- */

.eos_kafel {
  background: var(--eos-biel);
  border: var(--eos-linia) solid var(--eos-atrament-12);
  padding: var(--eos-odstep-26);
  display: flex;
  flex-direction: column;
  gap: var(--eos-odstep-8);
  color: var(--eos-atrament);
  height: 100%;
}
.eos_kafel:hover,
.eos_kafel:focus {
  background: var(--eos-atrament);
  border-color: var(--eos-atrament);
  color: var(--eos-tlo);
  text-decoration: none;
}
.eos_kafel_glowny {
  font-family: var(--eos-szeryf);
  font-style: italic;
  font-size: var(--eos-pismo-30);
  line-height: var(--eos-interlinia-1);
}
.eos_kafel_opis {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
}

/* Kafel indeksu jest niższy, wyśrodkowany w pionie i nie reaguje na najechanie
   (to informacja, nie odsyłacz). */
.eos_kafel--indeks {
  min-height: 96px;
  justify-content: center;
  padding: var(--eos-odstep-24);
  gap: 6px;
}
.eos_kafel--indeks:hover { background: var(--eos-biel); color: var(--eos-atrament); }

/* Kafel „całe archiwum" jest jedynym błękitnym w siatce — to on kończy rząd
   i mówi „jest tego więcej". */
.eos_kafel--pelne {
  background: var(--eos-blekit-jasny);
  border-color: var(--eos-blekit-jasny);
}
.eos_kafel--pelne:hover,
.eos_kafel--pelne:focus { background: var(--eos-atrament); border-color: var(--eos-atrament); color: var(--eos-tlo); }

/* --- pas wyróżnienia ------------------------------------------------------ */

/* Jedyne miejsce w projekcie z akcentem na lewej krawędzi. */
.eos_wyroznienie {
  background: var(--eos-wyroznienie);
  border-left: var(--eos-linia-akcent) solid var(--eos-blekit);
  padding: var(--eos-odstep-20) var(--eos-odstep-24);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--eos-odstep-24);
  flex-wrap: wrap;
  font-size: var(--eos-pismo-16);
  line-height: 1.5;
}
.eos_wyroznienie--drobny {
  display: block;
  padding: var(--eos-odstep-14) var(--eos-odstep-16);
  font-size: var(--eos-pismo-14);
  line-height: 1.55;
}

/* --- tabela --------------------------------------------------------------- */

.eos_tabela {
  width: 100%;
  background: var(--eos-biel);
  border: var(--eos-linia) solid var(--eos-atrament-12);
  font-size: var(--eos-pismo-16);
}
.eos_tabela thead tr {
  background: var(--eos-atrament);
  color: var(--eos-tlo);
  text-align: left;
}
.eos_tabela th {
  padding: 15px var(--eos-odstep-20);
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  font-weight: var(--eos-waga-zwykla);
  letter-spacing: var(--eos-swiatlo-18);
  text-transform: uppercase;
}
.eos_tabela td { padding: 15px var(--eos-odstep-20); }
.eos_tabela tbody tr { border-bottom: var(--eos-linia) solid rgba(0, 0, 28, .1); }
.eos_tabela tbody tr:nth-child(even) { background: var(--eos-atrament-03); }
.eos_tabela tbody tr:last-child { border-bottom: 0; }

/* Tabela przewija się WEWNĄTRZ swojego pudełka — nie rozpycha strony. */
.eos_tabela_pudelko { overflow-x: auto; max-width: 100%; }

/* ===========================================================================
   KOMPONENTY TRZECH STAŁYCH SEKCJI STRONY GŁÓWNEJ

   ⚠ TE REGUŁY NIE ISTNIAŁY, A SZABLON ICH UŻYWAŁ. `eos-sekcje.tpl` przyszedł
     ze starego motywu potomnego razem ze swoim nazewnictwem; arkusze nowego
     motywu nazywają te komponenty inaczej. Większość klas sprowadziliśmy do
     komponentów, które motyw już miał (`.eos_tabela`, `.eos_siatka--osoby`,
     `.eos_karta`, `.eos_uklad_kontakt`, `.eos_karta--szeroka`); poniżej zostaje
     tylko to, czego naprawdę nie było. Wartości spisane z makiety, nie dobrane.
   =========================================================================== */

/* --- skład redakcji ------------------------------------------------------- */

.eos_tabela--rada { margin-bottom: var(--eos-odstep-40); }
/* Trzecia kolumna to afiliacja albo adres — informacja drugoplanowa. */
.eos_tabela--rada td:last-child { color: var(--eos-atrament-70); }

.eos_rada_podnaglowek {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-12);
  font-weight: var(--eos-waga-zwykla);
  letter-spacing: var(--eos-swiatlo-20);
  text-transform: uppercase;
  margin: 0 0 var(--eos-odstep-20);
}

/* Karta osoby jest ciaśniejsza od zwykłej karty: to dwie linijki tekstu,
   nie blok treści. */
.eos_karta--osoba { padding: var(--eos-odstep-20) var(--eos-odstep-22); gap: 5px; }
.eos_rada_nazwisko { font-size: var(--eos-pismo-16); line-height: 1.4; }
.eos_rada_afiliacja { font-size: var(--eos-pismo-13); color: var(--eos-atrament-60); }

/* --- droga publikacji ----------------------------------------------------- */

.eos_krok { padding: var(--eos-odstep-28); gap: var(--eos-odstep-10); }
/* Numer kroku to jedyne miejsce w projekcie, gdzie Lora występuje w błękicie. */
.eos_krok_numer {
  font-family: var(--eos-szeryf);
  font-style: italic;
  font-size: var(--eos-pismo-34);
  line-height: var(--eos-interlinia-1);
  color: var(--eos-blekit);
}
.eos_krok_tytul {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-13);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
}
.eos_krok p { font-size: var(--eos-pismo-15); line-height: 1.55; color: var(--eos-atrament-72); }

/* --- kontakt i konta bankowe ---------------------------------------------- */

.eos_kontakt_lewa { display: flex; flex-direction: column; gap: var(--eos-odstep-20); }
.eos_kontakt_lista {
  display: flex;
  flex-direction: column;
  gap: var(--eos-odstep-16);
  font-size: var(--eos-pismo-16);
  line-height: var(--eos-interlinia-tekst);
}
.eos_kontakt_podpis { font-size: var(--eos-pismo-14); color: var(--eos-atrament-65); }
.eos_kontakt_adres { margin-top: var(--eos-odstep-4); color: rgba(0, 0, 28, .78); }

.eos_konta_blok { display: flex; flex-direction: column; gap: 6px; }
/* Każdy kolejny rachunek odcina się kreską — inaczej cztery pary etykieta+numer
   czytają się jak jedna lista i łatwo przepisać numer nie tej waluty. */
.eos_konta_blok_kolejny {
  border-top: var(--eos-linia) solid rgba(0, 0, 28, .1);
  padding-top: var(--eos-odstep-18);
}
.eos_konta_wlasciciel { font-size: var(--eos-pismo-15); line-height: var(--eos-interlinia-tekst); }
.eos_konta_waluta {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
  color: var(--eos-blekit);
}
/* SWIFT/BIC to nie waluta — ten sam kształt, ale bez akcentu. */
.eos_konta_waluta_wtorna { color: var(--eos-atrament-60); }
.eos_konta_numer {
  font-size: var(--eos-pismo-15);
  line-height: var(--eos-interlinia-tekst);
  /* Cyfry o równej szerokości: czterocyfrowe grupy IBAN układają się w kolumny
     i łatwiej przepisać numer bez pomyłki. */
  font-variant-numeric: tabular-nums;
}