/* Страница услуг (редизайн 29.09.2026): шапка с фактами, «путь студента», липкий навигатор,
   разделы услуг зигзагом, финальный призыв. Язык — как у страницы вуза (university.css):
   #272727 текст, #e9423d акцент, #62ba87 зелёный, светло-зелёные подложки. Серого текста нет. */

/* ---------- общее ---------- */
.svc { padding-bottom: 8px; }
.svc-section-title { margin: 0 0 12px; font-size: clamp(26px, 1.4vw + 16px, 36px); font-weight: 600; line-height: 1.15; color: #272727; }

a.svc-btn, .svc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 14px; border: 1.5px solid transparent;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
a.svc-btn--primary { background: #e9423d; color: #fff; }
a.svc-btn--primary:hover { background: #d63530; color: #fff; }
a.svc-btn--ghost { background: #fff; border-color: #272727; color: #272727; }
a.svc-btn--ghost:hover { background: #272727; color: #fff; }
.svc-btn svg { width: 18px; height: 18px; }
a.svc-btn:focus-visible { outline: 2px solid #62ba87; outline-offset: 3px; }

/* ---------- шапка ---------- */
.svc-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; margin: 8px 0 80px; }
.svc-hero__title { margin: 0 0 18px; font-size: clamp(34px, 2.6vw + 16px, 56px); font-weight: 600; line-height: 1.05; color: #272727; }
.svc-hero__lead { margin: 0 0 32px; max-width: 34em; font-size: clamp(18px, .4vw + 15px, 21px); font-weight: 500; line-height: 1.5; color: #272727; }
.svc-hero__lead p { margin: 0; }
.svc-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.svc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.svc-fact__in { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: 20px; background: #f3f9f5; color: #272727; text-decoration: none; }
a.svc-fact__in { transition: background .2s, transform .2s; }
a.svc-fact__in:hover { background: #e3f3ea; transform: translateY(-2px); color: #272727; }
.svc-fact__value { font-size: clamp(26px, 1.2vw + 18px, 40px); font-weight: 700; line-height: 1; color: #2f7a4f; white-space: nowrap; }
.svc-fact__label { font-size: 15px; font-weight: 500; line-height: 1.4; color: #272727; }

/* ---------- путь студента ---------- */
.svc-path { margin: 0 0 80px; scroll-margin-top: 24px; }
.svc-path__sub { margin: 0 0 40px; font-size: 17px; line-height: 1.5; color: #272727; }
.svc-path__list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
/* пунктир через кружки с номерами */
.svc-path__list::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; border-top: 2px dashed #a9d8bc; }
.svc-step { position: relative; }
.svc-step__in { display: flex; flex-direction: column; gap: 8px; height: 100%; color: #272727; text-decoration: none; }
.svc-step__no {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 10px;
  border: 2px solid #62ba87; border-radius: 50%; background: #fff; font-size: 18px; font-weight: 700; color: #2f7a4f;
  transition: background .2s, border-color .2s, color .2s;
}
.svc-step:last-child .svc-step__no { border-color: #e9423d; background: #e9423d; color: #fff; }
.svc-step__name { font-size: 18px; font-weight: 600; line-height: 1.25; }
.svc-step__summary { font-size: 15px; line-height: 1.45; color: #272727; }
.svc-step__in:hover .svc-step__no { border-color: #272727; background: #272727; color: #fff; }
.svc-step__in:hover .svc-step__name { color: #e9423d; }
.svc-step__in:focus-visible { outline: 2px solid #62ba87; outline-offset: 4px; border-radius: 12px; }

/* ---------- липкий навигатор ---------- */
.svc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  border-bottom: 1px solid #e6efe9; background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 20px rgba(39, 39, 39, .06);
  transform: translateY(-110%); visibility: hidden; transition: transform .25s, visibility .25s;
}
.svc-nav.is-visible { transform: none; visibility: visible; }
@supports (backdrop-filter: blur(8px)) { .svc-nav { background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); } }
.svc-nav__in { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; }
.svc-nav__in::-webkit-scrollbar { display: none; }
/* по центру, пока ряд помещается; не помещается — прокрутка от левого края */
.svc-nav__chip:first-child { margin-left: auto; }
.svc-nav__chip:last-child { margin-right: auto; }
a.svc-nav__chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: #f1f3f2; font-size: 14px; font-weight: 600; line-height: 1.2; color: #272727; text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
.svc-nav__no { font-size: 12px; font-weight: 700; color: #2f7a4f; }
a.svc-nav__chip:hover { background: #e3f3ea; color: #272727; }
a.svc-nav__chip[aria-current="true"] { background: #272727; color: #fff; }
a.svc-nav__chip[aria-current="true"] .svc-nav__no { color: #8fd3aa; }

/* ---------- разделы услуг ---------- */
.svc-blocks { display: grid; gap: 28px; }
.svc-block {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center;
  padding: 48px 56px; border-radius: 32px; background: #f3f9f5; scroll-margin-top: 76px;
}
.svc-block:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: #fdf2f1; }
.svc-block:nth-child(even) .svc-block__media { order: 2; }
/* иллюстрация прямо на подложке раздела: у изометрии шаблона свой прозрачный фон */
.svc-block__media { display: flex; align-items: center; justify-content: center; }
.svc-block__media img { display: block; width: 100%; max-width: 420px; max-height: 380px; object-fit: contain; }

/* сброс оформления шаблона у крючков app.js (services-thumbs__*) */
.svc .services-thumbs__head { display: block; max-width: none; margin: 0; padding: 0; }
.svc .services-thumbs__button { flex: none; }

.svc-block__step { margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #e9423d; }
.svc .svc-block__title { flex: none; margin: 0 0 18px; font-size: clamp(24px, 1.1vw + 17px, 34px); font-weight: 600; line-height: 1.18; color: #272727; }
.svc-block__text { font-size: 16px; line-height: 1.6; color: #272727; }
.svc-block__text p { margin: 0 0 12px; }
.svc-block__text p:first-child { font-size: 18px; font-weight: 500; line-height: 1.5; }
.svc-block__text p:last-child { margin-bottom: 0; }
.svc-block__subtitle { margin: 28px 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2f7a4f; }
.svc-block__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.svc-block__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-block__list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; font-size: 15px; font-weight: 500; line-height: 1.45; color: #272727; }
.svc-block__check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #62ba87; color: #fff; }
.svc-block__check svg { width: 14px; height: 14px; }
.svc-block:nth-child(even) .svc-block__subtitle { color: #b52d28; }
.svc-block:nth-child(even) .svc-block__check { background: #e9423d; }
.svc-block__actions { margin-top: 28px; }

/* ---------- финальный призыв ---------- */
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin: 64px 0 24px; padding: 40px 48px; border-radius: 28px; background: #272727; color: #fff; }
.svc-cta__title { margin: 0 0 8px; font-size: clamp(22px, .8vw + 17px, 30px); font-weight: 600; line-height: 1.2; color: #fff; }
.svc-cta__text p { margin: 0; max-width: 36em; font-size: 16px; line-height: 1.5; color: #e8e8e8; }
.svc-cta .svc-btn { flex: none; }

/* ---------- ноутбук / планшет ---------- */
@media (max-width: 1199px) {
  .svc-hero { gap: 40px; }
  .svc-path__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .svc-path__list::before { display: none; }
  .svc-step__in { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 20px; border-radius: 20px; background: #f3f9f5; transition: background .2s; }
  .svc-step__in:hover { background: #e3f3ea; }
  .svc-step__no { width: 44px; height: 44px; margin: 0; font-size: 16px; }
  .svc-step__name { flex: 1 1 0; min-width: 0; }
  .svc-step__summary { flex: 1 1 100%; }
  .svc-block { gap: 40px; padding: 40px; }
  .svc-block__list--cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1022px) {
  .svc-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-bottom: 64px; }
  .svc-path__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-block, .svc-block:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .svc-block:nth-child(even) .svc-block__media { order: 0; }
  .svc-block__media img { max-height: 240px; }
  .svc-block__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* телефон (≤767px) — services-mobile.css */

@media (prefers-reduced-motion: reduce) {
  .svc-nav, a.svc-fact__in, .svc-step__no, a.svc-btn { transition: none; }
}