/* =============================================================
   MODELS.CSS
   -------------------------------------------------------------
   TODO: базовые стили для блока "models" ещё не написаны.
   Написать при наполнении блока "Модели":
   - .models-grid / .model-card / .model-image / .model-title / .model-price
   ============================================================= */

   /* =============================================================
   MODELS.CSS
   Блок "Модели": карточки типовых проектов (домов).
   -------------------------------------------------------------
   Структура (предполагаемая):
     .models-grid
       .model-card
         .model-image
         .model-title
         .model-price
   ============================================================= */


/* -------------------------------------------------------------
   СЕТКА МОДЕЛЕЙ
   ------------------------------------------------------------- */
.models-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(260px, 1fr));
    gap                   : 25px;
    margin                : 30px 0;
}


/* -------------------------------------------------------------
   КАРТОЧКА МОДЕЛИ
   ------------------------------------------------------------- */
.model-card {
    background    : #fff;
    border        : 1px solid #eee;
    border-radius : 12px;
    overflow      : hidden;
    box-shadow    : 0 2px 8px rgba(0, 0, 0, 0.06);
    transition    : transform 0.25s ease, box-shadow 0.25s ease;
}

.model-card:hover {
    transform  : translateY(-5px);
    box-shadow : 0 8px 20px rgba(0, 0, 0, 0.12);
}


/* -------------------------------------------------------------
   КАРТИНКА МОДЕЛИ
   ------------------------------------------------------------- */
.model-image {
    height              : 200px;
    background-size     : cover;
    background-position : center;
    background-color    : #f0f0f0;
    display             : flex;
    align-items         : center;
    justify-content     : center;
    color               : #999;
    font-size           : 14px;
}


/* -------------------------------------------------------------
   НАЗВАНИЕ МОДЕЛИ
   ------------------------------------------------------------- */
.model-title {
    font-size   : 18px;
    font-weight : bold;
    margin      : 15px 20px 8px;
    color       : #222;
}


/* -------------------------------------------------------------
   ЦЕНА
   Синий акцент — перекликается с кнопкой "Подробнее" в услугах.
   ------------------------------------------------------------- */
.model-price {
    font-size   : 20px;
    font-weight : bold;
    color       : #0984e3;
    margin      : 0 20px 20px;
}