/*
 * RGBee — общие компоненты внутренних страниц.
 * Каталог компонентов с примерами разметки: html/pages/README.md. Цвета — только токены.
 */

/* ---------- Хлебные крошки ---------- */
.breadcrumbs { font: 500 var(--fs-caption)/1.4 var(--font-mono); letter-spacing: .04em; color: var(--c-text-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: inline-flex; gap: var(--sp-2); align-items: center; }
.breadcrumbs li + li::before { content: "/"; opacity: .5; }
.breadcrumbs a { text-decoration: none; color: inherit; }
.breadcrumbs a:hover { color: var(--c-text); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--c-text); }

/* ---------- Шапка страницы (графит) + линия горизонта с точкой канала ---------- */
.page-hero { position: relative; padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); overflow: hidden; }
.page-hero__inner { display: grid; gap: var(--sp-6); }
.page-hero__grid { display: grid; gap: var(--sp-8); align-items: end; }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.page-hero__text { display: grid; gap: var(--sp-5); min-width: 0; }
.page-hero__title { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); max-width: 18ch; }
.page-hero__lead { max-width: 56ch; }
/* Короткие факты справа: цена, срок, формат */
.page-hero__facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--c-line); }
.page-hero__fact { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.page-hero__fact dt { color: var(--c-text-muted); font-size: var(--fs-small); }
.page-hero__fact dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
/* Горизонт: на какой точке пути R → G → B стоит страница */
.page-hero__horizon { position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 1rem + 1vw, 2rem); height: 1px; background: var(--c-line-strong); }
.page-hero__horizon::before {
  content: ""; position: absolute; top: 50%; left: var(--route-pos, 50%); width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--route-color, var(--c-honey)); box-shadow: 0 0 0 4px var(--c-bg);
}
.page-hero--r { --route-pos: 18%; --route-color: var(--c-r); }
.page-hero--g { --route-pos: 50%; --route-color: var(--c-g); }
.page-hero--b { --route-pos: 82%; --route-color: var(--c-b); }

/* ---------- Две колонки: текст + липкая боковая карточка ---------- */
.split { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .split__aside { position: sticky; top: calc(72px + var(--sp-6)); } }
.split--even { }
@media (min-width: 900px) { .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Прайс строками: название · срок · цена ---------- */
.price-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.price-rows__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "term price" "text text";
  gap: 2px var(--sp-4); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line);
}
.price-rows__name { grid-area: name; font-weight: 600; }
a.price-rows__name { color: inherit; text-decoration: underline; text-decoration-color: var(--c-line-strong); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a.price-rows__name:hover { text-decoration-color: currentColor; }
.price-rows__hint { font-weight: 400; color: var(--c-text-muted); }
.price-rows__term { grid-area: term; font-size: var(--fs-small); color: var(--c-text-muted); }
.price-rows__value { grid-area: price; font-family: var(--font-mono); font-weight: 600; font-size: 1.125rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-rows__text { grid-area: text; font-size: var(--fs-small); color: var(--c-text-muted); max-width: 70ch; margin-top: var(--sp-1); }
@media (min-width: 680px) {
  .price-rows__item { grid-template-columns: minmax(0, 1fr) 9rem 10rem; grid-template-areas: "name term price" "text text text"; }
  .price-rows__term { font-size: var(--fs-body); }
}
.price-note { font-size: var(--fs-small); color: var(--c-text-faint); max-width: 70ch; margin-top: var(--sp-4); }

/* ---------- Карточки-плитки ---------- */
.tiles { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile-card {
  position: relative; display: grid; gap: var(--sp-3); align-content: start; min-width: 0;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 2.2vw, var(--sp-6));
}
.tile-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.tile-card__text { font-size: var(--fs-small); color: var(--c-text-muted); }
.tile-card__foot { margin-top: auto; padding-top: var(--sp-3); display: grid; justify-items: start; gap: var(--sp-2); }
.tile-card--r, .tile-card--g, .tile-card--b { border-top: 0; }
.tile-card--r::before, .tile-card--g::before, .tile-card--b::before {
  content: ""; position: absolute; left: var(--sp-6); top: -1px; width: 40px; height: 3px; border-radius: 0 0 3px 3px;
}
.tile-card--r::before { background: var(--c-r); }
.tile-card--g::before { background: var(--c-g); }
.tile-card--b::before { background: var(--c-b); }
a.tile-card { text-decoration: none; color: inherit; transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease); }
a.tile-card:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-card); transform: translateY(-2px); }

