/* 博客页面主容器布局 */
.blog-page-container {
    max-width: 1400px;
    display: flex;
    gap: 30px; /* 左侧列表和右侧边栏的间距 */
    align-items: flex-start; /* 侧边栏和列表顶部对齐 */
}

/* 左侧文章列表区域 */
.blog-list-area {
    flex: 2; /* 占据约 2/3 宽度 */
    /* 在较小屏幕上可以调整为 flex: 1; 或 width: 100%; */
}

/* 单个文章项 */
.blog-list-item {
    display: flex; /* 封面图和内容左右布局 */
    background-color: #fff; /* 文章项背景 */
    border-radius: 12px; /* 圆角 */
    margin-bottom: 30px; /* 文章间距 */
    overflow: hidden; /* 防止封面图溢出圆角 */
    border: 1px solid #e5e5e7; /* 细边框 */
    transition: box-shadow 0.3s ease;
}

.blog-list-item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* 悬停阴影 */
}

/* 文章封面图 */
.post-cover {
    flex-shrink: 0; /* 防止图片被压缩 */
    width: 300px; /* 固定封面图宽度 */
    /* height: 150px;  可以设置固定高度或让其自适应 */
}

.post-cover img {
    width: 100%;
    height: 100%; /* 填充容器 */
    /*object-fit: cover;  保持比例裁剪 */
    display: block;
}

/* 文章内容区域 */
.post-content {
    padding: 20px 25px;
    flex-grow: 1; /* 占据剩余空间 */
    display: flex;
    flex-direction: column; /* 内部元素垂直排列 */
}

/* 如果没有封面图，让内容区占满 */
.post-content.full-width {
    width: 100%;
}

/* 文章标题 */
.post-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.post-title a {
    color: #1d1d1f;
    text-decoration: none;
}

.post-title a:hover {
    color: #0066cc;
    text-decoration: underline;
}

/* 文章元数据 (时间、分类、浏览) */
.post-meta {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 元数据项间距 */
    font-size: 13px;
    color: #6e6e73; /* 较浅的灰色 */
    margin-bottom: 15px;
}

.post-meta .meta-item i {
    margin-right: 5px; /* 图标和文字间距 */
}

.meta-type.original {
    color: #1a9a5c; /* 原创绿色 */
}

.meta-type.reprint {
    color: #0066cc; /* 转载蓝色 */
}

.meta-type.reprint-summary {
    color: #cc0052; /* 转载蓝色 */
}

/* 文章摘要 */
.post-summary {
    font-size: 14px;
    color: #515154;
    line-height: 1.6;
    margin-bottom: 15px;
    /* 可以限制显示行数 (需要浏览器支持) */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* 让摘要占据可用空间，把标签挤到底部 */
}

