/* 响应式断点优化
   注意：.page-app 使用 app.css 中的专用响应式，避免此处全局规则干扰 */

/* 移动端断点 */
@media (max-width: 480px) {
  .container,
  .header-content {
    padding: 0 15px;
  }

  .nav {
    display: none;
  }

  .header-phone {
    display: none;
  }

  /* app.html 自带 hero 移动端样式，此处不干预 */
}

/* 平板端断点 */
@media (min-width: 481px) and (max-width: 1024px) {
  .container,
  .header-content {
    padding: 0 30px;
  }

  .nav {
    flex-wrap: wrap;
  }

  .nav-link {
    margin: 0 10px;
  }
}

/* 小屏幕PC端断点 */
@media (min-width: 1025px) and (max-width: 1200px) {
  .container,
  .header-content {
    padding: 0 80px;
  }

  .nav-link {
    margin: 0 15px;
  }
}

/* 中等屏幕PC端断点 */
@media (min-width: 1201px) and (max-width: 1920px) {
  .container,
  .header-content {
    padding: 0 100px;
  }
}

/* 大屏幕PC端断点（2K / 4K） */
@media (min-width: 1921px) {
  .container,
  .header-content {
    padding: 0 100px;
  }
  .navigation .container {
    padding: 0 100px;
  }
}

/* 高DPI屏幕适配 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* 横屏模式适配 */
@media (orientation: landscape) {
  /* 排除 app.html，其 hero 有独立高度控制 */
}

/* 竖屏模式适配 */
@media (orientation: portrait) {
  /* 排除 app.html，其 hero 有独立高度控制 */
}

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

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #ffffff;
  }

  .header {
    background-color: #2d2d2d;
  }

  .nav-link {
    color: #ffffff;
  }
}