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

/* Banner 容器 */
.banner-container {
    position: relative;
    width: 100%;
    /* 【PC/默认最小高度】：保持不变 */
    min-height: 250px; 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #ffffff; 
}

/* 【新增】伪元素遮罩的基础样式 */
.banner-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 默认不显示，或透明度为 0 */
    background-color: rgba(0, 0, 0, 0); 
    z-index: 1; /* 确保在图片上，文字下 */
    pointer-events: none; /* 确保不影响下方元素的点击 */
    transition: background-color 0.3s ease; /* 可选：增加过渡效果 */
}

/* 图片标签和 picture 标签的 img */
.banner-image {
    display: block;
    width: 100%; 
    height: auto; 
    /* 【PC/默认最小高度】：保持不变 */
    min-height: 250px;
    max-height: 600px; 
    object-fit: cover; 
    object-position: center;
}

/* 确保 picture 容器和 img 一样工作 */
picture {
    display: block;
    width: 100%;
    /* 【PC/默认最小高度】：保持不变 */
    min-height: 250px;
    max-height: 600px;
    overflow: hidden; /* 防止图片溢出 max-height */
}

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

    /* 设置文字区域的宽度和内边距（即文字距离图片边缘的间隙） */
    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() 限制按钮字体大小 */
    font-size: clamp(14px, 0.8vw, 16px);
    
    font-weight: 600;
    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: #0c3332; /* 悬停时颜色稍微变深 */
    border-color: #0c3332;
}

/* 按钮 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;
    }
    .banner-btn {
        font-size: 1.5vw; 
        padding: 10px 20px;
    }
}

/* 当屏幕宽度小于 768px (平板和手机) */
@media (max-width: 768px) {
    /* 【优化 1：消除上下间隙】调整 Banner 容器高度 */
    .banner-container {
        min-height: 75vh; /* 使用视口高度，确保 Banner 占据屏幕的合理比例 */
        max-height: none; /* 移除 max-height 限制 */
    }

    /* 【优化 2：消除上下间隙】让图片撑满容器 */
    .banner-image {
        height: 100%; /* 让图片高度占满容器 */
        min-height: 0; /* 移除图片的最小高度限制 */
        max-height: none;
    }

    /* 【优化 3：消除上下间隙】Picture 容器同步调整 */
    picture {
        height: 100%;
        min-height: 0;
        max-height: none;
    }

    /* 激活 30% 透明度的黑色遮罩 */
    .banner-container::before {
        background-color: rgba(0, 0, 0, 0.3); 
    }

    .banner-text {
        max-width: 65%; 
        padding: 1.5rem 5%;
        /* 保持 top: 50% 和 transform: translateY(-50%) 以居中文字 */
    }
    .banner-text h1 {
        font-size: 3.5vw;
    }
    .banner-text p {
        font-size: 1.8vw;
    }
    .banner-buttons {
        flex-direction: column; /* 手机端按钮改为垂直堆叠 */
        gap: 10px;
        margin-top: 20px;
    }
    .banner-btn {
        font-size: 2.5vw;
        width: 100%; /* 手机端按钮占满宽度 */
        padding: 12px 15px;
    }
}

/* 当屏幕宽度小于 480px (手机) */
@media (max-width: 480px) {
     /* 可以微调高度，让 Banner 占据屏幕更多空间 */
    .banner-container {
         min-height: 80vh; 
    }
    /* 图片和 picture 容器继承 768px 媒体查询中的 100% 高度设置 */
    
    .banner-text {
        max-width: 100%; 
    }
    .banner-text h1 {
        font-size: 6.5vw; 
    }
    .banner-text p {
        font-size: 3.5vw;
    }
    .banner-btn {
        font-size: 3.5vw;
    }
}