/**
 * 移动端响应式优化CSS
 * 针对不同设备尺寸进行优化
 * Author: Assistant
 * Date: 2025-01-17
 */

/* 基础响应式设置 */
* {
    box-sizing: border-box;
}

/* 移动端优先设计 */
@media (max-width: 480px) {
    /* 超小屏幕手机 */
    .container, .page-center {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    /* 字体大小调整 */
    h1, .h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }
    
    h2, .h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin-bottom: 14px !important;
    }
    
    h3, .h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }
    
    p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    /* 按钮优化 */
    .btn, .cta_button, .hs-button {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important; /* 触摸友好 */
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* 图片响应式 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 导航栏优化 */
    .header-section, .logo-section {
        padding: 10px 15px !important;
    }
    
    /* 表单优化 */
    input, textarea, select {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important; /* 防止iOS缩放 */
        margin-bottom: 10px !important;
        border-radius: 4px !important;
    }
    
    /* 隐藏不必要元素 */
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    /* 平板竖屏 */
    .container, .page-center {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }
    
    h1, .h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    h2, .h2 {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }
    
    .btn, .cta_button, .hs-button {
        padding: 14px 24px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }
    
    /* 两列布局 */
    .col-md-6, .col-lg-6 {
        width: 50% !important;
        float: left !important;
        padding: 0 10px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* 平板横屏 */
    .container, .page-center {
        padding-left: 30px !important;
        padding-right: 30px !important;
        max-width: 100% !important;
    }
    
    /* 三列布局 */
    .col-md-4, .col-lg-4 {
        width: 33.333% !important;
        float: left !important;
        padding: 0 15px !important;
    }
}

/* 通用移动端优化 */
@media (max-width: 1024px) {
    /* 触摸友好的链接 */
    a {
        min-height: 44px !important;
        display: inline-block !important;
        padding: 8px !important;
    }
    
    /* 表格响应式 */
    table {
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
        white-space: nowrap !important;
    }
    
    /* 视频响应式 */
    video, iframe {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    /* 间距调整 */
    .section, .module {
        padding: 40px 0 !important;
    }
    
    /* Logo优化 */
    .logo img {
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* 搜索框优化 */
    .search-input {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* 卡片布局 */
    .card, .bordered-card {
        margin-bottom: 20px !important;
        padding: 20px !important;
    }
    
    /* 轮播图优化 */
    .carousel, .slider {
        overflow: hidden !important;
    }
    
    .carousel-item, .slide {
        text-align: center !important;
    }
}

/* 横屏优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .header-section {
        padding: 5px 15px !important;
    }
    
    .section {
        padding: 20px 0 !important;
    }
    
    h1, .h1 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 高清图片处理 */
    .logo img, .icon {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* 无障碍优化 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .mobile-dark-mode {
        background-color: #1a1a1a !important;
        color: #ffffff !important;
    }
    
    .mobile-dark-mode .card {
        background-color: #2a2a2a !important;
        border-color: #444444 !important;
    }
}

/* 打印样式 */
@media print {
    .no-print, .header-section, .footer-section {
        display: none !important;
    }
    
    * {
        background: white !important;
        color: black !important;
    }
}

/* 移动端特定类 */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    /* 移动端导航 */
    .mobile-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* 汉堡菜单 */
    .hamburger {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        cursor: pointer !important;
    }
    
    .hamburger span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background: #333 !important;
        margin: 6px 0 !important;
        transition: 0.3s !important;
    }
    
    /* 移动端菜单 */
    .mobile-menu {
        position: fixed !important;
        top: 60px !important;
        left: -100% !important;
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        background: white !important;
        transition: left 0.3s !important;
        overflow-y: auto !important;
        z-index: 9998 !important;
    }
    
    .mobile-menu.active {
        left: 0 !important;
    }
    
    .mobile-menu ul {
        list-style: none !important;
        padding: 20px !important;
        margin: 0 !important;
    }
    
    .mobile-menu li {
        border-bottom: 1px solid #eee !important;
        padding: 15px 0 !important;
    }
    
    .mobile-menu a {
        color: #333 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        display: block !important;
        padding: 10px 0 !important;
    }
}

/* 性能优化 */
.mobile-optimized {
    will-change: transform !important;
    transform: translateZ(0) !important;
}

/* 滚动优化 */
.smooth-scroll {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* 移动端表单优化 */
@media (max-width: 768px) {
    .form-container {
        padding: 20px !important;
    }
    
    .form-row {
        display: block !important;
    }
    
    .form-col {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .form-submit {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important;
        background: #007bff !important;
        color: white !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
    }
}