/* ─────────────────────────────────────────────────────────────
 * Mero — .article-visual
 * The single figure component used by every article visual.
 * Depends only on assets/css/tokens.css. No new fonts, icon sets,
 * chart libraries, or image dependencies.
 *
 * Usage (inline SVG — preferred, inherits site fonts):
 *   <figure class="article-visual">
 *     <svg …>…</svg>
 *     <figcaption>Caption text. <cite>Source</cite></figcaption>
 *   </figure>
 *
 * Usage (referenced file — SVG carries its own font stack):
 *   <figure class="article-visual">
 *     <img src="/assets/img/articles/<slug>/inline-01.svg"
 *          width="680" height="600" loading="lazy" decoding="async"
 *          alt="…">
 *     <figcaption>…</figcaption>
 *   </figure>
 * ───────────────────────────────────────────────────────────── */

.article-visual {
  /* Escapes a narrow prose column up to the figure's natural width,
     but never wider than the container. */
  width: 100%;
  max-width: 680px;
  margin: var(--mero-space-12) auto;
  padding: 0;
}

/* Both delivery modes size identically and reserve space before paint. */
.article-visual > svg,
.article-visual > img {
  display: block;
  width: 100%;
  height: auto;          /* paired with the intrinsic width/height attrs */
  max-width: 100%;
  border-radius: var(--mero-radius-chip);
  background: var(--mero-color-stone);
}

/* Hairline that reads on both the navy and cream surfaces. */
.article-visual > svg,
.article-visual > img {
  box-shadow: 0 0 0 1px rgba(15, 31, 58, 0.10);
}

.article-visual figcaption {
  margin-top: var(--mero-space-3);
  font-family: var(--mero-font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--mero-weight-regular);
  color: var(--mero-text-secondary);
  text-wrap: pretty;
}

[data-theme="light"] .article-visual figcaption,
.article-visual--on-light figcaption {
  color: rgba(15, 31, 58, 0.70);
}

.article-visual figcaption cite {
  /* Must wrap. Previously `white-space: nowrap` combined with the figure's
     `overflow-x: hidden` silently clipped ~122px of the citation at 390px. */
  display: block;
  margin-top: var(--mero-space-2);
  white-space: normal;
  overflow-wrap: anywhere;
  font-style: normal;
  font-family: var(--mero-font-mono);
  font-size: 11px;
  letter-spacing: var(--mero-tracking-mono-meta);
  text-transform: uppercase;
  color: var(--mero-text-tertiary);
}

[data-theme="light"] .article-visual figcaption cite,
.article-visual--on-light figcaption cite {
  /* 0.55 gave 3.67:1 on cream at 11px — below AA for normal text. */
  color: rgba(15, 31, 58, 0.68);
}

/* Optional mono label sitting above a figure, e.g. "FIGURE 1". */
.article-visual__label {
  display: block;
  margin-bottom: var(--mero-space-2);
  font-family: var(--mero-font-mono);
  font-weight: var(--mero-weight-medium);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mero-text-accent);
}

/* Wider figures. NOTE: this cannot exceed the parent content column on its
   own — `width: 100%` is bound by the parent box. To genuinely break out of
   the ~632px article measure, the figure must either sit outside
   `.article-body` or use the negative-margin escape below. */
.article-visual--wide {
  max-width: 860px;
}

/* Bleed is desktop-only. Applied at every viewport it added two 40px gutters
   to a 342px figure and pushed 56px of horizontal overflow onto the page. */
@media (min-width: 720px) {
  .article-visual--bleed {
    width: min(calc(100% + 2 * var(--mero-gutter-desktop)), 100vw);
    max-width: none;
    margin-inline: calc(-1 * var(--mero-gutter-desktop));
  }
}

/* ── Small viewports ─────────────────────────────────────────
 * The SVGs are authored to stay legible when scaled down, so the
 * only mobile change is to let the figure use the full gutter and
 * to guarantee nothing can push the page wider than the viewport. */
@media (max-width: 720px) {
  .article-visual {
    margin: var(--mero-space-10) auto;
  }
}

@media (max-width: 480px) {
  .article-visual figcaption { font-size: 13px; }
}

/* No overflow backstop. `overflow-x: hidden` was previously set here, which
   turned real clipping into a silent pass: content could exceed the figure and
   neither the page nor the verifier would report it. Overflow is prevented by
   the intrinsic sizing above, and the verifier now asserts it per element. */

/* Purely decorative marks inside an SVG should carry aria-hidden;
   this keeps any stray focusable node out of the tab order. */
.article-visual svg [aria-hidden="true"] { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .article-visual * { animation: none !important; transition: none !important; }
}

@media print {
  .article-visual { break-inside: avoid; page-break-inside: avoid; }
}