/* ============================================================
   BLOCK — prose.css
   Long-form content styling. Apply to any container of
   rich text — CMS output, notes fields, markdown-rendered
   content, about pages etc.

   Usage:
     <div class="prose">
       <h2>...</h2>
       <p>...</p>
     </div>

   Width-constrained (default):
     <div class="prose"> — max-width: var(--measure)

   Full width (tables, wide content):
     <div class="prose" data-width="full">
   ============================================================ */

.prose {
  max-width: var(--measure);
  color: var(--color-text);
  line-height: var(--leading-loose);
}

.prose[data-width="full"] {
  max-width: none;
}

/* ── Headings ────────────────────────────────────────────── */

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-xs);
}

.prose h1 { font-size: var(--step-4); }
.prose h2 { font-size: var(--step-3); }
.prose h3 { font-size: var(--step-2); }
.prose h4 { font-size: var(--step-1); }
.prose h5 { font-size: var(--step-0); }
.prose h6 { font-size: var(--step--1); color: var(--color-text-muted); }

/* First heading needs no top margin */
.prose > :first-child {
  margin-block-start: 0;
}

/* ── Paragraphs ──────────────────────────────────────────── */

.prose p {
  margin-block-start: 0;
  margin-block-end: var(--space-m);
  max-width: none; /* override global.css p max-width */
}

.prose p:last-child {
  margin-block-end: 0;
}

/* ── Links ───────────────────────────────────────────────── */

.prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

.prose a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

/* ── Lists ───────────────────────────────────────────────── */

.prose ul,
.prose ol {
  padding-inline-start: var(--space-l);
  margin-block-end: var(--space-m);
}

.prose li {
  margin-block-end: var(--space-xs);
  line-height: var(--leading-normal);
}

.prose li + li {
  margin-block-start: var(--space-2xs);
}

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

/* ── Blockquote ──────────────────────────────────────────── */

.prose blockquote {
  margin-inline: 0;
  margin-block: var(--space-l);
  padding-inline-start: var(--space-m);
  border-inline-start: 3px solid var(--color-brand);
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.prose blockquote p {
  margin-block-end: 0;
}

/* ── Code ────────────────────────────────────────────────── */

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-surface-raised);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

.prose pre {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-m);
  overflow-x: auto;
  margin-block: var(--space-l);
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--step--1);
}

/* ── Horizontal rule ─────────────────────────────────────── */

.prose hr {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-xl);
}

/* ── Tables ──────────────────────────────────────────────── */

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  margin-block: var(--space-l);
}

.prose thead th {
  text-align: left;
  font-size: var(--step--2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-xs) var(--space-s);
  border-block-end: 2px solid var(--color-border);
}

.prose tbody td {
  padding: var(--space-xs) var(--space-s);
  border-block-end: 1px solid var(--color-border);
  vertical-align: top;
}

/* ── Images ──────────────────────────────────────────────── */

.prose img {
  max-width: 100%;
  border-radius: 6px;
  margin-block: var(--space-l);
}

.prose figure {
  margin-inline: 0;
  margin-block: var(--space-l);
}

.prose figcaption {
  font-size: var(--step--2);
  color: var(--color-text-muted);
  text-align: center;
  margin-block-start: var(--space-xs);
}

/* ── Lead paragraph — larger opening text ────────────────── */

.prose .lead,
.prose > p:first-of-type[class~="lead"] {
  font-size: var(--step-1);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin-block-end: var(--space-l);
}