/* Карточки моделей техники — страницы разделов каталога
   (harvesters, forwarders, harvester-heads, excavators).
   Заменяет list-models.css. Палитра и кнопки — как в остальном дизайне сайта. */

.models {
    padding: 70px 0 90px;
}

.models-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

/* раздел с единственной моделью: карточка не растягивается на всю ширину,
   а выравнивается по центру и становится чуть крупнее */
@media (min-width: 768px) {
    .models-grid:has(> .model-card:only-child) {
        grid-template-columns: minmax(0, 560px);
        justify-content: center;
    }
}

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

.model-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    box-shadow: 0 6px 24px rgba(20, 10, 154, .06);
}

.model-card:hover {
    transform: translateY(-6px);
    border-color: #d5d9e8;
    box-shadow: 0 18px 40px rgba(20, 10, 154, .14);
}

/* фокус с клавиатуры подсвечивает всю карточку */
.model-card:focus-within {
    border-color: #140a9a;
    box-shadow: 0 0 0 3px rgba(20, 10, 154, .18);
}

/* ---------- изображение ---------- */

/* фото техники сняты на белом фоне — поле карточки тоже белое,
   поля снимка визуально сливаются с карточкой */
.model-card__media {
    display: block;
    aspect-ratio: 3 / 1;
    background: #fff;
    border-bottom: 1px solid #eef0f5;
    overflow: hidden;
}

.model-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* лёгкое приближение срезает пустые поля снимка, техника читается крупнее */
    transform: scale(1.12);
    transition: transform .45s ease;
}

.model-card:hover .model-card__media img {
    transform: scale(1.2);
}

/* ---------- содержимое ---------- */

.model-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 26px 26px;
}

.model-card__title {
    margin: 0 0 12px;
    font-size: clamp(19px, 1.4vw, 22px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .2px;
    color: #1e2436;
}

.model-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease;
}

.model-card__title a:hover {
    color: #140a9a;
    text-decoration: none;
}

/* клик по любому месту карточки ведёт на страницу модели */
.model-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.model-card__title a:focus-visible {
    outline: none;
}

.model-card__text {
    margin: 0 0 18px;
    /* 4 строки максимум и ровно столько же места — характеристики
       соседних карточек оказываются на одной линии */
    min-height: 6.6em;
    font-size: 15px;
    line-height: 1.65;
    color: #6c7280;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- характеристики ---------- */

.model-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.model-card__specs li {
    padding: 7px 14px;
    border-radius: 999px;
    background: #f2f4fb;
    color: #2b3350;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.model-card__note {
    margin: 0 0 20px;
    padding-top: 14px;
    border-top: 1px solid #eef0f5;
    font-size: 13px;
    line-height: 1.55;
    color: #8b909c;
}

/* ---------- кнопка ---------- */

.model-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: auto;
    padding: 12px 26px;
    border-radius: 30px;
    background-color: #140a9a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.model-card__cta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .3s ease;
}

.model-card:hover .model-card__cta {
    background-color: #0d0670;
    box-shadow: 0 8px 18px rgba(20, 10, 154, .28);
}

.model-card:hover .model-card__cta svg {
    transform: translateX(4px);
}

/* ---------- мобильные ---------- */

@media (max-width: 767px) {
    .models {
        padding: 40px 0 55px;
    }

    .models-grid {
        gap: 22px;
        grid-template-columns: 1fr;
    }

    .model-card__media {
        aspect-ratio: 2.6 / 1;
    }

    .model-card__body {
        padding: 20px 20px 22px;
    }

    .model-card__text {
        font-size: 14.5px;
        min-height: 0;
        -webkit-line-clamp: 5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .model-card,
    .model-card__media img,
    .model-card__cta,
    .model-card__cta svg {
        transition: none;
    }

    .model-card:hover {
        transform: none;
    }

    .model-card:hover .model-card__media img {
        transform: none;
    }
}