/**
 * 文章内容图片间距修复样式
 * 解决七夸主题文章内容中图片连在一起没有间距的问题
 */

/* 文章内容中的图片基础样式 */
.article-content img {
    width: 100%; /* 全宽显示 */
    height: auto;
    border-radius: var(--radius);
    margin: 1.5em 0; /* 上下间距 */
    display: block; /* 块级显示，确保独占一行 */
}

/* 图片容器样式 */
.article-content figure {
    margin: 1.5em 0;
    text-align: center;
}

/* 图片说明文字样式 */
.article-content figcaption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.4;
}

/* 链接中的图片样式 */
.article-content a img {
    margin: 1.5em 0;
    transition: opacity 0.3s ease;
}

.article-content a:hover img {
    opacity: 0.8;
}

/* 响应式图片间距调整 */
@media (max-width: 768px) {
    .article-content img {
        margin: 1em 0; /* 移动端减少间距 */
    }
    
    .article-content figure {
        margin: 1em 0;
    }
}

/* 特殊图片样式 */
.article-content img.alignleft {
    float: left;
    margin: 0 1em 1em 0; /* 左对齐图片的间距 */
    width: 45%; /* 左对齐图片宽度 */
    max-width: 45%;
}

.article-content img.alignright {
    float: right;
    margin: 0 0 1em 1em; /* 右对齐图片的间距 */
    width: 45%; /* 右对齐图片宽度 */
    max-width: 45%;
}

.article-content img.aligncenter {
    display: block;
    margin: 1.5em auto; /* 居中对齐图片的间距 */
    float: none;
    width: 100%; /* 居中对齐图片全宽 */
}

/* 清除浮动 */
.article-content img.alignleft::after,
.article-content img.alignright::after {
    content: "";
    display: table;
    clear: both;
}

/* 处理浮动图片后的内容 */
.article-content img.alignleft + *,
.article-content img.alignright + * {
    clear: both;
}

/* 图片组样式 */
.article-content .wp-block-gallery img {
    margin: 0.5em; /* 图库中图片的间距 */
    width: auto; /* 图库中图片保持原始比例 */
    max-width: 100%;
}

/* 七夸主题图库样式兼容 */
.article-content .gallery img {
    margin: 0.5em;
    width: auto; /* 图库中图片保持原始比例 */
    max-width: 100%;
}

.article-content .gallery-item img {
    margin: 0;
    width: auto; /* 图库项目中的图片保持原始比例 */
    max-width: 100%;
}

/* 确保图片不会与文字重叠 */
.article-content p:has(img) {
    margin-bottom: 1.5em;
}

/* 图片与段落之间的间距 */
.article-content p + img,
.article-content img + p {
    margin-top: 1.5em;
}

/* 图片与标题之间的间距 */
.article-content h1 + img,
.article-content h2 + img,
.article-content h3 + img,
.article-content h4 + img,
.article-content h5 + img,
.article-content h6 + img {
    margin-top: 1em;
}

.article-content img + h1,
.article-content img + h2,
.article-content img + h3,
.article-content img + h4,
.article-content img + h5,
.article-content img + h6 {
    margin-top: 1.5em;
}

/* 七夸主题特殊图片样式兼容 */
.article-content .fancybox {
    margin: 1.5em 0;
    display: inline-block;
    transition: all 0.3s ease;
    width: auto; /* 保持原始比例 */
    max-width: 100%;
}

/* 七夸主题动态图片样式 */
.article-content .moment-image-wrap {
    margin: 1.5em 0;
}

.article-content .moment-image-list img {
    margin: 0;
    width: auto; /* 保持原始比例 */
    max-width: 100%;
}

/* 七夸主题图片说明样式 */
.article-content .wp-caption {
    margin: 1.5em 0;
    max-width: 100%;
}

.article-content .wp-caption img {
    margin: 0;
    display: block;
    width: 100%; /* 图片说明中的图片全宽显示 */
}

.article-content .wp-caption-text {
    margin: 0.5em 0 0 0;
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 确保与七夸主题的fancybox兼容 */
.article-content img[data-fancybox] {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.article-content img[data-fancybox]:hover {
    opacity: 0.8;
}