/* ========================================== posts.css ========================================= */

/* 单篇文章标题 */
.post-header .post-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    /* 保持标题与日期同行 */
    align-items: baseline;
    /* 日期对齐底部 */
    gap: 0.5rem;
    /* 标题和日期间距 */
    background: none;
    /* 移除背景 */
    border: none;
    /* 移除边框 */
    padding: 0;
    /* 移除多余内边距 */
}


/* 单篇文章标题后的日期 */
.post-header .post-title .post-date {
    font-size: 0.65em;
    color: #999;
    background: none;
    /* 移除背景 */
    border: none;
    /* 移除边框 */
    padding: 0;
    /* 移除多余内边距 */
}


/* 单篇文章正文内容 */
.post-content {
    margin-top: 2rem;
    /* 与标题区分开 */
    font-size: 1rem;
    /* 正文字号 */
    line-height: 1.7;
    /* 阅读舒适行距 */
    overflow-x: hidden;
    /* 防止横向滚动条 */
    word-wrap: break-word;
    /* 防止长文字或链接撑开 */
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* 正文段落间距与首行缩进 */
.post-content p {
    margin-bottom: 1rem;
    text-indent: 0em;
    /* 首行缩进0个字符宽度 */
    max-width: 100%;
    /* 防止父元素撑开 */
    overflow: hidden;
    /* 隐藏可能溢出的部分 */
}


/* 各级标题在文章内容中的统一样式 */
.post-content h1,
.post-content h2,
.post-content h3 {
    margin-top: 2rem;
    /* 上方间距 */
    margin-bottom: 1rem;
    /* 下方间距 */
    color: #2c3e50;
    /* 深色标题 */
}


/* ========================================== 图片样式优化 ========================================= */

/* 文章内图片基础样式 */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    /* 图片居中显示，上下留白 */
    cursor: zoom-in;
    /* 鼠标悬停显示放大图标 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* 轻微阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* 平滑过渡效果 */
}

/* 桌面端图片悬停效果 */
@media (min-width: 768px) {
    .post-content img:hover {
        transform: translateY(-2px);
        /* 轻微上浮 */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        /* 加深阴影 */
    }
}

/* 图片放大后的光标样式 */
.medium-zoom-image--opened {
    cursor: zoom-out;
    /* 放大后显示缩小图标 */
}

/* 确保放大图片和遮罩层在最上层 */
.medium-zoom-overlay,
.medium-zoom-image {
    z-index: 999;
}

/* Medium Zoom 背景遮罩自定义 */
.medium-zoom-overlay {
    background: rgba(0, 0, 0, 0.9) !important;
    /* 深色半透明背景 */
}

/* 移动端图片优化 */
@media (max-width: 767px) {
    .post-content img {
        margin: 1rem auto;
        /* 移动端减少上下间距 */
        border-radius: 6px;
        /* 移动端圆角稍小 */
        max-width: 100%;
        /* 确保不超出屏幕 */
    }
}

/* 图片标题/说明文字样式（如果使用 Markdown 的图片标题） */
.post-content img+em,
.post-content figure figcaption {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
    font-style: italic;
}

/* 分栏*/
.container {
    overflow: hidden;
    /* 清除浮动 */
}

.column {
    float: left;
    /* 让元素浮动到左边 */
    width: 48%;
    /* 设置列宽，留出间距 */
    padding: 20px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    margin-right: 4%;
    /* 右边栏留出间距 */
}

.column:last-child {
    margin-right: 0;
    /* 去掉最后一栏的右边距 */
}