/* ─── Prose (post body typography) ──────────────────────── */

/* Ported from the WordPress site's custom CSS. Paired with hyphens: auto --
   justified text without hyphenation tends to produce uneven word-spacing
   "rivers" on narrow columns. */
.prose p {
  text-align: left;
}

/* Stack pattern: spacing lives in the relationship, not the element */
.prose h2 {
  font-size: var(--step-2);
}

.prose h3 {
  font-size: var(--step-1);
}

.prose > * {
  margin-block: 0;
}

.prose > * + * {
  margin-block-start: var(--space-m);
}

/* More space before headings */
.prose > * + h2,
.prose > * + h3 {
  margin-block-start: var(--space-l);
}

/* Less space between a heading and the content that follows it */
.prose > h2 + *,
.prose > h3 + * {
  margin-block-start: var(--space-s);
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-m);
  color: var(--color-text-muted);
  font-style: italic;
  margin-block: var(--space-l);
}

/* Section break (markdown `* * *`): dots instead of a line, matching the
   old WordPress theme's separator. */
.prose hr {
  border: none;
  text-align: center;
}

.prose hr::before {
  content: "•  •  •";
  color: var(--color-accent);
  letter-spacing: 0.5em;
}

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

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

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

/*
  Content images (embedded in post body markdown, rendered as <picture>
  by the eleventy-img transform plugin). No reserved box/placeholder here,
  unlike .card__image-wrap — body images render at their own aspect ratio
  instead of being cropped into a fixed frame. eleventy-img always sets
  real width/height attributes on the <img>, so the browser still reserves
  correct space (no layout shift) from those alone; height: auto just lets
  it scale down responsively. <picture> is inline/non-replaced by default,
  hence display: block to make it a normal layout box.
*/
.prose picture {
  display: block;
}

.prose picture img {
  display: block;
  max-width: 100%;
  max-height: 32rem;
  width: auto;
  height: auto;
  margin-inline: auto;
  border-radius: 4px;
}

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

/*
  Restores the swipeable-carousel presentation lost when a WordPress
  image-slider block flattened to sequential images during migration.
  Zero-JS: native scroll-snap. Only used by one migrated post.
*/
.image-gallery {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.image-gallery picture {
  flex: 0 0 80%;
  scroll-snap-align: center;
}

/*
  Restores the side-by-side presentation lost when a WordPress 2-column
  image block flattened to stacked images during migration. Degrades to
  stacked on narrow viewports for free. Only used by one migrated post.
*/
.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.image-row figure {
  flex: 1 1 16rem;
}