/* ============================================================
   design-blog.css — типографика СТАТЕЙ блога (/blog/<slug>)
   Порядок подключения: base.css -> design-cases.css -> design-blog.css -> common.css
   Наследует каркас .root--cases (тёмный фон, цвет, флюид font-size:1.33vw).
   Даёт читаемую прозу статьи: заголовки, абзацы, списки, таблицы,
   картинки-фигуры, FAQ, CTA. Всё в em (флюид, как весь сайт).
   ============================================================ */

/* Колонка статьи */
.article {
  max-width: 46em;
  color: rgba(219, 219, 219, 0.92);
  font-family: "TildaSans Light", sans-serif;
  font-weight: 300;
  font-size: 1.05em;
  line-height: 1.7;
}

/* Мета-строка над статьёй (рубрика · дата) */
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.6em; row-gap: 0.3em;
  font-family: "TildaSans Medium"; font-size: 0.85em; color: rgba(219, 219, 219, 0.55);
  margin-bottom: 1.6em;
}
.article__meta .tag {
  font-family: "TildaSans Semibold"; color: rgba(23, 8, 31, 1);
  background: rgba(202, 251, 0, 1); padding: 0.25em 0.85em; border-radius: 999px; font-size: 0.95em;
}
.article__meta span + span::before { content: "·"; margin-right: 0.6em; color: rgba(219, 219, 219, 0.3); }

/* Лид под заголовком */
.article__lead {
  font-family: "TildaSans Medium"; font-weight: 500; font-size: 1.2em; line-height: 1.55;
  color: rgba(255, 255, 255, 0.92); max-width: 40em; margin-bottom: 1.8em;
}

/* Заголовки внутри статьи */
.article h2 {
  font-family: "Comfortaa Bold"; font-weight: 700; color: #fff;
  font-size: 1.75em; line-height: 1.15; letter-spacing: -0.02em;
  max-width: 20em; margin: 1.9em 0 0.7em;
}
.article h3 {
  font-family: "TildaSans Semibold"; font-weight: 600; color: #fff;
  font-size: 1.25em; line-height: 1.25; margin: 1.5em 0 0.5em;
}
.article h2:first-child, .article h3:first-child { margin-top: 0; }

