/**
 * Browser Compatibility CSS - 浏览器兼容性样式
 * 需求: 8.5 (浏览器兼容性降级方案)
 * 
 * 本文件包含:
 * 1. CSS特性检测和降级方案
 * 2. WebP图片格式降级
 * 3. 现代CSS特性的兼容性处理
 */

/* ========== CSS Grid 降级方案 ========== */
/* 为不支持CSS Grid的浏览器提供Flexbox降级 */

/* 功能卡片网格 - Flexbox降级 */
.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
}

.features-grid .feature-card {
  flex: 1 1 100%;
  min-width: 280px;
}

@media (min-width: 768px) {
  .features-grid .feature-card {
    flex: 1 1 calc(50% - var(--spacing-4));
  }
}

@media (min-width: 1200px) {
  .features-grid .feature-card {
    flex: 1 1 calc(33.333% - var(--spacing-5));
  }
}

/* 如果支持Grid，使用Grid布局 */
@supports (display: grid) {
  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .features-grid .feature-card {
    flex: none;
    min-width: auto;
  }
  
  @media (min-width: 768px) {
    .features-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (min-width: 1200px) {
    .features-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* 场景卡片网格 - Flexbox降级 */
.scenarios-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
}

.scenarios-grid .scenario-card {
  flex: 1 1 100%;
  min-width: 280px;
}

@media (min-width: 768px) {
  .scenarios-grid .scenario-card {
    flex: 1 1 calc(50% - var(--spacing-4));
  }
}

@media (min-width: 1200px) {
  .scenarios-grid .scenario-card {
    flex: 1 1 calc(33.333% - var(--spacing-5));
  }
}

/* 如果支持Grid，使用Grid布局 */
@supports (display: grid) {
  .scenarios-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .scenarios-grid .scenario-card {
    flex: none;
    min-width: auto;
  }
  
  @media (min-width: 768px) {
    .scenarios-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (min-width: 1200px) {
    .scenarios-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* ========== CSS变量降级方案 ========== */
/* 为不支持CSS变量的浏览器提供固定值 */

/* 主色调降级 */
.btn-primary {
  background-color: #1a73e8;
  color: #ffffff;
}

@supports (--css: variables) {
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
  }
}

.nav-link.active {
  color: #1a73e8;
}

@supports (--css: variables) {
  .nav-link.active {
    color: var(--color-primary);
  }
}

/* ========== Flexbox Gap 降级方案 ========== */
/* 旧版浏览器不支持gap属性，使用margin替代 */

/* 导航菜单 */
.nav-menu {
  margin: -0.5rem;
}

.nav-menu li {
  margin: 0.5rem;
}

@supports (gap: 1rem) {
  .nav-menu {
    margin: 0;
  }
  
  .nav-menu li {
    margin: 0;
  }
}

/* 页脚导航 */
.footer-nav {
  margin: -1rem;
}

.footer-nav a {
  margin: 1rem;
}

@supports (gap: 1rem) {
  .footer-nav {
    margin: 0;
  }
  
  .footer-nav a {
    margin: 0;
  }
}

/* ========== WebP图片降级方案 ========== */
/* 使用<picture>元素和CSS背景图的降级策略 */

/* Hero区域背景图降级 */
.hero {
  /* 默认使用渐变背景（所有浏览器都支持） */
  background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  background-color: #1a73e8;
}

/* 如果支持WebP，可以添加WebP背景图 */
@supports (background-image: url('data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=')) {
  .hero {
    /* 保持渐变作为后备 */
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.9) 0%, rgba(21, 87, 176, 0.9) 100%);
  }
}

/* 场景图片降级 - 使用<picture>元素在HTML中处理 */
/* HTML示例:
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>
*/

/* ========== Object-fit 降级方案 ========== */
/* 为不支持object-fit的浏览器提供降级 */

.scenario-image {
  width: 100%;
  height: 200px;
  /* 降级方案：使用背景图 */
}

@supports (object-fit: cover) {
  .scenario-image {
    object-fit: cover;
  }
}

/* 如果不支持object-fit，使用JavaScript设置背景图 */
.no-objectfit .scenario-image {
  display: none;
}

.no-objectfit .scenario-card {
  background-size: cover;
  background-position: center;
}

/* ========== Sticky定位降级方案 ========== */
/* 为不支持position: sticky的浏览器提供fixed降级 */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

@supports (position: sticky) {
  /* 如果支持sticky，可以在特定场景使用 */
  /* 当前设计使用fixed，所以不需要改变 */
}

/* ========== CSS滤镜降级方案 ========== */
/* 为不支持CSS滤镜的浏览器提供降级 */

.feature-icon img {
  /* 默认不应用滤镜 */
  opacity: 1;
}

@supports (filter: grayscale(0)) {
  .feature-icon img {
    filter: none;
    transition: filter var(--transition-base, 250ms ease-in-out);
  }
  
  .feature-card:hover .feature-icon img {
    /* 可以添加hover效果 */
  }
}

/* ========== Transform降级方案 ========== */
/* 为不支持transform的浏览器提供降级 */

.feature-card {
  transition: box-shadow 250ms ease-in-out;
}

@supports (transform: translateY(-4px)) {
  .feature-card {
    transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
  }
  
  .feature-card:hover {
    transform: translateY(-4px);
  }
}

.scenario-card {
  transition: box-shadow 250ms ease-in-out;
}

@supports (transform: translateY(-4px)) {
  .scenario-card {
    transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
  }
  
  .scenario-card:hover {
    transform: translateY(-4px);
  }
}

/* ========== Backdrop-filter降级方案 ========== */
/* 为不支持backdrop-filter的浏览器提供降级 */

/* 如果未来需要毛玻璃效果 */
.glass-effect {
  background-color: rgba(255, 255, 255, 0.9);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .glass-effect {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ========== Scroll-behavior降级方案 ========== */
/* 平滑滚动的CSS降级 */

html {
  /* 默认滚动行为 */
  scroll-behavior: auto;
}

@supports (scroll-behavior: smooth) {
  html {
    scroll-behavior: smooth;
  }
}

/* 如果不支持，JavaScript会处理平滑滚动 */

/* ========== Aspect-ratio降级方案 ========== */
/* 为不支持aspect-ratio的浏览器提供padding-top技巧 */

.aspect-ratio-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 = 9/16 = 0.5625 */
}

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

@supports (aspect-ratio: 16 / 9) {
  .aspect-ratio-16-9 {
    padding-top: 0;
    aspect-ratio: 16 / 9;
  }
  
  .aspect-ratio-16-9 > * {
    position: static;
  }
}

/* ========== Clamp()函数降级方案 ========== */
/* 为不支持clamp()的浏览器提供固定值 */

.responsive-text {
  font-size: 16px;
}

@media (min-width: 768px) {
  .responsive-text {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  .responsive-text {
    font-size: 20px;
  }
}

@supports (font-size: clamp(1rem, 2vw, 1.5rem)) {
  .responsive-text {
    font-size: clamp(1rem, 2vw, 1.25rem);
  }
}

/* ========== 浏览器特定前缀 ========== */
/* 为需要前缀的CSS属性添加供应商前缀 */

/* Flexbox前缀 */
.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* Transform前缀 */
.transform-element {
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
}

/* Transition前缀 */
.transition-element {
  -webkit-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

/* Box-shadow前缀 */
.shadow-element {
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Border-radius前缀 */
.rounded-element {
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

/* ========== 打印样式兼容性 ========== */
@media print {
  /* 隐藏导航和页脚 */
  .header,
  .footer,
  .nav-toggle,
  .skip-to-content {
    display: none !important;
  }
  
  /* 移除固定定位 */
  body {
    padding-top: 0;
  }
  
  /* 确保内容可打印 */
  section {
    page-break-inside: avoid;
  }
  
  /* 移除背景色以节省墨水 */
  .hero,
  .features,
  .scenarios,
  .about {
    background: none !important;
    color: #000 !important;
  }
  
  /* 显示链接URL */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  /* 不显示锚点链接的URL */
  a[href^="#"]:after {
    content: "";
  }
}

/* ========== IE11特定修复 ========== */
/* 使用条件注释或特定选择器 */

/* IE11不支持CSS变量，使用固定值 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE11特定样式 */
  .btn-primary {
    background-color: #1a73e8;
    color: #ffffff;
  }
  
  .nav-link.active {
    color: #1a73e8;
  }
  
  /* IE11的Flexbox bug修复 */
  .features-grid,
  .scenarios-grid {
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
  }
  
  .feature-card,
  .scenario-card {
    -ms-flex: 1 1 100%;
  }
}

/* ========== 移动Safari特定修复 ========== */
/* 修复iOS Safari的100vh问题 */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari */
  .full-height {
    min-height: -webkit-fill-available;
  }
}

/* 修复iOS Safari的position: fixed问题 */
@supports (-webkit-overflow-scrolling: touch) {
  .header {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ========== 性能优化的兼容性处理 ========== */
/* 使用will-change提示浏览器优化 */

@supports (will-change: transform) {
  .feature-card,
  .scenario-card,
  .btn {
    will-change: transform;
  }
  
  /* 动画结束后移除will-change */
  .feature-card:not(:hover),
  .scenario-card:not(:hover),
  .btn:not(:hover) {
    will-change: auto;
  }
}

/* ========== 无障碍性兼容 ========== */
/* 确保在不支持某些特性时仍然可访问 */

/* 强制显示焦点指示器（即使浏览器不支持:focus-visible） */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus {
    outline: 3px solid #1a73e8;
    outline-offset: 4px;
  }
}

/* ========== 颜色方案兼容 ========== */
/* 支持深色模式的浏览器 */
@media (prefers-color-scheme: dark) {
  /* 当前设计为浅色主题，深色模式可以在未来添加 */
  /* 这里保持浅色主题以确保一致性 */
}

/* 支持高对比度模式 */
@media (prefers-contrast: high) {
  /* 增强对比度 */
  .nav-link,
  .btn,
  a {
    outline-width: 2px;
  }
  
  .feature-card,
  .scenario-card {
    border: 2px solid #000;
  }
}

/* 支持减少动画偏好 */
@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;
  }
}