/* Страница каталога: раздел «Продукция», формы выпуска, категории назначения.
   Своего макета в Figma нет — страница не описана. Карточка переиспользуется из
   каталога главной (Figma 1024:1494) целиком: те же размеры фото 561×574,
   тот же внутренний ритм, те же кропы. Отличается только раскладка секции:
   на главной сетка лежит в потоке внутри секции, высоту которой задают она
   сама и общий хвост `--au-tail`; здесь она тоже в потоке, потому что товаров
   произвольное число и за ней идёт пагинация.
   Ритм секции взят у листинга курсов (courses.css): отступ от H1 72px. */

.au-catalog {
  margin-top: var(--au-head-gap);
}

/* Фильтры на странице каталога. На главной ряд позиционирован абсолютно
   (внутри секции переменной высоты, высоту задаёт сетка); здесь он в потоке
   над сеткой. Вид пунктов
   наследуется от `.au-home-catalog__filter` — тот же кегль, та же приглушённая
   неактивная. Ряд переносится: с «Каталогом» и шестью категориями семь пунктов
   при зазоре 72 в 1728 уже не укладываются. */
.au-catalog__filters {
  position: static;
  left: auto;
  top: auto;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin-bottom: 48px;
}

/* Сетка в потоке. Колонки те же, что на главной: 3×560 при зазоре 24 (pc).
   Отдельного правила со сбросом `position: static; left/right/top: auto` здесь
   больше нет: на главной `.au-home-catalog__grid` сама перестала быть
   абсолютной (высоту секции считает она и `--au-tail`), поэтому сбрасывать
   нечего. Абсолютными на главной остались только заголовок, кнопка и ряд
   фильтров — их сбрасывает правило `.au-catalog__filters` выше. */

/* Пустой раздел. Своего макета у этого состояния нет: в Figma каталог всегда с
   товарами. Берётся типографика описания карточки, чтобы строка не выглядела
   инородной.
   §137: волна — Inter Tight Regular 400, как у `.au-home-zayavka__message`.
   Явно объявленный `font-family: 'Inter'` заменён на Inter Tight. */
.au-catalog__empty {
  grid-column: 1 / -1;
  margin: 0;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #686876;
}

/* Карточка сама по себе (фото/название/фасовка/цена — авто-высота, aspect-ratio
   у фото) теперь общее правило `.au-home-catalog__card` в home.css: тот же
   ритм нужен и на главной, где раньше стояла Figma-точная абсолютная сетка на
   резиновой ширине колонки (см. комментарий там же). Здесь остаётся только то,
   что действительно относится к раскладке страницы каталога, а не карточки. */

/* Планшет 768–1023: mb-ветка тянет карточку на всю ширину (716px при фото
   561×574 в макете), что для листинга каталога даёт одну огромную карточку на
   экран. Две колонки — единственная раскладка, при которой карточка остаётся
   близка к макетным 560. Ниже 768 остаётся одна колонка: 2 колонки дали бы
   карточку уже 170px.
   §137: margin-top 48 → 36 — единая mb-шкала внутренних страниц. */
@media (max-width: 1023px) {
  .au-catalog {
    margin-top: var(--au-head-gap);
  }

  .au-catalog__grid {
    grid-template-columns: 1fr;
    row-gap: var(--au-item-gap);
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .au-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
  }
}