/* service.css — детальные страницы услуг (services/<slug>.html).
   Подключается только на них, после pages.css.

   Своей палитры и своей шкалы отступов здесь нет — всё из base.css.
   Содержимое блоков (варианты, колонки, списки состава, ленты примеров)
   переиспользует классы .svc-var, .svc-cols, .svc-more__*, .svc-preview*
   из pages.css: страница услуги и карточка на хабе обязаны выглядеть
   одинаково, иначе переход с хаба читается как переход на другой сайт.
   Здесь — только каркас страницы: крошки, первый экран и блок «рельс +
   тело». */

.service-page {
  /* Ширина рельса и промежуток до текста. Рельс существует только от 900px:
     до этого блок — одна колонка, и --rail не участвует. */
  --rail: 220px;
  --gap: var(--s-5);
  /* Липкий рельс встаёт на 120px от верха окна — та же константа, что на
     кейсах (case.css): суммарная, а не «хедер + отступ», потому что
     --header-h меняется по ширине экрана. */
  --rail-top: max(120px, calc(var(--header-h) + var(--s-5)));
  --body-max: 760px;
}

/* ─────────────────────────────────────────────────────────────────
   Хлебные крошки
   ───────────────────────────────────────────────────────────────── */

.crumbs {
  padding-top: calc(var(--header-h) + var(--s-5));
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--small);
  color: var(--text-muted);
}

/* Разделитель — псевдоэлемент, а не символ в разметке: скринридер читает
   список ссылок, а не «главная слэш услуги слэш». */
.crumbs__item + .crumbs__item::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--border);
}

.crumbs__link {
  color: var(--text-muted);
  transition: color var(--transition);
}

.crumbs__link:hover { color: var(--text); }

.crumbs__current { color: var(--text-secondary); }

/* ─────────────────────────────────────────────────────────────────
   Первый экран услуги
   ───────────────────────────────────────────────────────────────── */

/* Отступ сверху меньше, чем у .page-hero: над первым экраном уже стоят
   крошки, и второй большой воздух подряд оставлял бы заголовок в середине
   экрана без причины. */
.svc-hero {
  padding-top: var(--s-6);
  padding-bottom: clamp(48px, 8vh, 96px);
  border-bottom: 0.5px solid var(--border);
}

/* Категория — ссылка обратно в свой раздел хаба. Надзаголовок акцентный
   (.section-label), здесь только поведение ссылки. */
.svc-hero__cat {
  width: fit-content;
  transition: opacity var(--transition);
}

.svc-hero__cat:hover { opacity: 0.75; }

/* Верхний отступ не задаём: расстояние от надзаголовка-категории держит
   --label-gap (base.css) — общее для всех страниц. */
.svc-hero__title {
  margin-bottom: var(--s-5);
}

.svc-hero__lead {
  max-width: 56ch;
  color: var(--text-secondary);
}

/* Три факта строкой: цена, срок, правки. Это первый ответ на «сколько и
   когда» — до состава услуги, а не после него. Линия сверху отделяет их
   от определения, подложки нет: карточка внутри первого экрана утяжелила
   бы его без пользы. */
.svc-hero__facts {
  display: grid;
  gap: var(--s-4) var(--s-7);
  margin: var(--s-7) 0 0;
  padding-top: var(--s-5);
  border-top: 0.5px solid var(--border);
}

@media (min-width: 40em) {
  .svc-hero__facts {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
  }
}

.svc-hero__fact dt {
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

.svc-hero__fact dd {
  margin: 0;
  font-size: var(--step-0, 1.125rem);
  color: var(--text);
}

/* Цена — единственное акцентное значение в ряду: остальные два факта
   уточняют её, а не спорят с ней. */
.svc-hero__price {
  font-weight: 500;
  color: var(--accent-text);
}

.svc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-7);
}

.svc-hero__alt { color: var(--text-secondary); }
.svc-hero__alt:hover { color: var(--text); }

/* ─────────────────────────────────────────────────────────────────
   Блок услуги: рельс с заголовком + тело
   ───────────────────────────────────────────────────────────────── */

