/* ==========================================================================
   WikTymOne - layout.css
   Siatka strony, rytm sekcji, przejścia jasne/ciemne.
   ========================================================================== */

body { padding-top: var(--pasek-h); }

.sekcja {
  position: relative;
  padding-block: var(--s-10);
  /* overflow-x na kontenerze sekcji, nigdy na body */
  overflow-x: clip;
}

.sekcja--ciasna { padding-block: var(--s-9); }

.sekcja--jasna {
  background: var(--mgla);
  color: var(--stal);
}

.sekcja--jasna .etykieta { color: var(--grafit); }

.sekcja--granat {
  background: var(--granat-glab);
}

/* --- Nagłówek sekcji ------------------------------------------------------ */

.naglowek {
  display: grid;
  gap: var(--s-4);
  max-width: 54rem;
  margin-bottom: var(--s-8);
}

.naglowek__numer {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  color: var(--woda);
}

.naglowek__lead {
  font-size: var(--fs-400);
  color: var(--tekst-cichy);
  max-width: 46rem;
}

.sekcja--jasna .naglowek__lead { color: var(--grafit); }

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

.siatka {
  display: grid;
  gap: var(--s-5);
  /* minmax(0, 1fr) zawsze - goły 1fr ma podłogę min-content i rozpycha layout */
  grid-template-columns: minmax(0, 1fr);
}

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

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

/* Trzy wejścia - celowo asymetryczne, nie trzy równe karty */
.wejscia {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .wejscia {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .wejscia__glowne { grid-row: span 2; }
}

/* --- Stopka --------------------------------------------------------------- */

.stopka {
  background: var(--granat-glab);
  padding-block: var(--s-9) var(--s-6);
  border-top: 1px solid var(--rysa);
}

.stopka__siatka {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
}

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

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

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rysa);
  font-size: var(--fs-200);
  color: var(--tekst-cichy);
}