/* ============================================================
   components/figure.css — .dd-figure
   An image with a caption, sized to the column it sits in. Built for
   the blog's figure block (#112, B3).

   Markup contract:
     <figure class="dd-figure">
       <img src="…" alt="…" loading="lazy" decoding="async">
       <figcaption>…</figcaption>
     </figure>

   The alt text is not optional anywhere this is used: on an article the
   image carries part of the explanation, so an empty alt is a hole in
   the page (design-language, new-surface checklist). `--dd-figure-ratio`
   crops to a shape where the layout needs one; unset, the image keeps
   its own.
   ============================================================ */

.dd-figure {
  margin: var(--space-7, 32px) 0;
}

.dd-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--dd-figure-ratio, auto);
  object-fit: cover;
  border-radius: var(--radius-md, 18px);
  background: var(--surface-tint);
}

.dd-figure figcaption {
  margin-top: var(--space-2, 8px);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}