/**
 * Module: article_image
 * Standalone image with alignment, sizing and caption.
 * All class names are unique to this module.
 */

/* ---- Base block ---- */

.article-image {
    display: block;
    margin: 2rem 0;
}

.article-image__figure {
    margin: 0;
}

.article-image__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.article-image__caption {
    font-size: 0.875rem;
    color: var(--color-stone);
    font-style: italic;
    margin-top: 0.75rem;
    text-align: center;
}

/* ---- Size modifiers (max-width on figure) ---- */

.article-image--size-small .article-image__figure  { max-width: 30%; }
.article-image--size-medium .article-image__figure { max-width: 40%; }
.article-image--size-large .article-image__figure  { max-width: 50%; }
.article-image--size-xlarge .article-image__figure { max-width: 70%; }
.article-image--size-full .article-image__figure   { max-width: 100%; }

/* ---- Alignment modifiers ---- */

.article-image--left .article-image__figure {
    margin-left: 0;
    margin-right: auto;
}

.article-image--right .article-image__figure {
    margin-left: auto;
    margin-right: 0;
}

.article-image--center .article-image__figure {
    margin-left: auto;
    margin-right: auto;
}

/* ---- Responsive: full‑width & centered on small screens ---- */

@media (max-width: 768px) {
    .article-image__figure {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Preserve caption styling */
    .article-image__caption {
        text-align: center;
    }
}