/* 基础重置和字体 */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/* --- 顶部介绍部分样式 --- */
.intro-section {
    padding: 80px 5% 20px;
/*    max-width: 1400px;*/
    margin: 0 auto; /* 居中容器 */
}

.page-header-title {
    font-size: 3.5vw;
    font-weight: 700;
    text-align: center;
    margin-bottom: 80px;
    color: #333;
    letter-spacing: 0.1em;
}

.text-columns {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    padding: 0 5%;
}

.column {
    flex: 1;
}

.column-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.column p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
}

.highlight {
    background-color: #ffe81a;
    padding: 2px 0;
    line-height: 1;
}

/* 顶部介绍部分的响应式调整 */
@media (max-width: 900px) {
    .text-columns {
        flex-direction: column;
        gap: 40px;
        padding: 0;
    }
    .page-header-title {
        font-size: 6vw;
        margin-bottom: 50px;
    }
}

/* ------------------------------------- */

/* --- 画廊部分样式 --- */

.page-section {
/*    min-height: 100vh;*/
    padding: 80px 5% 40px;
    box-sizing: border-box;
}
.main-title {
    font-size: 3.5vw; 
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}
/* 网格布局：强制每行3列，列宽平均分配 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 固定3列，每行必为3张 */
    column-gap: 100px; /* 图片间距，可按需调整 */
    row-gap: 130px;
    width: 90%;
/*    max-width: 1400px;*/
    margin: 0 auto;
}
/* 图片容器基础样式：溢出隐藏 */
.grid-item {
    background-color: #e8e8e8; 
    position: relative;
    overflow: hidden; /* 截断超出比例的图片部分 */
}
/* 第一种比例：3:4（宽:高，竖版） */
.ratio-3-4 {
    aspect-ratio: 3 / 4; /* 固定宽高比，不受列宽影响 */
}
/* 第二种比例：4:3（宽:高，横版） */
.ratio-4-3 {
    aspect-ratio: 4 / 3; /* 固定宽高比，保证图片不变形 */
}
/* 图片适配规则：填充容器且居中 */
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 覆盖容器（需完整显示可改为contain） */
    object-position: center; /* 优先显示图片主体 */
    transition: transform 0.3s ease-in-out;
}


/* --- 新增：单列画廊布局 --- */
.gallery-grid-single-column {
    display: grid;
    /* 【关键】只设置一列，占据全部可用宽度 */
    grid-template-columns: 1fr; 
    /* 保持与多列画廊相同的间距风格 */
    gap: 40px; 
    /* 继承外部容器的宽度和居中设置 */
    width: 90%;
/*    max-width: 1400px;*/
    margin: 0 auto;
}

/* --- 新增：16:9 宽高比 --- */
.ratio-16-9 {
    aspect-ratio: 16 / 9; /* 经典的宽屏电影比例 */
    /* 移除瀑布流的行跨度设置，让 aspect-ratio 控制高度 */
    grid-row-end: unset !important; 
}





/* 底部版权信息 */
.footer {
    text-align: center;
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 100px; 
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* 保持单列堆叠 */
        
        /* 【修复2：关键】将固定高度改为自适应高度 */
        grid-auto-rows: auto;
        
        gap: 25px; /* 调整合理的间距 */
    }
    
    /* 确保单列画廊在手机上也自适应 */
    .gallery-grid-single-column {
        gap: 25px; 
    }
    
    .main-title {
        font-size: 8vw;
    }
    
    /* 【额外修正】确保 grid-item 的高度由 aspect-ratio 决定 */
    .grid-item {
        height: auto;
    }
}