/* ============================================
   LAYOUT
   Контейнер, секции, базовые grid-классы.
   Подход — mobile-first.
   ============================================ */

/* ---------- Container ---------- */
.container {
  width: min(100% - (var(--container-padding) * 2), var(--container-width));
  margin-inline: auto;
}

/* ---------- Section ---------- */
.section {
  padding-block: var(--section-padding-sm);
}

.section--sm {
  padding-block: var(--section-padding-sm);
}

.section--lg {
  padding-block: var(--section-padding-sm);
}

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

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-padding);
  }
  
  .section--sm {
    padding-block: var(--section-padding-sm);
  }
  
  .section--lg {
    padding-block: var(--section-padding-lg);
  }
}

/* ---------- Section header (общий блок «заголовок + ссылка справа») ---------- */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .section-header {
    margin-bottom: 40px;
  }
}

/* ---------- Grid ---------- */
.grid {
  display: grid;
  gap: 24px;
}

/* На мобильном всё в одну колонку — mobile-first */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}