/* Article Index 页面专用样式 - 与Home页面文章栏目保持一致 */

/* 文章列表容器 - 与右侧卡片等高 */
.blog-body .article-list-container {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 文章列表内部left-box */
.blog-body .article-list-container .left-box {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 文章列表标题样式 */
.blog-body .article-list-container .left-box-title {
    margin: 0 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* 文章列表项内边距 */
.blog-body .article-list-container .article {
    margin: 0 !important;
    border-bottom: 1px solid rgba(242, 242, 242, 0.5) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.blog-body .article-list-container .article:last-child {
    border-bottom: none !important;
}

/* 分页容器 */
.blog-body .article-list-container .blog-pagebox {
    padding: 15px;
    background-color: transparent !important;
}

/* 空数据提示框 */
.blog-body .emptybox {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* 右侧卡片样式 */
.blog-body .blog-card {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15) !important;
}

/* 调整右侧卡片默认高度 */
.blog-body .blog-card-ul {
    min-height: 100px !important;
}

/* 搜索框样式 */
.blog-body .blog-search .search-keywords,
.blog-body .blog-search .search-submit {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15) !important;
}

/* 分类导航样式 */
.blog-body .article-category {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15) !important;
}

/* 让左右两栏高度一致 */
.blog-body .layui-row.layui-col-space15 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.blog-body .layui-col-md8,
.blog-body .layui-col-md4 {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .layui-hide-xs {
        display: none !important;
    }

    /* 移动端取消flex布局 */
    .blog-body .layui-row.layui-col-space15 {
        display: block;
    }

    .blog-body .layui-col-md8,
    .blog-body .layui-col-md4 {
        display: block;
    }
}