/* ========================================
   RESPONSIVE IMAGES - 全站统一样式
   ======================================== */

/**
 * 通用图片样式
 * 所有图片保持原始宽高比，不裁剪
 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   HERO/BANNER 图片
   ======================================== */

/**
 * Hero Section 容器
 * 保持原有的布局和视觉高度
 * 不因响应式图片改变布局
 */
.hero-section,
.category-hero,
.about-hero {
    position: relative;
    overflow: hidden;
}

/**
 * Hero 图片本身
 * 使用 object-fit: cover 填充容器
 * 响应式优化通过 srcset 实现，不改变这里的布局
 */
.hero-section > img,
.category-hero > img,
.about-hero > img,
.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/**
 * Hero overlay 和 content 在图片之上
 */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.hero-section .hero-content,
.category-hero .category-hero-content,
.about-hero .about-hero-content {
    position: relative;
    z-index: 2;
}

.category-hero::before,
.about-hero::before {
    position: relative;
    z-index: 1;
}

.category-hero-content,
.about-hero-content {
    position: relative;
    z-index: 2;
}

/* ========================================
   文章 HERO 图片
   ======================================== */

/**
 * 文章页面的 Hero 区域
 */
.article-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.article-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   内容图片（正文中的图片）
   ======================================== */

/**
 * 文章正文中的图片容器
 */
.article-image,
.content-image-wrapper {
    margin: var(--spacing-md) 0;
    text-align: center;
}

.article-image img,
.content-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.article-image figcaption {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-small);
    color: var(--color-contrast-lighter);
    font-style: italic;
}

/* ========================================
   卡片图片（文章列表、相关文章）
   ======================================== */

/**
 * 文章卡片中的缩略图
 * 保持原始宽高比，不裁剪
 * 上方圆角匹配卡片容器
 */
.article-card img,
.guide-card img,
.related-card img,
img.article-image,
.card-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px 12px 0 0;
}

/* ========================================
   RESPONSIVE - 移动端优化
   ======================================== */

@media (max-width: 768px) {
    /**
     * 移动端图片容器边距调整
     */
    .article-image,
    .content-image-wrapper {
        margin: var(--spacing-sm) 0;
    }
}

@media (max-width: 480px) {
    .article-image,
    .content-image-wrapper {
        margin: var(--spacing-xs) 0;
    }
}

/* ========================================
   PICTURE 元素支持
   ======================================== */

picture {
    display: block;
}

picture img {
    width: 100%;
    height: auto;
}

/* ========================================
   加载状态优化
   ======================================== */

/**
 * 图片加载时的占位背景
 * 避免布局跳动
 */
img[loading="lazy"] {
    background: #f0f0f0;
}