/* ==========================================================================
   正文图片排版（前台正文和后台编辑器共用，保证编辑时所见即所得）
   全部通过 class 实现，不依赖内联样式：
     img-left / img-right   文字环绕（左 / 右）
     img-center-sm          小图居中
     img-full               通栏宽幅
     img-row cols-2|cols-3  多图并排
   class 可以加在 <img> 上，也可以加在带图注的 <figure> 上。
   ========================================================================== */

.article-body::after { content: ""; display: block; clear: both; }
.article-body h2, .article-body h3, .article-body hr, .article-body table,
.article-body .img-row, .article-body .img-full { clear: both; }

/* 图注 */
.article-body figure { margin: 28px 0; }
.article-body figure > img { margin: 0 auto; }
.article-body figcaption {
    margin-top: 8px; text-align: center;
    font-family: inherit; font-size: 13px; line-height: 1.6; color: var(--muted, #6b6f6c);
}
/* TinyMCE 给带图注的图片生成 <figure class="image">，默认是 inline-block，这里统一成块级 */
.article-body figure.image { display: block; }
.article-body figure.image img { display: block; }

/* 文字环绕 */
.article-body img.img-left,
.article-body figure.img-left {
    float: left; width: 42%; max-width: 420px;
    margin: 6px 28px 14px 0;
}
.article-body img.img-right,
.article-body figure.img-right {
    float: right; width: 42%; max-width: 420px;
    margin: 6px 0 14px 28px;
}
.article-body figure.img-left img,
.article-body figure.img-right img { width: 100%; margin: 0; }

/* 小图居中 */
.article-body img.img-center-sm,
.article-body figure.img-center-sm {
    display: block; width: 60%; max-width: 520px; margin-inline: auto;
}
.article-body figure.img-center-sm img { width: 100%; margin: 0; }

/* 通栏宽幅：撑满正文栏 */
.article-body img.img-full,
.article-body figure.img-full { display: block; width: 100%; max-width: none; }
.article-body figure.img-full img { width: 100%; margin: 0; }

/* 多图并排 */
.article-body .img-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; margin: 28px 0; align-items: start;
}
.article-body .img-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-body .img-row > figure,
.article-body .img-row > p { margin: 0; min-width: 0; }
.article-body .img-row img {
    display: block; width: 100%; margin: 0;
    aspect-ratio: 4 / 3; object-fit: cover;
}
.article-body .img-row.cols-3 img { aspect-ratio: 1 / 1; }
/* 保持原始比例（不裁切）的并排 */
.article-body .img-row.natural img { aspect-ratio: auto; object-fit: contain; }

/* 手机：环绕图取消浮动、占满整行；三图并排改成一行一张，两图保持并排 */
@media (max-width: 640px) {
    .article-body img.img-left, .article-body figure.img-left,
    .article-body img.img-right, .article-body figure.img-right {
        float: none; display: block; width: 100%; max-width: none; margin: 20px 0;
    }
    .article-body img.img-center-sm, .article-body figure.img-center-sm { width: 82%; }
    .article-body .img-row { gap: 8px; margin: 20px 0; }
    .article-body .img-row.cols-3 { grid-template-columns: 1fr; }
    .article-body .img-row.cols-3 img { aspect-ratio: 4 / 3; }
    .article-body figcaption { font-size: 12px; }
}