/* Абзацы */
.article p { margin: 0 0 1.1em; }
.article strong, .article b { font-family: "TildaSans Semibold"; font-weight: 600; color: #fff; }
.article a { color: rgba(202, 251, 0, 1); text-decoration: none; border-bottom: 1px solid rgba(202, 251, 0, 0.35); }
.article a:hover { border-bottom-color: rgba(202, 251, 0, 1); }

/* Списки */
.article ul, .article ol { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
.article li { position: relative; padding-left: 1.7em; margin-bottom: 0.6em; }
.article ul > li::before {
  content: ""; position: absolute; left: 0.15em; top: 0.62em;
  width: 0.5em; height: 0.5em; border-radius: 50%; background: rgba(202, 251, 0, 1);
}
.article ol { counter-reset: li; }
.article ol > li { counter-increment: li; }
.article ol > li::before {
  content: counter(li); position: absolute; left: 0; top: 0.05em;
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: rgba(202, 251, 0, 1); color: rgba(23, 8, 31, 1);
  font-family: "Comfortaa Bold"; font-size: 0.72em; line-height: 1.6em; text-align: center;
}
.article li > strong:first-child { color: #fff; }

/* Таблицы (обёртка для горизонтального скролла на узких экранах) */
.table-wrap { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75em; }
.article table { width: 100%; border-collapse: collapse; font-size: 0.95em; min-width: 34em; }
.article th, .article td {
  text-align: left; padding: 0.85em 1.1em; border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  border-right: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top;
}
.article th:last-child, .article td:last-child { border-right: none; }
.article thead th {
  font-family: "TildaSans Semibold"; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.18);
}
.article tbody tr:last-child td { border-bottom: none; }
.article tbody td:first-child { font-family: "TildaSans Medium"; color: rgba(255, 255, 255, 0.9); }

/* Картинки-фигуры */
.article figure { margin: 1.6em 0; }
.article figure img {
  width: 100%; height: auto; display: block; border-radius: 0.9em;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.article figcaption {
  margin-top: 0.7em; font-family: "TildaSans Medium"; font-size: 0.82em;
  color: rgba(219, 219, 219, 0.5); text-align: center;
}
/* Обложка статьи (шире, без подписи) */
.article-cover { margin: 0 0 2em; }
.article-cover img { width: 100%; height: auto; display: block; border-radius: 1em;
  border: 1px solid rgba(255, 255, 255, 0.08); }

/* FAQ */
.article__faq { margin-top: 1em; }
.faq-item { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1.1em 0; }
.faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.faq-item h3 { margin: 0 0 0.5em; font-size: 1.15em; }
.faq-item p { margin: 0; color: rgba(219, 219, 219, 0.85); }

/* CTA-блок в конце статьи */
.article-cta {
  margin-top: 2.5em; padding: 1.8em 2em;
  background: linear-gradient(135deg, rgba(52, 18, 70, 0.9), rgba(23, 8, 31, 0.9));
  border: 1px solid rgba(202, 251, 0, 0.3); border-radius: 1.1em;
}
.article-cta p { margin: 0 0 1.1em; color: rgba(255, 255, 255, 0.92); font-family: "TildaSans Medium"; font-size: 1.1em; }
.article-cta .main-button { text-decoration: none; width: auto; padding-left: 1.6em; padding-right: 1.6em;
  color: rgba(23, 8, 31, 1); border-bottom: none; }
.article-cta .main-button:hover { filter: brightness(1.05); border-bottom: none; }

/* Перелинковка-мосты на будущие статьи (пока без ссылок) */
.article .soon { color: rgba(219, 219, 219, 0.92); border-bottom: 1px dotted rgba(219, 219, 219, 0.35); }

/* Попап аудита — стили перенесены 1:1 с главной (design-index.css), т.к. блог её не грузит.
   Не изобретаем свои размеры: тот же .popup-consult__content, .popup__title-consult и т.д. */
.popup-consult__body { display: flex; flex-direction: column; align-items: center; row-gap: 0.63em; justify-content: flex-start; }
.popup-consult__content { background-image: linear-gradient(rgba(23,8,31,1) 0%, rgba(23,8,31,1) 100%);
  border-color: rgba(219,219,219,0.6); border-radius: 1.25em; min-width: auto; min-height: auto; max-height: none;
  padding: 1.88em; width: 34.46em; display: flex; flex-direction: column; align-items: center; row-gap: 1.88em;
  color: rgba(219,219,219,1); }
.popup__title-consult { font-family: "Comfortaa Bold"; font-weight: 700; font-size: 1.5em; color: #fff; }
.popup-consult__form-wrap { width: 100%; }

/* Мобильная адаптация: корень 1.33vw мелкий на телефоне -> крупный em (как .legal/.case-card) */
@media (max-width: 479px) {
  .article { font-size: 2.7em; max-width: 100%; }
  .article h2 { font-size: 1.55em; }
  /* лид и мета — вне .article, поэтому крупный em от корня (как .legal 2.9em) */
  .article__lead { font-size: 3em; max-width: 100%; }
  .article__meta { font-size: 2.2em; }
  /* CTA-кнопка = футерная .main-button-copy-2. Внутри .article (2.7em) её мобильный
     множитель 2.91em задваивается → нейтрализуем, чтобы размер совпал с футером. */
  .article-cta .main-button-copy-2 { font-size: 1.08em; }
  /* Попап — мобильные размеры 1:1 с главной (design-index.css @media max-479).
     Кнопки/инпуты/tag-16 мобильные берутся из common.css (уже подключён) — как на главной. */
  .popup__title-consult { font-size: 4.36em; }
  .popup-consult__content { width: 69.01em; row-gap: 3.63em; padding: 3.63em; }
  .popup-consult__close { top: -40px; }
}