/* ========================================
   响应式基类样式 - 统一断点与设备适配
   ======================================== */

/*
 * 断点定义：
 * - xs: < 360px    (超小屏手机)
 * - sm: 360-480px  (小手机)
 * - md: 480-600px  (大手机)
 * - lg: 600-768px  (平板竖屏)
 * - xl: 768-1024px (平板横屏)
 * - 2xl: 1024-1440px (桌面)
 * - 3xl: > 1440px  (大屏桌面)
 */

/* ========== CSS 变量 - 响应式间距与字体 ========== */
:root {
    /* 间距变量 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* 容器宽度 */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-padding: 24px;
    
    /* 字体大小 */
    --font-xs: 10px;
    --font-sm: 12px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 24px;
    --font-3xl: 32px;
    --font-4xl: 48px;
    
    /* 导航栏高度 */
    --nav-height: 64px;
    
    /* 边框圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

/* ========== 平板横屏 (768px - 1024px) ========== */
@media screen and (max-width: 1024px) {
    :root {
        --container-padding: 20px;
        --font-4xl: 42px;
        --font-3xl: 28px;
        --font-2xl: 22px;
        --spacing-2xl: 40px;
        --spacing-3xl: 56px;
    }
}

/* ========== 平板竖屏 (600px - 768px) ========== */
@media screen and (max-width: 768px) {
    :root {
        --container-padding: 16px;
        --nav-height: 56px;
        --font-4xl: 36px;
        --font-3xl: 24px;
        --font-2xl: 20px;
        --font-xl: 16px;
        --spacing-xl: 24px;
        --spacing-2xl: 32px;
        --spacing-3xl: 48px;
    }
}

/* ========== 大手机 (480px - 600px) ========== */
@media screen and (max-width: 600px) {
    :root {
        --container-padding: 16px;
        --font-4xl: 32px;
        --font-3xl: 22px;
        --font-2xl: 18px;
        --font-xl: 15px;
        --font-lg: 14px;
        --spacing-xl: 20px;
        --spacing-2xl: 28px;
        --spacing-3xl: 40px;
    }
}

/* ========== 小手机 (360px - 480px) ========== */
@media screen and (max-width: 480px) {
    :root {
        --container-padding: 14px;
        --font-4xl: 28px;
        --font-3xl: 20px;
        --font-2xl: 16px;
        --font-xl: 14px;
        --font-lg: 13px;
        --font-md: 13px;
        --spacing-lg: 20px;
        --spacing-xl: 16px;
        --spacing-2xl: 24px;
        --spacing-3xl: 32px;
    }
}

/* ========== 超小屏手机 (<360px) ========== */
@media screen and (max-width: 360px) {
    :root {
        --container-padding: 12px;
        --font-4xl: 24px;
        --font-3xl: 18px;
        --font-2xl: 15px;
        --font-xl: 13px;
        --font-lg: 12px;
        --font-md: 12px;
        --font-sm: 11px;
        --spacing-lg: 16px;
        --spacing-xl: 14px;
        --spacing-2xl: 20px;
        --spacing-3xl: 28px;
    }
}

/* ========== 超大屏幕 (>1440px) ========== */
@media screen and (min-width: 1441px) {
    :root {
        --container-max: 1400px;
        --font-4xl: 56px;
        --font-3xl: 36px;
        --font-2xl: 28px;
        --spacing-2xl: 56px;
        --spacing-3xl: 80px;
    }
}

/* ========== 横屏手机优化 ========== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    :root {
        --nav-height: 48px;
        --spacing-2xl: 24px;
        --spacing-3xl: 32px;
    }
}

/* ========== 响应式工具类 ========== */

/* 容器 */
.container-responsive {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* 隐藏类 */
.hide-mobile {
    display: block;
}

.hide-desktop {
    display: none;
}

@media screen and (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .hide-desktop {
        display: block !important;
    }
}

/* Flex 响应式 */
.flex-responsive {
    display: flex;
    gap: var(--spacing-md);
}

@media screen and (max-width: 600px) {
    .flex-responsive {
        flex-direction: column;
    }
}

/* Grid 响应式 */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

@media screen and (max-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .grid-responsive {
        grid-template-columns: 1fr;
    }
}

/* 文字截断 */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 响应式间距 */
.mt-responsive {
    margin-top: var(--spacing-2xl);
}

.mb-responsive {
    margin-bottom: var(--spacing-2xl);
}

.py-responsive {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

.px-responsive {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* 响应式字体 */
.text-title {
    font-size: var(--font-4xl);
    line-height: 1.2;
}

.text-subtitle {
    font-size: var(--font-2xl);
    line-height: 1.4;
}

.text-body {
    font-size: var(--font-lg);
    line-height: 1.6;
}

.text-small {
    font-size: var(--font-sm);
    line-height: 1.5;
}

/* 图片响应式 */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 按钮响应式 */
.btn-responsive {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-md);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

@media screen and (max-width: 600px) {
    .btn-responsive {
        padding: var(--spacing-sm) var(--spacing-md);
        width: 100%;
        text-align: center;
    }
}

/* 卡片响应式 */
.card-responsive {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all 0.3s ease;
}

@media screen and (max-width: 600px) {
    .card-responsive {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }
}

/* 安全区域适配 (iPhone X 等刘海屏) */
@supports (padding: max(0px)) {
    .safe-area-padding {
        padding-left: max(var(--container-padding), env(safe-area-inset-left));
        padding-right: max(var(--container-padding), env(safe-area-inset-right));
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    /* 增大可点击区域 */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 禁用悬停效果 */
    .no-hover-on-touch:hover {
        transform: none;
        box-shadow: none;
    }
}

/* 高 DPI 屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .sharp-text {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 打印样式优化 */
@media print {
    .hide-print {
        display: none !important;
    }
    
    .container-responsive,
    .container-narrow {
        max-width: 100%;
        padding: 0;
    }
}