/* ============================================================
   IMAGE STYLES — pillar Neteller wedden in België
   ============================================================ */

/* Base figure: defensive defaults so figures never leak full-width
   when a parent layout changes; figures stay within the content column. */
article figure {
    margin: 1.75rem auto;
    max-width: 100%;
    box-sizing: border-box;
}

article figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(15, 20, 24, 0.08);
    background: #f0f2f4;
}

article figcaption {
    margin: 0.85em 0.25rem 0;
    padding: 0;
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #5a6469;
    text-align: center;
    font-style: italic;
}

/* ------------------------------------------------------------
   HERO FIGURE — inside section[data-content="intro"].hero-content
   No figcaption: H1 provides the context.
   Slightly wider feel and a cleaner top-of-article presence.
   ------------------------------------------------------------ */
article .hero-figure {
    margin: 1.5rem auto 2.5rem;
    max-width: 720px;
}

article .hero-figure img {
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(15, 20, 24, 0.10);
}

/* ------------------------------------------------------------
   ARTICLE FIGURES — five contextual images with captions
   ------------------------------------------------------------ */
article .article-figure {
    margin: 2rem auto;
    max-width: 720px;
}

article .article-figure img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ------------------------------------------------------------
   RESPONSIVE — narrower margins on small screens
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    article figure {
        margin: 1.25rem auto;
    }

    article .hero-figure {
        margin: 1rem auto 1.75rem;
    }

    article figcaption {
        font-size: 0.825rem;
        padding: 0 0.25rem;
    }

    article figure img {
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    article figure {
        margin: 1rem auto;
    }

    article figure img {
        border-radius: 8px;
    }
}