/*
 * @kanway-css-index
 * 文件: css/media/media-article.css
 * 层级: 媒体
 * 引用页面: Media/insights/*.html
 * 依赖: media-icons.css
 * 修改指引: 文章正文 .article-*
 * 索引: css/00-样式文件索引.css
 */
/* ==============================================
   文章详情页 整体样式 - 全局入口
   ============================================== */

/* ---------- 面包屑导航模块 ---------- */
.breadcrumb {
    background: #f5f5f5;    /* 面包屑背景浅灰色 */
    padding: 12px 0;        /* 上下内边距 */
    font-size: 13px;          /* 基础字号 */
}
/* 面包屑容器 居中+最大宽度限制 */
.breadcrumb .container {
    max-width: 1450px;      /* 页面最大宽度 */
    margin: 0 auto;         /* 水平居中 */
    padding: 0 20px;        /* 左右安全内边距 */
}
/* 面包屑链接 默认颜色 */
.breadcrumb a {
    color: #666;            /* 文字灰色 */
    text-decoration: none;  /* 取消下划线 */
}
/* 面包屑链接 悬浮高亮 */
.breadcrumb a:hover {
    color: #1D5198;         /* 主题蓝高亮 */
}
/* 面包屑分隔符文字颜色 */
.breadcrumb span {
    color: #999;            /* 浅灰弱化 */
}

/* ---------- 文章页面 外层大容器 ---------- */
.article-page {
    width: 91%;             /* 页面占屏比例 */
    min-width: 1024px;      /* 最小宽度 小屏不压缩 */
    margin: 0 auto;         /* 整体居中 */
    padding: 30px 7.5% 60px;/* 上左右下 内边距 */
}

/* ---------- 文章网格布局：主内容 + 侧边栏 ---------- */
.article-grid {
    display: grid;                      /* 网格布局 */
    grid-template-columns: 1fr 320px;   /* 左自适应 + 右侧边栏固定320px */
    gap: 30px;                          /* 两栏间距 */
}

/* ---------- 文章主内容卡片 整体样式 ---------- */
.article-main {
    background: #fff;                     /* 白色背景 */
    border-radius: 8px;                   /* 圆角 */
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);/* 浅色阴影 */
    overflow: hidden;                     /* 溢出裁切 */
}

/* 文章头部内边距 */
.article-header {
    padding: 30px 30px 0;
}

/* 文章大标题样式 */
.article-title {
    font-size: 26px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* 文章元信息栏：时间/分类/阅读量 */
.article-meta {
    display: flex;               /* 横向排列 */
    flex-wrap: wrap;             /* 自动换行 */
    gap: 20px;                   /* 项目间距 */
    padding: 14px 20px;
    background: #f9f9f9;         /* 浅灰背景 */
    border-radius: 6px;          /* 小圆角 */
    font-size: 13px;
    color: #666;
}
/* 元信息单项 垂直居中 */
.article-meta span {
    display: flex;
    align-items: center;
}
/* 元信息图标 主题色 */
.article-meta i {
    color: #1D5198;
    margin-right: 6px;
}

/* ---------- 文章封面图模块 ---------- */
.article-cover {
    margin: 24px 30px;  /* 上下左右外边距 */
}
/* 封面图片尺寸+裁切+圆角 */
.article-cover img {
    width: 100%;
    height: 400px;
    object-fit: cover;  /* 等比例裁切不变形 */
    border-radius: 8px;
}

/* ---------- 文章正文内容 通用样式 ---------- */
.article-content {
    padding: 20px 30px 30px;
    font-size: 15px;
    line-height: 1.8;   /* 行高舒适阅读 */
    color: #555;
}
/* 正文段落 底边距+两端对齐 */
.article-content p {
    margin-bottom: 20px;
    text-align: justify;
}
/* 正文三级标题 左侧竖线装饰 */
.article-content h3 {
    font-size: 18px;
    font-weight: bold;
    color: #1D5198;
    margin: 30px 0 16px;
    padding-left: 12px;
    border-left: 3px solid #1D5198;
}
/* 正文四级标题 */
.article-content h4 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 24px 0 12px;
}
/* 正文无序列表 */
.article-content ul {
    margin: 16px 0;
    padding-left: 20px;
}
/* 列表单项行距 */
.article-content li {
    margin-bottom: 10px;
    line-height: 1.6;
}
/* 正文内图片 自适应+圆角+上下边距 */
.article-content img {
    width: 100%;
    border-radius: 8px;
    margin: 20px 0;
}

