/* Б-16 Статья и текстовая страница. Источник: по вёрстке verter.me/wms/, перерисован */

.b-article {
  padding-block: var(--space-6) var(--space-section);
  background: var(--color-bg);
}

.b-article__head {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: 48rem;
  margin-bottom: var(--space-7);
}

.b-article__title {
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  overflow-wrap: anywhere;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}

.b-article__lead {
  color: var(--color-text-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.b-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  color: var(--color-text-subtle);
  font-size: var(--fs-small);
}

.b-article__body {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.b-article__stub {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-6);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.b-article__stub-title {
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-bold);
}

/* Врезки внутри текста: чек-лист и «важно» */
.b-article__callout {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent-softer);
}

.b-article__checklist {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.b-article__checklist li {
  position: relative;
  padding-left: 2rem;
}

.b-article__checklist li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.3rem;
  background: var(--color-accent);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}

/* Раскладка «оглавление + текст», автор под заголовком */
.b-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.b-article__layout > * {
  min-width: 0;
}

.b-article__head .b-author {
  margin-top: var(--space-2);
}

.b-article__layout .b-article__body > * + * {
  margin-top: var(--space-6);
}

.b-article__body .c-richtext {
  max-width: 46rem;
}

/* Стили редактора внутри статьи: таблица с прокруткой, чек-листы, схема трёх звеньев */
.b-article .c-richtext > :first-child {
  margin-top: 0;
}

.b-article .c-table-scroll {
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.c-richtext .b-article__checklist {
  padding-left: 0;
}

/* Чек-лист, который читатель отмечает сам: пустые квадраты вместо галочек */
.b-article__checklist--todo li::before {
  border: 2px solid var(--color-accent);
  border-radius: 0.3rem;
  background: none;
  clip-path: none;
}

/* Схема трёх звеньев в тексте статьи (упрощённый Б-23, без логотипов) */
.b-article__scheme {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.c-richtext .b-article__scheme {
  padding-left: 0;
}

.b-article__scheme-item {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  line-height: var(--lh-snug);
}

.c-richtext .b-article__scheme-item {
  margin-top: 0;
}

.b-article__scheme-item--core {
  background: var(--gradient-accent-panel);
  color: var(--color-text-inverse);
}

.b-article__scheme-name {
  font-weight: var(--font-weight-bold);
}

.b-article__scheme-text {
  font-size: var(--fs-small);
}

.b-article__scheme-item + .b-article__scheme-item::before {
  content: "↕";
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 50%;
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  transform: translate(-50%, -15%);
}

@media (min-width: 768px) {
  .b-article__scheme {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .b-article__scheme-item + .b-article__scheme-item::before {
    content: "↔";
    top: 50%;
    left: calc(-1 * var(--space-6) / 2);
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 1024px) {
  .b-article__body {
    padding: var(--space-9);
    border-radius: var(--radius-xl);
  }

  .b-article__layout {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
  }

  .b-article__toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
  }
}