/* Раздел «Услуги» (/services/) – надстройка над vts-home.css: те же токены --vh-* и паттерны .vh-. */

.vh-btn--light { background: #fff; border-color: #fff; color: var(--vh-navy) !important; }
.vh-btn--light:hover { background: #e7ecfa; border-color: #e7ecfa; }

/* ===== Первый экран: хлебные крошки + тёмная плашка с H1 ===== */
.vh.vh-svc-hero { margin-top: 0; padding-top: 16px; }
.vh-svc-hero__crumbs { margin-bottom: 14px; }
.vh-svc-hero__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: 40px 44px; border-radius: var(--vh-radius); background: linear-gradient(135deg, #15224a 0%, #1f2f62 100%); color: #fff; }
.vh-svc-hero__main { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px; }
.vh-svc-hero__kicker { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.vh .vh-svc-hero__title { margin: 0; font-size: clamp(22px, 2.3vw, 38px); font-weight: 700; line-height: 1.2; color: #fff; }
.vh-svc-hero__sub { margin: 0; font-size: 15px; line-height: 1.55; opacity: .85; }
.vh-svc-hero__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.vh ul.vh-svc-hero__stats { display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 240px; }
.vh ul.vh-svc-hero__stats > li { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px !important; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06); }
.vh-svc-hero__stats b { font-size: 22px; line-height: 1.15; color: #fff; }
.vh-svc-hero__stats span { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.75); }

/* ===== Карточки услуг ===== */
.vh ul.vh-svc-list__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vh-gap); }
.vh ul.vh-svc-list__grid > li { display: flex; }
.vh-svc-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); width: 100%; overflow: hidden; border: 1px solid var(--vh-line); border-radius: var(--vh-radius); background: #fff; color: var(--vh-text) !important; transition: box-shadow .2s, border-color .2s; }
.vh-svc-card:hover { border-color: transparent; box-shadow: 0 10px 30px rgba(16,24,40,.1); }
.vh-svc-card__media { position: relative; overflow: hidden; background: var(--vh-bg); }
.vh-svc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vh-svc-card:hover .vh-svc-card__media img { transform: scale(1.04); }
.vh-svc-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 26px; }
.vh .vh-svc-card__title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--vh-text); }
.vh-svc-card__text { font-size: 14px; line-height: 1.5; color: var(--vh-muted); }
.vh ul.vh-svc-card__points { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px !important; }
.vh ul.vh-svc-card__points > li { position: relative; padding-left: 28px !important; font-size: 14px; line-height: 1.4; color: var(--vh-text); }
.vh ul.vh-svc-card__points > li::before { display: block !important; content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 20px !important; height: 20px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: #eef1f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.5 2.5L14 7.5' fill='none' stroke='%231f2f62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat !important; }
.vh-svc-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--vh-navy); }

/* ===== Текст о разделе (SEO) ===== */
.vh-svc-about__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; padding: 32px; border-radius: var(--vh-radius); background: var(--vh-bg); }
.vh-svc-about__text { font-size: 15px; line-height: 1.6; color: var(--vh-muted); }
.vh-svc-about__text p { margin: 0 0 12px; }
.vh-svc-about__text p:last-child { margin-bottom: 0; }

/* ===== Полезные статьи ===== */
.vh ul.vh-svc-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vh-gap); }
.vh ul.vh-svc-blog__grid > li { display: flex; }
.vh-svc-post { display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid var(--vh-line); border-radius: var(--vh-radius); background: #fff; color: var(--vh-text) !important; transition: box-shadow .2s, border-color .2s; }
.vh-svc-post:hover { border-color: transparent; box-shadow: 0 10px 30px rgba(16,24,40,.1); }
/* Картинки статей разных пропорций и размеров – вписываем целиком на белом, как товары на главной */
.vh-svc-post__media { position: relative; display: block; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--vh-line); background: #fff; }
.vh-svc-post__media img { position: absolute; left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
.vh-svc-post__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.vh-svc-post__date { font-size: 12px; color: var(--vh-muted); }
.vh-svc-post__title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.vh-svc-post__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--vh-navy); }

