/* =============================================================
   SERVICES.CSS
   Блок "Услуги": сетка карточек, картинка, заголовок, кнопка.
   ============================================================= */


/* -------------------------------------------------------------
   СЕТКА КАРТОЧЕК УСЛУГ
   auto-fit + minmax: на десктопе 3-4 колонки, на мобильных — 1.
   ------------------------------------------------------------- */
.services-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(220px, 1fr));
    gap                   : 20px;
}


/* -------------------------------------------------------------
   КАРТОЧКА ОДНОЙ УСЛУГИ
   ------------------------------------------------------------- */
.service-card {
    background    : #f9f9f9;
    padding       : 20px;
    border-radius : 8px;
    text-align    : center;
}


/* -------------------------------------------------------------
   КАРТИНКА В КАРТОЧКЕ УСЛУГИ
   Используется как background-image, поэтому фиксированная высота.
   .service-image с текстом-заглушкой "Нет фото" центрирует текст.
   ------------------------------------------------------------- */
.service-image {
    height              : 160px;
    background-size     : cover;
    background-position : center;
    border-radius       : 6px;
    margin-bottom       : 15px;
    display             : flex;
    align-items         : center;
    justify-content     : center;
    color               : #999;
}


/* -------------------------------------------------------------
   ЗАГОЛОВОК ВНУТРИ КАРТОЧКИ
   ------------------------------------------------------------- */
.service-card h3 {
    margin-bottom : 8px;
}


/* -------------------------------------------------------------
   КНОПКА "Подробнее" В КАРТОЧКЕ
   ------------------------------------------------------------- */
.service-button {
    display         : inline-block;
    margin-top      : 10px;
    padding         : 8px 16px;
    background      : #0984e3;
    color           : #fff;
    border-radius   : 20px;
    text-decoration : none;
}