/* Product Simple Page - Mobile Optimization Styles */
/* 针对 Hero Section 的移动端优化 */

/* ============================================
   移动端 Hero Section 优化
   ============================================ */

/* 平板设备 (768px - 991px) */
@media (max-width: 991px) {
    /* Hero Section 基础调整 */
    .curelight-hero {
        padding: 40px 0 15px !important;
    }
    
    .curelight-hero.with-bg {
        padding-bottom: 280px !important;
        padding-top: 150px !important;
        margin-top: -80px !important;
    }
    
    /* 标题居中优化 */
    .curelight-hero h1 {
        font-size: 2.8rem !important;
        text-align: center !important;
        margin-bottom: 1.2rem !important;
    }
    
    /* 副标题/内容居中优化 */
    .curelight-hero .subtitle {
        font-size: 1.15rem !important;
        text-align: center !important;
        margin-bottom: 2.5rem !important;  /* 增加与导航按钮的距离 */
        padding: 0 20px;
    }
    
    /* 导航按钮容器优化 - 中等屏幕 */
    .hero-nav-buttons {
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 15px;
        max-width: 100%;
        margin: 2rem auto !important;  /* 增加顶部间距 */
    }
    
    /* 导航按钮尺寸优化 - 中等屏幕 */
    .hero-nav-buttons .nav-btn,
    .hero-nav-buttons .nav-btn.nav-btn-bg {
        padding: 8px 18px !important;
        font-size: 0.9rem !important;
        border-radius: 22px !important;
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* 手机设备 (576px - 767px) */
@media (max-width: 767px) {
    /* Hero Section 基础调整 */
    .curelight-hero {
        padding: 30px 0 15px !important;
    }
    
    .curelight-hero.with-bg {
        padding-bottom: 250px !important;
        padding-top: 120px !important;
        margin-top: -60px !important;
    }
    
    /* 容器内边距优化 */
    .curelight-hero-content .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 标题居中优化 */
    .curelight-hero h1 {
        font-size: 2.2rem !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
        line-height: 1.3 !important;
        padding: 0 10px;
    }
    
    /* 副标题/内容居中优化 */
    .curelight-hero .subtitle {
        font-size: 1.05rem !important;
        text-align: center !important;
        margin-bottom: 2.2rem !important;  /* 增加与导航按钮的距离 */
        line-height: 1.5 !important;
        padding: 0 15px;
    }
    
    /* 导航按钮容器优化 - 小屏幕 */
    .hero-nav-buttons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 10px;
        max-width: 100%;
        margin: 1.8rem auto !important;  /* 增加顶部间距 */
        flex-wrap: wrap !important;
    }
    
    /* 导航按钮尺寸优化 - 小屏幕 */
    .hero-nav-buttons .nav-btn,
    .hero-nav-buttons .nav-btn.nav-btn-bg {
        padding: 7px 14px !important;
        font-size: 0.85rem !important;
        border-radius: 20px !important;
        font-weight: 500 !important;
        white-space: nowrap;
        flex: 0 1 auto;
        min-width: auto !important;
        margin: 3px 2px !important;
    }
    
    /* 有背景图时的按钮优化 */
    .curelight-hero.with-bg .hero-nav-buttons .nav-btn {
        background: rgba(15, 163, 209, 0.85) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* 产品图片容器优化 */
    .curelight-hero .device-image {
        margin-top: 2.5rem !important;  /* 增加与按钮的距离 */
        padding: 0 20px;
        max-width: 100%;
    }
    
    /* 限制图片高度，防止过高 */
    .curelight-hero .device-image img {
        max-width: 100%;
        max-height: 350px !important;  /* 限制最大高度 */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;  /* 保持图片比例 */
        margin: 0 auto;
        display: block;
    }
    
    /* 视频悬浮区域调整 */
    .video-overlay-section {
        bottom: -280px !important;
    }
    
    /* 视频后的间隔调整 */
    #tag-video {
        height: 320px !important;
    }
}

/* 小手机设备 (最大 575px) */
@media (max-width: 575px) {
    /* Hero Section 基础调整 */
    .curelight-hero {
        padding: 25px 0 10px !important;
    }
    
    .curelight-hero.with-bg {
        padding-bottom: 220px !important;
        padding-top: 100px !important;
        margin-top: -50px !important;
    }
    
    /* 容器内边距优化 */
    .curelight-hero-content .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* 主标题优化 - 超小屏幕 */
    .curelight-hero h1 {
        font-size: 1.8rem !important;
        text-align: center !important;
        margin-bottom: 0.8rem !important;
        line-height: 1.35 !important;
        padding: 0 8px;
        font-weight: 600 !important;
    }
    
    /* 副标题/内容优化 - 超小屏幕 */
    .curelight-hero .subtitle {
        font-size: 0.95rem !important;
        text-align: center !important;
        margin-bottom: 2rem !important;  /* 增加与导航按钮的距离 */
        line-height: 1.45 !important;
        padding: 0 10px;
    }
    
    /* 导航按钮容器优化 - 超小屏幕 */
    .hero-nav-buttons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 0 8px;
        max-width: 100%;
        margin: 1.5rem auto !important;  /* 增加顶部间距 */
        flex-wrap: wrap !important;
    }
    
    /* 导航按钮尺寸优化 - 超小屏幕，确保一行显示 */
    .hero-nav-buttons .nav-btn,
    .hero-nav-buttons .nav-btn.nav-btn-bg {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 18px !important;
        font-weight: 500 !important;
        white-space: nowrap;
        flex: 0 1 auto;
        min-width: auto !important;
        margin: 2px 1px !important;
        letter-spacing: -0.3px; /* 轻微压缩字间距 */
    }
    
    /* 针对较长文本的按钮进行特殊处理 */
    .hero-nav-buttons .nav-btn:contains("Product Knowledge"),
    .hero-nav-buttons .nav-btn:contains("Specifications"),
    .hero-nav-buttons .nav-btn:contains("Accessories") {
        padding: 6px 8px !important;
        font-size: 0.72rem !important;
    }
    
    /* 有背景图时的按钮优化 - 超小屏幕 */
    .curelight-hero.with-bg .hero-nav-buttons .nav-btn {
        background: rgba(15, 163, 209, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    .curelight-hero.with-bg .hero-nav-buttons .nav-btn:hover,
    .curelight-hero.with-bg .hero-nav-buttons .nav-btn:active {
        background: rgba(8, 137, 160, 0.95) !important;
        border-color: rgba(255, 255, 255, 0.7) !important;
        transform: translateY(-1px);
    }
    
    /* 产品图片容器优化 */
    .curelight-hero .device-image {
        margin-top: 2rem !important;  /* 增加与按钮的距离 */
        padding: 0 15px;
        max-width: 100%;
    }
    
    /* 限制图片高度，防止过高 */
    .curelight-hero .device-image img {
        max-width: 100%;
        max-height: 280px !important;  /* 小屏幕限制更小的高度 */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;  /* 保持图片比例 */
        margin: 0 auto;
        display: block;
    }
    
    /* 视频悬浮区域调整 */
    .video-overlay-section {
        bottom: -250px !important;
    }
    
    .video-overlay-section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .video-overlay-section .video-wrapper {
        margin: 0 5px;
    }
    
    /* 视频容器边角和阴影优化 */
    .video-overlay-section .video-container {
        border-radius: 12px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
    }
    
    /* 视频后的间隔调整 */
    #tag-video {
        height: 190px !important;
        margin-top: -30px !important;
    }
}

/* 超小手机设备 (最大 375px) - iPhone SE 等 */
@media (max-width: 375px) {
    /* 主标题进一步优化 */
    .curelight-hero h1 {
        font-size: 1.6rem !important;
        padding: 0 5px;
    }
    
    /* 副标题进一步优化 */
    .curelight-hero .subtitle {
        font-size: 0.9rem !important;
        padding: 0 8px;
        margin-bottom: 1.8rem !important;  /* 保持间距 */
    }
    
    /* 导航按钮进一步优化 - 确保在最小屏幕也能一行显示 */
    .hero-nav-buttons {
        gap: 3px !important;
        padding: 0 5px;
        margin: 1.2rem auto !important;  /* 保持间距 */
    }
    
    /* 产品图片在超小屏幕的优化 */
    .curelight-hero .device-image {
        margin-top: 1.5rem !important;
    }
    
    .curelight-hero .device-image img {
        max-height: 240px !important;  /* 超小屏幕更小的高度限制 */
    }
    
    .hero-nav-buttons .nav-btn,
    .hero-nav-buttons .nav-btn.nav-btn-bg {
        padding: 5px 8px !important;
        font-size: 0.7rem !important;
        border-radius: 16px !important;
        margin: 2px 1px !important;
        letter-spacing: -0.5px; /* 进一步压缩字间距 */
    }
}

/* ============================================
   通用移动端优化
   ============================================ */

/* 确保文字在移动端的可读性 */
@media (max-width: 767px) {
    /* Product Knowledge Section 移动端优化 */
    #product-knowledge .display-4 {
        font-size: 1.8rem !important;
        text-align: center !important;
    }
    
    #product-knowledge .lead {
        font-size: 1rem !important;
        text-align: center !important;
    }
    
    /* What We Do Section 移动端优化 */
    #what-we-do h2 {
        font-size: 1.8rem !important;
        text-align: center !important;
    }
    
    /* 表格响应式优化 */
    .table-responsive {
        font-size: 0.875rem;
    }
    
    /* FAQ 和 Accessories 标题优化 */
    .curelight-section h2,
    .section-title {
        font-size: 1.8rem !important;
        text-align: center !important;
    }
    
    .curelight-section .section-subtitle {
        font-size: 1rem !important;
        text-align: center !important;
    }
}

