/* ═══════════════════════════════════════════════════════════════════
   Dietlo — LAYOUT PRIMITIVES: shell strony, sekcja, siatka.

   Kolejnosc warstw (mu-plugins/dietlo/shared/assets.php):
   tokens -> LAYOUT -> components -> pliki powierzchni.

   Wlasnosc: bazowe klasy .dietlo-wrap / .dietlo-section / .dietlo-grid
   definiuje wylacznie ten plik. Pliki powierzchni dokladaja tylko warianty
   w swoim zasiegu (np. .dietlo-section--hero w base-pages.css) i nigdy nie
   redefiniuja klasy bazowej.

   Wyodrebnione 1:1 z base-pages.css (2026-07-28) — wartosci bez zmian.
   ═══════════════════════════════════════════════════════════════════ */

.dietlo-section {
  padding: 64px 32px;
}

/* Rytm V2: wiecej oddechu; hero i pasek zaufania wylaczone (maja wlasny).
   Specyficznosc (0,3,0) — wygrywa z modyfikatorami sekcji niezaleznie od
   kolejnosci, tak samo jak przed wyodrebnieniem. */
.dietlo-section:not(.dietlo-section--hero):not(.dietlo-section--proof) {
  padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 32px);
}

.dietlo-section--soft {
  background: var(--dietlo-soft);
}

.dietlo-wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
  max-width: 100%;
}

.dietlo-grid {
  display: grid;
  gap: 24px;
}

.dietlo-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dietlo-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Zapytania max-width przeniesione verbatim z base-pages.css — to legacy
   do inwersji w migracji mobile-first, nie nowe zapytania (rules.md). */
@media (max-width: 900px) {
  .dietlo-grid--3,
  .dietlo-grid--4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .dietlo-section {
    padding: 52px 0;
  }

  .dietlo-wrap {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }
}