/* ══════════════════════════════════════════════════════════════════════════
   Блог сайта 2026 — список статей и длинная статья.
   Надстройка над site-2026.css + pages-2026.css (первый экран, плитки,
   таблица, финальный CTA берутся оттуда). Здесь только то, чего у служебных
   страниц нет: колонка длинного текста, пункты с номером, чек-листы,
   врезки, схема цикла и карточка статьи в списке.

   Оранжевого нет, как и на служебных страницах: статью читают.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── подпись автора под лидом ─────────────────────────────────────────── */

.ar-by {
  margin-top: 26px;
}

/* ── пункты статьи: номер слева, текст справа ─────────────────────────── */

.ar-items {
  margin-top: clamp(34px, 4vw, 60px);
}
.ar-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 760px);
  gap: 24px;
  padding: clamp(30px, 3.4vw, 52px) 0;
  border-top: 1px solid var(--faint);
}
.ar-item:last-child {
  padding-bottom: 0;
}
.ar-item > .lb {
  padding-top: 8px;
}
.ar-item h3 {
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
  margin-bottom: 22px;
}

/* ── колонка длинного текста ──────────────────────────────────────────── */

.ar-prose {
  max-width: 760px;
}
.sec__t + .ar-prose {
  margin-top: clamp(26px, 3vw, 40px);
}
.ar-prose p,
.ar-prose li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--dim);
  text-wrap: pretty;
}
.ar-prose p + p,
.ar-prose p + ul,
.ar-prose ul + p,
.ar-prose * + .ar-check,
.ar-prose * + .ar-note,
.ar-prose * + .pp-table-wrap,
.ar-prose .pp-table-wrap + * {
  margin-top: 18px;
}
.ar-prose b {
  font-weight: 500;
  color: var(--ink);
}
.ar-prose em {
  font-style: italic;
  color: var(--mute);
}
.ar-prose .pp-table-wrap {
  margin-top: 26px;
}
.ar-prose .ar-fig + *,
.ar-prose .ar-chart + *,
.ar-prose .ar-stats + *,
.ar-prose .ar-week + *,
.ar-prose .ar-sr + * {
  margin-top: 30px;
}

/* Маркированный список внутри текста — квадратная точка, как в шапке. */
.ar-dots li {
  position: relative;
  padding-left: 22px;
}
.ar-dots li + li {
  margin-top: 6px;
}
.ar-dots li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: currentColor;
  opacity: 0.6;
}

/* ── чек-лист «Проверьте себя» ────────────────────────────────────────── */

.ar-check {
  padding: 22px 0 4px;
  border-top: 1px solid var(--faint-2);
}
.ar-check .lb {
  margin-bottom: 14px;
}
.ar-check li {
  position: relative;
  padding-left: 32px;
}
.ar-check li + li {
  margin-top: 10px;
}
/* Пустой квадрат вместо галочки: отмечает читатель. */
.ar-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--mute);
  border-radius: 3px;
}

/* ── врезка: «Типичная ошибка», «Важно», «Что это меняет» ─────────────── */

.ar-note {
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--ink);
}
.ar-note p {
  color: var(--ink);
}

/* ── схема цикла: семь шагов в ряд и возврат к началу ─────────────────── */

.ar-cycle {
  margin-top: clamp(34px, 4vw, 60px);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0 clamp(8px, 1.2vw, 16px);
  padding: 0;
  list-style: none;
  counter-reset: ar-step;
}
.ar-cycle li {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding-top: 18px;
  border-top: 2px solid rgba(var(--ink-rgb), 0.22);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ar-cycle li::before {
  counter-increment: ar-step;
  content: counter(ar-step, decimal-leading-zero);
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--mute);
}
/* Первый и последний шаг — полным цветом: здесь цикл замыкается. */
.ar-cycle li:first-child,
.ar-cycle li:last-child {
  border-top-color: var(--ink);
}
.ar-cycle__back {
  margin-top: 26px;
}

/* ── неделя: когда тренировка, когда отчёт ─────────────────────────── */

