/* assets/css/responsive.css - 响应式样式 */

/* 小屏幕设备 */
@media (max-width: 768px) {
    /* 导航栏 */
    .nav-menu {
        display: none; /* 默认隐藏导航菜单 */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        padding: 1rem 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    .nav-menu.active {
        display: flex; /* 点击按钮后显示 */
    }

    .nav-menu li {
        margin: 0;
        text-align: center;
    }

    .nav-menu a {
        display: block;
        padding: 1rem; /* 增加点击区域 */
        font-size: 1rem;
        color: #374151;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        -webkit-tap-highlight-color: transparent; /* 移除手机端点击高亮 */
    }

    .nav-menu a:hover,
    .nav-menu a.active {
        background: rgba(30, 64, 175, 0.1);
        color: #1e40af;
    }

    .mobile-menu-btn {
        display: block; /* 在手机端显示菜单按钮 */
        padding: 0.5rem 1rem; /* 增加点击区域 */
        font-size: 1.5rem;
        -webkit-tap-highlight-color: transparent; /* 移除手机端点击高亮 */
    }

    /* 英雄区域 */
    .hero {
        height: 60vh; /* 减少高度以适应手机屏幕 */
        margin-top: 60px; /* 调整顶部间距 */
    }

    .hero-content {
        padding: 0 1rem; /* 减少两侧内边距 */
        max-width: 100%; /* 确保内容占满宽度 */
    }

    .hero h1 {
        font-size: 0.7rem; /* 手机端缩小字体 */
        white-space: normal; /* 允许换行 */
        overflow-wrap: break-word; /* 确保长文本换行 */
        margin-bottom: 0.5rem;
    }

    .hero-subtitle {
        font-size: 0.6rem; /* 手机端缩小字体 */
        white-space: normal; /* 允许换行 */
        overflow-wrap: break-word; /* 确保长文本换行 */
        margin-bottom: 1rem;
    }

    .hero-info {
        gap: 1rem; /* 减少间距 */
        flex-direction: column; /* 垂直排列 */
        align-items: center;
    }

    .hero-info-item {
        min-width: 100%; /* 占满宽度 */
        max-width: 300px; /* 设置最大宽度 */
        padding: 0.8rem 1rem;
    }

    .hero-info-item h3 {
        font-size: 0.8rem;
    }

    .hero-info-item p {
        font-size: 0.9rem;
    }

    .cta-button {
        padding: 0.5rem 2rem; /* 手机端稍调整按钮高度 */
        font-size: 0.9rem;
    }

    .hero-dots {
        bottom: 1rem;
    }
}

/* 超小屏幕设备 */
@media (max-width: 480px) {
    .nav-menu a {
        padding: 0.8rem; /* 进一步调整点击区域 */
        font-size: 0.9rem;
    }

    .mobile-menu-btn {
        padding: 0.5rem 0.8rem;
    }

    .hero h1 {
        font-size: 0.6rem;
    }

    .hero-subtitle {
        font-size: 0.5rem;
    }

    .cta-button {
        padding: 0.4rem 1.5rem;
        font-size: 0.8rem;
    }
}