/* ==========================================================================
   Страница «Каталог — подраздел»: раскладка списка товаров
   Слева фильтр (catalog-filter.css), справа сетка карточек (product-card.css).

   Figma: 137:2302 — десктоп 1320 × 1880 (от y = 286)
          275:6295 — мобильный 343 × 1296 (от y = 363)

   WP: template-parts/blocks/catalog-category.php
   ========================================================================== */

.catalog-cat {
    /* сверху 24px — отбивка от шапки страницы, снизу 56px — до промо-полосы */
    padding: 24px 0 56px;
}

.catalog-cat__inner {
    display: grid;
    /* 280 + 56 + 984 = 1320, ширина контейнера макета */
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.catalog-cat__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Строка над карточками: количество и сортировка
   -------------------------------------------------------------------------- */

.catalog-cat__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* --- Сортировка --- */

.catalog-sort {
    position: relative;
    flex-shrink: 0;
}

.catalog-sort__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 200px;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    background-color: var(--c-grey-200);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    color: var(--c-grey-800);
    transition: background-color var(--transition);
}

.catalog-sort__btn:hover {
    background-color: var(--c-grey-300);
}

.catalog-sort__chevron {
    color: var(--c-grey-500);
}

/* Раскрытого списка в макете нет — собран по правилам самой страницы:
   та же заливка, радиус и тень, что у карточки «Помочь с подбором?» */
.catalog-sort__list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 100%;
    padding: 4px 0;
    border-radius: var(--radius-sm);
    background-color: #ffffff;
    box-shadow: 0 12px 40px rgba(25, 25, 25, 0.12);
}

.catalog-sort__list[hidden] {
    display: none;
}

.catalog-sort__option {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    white-space: nowrap;
    color: var(--c-grey-800);
    transition: background-color var(--transition);
}

.catalog-sort__option:hover {
    background-color: var(--c-grey-200);
}

.catalog-sort__option.is-current {
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Сетка карточек
   -------------------------------------------------------------------------- */

.catalog-cat__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 16px;
}

.catalog-cat__more {
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Планшет: боковая колонка ещё стоит, но карточек в ряду две
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .catalog-cat__inner {
        gap: 32px;
    }

    .catalog-cat__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ниже 1024px колонка фильтра прячется, карточек снова три */
@media (max-width: 1023px) {
    .catalog-cat__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .catalog-cat__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия — 343 × 1296
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .catalog-cat__toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .catalog-sort {
        flex-shrink: 1;
        min-width: 0;
    }

    .catalog-sort__btn {
        gap: 16px;
        width: auto;
        padding: 0 12px;
    }

    .catalog-sort__list {
        right: auto;
        left: 0;
    }

    /* два ряда по 168px с зазором 7px — точно как в макете */
    .catalog-cat__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 7px;
    }

    .catalog-cat__more {
        margin-top: 12px;
    }
}

/* ==========================================================================
   «Материалы от А до Я» — простой список товаров без картинок (архив
   /materials/). По правке заказчика: не карточки, а колонки ссылок,
   отсортированных по алфавиту. Колонки читаются сверху вниз (CSS columns).
   ========================================================================== */

.materials-az {
    columns: 3;
    column-gap: 40px;
    margin-top: 24px;
}

.materials-az__item {
    /* чтобы длинное название не разрывалось между колонками */
    break-inside: avoid;
}

.materials-az__link {
    display: inline-block;
    width: 100%;
    padding: 6px 0;
    font-size: 16px;
    line-height: 1.3;
    color: var(--c-grey-800);
    text-decoration: none;
    transition: color var(--transition);
}

.materials-az__link:hover,
.materials-az__link:focus-visible {
    color: var(--c-red-500);
}

@media (max-width: 1023px) {
    .materials-az {
        columns: 2;
        column-gap: 24px;
    }
}

@media (max-width: 767px) {
    .materials-az {
        columns: 1;
    }

    .materials-az__link {
        font-size: 14px;
    }
}

/* Пустая выдача каталога: товаров по выбранным параметрам нет. Значения
   фильтра при этом остаются видимыми (ТЗ: не скрывать, показывать 0). */
.catalog-cat__empty {
    padding: 32px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-500);
}