/* ==========================================================================
   Главная — направления (site/layouts/110-services.php): плитки-фото во всю ширину, 4 в ряд. Только var(--es-*).
   Фото без вуали — затемнён только низ под подписью; при наведении проявляются описание и «Подробнее».
   ========================================================================== */
body.main-page .home-services {padding: var(--es-section-py) 0 0}
body.main-page .home-services__grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: #fff}
body.main-page .home-services__tile {position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 34vw, 520px); overflow: hidden; background: var(--es-dark); color: #fff}
body.main-page .home-services__tile picture {position: absolute; inset: 0}
body.main-page .home-services__img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease}
body.main-page .home-services__tile::after {content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 12, 18, .82) 0%, rgba(10, 12, 18, .25) 42%, rgba(10, 12, 18, 0) 62%); transition: background .4s}
body.main-page .home-services__tile:hover {color: #fff}
body.main-page .home-services__tile:hover .home-services__img {transform: scale(1.05)}
body.main-page .home-services__tile:hover::after {background: linear-gradient(0deg, rgba(10, 12, 18, .9) 0%, rgba(10, 12, 18, .5) 60%, rgba(10, 12, 18, .15) 100%)}
body.main-page .home-services__body {position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 28px 28px 30px}
body.main-page .home-services__name {font-family: var(--es-font-display); font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; line-height: 1.2}
body.main-page .home-services__text, body.main-page .home-services__more {max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease}
body.main-page .home-services__text {color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.5}
body.main-page .home-services__more {font-size: 14px; font-weight: 700}
body.main-page .home-services__more::after {content: " \2192"}
body.main-page .home-services__tile:hover .home-services__text,
body.main-page .home-services__tile:focus-visible .home-services__text {max-height: 120px; opacity: 1}
body.main-page .home-services__tile:hover .home-services__more,
body.main-page .home-services__tile:focus-visible .home-services__more {max-height: 30px; opacity: 1}

@media (max-width: 991px) {
    body.main-page .home-services__grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
    body.main-page .home-services__tile {min-height: 300px}
}
@media (hover: none) {
    body.main-page .home-services__text {max-height: none; opacity: 1}
}
@media (max-width: 575px) {
    body.main-page .home-services__grid {grid-template-columns: 1fr}
    body.main-page .home-services__tile {min-height: 260px}
    body.main-page .home-services__body {padding: 22px 20px}
}