/* ===================== Детальная страница услуги ===================== */

/* Первый экран: тёмная плашка + фото своего объекта справа (до края карточки) */
.vh-svc-hero__card--photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.vh-svc-hero__card--photo .vh-svc-hero__main { justify-content: center; padding: 44px; max-width: none; }
.vh-svc-hero__photo { position: relative; margin: 0; min-height: 340px; }
.vh-svc-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Что входит в услугу – карточки с иконками в кругах, как «Решения» на главной */
.vh ul.vh-svc-inc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vh-gap); }
.vh ul.vh-svc-inc__grid > li.vh-svc-inc__item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px !important; border: 1px solid var(--vh-line); border-radius: var(--vh-radius); background: #fff; }
.vh-svc-inc__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%; background: var(--vh-navy-soft); color: var(--vh-navy); }
.vh-svc-inc__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--vh-text); }
.vh-svc-inc__text { font-size: 14px; line-height: 1.5; color: var(--vh-muted); }

/* Этапы на детальной – полный текст, а не обрезанный как на главной */
.vh-svc-hero--detail ~ .vh-steps .vh-step__text { font-size: 14px; }

/* Технологический проект: текст + карточка с примерами документов */
.vh-svc-proj__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.vh-svc-proj__text .vh-head__title { margin-bottom: 16px; }
.vh-svc-proj__text p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--vh-muted); }
.vh .vh-svc-proj__text p.vh-svc-proj__norms-title { margin: 20px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vh-text); }
.vh ul.vh-svc-proj__norms { display: flex; flex-wrap: wrap; gap: 8px; }
.vh ul.vh-svc-proj__norms > li { padding: 8px 14px !important; border-radius: 8px; background: var(--vh-navy-soft); color: var(--vh-navy); font-size: 14px; font-weight: 600; }
.vh-svc-proj__card { padding: 26px; border-radius: var(--vh-radius); background: var(--vh-bg); }
.vh .vh-svc-proj__card-title { margin: 0 0 16px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--vh-text); }
.vh ul.vh-svc-proj__docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vh ul.vh-svc-proj__docs > li { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 14px !important; border-radius: 10px; background: #fff; }
.vh-svc-proj__docs img { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto; border: 1px solid var(--vh-line); border-radius: 6px; }
.vh-svc-proj__doc-img { display: block; overflow: hidden; border: 1px solid var(--vh-line); border-radius: 6px; background: #fff; }
.vh-svc-proj__doc-img svg { display: block; width: 100%; height: auto; }
.vh-svc-proj__docs span { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--vh-text); }

/* «Мы поможем» – тёмный блок, как «Решения» и консультация на главной */
.vh-svc-help__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; padding: 40px 44px; border-radius: var(--vh-radius); background: linear-gradient(135deg, #15224a 0%, #1f2f62 100%); color: #fff; }
.vh-svc-help__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vh .vh-svc-help__title { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; color: #fff; }
.vh-svc-help__text { margin: 0; font-size: 15px; line-height: 1.55; opacity: .85; }
.vh-svc-help__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.vh-step__link { margin-top: auto; padding-top: 4px; }
.vh ul.vh-svc-help__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vh ul.vh-svc-help__list > li { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 18px 52px !important; position: relative; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06); }
.vh ul.vh-svc-help__list > li::before { display: block !important; content: "" !important; position: absolute !important; left: 18px !important; top: 18px !important; width: 22px !important; height: 22px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.5 2.5L14 7.5' fill='none' stroke='%231f2f62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat !important; }
.vh-svc-help__list b { font-size: 15px; line-height: 1.3; color: #fff; }
.vh-svc-help__list span { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.78); }

/* Другие услуги – карточки с фото как «Услуги» на главной, в 3 колонки */
.vh-svc-others .vh-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===== Адаптив ===== */
@media (max-width: 1199px) {
  .vh ul.vh-svc-inc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-svc-proj__inner { grid-template-columns: 1fr; gap: 24px; }
  .vh-svc-help__inner { grid-template-columns: 1fr; gap: 24px; }
  .vh-svc-card { grid-template-columns: 1fr; }
  .vh-svc-card__media { aspect-ratio: 700 / 445; }
}
@media (max-width: 991px) {
  .vh-svc-hero__card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .vh ul.vh-svc-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
  .vh ul.vh-svc-list__grid { grid-template-columns: 1fr; }
  .vh-svc-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .vh-svc-card__media { aspect-ratio: auto; }
  .vh-svc-about__inner { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  .vh-svc-post__title { font-size: 15px; }
  .vh-svc-hero__card--photo { grid-template-columns: 1fr; }
  .vh-svc-hero__card--photo .vh-svc-hero__main { padding: 28px; }
  .vh-svc-hero__photo { min-height: 0; aspect-ratio: 16 / 9; order: -1; }
  .vh-svc-others .vh-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vh-svc-hero__card { padding: 22px 18px; }
  .vh-svc-hero__sub { font-size: 14px; }
  .vh-svc-hero__buttons { flex-direction: column; width: 100%; }
  .vh-svc-hero__buttons .vh-btn { width: 100%; }
  .vh ul.vh-svc-hero__stats { gap: 8px; }
  .vh ul.vh-svc-hero__stats > li { padding: 10px 12px !important; }
  .vh-svc-hero__stats b { font-size: 18px; }
  .vh-svc-hero__stats span { font-size: 12px; }
  .vh-svc-card { grid-template-columns: 1fr; }
  .vh-svc-card__media { aspect-ratio: 700 / 445; }
  .vh-svc-card__body { padding: 18px 16px 20px; }
  .vh .vh-svc-card__title { font-size: 17px; }
  .vh-svc-about__inner { padding: 20px 16px; }
  .vh-svc-about__text { font-size: 14px; }
  .vh ul.vh-svc-blog__grid { grid-template-columns: 1fr; gap: 12px; }
  .vh-svc-hero__card.vh-svc-hero__card--photo { padding: 0; }
  .vh-svc-hero__card--photo .vh-svc-hero__main { padding: 22px 18px; }
  .vh ul.vh-svc-inc__grid { grid-template-columns: 1fr; gap: 10px; }
  .vh ul.vh-svc-inc__grid > li.vh-svc-inc__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; padding: 16px !important; }
  .vh-svc-inc__icon { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .vh-svc-inc__icon svg { width: 26px; height: 26px; }
  .vh-svc-inc__title { font-size: 15px; }
  .vh-svc-inc__text { font-size: 13px; }
  .vh-svc-proj__card { padding: 16px; }
  .vh ul.vh-svc-proj__docs { grid-template-columns: 1fr; gap: 8px; }
  .vh ul.vh-svc-proj__docs > li { flex-direction: row; align-items: center; gap: 12px; padding: 8px !important; }
  .vh-svc-proj__doc-img { flex: none; width: 128px; }
  .vh-svc-proj__docs > li > span:not(.vh-svc-proj__doc-img) { font-size: 14px; }
  .vh-svc-help__inner { padding: 24px 18px; }
  .vh .vh-svc-help__title { font-size: 21px; }
  .vh ul.vh-svc-help__list { grid-template-columns: 1fr; gap: 8px; }
  .vh-svc-help__buttons { width: 100%; flex-direction: column; }
  .vh-svc-help__intro .vh-btn { width: 100%; }
  .vh-svc-others .vh-services__grid { grid-template-columns: 1fr; }
  /* Телефон: строка «картинка слева – текст справа», чтобы три статьи не растягивали страницу */
  .vh-svc-post { flex-direction: row; }
  .vh-svc-post__media { flex: none; width: 116px; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--vh-line); }
  .vh-svc-post__media img { left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .vh-svc-post__body { gap: 6px; padding: 12px 14px; }
  .vh-svc-post__title { font-size: 14px; }
  .vh-svc-post__more { font-size: 13px; padding-top: 2px; }
}
@media (max-width: 420px) {
  .vh ul.vh-svc-hero__stats { grid-template-columns: 1fr 1fr; }
  .vh ul.vh-svc-hero__stats > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .vh-svc-card__media img { transition: none; }
}