/* =============================================================================
   prose — тіло статті й кейса: усе, що приходить з редактора.

   Тут діє інше правило, ніж на головній. Головна — це прилад: кожен блок
   виміряний і поставлений у сітку. Стаття — це запис у журналі приладу: один
   стовпчик, стала міра рядка, жодної асиметрії. Читають її довго, і будь-який
   декоративний хід на третьому екрані починає заважати.

   Тому звідси навмисно прибрано: бурштинові заголовки, зсуви, виліт за край,
   картки. Акцент лишається рівно на трьох ролях — посилання, маркер списку,
   кромка цитати. Це та сама мова лампи, але приглушена до рівня тексту.
   ============================================================================= */

.prose {
  max-inline-size: var(--measure);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
}

/* Вертикальний ритм задає один селектор, а не margin на кожному елементі:
   редактор може видати будь-яку послідовність блоків, і жодна їх пара не має
   злипнутися чи розлетітися. */
.prose > * + * { margin-block-start: var(--space-md); }

/* ---- заголовки --------------------------------------------------------------
   Кромка над h2 — та сама волосина, що розділяє сходинки в «Чому я» і рядки
   FAQ. Розділ статті читається як наступна поділка шкали, а не як новий банер. */

.prose h2 {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.prose h3 {
  margin-block-start: var(--space-xl);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.prose h4 {
  margin-block-start: var(--space-lg);
  font-family: var(--font-readout);
  font-size: var(--fs-readout-label);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Перший заголовок статті не отримує верхнього відступу: над ним уже стоїть
   шапка запису зі своїм полем. */
.prose > :first-child { margin-block-start: 0; }

.prose h2:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

/* ---- текст ------------------------------------------------------------------ */

.prose strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

.prose a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: var(--border-width-hair);
  text-underline-offset: var(--space-3xs);
  transition: color var(--dur-fast) var(--ease-out);
}

.prose a:hover { color: var(--accent); }

/* ---- переліки ----------------------------------------------------------------
   Маркер той самий, що в тарифах: коротка бурштинова риска. Стандартна крапка
   тут була б єдиним круглим елементом на всій сторінці. */

.prose ul,
.prose ol {
  display: grid;
  gap: var(--space-2xs);
  padding-inline-start: 0;
  list-style: none;
}

/* Висячий відступ, а НЕ грид на дві колонки.

   Грид тут був справжнім дефектом, і дорогим: кожна дитина пункту стає окремою
   клітинкою, тому будь-яка розмітка всередині — <strong>, посилання, <code> —
   виносила текст у наступний рядок, а сам виділений фрагмент відкидала в праву
   колонку й ламала на окремі слова. Простий пункт із самим текстом виглядав
   правильно, тому дефект жив непоміченим, поки в списку не з'явився перший
   жирний підпис.

   Абсолютний маркер байдужий до вмісту: у пункті може бути що завгодно. */

.prose li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.prose ul > li::before,
.prose ol > li::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
}

.prose ul > li::before {
  content: "—";
  color: var(--accent);
}

/* Нумерований перелік лічить сам: номер у моно, як показник. */
.prose ol { counter-reset: prose-step; }

.prose ol > li { counter-increment: prose-step; }

.prose ol > li::before {
  content: counter(prose-step, decimal-leading-zero);
  font-family: var(--font-readout);
  font-size: var(--fs-small);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--accent);
}

.prose li > ul,
.prose li > ol {
  margin-block-start: var(--space-2xs);
}

/* ---- цитата ------------------------------------------------------------------
   Ліва бурштинова кромка — той самий жест, що позначає розгорнуте питання в
   FAQ: «цей рядок зараз увімкнений». */

.prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-accent-rule);
  color: var(--text-primary);
}

.prose blockquote cite {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-readout);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--text-muted);
}

/* ---- код --------------------------------------------------------------------
   Код на сайті розробника читатиме розробник, тому він не декорація: моно,
   заглиблена поверхня, горизонтальна прокрутка всередині блоку, а не сторінки. */

.prose code {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-readout);
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.prose pre {
  overflow-x: auto;
  padding: var(--space-md);
  border: var(--border-hairline);
  border-radius: var(--radius-readout);
  background: var(--surface-sunken);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  tab-size: 2;
}

.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* ---- медіа ------------------------------------------------------------------ */

/* Ширина за колонкою, але висота обмежена: вертикальний знімок телефона при
   inline-size: 100% розтягувався на два екрани тексту й переставав бути
   ілюстрацією до абзацу. Тепер широкий кадр заповнює колонку, високий —
   упирається у стелю й стискається пропорційно. */
.prose img,
.prose video {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 38rem;
  border-radius: var(--radius-card);
}

/* Знімок у рамці екрана виглядає як екран, а не як фон: вузька кромка того ж
   тону, що й лінії розділу. */
.prose figure img { border: var(--border-hairline); }

.prose figure { margin-inline: 0; }

.prose figcaption {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-readout);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Ширші за міру рядка блоки виходять до ширини колонки тексту з запасом: на
   схемі або скріншоті деталі важливіші за рівний край. */
.prose .alignwide,
.prose .wp-block-image.alignwide {
  max-inline-size: none;
}

.prose hr {
  margin-block: var(--space-xl);
  border: 0;
  border-block-start: var(--border-hairline);
}

/* ---- таблиця ----------------------------------------------------------------
   Прокручується сама таблиця, а не сторінка: горизонтальний скрол документа —
   це дефект, і він ловиться в QA окремим пунктом. */

.prose .wp-block-table,
.prose figure.wp-block-table { overflow-x: auto; }

.prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.prose th,
.prose td {
  padding: var(--space-2xs) var(--space-sm);
  border-block-end: var(--border-hairline);
  text-align: start;
  vertical-align: top;
}

.prose th {
  font-family: var(--font-readout);
  font-size: var(--fs-readout-label);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .prose a { transition: none; }
}