/* 基础样式重置 */
body, h1, p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Banner 容器 */
.banner-container {
    position: relative;
    width: 100%;
/* 【关键修改 1】：添加最小高度，防止图片高度收缩过度，确保文字不会超出 */
    min-height: 250px; 
    /* 统一字体 */
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #ffffff; 
}

/* 图片标签和 picture 标签的 img */
.banner-image {
    display: block;
    width: 100%; 
    height: auto;
/* 【关键修改 2】：图片本身也设置最小高度，确保图片区域不会过度收缩 */
    min-height: 250px;
    max-height: 600px; 
    object-fit: cover; 
    object-position: center;
}
    
/* 确保 picture 容器和 img 一样工作 */
picture {
    display: block;
    width: 100%;
/* 【关键修改 3】：图片容器也应设置最小高度 */
    min-height: 250px;
    max-height: 600px;
    overflow: hidden;
/* 防止图片溢出 max-height */
}

/* 文字内容区域 */
.banner-text {
    /* 关键：绝对定位，实现文字覆盖在图片上 */
    position: absolute;
    top: 50%;
left: 0; 
    transform: translateY(-50%); 

    /* 设置文字区域的宽度和内边距（即文字距离图片边缘的间隙） */
    max-width: 50%;
    padding: 2rem 4%;
}

.banner-text h1 {
    /* 【字体缩放优化】：使用 clamp() 限制字体最大/最小值 (PC 端) */
    font-size: clamp(24px, 2.5vw, 36px);
font-weight: 500; 
    line-height: 1.3;
    margin-bottom: 1rem; 
}

.banner-text p {
    /* 【字体缩放优化】：使用 clamp() 限制字体最大/最小值 (PC 端) */
    font-size: clamp(14px, 1.1vw, 18px);
line-height: 1.6;
}
    
/* ========== 按钮样式 (PC 端优化) ========== */
    
/* 按钮容器，用于排列两个按钮 */
.banner-buttons {
    display: flex;
gap: 15px; /* 按钮之间的间距 */
    margin-top: 25px;
/* 按钮与文字内容的间距 */
}

/* 基础按钮样式 (PC端默认样式) */
.banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
/* 【PC端按钮字体修改】：使用 clamp() 限制按钮字体大小
        - 最小 14px
        - 响应式 0.8vw (从 1.0vw 降低)
        - 最大 16px (防止在超大屏上过大)
    */
    font-size: clamp(14px, 0.8vw, 16px);
font-weight: 400;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
/* 防止按钮文字换行 */
}

/* 按钮 1: 纯色背景 */
.btn-primary {
    background-color: #0f403f;
    color: #ffffff;
    border: 2px solid #0f403f;
/* 统一为 2px 边框 */
}

.btn-primary:hover {
    background-color: #0f403f;
    /* 悬停时颜色稍微变深 */
    border-color: #0f403f;
}

/* 按钮 2: 描边 + 半透明底色 */
.btn-outline-trans {
    background-color: rgba(255, 255, 255, 0.3);
/* 30% 白色透明度 */
    color: #0f403f;
    /* 文字颜色 */
    border: 2px solid #0f403f;
/* 描边颜色，统一为 2px */
    backdrop-filter: blur(2px);
    /* 增加背景模糊效果，提高可读性（可选） */
}

.btn-outline-trans:hover {
    background-color: #0f403f;
    color: #ffffff;
}

/* ==================== 响应式设计 (手机端) ==================== */

/* 当屏幕宽度小于 1200px 时 */
@media (max-width: 1200px) {
    .banner-text h1 {
        font-size: 3vw;
}
    .banner-text p {
        font-size: 1.5vw;
}
    /* 1200px 以下的按钮字体可以继续使用 1.5vw */
    .banner-btn {
        font-size: 1.5vw;
padding: 10px 20px;
    }
}

/* 当屏幕宽度小于 768px (平板和手机) */
@media (max-width: 768px) {
    
    /* ****************************************************** */
    /* 【关键修改 4】：在移动端移除 min-height 限制，让图片自然高度决定容器高度 */
    /* ****************************************************** */
    .banner-container, .banner-image, picture {
        min-height: auto;
}
    
    /* 【新增遮罩层】：在 768px 及以下屏幕添加 30% 黑色遮罩 */
    .banner-container::after {
        content: '';
position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
/* 30% 的黑色透明度 */
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
/* 确保遮罩在图片之上，文字之下 */
    }
    /* 确保文字内容在遮罩层之上 */
    .banner-text {
        z-index: 2;
/* 提高 z-index */
        max-width: 65%;
        padding: 1.5rem 5%;
}
    /* 调整文字颜色为白色，确保在黑色遮罩上清晰可见 */
    .banner-text h1, .banner-text p, .btn-outline-trans {
        color: #ffffff;
}
    /* 调整描边按钮的描边颜色，避免与文字颜色冲突 */
    .btn-outline-trans {
          border-color: #ffffff;
/* 描边改为白色，增强可读性 */
          background-color: rgba(0, 0, 0, 0.2);
/* 按钮底色改为深色透明，适应白色文字 */
    }
    
    .banner-text h1 {
        /* 【手机主标题优化】：3.5vw */
        font-size: 3.5vw;
}
    .banner-text p {
        /* 【手机正文优化】：1.8vw */
        font-size: 1.8vw;
}
    .banner-buttons {
        flex-direction: column;
/* 手机端按钮改为垂直堆叠 */
        gap: 10px;
        margin-top: 20px;
}
    .banner-btn {
        /* 【手机按钮优化】：2.5vw */
        font-size: 2.5vw;
width: 90%; /* 手机端按钮占满宽度 */
        padding: 12px 15px;
}
}

/* 当屏幕宽度小于 480px (手机) */
@media (max-width: 480px) {
    .banner-text {
        /* 增加内边距，确保文字不紧贴边缘 */
        padding: 30px 5%;
/* 提高最大宽度，但仍留白 */
        max-width: 95%;
}
    
    .banner-text h1 {
        /* 【小手机主标题优化】：6.5vw */
        font-size: 6.5vw;
}
    .banner-text p {
        /* 【小手机正文优化】：3.5vw */
        font-size: 3.5vw;
}
    .banner-btn {
        /* 【小手机按钮优化】：3.5vw */
        font-size: 3.5vw;
width: 100%; /* 按钮完全占满父容器 */
    }
    
    /* 确保按钮容器在小屏上有足够的垂直空间 */
    .banner-buttons {
        margin-top: 25px;
}
}