/* ==========================================================================
   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') type('image/webp'),
      url('../img/tlo/tile.jpg') 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: hidden;
    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-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));
  }
}

/* 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);
}

/* --- 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);
}

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

.sekcja-naglowek {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--odst-3);
  margin-bottom: var(--odst-4);
  padding-bottom: var(--odst-2);
  border-bottom: 2px solid var(--linia-mocna);
}

.sekcja-naglowek h2 {
  margin: 0;
}