/* 博客容器样式 */
.BlogContainer {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;  /* 居中容器 */
    padding: 20px;

}

/* 包裹整个容器的链接样式 */
.blog-entry-wrapper {
    display: block;  /* 使得 a 标签充当块级元素 */
    text-decoration: none;  /* 去掉默认的下划线 */
}

/* 博客条目样式 */
.blog-entry {
    padding: 1rem;
    margin: 1rem 0;
    background-color: #ffffff;
    border: 2px solid #9a88ba;  /* 添加外边缘 */
    border-radius: 0px;  /* 方正矩形 */
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 当鼠标悬停时变化 */
.blog-entry:hover {
    background-color: #f4f4f4;  /* 背景颜色变化 */
}

/* 标题样式 */
.blog-entry h3 {
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
    font-weight: bold;
    line-height: 1.2;

    /* --- 核心渐变实现 --- */
    /* 使用和你进度条完全一样的渐变色 */
    background: linear-gradient(90deg, #7f79f3, #9900ff);

    /* 将背景限制在文字形状内 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 将文字颜色设为透明，让背景色透出来 */
    color: transparent;

    /* 建议加上这个，防止渐变背景在某些布局下撑满全行导致视觉偏移 */
    display: inline-block;
}

/* 简介样式 */
.blog-entry p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 0.5rem;
    flex-grow: 1;  /* 让简介部分适应空间 */
}

/* 日期样式 */
.blog-entry .date {
    font-size: 0.9rem;
    color: #888;
    margin-top: 0.5rem;
    text-align: right;
}

/* 链接样式 */
.blog-entry-wrapper a {
    display: block;
    text-decoration: none;
}

.blog-entry h3 a {
    color: inherit;
    text-decoration: none;
}

/* 控制博客内容最大宽度和最小宽度，居中显示 */
.blog-content {
    max-width: 900px;  /* 最大宽度，避免内容过宽 */
    min-width: 320px;  /* 最小宽度，保证内容不太窄 */
    margin: 0 auto;    /* 水平居中 */
    padding: 20px;     /* 内边距，避免内容贴边 */
    word-wrap: break-word;  /* 自动换行，防止长单词或链接溢出 */
}

/* 图片最大宽度适应容器 */
.blog-content img {
    max-width: 100%;
    height: auto;
}

/* 当屏幕宽度小于 600px 时，自适应调整宽度 */
@media (max-width: 600px) {
    .blog-content {
        max-width: 100%;  /* 让内容填满屏幕 */
        min-width: 100%;  /* 防止内容宽度太窄 */
        padding: 10px;    /* 减少内边距，节省空间 */
    }
}

/* 当屏幕宽度大于 600px，小于 1200px 时，最大宽度限制在 900px */
@media (min-width: 600px) and (max-width: 1200px) {
    .blog-content {
        max-width: 800px;  /* 在中等屏幕上，最大宽度为 800px */
    }
}

/* --- 博客月份分组容器 --- */
.blog-month-group {
    margin-bottom: 18px; /* 【调小】缩小不同月份大块之间的间距 */
    width: 100%;
}

/* 月份标题栏 (模仿详情页 H1 的紫底白字风格) */
.blog-month-header {
    font-size: 1.25rem;
    font-weight: bold;
    padding: 10px 16px; /* 【调小】削减上下内边距，让条幅更紧凑 */
    background-color: #9a80d4; /* 这里的紫色取自你详情页截图，如果有特定的 CSS 变量如 var(--primary-color) 可替换 */
    color: #ffffff; /* 白字 */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.2s ease;
    margin-bottom: 10px; /* 【调小】缩小标题栏与下方第一篇博文的间距 */
}

/* 鼠标悬浮时颜色稍微加深一点点，增强交互感 */
.blog-month-header:hover {
    background-color: #876cbe;
}

/* 标题栏右侧的折叠箭头 */
.blog-month-header .toggle-icon {
    font-size: 0.9rem;
    color: #ffffff; /* 确保箭头在紫底上也是白色的 */
    transition: transform 0.3s ease;
}

/* 处于折叠状态时，箭头向右 */
.blog-month-header.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* --- 月份内容区 --- */
.blog-month-content {
    display: flex;
    flex-direction: column;
    gap: 5px; /* 【调小】缩小同一个月内，各个博文卡片之间的缝隙（原来是 15px） */
    overflow: hidden;
}

/* 折叠状态下隐藏内容 */
.blog-month-content.collapsed {
    display: none;
}