/* ===========================================================================
   02 — UKŁAD

   Szkielet strony: kontener, kolumna treści, sekcje, układy dwukolumnowe,
   pasy pełnej szerokości.

   ⚠ RDZEŃ OJS DAJE TU TYLKO PUSTE POJEMNIKI. `pkp_structure_page`,
     `pkp_structure_content`, `pkp_structure_main` nie mają w rdzeniu żadnych
     wymiarów — całą geometrię strony nadaje motyw. W wersji potomnej
     przychodziła ona z motywu Default razem z jego pływaniem, procentami
     i ujemnymi marginesami. Tutaj definiujemy ją od zera i jawnie.
   =========================================================================== */

/* --- szkielet rdzenia ----------------------------------------------------- */

.pkp_structure_page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Treść rośnie, stopka zawsze przy dole okna — także na krótkich stronach
   (np. wynik wyszukiwania bez trafień). */
.pkp_structure_content { flex: 1 0 auto; }

/* ⚠ KONTENER NA KOLUMNIE TREŚCI, NIE NA POSZCZEGÓLNYCH SEKCJACH.
   Kolumna jest wspólna dla wszystkich stron — spisu treści, artykułu,
   archiwum, stron redakcyjnych, logowania. Nadawanie odstępów sekcjom strony
   głównej zostawiłoby resztę serwisu przyklejoną do krawędzi okna. */
.pkp_structure_main {
  width: 100%;
  max-width: var(--eos-kontener);
  margin: 0 auto;
  padding: 0 var(--eos-margines);
}

/* Pasek boczny rdzenia: bloki wtyczek renderują się w nim tylko wtedy,
   gdy czasopismo ma włączony pasek. Projekt go nie przewiduje, ale szablon
   stopki woła hook — patrz komentarz tam. */
.pkp_structure_sidebar {
  width: 100%;
  max-width: var(--eos-kontener);
  margin: 0 auto;
  padding: 0 var(--eos-margines) var(--eos-odstep-56);
}

/* --- kontener wielokrotnego użytku ---------------------------------------- */

.eos_kontener {
  width: 100%;
  max-width: var(--eos-kontener);
  margin: 0 auto;
  padding-left: var(--eos-margines);
  padding-right: var(--eos-margines);
}

/* Wewnątrz kolumny treści odstępy są już nadane — zagnieżdżony kontener ma
   tylko wypełnić szerokość, bez ich dublowania. */
.pkp_structure_main .eos_kontener {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* --- pas pełnej szerokości ------------------------------------------------ */

/* ⚠ WYJŚCIE POZA KOLUMNĘ TREŚCI. Hero i inne ciemne pasy mają dotykać krawędzi
   okna, a leżą wewnątrz kolumny o szerokości 1240 px. Rozciągnięcie do `100vw`
   z cofnięciem o połowę różnicy jest jedynym sposobem, który nie wymaga
   przenoszenia elementu w szablonie.
   ⚠ `100vw` LICZY SIĘ Z PASKIEM PRZEWIJANIA — stąd `overflow-x: clip` na body
     poniżej. `clip`, a nie `hidden`, bo `hidden` tworzy kontener przewijania
     i psuje `position: sticky` nagłówka. */
.eos_pelna_szerokosc {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body { overflow-x: clip; }

/* Wnętrze pasa pełnej szerokości musi kontener odtworzyć. */
.eos_pelna_szerokosc > .eos_kontener {
  max-width: var(--eos-kontener);
  padding-left: var(--eos-margines);
  padding-right: var(--eos-margines);
}

/* --- sekcje --------------------------------------------------------------- */

.eos_sekcja {
  padding-top: var(--eos-odstep-88);
  padding-bottom: var(--eos-odstep-88);
  border-bottom: var(--eos-linia) solid var(--eos-atrament-12);
}
.eos_sekcja:last-child { border-bottom: 0; }

.eos_sekcja--waska {
  padding-top: var(--eos-odstep-72);
  padding-bottom: var(--eos-odstep-72);
}

/* --- układy dwukolumnowe -------------------------------------------------- */

/* ⚠ `minmax(0, 1fr)` ZAMIAST `1fr`. Domyślne `1fr` to `minmax(auto, 1fr)`,
   czyli „nie węziej niż treść" — długi tytuł albo tabela rozpychają wtedy
   całą siatkę i pojawia się przewijanie w poziomie. To była jedna z przyczyn
   przewijania w poprzedniej wersji. */
.eos_dwie_kolumny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--eos-bok);
  gap: var(--eos-odstep-56);
  align-items: start;
}

