/* Visual deep-dive article components (2026-06-16).
   Used by the campaign articles authored in the admin editor. All classes are
   sanitize-html-safe (class attr only) and read both inside .prose and stand-alone.
   Tokens (--accent, --text, --border, --bg-2, --radius) come from main.css. */

/* Full-bleed-ish hero figure under the article header */
.od-hero { margin: 0 0 2rem; }
.od-hero img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg, 6px); border: 1px solid var(--border); }
.od-hero figcaption,
.od-fig figcaption {
  margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.5;
  color: var(--text-3); font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.01em;
}

/* A captioned figure (screenshot / chart) */
.od-fig { margin: 2rem 0; }
.od-fig img { width: 100%; height: auto; display: block; border-radius: var(--radius, 3px); border: 1px solid var(--border); background: var(--bg-2); }

/* Two-up screenshot grid (collapses on mobile) */
.od-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin: 2rem 0; }
.od-grid figure { margin: 0; }
@media (max-width: 640px) { .od-grid { grid-template-columns: 1fr; } }

/* Editorial pull-quote */
.od-pullquote {
  margin: 2.25rem 0; padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.4rem; line-height: 1.4; color: var(--text);
  font-style: normal;
}

/* Result / metric callout box */
.od-callout {
  margin: 2rem 0; padding: 1.1rem 1.25rem;
  background: var(--accent-dim, rgba(224,160,96,0.10));
  border: 1px solid var(--accent); border-radius: var(--radius, 3px);
}
.od-callout .od-callout-label {
  display: block; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.4rem;
}
.od-callout p { margin: 0; color: var(--text); }

/* Big metric row (e.g. "190+ videos · 130K+ views") */
.od-metrics { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 2rem 0; padding: 1.25rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.od-metric { }
.od-metric .od-metric-num { display: block; font-family: var(--font-display, Georgia, serif); font-size: 2rem; line-height: 1; color: var(--text); }
.od-metric .od-metric-cap { display: block; margin-top: 0.35rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-family: var(--font-mono, ui-monospace, monospace); }

/* Architecture diagram wrapper (for inline SVG or an image) */
.od-diagram { margin: 2rem 0; padding: 1.25rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg, 6px); overflow-x: auto; }
.od-diagram svg, .od-diagram img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.od-diagram figcaption { margin-top: 0.75rem; text-align: center; font-size: 0.78rem; color: var(--text-3); font-family: var(--font-mono, ui-monospace, monospace); }

/* "Powered by" provider chips — keeps the stack credible/visible */
.od-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
.od-stack span { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; color: var(--text-2, var(--text-3)); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; }