/* ============================================================
 * 文章详情页专属样式 page-article.css
 * 用于 article/detail.html，通过 $pageCss 注入
 * 依赖 common.css（频道页骨架/变量等）
 * ============================================================ */

.wv-article-detail-wrapper {
    padding: 20px 0;
}

.wv-article-detail {
    background: #fff;
    padding: 30px;
    border-radius: 4px;
}

.wv-article-detail-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-title);
    margin-bottom: 16px;
    line-height: 1.4;
    text-align: center;
}

.wv-article-detail-meta {
    display: flex;
    justify-content: center;
    gap: 24px;
    font-size: 13px;
    color: var(--color-text-light);
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.wv-article-detail-body {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.8;
}

.wv-article-detail-body p {
    margin-bottom: 16px;
    text-indent: 2em;
}

.wv-article-detail-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 16px auto;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .wv-article-detail-wrapper {
        padding: 12px 0;
    }
    .wv-article-detail {
        padding: 18px 14px;
    }
    /* 手机端标题收窄，左对齐更贴合窄屏阅读 */
    .wv-article-detail-title {
        font-size: 19px;
        margin-bottom: 12px;
    }
    /* meta 信息换行、左对齐 */
    .wv-article-detail-meta {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px 16px;
        padding-bottom: 14px;
        margin-bottom: 16px;
    }
    /* 正文：取消首行缩进（窄屏更整齐），字号略降 */
    .wv-article-detail-body {
        font-size: 14px;
    }
    .wv-article-detail-body p {
        text-indent: 0;
        margin-bottom: 14px;
    }
}