@layer components {
  /* ==========================================================================
     Prose - Long-form content typography
     Used for blog posts, pages, and any rendered markdown/rich text.
     ========================================================================== */

  .prose,
  .post-content,
  .page-content {
    margin-bottom: var(--block-space-double);

    h1 {
      font-size: var(--text-large-title);
      line-height: var(--leading-tight);
      margin: var(--block-space-double) 0 var(--block-space);
      font-weight: 600;
    }

    h2 {
      font-size: var(--text-title-1);
      line-height: var(--leading-tight);
      margin: var(--block-space-double) 0 var(--block-space);
      font-weight: 600;
    }

    h3 {
      font-size: var(--text-title-2);
      line-height: var(--leading-snug);
      margin: var(--block-space-1-5) 0 var(--block-space);
      font-weight: 600;
    }

    h4 {
      font-size: var(--text-title-3);
      line-height: var(--leading-snug);
      margin: var(--block-space-1-25) 0 var(--block-space);
      font-weight: 600;
    }

    p {
      margin-bottom: var(--block-space-1-5);
      font-size: var(--text-body);
      line-height: var(--leading-relaxed);
    }

    ul, ol {
      margin: 0 0 var(--block-space-1-5) var(--block-space-1-5);
      padding-left: var(--block-space-1-5);
    }

    ul {
      list-style-type: disc;
    }

    ol {
      list-style-type: decimal;
    }

    li {
      margin-bottom: var(--block-space-half);
    }

    blockquote {
      margin: var(--block-space-1-5) 0;
      padding: var(--block-space) var(--block-space-1-5);
      border-left: 4px solid var(--color-quote-border);
      background-color: var(--color-quote-bg);
      font-style: italic;

      p {
        margin-bottom: 0;
      }
    }

    code {
      background-color: var(--color-ink-lightest);
      padding: 0.2em 0.4em;
      border-radius: var(--block-space-quarter);
      font-family: var(--font-mono);
      font-size: 0.9em;
    }

    pre {
      background-color: var(--color-ink-lightest);
      padding: var(--block-space);
      border-radius: var(--border-radius);
      overflow-x: auto;
      margin: var(--block-space-1-5) 0;

      code {
        background-color: transparent;
        padding: 0;
      }
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: var(--block-space-1-5) auto;
      border-radius: var(--border-radius);
    }

    hr {
      margin: var(--block-space-double) 0;
      border: 0;
      border-top: 1px solid var(--color-border);
    }

    table {
      width: 100%;
      margin: var(--block-space-1-5) 0;
      border-collapse: collapse;
    }

    th, td {
      padding: var(--table-cell-padding);
      border: 1px solid var(--color-border);
      text-align: left;
    }

    th {
      background-color: var(--color-quote-bg);
      font-weight: 600;
    }

    figure {
      margin: var(--block-space-1-5) 0;
      text-align: center;
    }

    figure img {
      margin-inline: auto;
    }

    figcaption {
      font-size: var(--text-caption);
      color: var(--color-ink-light);
      margin-top: var(--block-space-half);
      text-align: center;
    }
  }

  /* Featured image for blog posts */
  .post-featured-image {
    margin: var(--block-space-double) 0;
  }

  .post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
  }
}