/* ============================================
   触摸设备优化
   ============================================ */

/* 提升移动端按钮的可点击性 */
@media (hover: none) and (pointer: coarse) {
    .hero-nav-buttons .nav-btn {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 移除悬停效果，使用 active 状态 */
    .hero-nav-buttons .nav-btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ============================================
   横屏模式优化
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .curelight-hero {
        padding: 20px 0 30px !important;
    }
    
    .curelight-hero h1 {
        font-size: 1.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .curelight-hero .subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-nav-buttons {
        margin: 0.8rem auto !important;
    }
    
    .curelight-hero .device-image {
        margin-top: 1rem !important;
        max-height: 200px;
        overflow: hidden;
    }
}

/* ============================================
   辅助工具类
   ============================================ */

/* 防止水平滚动 */
@media (max-width: 767px) {
    body {
        overflow-x: hidden !important;
    }
    
    .curelight-hero,
    .curelight-hero-content,
    .hero-nav-buttons {
        overflow-x: hidden !important;
    }
}

/* 优化加载性能 */
@media (max-width: 767px) {
    /* 减少移动端的阴影复杂度 */
    .hero-nav-buttons .nav-btn {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* 优化动画性能 */
    .hero-nav-buttons .nav-btn {
        transform: translateZ(0);
        will-change: transform;
    }
}