/* ========================
   文稿详情页布局
   - 左侧阅读区 : 右侧填充区 = 3 : 1
   ======================== */

/* 详情页主体容器：使用 flex 布局，左右两栏排列 */
.detail-main {
    display: flex;
    gap: 12px;
    /* 减小左右两栏之间的间距 */
    padding: 24px 0 40px;
    /* 上下内边距 */
}

/* 详情页内容区（左侧阅读区）：占 3 份宽度，显示文章正文内容 */
.detail-content {
    flex: 3;
    /* 占据 3 份宽度 */
    background-color: #ffffff;
    /* 白色背景 */
    border: 1px solid #e5e5e5;
    /* 浅灰色边框 */
    border-radius: 0;
    /* 直角 */
    padding: 24px 28px 32px;
    /* 内边距：上24px 左右28px 下32px */
}

/* 详情页侧边栏（右侧填充区）：占 1 份宽度，用于显示广告或其他内容 */
.detail-aside {
    flex: 1;
    /* 占据 1 份宽度 */
    margin-top: 0;
    /* 顶部无外边距 */
}

/* 详情页头部区域：包含标题和元信息（日期、作者、阅读量等） */
.detail-header {
    border-bottom: 1px solid #eeeeee;
    /* 底部边框分隔 */
    padding-bottom: 16px;
    /* 底部内边距 */
    margin-bottom: 20px;
    /* 底部外边距 */
}

/* 详情页标题样式 */
.detail-title {
    margin: 0 0 12px;
    /* 上下外边距：上0 下12px */
    font-size: 26px;
    /* 字体大小 */
    font-weight: bold;
    /* 粗体 */
    line-height: 1.4;
    /* 行高 */
    color: #222222;
    /* 深灰色文字 */
}

/* 详情页元信息容器：包含日期、作者、阅读量等信息 */
.detail-meta {
    display: flex;
    /* 弹性布局 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 12px 20px;
    /* 元素间距：行12px 列20px */
    font-size: 13px;
    /* 字体大小 */
    color: #999999;
    /* 浅灰色文字 */
}

/* 详情页元信息单项：单个元信息项（如日期、阅读量） */
.detail-meta-item {
    display: inline-flex;
    /* 行内弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 4px;
    /* 图标和文字之间的间距 */
}

/* 详情页摘要区域：显示文章摘要，带左侧红色边框 */
.detail-summary {
    background-color: #f9f9f9;
    /* 浅灰色背景 */
    border-left: 4px solid #750a20;
    /* 左侧红色边框 */
    padding: 12px 16px;
    /* 内边距 */
    margin-bottom: 20px;
    /* 底部外边距 */
}

/* 摘要标题样式 */
.detail-summary-title {
    margin: 0 0 6px;
    /* 上下外边距：上0 下6px */
    font-size: 15px;
    /* 字体大小 */
    font-weight: bold;
    /* 粗体 */
    color: #333333;
    /* 深灰色文字 */
}

/* 摘要文本样式 */
.detail-summary-text {
    margin: 0;
    /* 无外边距 */
    font-size: 14px;
    /* 字体大小 */
    line-height: 1.8;
    /* 行高 */
    color: #555555;
    /* 中灰色文字 */
}

/* 详情页正文内容区域：文章主体内容 */
.detail-body {
    font-size: 15px;
    /* 字体大小 */
    line-height: 1.9;
    /* 行高 */
    color: #333333;
    /* 深灰色文字 */
    font-family: "SimSun", 宋体, serif;
    /* 使用宋体字体 */
}

/* 正文中的段落样式 */
.detail-body p {
    margin: 0 0 14px;
    /* 上下外边距：上0 下14px */
}

/* 详情页封面图片容器：文章顶部的大图 */
.detail-cover {
    margin-bottom: 20px;
    /* 底部外边距 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    border-radius: 0;
    /* 直角 */
}

/* 封面图片样式：自动调整大小，保持宽高比，不裁剪 */
.detail-cover-image {
    width: 100%;
    /* 宽度占满容器 */
    max-width: 100%;
    /* 最大宽度不超过容器 */
    height: auto;
    /* 高度自动调整 */
    max-height: 500px;
    /* 最大高度限制 */
    object-fit: contain;
    /* 保持比例，完整显示图片 */
    display: block;
    /* 块级元素 */
    margin: 0 auto;
    /* 水平居中 */
}

/* 详情页正文中的图片：文章内容里的图片 */
.detail-body img {
    max-width: min(100%, 600px) !important;
    /* 限制最大宽度为800px或容器宽度（取较小值），避免图片过大，使用!important覆盖内联样式 */
    width: auto;
    /* 宽度自动，保持原始比例 */
    height: auto;
    /* 高度自动调整，保持比例 */
    display: block;
    /* 块级元素 */
    margin: 16px auto;
    /* 上下16px外边距，水平居中 */
    border-radius: 0;
    /* 直角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
}

/* 正文中的标题样式：h2、h3、h4 标题 */
.detail-body h2,
.detail-body h3,
.detail-body h4 {
    margin: 18px 0 10px;
    /* 上下外边距：上18px 下10px */
    font-weight: bold;
    /* 粗体 */
    color: #222222;
    /* 深灰色文字 */
}

/* 正文中的列表样式：有序列表和无序列表 */
.detail-body ul,
.detail-body ol {
    padding-left: 20px;
    /* 左侧内边距，用于缩进 */
    margin: 0 0 14px;
    /* 上下外边距：上0 下14px */
}

/* ========================
   移动端响应式适配（手机等小屏幕）
   - 断点：768px 及以下
   ======================== */
@media (max-width: 768px) {

    /* 详情页主体容器：小屏幕时改为纵向排列 */
    .detail-main {
        flex-direction: column;
        /* 改为纵向排列 */
        gap: 12px;
        /* 减小间距 */
        padding: 16px 0 24px;
        /* 减小上下内边距 */
    }

    /* 内容区在小屏幕时：占满宽度，优先显示在顶部 */
    .detail-content {
        flex: 1;
        /* 占据可用空间 */
        width: 100%;
        /* 占满宽度 */
        order: 1;
        /* 排列顺序为1，确保显示在顶部 */
        padding: 20px 18px 24px;
        /* 调整内边距：上20px 左右18px 下24px */
    }

    /* 侧边栏在小屏幕时：占满宽度，移到内容下方 */
    .detail-aside {
        flex: 1;
        /* 占据可用空间 */
        width: 100%;
        /* 占满宽度 */
        margin-top: 0;
        /* 顶部无外边距 */
        order: 2;
        /* 排列顺序为2，确保显示在内容下方 */
    }
}