@layer components {
  /* Тело статьи из Action Text (будущий редактор Lexxy). Стили — на голые теги:
     p, h2–h4, ul/ol, table, figure/figcaption, blockquote, a, плюс то, что выдаёт Action Text:
     .attachment (картинка с подписью), .attachment-gallery (галерея), видео-вложение.
     Любая комбинация этих элементов из редактора должна выглядеть одинаково. */
  .prose { font-size: 19px; line-height: 1.72; color: var(--ink); }
  .prose > * { margin: 0 0 1.05em; }
  .prose > :last-child { margin-bottom: 0; }
  .prose > :first-child { margin-top: 0; }
  .prose h2 { font-size: 32px; line-height: 1.2; margin: 1.9em 0 0.55em; }
  .prose h3 { font-size: 24px; line-height: 1.3; margin: 1.6em 0 0.45em; }
  .prose h4 { font-size: 20px; line-height: 1.35; margin: 1.4em 0 0.4em; }
  .prose ul, .prose ol { padding-left: 1.35em; }
  .prose li { margin: 0.35em 0; padding-left: 0.2em; }
  .prose li::marker { color: var(--accent); font-weight: 600; }
  .prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .prose img { border-radius: var(--r-img); height: auto; }

  .prose figure { margin: 2em 0; }
  .prose figcaption, .caption { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink-3); }
  /* Action Text оборачивает вложение в <action-text-attachment> */
  .prose action-text-attachment { display: block; margin: 2em 0; }
  .prose action-text-attachment > figure { margin: 0; }

  .prose blockquote {
    margin: 2em 0;
    padding: 28px 32px;
    background: var(--surface);
    border-radius: var(--r-box);
    box-shadow: var(--shadow);
    font-size: 21px;
    line-height: 1.55;
  }
  .prose blockquote footer, .prose blockquote cite { display: block; margin-top: 12px; font-size: 16px; font-style: normal; color: var(--ink-3); }

  /* Галерея: Action Text — .attachment-gallery, в шаблонах — .gallery (.gal в макетах) */
  .gallery, .prose .attachment-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Action Text ставит число фото в класс (attachment-gallery--3): 2 и 4 — по два в ряд, 3 и больше 4 —
     по три, чтобы последнее фото не оставалось одно в строке, как в редакторе */
  .prose .attachment-gallery:not(.attachment-gallery--2, .attachment-gallery--4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery figure, .gallery action-text-attachment,
  .prose .attachment-gallery figure, .prose .attachment-gallery action-text-attachment { margin: 0; }
  .gallery img, .prose .attachment-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

  /* Таблица: ProseHelper оборачивает каждую <table> в .table-scroll (.tbl в макетах) */
  .table-scroll {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  .table-scroll table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
  .table-scroll th, .table-scroll td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }
  .table-scroll th { background: var(--soft-2); font-weight: 600; }
  .table-scroll tr:last-child td { border-bottom: 0; }

  @media (max-width: 820px) {
    .prose { font-size: 18px; line-height: 1.68; }
    .prose h2 { font-size: 26px; }
    .prose h3 { font-size: 21px; }
    .prose blockquote { padding: 20px; font-size: 19px; }
    .gallery, .gallery--3, .prose .attachment-gallery,
    .prose .attachment-gallery:not(.attachment-gallery--2, .attachment-gallery--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    /* Нечётное число фото: первое — во всю ширину, остальные парами */
    .prose .attachment-gallery:is(.attachment-gallery--3, .attachment-gallery--5, .attachment-gallery--7) > :first-child { grid-column: 1 / -1; }
  }
}