/* 自己的容器设置 */
.container {
    max-width: 1200px; /* 限制最大宽度 */
    margin: 0 auto;    /* 水平居中 */
    padding: 20px;     /* 容器内部间距 */
}

/* 使用 flex 布局的卡片容器 */
.row {
    display: flex;
    flex-wrap: wrap;           /* 允许卡片换行 */
    justify-content: center;   /* 水平居中 */
    gap: 15px;                 /* 卡片之间的间距，减少为15px */
}

/* 每个卡片的样式 */
.post-item {
    background-color: #fff;        /* 背景色 */
    border-radius: 8px;            /* 圆角 */
    overflow: hidden;              /* 防止内容溢出 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    width: calc(25% - 15px);        /* 默认四列布局 */
    margin-bottom: 20px;           /* 底部间距 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 动画效果 */
}

/* 鼠标悬浮效果 */
.post-item:hover {
    transform: translateY(-5px); /* 上浮 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* 阴影加深 */
}

/* 图片容器，保持 5:3 横竖比 */
.post-image {
    position: relative;
    height: 0;
    padding-bottom: 60%; /* 保持 5:3 横竖比 */
    overflow: hidden;
    margin: 0;  /* 确保没有外边距 */
}

/* 让图片自适应容器并填满它 */
.post-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;        /* 让图片宽度填满容器 */
    height: 100%;       /* 让图片高度填满容器 */
    object-fit: cover;  /* 保证图片填满容器，裁剪多余部分 */
}

/* 标题容器 */
.post-title-container {
    padding: 5px;                /* 缩小内边距 */
    background-color: #f8f9fa;
    text-align: left;             /* 左对齐文本 */
    font-size: 12px;              /* 设置适当的字体大小 */
    font-weight: bold;
    height: 30px;                 /* 设置标题容器高度 */
    margin-top: 0;                /* 去掉顶部间距 */
    overflow: hidden;             /* 隐藏超出部分 */
    text-overflow: ellipsis;      /* 超出部分显示省略号 */
    white-space: normal;          /* 允许文本换行 */
    text-decoration: none;        /* 去掉标题下划线 */

    display: -webkit-box;         /* 必须使用 Webkit box model */
    -webkit-box-orient: vertical; /* 设置为纵向排列 */
    -webkit-line-clamp: 2;        /* 限制最多显示 2 行 */
    width: 100%;                  /* 宽度填充图片容器 */
    margin: 0 auto;               /* 水平居中对齐 */
}

/* 为了保持链接样式，去掉下划线但保留链接功能 */
.post-title-container a {
    text-decoration: none;        /* 去掉下划线 */
    color: #007bff;               /* 保持链接的默认颜色 */
}

/* 分页容器 */
.page-nav {
    display: flex;               /* 使用 flexbox 水平排列 */
    justify-content: center;     /* 水平居中 */
    align-items: center;         /* 垂直居中 */
    gap: 20px;                   /* 分页项之间的间距 */
    padding: 10px 0;
    margin: 20px auto;           /* 确保分页导航在父容器中居中 */
    list-style: none;            /* 去掉默认的列表样式 */
    width: 100%;                 /* 确保分页容器宽度填满父级容器 */
    max-width: 100%;             /* 确保容器宽度不会超出父级 */
}

/* 每个分页项 */
.page-nav li {
    display: inline-block;       /* 确保分页项是块级元素 */
}

/* 分页链接样式 */
.page-nav a {
    display: inline-block;
    padding: 8px 16px;           /* 增大分页按钮的内边距 */
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;         /* 设置圆角效果 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 14px;             /* 增大字体大小，确保分页按钮更大 */
}

/* 鼠标悬停时的效果 */
.page-nav a:hover {
    background-color: #0056b3;   /* 悬停时背景色 */
    transform: scale(1.1);        /* 鼠标悬停时放大效果 */
}

/* 当前页的样式 */
.page-nav .current a {
    background-color: #fff;
    color: #007bff;
    cursor: default;
    pointer-events: none;
}

/* 禁用分页链接的样式 */
.page-nav .disabled {
    background-color: #f0f0f0;
    color: #ccc;
    cursor: not-allowed;
    border-radius: 25px;
}

/* 隐藏分页省略号后的内容 */
.page-nav li.disabled {
    display: none;
}
/* 3. 针对移动端屏幕（< 768px）进一步精简 */
@media (max-width: 768px) {
    .page-nav {
        gap: 2px;                /* 移动端更紧凑的间距 */
    }
    
    /* 如果还是觉得占地方，可以隐藏省略号（可选） */
    .page-nav .dots {
        display: none;
    }
/* 针对手机端调整 */
@media (max-width: 768px) {
    /* 每个卡片在手机端变为两列 */
    .post-item {
        width: calc(50% - 15px); /* 手机端宽度为50% */
    }

    /* 分类标签调整 */
    .main-nav {
        flex-wrap: wrap;          /* 保持换行 */
        justify-content: center;  /* 水平居中 */
    }

    .main-nav a {
        width: calc(25% - 10px);  /* 每行最多显示四个标签 */
        margin-bottom: 10px;      /* 标签之间垂直间隔 */
        text-align: center;       /* 标签文本居中 */
        background-color: #f0f0f0; /* 标签背景色 */
        border-radius: 4px;        /* 标签圆角 */
        padding: 6px 12px;         /* 标签内边距 */
        color: #333;               /* 标签文本颜色 */
        font-size: 14px;           /* 标签字体大小 */
    }

    /* 搜索框样式 */
    .search-input {
        width: 85%;  /* 移动端缩小搜索框宽度 */
        top: 100px; /* 修改此处，调整搜索框下移的距离 */
    }
}