/**
 * Responsive CSS - 响应式样式
 * 需求 3.1, 3.2: 支持移动端(<768px)、平板端(768px-1199px)、桌面端(≥1200px)
 * 需求 3.3, 3.4, 3.5: 移动端优化
 */

/* ========== 移动端优化 (<768px) ========== */

/* 移动端字体大小调整 - 确保最小14px (需求 3.4) */
@media (max-width: 767px) {
  /* 确保所有文字可读 */
  body {
    font-size: var(--font-size-sm); /* 14px */
  }

  /* 调整标题大小 */
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }

  /* 移动端容器内边距 */
  .container {
    padding: 0 var(--spacing-4);
  }

  /* 移动端区域内边距 */
  section {
    padding: var(--spacing-10) 0;
  }

  /* 移动端按钮 - 确保触摸目标至少44x44px (需求 3.5) */
  .btn {
    min-height: var(--touch-target-min);
    padding: var(--spacing-3) var(--spacing-6);
  }

  /* 移动端导航链接 - 确保触摸目标 */
  .nav-link {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
  }

  /* 移动端Hero区域 */
  .hero {
    padding: var(--spacing-12) 0;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-description {
    font-size: var(--font-size-sm);
  }

  /* 移动端功能卡片 */
  .features-grid {
    gap: var(--spacing-4);
  }

  .feature-card {
    padding: var(--spacing-5);
  }

  /* 移动端场景卡片 */
  .scenarios-grid {
    gap: var(--spacing-4);
  }
}

/* ========== 平板端样式 (768px - 1199px) ========== */

@media (min-width: 768px) and (max-width: 1199px) {
  /* 平板端容器 */
  .container {
    padding: 0 var(--spacing-6);
  }

  /* 平板端功能网格 - 2列 */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 平板端场景网格 - 2列 */
  .scenarios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========== 桌面端样式 (≥1200px) ========== */

@media (min-width: 1200px) {
  /* 桌面端容器 */
  .container {
    padding: 0 var(--spacing-8);
  }

  /* 桌面端功能网格 - 3列 */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 桌面端场景网格 - 3列 */
  .scenarios-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 桌面端Hero区域 */
  .hero {
    padding: var(--spacing-32) 0;
  }

  /* 桌面端区域内边距 */
  section {
    padding: var(--spacing-24) 0;
  }
}

/* ========== 超大屏幕优化 (≥1440px) ========== */

@media (min-width: 1440px) {
  /* 限制容器最大宽度，保持内容可读性 */
  .container {
    max-width: 1400px;
  }

  /* 增加区域内边距 */
  section {
    padding: var(--spacing-32) 0;
  }
}

/* ========== 打印样式 ========== */

@media print {
  /* 隐藏导航和页脚 */
  .header,
  .footer {
    display: none;
  }

  /* 移除固定定位 */
  body {
    padding-top: 0;
  }

  /* 优化打印布局 */
  section {
    page-break-inside: avoid;
  }

  /* 移除阴影和动画 */
  * {
    box-shadow: none !important;
    transition: none !important;
  }
}

/* ========== 减少动画偏好 ========== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== 高对比度模式 ========== */

@media (prefers-contrast: high) {
  :root {
    --color-text-primary: #000000;
    --color-text-secondary: #000000;
    --color-bg-primary: #ffffff;
  }

  .nav-link:focus,
  .btn:focus,
  .footer-nav a:focus {
    outline-width: 3px;
  }
}