/* ==========================================================================
   Farmersi 2.0 — layout.css
   Powłoka strony: papierowa "karta" na ciemnym tle, kontener, siatki.
   1.0 miało sztywne 900 px i tabele — tutaj CSS Grid + jeden kontener.
   ========================================================================== */

/* --- Powłoka ------------------------------------------------------------ */

.powloka {
  max-width: var(--szerokosc-tresci);
  margin: 0 auto;
  background-color: var(--tlo-krem);
  /* Papier: kafelek tekstury (dostarczony przez właściciela) jako delikatne
     urozmaicenie + gradient rozjaśniający górę strony. Tekstura jest bardzo
     subtelna — ma być wyczuwalna, nie widoczna.
     image-set() daje WebP z fallbackiem JPEG, bo nie każdy serwer wysyła
     poprawny typ MIME dla WebP (python -m http.server nie wysyła). */
  background-image:
    linear-gradient(180deg, rgba(251, 246, 233, 0.55) 0%, rgba(245, 236, 216, 0.75) 100%),
    image-set(
      url('../img/tlo/tile.webp?h=21322c4e') type('image/webp'),
      url('../img/tlo/tile.jpg?h=b93ca1bf') type('image/jpeg')
    );
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 512px 512px;
  background-blend-mode: normal, multiply;
  border-left: 1px solid var(--linia-mocna);
  border-right: 1px solid var(--linia-mocna);
  box-shadow: var(--cien-3);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 72rem) {
  .powloka {
    margin: var(--odst-4) auto;
    border-radius: var(--promien-l);
    /* `overflow: clip` zamiast `hidden` — powód jest techniczny i istotny:
       `overflow: hidden` tworzy WŁASNY scrollport, więc `position: sticky`
       wewnątrz powłoki przestaje się kleić do okna (pasek zakładek arkusza
       „uciekał” przy przewijaniu na desktopie). `clip` przycina to samo
       (zaokrąglone rogi dalej działają), ale NIE tworzy scrollportu. */
    overflow: clip;
    min-height: auto;
  }
}

/* --- Kontener treści ----------------------------------------------------- */

.kontener {
  width: 100%;
  padding-inline: var(--odst-4);
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .kontener {
    padding-inline: var(--odst-5);
  }
}

/* --- Główna treść -------------------------------------------------------- */

.glowna {
  flex: 1 0 auto;
  padding-block: var(--odst-5);
}

/* --- Siatki -------------------------------------------------------------- */

/* Strona główna: jedna kolumna na mobile, treść + panel boczny na desktop.
   UWAGA: minmax(0, 1fr), nie 1fr — przy 1fr tor rozdmuchuje się do
   min-content dziecka i strona zaczyna się przewijać w poziomie. */
.siatka-glowna {
  display: grid;
  gap: var(--odst-5);
  grid-template-columns: minmax(0, 1fr);
}

/* Dzieci siatek/flexów nie mogą wymuszać szerokości większej niż tor. */
.siatka-glowna > *,
.siatka-2 > *,
.siatka-3 > *,
.siatka-kart > *,
.siatka-miast > *,
.stos > *,
.stos-maly > * {
  min-width: 0;
}

@media (min-width: 60rem) {
  .siatka-glowna {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--odst-6);
  }
}

