/* ========================================
   设备响应式设计 - 基于设备检测的优化样式
   ======================================== */

/* ========================================
   设备类型基础样式
   ======================================== */

/* 移动设备基础样式 */
.device-mobile {
    --base-font-size: 14px;
    --heading-scale: 1.2;
    --spacing-unit: 12px;
    --border-radius: 8px;
    --shadow-intensity: 0.1;
    --animation-speed: 0.2s;
}

/* 平板设备基础样式 */
.device-tablet {
    --base-font-size: 15px;
    --heading-scale: 1.3;
    --spacing-unit: 16px;
    --border-radius: 12px;
    --shadow-intensity: 0.15;
    --animation-speed: 0.3s;
}

/* 桌面设备基础样式 */
.device-desktop {
    --base-font-size: 16px;
    --heading-scale: 1.4;
    --spacing-unit: 20px;
    --border-radius: 16px;
    --shadow-intensity: 0.2;
    --animation-speed: 0.4s;
}

/* ========================================
   操作系统特定优化
   ======================================== */

/* iOS设备优化 */
.os-ios {
    /* iOS Safari特定样式 */
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
}

.os-ios .btn,
.os-ios .nav-link {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

/* Android设备优化 */
.os-android {
    /* Android Chrome特定样式 */
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

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

/* 触摸设备基础样式 */
.touch-device .btn,
.touch-device .nav-link,
.touch-device .case-nav-btn,
.touch-device .case-indicator {
    min-height: 44px;
    min-width: 44px;
    padding: 12px;
}

/* 非触摸设备样式 */
.no-touch .btn:hover,
.no-touch .nav-link:hover,
.no-touch .case-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 198, 255, 0.3);
}

/* ========================================
   高DPI屏幕优化
   ======================================== */

.high-dpi {
    /* 高DPI屏幕使用更清晰的字体渲染 */
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.high-dpi img {
    /* 高DPI屏幕使用更高质量的图片 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ========================================
   设备特定的交互优化
   ======================================== */

/* 禁用hover效果（移动设备） */
.no-hover .btn:hover,
.no-hover .nav-link:hover,
.no-hover .case-nav-btn:hover,
.no-hover .service-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 有限的hover效果（平板设备） */
.limited-hover .btn:hover,
.limited-hover .nav-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 198, 255, 0.2);
}

/* 完整交互效果（桌面设备） */
.full-interaction .btn:hover,
.full-interaction .nav-link:hover,
.full-interaction .service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 198, 255, 0.4);
}

/* ========================================
   网络连接优化
   ======================================== */

/* 慢速连接优化 */
.slow-connection {
    /* 禁用非关键动画 */
    --animation-speed: 0s;
}

.slow-connection .service-card,
.slow-connection .advantage-card,
.slow-connection .annotation-card,
.slow-connection .area-card {
    transition: none !important;
    animation: none !important;
}

.slow-connection img {
    /* 延迟加载图片 */
    loading: lazy;
}

/* ========================================
   设备特定的布局调整
   ======================================== */

/* 移动设备布局 */
.device-mobile .container {
    padding: 0 var(--spacing-unit);
}

.device-mobile .service-card {
    flex: 0 0 100%;
    margin-bottom: var(--spacing-unit);
}

.device-mobile .cases-track {
    gap: var(--spacing-unit);
}

.device-mobile .case-card {
    flex: 0 0 280px;
    padding: var(--spacing-unit);
}

/* 平板设备布局 */
.device-tablet .service-card {
    flex: 0 0 calc(50% - var(--spacing-unit));
    margin-bottom: var(--spacing-unit);
}

.device-tablet .case-card {
    flex: 0 0 320px;
    padding: calc(var(--spacing-unit) * 1.5);
}

/* 桌面设备布局 */
.device-desktop .service-card {
    flex: 0 0 calc(25% - var(--spacing-unit));
    margin-bottom: var(--spacing-unit);
}

.device-desktop .case-card {
    flex: 0 0 370px;
    padding: calc(var(--spacing-unit) * 2);
}

/* ========================================
   字体大小响应式调整
   ======================================== */

.device-mobile h1 {
    font-size: calc(1.8rem * var(--heading-scale));
}

.device-mobile h2 {
    font-size: calc(1.5rem * var(--heading-scale));
}

.device-mobile h3 {
    font-size: calc(1.2rem * var(--heading-scale));
}

.device-tablet h1 {
    font-size: calc(2.2rem * var(--heading-scale));
}

.device-tablet h2 {
    font-size: calc(1.8rem * var(--heading-scale));
}

.device-tablet h3 {
    font-size: calc(1.4rem * var(--heading-scale));
}

.device-desktop h1 {
    font-size: calc(2.5rem * var(--heading-scale));
}

.device-desktop h2 {
    font-size: calc(2rem * var(--heading-scale));
}

/* .device-desktop h3 {
    font-size: calc(1.6rem * var(--heading-scale));
} */

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

/* 移动设备性能优化 */
.device-mobile * {
    will-change: auto;
}

.device-mobile .service-card,
.device-mobile .advantage-card,
.device-mobile .annotation-card,
.device-mobile .area-card {
    will-change: transform;
}

/* 桌面设备性能优化 */
.device-desktop .service-card:hover,
.device-desktop .advantage-card:hover,
.device-desktop .annotation-card:hover,
.device-desktop .area-card:hover {
    will-change: transform, box-shadow;
}

/* ========================================
   媒体查询备用方案
   ======================================== */

/* 为不支持JavaScript的设备提供备用方案 */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }
    
    .service-card {
        flex: 0 0 100%;
        margin-bottom: 12px;
    }
    
    .case-card {
        flex: 0 0 280px;
        padding: 12px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .service-card {
        flex: 0 0 calc(50% - 8px);
        margin-bottom: 16px;
    }
    
    .case-card {
        flex: 0 0 320px;
        padding: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .service-card {
        flex: 0 0 calc(33.333% - 12px);
        margin-bottom: 20px;
    }
    
    .case-card {
        flex: 0 0 340px;
        padding: 20px;
    }
}

@media (min-width: 1025px) {
    .service-card {
        flex: 0 0 calc(25% - 15px);
        margin-bottom: 24px;
    }
    
    .case-card {
        flex: 0 0 360px;
        padding: 24px;
    }
}

/* ========================================
   调试样式（开发环境）
   ======================================== */

/* 开发环境下显示设备信息 */
.device-debug::before {
    content: attr(data-device-info);
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    font-family: monospace;
}