/* 基础重置：确保所有设备样式一致 */


/* 横幅样式（等比缩放） */
.banner {
    display: block; /* 确保横幅占满一行 */
    width: 100vw; /* 宽度=屏幕宽度 */
}

.banner-img {
    width: 100%; /* 图片宽度=父容器（100%屏幕宽） */
    height: auto; /* 高度自动，保持图片原始比例 */
    object-fit: cover; /* 确保图片填充容器（避免变形） */
}

/* 图片网格核心样式（等比缩放核心） */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三等分宽度（每列占1/3屏幕） */
    grid-auto-rows: minmax(20vw, auto); /* 基础行高=20%屏幕宽度（等比核心） */
    gap: 1.5vw; /* 间距=1.5%屏幕宽度 */
    padding: 3vw 2vw; /* 内边距：上下3%屏幕宽，左右2%屏幕宽 */
}

/* 图片项基础样式 */
.image-item {
    transform: translateY(20vw); /* 初始位移=20%屏幕宽（等比动画） */
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑动画 */
    border-radius: 0.8vw; /* 圆角=0.8%屏幕宽 */
    overflow: hidden; /* 裁剪超出部分（如图片圆角） */
}

/* 图片尺寸类型（保持网格比例） */
.image-item.size-1x2 {
    grid-row: span 2; /* 占2行高度（2×20vw=40vw） */
}

.image-item.size-2x1 {
    grid-column: span 2; /* 占2列宽度（2×1/3屏幕宽） */
}

.image-item.size-2x2 {
    grid-column: span 2; /* 占2列宽度 */
    grid-row: span 2; /* 占2行高度 */
}

/* 图片显示优化 */
.image-item img {
    width: 100%; /* 图片宽度=父容器（网格项） */
    height: 100%; /* 图片高度=父容器（网格项） */
    object-fit: cover; /* 填充容器且保持比例（避免拉伸变形） */
    transition: transform 0.3s ease; /* 鼠标悬停缩放动画 */
   
}

.image-item:hover img {
    transform: scale(1.03); /* 悬停时轻微放大（提升交互感） */
}

/* 动画触发状态（滚动显示） */
.image-item.active {
    transform: translateY(0); /* 位移归位 */
    opacity: 1; /* 显示元素 */
}

/* 图片标题样式（等比文字） */
.image-gallery .image-item {
    position: relative; /* 标题定位基准 */
   
}

.image-gallery .image-caption {
    position: absolute;
    left: 2%; /* 左距离=自身宽度的2% */
    bottom: 3%; /* 底距离=自身宽度的3% */
    color: white; /* 标题文字颜色（白色适配深色图片） */
    opacity: 0; /* 初始隐藏 */
    transition: opacity 0.3s; /* 显示动画 */
    pointer-events: none; /* 不影响图片点击 */
    text-shadow: 0.1vw 0.1vw 0.3vw rgba(0, 0, 0, 0.5); /* 文字阴影（增强可读性） */
    
}

   .image-gallery .image-caption a {
        pointer-events: auto;
        cursor: pointer;
        /* 新增以下属性消除链接提示 */
        text-decoration: none !important;
        color: inherit !important;
    }

    /* 可选：添加悬停效果 */
    .image-gallery .image-caption a:hover {
        text-decoration: underline !important;
    }

/* 鼠标悬停显示标题 */
.image-gallery .image-item:hover .image-caption {
    opacity: 1; /* 显示标题 */
}

/* 标题文字大小（随屏幕等比变化） */
.image-gallery .caption-title {
    font-size: clamp(1vw, 2vw, 2.2vw); /* 文字大小=1%-2.2%屏幕宽（最大不超2.2vw） */
    line-height: 1.2;
    margin-bottom: 0.5vw; /* 标题与副标题间距=0.5%屏幕宽 */
}

.image-gallery .caption-subtitle {
    font-size: clamp(0.8vw, 1.5vw, 1.8vw); /* 文字大小=0.8%-1.8%屏幕宽 */
    line-height: 1.3;
}

/* 超小屏幕适配（屏幕宽度<500px时微调） */
@media screen and (max-width: 365px) {
    .image-gallery {
        grid-template-columns: repeat(2, 1fr); /* 超小屏改为2列（避免单格过窄） */
        grid-auto-rows: minmax(25vw, auto); /* 行高略增至25%屏幕宽（提升显示面积） */
        gap: 2vw; /* 间距略增至2%屏幕宽（避免拥挤） */
    }

    /* 标题文字下限提升（避免过小看不清） */
    .image-gallery .caption-title {
        font-size: clamp(12px, 2vw, 2.2vw); /* 最小12px（保证可读性） */
    }

    .image-gallery .caption-subtitle {
        font-size: clamp(10px, 1.5vw, 1.8vw); /* 最小10px */
    }
}