/* 网站宽度优化CSS - 统一图片和容器宽度标准 */

/* ========================================
   响应式图片基础样式
   ======================================== */

/* 通用响应式图片类 */
.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* Hero Banner 图片优化 */
.hero-image,
.banner-image {
    width: 100%;
    max-width: 1920px; /* 支持高分辨率屏幕 */
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* 产品展示图片优化 */
.product-image,
.showcase-image {
    width: 100%;
    max-width: 1200px; /* 匹配容器宽度 */
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* 内容配图优化 */
.content-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    object-fit: contain;
    margin: 20px auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 缩略图优化 */
.thumbnail-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

/* ========================================
   容器宽度优化
   ======================================== */

/* 标准容器 - 保持1200px */
.container-standard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 宽屏容器 - 适用于大屏幕 */
.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 全宽容器 - 适用于Hero区域 */
.container-full {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ========================================
   图片容器优化
   ======================================== */

/* 图片容器 - 确保图片不超出容器 */
.image-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* 图片网格容器 */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.image-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* ========================================
   性能优化 - 懒加载支持
   ======================================== */

/* 懒加载图片初始状态 */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-image.loaded {
    opacity: 1;
}

/* 加载占位符 */
.image-placeholder {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    min-height: 200px;
    border-radius: 8px;
}

/* ========================================
   响应式断点优化
   ======================================== */

/* 大屏幕优化 (1600px+) */
@media (min-width: 1600px) {
    .container-adaptive {
        max-width: 1400px;
    }
    
    .hero-image {
        max-width: 2400px;
    }
    
    .product-image {
        max-width: 1400px;
    }
}

/* 桌面端优化 (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .container-adaptive {
        max-width: 1200px;
    }
    
    .hero-image {
        max-width: 1920px;
    }
    
    .product-image {
        max-width: 1200px;
    }
}

/* 平板端优化 (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .container,
    .container-standard,
    .container-wide,
    .container-adaptive {
        max-width: 100%;
        padding: 0 30px;
    }
    
    .hero-image,
    .product-image,
    .content-image {
        max-width: 100%;
    }
    
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
        padding: 0 30px;
    }
}

/* 移动端优化 (767px以下) */
@media (max-width: 767px) {
    .container,
    .container-standard,
    .container-wide,
    .container-adaptive {
        max-width: 100%;
        padding: 0 15px;
    }
    
    .hero-image,
    .product-image,
    .content-image {
        max-width: 100%;
        margin: 10px auto;
    }
    
    .image-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 15px;
    }
    
    .image-grid img {
        height: 150px;
    }
    
    /* 移动端图片优化 */
    .mobile-optimized {
        max-width: 100%;
        height: auto;
    }
}

/* 超小屏幕优化 (480px以下) */
@media (max-width: 480px) {
    .container,
    .container-standard,
    .container-wide,
    .container-adaptive {
        padding: 0 10px;
    }
    
    .content-image {
        margin: 15px auto;
        border-radius: 6px;
    }
    
    .image-grid img {
        height: 120px;
    }
}

/* ========================================
   图片质量优化
   ======================================== */

/* WebP支持检测 */
.webp .hero-image {
    /* WebP格式图片样式 */
}

.no-webp .hero-image {
    /* 降级到JPEG格式 */
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .retina-image {
        /* 高分辨率图片样式 */
    }
}

/* ========================================
   特殊场景优化
   ======================================== */

/* 全屏背景图片 */
.fullscreen-bg {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/* 固定宽高比图片 */
.aspect-ratio-16-9 {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* ========================================
   性能优化类
   ======================================== */

/* 图片预加载 */
.preload-image {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

/* 图片压缩提示 */
.compressed-image {
    /* 标记已压缩的图片 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ========================================
   调试和开发辅助
   ======================================== */

/* 开发模式 - 显示图片边界 */
.debug-images img {
    border: 2px solid red;
    box-sizing: border-box;
}

.debug-containers .container,
.debug-containers .container-standard,
.debug-containers .container-wide {
    border: 2px solid blue;
    background: rgba(0, 0, 255, 0.1);
}

/* 图片信息显示 */
.image-info::after {
    content: attr(data-width) "×" attr(data-height);
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 3px;
}

/* ========================================
   浏览器兼容性
   ======================================== */

/* IE11 兼容性 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .responsive-image {
        width: 100%;
        max-width: none;
    }
}

/* Safari 兼容性 */
@supports (-webkit-appearance: none) {
    .responsive-image {
        -webkit-transform: translateZ(0);
    }
}