.ar-week {
  margin: 30px 0 4px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.ar-week > div {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 132px;
  padding: 14px 12px;
  border: 1px solid var(--faint);
  border-radius: var(--r-sm);
}
.ar-week b {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  background: rgba(var(--ink-rgb), 0.08);
}
.ar-week b.is-key {
  background: var(--ink);
  color: var(--on-ink);
}
.ar-week + figcaption,
.ar-week-cap {
  margin-top: 12px;
}

/* ── карточка запуска: таблица с пустой колонкой под ответ ────────────── */

.ar-card td {
  min-width: 220px;
  border-bottom-style: dashed;
}

/* ── иллюстрации: кадры тренажёра и аватары ───────────────────────────── */

.ar-fig {
  margin: 30px 0 4px;
}
.ar-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--faint);
  background: var(--well);
}
.ar-fig figcaption {
  margin-top: 12px;
}

/* Вступление: текст и кадр рядом. */
.ar-split {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.ar-split .ar-fig {
  margin: 0;
}
.sec__t + .ar-split {
  margin-top: clamp(26px, 3vw, 40px);
}

/* ── графики ──────────────────────────────────────────────────────────
   Обычный HTML, без библиотек: столбик — блок с высотой или шириной
   в процентах. Значения подписаны прямо на столбиках, ось не нужна.
   Акцент — полным цветом текста, остальное — его полупрозрачной версией. */

.ar-chart {
  margin: 30px 0 4px;
  padding: 24px clamp(18px, 2.4vw, 28px) 20px;
  border: 1px solid var(--faint);
  border-radius: var(--r-sm);
}
.ar-chart > .lb:first-child {
  margin-bottom: 22px;
}
.ar-chart figcaption {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
}

/* Вертикальные столбики: доля попыток на проходной балл. */
.ar-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 22px);
  align-items: end;
  height: 240px;
  border-bottom: 1px solid var(--faint);
}
.ar-cols__c {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.ar-cols__v {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.ar-cols__bar {
  height: var(--h);
  background: rgba(var(--ink-rgb), 0.22);
  border-radius: 4px 4px 0 0;
}
.ar-cols__c.is-key .ar-cols__bar {
  background: var(--ink);
}
.ar-cols__x {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 22px);
  margin-top: 10px;
}

/* Горизонтальные полосы: июль против августа, выручка по кварталам. */
.ar-bars {
  display: grid;
  gap: 18px;
}
.ar-bars__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 18px;
  align-items: center;
}
.ar-bars__track {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ar-bars__bar {
  flex: none;
  width: var(--w);
  min-width: 6px;
  height: 34px;
  background: rgba(var(--ink-rgb), 0.22);
  border-radius: 0 4px 4px 0;
}
.ar-bars__row.is-key .ar-bars__bar {
  background: var(--ink);
}
.ar-bars__v {
  flex: none;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ar-bars__l {
  font-size: 14px;
  line-height: 1.4;
  color: var(--dim);
}

/* Плитки с крупными цифрами. */
.ar-stats {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 0 clamp(16px, 2vw, 28px);
  margin: 30px 0 4px;
}
.ar-stats[data-n='2'] {
  --n: 2;
}
.ar-stats[data-n='1'] {
  --n: 1;
  max-width: 420px;
}
.ar-stats > div {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 16px;
  border-top: 1px solid var(--faint);
}
.ar-stats .v {
  font-size: clamp(34px, 3.4vw, 52px);
}
.ar-stats p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
}

/* Данные графика для скринридера: таблица есть, на экране её заменяет график. */
.ar-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── список статей ────────────────────────────────────────────────────── */

.ar-list {
  margin-top: clamp(34px, 4vw, 60px);
}
.ar-post {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px 36px;
  padding: 28px 0 34px;
  border-top: 1px solid var(--faint);
  transition: border-color 0.2s ease;
}
.ar-post h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
  max-width: 30ch;
}
.ar-post p {
  margin-top: 14px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dim);
}
.ar-post .ln {
  margin-top: 18px;
}
.ar-post:hover {
  border-top-color: var(--blue);
}
.ar-post:hover h2 {
  color: var(--blue);
}

@media (max-width: 860px) {
  .ar-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .ar-stats:not([data-n='1']) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }
  .ar-bars__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ar-cols {
    height: 200px;
  }
  .ar-item,
  .ar-post {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ar-item > .lb {
    padding-top: 0;
  }
  .ar-prose p,
  .ar-prose li {
    font-size: 16px;
  }
  .ar-attempts th,
  .ar-attempts td {
    padding-inline: 6px;
  }
  .ar-cycle {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .ar-cycle li {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 14px 0;
  }
  .ar-week {
    grid-template-columns: minmax(0, 1fr);
  }
  .ar-week > div {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .ar-week > div .lb {
    flex: 0 0 32px;
  }
}