/* ============================================================
   .article-content — единые стили контента статьи.
   Применяется ТОЛЬКО внутри .article-content (scoped).
   Токены и типографика взяты из Figma (r52vB2MAsV15DAfsM8TzdC).
   ============================================================ */
.article-content {
  color: #1d1d1d;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  /* Нейтрализация глобальных site.less правил:
       body h1/h2 центруют + uppercase + ::after; .content p имеет
       text-indent 4rem и justify. Внутри статьи это не нужно. */
  /* Лид-параграф (Figma 1:51) — TextRegular 14/1.5, цвет
       second-text rgba(29,29,29,0.6). */
  /* Caption над изображением (Figma 1:75 — figcaption ВЫШЕ image) */
  /* Маркированный список — зелёная точка-кружок 8px (как в Figma 1:54..1:70) */
  /* Нумерованный список — Figma 1:87: Roboto Bold #2e5b35,
       Roboto Regular #1d1d1d. Поддержка иерархии любой глубины
       (1 → 1.1 → 1.1.2 → …) через CSS counters(). Создаётся
       автоматически от вложенности <ol><li><ol>… (TinyMCE: Tab/indent).

       Если на <li> явно прописан data-num — он перебивает только
       ДИСПЛЕЙ номера (легаси-контент с ручной нумерацией «2.1»,
       «2.1.2»). Счётчик при этом всё равно ИНКРЕМЕНТИРУЕТСЯ, чтобы
       соседи получали следующий по порядку номер: Enter в TinyMCE
       создаёт новый <li> без data-num, и он показывает уже counter+1.

       При нажатии Tab/Enter в TinyMCE наш обработчик в vRedactorArticle
       стирает data-num у новых/перенесённых пунктов — новое значение
       идёт строго от фактической вложенности через counters(). */
  /* Подпись таблицы как отдельный <p> (Figma 1:108):
       Roboto Italic 12 #545454. */
  /* Таблицы (Figma 1:109..1:127):
       header — тёмно-серый #333 + Roboto 18 white;
       rows — zebra #f5f7f8 / #fff, Roboto 14 #333, тонкая нижняя граница;
       внешний скруг 8px, без видимых внутренних боковых границ. */
  /* Mobile: горизонтальный скролл таблиц */
  /* Изображения. Глобальное правило site.less задаёт
       `#content img { height: 250px }` — перебиваем !important. */
  /* Картинка с заданным соотношением 1280:720 (Figma 1:77). */
  /* Цитата (TinyMCE quoteToggle) — Figma 1:81 «Important info section».
       bg #f6fce9, border-left 2px #94c121, radius 4px, padding 24px 16px,
       gap 8px между иконкой и текстом, text rgba(29,29,29,0.6) 14/1.5.
       Иконка — SVG info-circle (Figma 1:82). */
  /* Плашки (наследие vRedactor) */
}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  text-align: left;
  text-transform: none;
  margin-top: 1.6em;
}
.article-content h1::after,
.article-content h2::after,
.article-content h3::after,
.article-content h4::after,
.article-content h5::after,
.article-content h6::after {
  display: none !important;
  content: none !important;
}
.article-content p {
  text-indent: 0;
  text-align: left;
}
.article-content h2,
.article-content h3,
.article-content h4 {
  color: #1d1d1d;
  margin: 1.6em 0 0.6em;
}
.article-content h2 {
  font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.5;
}
.article-content h3 {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
}
.article-content h4 {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
}
.article-content p {
  margin: 0 0 1em;
}
.article-content .article-lead,
.article-content p.article-lead {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(29, 29, 29, 0.6);
  margin: 0 0 24px;
}
.article-content figure {
  margin: 1.5em 0;
  display: flex;
  flex-direction: column;
  /* перебиваем глобальное .wrap .content #content img { padding-bottom: 10px } */
}
.article-content figure figcaption {
  order: -1;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
  line-height: 1;
  color: #545454;
  margin: 0 0 10px;
}
.article-content figure > img,
.article-content figure img {
  margin: 0;
  padding: 0 !important;
  border-radius: 8px;
}
.article-content a {
  color: #2e5b35;
  text-decoration: underline;
}
.article-content a:hover {
  text-decoration: none;
}
.article-content ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1em;
}
.article-content ul li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
}
.article-content ul li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: #2e5b35;
  border-radius: 50%;
}
.article-content ol {
  counter-reset: article-ol;
  list-style: none;
  padding-left: 0;
  margin: 0 0 1em;
}
.article-content ol li {
  position: relative;
  padding-left: 52px;
  margin-bottom: 10px;
  counter-increment: article-ol;
  line-height: 1.5;
}
/* Figma 1:97: номер сидит в фикс-боксе 42px, выровнен по ПРАВОМУ
   краю, дальше 10px зазор и текст. Длинные «2.1.2» (~28px) свободно
   помещаются в 42px и не «съезжают» вправо. */
.article-content ol li::before {
  content: counters(article-ol, '.') '.';
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  text-align: right;
  white-space: nowrap;
  color: #2e5b35;
  font-weight: 700;
  font-family: 'Roboto', Arial, sans-serif;
  line-height: 1.5;
}
/* Легаси data-num: только подменяем ДИСПЛЕЙ номера, счётчик
   всё равно идёт — иначе сосед после Enter получит «не следующий» номер. */
