/* ==========================================================================
   [П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;
}

/* Карточка раздела.
   Было: высокая картинка (450x420) с белым блоком поверх неё, наложенным
   абсолютным позиционированием. Длинные названия из блока вываливались,
   карточки разъезжались по высоте. Стало: компактная карточка, где картинка
   и подпись идут друг за другом, вся карточка — одна ссылка. */
.catalog-grid .catalog-item {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;
    min-width: 0;              /* иначе длинные слова распирают колонку grid */
    margin: 0;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.catalog-grid .catalog-item:hover {
    border-color: #032348;
    box-shadow: 0 10px 24px rgba(3, 35, 72, .14);
    transform: translateY(-3px);
}

.catalog-grid .catalog-item__image {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;        /* было 3/4 — карточка стала заметно компактнее */
    height: auto;               /* перебиваем height:345px из style.css */
    overflow: hidden;
    background: #ebeef1;
}

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

.catalog-grid .catalog-item:hover .catalog-item__image img {
    transform: scale(1.06);
}

.catalog-grid .catalog-item__details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 14px 16px 16px;
    border: 0;
    width: auto;
    height: auto;
    background: transparent;
}

/* Заголовок занимает фиксированную высоту в две строки, поэтому карточки
   выравниваются между собой независимо от длины названия. */
.catalog-grid .catalog-item__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
    color: #032348;
    transition: color .25s ease;
}

.catalog-grid .catalog-item:hover .catalog-item__title {
    color: #fe0000;
}

/* Красная черта под названием — фирменный акцент, как в остальных блоках.
   Вынесена отдельным элементом: внутри -webkit-box с line-clamp она
   считалась строкой и обрывала название многоточием. */
.catalog-grid .catalog-item__line {
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 8px;
    background: #fe0000;
    transition: width .25s ease;
}

.catalog-grid .catalog-item:hover .catalog-item__line {
    width: 56px;
}

.catalog-grid .catalog-item__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: #858d96;
}

@media (max-width: 1439px) {
    .catalog-grid {
        gap: 14px;
    }
    .catalog-grid .catalog-item__details {
        padding: 12px 13px 14px;
    }
    .catalog-grid .catalog-item__title {
        font-size: 15px;
    }
}

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

@media (max-width: 575px) {
    .catalog-grid {
        gap: 10px;
    }
    .catalog-grid .catalog-item__title {
        font-size: 14px;
    }
    .catalog-grid .catalog-item__desc {
        display: none;    /* на узких экранах описание только мешает */
    }
}

/* --- Страница /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%;
}


/* --- Телефоны: карточки каталога в одну колонку -------------------------
   На узком экране две карточки в ряд оставляли под название около 110 px:
   «Песчано-щебеночная смесь» ломалось на три строки, а картинка сжималась
   до 78 px. В одну колонку карточка получает всю ширину и читается
   как строка списка: картинка слева, название справа. */
@media (max-width: 575px) {
    .services.services--index .col--lg-2 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Картинка и название — по центру друг относительно друга. */
    .services.services--index .__item > div > .row {
        align-items: center;
    }

    /* Выравнивание высоты заголовков нужно только когда карточки стоят
       в ряд. В одну колонку оно оставляет пустое место под названием. */
    .services.services--index .__item .__title {
        min-height: 0;
        margin-bottom: 0;
        font-size: 17px;
        line-height: 1.3;
    }

    /* Картинку НЕ возвращаем в поток: тема позиционирует её абсолютно,
       и без этого она исчезает совсем (проверено). Вместо этого задаём
       блоку картинки высоту под круг — иначе круг обрезался снизу краем
       блока, и на экране висели половинки. */
    .services.services--index .__item .__image {
        position: relative;
        min-height: 104px;
        padding-top: 0 !important;
        margin-bottom: 0;
    }
    .services.services--index .__item .__image img {
        width: 96px !important;
        height: 96px !important;
        max-width: 96px !important;
        top: 4px !important;
    }

    .services.services--index .__item {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}