/* index.css */

/* 轮播图 */
.carousel {
    margin-bottom: 20px;
}

/* 文章列表样式
   设计文章卡片的外观和交互效果
   使用阴影过渡和文本溢出控制，提升用户体验
*/
.article-list {
    border: solid 1px #333; /* 深灰色边框，定义卡片边界 */
    margin: 10px 0; /* 上下间距，确保内容分隔清晰 */
    background-color: #1e1e1e; /* 深灰色背景，与整体风格一致 */
    padding: 15px 0; /* 内边距，控制内容与边框的距离 */
    transition: box-shadow 0.3s; /* 添加阴影过渡效果，增强交互体验 */
}
.article-list:hover {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1); /* 悬停时添加轻微阴影，创造层次感 */
}
.article-list .thumb {
    margin: 0; /* 清除默认边距 */
    padding: 2px 10px 0 0; /* 设置图片与文本的间距 */
}
.article-list .detail {
    padding: 0 10px; /* 内容区域内边距 */
}
.article-list .detail .title {
    font-size: 22px; /* 标题字体大小 */
    color: #ff8a70; /* 使用与链接悬停相同的橙色，保持视觉一致性 */
    margin-bottom: 10px; /* 标题与内容的间距 */
}
.article-list .detail .title a:hover {
    text-decoration: none; /* 标题悬停时不显示下划线 */
    color: #ff6b4d; /* 标题悬停时使用更深的橙色，提供视觉反馈 */
}
.article-list .detail .info {
    display: flex; /* 使用flex布局排列信息项 */
    flex-wrap: wrap; /* 允许信息项换行显示 */
    gap: 20px; /* 信息项之间的间距 */
    font-size: 14px; /* 较小的字体大小，弱化次要信息 */
    color: #999; /* 灰色文字，降低视觉优先级 */
    margin-bottom: 10px; /* 与摘要内容的间距 */
}
.article-list .detail .intro {
    font-size: 16px; /* 摘要内容字体大小 */
    line-height: 25px; /* 行高，提高可读性 */
    /* 文本溢出控制，限制为2行，超出部分显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 分页样式
   设计分页控件的外观
   突出显示当前页码，确保在浅色背景上可见
*/
.paginate {
    margin: 20px 0; /* 上下间距 */
}
.pagination .page-link {
    color: #e0e0e0; /* 默认分页链接颜色，使用浅色确保在深色背景上可见 */
    background-color: #1e1e1e; /* 深灰色背景 */
    border: 1px solid #333; /* 深灰色边框 */
}
.pagination .page-item.active .page-link {
    background-color: #ff8a70; /* 当前页高亮色，使用橙色与整体风格一致 */
    border-color: #ff8a70; /* 边框颜色同步 */
}