/* ============================================================
   EXOSYSTEM — блог exosystem.tech/blog/
   ДОБАВКА к лендинговому assets/css/style.css, а не замена ему.
   Палитра, шрифты, кнопки, шапка, подвал и «документный» макет
   (.doc-page/.doc-layout/.doc-wrap) берутся оттуда как есть —
   здесь только то, чего в лендинге нет: карточки списка статей,
   блок короткого ответа, строка источника и финальный блок CTA.
   Свои переменные не заводим намеренно: цвет должен ехать
   вместе с лендингом, а не отдельно от него.
   ============================================================ */

/* ---------- Список статей на /blog/ ---------- */
.blog-list{display:flex;flex-direction:column;gap:14px;margin:0 0 8px;padding:0;list-style:none}
.blog-card{
  display:block;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:18px;padding:22px 24px;transition:border-color .2s, background .2s, transform .2s;
}
.blog-card:hover{border-color:#3a3c40;background:var(--surface-2);transform:translateY(-1px)}
.blog-card .blog-cat{
  color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;display:block;margin-bottom:8px;
}
.blog-card h2{
  font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.3px;
  color:var(--text);margin:0 0 8px;
}
.blog-card:hover h2{color:var(--accent-strong)}
.blog-card p{color:#c7c9cd;font-size:14.8px;margin:0 0 10px}
.blog-card .blog-meta{color:var(--text-2);font-size:12.5px;font-family:var(--mono)}

/* ---------- Короткий ответ: то, что должно быть видно сразу ---------- */
.answer{
  background:rgba(168,199,250,.07);border:1px solid rgba(168,199,250,.28);
  border-radius:18px;padding:18px 22px;margin:0 0 26px;
}
.answer .answer-t{
  color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;display:block;margin-bottom:8px;
}
.answer p{margin-bottom:8px}
.answer p:last-child{margin-bottom:0}

/* ---------- Строка источника под фактом и таблицей ---------- */
.src{
  color:var(--text-2);font-size:12.8px;line-height:1.55;
  margin:-8px 0 18px;padding-left:14px;border-left:2px solid var(--border);
}
.doc-wrap .src{color:var(--text-2)}

/* ---------- Заголовок третьего уровня (в лендинге .doc-wrap h3 не описан) ---------- */
.doc-wrap h3{font-size:16.5px;font-weight:700;letter-spacing:-.2px;margin:26px 0 10px;color:var(--text)}

/* ---------- Финальный блок: реклама ПОСЛЕ содержания, а не вместо ---------- */
.cta-block{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:22px;padding:26px 28px;margin:38px 0 0;
}
.cta-block h2{margin-top:0}
.cta-block .cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* ============================================================
   Шапка блога стала двухрядной — и накрыла первую строку
   ============================================================
   04.08 в шапку блога добавили общее меню сайта: до этого его здесь
   не было вовсе, со статьи нельзя было уйти ни в один раздел.
   На узком экране меню уезжает под логотип отдельной строкой
   (правило ≤1020px в общем style.css), и шапка вырастает с 68 px
   до 115–196 px в зависимости от ширины. Плавающая шапка при этом
   села поверх начала страницы: на 375 px слово «БЛОГ» уходило под
   неё на 10 px, на 481 px — целиком. На лендинге этого не видно,
   потому что там шапка до прокрутки прозрачная, а в блоге она
   сплошная (.solid) и просто срезает текст.
   Подбирать отступ числом бесполезно — высота скачет от ширины.
   Поэтому на узких экранах шапка перестаёт быть плавающей и встаёт
   в поток: место под себя она резервирует сама, а при прокрутке
   по-прежнему липнет к верху. Правило лежит здесь, а не в общем
   style.css, намеренно: этот файл подключают только четыре
   страницы блога, лендинга он не касается. */
@media (max-width:1020px){
  .site-header.solid{position:sticky}
  .doc-page{padding-top:28px}
  /* Липкий сайдбар отсчитывал свой top от шапки в один ряд. */
  .doc-sidebar{top:152px}
}

@media (max-width:760px){
  .blog-card{padding:18px 18px}
  .blog-card h2{font-size:17px}
  .cta-block{padding:20px 20px}
  .doc-page{padding-top:20px}
}

/* Отбор по теме (04.08.2026). Скромный ряд чипов над списком: это навигация по
   содержанию, а не второй заголовок. Кнопки открывает скрипт — без него их нет. */
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.blog-tag{
  border:1px solid var(--border,#2a2c30); background:transparent; cursor:pointer;
  border-radius:100px; padding:6px 14px; font:inherit; font-size:13.5px;
  color:var(--text-2,#9aa0a6); transition:.15s;
}
.blog-tag:hover{color:var(--text,#e8eaed)}
.blog-tag.is-on{background:var(--surface,#1b1d21);color:var(--text,#e8eaed);border-color:#3a3c40}