/* ═══ Страница сервиса с профилем (v2; дизайн-проход DK и Fable5 24.09, правки DK 25.09).
   Подключается ТОЛЬКО шаблоном service_profile.html (?v= в ссылке — nginx отдаёт
   /cases-static/ с expires 1h, версия в адресе снимает кэш сразу). Шапка — по
   раскладке карточки агентства (/agency/*): её классы (.entity-meta, .agency-proof,
   .agency-blk) из cases.css, здесь только то, чего у агентства нет. Всё под .svc. ═══ */
.svc { --svc-line: #e4e7ec; --svc-muted: #667085; --svc-quiet: #98a2b3; --svc-soft: #f9fafb; --svc-text: #344054; }

/* ⚠️ АТРИБУТ hidden ПРОИГРЫВАЕТ АВТОРСКОМУ display: `.cases-grid { display: grid }`
   перебивает UA-правило [hidden] { display: none }, и «скрытые» кейсы стояли на
   странице с первой загрузки (поймано прогоном клика Playwright 24.09). */
.svc [hidden] { display: none !important; }

.svc-draft { margin: 12px 0; padding: 10px 14px; border: 2px dashed #c62828; border-radius: 8px; font-size: .92rem; color: #7a1f1f; }

/* H1 и тихий бейдж «Сервис» рядом (вне H1) — отличие страницы сервиса от агентства */
.svc-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.svc-title-row .entity-title { margin: 0; }
.svc-badge { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--svc-muted);
             border: 1px solid var(--svc-line); border-radius: 6px; padding: 2px 7px; line-height: 1.4; }
.svc-tagline { margin: 0 0 8px; }
/* факт без числа — подписью; ширина ограничена, чтобы слот не разъезжался */
.svc-proof-text { font-size: .9rem; color: var(--svc-text); max-width: 220px; line-height: 1.35; }
.svc-proof > .svc-proof-textslot { justify-content: center; }   /* по центру высоты соседних «число + подпись» */

/* CTA: отступы и высота каталожной кнопки (.rating-more-button), заливка — главная */
.svc-cta { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px;
           border-radius: 10px; background: #111827; border: 1px solid #111827; color: #fff; font-size: .95rem;
           font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s ease; }
.svc-cta:hover { background: #1f2937; color: #fff; }
.svc-cta .ad-disclosure-mark { color: inherit; margin: 0 0 0 1px; font-weight: 600; }
.svc-cta sup.ad-disclosure-mark { font-size: .8em; }
.svc-cta-wide { width: 100%; max-width: 100%; overflow: hidden; }   /* страховка; лимит текста — у окна 2 */

/* ⚠️ СЕТКА ОБЛАСТЯМИ (правка DK 25.09): сайдбар шире прежних 268px — в нём теперь
   таблица тарифов, и названия с ценами должны помещаться. Сайдбар занимает обе
   строки справа; вторая строка — 1fr, чтобы высокий сайдбар не раздвигал
   «О сервисе» и «Возможности» пустотой. */
.svc-two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; align-items: start;
           grid-template-areas: "about aside" "rest aside"; grid-template-rows: auto 1fr; margin-top: 22px; }
.svc-about { grid-area: about; }
.svc-rest { grid-area: rest; }
.svc-aside { grid-area: aside; border-left: 1px solid var(--svc-line); padding-left: 24px; position: sticky; top: 88px; }

.svc-sec { margin: 0 0 30px; }
.svc-sec h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
.svc-sec h3 { font-size: .95rem; font-weight: 600; margin: 14px 0 4px; }
.svc-sec p { margin: 0 0 8px; line-height: 1.6; color: var(--svc-text); }

/* сайдбар */
.svc-side-blk { margin: 0 0 24px; }
.svc-side-blk h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--svc-muted);
                   margin: 0 0 8px; font-weight: 600; }
.svc-price { font-size: 1.35rem; font-weight: 700; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.svc-price small { font-size: .8rem; color: var(--svc-muted); font-weight: 500; }

/* тарифы в сайдбаре; border-collapse: separate — иначе скругление рамки не работает.
   Название переносится, цена — никогда. */
.svc-table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--svc-line);
             border-radius: 10px; overflow: hidden; font-size: .88rem; }
.svc-table td { padding: 8px 12px; border-bottom: 1px solid var(--svc-line); vertical-align: top; line-height: 1.4; }
.svc-table tr:last-child td { border-bottom: 0; }
.svc-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; padding-left: 10px; }
.svc-src { font-size: 12px; color: var(--svc-quiet); margin: 6px 0 0; }

/* возможности сеткой */
.svc-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svc-feat > div { border: 1px solid var(--svc-line); border-radius: 10px; padding: 12px 14px; }
.svc-feat h3 { margin: 0 0 6px; font-size: .92rem; }
.svc-feat ul { margin: 0; padding: 0 0 0 16px; font-size: .86rem; color: #475467; line-height: 1.55; }

/* интеграции чипами */
.svc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-chips span { font-size: 12.5px; line-height: 1.4; padding: 3px 10px; border-radius: 99px;
                  background: var(--svc-soft); border: 1px solid var(--svc-line); color: var(--svc-text); }

/* кейсы во всю ширину; разделителя над ними нет (правка DK 24.09) — линию давал
   .entity-cases-head из cases.css */
.svc-cases { margin-top: 6px; }
.svc-cases .entity-cases-head { border-top: 0; padding-top: 0; margin-top: 8px; }
.svc-cases-rest { margin-top: 16px; }
/* кнопка «Ещё N кейсов» — каталожная; на мобильном не на всю ширину и без переноса
   (rating.css растягивает .rating-more-button на 100% в мобильном медиазапросе) */
.svc .svc-more { text-align: center; }
.svc .svc-more-btn { width: auto; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }

/* раскрытие рекламы — тихим шрифтом одной строкой */
.svc .svc-disclosure { margin: 26px 0 0; padding: 10px 0 0; border-top: 1px solid var(--svc-line);
                       font-size: 12px; line-height: 1.5; color: var(--svc-quiet); }
.svc .svc-disclosure .ad-disclosure-line { display: inline; margin: 0 12px 0 0; }
.svc .svc-disclosure .ad-disclosure-mark, .svc .svc-disclosure .ad-erid { color: inherit; font-weight: 400; }

@media (max-width: 860px) {
  /* мобильный порядок: «О сервисе» → черта → мин. цена → CTA → «Тарифы» → остальное */
  /* ⚠️ minmax(0, 1fr), НЕ 1fr: колонка 1fr растёт под min-content, и длинный
     неразрывный текст CTA раздвигал страницу шире экрана (замер 25.09: кнопка
     621px на экране 390). */
  .svc-two { grid-template-columns: minmax(0, 1fr); grid-template-areas: "about" "aside" "rest"; grid-template-rows: auto; }
  .svc-aside { border-left: 0; padding-left: 0; position: static; border-top: 1px solid var(--svc-line);
               padding-top: 18px; margin-bottom: 8px; }
  .svc-feat { grid-template-columns: 1fr; }
  .svc .svc-more-btn { width: auto; }
}