/* ========================================
   Browser Compatibility Layer
   浏览器兼容性层
   支持: Chrome 60+, Firefox 55+, Safari 11+, Edge 16+, IE 11 (polyfill)
   ======================================== */

/* ===== 1. Backdrop Filter 兼容性前缀 ===== */
/* .navbar 已在 style.css 中处理，此处补充其他可能需要的位置 */
/* 通用 backdrop-filter 前缀 */
.backdrop-blur {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* ===== 2. Scroll Snap 兼容性前缀 ===== */
.scroll-snap-x {
    -webkit-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
}

.scroll-snap-y {
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
}

/* ===== 3. Background Clip 兼容性前缀 ===== */
.text-clip {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ===== 4. Inset 简写 fallback ===== */
/* inset: 0 等价于 top/left/right/bottom: 0 */
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.inset-auto {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

/* ===== 5. Flexbox 兼容性 ===== */
/* IE 11 flexbox fix */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .card {
        display: flex;
        flex-direction: column;
    }
    .card-grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -12px;
    }
    .card-grid > * {
        flex: 1 1 300px;
        padding: 0 12px;
    }
    .news-item {
        display: flex;
        flex-direction: column;
    }
    .news-date {
        width: auto !important;
        margin-bottom: 12px;
    }
    /* IE 11 flexbox centering fix */
    .flex-center {
        -ms-flex-pack: center;
        justify-content: center;
    }
    .flex-center-v {
        -ms-flex-align: center;
        align-items: center;
    }
}

/* ===== 6. Grid fallback for IE 11 ===== */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .card-grid {
        display: block;
    }
    .card-grid > * {
        display: block;
        width: 100%;
        margin-bottom: 24px;
    }
    .client-wall {
        display: block;
    }
    .client-wall > * {
        display: block;
        width: 100%;
        margin-bottom: 16px;
    }
    .contact-grid {
        display: block;
    }
    .contact-grid > * {
        display: block;
        width: 100%;
    }
}

/* ===== 7. Scrollbar 兼容性 ===== */
/* Firefox scrollbar (standard, no prefix needed) */
.news-gallery-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue, #00d4ff) var(--card-bg, #0d2137);
}

/* WebKit scrollbar */
.news-gallery-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.news-gallery-scroll::-webkit-scrollbar-track {
    background: var(--card-bg, #0d2137);
    border-radius: 3px;
}

.news-gallery-scroll::-webkit-scrollbar-thumb {
    background: var(--accent-blue, #00d4ff);
    border-radius: 3px;
}

.news-gallery-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue-deep, #0066cc);
}

/* IE 11 scrollbar (scrollbar-color not supported, hide by default) */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .news-gallery-scroll {
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}

/* ===== 8. Gradient fallback ===== */
/* For browsers that don't support CSS variables in gradients */
.gradient-fallback {
    background: #1e5fa8;
    background: -webkit-linear-gradient(135deg, #00D4FF 0%, #0066CC 100%);
    background: linear-gradient(135deg, #00D4FF 0%, #0066CC 100%);
}

/* ===== 9. Transform fallback ===== */
/* For browsers that don't support transform shorthand */
.transform-center {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* ===== 10. Animation fallback ===== */
/* For browsers that don't support @keyframes */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    -webkit-animation: fadeIn 0.4s ease;
    animation: fadeIn 0.4s ease;
}

/* ===== 11. Font-size fallback for clamp() ===== */
/* clamp(min, preferred, max) -> min + (preferred - min) * ((100vw - min-viewport) / (max-viewport - min-viewport)) */
/* Simplified: min 16px, preferred 1vw, max 24px */
.font-clamp-sm {
    font-size: 16px;
    font-size: clamp(16px, 1vw, 24px);
}

/* clamp 20px, preferred 2vw, max 48px */
.font-clamp-md {
    font-size: 20px;
    font-size: clamp(20px, 2vw, 48px);
}

/* clamp 32px, preferred 6vw, max 72px */
.font-clamp-lg {
    font-size: 32px;
    font-size: clamp(32px, 6vw, 72px);
}

/* clamp 28px, preferred 4.5vw, max 56px */
.font-clamp-xl {
    font-size: 28px;
    font-size: clamp(28px, 4.5vw, 56px);
}

/* ===== 12. Object-fit fallback ===== */
/* For browsers that don't support object-fit */
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}

/* ===== 13. CSS Variables fallback ===== */
/* IE 11 doesn't support CSS variables, provide hardcoded fallbacks */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    :root {
        --primary-dark: #0A1628;
        --secondary-dark: #111827;
        --card-bg: #0d2137;
        --accent-blue: #00D4FF;
        --accent-blue-deep: #0066FF;
        --accent-purple: #7B61FF;
        --accent-green: #00FF88;
        --accent-light: #1e3a5f;
        --text-white: #FFFFFF;
        --text-gray: #94a3b8;
        --border-color: rgba(0, 212, 255, 0.2);
        --gradient-blue: linear-gradient(135deg, #00D4FF 0%, #0066CC 100%);
        --gradient-sci-fi: linear-gradient(135deg, #00D4FF 0%, #0066FF 50%, #7B61FF 100%);
        --gradient-bio: linear-gradient(135deg, #00D4FF 0%, #00FF88 100%);
        --glow-blue: 0 0 20px rgba(0, 212, 255, 0.3);
        --glow-purple: 0 0 20px rgba(123, 97, 255, 0.3);
        --glow-green: 0 0 20px rgba(0, 255, 136, 0.3);
    }
}

/* ===== 14. Aspect Ratio fallback ===== */
/* For browsers that don't support aspect-ratio */
.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.aspect-ratio-16-9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aspect-ratio-4-3 {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    height: 0;
}

.aspect-ratio-4-3 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===== 15. Placeholder styling ===== */
/* IE 11 placeholder styling */
::-ms-input-placeholder {
    color: var(--text-gray, #94a3b8);
}

::placeholder {
    color: var(--text-gray, #94a3b8);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--text-gray, #94a3b8);
}

/* ===== 16. Text overflow ellipsis ===== */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 17. Line clamp ===== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* ===== 18. Smooth scroll ===== */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ===== 19. Touch action ===== */
.touch-manipulation {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

/* ===== 20. User select ===== */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ===== 21. Transition fallback ===== */
/* For browsers with poor transition support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 22. High contrast mode (Windows) ===== */
@media (-ms-high-contrast: active) {
    .card,
    .news-item,
    .form-group {
        border: 1px solid #fff;
    }
    .btn {
        border: 2px solid #fff;
    }
}