/* ============================================================================
   INSIDER.pm — страница «Консалтинг» (/consulting)
   ============================================================================
   Подключается ПОСЛЕ /elements/elements.css и /elements/layout.css (там —
   базовая сетка .page-grid и шапка сайта):
     <link rel="stylesheet" href="/elements/elements.css">
     <link rel="stylesheet" href="/elements/layout.css">
     <link rel="stylesheet" href="/consulting/consulting.css">

   Собственный файл страницы, ни от чего больше не зависит — тем же приёмом,
   что about.css у страницы «О проекте» и guide.css у гида. Базовые значения
   (токены, лист, типографика, FAQ) взяты оттуда же, чтобы страница выглядела
   частью того же сайта.

   Отличие от about/guide — два блока, которых в тексте издания нет: карточки
   аудиторий (§8) и панели форматов с ценой (§9). Это страница услуги: читатель
   ищет на ней «кому это» и «сколько стоит», и оба ответа должны находиться без
   чтения текста подряд.

   Страница не грузит landing/styles.css, поэтому база (сброс, шрифт, фон)
   повторена здесь — теми же значениями, что в about.css и guide.css.

   Структура:
   1. Дизайн-токены
   2. База страницы (сброс, шрифт, фон, фокус)
   3. Раскладка: .consulting-page в сетке
   4. Панель хлебных крошек
   5. Лист страницы, заголовок, лид, дата, кнопка
   6. Блок «Коротко»
   7. Основной текст
   8. Карточки аудиторий
   9. Форматы и стоимость
   10. FAQ, «Читайте дальше», подпись и оговорка
   ============================================================================ */

/* ============================================================================
   1. ДИЗАЙН-ТОКЕНЫ
   ============================================================================ */
:root {
  --primary:        #2563eb;
  --primary-dark:   #1d4ed8;
  --primary-border: #bfdbfe;

  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;

  --radius:    12px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --font-main: 'Inter', sans-serif;
}

/* ============================================================================
   2. БАЗА СТРАНИЦЫ
   ----------------------------------------------------------------------------
   Без этого блока страница рисуется системным шрифтом с засечками на белом
   фоне, а лист считает ширину по content-box и расходится с шапкой и подвалом.
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background-color: #f5f0e6;
  color: var(--slate-600);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================================
   3. РАСКЛАДКА
   ----------------------------------------------------------------------------
   Контентный слот страницы: панель крошек сверху, лист под ней — так же
   устроены /about, страницы гида (.guide-page) и поста (.news-page).
   ============================================================================ */
.page-grid > .consulting-page {
  grid-column: 1 / -1;
  min-width: 0;
}

.consulting-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 6px;
}

/* Якоря есть почти у всех разделов страницы (в том числе #pricing — на него
   ссылается разметка предложений): цель ссылки не должна вставать вплотную
   к верху окна. */
.consulting-page [id] { scroll-margin-top: 1rem; }

/* ============================================================================
   4. ПАНЕЛЬ ХЛЕБНЫХ КРОШЕК
   ============================================================================ */
.consulting-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.consulting-nav__item {
  font-size: 14px;
  font-weight: 600;
}

.consulting-nav__link {
  color: var(--primary);
  text-decoration: none;
}

.consulting-nav__link:hover {
  text-decoration: underline;
}

.consulting-nav__current {
  color: var(--slate-600);
}

.consulting-nav__sep {
  color: var(--slate-200);
}

/* ============================================================================
   5. ЛИСТ СТРАНИЦЫ
   ============================================================================ */
.consulting {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

@media (min-width: 768px) {
  .consulting { padding: 32px; }
}

.consulting-h1 {
  margin: 0 0 0.5em;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--slate-900);
}

@media (min-width: 768px) {
  .consulting-h1 { font-size: 32px; }
}

.consulting-lead {
  margin: 0 0 0.75em;
  font-size: 17px;
  color: var(--slate-700);
  line-height: 1.6;
}

.consulting-updated {
  margin: 0 0 1.25em;
  font-size: 13px;
  color: var(--slate-500);
}

/* Кнопка обращения. Единственный call to action страницы, поэтому стоит
   дважды — здесь и текстом в разделе «Связаться»; повторять её после каждого
   блока смысла нет, страница читается целиком. */
.consulting-actions {
  margin: 0 0 1.5em;
}

