/* ============================================================
   images-styles.css — Stortwijs
   Beeldstijlen voor artikelafbeeldingen (figure/img/figcaption).
   Sluit aan op de data-dashboard look (light theme, deep teal)
   uit design-spec.md. Vult de basis-figure-regels in design.html
   aan zonder ze tegen te werken.
   ============================================================ */

/* --- artikelafbeeldingen binnen data-content secties --- */
[data-content] figure {
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

[data-content] figure img,
.article-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--muted, #dce5e3);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-md, 0 2px 6px rgba(14, 42, 39, .07), 0 8px 24px rgba(14, 42, 39, .07));
  background: var(--header-bg, #ffffff);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* --- hero-afbeelding: breder kader, prominentere schaduw, geen crop-rand --- */
.hero figure {
  margin-top: 1.8rem;
  margin-bottom: 0;
}

.hero figure img,
.hero-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius, 10px);
  border: none;
  box-shadow: var(--shadow-md, 0 2px 6px rgba(14, 42, 39, .07), 0 8px 24px rgba(14, 42, 39, .07));
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  object-position: center;
}

/* --- figcaption: mono-onderschrift in lijn met de stat-typografie --- */
[data-content] figcaption,
figure figcaption {
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted-text, #5b6b66);
  margin-top: .75em;
  padding: 0 1rem;
  letter-spacing: .01em;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- subtiele rand-accent links bij onderschrift, conform chevron-motief --- */
[data-content] figcaption::before {
  content: "\00BB";
  color: var(--accent, #0f766e);
  font-weight: 600;
  margin-right: .45em;
  opacity: .8;
}

/* --- zachte hover-respons, consistent met card-grid/dos-donts --- */
@media (hover: hover) {
  [data-content] figure img {
    transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1),
                transform .25s cubic-bezier(.4, 0, .2, 1);
  }
  [data-content] figure img:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(14, 42, 39, .12), 0 14px 34px rgba(14, 42, 39, .10);
  }
}

/* --- mobiel: minder verticale ruimte, vlakkere aspect-ratio toegestaan --- */
@media (max-width: 768px) {
  [data-content] figure {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
  }
  [data-content] figure img {
    aspect-ratio: 4 / 3;
  }
  [data-content] figcaption,
  figure figcaption {
    font-size: .76rem;
  }
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  [data-content] figure img {
    transition: none;
  }
  [data-content] figure img:hover {
    transform: none;
  }
}