/* ==========================================================================
   Главная — услуги (site/layouts/110-services.php). Только var(--es-*).
   ========================================================================== */
body.main-page .home-services__grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px}
@media (max-width: 1200px) {body.main-page .home-services__grid {grid-template-columns: repeat(3, minmax(0, 1fr))}}
body.main-page .home-services__card {display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--es-border); border-radius: var(--es-radius); background: #fff; transition: box-shadow .25s, transform .25s, border-color .25s}
body.main-page .home-services__card:hover {border-color: transparent; box-shadow: var(--es-shadow-hover); transform: translateY(-4px)}
body.main-page .home-services__media {position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--es-surface-alt)}
body.main-page .home-services__media picture,
body.main-page .home-services__media img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease}
body.main-page .home-services__card:hover .home-services__media img {transform: scale(1.05)}
body.main-page .home-services__media-empty {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--es-muted); font-size: 42px}
body.main-page .home-services__price {position: absolute; left: 16px; bottom: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--es-text); font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12)}
body.main-page .home-services__price strong {color: var(--es-heading); font-size: 16px}
body.main-page .home-services__body {display: flex; flex: 1; flex-direction: column; padding: 22px 20px}
body.main-page .home-services__name {margin: 0; color: var(--es-heading); font-size: 19px; font-weight: 700; line-height: 1.3}
body.main-page .home-services__name a {color: inherit; transition: color var(--general-transition)}
body.main-page .home-services__name a:hover {color: var(--es-accent-text)}
body.main-page .home-services__text {margin: 10px 0 0; color: var(--es-text); font-size: 15px; line-height: 1.6}
body.main-page .home-services__actions {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px}

body.main-page .home-services__card--cta {justify-content: center; align-items: flex-start; padding: 36px 32px; border: 0; background: var(--es-dark); background-image: radial-gradient(circle at 100% 0%, rgba(255, 107, 19, .35) 0, rgba(255, 107, 19, 0) 60%); color: #fff}
body.main-page .home-services__card--cta:hover {transform: translateY(-4px)}
body.main-page .home-services__card--cta .home-services__name {color: #fff; font-size: 24px}
body.main-page .home-services__card--cta .home-services__text {margin-bottom: 26px; color: rgba(255, 255, 255, .82)}
body.main-page .home-services__cta-icon {display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; background: var(--es-primary); font-size: 26px}

@media (max-width: 992px) {
    body.main-page .home-services__grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px}
}
@media (max-width: 600px) {
    body.main-page .home-services__grid {grid-template-columns: 1fr}
    body.main-page .home-services__body {padding: 20px}
    body.main-page .home-services__card--cta {padding: 28px 22px}
}