/* Siatka layoutu i breakpointy — parametry i uzasadnienie: docs/siatka-layout.md (wynik task01.06).
   12 kolumn na wszystkich szerokościach; tryby: desktop / tablet (złożenie 4→2) / mobile (1 kolumna).
   Uniwersalny zoom: font-size roota skaluje się liniowo z szerokością okna względem bazy trybu,
   więc wszystko zapisane w rem skaluje się razem z nim; układ zmienia się tylko na granicach trybów. */

/* ---- Zoom uniwersalny ---- */

/* Desktop (≥1024 px): baza 1440 → 16px/1440 = 1.1111vw; sufit skali na 1920 px,
   powyżej treść stoi wycentrowana, po bokach kolor tła. */
html {
  font-size: min(1.1111vw, 21.3333px);
}

/* Tablet (640–1023 px): baza 768 → 16px/768 = 2.0833vw. */
@media (max-width: 1023px) {
  html { font-size: 2.0833vw; }
}

/* Mobile (320–639 px): baza 393 → 16px/393 = 4.0712vw;
   poniżej 320 px skala zamrożona (razem z min-width body daje scroll poziomy). */
@media (max-width: 639px) {
  html { font-size: max(4.0712vw, 13.028px); }
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--kolor-tla);
}

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

/* Desktop: 1204 px w skali 1:1 (z Figmy: 12×71 px + 11×32 px, frame 1440),
   wycentrowany — marginesy boczne wynikowe.
   Tablet/mobile: pełna szerokość z marginesami bocznymi. */
.kontener {
  box-sizing: border-box;
  max-width: 75.25rem; /* 1204 px */
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .kontener { padding-inline: var(--odstep-4); } /* 32 px */
}

@media (max-width: 639px) {
  .kontener { padding-inline: var(--odstep-2); } /* 16 px — z projektu mobile */
}

/* ---- Siatka 12 kolumn ---- */

.siatka {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--odstep-4); /* gutter 32 px */
}

/* Klasy span: .kol-N (desktop), .kol-t-N (tablet), .kol-m-N (mobile).
   Typowy blok „4 na desktopie, 2 na tablecie, 1 na mobile": class="kol-3 kol-t-6".
   Kolejność reguł = kaskada: tryb węższy nadpisuje szerszy. */

.kol-1  { grid-column: span 1; }
.kol-2  { grid-column: span 2; }
.kol-3  { grid-column: span 3; }
.kol-4  { grid-column: span 4; }
.kol-5  { grid-column: span 5; }
.kol-6  { grid-column: span 6; }
.kol-7  { grid-column: span 7; }
.kol-8  { grid-column: span 8; }
.kol-9  { grid-column: span 9; }
.kol-10 { grid-column: span 10; }
.kol-11 { grid-column: span 11; }
.kol-12 { grid-column: span 12; }

@media (max-width: 1023px) {
  .kol-t-1  { grid-column: span 1; }
  .kol-t-2  { grid-column: span 2; }
  .kol-t-3  { grid-column: span 3; }
  .kol-t-4  { grid-column: span 4; }
  .kol-t-5  { grid-column: span 5; }
  .kol-t-6  { grid-column: span 6; }
  .kol-t-7  { grid-column: span 7; }
  .kol-t-8  { grid-column: span 8; }
  .kol-t-9  { grid-column: span 9; }
  .kol-t-10 { grid-column: span 10; }
  .kol-t-11 { grid-column: span 11; }
  .kol-t-12 { grid-column: span 12; }
}

@media (max-width: 639px) {
  /* Mobile domyślnie 1 kolumna (pełna szerokość) — .kol-m-N tylko dla wyjątków. */
  .siatka > * { grid-column: 1 / -1; }

  .kol-m-1  { grid-column: span 1; }
  .kol-m-2  { grid-column: span 2; }
  .kol-m-3  { grid-column: span 3; }
  .kol-m-4  { grid-column: span 4; }
  .kol-m-5  { grid-column: span 5; }
  .kol-m-6  { grid-column: span 6; }
  .kol-m-7  { grid-column: span 7; }
  .kol-m-8  { grid-column: span 8; }
  .kol-m-9  { grid-column: span 9; }
  .kol-m-10 { grid-column: span 10; }
  .kol-m-11 { grid-column: span 11; }
  .kol-m-12 { grid-column: span 12; }
}