/* ================================================================
   DataHints DS — Figure Component
   Requires: tokens.css
   ================================================================ */

  /* ════════════════════════════════════════════
     FIGURE COMPONENT
  ════════════════════════════════════════════ */

  .dh-figure {
    --fig-focus: center center;
    margin: var(--sp-8) 0;
  }

  /* ── Size ── */
  .dh-figure--narrow {
    max-width: var(--max-w-narrow);
    margin-left: auto; margin-right: auto;
  }
  .dh-figure--breakout {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* ── Media wrapper ── */
  .fig-media {
    overflow: hidden;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-s);
    background: var(--bg-elevated);
    position: relative;
  }
  .dh-figure--borderless .fig-media { border: none; }
  .dh-figure--rounded    .fig-media { border-radius: var(--r-md); }

  /* ── Image / picture ── */
  .fig-media img,
  .fig-media picture {
    display: block; width: 100%; height: auto;
    object-position: var(--fig-focus);
  }

  /* ── Aspect ratio variants ── */
  .dh-figure--16-9 .fig-media { aspect-ratio: 16 / 9; }
  .dh-figure--4-3  .fig-media { aspect-ratio:  4 / 3; }
  .dh-figure--3-2  .fig-media { aspect-ratio:  3 / 2; }
  .dh-figure--1-1  .fig-media { aspect-ratio:  1;     }
  .dh-figure--21-9 .fig-media { aspect-ratio: 21 / 9; }
  .dh-figure--3-1  .fig-media { aspect-ratio:  3;     }

  :is(.dh-figure--16-9, .dh-figure--4-3, .dh-figure--3-2,
      .dh-figure--1-1, .dh-figure--21-9, .dh-figure--3-1) .fig-media img,
  :is(.dh-figure--16-9, .dh-figure--4-3, .dh-figure--3-2,
      .dh-figure--1-1, .dh-figure--21-9, .dh-figure--3-1) .fig-media picture {
    height: 100%;
    object-fit: cover;
  }

  /* ── Caption below (default) ── */
  .fig-caption {
    font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5;
    color: var(--fg-3); margin-top: var(--sp-3); padding-left: var(--sp-1);
  }
  .fig-num { font-weight: 600; color: var(--fg-2); margin-right: var(--sp-2); }
  .fig-source {
    display: inline; margin-left: var(--sp-2); color: var(--accent-text);
    text-decoration: none; transition: opacity var(--ease-fast);
  }
  .fig-source:hover { opacity: .75; text-decoration: underline; }

  /* ── Caption overlay variant ── */
  .dh-figure--overlay .fig-caption {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    color: rgba(255,255,255,.9);
    padding: var(--sp-10) var(--sp-4) var(--sp-3);
    margin-top: 0; padding-left: var(--sp-4);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
  }
  .dh-figure--overlay.dh-figure--rounded .fig-caption {
    border-radius: 0 0 var(--r-md) var(--r-md);
  }
  .dh-figure--overlay .fig-num   { color: rgba(255,255,255,.6); }
  .dh-figure--overlay .fig-source { color: rgba(255,255,255,.6); }

  /* ── Loading state ── */
  .dh-figure.is-loading .fig-media { animation: fig-pulse 1.6s ease-in-out infinite; }
  .dh-figure.is-loading .fig-media img { opacity: 0; }
  @keyframes fig-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
  @media (prefers-reduced-motion: reduce) {
    .dh-figure.is-loading .fig-media { animation: none; }
  }

  /* ════════════════════════════════════════════
     PLACEHOLDER — demo-only, not part of DS
     Simulates an image using gradient + SVG
  ════════════════════════════════════════════ */
  .fig-placeholder {
    display: block; width: 100%; height: 100%;
    min-height: 80px;  /* fallback when no aspect-ratio set */
  }