.eos_dwie_kolumny--zeszyt { grid-template-columns: minmax(0, 1fr) var(--eos-bok-zeszyt); }
.eos_dwie_kolumny--artykul { gap: var(--eos-odstep-64); }

/* Hero: tekst szerszy od okładki. */
.eos_uklad_hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr);
  gap: var(--eos-odstep-64);
  align-items: center;
}

/* Kontakt: karta kont nieco szersza od kolumny z adresami. */
.eos_uklad_kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--eos-odstep-56);
  align-items: start;
}

/* Każde dziecko układu siatkowego musi móc się kurczyć. */
.eos_dwie_kolumny > *,
.eos_uklad_hero > *,
.eos_uklad_kontakt > * { min-width: 0; }

/* --- siatki kart ---------------------------------------------------------- */

/* ⚠ `auto-fit`, ZGODNIE Z MAKIETĄ I SPECYFIKACJĄ. Przez chwilę stało tu
   `auto-fill` — z obawy, że przy jednym elemencie `auto-fit` zwinie puste tory
   i kafel rozciągnie się na całą szerokość. Obawa jest słuszna, ale lekarstwo
   psuło przypadek NORMALNY: przy pięciu kaflach `auto-fill` zostawiał pusty
   tor i rząd wyglądał na urwany. Właściwe lekarstwo to wyjątek na jedno
   dziecko, niżej. */
.eos_siatka {
  display: grid;
  gap: var(--eos-odstep-2);
}

/* ⚠ ZEROWANIE MARGINESU I WYPEŁNIENIA TYLKO DLA LIST — i to nie jest drobiazg.
   Reguła miała neutralizować domyślne wcięcie `<ul>`, ale stała w `.eos_siatka`,
   więc obowiązywała KAŻDY element z tą klasą. Gdy siatka i kontener spotkały się
   na jednym elemencie (stopka: `class="… eos_siatka … eos_kontener"`), oba
   selektory miały tę samą specyficzność i decydowała kolejność w arkuszu —
   `.eos_siatka` stoi niżej, więc wygrywała i kasowała `margin: 0 auto`
   oraz `padding: 0 40px` kontenera. Zmierzony skutek: stopka przesunięta o 136 px
   w lewo, pierwsza kolumna dotykała krawędzi okna, a dolny pas — jedyny element
   stopki bez klasy siatki — zostawał na swoim miejscu. Stąd wrażenie, że stopka
   „czasem" się rozjeżdża: rozjeżdżała się dokładnie tam, gdzie te dwie klasy
   się spotkały. */
ul.eos_siatka,
ol.eos_siatka {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eos_siatka--kafle { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.eos_siatka--indeksy { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.eos_siatka--osoby { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.eos_siatka--stopka { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--eos-odstep-40); }

/* Wyjątek zapowiedziany wyżej: pojedynczy element nie ma się rozciągać na całą
   szerokość — ma zostać kaflem. */
.eos_siatka:has(> :only-child) { grid-template-columns: 190px; }

/* Karty kroków mają oddech — jako jedyne w projekcie nie stykają się. */
.eos_siatka--kroki {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--eos-odstep-24);
  margin-bottom: 36px;
}

/* --- kolumna boczna ------------------------------------------------------- */

.eos_bok {
  display: flex;
  flex-direction: column;
  gap: var(--eos-odstep-2);
  position: sticky;
  /* ⚠ WARTOŚĆ ZALEŻY OD WYSOKOŚCI NAGŁÓWKA NA DANEJ STRONIE, a ta nie jest
     wszędzie taka sama: strona główna wchodzi pod hero, strona zeszytu
     i artykułu mają nad sobą jeszcze okruszki i blok tytułowy. Jedna wspólna
     wartość zostawiała na jednych stronach lukę, a na innych wsuwała kolumnę
     pod pasek nawigacji. Liczby z makiety. */
  top: 110px;
}
.page_issue .eos_bok,
.page_article .eos_bok { top: 187px; }