/* 博客分类筛选容器 */
.blog-categories-filter {
    margin: 40px auto;
    max-width: 1200px; /* 与下方文章列表的 container 宽度保持一致 */
    padding: 0 15px;
}

/* 分类列表布局 */
.categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start; /* 修改：从 center 改为 flex-start 实现左对齐 */
}

/* 分类按钮样式 */
.categories-list li a {
    display: block;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #5ac5c7;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* 激活/悬停状态 */
.categories-list li.active a,
.categories-list li a:hover {
    background: #5ac5c7;
    color: #fff;
}

/* 响应式：移动端垂直排列 */
@media (max-width: 768px) {
    .categories-list {
        flex-direction: column;
        align-items: flex-start; /* 修改：移动端也保持左对齐 */
    }
    .categories-list li a {
        width: 100%; /* 移动端按钮占满容器宽度 */
        text-align: left; /* 文字左对齐 */
        box-sizing: border-box; /* 确保 padding 不会撑破宽度 */
    }
}