/* Równy podział na 2 kolumny (parametry miasta, liczniki). */
.siatka-2 {
  display: grid;
  gap: var(--odst-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 34rem) {
  .siatka-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Równy podział na 3 kolumny (parametry miasta | rynek | ranking).
   Od 48rem, bo przy 375 px trzy kolumny tabel są nieczytelne. */
.siatka-3 {
  display: grid;
  gap: var(--odst-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .siatka-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Automatyczna siatka kart — liczniki, kafle. */
.siatka-kart {
  display: grid;
  gap: var(--odst-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .siatka-kart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Siatka miast na mapie/liście. */
.siatka-miast {
  display: grid;
  gap: var(--odst-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .siatka-miast {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .siatka-miast {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Szerokość tekstu ciągłego ------------------------------------------- */

.waska {
  max-width: var(--szerokosc-waska);
}

/* --- Dwie kolumny na szerokim ekranie (decyzja właściciela 19.10.2026) -----
   „tam gdzie skróciłeś wiersze zostało dużo pustego miejsca i źle to wygląda,
   więc sugeruję dwie kolumny”. Ograniczenie miary tekstu (`.waska`, pkt 5
   audytu) zwęziło listy na „Informacjach”, zostawiając pustą prawą połowę.

   KOLUMNY DOSTAJĄ TYLKO ZESTAWY KRÓTKICH, NIEZALEŻNYCH POZYCJI:
   listy „Gotowe”/„Planowane”, regulamin, słownik pojęć i wstęp fabularny map.
   NIE dostają ich: akapity `.sekcja > p` (2–3 wiersze), tabele i lista gier na
   mapie (plakietka „cel” musi stać przy prawej krawędzi).

   Próg 1100 px, nie 64rem: przy 1024 px kolumna miałaby ~465 px i wysokie
   pozycje regulaminu zaczęłyby się rozjeżdżać. */
@media (min-width: 1100px) {
  .lista-kreska.waska,
  .lista-regulamin {
    max-width: none;
    column-count: 2;
    column-gap: var(--odst-7);
    column-rule: 1px solid var(--linia-slaba);
  }

  .lista-kreska.waska > li,
  .lista-regulamin > li {
    break-inside: avoid;
  }

  /* W kolumnach odstęp między punktami daje `padding-bottom`, a nie margines:
     margines na styku kolumn potrafi przenieść cały punkt do drugiej kolumny. */
  .lista-regulamin > li + li {
    margin-top: 0;
  }

  .lista-regulamin > li {
    padding-bottom: var(--odst-3);
  }

  .pojecia {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    column-gap: var(--odst-6);
  }

  .komunikat--opowiesc {
    max-width: none;
    column-count: 2;
    column-gap: var(--odst-6);
  }

  /* Selektor z `.sekcja >` jest konieczny: `components.css` ma
     `.komunikat--opowiesc { max-width: calc(...) }` o tej samej sile, a jest
     ładowany PO tym pliku — bez podniesienia specyficzności `max-width: none`
     przegrywało i kolumny zostawały ściśnięte do 768 px. */
  .sekcja > .komunikat--opowiesc {
    max-width: none;
  }
}

/* --- Pomocnicze ---------------------------------------------------------- */

.stos {
  display: flex;
  flex-direction: column;
  gap: var(--odst-4);
}

.stos-maly {
  display: flex;
  flex-direction: column;
  gap: var(--odst-2);
}

.wiersz {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odst-3);
  align-items: center;
}

.wiersz-rozsun {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odst-3);
  align-items: center;
  justify-content: space-between;
}

.tekst-srodek {
  text-align: center;
}

.ukryte {
  display: none !important;
}

/* ==========================================================================
   Sekcja z nagłówkiem na tle papieru (1.0: <h2> + <hr class="kolor">)
   ========================================================================== */

.sekcja {
  margin-bottom: var(--odst-6);
}

/* AUDYT WIZUALNY (19.10.2026, pkt 5): akapity w sekcjach trzymają miarę
   tekstu ciągłego (60–85 znaków), a nie całą szerokość strony. Wcześniej
   `informacje.html` i `opis-gry.html` miały wiersze po ~138 znaków, co czyta
   się jak tabela, a nie jak tekst.
   UWAGA: świadomie NIE ograniczamy `.lista-kreska li` globalnie — ta sama
   klasa układa listę gier na `mapa-1832.html`, gdzie plakietka „cel: …”
   musi zostać przy prawej krawędzi. Listy w `informacje.html` dostają
   klasę `waska` w HTML (robota drugiego agenta). */
.sekcja > p {
  max-width: var(--szerokosc-tekstu);
}

/* Wyjątek od miary tekstu: akapit ma iść PEŁNĄ szerokością sekcji.
   Właściciel (19.10.2026) o wstępach: „bez zawijania, bo zostaje puste
   miejsce z prawej”, a potem o „Stan prac”: „pierwszy paragraf też daj na
   całą szerokość”. Selektor z `.sekcja > p` jest konieczny — sama klasa
   przegrywa specyficznością z regułą wyżej. */
.sekcja > p.pelna-szerokosc {
  max-width: none;
}

.sekcja:last-child {
  margin-bottom: 0;
}

/* Kolejność: nagłówek, POTEM kreska pod nim — właściciel wycofał wcześniejszą
   decyzję: „sorki, nie miałem racji — gorzej to wygląda. lepiej było, jak
   kreska była POD nagłówkiem". Powód zgłoszenia: „»aktualności« bardziej
   łączą się z saloonem niż z niusami. kwestia odstępów" — czyli nagłówek
   kleił się do POPRZEDNIEJ sekcji, a odsuwał od WŁASNEJ treści.
   Dlatego: oddech NAD nagłówkiem (`margin-top`), ciasno POD nim
   (`padding-bottom` + mały `margin-bottom`), a linia na `border-bottom`.
   Reguła jest wspólna dla wszystkich stron używających tego kontenera. */
.sekcja-naglowek {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--odst-3);
  margin-top: var(--odst-5);
  margin-bottom: var(--odst-2);
  padding-bottom: var(--odst-2);
  border-bottom: 2px solid var(--linia-mocna);
}

.sekcja-naglowek h2 {
  margin: 0;
}