/* Make AI Visible — evidence figures (photos with captions).
   Teaching compare blocks and pipe panels live in teaching.css.
   Rules and markup: content/BRAND-DIAGRAMS.md */

/* ---------- Figure shell (counters reset on .article in base.css) ---------- */

.figure {
  margin: var(--s6) 0;
  padding: 0;
  position: relative;
  counter-increment: figure;
}

.figure-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink);
}

.figure figcaption {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.figure figcaption::before {
  content: "Fig " counter(figure, decimal-leading-zero) " — ";
  color: var(--ink);
}

@media (min-width: 60rem) {
  /* Figures break the text measure to the right — they are evidence, not asides. */
  .figure {
    width: min(calc(100% + 6rem), calc(var(--page) - var(--rail)));
    max-width: 100%;
  }

  .figure figcaption::before { content: none; }

  .figure::before {
    content: "FIG " counter(figure, decimal-leading-zero);
    position: absolute;
    left: calc(-1 * var(--rail));
    top: 0;
    width: calc(var(--rail) - var(--s5));
    text-align: right;
    font: 500 0.72rem/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    color: var(--muted);
  }
}