/*
 * 响应式系统主文件 - 博龙电竞
 * 统一管理移动设备、平板设备和桌面端的响应式适配
 * 采用移动优先设计原则
 */

/* ==================== 响应式断点系统 ==================== */
:root {
    /* 移动设备断点 (≤ 767px) */
    --mobile-breakpoint-max: 767px;
    
    /* 平板设备断点 (768px - 1023px) */
    --tablet-breakpoint-min: 768px;
    --tablet-breakpoint-max: 1023px;
    
    /* 桌面设备断点 (≥ 1024px) */
    --desktop-breakpoint-min: 1024px;
    
    /* 安全区域变量 */
    --safe-area-top: env(safe-area-inset-top, 44px);
    --safe-area-bottom: env(safe-area-inset-bottom, 34px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    
    /* 响应式间距系统 */
    --spacing-xss: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    
    /* 响应式字体系统 */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    
    /* 触摸目标尺寸 */
    --touch-target: 44px;
    
    /* 响应式尺寸系统 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    
    /* 响应式内边距系统 */
    --padding-xs: 4px;
    --padding-sm: 8px;
    --padding-md: 12px;
    --padding-lg: 16px;
    --padding-xl: 24px;
    --padding-xxl: 40px;
    
    /* 响应式外边距系统 */
    --margin-xs: 4px;
    --margin-sm: 8px;
    --margin-md: 12px;
    --margin-lg: 16px;
    --margin-xl: 20px;
    --margin-xxl: 24px;
    
    /* 响应式图标尺寸 */
    --icon-size-xs: 1rem;
    --icon-size-sm: 1.2rem;
    --icon-size-base: 1.5rem;
    --icon-size-lg: 1.8rem;
    --icon-size-xl: 2.2rem;
    --icon-size-xxl: 3rem;
    
    /* 特殊尺寸 */

    --border-width-thin: 1px;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;
}


/* ==================== 移动设备适配 (≤ 767px) ==================== */

/* 移动设备基础设置 */
@media (max-width: 767px) {
    /* 全局移动适配 */
    body {
        font-size: var(--font-size-base);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .main-content {
        padding: var(--padding-sm);
        padding-bottom: calc(var(--padding-sm) + var(--safe-area-bottom));
        max-width: 100%;
        margin: 0;
    }
    
    /* 优化滚动性能 */
    .main-content {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Header组件移动适配 */
    .header {
        /* 移除与header.css冲突的样式，只保留必要的覆盖 */
        background-size: contain;
        background-position: center top;
        background-repeat: no-repeat;
        margin-bottom: var(--spacing-xs);
        position: relative;
        /* 确保高度计算正确 */
        height: auto;
        max-height: 50vh; /* 最大不超过屏幕高度的50% */
    }
    
    .header-content {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        padding-top: var(--safe-area-top);
    }
    
    .category-nav {
        position: sticky;
        top: var(--safe-area-top);
        z-index: 99;
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        background: rgba(13, 16, 21, 0.95);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    /* 产品网格布局 - 通过JS定位导航栏，无需额外margin */
    .products-grid {
        /* margin-top 已通过JS定位处理 */
    }
    
    .category-nav-content {
        padding: 0 var(--spacing-sm);
    }
    
    .category-list {
        height: 48px;
        gap: 0;
        justify-content: space-between;
    }
    
    .category-btn {
        font-size: var(--font-size-base);
        padding: var(--padding-xs) var(--padding-sm) var(--padding-sm) var(--padding-xxl);
        min-height: var(--touch-target);
        font-family: var(--font-chinese), var(--font-latin), sans-serif;
    }
    
    /* 产品卡片移动适配 */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
    }
    
    .product-name {
        font-size: var(--font-size-base);
        -webkit-line-clamp: 2;
        line-clamp: 2;
        line-height: var(--line-height-tight);
    }
    
    .price-number {
        font-size: var(--font-size-lg);
    }
    
    .product-type-icon {
        font-size: var(--icon-size-lg);
    }
    
    /* 招募页面移动适配 */
    .recruit-positions {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: var(--spacing-md);
    }
    
    .recruit-card {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
        border-radius: var(--border-radius-lg);
    }
    
    .recruit-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    /* Modal组件移动适配 */
    .modal {
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
    }
    
    .modal-content {
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    
    /* 底部导航栏移动适配 */
    .footer-nav {
        padding-bottom: calc(23% + var(--safe-area-bottom));
        min-height: var(--touch-target);
    }
    
    .nav-buttons {
        bottom: var(--safe-area-bottom);
    }
    
    /* 增强触摸反馈 */
    .touch-btn:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }
    
    /* 防止iOS缩放 */
    input, select, textarea {
        font-size: var(--font-size-base); /* 防止iOS缩放 */
    }
    
    /* 移除移动端悬停效果 */
    .category-btn:hover {
        background: none;
        color: inherit;
    }
    
    /* 触摸反馈效果 */
    .category-btn:active,
    .nav-btn:active,
    .btn:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* 超小屏幕设备 (≤ 375px - 小屏设备) */
@media (max-width: 375px) {
    .category-btn {
        font-size: var(--font-size-base);
        padding: var(--padding-sm) var(--padding-sm) var(--padding-sm) var(--padding-xxl);
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .product-name {
        font-size: var(--font-size-lg);
    }
}

/* 中等屏幕设备 (376px - 414px - iPhone XR等) */
@media (min-width: 376px) and (max-width: 414px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
}

/* 极窄屏幕设备 (≤ 320px) */
@media (max-width: 320px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .main-content {
        padding: var(--padding-sm);
    }
}

/* ==================== 平板设备适配 (768px - 1023px) ==================== */

/* 平板设备增强设置 */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 全局平板适配 */
    .main-content {
        padding: var(--padding-sm);
    }
    
    /* Header组件平板适配 */
    .header {
        background-position: center center;
        min-height: 150px;
        height: 60vw; /* 平板设备上使用60vw保持比例 */
        max-height: 40vh; /* 平板设备最大高度 */
    }
    
    .header-content {
        padding-left: var(--padding-sm);
        padding-right: var(--padding-sm);
    }
    
    .category-nav-content {
        padding: 0 var(--padding-md);
    }
    
    .category-list {
        justify-content: space-between;
        width: 100%;
        height: 54px;
        align-items: stretch;
    }
    
    .category-btn {
        font-size: var(--font-size-base);
    }
    
    /* 产品卡片平板适配 */
    .product-card {
        padding-bottom: 130.13%;
    }
    
    .product-type-icon {
        font-size: var(--icon-size-xl);
    }
    
    .product-name {
        font-size: var(--font-size-lg);
    }
    
    .price-number {
        font-size: var(--font-size-xl);
    }
    
    /* 产品网格布局适配 */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        /* margin-top 已通过JS定位处理 */
    }
    
    /* 平板设备上的吸顶导航栏 */
    .category-nav {
        position: sticky;
        top: var(--safe-area-top);
        z-index: 99;
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        background: rgba(13, 16, 21, 0.95);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    /* 招募页面平板适配 */
    .recruit-card {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .recruit-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .recruit-title {
        font-size: var(--font-size-xxl);
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .recruit-actions {
        flex-direction: column;
        gap: var(--margin-lg);
    }
    
    /* Modal组件平板适配 */
    .modal-content {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
    
    .product-detail-header h3 {
        font-size: var(--font-size-xxl);
    }
    
    .recruit-modal-content {
        width: 100%;
    }
    
    /* 底部导航栏平板适配 */
    .footer-nav {
        padding-bottom: 23%;
    }
    
    .nav-btn {
        width: calc(50% - 0.5px);
        padding-bottom: 13.2%;
    }
    
    /* 字体大小平板适配 */
    body {
        font-size: var(--font-size-lg);
        line-height: 1.5;
    }
    
    h1 {
        font-size: var(--font-size-xxl);
    }
    
    h2 {
        font-size: var(--icon-size-xl);
    }
    
    h3 {
        font-size: calc(var(--font-size-xl) + 0.35rem);
    }
    
    .btn {
        font-size: var(--font-size-lg);
        padding: var(--padding-md) var(--padding-xl);
        min-height: var(--touch-target);
    }
    
    /* 优化平板设备触摸体验 */
    .touch-btn {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }
    
    /* 增强平板设备视觉层次 */
    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    /* 平板设备上的图标优化 */
    .product-type-icon {
        font-size: var(--icon-size-xl);
    }
    
    /* 确保平板设备上的文字可读性 */
    .product-name {
        font-size: var(--font-size-lg);
        line-height: var(--line-height-base);
    }
}

/* ==================== 横屏设备适配 ==================== */

@media (orientation: landscape) {
    /* 移动设备横屏 */
    @media (max-width: 767px) and (orientation: landscape) {
        .main-content {
            padding: var(--spacing-xs);
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .products-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--spacing-sm);
        }
        
        .header {
            min-height: calc(var(--touch-target) * 2);
        }
        
        .category-list {
            height: calc(var(--touch-target) - 4px);
        }
        
        .category-btn {
            font-size: var(--font-size-base);
            padding: var(--padding-xs) var(--padding-xs) var(--padding-xs) var(--padding-xl);
        }
        

    }
    
    /* 平板设备横屏 */
    @media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
        .products-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        

    }
}

/* ==================== 桌面设备适配 (≥ 1024px) - 模拟移动设备 ==================== */

@media (min-width: 1024px) {
    /* 
     * 桌面端策略：限制body最大宽度，模拟移动设备浏览效果
     * 类似于微信内置浏览器的体验
     */
    
    body {
        max-width: 480px; /* 模拟大屏手机宽度 (iPhone 14 Pro Max等) */
        margin: 0 auto;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); /* 添加阴影突出主体 */
        position: relative;
        min-height: 100vh;
    }
    
    /* 背景填充 - 在body外部显示深色背景 */
    html {
        background: #000; /* 纯黑背景 */
    }
    
    /* 保持移动端布局 */
    .main-content {
        padding: var(--padding-sm);
        max-width: 100%;
    }
    
    /* 产品网格保持2列 */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    /* Header适配 */
    .header {
        background-position: center top;
        background-size: contain;
    }
    
    /* 分类导航保持移动端样式 */
    .category-nav {
        position: sticky;
        top: 0;
        z-index: 99;
    }
    
    .category-list {
        height: 48px;
    }
    
    .category-btn {
        font-size: var(--font-size-base);
        padding: var(--padding-xs) var(--padding-sm) var(--padding-sm) var(--padding-xxl);
    }
    
    /* 模态框保持全屏 */
    .modal-content {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
    
    /* 底部导航栏 */
    .footer-nav {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* 禁用桌面端悬停效果 */
    .product-card:hover,
    .recruit-card:hover,
    .btn:hover,
    .category-btn:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* 触摸反馈效果 */
    .category-btn:active,
    .nav-btn:active,
    .btn:active,
    .product-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* 超大屏幕 (≥ 1440px) - 进一步限制宽度 */
@media (min-width: 1440px) {
    body {
        max-width: 420px; /* 模拟标准手机宽度 (iPhone 13 Pro等) */
    }
    
    .footer-nav {
        max-width: 420px;
    }
    
    .modal-content {
        max-width: 420px;
    }
}

/* ==================== 高级设备特性适配 ==================== */

/* 高DPI设备优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-card,
    .footer-nav {
        background-size: contain;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 减少动画偏好适配 */
@media (prefers-reduced-motion: reduce) {
    .category-btn,
    .nav-btn,
    .btn,
    .product-card {
        transition: none !important;
        animation: none !important;
    }
    
    .modal.active .modal-content {
        animation: none !important;
    }
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
    .category-nav {
        background: rgba(13, 16, 21, 0.98);
        border-bottom-color: rgba(255, 255, 255, 0.2);
    }
}

/* ==================== 性能优化 ==================== */

/* 启用硬件加速 */
.modal-content,
.category-nav {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 减少重绘 */
.product-card,
.recruit-card {
    will-change: transform;
}

/* ==================== 响应式调试工具 (开发环境使用) ==================== */

/* 断点指示器 */
.responsive-debug::before {
    content: 'Mobile';
    position: fixed;
    top: 10px;
    right: 10px;
    background: #ff6b6b;
    color: white;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    z-index: 9999;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .responsive-debug::before {
        content: 'Tablet';
        background: #45b7d1;
    }
}

@media (min-width: 1024px) {
    .responsive-debug::before {
        content: 'Desktop';
        background: #51cf66;
    }
}

/* ==================== 响应式系统说明 ==================== */

/**
 * 设计原则：
 * 1. 移动优先：先设计移动端，再逐步增强平板和桌面端
 * 2. 渐进增强：确保基础功能在所有设备可用
 * 3. 触摸友好：保证触摸目标尺寸≥44px
 * 4. 性能优化：使用硬件加速和减少重绘技术
 * 5. 可访问性：支持深色模式、减少动画偏好等
 * 
 * 断点说明：
 * - 移动设备：≤ 767px (iPhone XR等)
 * - 平板设备：768px - 1023px (iPad Mini等)
 * - 桌面设备：≥ 1024px (限制访问)
 * 
 * 使用说明：
 * 1. 开发时以移动设备为主进行设计
 * 2. 平板设备会自动继承移动端样式并增强
 * 3. 桌面端访问会被限制并显示警告
 */