/* ---------- 文章标签模块 ---------- */
.article-tags {
    padding: 24px 30px;
    border-top: 1px solid #eee; /* 上分割线 */
}
/* 标签标题文字 */
.article-tags-title {
    font-weight: bold;
    color: #666;
    margin-right: 12px;
}
/* 标签按钮 默认样式 */
.article-tags a {
    display: inline-block;
    padding: 5px 14px;
    background: #f5f5f5;
    color: #666;
    font-size: 13px;
    border-radius: 20px;    /* 胶囊圆角 */
    margin: 0 4px 8px 0;
    text-decoration: none;
    transition: all 0.3s;  /* 悬浮过渡动画 */
}
/* 标签按钮 悬浮变色 */
.article-tags a:hover {
    background: #1D5198;
    color: #fff;
}

/* ---------- 上下篇导航模块 ---------- */
.article-nav {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    border-top: 1px solid #eee;
}
/* 上下篇链接默认样式 */
.article-nav a {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 14px;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 16px;
    max-width: 45%; /* 限制宽度防止溢出 */
}




/* ---------- 侧边栏整体 ---------- */
.sidebar {
    width: 320px;
    flex-shrink: 0; /* 禁止被压缩 */
}
/* 侧边栏每个小部件卡片 */
.sidebar-widget {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* 侧边栏模块标题 */
.widget-title {
    font-size: 16px;
    color: #1D5198;
    font-weight: bold;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid #FC6B00; /* 橙色下划装饰线 */
}
/* 标题图标橙色 */
.widget-title i {
    margin-right: 8px;
    color: #FC6B00;
}

/* ---------- 侧边栏：相关文章列表 ---------- */
.related-list {
    display: flex;
    flex-direction: column; /* 纵向排列 */
}
/* 单条相关文章项 */
.related-item {
    display: flex;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f5;
}
/* 最后一条取消下边框和边距 */
.related-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* 相关文章缩略图容器 */
.related-item-img {
    width: 80px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
/* 缩略图铺满裁切 */
.related-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 相关文章文字内容 左间距 */
.related-item-content {
    margin-left: 12px;
}
/* 相关文章标题字号行高 */
.related-item-title {
    font-size: 14px;
    line-height: 1.4;
}
/* 标题链接默认色 */
.related-item-title a {
    color: #333;
    text-decoration: none;
}
/* 标题链接悬浮主题色 */
.related-item-title a:hover {
    color: #1D5198;
}
/* 相关文章日期 小号浅灰 */
.related-item-date {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* ---------- 侧边栏：分类列表 ---------- */
.category-list {
    list-style: none; /* 去掉默认列表圆点 */
}
/* 分类列表单项 底部分割线 */
.category-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
/* 最后一项取消分割线 */
.category-list li:last-child {
    border-bottom: none;
}
/* 分类链接 横向居中 */
.category-list a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}
/* 分类链接悬浮变色 */
.category-list a:hover {
    color: #1D5198;
}
/* 分类图标主题蓝 */
.category-list a i {
    color: #1D5198;
    margin-right: 8px;
}
/* 分类数量文字 浅灰小号 */
.category-list span {
    color: #999;
    font-size: 12px;
}

/* ---------- 侧边栏：标签云 ---------- */
.tag-cloud {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 8px;        /* 标签之间间距 */
}
/* 标签云按钮默认样式 */
.tag-cloud a {
    display: inline-block;
    padding: 6px 12px;
    background: #f5f5f5;
    color: #666;
    font-size: 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s;
}
/* 标签云悬浮变色 */
.tag-cloud a:hover {
    background: #1D5198;
    color: #fff;
}

/* ==============================================
   响应式适配：平板 1024px 以下
   ============================================== */
@media (max-width: 1024px) {
    .article-grid {
        grid-template-columns: 1fr; /* 两栏变单栏 */
    }
    .sidebar {
        width: 100%; /* 侧边栏全屏宽 */
    }
}

/* ==============================================
   响应式适配：手机 768px 以下
   ============================================== */
@media (max-width: 768px) {
    .article-title {
        font-size: 20px; /* 标题缩小字号 */
    }
    /* 头部、内容左右内边距缩小 */
    .article-header,
    .article-content {
        padding-left: 16px;
        padding-right: 16px;
    }
    .article-meta {
        gap: 12px; /* 元信息间距缩小 */
    }
    .article-cover {
        margin-left: 16px;
        margin-right: 16px;
    }
    .article-cover img {
        height: 250px; /* 手机封面图高度降低 */
    }
    /* 上下篇改为纵向排列 */
    .article-nav {
        flex-direction: column;
        gap: 12px;
    }
    .article-nav a {
        max-width: 100%; /* 手机链接全屏宽 */
    }
}

/* 标签云样式强制兜底 覆盖冲突 */
.tag-cloud a {
    color: #666;
    font-size: 12px;
    border-radius: 20px;
    text-decoration: none;
}
.tag-cloud a:hover {
    background: #1D5198 !important;
    color: #fff !important;
}