/* ---------- Список-чеклист ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } }
.checklist li { position: relative; padding-left: calc(var(--sp-6) + 2px); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px;
  border: solid var(--check-color, var(--c-honey)); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}

.checklist--r { --check-color: var(--c-r); }
.checklist--g { --check-color: var(--c-g); }
.checklist--b { --check-color: var(--c-b); }

/* ---------- Боковая карточка (цена + кнопка) ---------- */
.aside-card { display: grid; gap: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: clamp(var(--sp-5), 2.5vw, var(--sp-8)); }
.aside-card__price { font: 600 1.5rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.aside-card p:not([class]) { color: var(--c-text-muted); font-size: var(--fs-small); }

/* ---------- Этапы (нумерация = реальный порядок) ---------- */
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--sp-6); counter-reset: step; }
@media (min-width: 720px) { .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps-list > li { counter-increment: step; display: grid; align-content: start; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--c-line); }
.steps-list > li::before { content: counter(step, decimal-leading-zero); font: 500 var(--fs-small)/1.6 var(--font-mono); color: var(--step-color, var(--c-text-faint)); }
.steps-list--r { --step-color: var(--c-r); }
.steps-list--g { --step-color: var(--c-g); }
.steps-list--b { --step-color: var(--c-b); }
.steps-list__title { font-weight: 600; }
.steps-list__text { grid-column: 2; font-size: var(--fs-small); color: var(--c-text-muted); }

/* ---------- Цифры кейса ---------- */
.metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
@media (min-width: 720px) { .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metrics-grid > div { padding: var(--sp-4); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin-right: -1px; margin-bottom: -1px; display: grid; gap: var(--sp-1); }
.metrics-grid dt { font-size: var(--fs-caption); color: var(--c-text-muted); }
.metrics-grid dd { margin: 0; font: 600 1.25rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.metrics-grid .is-key { background: color-mix(in srgb, var(--c-honey) 22%, var(--c-surface)); }
.metrics-note { font-size: var(--fs-caption); color: var(--c-text-faint); margin-top: var(--sp-3); }

/* ---------- Призыв к действию ---------- */
.cta-band {
  display: grid; gap: var(--sp-6); align-items: center;
  padding: clamp(var(--sp-6), 4vw, var(--sp-12)); border-radius: var(--r-xl);
  background: var(--c-bg); color: var(--c-text);
}
@media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 1.4fr) auto; } }
.cta-band__title { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.cta-band__text { color: var(--c-text-muted); margin-top: var(--sp-3); max-width: 56ch; }
.cta-band__price { font: 600 var(--fs-h3)/1.2 var(--font-mono); margin-top: var(--sp-3); }

/* ---------- Статья, политика, вакансия: длинный текст ---------- */
.prose { max-width: 72ch; font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-h3); margin-top: 2em; }
.prose h3 { font-size: 1.1875rem; margin-top: 1.6em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--c-text-faint); }
.prose a { color: var(--c-text); text-decoration-color: var(--c-honey); text-decoration-thickness: 2px; }
.prose blockquote { margin: 1.5em 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); border-left: 3px solid var(--c-honey); color: var(--c-text-muted); }
.prose img, .prose figure { border-radius: var(--r-md); }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-size: var(--fs-small); color: var(--c-text-muted); margin-top: var(--sp-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); }
.prose strong { font-weight: 600; }

/* ---------- Мета записи (дата, рубрика) ---------- */
.post-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font: 500 var(--fs-caption)/1.4 var(--font-mono); color: var(--c-text-muted); letter-spacing: .03em; }
.post-meta a { color: inherit; }

/* ---------- Карточка записи блога ---------- */
.post-card { display: grid; gap: var(--sp-3); text-decoration: none; color: inherit; min-width: 0; }
.post-card__cover { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); }
.post-card__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.post-card:hover .post-card__title { text-decoration: underline; text-decoration-color: var(--c-honey); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.post-card__excerpt { font-size: var(--fs-small); color: var(--c-text-muted); }

/* ---------- Карточка работы (портфолио) ---------- */
.work-card { display: grid; gap: var(--sp-2); min-width: 0; }
.work-card__shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); }
.work-card__name { font-weight: 600; line-height: 1.35; }
.work-card__domain { font: 400 var(--fs-caption)/1.4 var(--font-mono); color: var(--c-text-muted); }
.work-card__niche { font-size: var(--fs-small); color: var(--c-text-muted); }
a.work-card { text-decoration: none; color: inherit; }
a.work-card .work-card__shot { transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
a.work-card:hover .work-card__shot { transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* ---------- Фильтр-чипы (рубрики, отрасли) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface);
  font-size: var(--fs-small); font-weight: 500; text-decoration: none; color: var(--c-text);
}
.chip:hover { border-color: var(--c-text); }
.chip[aria-current] { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }

/* ---------- Связанные услуги R · G · B ---------- */
.related__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Блок только для страниц услуг: карточку текущей услуги скрываем (сборщик ставит ей aria-current), остаётся 4 */
.related__grid [aria-current="page"] { display: none; }

/* ---------- Пустое состояние ---------- */
.empty-note { padding: var(--sp-8); border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg); color: var(--c-text-muted); text-align: center; }

/* ---------- Кейс-витрина: скриншот + текст ---------- */
.cases { display: grid; gap: var(--sp-6); }
.case-show {
  display: grid; overflow: hidden; min-width: 0;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.case-show__shot { background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); min-height: 0; aspect-ratio: 16 / 10; }