.consulting-btn {
  display: inline-block;
  padding: 12px 22px;
  background: var(--primary);
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.consulting-btn:hover {
  background: var(--primary-dark);
}

@media (prefers-reduced-motion: reduce) {
  .consulting-btn { transition: none; }
}

/* ============================================================================
   6. БЛОК «КОРОТКО»
   ============================================================================ */
.consulting-summary {
  margin: 0 0 1.5em;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.consulting-summary h2 {
  margin: 0 0 0.5rem;
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
}

.consulting-summary ul {
  margin: 0;
  padding-left: 1.3em;
  color: var(--slate-700);
}

.consulting-summary li + li { margin-top: 0.35em; }

.consulting-summary a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================================
   7. ОСНОВНОЙ ТЕКСТ
   ============================================================================ */
.consulting-body {
  font-size: 16.5px;
  color: #1f2937;
  line-height: 1.6;
}

.consulting-body h2 {
  margin: 1.5em 0 0.5em;
  font-size: 22px;
  font-weight: 700;
  color: var(--slate-900);
}

.consulting-body h3 {
  margin: 1.5em 0 0.5em;
  font-size: 19px;
  font-weight: 700;
  color: var(--slate-900);
}

.consulting-body p {
  margin: 1em 0 0;
}

.consulting-body ul,
.consulting-body ol {
  margin: 1em 0 0;
  padding-left: 1.3em;
}

.consulting-body li + li { margin-top: 0.35em; }

.consulting-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consulting-body strong { font-weight: 700; }

/* ============================================================================
   8. КАРТОЧКИ АУДИТОРИЙ
   ----------------------------------------------------------------------------
   Три равноправных блока «кому это адресовано»: читатель узнаёт себя в одном
   из них и читает только его, поэтому они разложены рядом, а не подряд
   абзацами. Колонки набираются автоматически (auto-fit + minmax): на телефоне
   одна, на планшете две, на десктопе три — без отдельных медиазапросов.
   ============================================================================ */
.consulting-audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 12px;
  margin-top: 1.5em;
}

.audience-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.audience-card h3 {
  margin: 0 0 0.5rem;
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
}

.audience-card p {
  margin: 0 0 0.75em;
  font-size: 15px;
  color: var(--slate-600);
  line-height: 1.55;
}

.audience-card ul {
  margin: 0 0 0.75em;
  padding-left: 1.2em;
  font-size: 15px;
  color: var(--slate-600);
}

.audience-card li + li { margin-top: 0.3em; }

/* Строка «главная ценность» — вывод карточки, поэтому прижата к её низу
   (margin-block-start: auto) и отбита линией: у карточек разной длины выводы
   встают на одну линию и сравниваются взглядом.

   Селектор из двух классов — по той же причине, что у .plan__price ниже:
   `.audience-card p` перебивает одиночный класс независимо от порядка. */
.audience-card .audience-card__outcome {
  margin: auto 0 0;
  padding-top: 0.75em;
  border-top: 1px solid var(--slate-200);
  color: var(--slate-700);
}

/* ============================================================================
   9. ФОРМАТЫ И СТОИМОСТЬ
   ----------------------------------------------------------------------------
   Две панели: почасовая консультация с ценой и письменная работа без неё.
   Цена набрана крупно — это второй вопрос читателя после «кому это нужно»,
   и он не должен искать её в абзаце.
   ============================================================================ */
.consulting-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 12px;
  margin-top: 1.5em;
}

.plan {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.plan p {
  margin: 0.75em 0 0;
  font-size: 15px;
  color: var(--slate-600);
  line-height: 1.55;
}

.plan__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
}

/* Селектор из двух классов, а не одного: `.plan p` выше по специфичности,
   и одиночный `.plan__price` она перебила бы независимо от порядка правил. */
.plan .plan__price {
  margin: 0.4em 0 0.6em;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--slate-900);
}

/* На телефоне кегль меньше: во второй панели вместо суммы стоит строка «По
   договорённости», и на 28px она разваливается на три строки. */
@media (min-width: 768px) {
  .plan .plan__price { font-size: 28px; }
}

.plan__unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-500);
}

/* ============================================================================
   10. FAQ, «ЧИТАЙТЕ ДАЛЬШЕ», ПОДПИСЬ И ОГОВОРКА
   ----------------------------------------------------------------------------
   FAQ оформлен панелью, как в гиде: короткие пары «вопрос — ответ», которые
   читают выборочно. Разметка плоская (h3 + p подряд), обёрток вокруг пар нет.
   ============================================================================ */
.consulting-faq {
  margin-top: 2.5em;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.consulting-faq > h2 {
  margin: 0 0 1rem;
  font-size: 22px;
  font-weight: 700;
  color: var(--slate-900);
}

.consulting-faq h3 {
  margin: 1.25em 0 0.4em;
  padding-top: 1.25em;
  border-top: 1px solid var(--slate-200);
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
}

.consulting-faq h3:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.consulting-faq p {
  margin: 0;
  font-size: 16.5px;
  color: #1f2937;
}

.consulting-faq a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consulting-next {
  margin-top: 2em;
}

.consulting-next > h2 {
  margin: 0 0 0.5em;
  font-size: 22px;
  font-weight: 700;
  color: var(--slate-900);
}

.consulting-next ul {
  margin: 0;
  padding-left: 1.3em;
}

.consulting-next li + li { margin-top: 0.35em; }

.consulting-next a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Подпись — кто ведёт консультации и по каким правилам работает издание.
   Отдельно от оговорки ниже: там правовая сноска, здесь атрибуция. */
.consulting-publisher {
  margin: 2em 0 0;
  font-size: 13px;
  color: var(--slate-500);
}

.consulting-publisher a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consulting-disclaimer {
  margin: 1em 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--slate-500);
}