/*
 * Блок services (blocks/services.php) — по макету medvebika-services-v3 (вариант 3):
 * слева крупная голубая карточка главной услуги, справа 4 услуги 2×2 без фона, между ними — тонкие линии крестом.
 * Иконки — растровые, с прозрачным фоном: только пропорциональное масштабирование, без теней и подложек.
 * Вся ячейка услуги кликабельна: ссылка «Подробнее» растянута на ячейку (::after).
 */

.services__title { margin-bottom: 40px; color: var(--c-ink); font-size: 48px; font-weight: 700; line-height: 1.08; letter-spacing: -.04em; }

.services__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 28px; align-items: stretch; }

/* главная услуга: кнопка прижата к низу карточки */
.services__featured {
    display: flex; flex-direction: column; align-items: flex-start; padding: 56px 48px 48px;
    border-radius: 28px; background: linear-gradient(160deg, #eaf2ff 0%, #e4eeff 55%, #edf4ff 100%);
}
.services__featured-ico { width: auto; height: 96px; }
.services__featured-title { margin-top: 44px; color: var(--c-ink); font-size: 44px; font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
.services__featured-text { margin: 28px 0 40px; color: var(--c-muted); font-size: 22px; line-height: 1.5; white-space: pre-line; }
.services__featured-btn { margin-top: auto; min-width: 240px; min-height: 72px; padding-inline: 48px; font-size: 20px; }

/* остальные услуги: сетка 2×2, линии между ячейками */
.services__grid { display: grid; grid-template-columns: 1fr 1fr; }
.service { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0 44px 40px; }
.service:nth-child(odd) { border-right: 1px solid var(--c-line); }
.service:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); }
.service:nth-child(n+3) { padding-top: 36px; padding-bottom: 0; }
.service__ico { width: auto; height: 88px; }
.service__title { margin-top: 22px; color: var(--c-ink); font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; transition: color .15s ease; }
.service__text { margin-top: 14px; color: var(--c-muted); font-size: 20px; line-height: 1.55; white-space: pre-line; }
.service__more { margin-top: 20px; color: var(--c-primary); font-size: 18px; font-weight: 600; }
.service__more::after { content: ""; position: absolute; inset: 0; }                 /* вся ячейка — ссылка */
.service:hover .service__title { color: var(--c-primary); }
.service__more:focus-visible { outline: none; }
.service:has(.service__more:focus-visible) { outline: 3px solid #849fff; outline-offset: -3px; border-radius: 16px; }

@media (max-width: 1200px) {
    .services__featured { padding: 44px 36px 40px; }
    .services__featured-title { font-size: 36px; }
    .services__featured-text { font-size: 19px; }
    .service { padding-inline: 32px; }
    .service__title { font-size: 25px; }
    .service__text { font-size: 17px; white-space: normal; }
}
@media (max-width: 1024px) {
    .services__layout { grid-template-columns: 1fr; }
    .services__featured { padding: 36px 32px; }
    .services__featured-ico { height: 80px; }
    .services__featured-title { margin-top: 28px; }
    .services__featured-text { margin: 16px 0 28px; white-space: normal; }
    .service:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 640px) {
    .services__title { font-size: var(--fs-h2-m); }
    .services__featured { padding: 28px 24px; border-radius: 24px; }
    .services__featured-ico { height: 64px; }
    .services__featured-title { font-size: 24px; }
    .services__featured-text { font-size: 17px; }
    .services__featured-btn { width: 100%; min-height: 58px; font-size: 18px; }
    .services__grid { grid-template-columns: 1fr; }
    .service:nth-child(n) { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--c-line); } /* :nth-child(n) — перебить правила сетки 2×2 выше */
    .service:nth-child(n):last-child { border-bottom: 0; padding-bottom: 0; }
    .service__ico { height: 64px; }
    .service__title { margin-top: 16px; font-size: var(--fs-h3-m); }
    .service__text { margin-top: 10px; font-size: 16px; }
    .service__more { margin-top: 14px; font-size: 16px; }
}