.svc-block {
  padding-block: var(--s-8);
  border-bottom: 0.5px solid var(--border);
}

@media (min-width: 48em) {
  .svc-block { padding-block: var(--s-9); }
}

/* Мобильный — одна колонка: заголовок блока, под ним текст. Две колонки
   включаются от 900px вместе с липким рельсом, ниже.
   Объявлять здесь grid-template-columns нельзя: при --rail: 100% вторая
   колонка minmax(0, 1fr) получает нулевую ширину, и всё тело блока
   схлопывается в невидимую полосу у правого края. Ровно это и происходило
   на всех пяти страницах услуг ниже 900px. */
.svc-block__inner {
  display: grid;
  gap: var(--gap);
}

.svc-block__title {
  margin: 0;
  font-size: clamp(1.6875rem, 4vw, 1.96875rem);
  /* Вес не переопределяем: по базовой типографике h2 идёт на 400, а h3/h4 —
     на 500. Стоявшая здесь 500 равняла заголовок блока с подзаголовками
     внутри него, и секция читалась плоско — крупный титул и мелкая подпись
     одного веса. Возврат к 400 разводит их по весу так же, как на
     остальных страницах сайта. */
  line-height: 1.2;
  color: var(--text);
  /* Якорь с других страниц не должен уводить заголовок под шапку */
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.svc-block--quiet .svc-block__title { color: var(--text-secondary); }

.svc-block__body { max-width: var(--body-max); }

/* Блоки с двумя колонками внутри (.svc-cols) и лентой примеров меру
   строки не держат — её держит уже сама колонка. */
.svc-block__body--wide { max-width: none; }

.svc-block__lead {
  margin: 0 0 var(--s-5);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* От 900px рельс уходит в свою колонку и липнет: пока читаешь длинный
   состав услуги, видно, к какому блоку он относится.
   align-self: start обязателен — растянутый на всю ячейку рельс получает
   нулевой ход, и sticky молча не срабатывает. */
@media (min-width: 56.25em) {
  .service-page {
    --gap: var(--s-7);
  }

  .svc-block__inner {
    grid-template-columns: var(--rail) minmax(0, 1fr);
  }

  .svc-block__rail {
    align-self: start;
    position: sticky;
    top: var(--rail-top);
  }
}

@media (min-width: 90em) {
  .service-page {
    --rail: 280px;
    --gap: var(--s-8);
  }
}

/* ─────────────────────────────────────────────────────────────────
   Типы услуги
   ───────────────────────────────────────────────────────────────── */

/* Ни рамок, ни подложек, ни картинок: это оглавление, а не витрина.
   Шесть плашек здесь перетянули бы внимание с единственной кнопки на
   первом экране, а список держат колонки и отступы.
   Колонки заданы явно (1 → 2 → 3), без auto-fit: ширина строки описания
   тогда одинакова на всех страницах услуг, сколько бы типов ни было. */
.svc-kinds {
  display: grid;
  gap: var(--s-6) var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-kinds li { max-width: none; }

.svc-kinds__link {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.svc-kinds__name {
  font-size: var(--step-0, 1.125rem);
  font-weight: 500;
  color: var(--text);
  transition: color var(--transition);
}

.svc-kinds__link:hover .svc-kinds__name,
.svc-kinds__link:focus-visible .svc-kinds__name { color: var(--accent-text); }

.svc-kinds__desc {
  max-width: 40ch;
  font-size: var(--step--1, 1.0125rem);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 48em) {
  .svc-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .svc-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────────────────────────────
   «Для каких задач подходит» — плашки
   ───────────────────────────────────────────────────────────────── */

/* Не список с маркерами, а набор тегов: пункты короткие (два-три слова),
   и в столбик они читались бы как перечисление требований, хотя это
   просто ситуации клиента. Плашки идут потоком и переносятся сами —
   ни колонок, ни сетки, поэтому раскладка одна на всех ширинах.
   Не интерактивные: это не ссылки и не фильтры, поэтому ни hover, ни
   курсора-указателя здесь нет. */
.svc-fit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ширина по содержимому: inline-flex не тянется на строку, как блок.
   Радиус 999px даёт капсулу при любой высоте — тот же приём, что у
   .chip на контактах, отдельного токена скругления не заводим.
   Горизонтальный отступ втрое больше вертикального: на равных полях
   плашка читается кнопкой. */
.svc-fit__item {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-5);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface-3);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────
   Лента примеров работ
   ───────────────────────────────────────────────────────────────── */

/* Заголовок блока остаётся в рельсе внутри .container, а лента лежит
   рядом с ним отдельным ребёнком секции — так она выходит на всю ширину
   окна, не ломая сетку «рельс + тело» у остальных блоков. */
.svc-lane {
  /* Поле ленты повторяет поле .container, включая потолок контента: слайд
     встаёт по той же вертикальной линии, что и текст выше, а край
     следующего выглядывает ровно на ширину поля — от 36px на мобильном до
     80px на десктопе. Этого хватает, чтобы стало видно: лента листается.
     100vw здесь взять нельзя — он считает и полосу прокрутки, и всю
     страницу уводит в горизонтальный оверфлоу. */
  --lane-pad: max(var(--gutter), calc((100vw - var(--container)) / 2));
  margin-top: var(--s-6);
}

/* Заголовка над лентой нет — работа подписывает себя сама. Отбивка от
   предыдущего блока остаётся за padding секции, свой отступ здесь лишний. */
.svc-block--lane > .svc-lane:first-child { margin-top: 0; }

.svc-lane__track {
  display: flex;
  gap: var(--s-4);
  margin: 0;
  padding: 0 var(--lane-pad) var(--s-3);
  list-style: none;
  overflow-x: auto;
  /* Прокрутка ленты не уходит в прокрутку страницы по горизонтали. К
     вертикали это отношения не имеет — и обработчика wheel у ленты нет
     намеренно: колесо над ней должно листать страницу вниз. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--lane-pad);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Лента — своя область прокрутки и своя точка фокуса: рамка уходит
   внутрь, иначе она обрезалась бы краем окна. */
.svc-lane__track:focus-visible { outline-offset: -2px; }

.svc-lane__slide {
  flex: 0 0 auto;
  /* 100% содержимого ленты = ширина .container, см. --lane-pad выше. */
  width: 100%;
  max-width: none;
  scroll-snap-align: start;
}

/* ── Слайд: та же карточка превью, что на хабе, но разложенная в две
   колонки. Обложка во всю ширину окна в пропорции 4:3 дала бы на десктопе
   больше тысячи пикселей высоты — слайд перестал бы помещаться в экран. ── */
.svc-preview--lane { margin: 0; max-width: none; }

/* Слайды в ленте одного размера: ширину задаёт сама лента, а высоту —
   самый высокий слайд. Без растяжки карточка со «вписанной» обложкой
   (она заметно шире рамки) оказывалась на сотню пикселей ниже соседней,
   и второй пример читался как пример помельче. Поле, которое остаётся у
   такой обложки, добирает подложка карточки — как и в остальных превью. */
.svc-lane__slide { display: grid; }

.svc-preview--lane,
.svc-preview--lane .svc-preview__link { height: 100%; }

.svc-preview--lane .svc-preview__body {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
}

.svc-preview--lane .svc-preview__name {
  margin: 0;
  font-size: var(--step-2, 1.758375rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}

.svc-preview--lane .svc-preview__task {
  margin: 0;
  max-width: 52ch;
  font-size: var(--step--1, 1.0125rem);
  line-height: 1.5;
  color: var(--text-muted);
}

/* В ленте подпись — строка действия, а не название работы: минимальная
   высота под две строки и верхний разделитель здесь только мешают. */
.svc-preview--lane .svc-preview__case {
  padding: 0;
  min-height: 0;
  border-top: 0;
  color: var(--accent-text);
}

@media (min-width: 64em) {
  .svc-preview--lane .svc-preview__link {
    display: grid;
    grid-template-columns: 1.35fr minmax(0, 1fr);
    align-items: stretch;
  }

  .svc-preview--lane .svc-preview__frame { height: 100%; aspect-ratio: auto; }

  .svc-preview--lane .svc-preview__body {
    align-content: center;
    padding: var(--s-7);
    border-left: 0.5px solid var(--border);
  }
}

/* ── Управление лентой ── */
.svc-lane__controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.svc-lane__pos {
  margin: 0;
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.svc-lane__arrows {
  display: none;
  gap: var(--s-2);
  margin-inline-start: auto;
}

.svc-lane__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.svc-lane__arrow:hover:not(:disabled) { border-color: var(--text-muted); color: var(--text); }
.svc-lane__arrow:disabled { opacity: 0.35; cursor: default; }

/* Стрелки — для мыши. На тач-устройствах листают пальцем, и две кнопки
   там только занимают экран. */
@media (min-width: 48em) {
  .svc-lane__arrows { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-lane__track { scroll-behavior: auto; }
}

/* ─────────────────────────────────────────────────────────────────
   Смежные услуги
   ───────────────────────────────────────────────────────────────── */

/* Строки с хайрлайнами, без подложек: карточек на странице услуги нет
   нигде, и заводить их ради трёх ссылок в конце — значит перетянуть
   внимание с кнопки «Обсудить проект». */
.svc-nearby {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0.5px solid var(--border);
}

.svc-nearby li { max-width: none; }

.svc-nearby__link {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 0.5px solid var(--border);
  transition: border-color var(--transition);
}

.svc-nearby__link:hover { border-bottom-color: var(--text-muted); }

.svc-nearby__name {
  font-size: var(--step-0, 1.125rem);
  font-weight: 500;
  color: var(--text);
  transition: color var(--transition);
}

.svc-nearby__link:hover .svc-nearby__name,
.svc-nearby__link:focus-visible .svc-nearby__name { color: var(--accent-text); }

.svc-nearby__desc {
  max-width: 62ch;
  font-size: var(--step--1, 1.0125rem);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 48em) {
  /* Название и описание в один ряд: три строки читаются как таблица
     «услуга — когда она вместо этой», а не как три абзаца. */
  .svc-nearby__link {
    grid-template-columns: 18rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-5);
  }
}

/* ══════════════════════════════════════════
   «Что ты получаешь» — нумерованный список артефактов
   Геометрия повторяет .process__item на хабе услуг (колонка под номер,
   тот же зазор, те же кегли заголовка и описания) — блок читается как
   тот же язык. Своё здесь только круг вокруг цифры и строка с меткой.
   Семантика списка настоящая: <ol> → <li>, цифра рисуется отдельным
   <span>, а не ::before, — она видима и не подменяет счётчик.
   ══════════════════════════════════════════ */

.gains {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gains__item {
  display: grid;
  grid-template-columns: 2.8125rem minmax(0, 1fr);
  gap: 0 var(--space-m);
  padding-bottom: var(--space-xl);
}

.gains__item:last-child { padding-bottom: 0; }

/* Круг фиксированного размера: ширину задаёт сам круг, а не число внутри,
   поэтому двузначный номер его не растянет. Выравнивание по верхней линии
   заголовка, а не по центру блока, — отсюда align-self: start. */
.gains__num {
  width: 2.8125rem;
  height: 2.8125rem;
  flex-shrink: 0;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Вариант А — обводка */
.gains--outline .gains__num {
  border: 1px solid var(--accent);
  color: var(--accent-text);
}

/* Вариант Б — заливка */
.gains--fill .gains__num {
  background-color: var(--accent);
  color: var(--accent-ink);
}

.gains__title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 8px;
  /* Заголовок ростом с кругом, чтобы цифра встала ровно на его первую строку */
  min-height: 2.8125rem;
  display: flex;
  align-items: center;
}

/* ── Десктоп: все пункты одним рядом ──
   grid-auto-flow: column раскладывает ряд по факту содержимого, поэтому
   правило одно на все страницы услуг — а их там от пяти до семи пунктов,
   и держать пять медиазапросов с фиксированным числом колонок незачем.
   minmax(0, 1fr) обязателен: без него длинное слово в заголовке распирает
   колонку и ряд уезжает за контейнер. */
@media (min-width: 64em) {
  .gains {
    display: grid;
    /* auto-fit, а не grid-auto-flow: column. Колонок на страницах от пяти
       до семи, и жёсткий ряд на семь при 1024px давал по 113px на колонку:
       «Опубликованные» и «Приветственное» шире и вылезали на соседа. Здесь
       колонка не бывает уже 135px (8.4375rem при 1rem = 16px). При 1024px
       под список остаётся 942px, и 135px — ровно тот предел, на котором
       шесть пунктов ещё стоят одним рядом. Семь (vk-design) при 1024px
       переносятся на вторую строку — но переносятся, а не наезжают друг
       на друга, как было с жёстким grid-auto-flow: column. */
    grid-template-columns: repeat(auto-fit, minmax(8.4375rem, 1fr));
    /* Зазор здесь меньше обычного --space-l: при 48px седьмая колонка
       на vk-design не помещалась в контейнер и переносилась на вторую
       строку одна. 24px хватает, чтобы колонки не слипались. */
    gap: var(--space-m);
    align-items: start;
  }

  /* В ряду цифра встаёт над заголовком, а не слева: колонка узкая, и
     2.5rem под круг съели бы половину строки. */
  .gains__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 0;
  }

  .gains__num { margin-bottom: var(--space-s); }

  /* Выравнивание по верхней линии заголовка здесь делает сам порядок
     элементов, вертикальная центровка больше не нужна. */
  .gains__title {
    min-height: 0;
    display: block;
    /* Кегль тот же, что у описания. В ряду колонка ~137px, и при 1rem
       (18px на десктопе) «опубликованный» в неё не влезал — перенос по
       букве рвал слово посередине. Новой величины здесь нет: 0.875rem
       уже стоит у .gains__desc. */
    font-size: 0.984375rem;
    /* Последний рубеж: слово длиннее колонки переносится, а не вылезает. */
    overflow-wrap: break-word;
  }

  /* Ширину строки задаёт колонка ряда — потолок в символах снимаем,
     иначе он вступает в спор с сеткой. */
  .gains__desc { max-width: none; }
}

/* ── Шахматная раскладка ──
   Три колонки вместо ряда во всю ширину: при шести пунктах ряд отдавал
   колонке около 137px, и описание сжималось в столбик по два слова.
   В трёх колонках на 1440px пункт получает ~400px — заголовок встаёт
   в строку, описание читается абзацем. Средняя колонка опущена на --s-8,
   и ряды перестают читаться сплошной линейкой. Смещение — отступом, а не
   order или grid-row: порядок в DOM остаётся порядком на экране.
   Ниже 64em правило не работает вовсе: там пункты идут одной колонкой,
   и смещать в ней нечего. */
@media (min-width: 64em) {
  .gains--stagger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-l);
  }

  /* Кегль заголовка вернулся к базовому: 0.875rem выше стоит ради узкой
     колонки сплошного ряда, в 400px этой причины нет. */
  .gains--stagger .gains__title { font-size: 1.125rem; }

  .gains--stagger .gains__item:nth-child(3n + 2) { margin-top: var(--s-8); }
}

.gains__meta {
  margin: 0 0 var(--space-2xs);
  font-size: var(--small);
  line-height: 1.6;
  color: var(--text-secondary);
}

.gains__meta b {
  font-weight: 500;
  color: var(--text);
}

.gains__desc {
  margin: 0;
  font-size: 0.984375rem;
  line-height: 1.6;
  color: var(--text-muted);
  /* Длина строки — не больше 75 знаков, иначе текст растягивается
     на всю ширину контейнера и перестаёт читаться. */
  max-width: 68ch;
}