/* ==========================================================================
   05 · Контентные страницы (статьи из tools/generate-pages.py)
   Дизайн наследуется от главной: .header, .footer, .btn, .sheet, .form,
   .points, .point, .checklist, .panel, .note — берутся из components.css.
   Здесь только то, чего на лендинге нет: крошки, типографика статьи,
   финальный CTA и блок «читайте также».
   ========================================================================== */

@layer sections {
  /* --- Крошки: единственная навигация на странице --------------------- */

  .breadcrumb {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--c-muted);
  }

  /* Разделитель — псевдоэлемент: в разметке нет лишних символов */
  .breadcrumb__item + .breadcrumb__item::before {
    content: '›';
    margin-inline-end: var(--sp-2);
    color: var(--c-muted);
  }

  .breadcrumb__item[aria-current] {
    color: var(--c-ink-2);
  }

  /* --- Статья ----------------------------------------------------------
     Типографика — как на главной, без своих кеглей: H1 берёт --fs-hero
     из base.css (та же роль, что заголовок героя), текст читается по той же
     мере строки (--measure: 62ch) и тому же ритму абзацев, что .section__text
     на лендинге. Новых размеров шрифта здесь нет ни одного. */

  .article__title {
    margin-bottom: var(--sp-4);
  }

  /* Лид — тот же кегль основного текста, что у вводного абзаца секции
     на главной (.section__text p), только вторичным цветом */
  .article__lead {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-ink-2);
  }

  /* Ритм абзацев: между соседними абзацами 16 px, от заголовка раздела — больше */
  .article__body > p + p {
    margin-top: var(--sp-4);
  }

  .article__body > * + p {
    margin-top: var(--sp-4);
  }

  .article h2 {
    margin-top: var(--sp-12);
  }

  /* Списки в тексте статьи.
     Маркированный — свой знак (красное тире в своей колонке, как в .point),
     нумерованный — родные номера браузера. .checklist с галочками здесь
     не используется: у него другой смысл («подходит / не подходит»). */

  .article__body > ul {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding: 0;
    list-style: none;
  }

  .article__body > ul > li {
    display: grid;
    grid-template-columns: var(--sp-5) 1fr;
    align-items: start;
  }

  .article__body > ul > li::before {
    content: '—';
    color: var(--c-red);
    font-weight: 700;
  }

  .article__body > ol {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-inline-start: var(--sp-6);
  }

  .article__body > ol > li::marker {
    color: var(--c-red);
    font-family: var(--f-display);
    font-weight: 700;
  }

  .article code {
    padding: 2px var(--sp-1);
    background: var(--c-bg-soft);
    border-radius: var(--radius-xs);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.95em;
  }

  /* --- Финальный CTA: мостик на главную -------------------------------
     Тот же приём, что у блока #cta на лендинге: тёмная плашка,
     прижатая к правому краю текст, белое кольцо фокуса. */

  .article__cta {
    margin-top: var(--sp-12);
    padding: var(--sp-6) var(--sp-5);
    background: var(--c-bg-dark);
    color: var(--c-on-dark);
    border-radius: var(--radius-md);
    --focus-ring: var(--c-on-dark);
  }

  .article__cta-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    text-transform: uppercase;
    text-wrap: balance;
  }

  .article__cta > p + p {
    margin-top: var(--sp-3);
  }

  .article__cta .btn {
    margin-top: var(--sp-5);
  }

  /* На тёмном фоне ссылки белые (#A80000 на чёрном даёт 2,2:1),
     а .note вместо --c-muted берёт --c-on-dark-2 (8,33:1) */
  .article__cta a:not(.btn) {
    color: var(--c-on-dark);
  }

  .article__cta .note {
    color: var(--c-on-dark-2);
  }

  /* --- «Читайте также» — перелинковка между статьями ------------------ */

  .article__more {
    margin-top: var(--sp-12);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-line);
  }

  .article__more h2 {
    margin: 0;
    font-size: var(--fs-h3);
  }

  .article__more ul {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
  }

  /* Ссылка-строка: 40 px высоты, чтобы попадать пальцем и мышью без прицела */
  .article__more a {
    display: inline-block;
    padding-block: var(--sp-2);
    font-family: var(--f-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
}