/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    -ms-background-color: #f4f4f4; /* 针对 Edge 的特定前缀 */
}

/* 页面主体容器 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

/* 顶部图片容器 */
.top-image-container {
    width: 100%;
    max-width: 1200px; /* 与页面主体宽度一致 */
    margin: 0 auto;
    padding: 0; /* 移除内边距 */
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

/* 顶部图片 */
.top-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

/* 博客列表容器 */
#posts-container {
    width: 100%;
    max-width: 1200px; /* 与顶部图片容器宽度一致 */
    margin: 0 auto;
    padding: 0; /* 移除内边距 */
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自动适应列数 */
    gap: 20px; /* 列间距 */
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

/* 博客条目样式 */
.post {
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 20px;
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

/* 博客标题样式 */
.post h2 {
    font-size: 1.5em;
    color: #007bff;
    margin-top: 0;
    white-space: normal; /* 允许换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    max-width: 100%; /* 限制最大宽度 */
    box-sizing: border-box; /* 确保内边距不影响宽度 */
    word-break: break-word; /* 强制换行 */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
}

/* EMOJI 符号样式 */
.post h2 .emoji {
    margin-left: 5px; /* EMOJI 符号与标题的间距 */
    white-space: nowrap; /* EMOJI 符号不换行 */
}

/* 博客图片 */
.post-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

/* 链接样式 */
a {
    text-decoration: none; /* 移除下划线 */
    color: inherit; /* 继承父元素颜色 */
}

a:hover {
    text-decoration: none; /* 鼠标悬停时显示下划线 */
}

/* 按钮样式 */
button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

button:hover {
    background-color: #0056b3;
}

/* 加载提示 */
#loading {
    font-size: 1.2em;
    color: #777;
    margin-top: 20px;
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

/* 响应式布局 */
@media (max-width: 768px) {
    /* 手机端：单列显示 */
    #posts-container {
        grid-template-columns: 1fr; /* 单列布局 */
    }

    .container {
        padding: 10px;
    }

    .post {
        padding: 10px;
    }

    /* 手机端标题样式 */
    .post h2 {
        font-size: 1.2em; /* 缩小字体大小 */
        white-space: normal; /* 允许换行 */
        overflow: visible; /* 允许内容显示 */
        text-overflow: clip; /* 禁用省略号 */
        word-break: break-word; /* 强制换行 */
    }
}