/* ==========================================================================
   SERVICES.CSS — Стили страницы «Наши услуги» (индекс услуг)
   --------------------------------------------------------------------------
   Файл отвечает за специфичные элементы страницы услуг.
   Базовые стили карточек, цен и кнопок наследуются из components/cards.css
   и components/buttons.css.

   Все цвета — через var(--c-*) из sys/color-theme.css.
   ========================================================================== */


/* ==========================================================================
   1. СЕТКА КАРТОЧЕК УСЛУГ
   ========================================================================== */
/* Переопределяем ширину карточек специально для услуг (им нужно чуть 
   больше места для текста, чем технике) */
.catalog-section .equipment-grid {
    display: grid;                           /* Grid для ровных колонок */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 300px вместо 280px */
    gap: 24px;                               /* Зазор между карточками */
    margin-top: 24px;                        /* Отступ от заголовка секции */
}


/* ==========================================================================
   2. ОБЕРТКА ДЛЯ ИКОНКИ (Если у услуги нет фото)
   --------------------------------------------------------------------------
   Базовый фон, высота и скругления наследуются из components/cards.css.
   ========================================================================== */
.card-image-gallery {
    display: flex;                           /* Flex для центрирования иконки */
    align-items: center;                     /* По вертикали */
    justify-content: center;                 /* По горизонтали */
}


/* ==========================================================================
   3. СПЕЦИАЛЬНЫЕ ИКОНКИ (Плашка внутри галереи)
   ========================================================================== */
.card-service-icon {
    width: 72px;                             /* Фиксированный размер плашки */
    height: 72px;
    color: var(--c-accent);                  /* Изумрудный цвет иконки */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-card);            /* Белый фон, чтобы выделялось на зеленом */
    border: 1px solid var(--c-border-strong);/* Легкая изумрудная рамка */
    border-radius: 16px;                     /* Скругленные углы (современно) */
    padding: 16px;                           /* Внутренние отступы, чтобы SVG не прилипал */
    box-shadow: var(--shadow-sm);            /* Легкая тень для объема (из темы) */
    transition: transform 0.3s ease;         /* Плавная анимация */
}

/* Эффект при наведении на карточку (иконка чуть увеличивается) */
.equipment-card:hover .card-service-icon {
    transform: scale(1.05);
}

.card-service-icon svg {
    width: 100%;                             /* SVG заполняет контейнер */
    height: 100%;
    stroke-width: 1.5;                       /* Делаем линии чуть тоньше для элегантности */
}


/* ==========================================================================
   4. ТЕКСТОВЫЕ БЛОКИ (Выравнивание высоты)
   --------------------------------------------------------------------------
   У услуг нет списка характеристик (как у техники), поэтому 
   выталкиваем кнопки и цену вниз за счет растягивания описания.
   ========================================================================== */
.card-desc {
    flex-grow: 1;                            /* Занимает всё свободное пространство */
}


/* ==========================================================================
   5. БЛОК КНОПОК (Специфичное поведение)
   --------------------------------------------------------------------------
   Размеры кнопок (min-height, font-size) и flex наследуются из buttons.css.
   ========================================================================== */
.card-buttons {
    margin-top: auto;                        /* Прижимаем кнопки к низу карточки */
}


/* ==========================================================================
   6. АДАПТИВНОСТЬ (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
    .catalog-section .equipment-grid {
        grid-template-columns: 1fr;          /* На телефонах по одной карточке в ряд */
        gap: 16px;                           /* Меньше отступ */
    }
    
    .card-service-icon {
        width: 64px;                         /* Чуть уменьшаем иконку на мобильных */
        height: 64px;
        padding: 12px;                       /* Меньше внутренний отступ */
    }
}