/* ================= 全局重置 (保持不变) ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #fff;
    min-width: 320px; 
    width: 100%;
}

/* ================= 1. Header (保持不变) ================= */
.site-header {
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-container {
    width: 100%;
    max-width: 1920px;
}

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

/* ================= 2. Main 正文 ================= */
.main-content {
    width: 100%;
    max-width: 1920px;
    background-color: #e4f8f4;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

/* 模块容器 */
.content-module {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px; 
}

/* 2.1 标题 (保持不变) */
.module-title-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0 20px 0;
}

.module-title-bg {
    width: 577px;
    height: 80px;
    background-image: url('../img/title.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.module-title-text {
    font-size: 24px;
    color: #333;
    font-weight: normal;
}

/* ================= 2.2 图片链接网格 (核心逻辑同Video) ================= */
.pic-grid {
    display: flex;
    flex-wrap: wrap;
    
    /* 核心：内部左对齐 */
    justify-content: flex-start;
    
    /* 核心：间距 80px(行) 60px(列) */
    gap: 80px 60px;
    
    /* 核心：计算宽度 416*3 + 60*2 = 1368px */
    width: 1368px;
    max-width: 100%;
    
    /* 核心：容器居中 */
    margin: 20px auto;
}

/* 图片单元格 */
.pic-item {
    width: 416px;
    height: 305px;
    overflow: hidden; /* 防止图片放大时溢出 */
    /* 加上圆角让图片看起来没那么生硬，如果不想要可以删掉 */
    border-radius: 4px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 轻微阴影 */
    background-color: #ddd; /* 图片加载前的占位色 */
}

/* 链接块 */
.pic-item a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* 图片本体 */
.pic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证填满盒子且不变形 */
    display: block;
    transition: transform 0.3s ease; /* 增加平滑过渡效果 */
}

/* 交互特效：鼠标放上去图片稍微放大 */
.pic-item:hover img {
    transform: scale(1.05);
}

/* ================= 3. Footer (保持不变) ================= */
.site-footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.footer-bg {
    width: 100%;
    max-width: 1920px;
    min-height: 80px;
    background-image: url('../img/footer.png'); 
    background-size: cover;
    background-position: center;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright {
    font-size: 16px;
    color: #333;
    padding: 10px;
    text-align: center;
}

/* ================= 响应式阶梯控制 (同Video版) ================= */

/* 阶段一：装不下3个时 ( < 1400px )
   强制变为 2 列宽度：416*2 + 60 = 892px
*/
@media (max-width: 1400px) {
    .pic-grid {
        width: 892px;
    }
}

/* 阶段二：装不下2个时 ( < 920px )
   强制变为 1 列宽度：416px
*/
@media (max-width: 920px) {
    .pic-grid {
        width: 416px;
        gap: 40px; /* 手机端适当缩小行距 */
    }
}

/* 阶段三：超小手机 ( < 450px )
   宽度自适应
*/
@media (max-width: 450px) {
    .pic-grid {
        width: 100%;
        justify-content: center; /* 手机单列居中 */
    }
    
    .pic-item {
        width: 100%;
        height: auto;
        aspect-ratio: 416 / 305; /* 保持宽高比 */
    }
    
    .module-title-bg {
        width: 100%;
        height: 60px;
    }
}