/**
 * IE11 / 微信浏览器 兼容性增强样式
 * 为不支持现代CSS特性的浏览器提供降级方案
 */

/* ========== backdrop-filter 降级 ========== */
/* IE11 不支持 backdrop-filter，微信浏览器部分支持 */
/* 为所有使用 backdrop-filter 的元素提供不透明背景降级 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE11 专用 */
    [style*="backdrop-filter"],
    .backdrop-blur,
    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-filter {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    
    /* 导航栏 */
    #topHeader,
    header[class*="bg-"],
    .glass-nav,
    .header-nav-container {
        background-color: rgba(219, 234, 254, 0.95) !important;
        backdrop-filter: none !important;
    }
    
    /* 卡片 */
    .bg-white\/60,
    .bg-white\/70,
    .bg-white\/80,
    .bg-white\/90 {
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
}

/* WeChat/旧版WebKit降级 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .backdrop-blur,
    .backdrop-blur-sm,
    .backdrop-blur-md,
    [style*="backdrop-filter"] {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    
    #topHeader {
        background-color: rgba(219, 234, 254, 0.95) !important;
    }
    
    .header-nav-container {
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
}

/* ========== CSS Grid 降级 (IE11) ========== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* 将 grid 布局降级为 block/flex */
    [style*="display: grid"],
    .grid {
        display: -ms-flexbox !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .grid-cols-1 > * { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .grid-cols-2 > * { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
    .grid-cols-3 > * { -ms-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; }
    .grid-cols-4 > * { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
    
    /* 简单 gap 降级 */
    .gap-2 > * { margin: 0.25rem; }
    .gap-4 > * { margin: 0.5rem; }
    .gap-6 > * { margin: 0.75rem; }
    .gap-8 > * { margin: 1rem; }
}

/* ========== position:sticky 降级 (微信) ========== */
@supports not (position: sticky) {
    .sticky, [style*="position: sticky"] {
        position: relative !important;
    }
}

/* ========== object-fit 降级 (IE11) ========== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    img[style*="object-fit"],
    .object-cover,
    .object-contain {
        /* IE11 不支持 object-fit，使用 background-image 替代 */
        font-family: 'object-fit: cover; object-fit: contain;';
    }
}

/* ========== CSS 变量降级 (IE11) ========== */
/* 已在各文件中通过 var(--xxx, fallback) 方式处理 */
/* 此处提供额外的基础样式保证 */

/* ========== Flexbox gap 降级 (旧版Safari/微信) ========== */
@supports not (gap: 1rem) {
    .flex.gap-2 > * + * { margin-left: 0.5rem; }
    .flex.gap-4 > * + * { margin-left: 1rem; }
    .flex.gap-6 > * + * { margin-left: 1.5rem; }
    .flex.gap-8 > * + * { margin-left: 2rem; }
    .flex.flex-col.gap-2 > * + * { margin-left: 0; margin-top: 0.5rem; }
    .flex.flex-col.gap-4 > * + * { margin-left: 0; margin-top: 1rem; }
    .flex.flex-col.gap-6 > * + * { margin-left: 0; margin-top: 1.5rem; }
}

/* ========== 通用修复 ========== */
/* 防止IE11中flex子元素溢出 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .flex > * { max-width: 100%; }
    .flex-col > * { max-width: 100%; }
    
    /* 修复IE11中min-height:100vh不生效 */
    .min-h-screen { min-height: 100vh; height: 100%; }
}