/* ==============================================================================
   MARKDOWN BLOCK
   ============================================================================== */

.block-markdown {
  background: var(--paper-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

/* .prose holds MarkdownData.HTML (or a text block's Rendered paragraphs):
   goldmark's own headings, paragraphs, lists and links, none of which the
   template writes markup for itself. content-max-width caps a long line
   at the same reading width the rest of the page already uses, rather
   than letting body text stretch as wide as the block's own card. */
.prose {
  max-width: var(--content-max-width);
  color: var(--text-secondary);
  line-height: 1.7;
}

.prose p + p {
  margin-top: var(--spacing-md);
}

/* internal/markdown clamps every heading to h2..h4 (see headingRenderer),
   so this is the full set a block's body can ever produce; the block's
   own title, one level up, is a plain <h2> outside .prose entirely. */
.prose h2,
.prose h3,
.prose h4 {
  color: var(--text-primary);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.prose ul,
.prose ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

.prose li + li {
  margin-top: var(--spacing-xs);
}

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

/* A pasted image inside a markdown body is still content, not layout: it
   must never overflow the reading column the way a fixed-width <img>
   naturally could. */
.prose img {
  max-width: 100%;
  height: auto;
}