/* =============================================================================
 * richtext.css — 富文本内容公共组件
 * -----------------------------------------------------------------------------
 * 统一约束后台富文本编辑器产出的内容（商品详情 / 服务详情 / 文章页共用）。
 *
 * 容器选择器（历史原因存在两套类名，规则完全一致）：
 *   .article_content  → pages/goods/detail.html、pages/service/detail.html（tab-content）
 *   .article-content  → pages/article/article.html（module/article/content）
 *
 * 引入方式：在页面 detail.css / article.css 之后引入，本文件规则优先生效：
 *   <link rel="stylesheet" th:href="@{/static/css/latest/richtext.css(v=${appVersion})}">
 *
 * 设计要点：
 *   1. 图片：max-width 约束 + 圆角 + 底部间距，防止编辑器大图溢出；
 *   2. 段落：两端对齐 + 首行缩进 2em（文章式排版），
 *      但含图段落取消缩进 —— text-indent 会把行内 <img> 推右 2em，
 *      而 img 的 max-width:100% 仍按整段宽度计算，移动端会右侧溢出被切
 *      （2026-10 welcome.html 海报图 bug 的根因）；
 *   3. 表格 / pre / video / iframe：移动端限宽 + 横向滚动，撑破布局；
 *   4. 字号/行高统一：桌面 16px / 1.85，移动端 15px / 1.85。
 * ========================================================================== */

.article_content,
.article-content {
    font-size: var(--font-size-card-title);
    line-height: 1.85;
    color: var(--color-text-body);
    overflow-wrap: break-word;
}

/* ---- 标题 ---- */
.article_content h2,
.article_content h3,
.article_content h2 span,
.article_content h3 span,
.article-content h2,
.article-content h3,
.article-content h2 span,
.article-content h3 span {
    font-size: var(--font-size-h3) !important;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: var(--font-weight-semibold);
}

/* ---- 段落 ---- */
.article_content p,
.article-content p {
    font-size: var(--font-size-card-title) !important;
    line-height: 1.85;
    margin: 0 0 18px 0;
    text-align: justify;
    text-indent: 2em;
}

.article_content p:last-child,
.article-content p:last-child {
    margin-bottom: 0;
}

/* 含图段落取消首行缩进，避免行内图片被推右溢出屏幕 */
.article_content p:has(> img),
.article-content p:has(> img) {
    text-indent: 0;
}

/* ---- 图片 ---- */
.article_content img,
.article-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm) !important;
}

/* ---- 列表 ---- */
.article_content ul li,
.article-content ul li {
    font-size: var(--font-size-card-title) !important;
    list-style: square;
    margin-left: 20px;
    line-height: 40px;
}

/* ---- 移动端 ---- */
@media (max-width: 768px) {

    .article_content,
    .article-content {
        font-size: 15px;
    }

    .article_content p,
    .article-content p {
        font-size: 15px !important;
        line-height: 1.85;
    }

    .article_content ul li,
    .article-content ul li {
        margin-left: 18px;
        font-size: 15px !important;
        line-height: 1.8;
    }

    /* 宽表格改为容器内横向滚动，不撑破页面 */
    .article_content table,
    .article-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .article_content iframe,
    .article_content pre,
    .article_content video,
    .article-content iframe,
    .article-content pre,
    .article-content video {
        max-width: 100%;
        overflow: auto;
    }
}