/*
  .catalog-top — общая обёртка hero+layout (159:4594). Фон-картинка
  (.catalog-hero__bg, 872px) физически длиннее самой hero-секции и
  продолжается поверх верхней части .catalog-layout, поэтому сплошной
  цвет-подложка (--color-solutions-bg) и отрицательный margin под хедер
  живут здесь, на общей обёртке, а не на .catalog-hero отдельно — иначе
  фон обрывается на границе короткой hero-секции, не успев дофейдить
  (см. catalog-hero.css).
*/
.catalog-top {
  position: relative;
  margin-top: calc(-1 * var(--header-height));
  background: var(--color-solutions-bg);
}

/*
  Layout страницы каталога: фильтр слева + сетка карточек товара справа.
  Без своего фона (прозрачный) — в верхней части сквозь него ещё видна
  фейдящая картинка фона .catalog-top, ниже картинка уже сведена в
  сплошной цвет и разницы не видно (--color-solutions-bg общий).
  position+z-index — чтобы контент гарантированно был поверх фона hero,
  который физически заходит под верх этой секции (см. catalog-hero.css).
*/
.catalog-layout {
  position: relative;
  z-index: 1;
  padding: 0 var(--page-gutter) 90px;
}

.catalog-layout__inner {
  display: grid;
  grid-template-columns: var(--catalog-filter-width) 1fr;
  align-items: start;
  gap: var(--catalog-filter-gap);
  max-width: var(--content-width);
  margin: 0 auto;
}

.catalog-grid {
  display: grid;
  /* minmax(0, 1fr), не голый 1fr: у 1fr-колонок неявный минимум
     minmax(auto,1fr) — самый длинный заголовок в сетке ("КОМПЛЕКСНЫЕ
     АВТОМАТИЗИРОВАННЫЕ ЛИНИИ") раздувал минимум именно своей колонки,
     и та растягивалась шире остальных во всех рядах. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  /* Клик по фильтру одновременно скрывает/показывает много карточек через
     [hidden] (initCatalogFilter, main.js) — резкое изменение высоты сетки
     иногда триггерило встроенную в браузер "scroll anchoring" (эвристику,
     которая пытается удержать в поле зрения контент при сдвиге разметки) —
     страницу дёргало/проматывало без явной причины. overflow-anchor:none
     отключает эту эвристику именно для сетки карточек. */
  overflow-anchor: none;
}

/*
  Мобильная адаптация (600px,
  база 390px). На мобильном хедер — position:fixed (не в потоке, см.
  header.css), поэтому трюк .catalog-top{margin-top:-header-height} под
  прозрачный десктопный хедер здесь не нужен — тот же фикс, что у
  .hero{margin-top:0} на главной (hero.css).

  .catalog-filter и .catalog-grid — плашки 330px (не обычные 370 — так в
  макете), поэтому здесь НЕ задаём им явную ширину: она сама получается
  из 30px-инсета .catalog-layout (390-2*30=330), тот же приём, что уже
  используется для контентных ширин по всему проекту.
*/
@media (max-width: 599.98px) {
  .catalog-top {
    margin-top: 0;
  }

  .catalog-layout {
    padding: 0 min(30px, calc(30 / 390 * 100vw)) min(144px, calc(144 / 390 * 100vw));
  }

  .catalog-layout__inner {
    display: block;
    max-width: none;
  }

  .catalog-filter {
    /* position:static переехал сюда из снесённого @media (max-width:1200px)
       (правки 2026-08-05, п.18, этап 2). Базовое правило в
       catalog-filter.css — position:sticky под ПК-раскладку с колонкой
       фильтра сбоку; на мобильном фильтр стоит НАД сеткой в общем потоке
       (.catalog-layout__inner{display:block}) и, оставшись sticky, залипал
       бы поверх карточек при прокрутке. */
    position: static;
    margin-bottom: min(55px, calc(55 / 390 * 100vw));
  }

  .catalog-grid {
    /* minmax(0, 1fr), не голый 1fr — тот же баг, что уже пойман и
       задокументирован выше для десктопной 3-колоночной сетки: у
       голого 1fr неявный минимум auto, самый длинный нерастягиваемый
       контент (nowrap-бейдж/заголовок) раздувает трек и ломает 330px. */
    grid-template-columns: minmax(0, 1fr);
    gap: min(20px, calc(20 / 390 * 100vw));
    /* Фиксирует сетку (и карточки товара внутри неё) на 390-базе выше
       390px — без этого grid растягивался бы вместе с .catalog-layout__inner
       вплоть до 600px (см. mobile-adaptation-prep → «п.3»). Речь про
       раскладку: визуально выше 390px всё растёт целиком и пропорционально,
       это делает zoom из js/viewport-scale.js, а не эти числа. */
    max-width: min(330px, calc(330 / 390 * 100vw));
    margin-inline: auto;
  }
}