.article-content ol li[data-num]::before {
  content: attr(data-num);
}
/* Вложенные ol: текст подпункта в той же колонке, что и текст
   родительского пункта. Компенсируем padding-left:52px родителя
   отрицательным margin-left. */
.article-content ol ol {
  margin: 8px 0 0 -52px;
}
/* На глубине ≥4 счётчик «1.1.1.1.» (~44px) шире базового 42px-бокса —
   расширяем влево, правый край остаётся в той же колонке. */
.article-content ol ol ol ol li::before {
  left: -20px;
  width: 62px;
}
.article-content ol ol ol ol ol li::before {
  left: -38px;
  width: 80px;
}
/* TinyMCE list plugin создаёт пустые wrapper-li с
   `style="list-style-type: none"` для вложения дочернего <ol>.
   У них нет своего текста, но ::before рисует counters() поверх
   первой строки вложенного контента — несколько ::before в одной
   точке выглядят как «наложение цифр» (особенно заметно когда
   первая цифра ≠ 1). Скрываем номер у wrapper-li. */
.article-content ol li[style*="list-style-type: none"]::before,
.article-content ol li[style*="list-style-type:none"]::before {
  content: none;
}
.article-content p.table-caption,
.article-content .table-caption {
  font-family: 'Roboto', Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #545454;
  margin: 1.5em 0 8px;
}
.article-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5em 0;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d7d7d7;
}
.article-content table thead th,
.article-content table th {
  background: #333;
  color: #fff;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  text-align: left;
  padding: 7px 16px;
  border: none;
}
.article-content table td {
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #d7d7d7;
  vertical-align: top;
  color: #333;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.article-content table tbody tr:nth-child(odd) td {
  background: #f5f7f8;
}
.article-content table tbody tr:nth-child(even) td {
  background: #fff;
}
.article-content table.table1 tbody tr:first-child td {
  background: #333;
  color: #fff;
  font-weight: 600;
}
.article-content table.table1 tbody tr:first-child td p {
  color: #fff;
  font-weight: 600;
}
.article-content table tbody tr:last-child td {
  border-bottom: none;
}
.article-content table caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  color: #545454;
  font-style: italic;
  padding-bottom: 8px;
}
@media (max-width: 767px) {
  .article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}
.article-content img {
  display: block;
  max-width: 100%;
  height: auto !important;
  width: 100%;
  border-radius: 8px;
  margin: 1.5em 0;
  padding: 0 !important;
}
.article-content figure img,
.article-content img.article-figure {
  aspect-ratio: 1280 / 720;
  object-fit: cover;
  width: 100%;
}
.article-content blockquote.article-quote {
  position: relative;
  margin: 1.5em 0;
  padding: 24px 16px 24px 48px;
  border: none;
  border-left: 2px solid #94c121;
  background: #f6fce9;
  border-radius: 4px;
  color: rgba(29, 29, 29, 0.6);
  font-size: 14px;
  line-height: 1.5;
  font-style: normal;
  font-family: 'Roboto', Arial, sans-serif;
  word-break: break-word;
  /* Иконка info-circle в каждой цитате через CSS — рисуется автоматически,
           инлайн SVG в HTML больше не нужен. */
  /* Совместимость: если в старых статьях остался инлайн SVG — прячем его,
           чтобы не дублировался поверх ::before. */
}
.article-content blockquote.article-quote::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 24px;
  width: 17px;
  height: 21px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M7 1.4C3.91 1.4 1.4 3.91 1.4 7C1.4 10.09 3.91 12.6 7 12.6C10.09 12.6 12.6 10.09 12.6 7C12.6 3.91 10.09 1.4 7 1.4ZM0 7C0 3.13 3.13 0 7 0C10.87 0 14 3.13 14 7C14 10.87 10.87 14 7 14C3.13 14 0 10.87 0 7Z' fill='%23737373'/><path d='M6.125 4.375C6.125 3.89175 6.51675 3.5 7 3.5C7.48325 3.5 7.875 3.89175 7.875 4.375C7.875 4.85825 7.48325 5.25 7 5.25C6.51675 5.25 6.125 4.85825 6.125 4.375Z' fill='%23737373'/><path d='M6.125 7C6.125 6.51675 6.51675 6.125 7 6.125C7.48325 6.125 7.875 6.51675 7.875 7V9.625C7.875 10.1083 7.48325 10.5 7 10.5C6.51675 10.5 6.125 10.1083 6.125 9.625V7Z' fill='%23737373'/></svg>") no-repeat center / contain;
}
.article-content blockquote.article-quote > svg.article-quote__ico,
.article-content blockquote.article-quote > .article-quote__ico {
  display: none;
}
.article-content blockquote.article-quote p {
  margin: 0 0 0.5em;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(29, 29, 29, 0.6);
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 400;
}
.article-content blockquote.article-quote p:last-child {
  margin-bottom: 0;
}
.article-content ul.plashki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0;
  margin: 1em 0;
}
.article-content ul.plashki li {
  padding: 6px 14px;
  background: #f5f7f8;
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  font-size: 14px;
  margin: 0;
  color: #1d1d1d;
  padding-left: 14px;
}
.article-content ul.plashki li::before {
  display: none;
}