/* ==========================================================================
   Главная — кого эвакуируем (site/layouts/110-services.php): белые карточки с фото и ценой,
   ниже — «Помощь на дороге». Только var(--es-*).
   ========================================================================== */
body.main-page .home-services__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px}
body.main-page .home-services__card {position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0 0 24px; border: 1px solid var(--es-border); border-radius: var(--es-radius); background: #fff; transition: border-color .25s, box-shadow .25s}
body.main-page .home-services__card:hover {border-color: var(--es-primary); box-shadow: var(--es-shadow-hover)}
body.main-page .home-services__media {display: block; aspect-ratio: 16 / 10; overflow: hidden; margin: 0 0 18px; background: var(--es-surface-alt)}
body.main-page .home-services__media picture, body.main-page .home-services__img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease}
body.main-page .home-services__card:hover .home-services__img {transform: scale(1.04)}
body.main-page .home-services__name, body.main-page .home-services__price, body.main-page .home-services__actions {padding-left: 24px; padding-right: 24px}
body.main-page .home-services__name {margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25}
body.main-page .home-services__name a {color: var(--es-heading)}
body.main-page .home-services__name a:hover {color: var(--es-primary)}
body.main-page .home-services__price {margin: 8px 0 0; color: var(--es-primary); font-size: 26px; font-weight: 800; line-height: 1.2}
body.main-page .home-services__actions {display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 18px}
body.main-page .home-services__more {display: inline-flex; align-items: center; gap: 8px; color: var(--es-heading); font-weight: 700}
body.main-page .home-services__more::after {content: "\2192"; transition: transform .2s}
body.main-page .home-services__more:hover {color: var(--es-primary)}
body.main-page .home-services__more:hover::after {transform: translateX(4px)}

/* Помощь на дороге */
body.main-page .home-services__subtitle {margin: clamp(36px, 4vw, 52px) 0 18px; color: var(--es-heading); font-size: 24px; font-weight: 700; line-height: 1.25}
body.main-page .home-services__help {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px}
body.main-page .home-services__help-card {display: flex; align-items: center; gap: 16px; min-width: 0; padding: 18px 20px; border-radius: var(--es-radius); background: var(--es-dark); color: #fff; transition: background .25s}
body.main-page .home-services__help-card:hover {background: var(--es-primary); color: #fff}
body.main-page .home-services__help-icon {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; background: rgba(60, 192, 20, .16); color: var(--es-brand-bright); font-size: 24px; transition: background .25s, color .25s}
body.main-page .home-services__help-card:hover .home-services__help-icon {background: rgba(255, 255, 255, .18); color: #fff}
body.main-page .home-services__help-body {display: flex; flex-direction: column; gap: 2px; min-width: 0}
body.main-page .home-services__help-name {font-size: 16px; font-weight: 700; line-height: 1.3}
body.main-page .home-services__help-price {color: rgba(255, 255, 255, .72); font-size: 14px}

@media (max-width: 1199px) {
    body.main-page .home-services__help {grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 991px) {
    body.main-page .home-services__grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px}
}
@media (max-width: 575px) {
    body.main-page .home-services__grid {grid-template-columns: 1fr; gap: 12px}
    body.main-page .home-services__card {display: grid; grid-template-columns: 112px 1fr; grid-template-areas: "media name" "media price" "actions actions"; column-gap: 14px; padding: 12px}
    body.main-page .home-services__media {grid-area: media; aspect-ratio: 1 / 1; margin: 0; border-radius: 8px; align-self: center}
    body.main-page .home-services__name, body.main-page .home-services__price, body.main-page .home-services__actions {padding-left: 0; padding-right: 0}
    body.main-page .home-services__name {grid-area: name; align-self: end; font-size: 18px}
    body.main-page .home-services__price {grid-area: price; margin-top: 2px; font-size: 20px}
    body.main-page .home-services__actions {grid-area: actions; padding-top: 12px}
    body.main-page .home-services__help {grid-template-columns: 1fr; gap: 10px}
}