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

.au-catalog {
  margin-top: 72px;
}

/* Фильтры на странице каталога. На главной ряд позиционирован абсолютно внутри
   блока фиксированной высоты; здесь он в потоке над сеткой. Вид пунктов
   наследуется от `.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). */
.au-catalog__grid {
  position: static;
  left: auto;
  right: auto;
  top: auto;
}

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

/* Карточка на главной позиционируется абсолютно внутри себя (фото сверху,
   название на 594, фасовка 648, цена 715) — это воспроизводит макетный ритм при
   фиксированной высоте 764. Здесь ритм сохраняется, но высота считается из
   содержимого: у товаров разной длины названия иначе разъезжается базовая
   линия цены. */
.au-catalog__grid .au-home-catalog__card {
  display: flex;
  flex-direction: column;
  height: auto;
}

.au-catalog__grid .au-home-catalog__photo {
  position: relative;
  height: auto;
  aspect-ratio: 561 / 574;
}

.au-catalog__grid .au-home-catalog__name,
.au-catalog__grid .au-home-catalog__pack,
.au-catalog__grid .au-home-catalog__price {
  position: static;
  left: auto;
  top: auto;
}

/* Зазоры между фото и подписями — те же 594→648→715 от верха карточки, но
   выраженные отступами: фото 574, название начинается на 594 → 20px. */
.au-catalog__grid .au-home-catalog__name {
  margin-top: 10px;
}

.au-catalog__grid .au-home-catalog__price {
  margin-top: 8px;
}

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

  .au-catalog__grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
}

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