.case-show__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.case-show--contain .case-show__shot { padding: var(--sp-4); }
.case-show--contain .case-show__shot img { object-fit: contain; object-position: center; }
.case-show__text { display: grid; gap: var(--sp-3); align-content: center; justify-items: start; padding: clamp(var(--sp-5), 2.5vw, var(--sp-8)); min-width: 0; }
.case-show__title { font-size: var(--fs-h3); }
.case-show__domain { margin-top: calc(-1 * var(--sp-2)); font-size: var(--fs-small); color: var(--c-text-faint); }
a.case-show__domain { text-decoration: none; }
a.case-show__domain:hover { color: var(--c-text); text-decoration: underline; }
.case-show__desc { font-size: var(--fs-small); color: var(--c-text-muted); }
@media (min-width: 800px) {
  .case-show { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .case-show__shot { aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--c-line); }
}

/* ==========================================================================
   Блог: список записей, рубрики, статья
   ========================================================================== */
/* ---------- Шапка: вступление блога, мета записи ---------- */
.blog-intro { display: grid; gap: var(--sp-3); }
.post-hero .page-hero__title { max-width: 26ch; font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem); }
.post-hero .post-meta { color: var(--c-text-muted); }

/* ---------- Рубрики и сетка записей ---------- */
.blog-cats { margin-bottom: var(--sp-10); }
.blog-cats__title { margin-bottom: var(--sp-3); }
.blog-grid { row-gap: var(--sp-10); }
/* Обложки старых записей — 1000×620: показываем целиком, без обрезки */
.blog-grid .post-card__cover { aspect-ratio: 50 / 31; }

/* Пустая рубрика */
.blog-empty { display: grid; justify-items: center; gap: var(--sp-3); }

/* ---------- Статья ---------- */
.post-body figure img { border: 1px solid var(--c-line); background: var(--c-surface); }
.post-body blockquote cite { display: block; font-style: normal; font-size: var(--fs-small); color: var(--c-text-faint); }
.post-body blockquote p + p { margin-top: var(--sp-2); }
/* Пояснение термина (было всплывающей подсказкой на старом сайте) */
.post-hint { text-decoration: underline dotted var(--c-text-faint); text-underline-offset: .2em; cursor: help; }
/* Врезка внутри статьи: «Статьи по теме», «Акция» */
.post-note {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6); border: 1px solid var(--c-line); border-left: 3px solid var(--c-honey);
  border-radius: var(--r-md); background: var(--c-surface);
}
.prose .post-note { margin-block: 1.5em; }
.prose .post-note h3 { margin-top: 0; }
.post-note > * + * { margin-top: 0; }

/* Боковая карточка статьи */
.post-aside { gap: var(--sp-5); }
.post-aside .chips { gap: var(--sp-2); }

/* ---------- Список записей: первая запись широкой карточкой ---------- */
/* Первая запись занимает всю строку сетки */
.blog-grid--lead > li:first-child { grid-column: 1 / -1; }

.post-card__body { display: grid; gap: var(--sp-3); align-content: center; justify-items: start; min-width: 0; }
.post-card__more { color: var(--c-text); }

.post-card--wide {
  padding: var(--sp-3); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.post-card--wide:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-card); }
.post-card--wide .post-card__body { padding: 0 var(--sp-2) var(--sp-2); }
.post-card--wide .post-card__title { font-size: var(--fs-h3); }

@media (min-width: 800px) {
  .post-card--wide {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
    gap: clamp(var(--sp-6), 3vw, var(--sp-10)); padding: var(--sp-4);
  }
  .post-card--wide .post-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; gap: var(--sp-4); }
  .post-card--wide .post-card__title { font-size: clamp(1.5rem, 1.05rem + 1vw, 2rem); line-height: 1.2; }
  .post-card--wide .post-card__excerpt { font-size: var(--fs-body); }
}

/* Подпись под списком: «Скоро здесь появятся новые статьи» */
.blog-soon {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg);
  font-size: var(--fs-small); color: var(--c-text-muted);
}
.blog-soon::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-honey);
}

/* ==========================================================================
   Страница вакансии: текст + карточка «Зарплата и отклик»
   ========================================================================== */
.vacancy-text h2:first-child { margin-top: 0; }
.vacancy-text__reply { padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--c-honey); background: var(--c-surface); border-radius: 0 var(--r-md) var(--r-md) 0; }
.vacancy-text a { overflow-wrap: anywhere; }

.vacancy-facts { display: grid; margin: 0; border-top: 1px solid var(--c-line); font-size: var(--fs-small); }
.vacancy-facts > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); border-bottom: 1px solid var(--c-line); }
.vacancy-facts dt { color: var(--c-text-muted); }
.vacancy-facts dd { margin: 0; font-weight: 600; text-align: right; }
.vacancy-mail { font: 500 var(--fs-caption)/1.4 var(--font-mono); color: var(--c-text-muted); text-align: center; overflow-wrap: anywhere; }

/* Только /vacancy/sales/: цена текстом и загадка для сопроводительного письма */
.aside-card__price--text { font-size: 1.25rem; }
.vacancy-riddle { padding: var(--sp-3) var(--sp-4); margin-block: var(--sp-3); background: color-mix(in srgb, var(--c-honey) 16%, var(--c-surface)); border-radius: var(--r-md); }
.prose li.vacancy-riddle::marker { color: var(--c-honey); }