/*
 * Responsive media contract for article body content.
 *
 * Hero/card media already have dedicated responsive rules. This file is loaded
 * after articles.css and intentionally scopes the safety net to .article-content
 * so editor-authored Rich Text/HTML images and custom block media cannot overflow
 * the readable column on narrow viewports.
 */

.article-content,
.article-content-block,
.article-rich-text__body,
.article-content-block--html {
    min-width: 0;
    max-width: 100%;
}

/*
 * CKEditor/Rich Text and HTML blocks may persist width/height attributes on img.
 * max-width prevents horizontal overflow and height:auto preserves the source
 * aspect ratio when the browser has to shrink the image for tablet/mobile.
 */
.article-content img {
    max-width: 100%;
    height: auto;
}

.article-content picture {
    display: block;
    max-width: 100%;
}

.article-rich-text__body figure,
.article-content-block--html figure {
    max-width: 100%;
    margin-inline: auto;
}

.article-rich-text__body figure img,
.article-content-block--html figure img,
.article-rich-text__body > img,
.article-content-block--html > img {
    display: block;
}

.article-rich-text__body figcaption,
.article-content-block--html figcaption {
    max-width: 100%;
    margin-top: 8px;
    color: #64738d;
    font-size: 0.86rem;
    line-height: 1.8;
}

/* Gallery custom-template block. */
.article-media-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
}

.article-media-gallery__item {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--article-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(33, 72, 132, 0.05);
}

.article-media-gallery__item picture,
.article-media-gallery__item img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.article-media-gallery__item img {
    height: auto;
}

.article-media-gallery__item figcaption {
    padding: 10px 14px;
    color: #61718d;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.75;
}

/*
 * Before/after intentionally crops both sides to the existing shared viewport.
 * Re-assert height:100% after the generic article img rule above.
 */
.article-before-after div > picture {
    display: block;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.article-before-after div > picture > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keep editor-authored media from creating a horizontal scroll container. */
.article-content-block--rich_text,
.article-content-block--html,
.article-content-block--custom_template {
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .article-media-gallery {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .article-rich-text__body figure,
    .article-content-block--html figure {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .article-media-gallery {
        gap: 12px;
        margin-block: 18px;
    }

    .article-media-gallery__item {
        border-radius: 12px;
    }
}