/**
 * 响应式断点标准化
 * 统一全站的响应式设计断点，消除不一致的媒体查询
 */

/* CSS自定义属性定义标准断点 */
:root {
    /* 标准响应式断点 */
    --breakpoint-xs: 480px;    /* 小手机 */
    --breakpoint-sm: 768px;    /* 大手机/小平板 */
    --breakpoint-md: 1024px;   /* 平板/小桌面 */
    --breakpoint-lg: 1200px;   /* 桌面 */
    --breakpoint-xl: 1440px;   /* 大桌面 */
    
    /* 容器最大宽度 */
    --container-xs: 100%;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
}

/* 标准化媒体查询混入类 */

/* 1. 小手机及以下 (≤480px) */
@media (max-width: 480px) {
    .responsive-xs-only {
        display: block;
    }
    .responsive-xs-hide {
        display: none !important;
    }
    .container-responsive {
        max-width: var(--container-xs);
        padding: 0 1rem;
    }
}

/* 2. 大手机/小平板 (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .responsive-sm-only {
        display: block;
    }
    .responsive-sm-hide {
        display: none !important;
    }
    .container-responsive {
        max-width: var(--container-sm);
        padding: 0 1.5rem;
    }
}

/* 3. 平板/小桌面 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .responsive-md-only {
        display: block;
    }
    .responsive-md-hide {
        display: none !important;
    }
    .container-responsive {
        max-width: var(--container-md);
        padding: 0 2rem;
    }
}

/* 4. 桌面 (1025px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
    .responsive-lg-only {
        display: block;
    }
    .responsive-lg-hide {
        display: none !important;
    }
    .container-responsive {
        max-width: var(--container-lg);
        padding: 0 2rem;
    }
}

/* 5. 大桌面 (≥1201px) */
@media (min-width: 1201px) {
    .responsive-xl-only {
        display: block;
    }
    .responsive-xl-hide {
        display: none !important;
    }
    .container-responsive {
        max-width: var(--container-xl);
        padding: 0 2rem;
    }
}

/* 简化的响应式断点 - 移动端优先 */

/* 移动端 (≤768px) */
@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
    .mobile-hide {
        display: none !important;
    }
    .mobile-text-center {
        text-align: center !important;
    }
    .mobile-full-width {
        width: 100% !important;
    }
    .mobile-no-padding {
        padding: 0 !important;
    }
    .mobile-small-padding {
        padding: 1rem !important;
    }
    
    /* 移动端容器样式 */
    .container-mobile {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    
    /* 移动端网格调整 */
    .grid-mobile-1 {
        grid-template-columns: 1fr !important;
    }
    .grid-mobile-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grid-mobile-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* 移动端字体调整 */
    .mobile-text-sm {
        font-size: 0.875rem !important;
    }
    .mobile-text-lg {
        font-size: 1.125rem !important;
    }
}

/* 桌面端 (≥769px) */
@media (min-width: 769px) {
    .desktop-only {
        display: block !important;
    }
    .desktop-hide {
        display: none !important;
    }
    .desktop-flex {
        display: flex !important;
    }
    .desktop-grid {
        display: grid !important;
    }
    
    /* 桌面端容器样式 */
    .container-desktop {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        box-sizing: border-box;
    }
}

/* 特殊用途的响应式类 */

/* 平板及以上 (≥769px) */
@media (min-width: 769px) {
    .tablet-up-only {
        display: block !important;
    }
    .tablet-up-hide {
        display: none !important;
    }
}

/* 大屏幕及以上 (≥1201px) */
@media (min-width: 1201px) {
    .large-screen-only {
        display: block !important;
    }
    .large-screen-hide {
        display: none !important;
    }
    
    /* 大屏幕容器 */
    .container-large {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
    }
}

/* 可访问性友好的媒体查询 */

/* 用户偏好：减少动画 */
@media (prefers-reduced-motion: reduce) {
    .respect-motion-preference {
        animation: none !important;
        transition: none !important;
    }
    .respect-motion-preference * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 用户偏好：高对比度 */
@media (prefers-contrast: high) {
    .respect-contrast-preference {
        border-width: 2px !important;
        outline-width: 2px !important;
    }
}

/* 用户偏好：深色主题 */
@media (prefers-color-scheme: dark) {
    .respect-dark-theme {
        background-color: var(--bg-dark, #1a1a1a) !important;
        color: var(--text-dark, #ffffff) !important;
    }
}

/* 打印样式 */
@media print {
    .print-hide {
        display: none !important;
    }
    .print-only {
        display: block !important;
    }
    .print-break-before {
        page-break-before: always !important;
    }
    .print-break-after {
        page-break-after: always !important;
    }
    .print-no-break {
        page-break-inside: avoid !important;
    }
}

/* 响应式工具类 */
.w-full { width: 100%; }
.h-full { height: 100%; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 边距和填充响应式调整 */
@media (max-width: 768px) {
    .mobile-m-0 { margin: 0 !important; }
    .mobile-p-1 { padding: 0.5rem !important; }
    .mobile-p-2 { padding: 1rem !important; }
    .mobile-p-3 { padding: 1.5rem !important; }
    .mobile-mx-auto { margin-left: auto !important; margin-right: auto !important; }
}

@media (min-width: 769px) {
    .desktop-m-0 { margin: 0 !important; }
    .desktop-p-2 { padding: 1rem !important; }
    .desktop-p-4 { padding: 2rem !important; }
    .desktop-p-6 { padding: 3rem !important; }
}