/* hero.css - 首屏大图样式 */

/* 首屏区域样式 */
.hero-section {
    height: 100vh; /* 视口高度 */
    min-height: 400px; /* 最小高度 */
    overflow: hidden; /* 隐藏溢出 */
    margin-top: calc(2.8rem + 2rem); /* 导航栏高度补偿 */
    width: 100%; /* 全宽 */
    position: relative; /* 相对定位 */
}

/* 背景图片容器 */
.hero-bg-wrapper {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    display: flex; /* 弹性布局 */
    transition: transform 1s ease-in-out; /* 图片切换过渡效果 */
}

/* 背景图片样式 */
.hero-bg {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 顶部50% */
    left: 50%; /* 左侧50% */
    object-fit: cover; /* 保持比例填充 */
    transform: translate(-50%, -50%); /* 居中定位 */
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    z-index: 1; /* 层级 */
    filter: blur(2px); /* 模糊效果 */
    opacity: 0; /* 初始透明 */
    transition: opacity 2s ease-in-out; /* 渐变效果 */
}

/* 激活状态的背景图片 */
.hero-bg.active {
    opacity: 1; /* 完全不透明 */
}

/* 内容区域样式 */
.hero-content {
    position: relative; /* 相对定位 */
    z-index: 2; /* 高于背景 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    height: 100%; /* 全高 */
    text-align: center; /* 文字居中 */
    padding: 2rem; /* 内边距 */
    color: white; /* 文字颜色 */
}

/* 标题样式 */
.hero-section h1 {
    font-size: 3rem; /* 字体大小 */
    margin-bottom: 1rem; /* 下边距 */
    line-height: 1.2; /* 行高 */
}

/* 描述文字样式 */
.hero-section p {
    font-size: 1.25rem; /* 字体大小 */
    margin-bottom: 2rem; /* 下边距 */
}

/* CTA按钮样式 */
.cta-button {
    display: inline-block; /* 行内块 */
    margin-top: var(--space-md); /* 上边距 */
    padding: var(--space-unit) calc(var(--space-unit) * 3); /* 内边距 */
    background-color: var(--primary-color); /* 主色调背景 */
    color: var(--white); /* 白色文字 */
    border-radius: 50px; /* 圆角 */
    transition: background-color var(--transition-normal),
                transform var(--transition-fast),
                box-shadow var(--transition-fast); /* 过渡效果 */
    font-weight: 500; /* 字体粗细 */
    letter-spacing: 0.1rem; /* 字间距 */
    border: 2px solid transparent; /* 透明边框 */
    box-shadow: var(--shadow-sm); /* 阴影效果 */
    cursor: pointer; /* 手型光标 */
}

/* CTA按钮悬停状态 */
.cta-button:hover {
    background-color: var(--primary-hover); /* 悬停背景色 */
    transform: translateY(-2px); /* 上移效果 */
    box-shadow: var(--shadow-md); /* 更大阴影 */
}

/* CTA按钮激活状态 */
.cta-button:active {
    background-color: var(--primary-active); /* 点击背景色 */
    transform: translateY(0); /* 恢复位置 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    /* 首屏高度调整 */
    .hero-section {
        height: 80vh; /* 视口80%高度 */
        min-height: 500px; /* 最小高度 */
    }

    /* 标题大小调整 */
    .hero-section h1 {
        font-size: 2rem; /* 较小字体 */
    }

    /* 描述文字大小调整 */
    .hero-section p {
        font-size: 1rem; /* 较小字体 */
    }

    /* 按钮大小调整 */
    .cta-button {
        padding: var(--space-sm) var(--space-lg); /* 较小内边距 */
        font-size: 0.95rem; /* 较小字体 */
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    /* 按钮全宽显示 */
    .cta-button {
        width: 100%; /* 全宽 */
        padding: var(--space-sm) var(--space-md); /* 内边距调整 */
    }
}