/* 文章标签 */
.post-tags {
    margin-top: auto; /* 将标签推到底部 */
    padding-top: 10px; /* 与摘要间距 */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-link {
    display: inline-block;
    background-color: #f0f0f5; /* 标签背景 */
    color: #515154; /* 标签文字颜色 */
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 12px; /* 胶囊形状 */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tag-link:hover {
    background-color: #0066cc;
    color: #fff;
    text-decoration: none;
}


/* 右侧边栏区域 */
.sidebar-area {
    flex: 1; /* 占据约 1/3 宽度 */
    /* A fixed width can also be used, e.g., width: 280px; */
    /* flex-basis: 280px; /* Or set a base width */
}

/* 侧边栏小部件 */
.sidebar-widget {
    background-color: #fff; /* 小部件背景 */
    padding: 20px;
    border-radius: 12px; /* 圆角 */
    margin-bottom: 25px; /* 小部件间距 */
    border: 1px solid #e5e5e7; /* 细边框 */
}

/* 小部件标题 */
.widget-title {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
    padding-bottom: 10px; /* 标题下的空间 */
    border-bottom: 1px solid #f0f0f5; /* 标题下的细分割线 */
}

/* 小部件列表 (用于最新文章、热门文章、分类、系列) */
.widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-list li {
    margin-bottom: 10px;
}

.widget-list li:last-child {
    margin-bottom: 0;
}

.widget-list li a {
    color: #333; /* 列表链接颜色 */
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    display: block; /* 让链接占据整行, 方便点击 */
    line-height: 1.5;
}

.widget-list li a:hover {
    color: #0066cc;
    text-decoration: underline;
}

/* 分类列表特殊样式 (带计数) */
.category-list li a {
    display: flex;
    justify-content: space-between; /* 分类名和计数分开 */
    align-items: center;
}

.category-list .count {
    font-size: 12px;
    color: #888;
    background-color: #f0f0f5; /* 计数背景 */
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px; /* 与分类名间距 */
}

/* 标签云样式 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* 标签间距 */
}

/* .tag-cloud .tag-link 样式已在 .post-tags 中定义，这里可以复用或覆盖 */
.tag-cloud .tag-link {
    /* 如果需要不同样式，可以在这里添加覆盖 */
    /* 例如，稍微大一点的字体 */
    /* font-size: 13px; */
    /* background-color: #e8eefc; /* 淡蓝色背景 */
    /* color: #0052cc;*/
}


/* === 响应式调整 (针对博客页面) === */

@media (max-width: 900px) {
    /* 调整断点以适应两栏布局 */
    .blog-page-container {
        flex-direction: column; /* 垂直堆叠 */
    }

    .blog-list-area {
        width: 100%; /* 占据全部宽度 */
        flex: none; /* 取消 flex 比例 */
    }

    .sidebar-area {
        width: 100%; /* 占据全部宽度 */
        flex: none; /* 取消 flex 比例 */
        margin-top: 30px; /* 与文章列表的间距 */
    }

    /* 可以考虑适当调整封面图尺寸 */
    .post-cover {
        width: 180px;
    }

    .post-content {
        padding: 15px 20px;
    }

    .post-title {
        font-size: 18px;
    }

    .post-summary {
        font-size: 13px;
        -webkit-line-clamp: 3; /* 小屏幕可以多显示一行摘要 */
    }
}

@media (max-width: 768px) {
    /* 这里继承了上面 max-width: 900px 的 column 布局 */
    /* 继承了通用响应式中的导航调整 */
    /* 在更小的屏幕上可以隐藏封面图或改变布局 */
    .blog-list-item {
        flex-direction: column; /* 文章项内部也垂直排列 */
    }

    .post-cover {
        width: 100%; /* 封面图宽度占满 */
        height: 180px; /* 设置一个固定高度 */
        /* border-bottom: 1px solid #e5e5e7; */ /* 可选：添加分割线 */
    }

    .post-cover img {
        border-radius: 12px 12px 0 0; /* 调整圆角只应用到上方 */
    }

    .post-content {
        /* padding: 20px; */ /* 可恢复或调整内边距 */
        border-radius: 0 0 12px 12px; /* 内容区域下方圆角*/
    }

    .blog-list-item:hover {
        transform: none; /* 小屏幕取消悬停位移 */
    }

    /* 侧边栏小部件内间距调整 */
    .sidebar-widget {
        padding: 15px;
    }

    .widget-title {
        font-size: 16px;
    }

    .widget-list li a {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    /* 继承了通用响应式中的导航、字体大小调整 */
    .blog-list-area {
        /* padding: 0 10px; */ /* 可以给列表区加一些水平内边距 */
    }

    .blog-list-item {
        margin-bottom: 20px; /* 减小文章间距 */
        border-radius: 10px; /* 减小圆角 */
    }

    .post-cover {
        height: 150px; /* 进一步减小封面高度 */
    }

    .post-content {
        padding: 15px;
    }

    .post-title {
        font-size: 17px;
    }

    .post-meta {
        font-size: 12px;
        gap: 10px;
    }

    .post-summary {
        font-size: 13px;
    }

    .post-tags .tag-link {
        font-size: 11px;
        padding: 2px 8px;
    }

    .pagination .page-link {
        padding: 6px 12px;
        font-size: 13px;
    }

    .sidebar-area {
        margin-top: 20px;
    }

    .sidebar-widget {
        border-radius: 10px;
        margin-bottom: 20px;
    }
}