/* ============================================================
   images-styles.css — Stortwijzer
   Stijlen voor inhoudsafbeeldingen (figure + figcaption).
   Gebruikt dezelfde design-tokens als index.html (data-dashboard).
   Hero-afbeelding wordt door de hoofdstylesheet gestyled; hier
   alleen de vijf inhouds-figuren binnen de data-content secties.
   ============================================================ */

.content-figure{
  margin:2.2rem auto;
  max-width:var(--content-width, 760px);
  padding:0;
  border:1px solid var(--muted, #D5DEDB);
  border-radius:var(--radius, 10px);
  background:var(--bg-soft, #F2F6F5);
  overflow:hidden;
  box-shadow:var(--shadow-sm, 0 1px 2px rgba(15,26,23,.05),0 2px 8px rgba(15,26,23,.04));
}

.content-figure img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border:0;
  border-bottom:1px solid var(--muted, #D5DEDB);
  background:#fff;
}

.content-figure figcaption{
  margin:0;
  padding:.7rem 1rem .8rem;
  font-family:var(--font-body, 'Inter', system-ui, sans-serif);
  font-size:.85rem;
  line-height:1.5;
  color:var(--text-secondary, #475A55);
  text-align:left;
  border-left:3px solid var(--accent, #1FA98E);
}

/* ============================================================
   Responsiviteit
   ============================================================ */
@media (max-width:768px){
  .content-figure{
    margin:1.8rem auto;
  }
  .content-figure figcaption{
    font-size:.82rem;
    padding:.65rem .85rem .75rem;
  }
}

@media (max-width:375px){
  .content-figure{
    margin:1.5rem auto;
    border-radius:8px;
  }
}