/* ==========================================================================
   [П7] Каталог продукции — 5 карточек разделов в один ряд.
   Общий файл для обоих шаблонов сайта, чтобы вёрстка блока не дублировалась:
     - главная      → /local/templates/new_design/  (шаблон new_design)
     - /catalog/    → /bitrix/templates/innet_focus_s1/ (шаблон innet_focus_s1)
   Подключается из header.php обоих шаблонов.

   Брейкпоинты по ТЗ:
     >= 1440   — 5 в ряд
     1024–1439 — 5 в ряд, карточки уже
     <= 1023   — 2 в ряд
   ========================================================================== */

/* --- Главная страница -------------------------------------------------- */

/* Раньше блок был каруселью Swiper (slidesPerView 4.5): пятая карточка
   всегда оставалась за краем экрана. Теперь это обычная сетка. */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: stretch;
}

.catalog-grid .catalog-item {
    position: relative;
    width: auto;
    margin: 0;
    min-width: 0; /* иначе длинные названия распирают колонку grid */
}

.catalog-grid .catalog-item__image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.catalog-grid .catalog-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* пропорции изображений не искажаются */
}

/* Длинные названия («Вскрышные породы, скальный грунт», «Песчано-щебеночная
   смесь») не должны менять высоту карточек — фиксируем блок заголовка. */
.catalog-grid .catalog-item__details {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.catalog-grid .catalog-item__details .heading-6 {
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 1439px) {
    .catalog-grid {
        gap: 12px;
    }
    .catalog-grid .catalog-item__details {
        min-height: 88px;
    }
}

@media (max-width: 1023px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 575px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .catalog-grid .catalog-item__details {
        min-height: 78px;
    }
}

/* --- Страница /catalog/ ------------------------------------------------- */

/* В шаблоне sections_3 колонки размечены классами сетки innet.
   Ширина 20% даёт 5 карточек в ряд вместо прежних четырёх (col--lg-3). */
@media (min-width: 1024px) {
    .services.services--index .col--lg-2 {
        width: 20% !important;
    }
}

/* Колонки innet заданы через flex (flex: 0 0 100% на мобильных),
   поэтому одной width недостаточно — переопределяем и flex-basis.
   ТЗ требует 2 в ряд на всём диапазоне <= 1023px. */
@media (max-width: 1023px) {
    .services.services--index .col--lg-2 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Выравнивание высоты карточек и заголовков — та же задача, что и на главной. */
.services.services--index .__item .__title {
    min-height: 2.8em;
    overflow-wrap: anywhere;
}

.services.services--index .__item .__image img {
    object-fit: contain;
}

/* Карточки в одном ряду тянутся на одинаковую высоту — длинные названия
   («Вскрышные породы, скальный грунт») не должны делать соседей ниже. */
.services.services--index > .__inner > .row {
    align-items: stretch;
}

.services.services--index > .__inner > .row > .col > .__item {
    height: 100%;
}