/* ==========================================================================
   CATEGORY.CSS — стили страницы категории (список техники)
   --------------------------------------------------------------------------
   Все цвета — через var(--c-*) из sys/color-theme.css.

   Примечание: сетка карточек (.equipment-grid) вынесена в components/cards.css
   и использует свойство auto-fill, поэтому пустые треки сохраняются и 
   карточки не растягиваются при малом количестве.

   В этом файле остались только стили для:
     1. Пустого состояния (.empty-state)
   ========================================================================== */


/* ==========================================================================
   1. ПУСТОЕ СОСТОЯНИЕ (Empty State)
   --------------------------------------------------------------------------
   Показывается, если в категории нет ни одной единицы техники.
   ========================================================================== */
.empty-state {
    text-align: center;                      /* Выравниваем весь контент по центру */
    padding: 60px 20px;                      /* Отступы: 60px сверху/снизу для воздуха, 20px по бокам */
    background: var(--c-bg-muted);           /* Нейтральный серый фон (#F9FAFB) */
    border: 1px solid var(--c-border);       /* Тонкая изумрудная рамка вместо пунктира */
    max-width: 600px;                        /* Ограничиваем ширину, чтобы блок не растягивался на весь экран */
    margin: 0 auto;                          /* Центрируем сам блок по горизонтали */
    display: flex;                           /* Flexbox для выстраивания элементов в колонку */
    flex-direction: column;
    align-items: center;                     /* Центрируем элементы по поперечной оси */
}

/* Иконка в пустом состоянии */
.empty-state__icon {
    width: 48px;                             /* Фиксированный размер иконки */
    height: 48px;
    color: var(--c-accent);                  /* Фирменный изумрудный цвет */
    margin-bottom: 20px;                     /* Отступ до заголовка */
}

/* Заголовок «В этой категории пока нет техники» */
.empty-state__title {
    font-size: 20px;                         /* Крупнее базового текста */
    font-weight: 700;                        /* Жирный (Bold) */
    color: var(--c-heading);                 /* Тёмно-изумрудный цвет заголовков */
    margin-top: 0;                           /* Сброс дефолтного отступа сверху */
    margin-bottom: 12px;                     /* Отступ до описания */
}

/* Описание под заголовком */
.empty-state__desc {
    font-size: 15px;                         /* Базовый читаемый размер */
    color: var(--c-text-muted);              /* Приглушённый серый (вторичный текст) */
    margin-bottom: 24px;                     /* Отступ до кнопок действий */
    line-height: 1.5;                        /* Комфортный межстрочный интервал */
    max-width: 400px;                        /* Ограничиваем ширину текста для лучшей читаемости */
}

/* ==========================================================================
   КОНТЕЙНЕР КНОПОК В ПУСТОМ СОСТОЯНИИ (Адаптивный)
   ========================================================================== */
.empty-state__actions {
    display: flex;                           /* Выстраиваем в ряд */
    flex-wrap: wrap;                         /* Разрешаем перенос, если не влезут */
    justify-content: center;                 /* Центрируем по горизонтали */
    gap: 16px;                               /* ГЛАВНОЕ: отступ между кнопками (16px) */
    width: 100%;
    margin-top: 8px;
}

/* На мобильных экранах (до 560px) ставим кнопки друг под другом */
@media (max-width: 560px) {
    .empty-state__actions {
        flex-direction: column;              /* В колонку */
        gap: 12px;                           /* Чуть меньший отступ для мобилки */
    }
    
    .empty-state__actions .btn-primary,
    .empty-state__actions .btn-outline {
        width: 100%;                         /* Кнопки на всю ширину экрана */
        box-sizing: border-box;
    }
}