/* Blog post single — content styling.
   Loaded only on route journal3/blog/post (see catalog/controller/journal3/blog.php → post()).
   Scoped to .blog-post .post-content; base layout/typography handled in custom.css. */

/* Left-align body copy. Higher specificity (0,4,0) than custom.css's centered
   `.blog-post .post-details .post-content` (0,3,0), which is enqueued later via
   the header event — so this wins without !important. */
.container.blog-post .post-details .post-content {
  text-align: left;
}

.blog-post .post-content {
  figure {
    margin-block: var(--space-lg);
  }

  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* no radius token in :root */
  }

  ul, ol {
    margin-block: var(--space-md);
    padding-inline-start: var(--space-xl);

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

  blockquote {
    margin-block: var(--space-lg);
    padding-inline-start: var(--space-md);
    border-inline-start: 3px solid var(--color-gray-300);
    color: var(--color-gray-700);
    font-style: italic;
  }

  table {
    width: 100%;
    margin-block: var(--space-lg);
    border-collapse: collapse;

    th, td {
      padding: var(--space-sm) var(--space-md);
      border: 1px solid var(--color-gray-300);
      text-align: left;
    }

    th {
      background: var(--color-gray-100);
      font-weight: 700;
    }
  }

  h4 {
    font-size: var(--font-size-lg);
    margin-block: var(--space-md) var(--space-sm);
  }

  /* "X tips" numbered list */
  .post-tips li {
    font-weight: 700;
  }

  .post-cta {
    letter-spacing: 0.03em;
  }
}