/* 响应式断点优化
   注意：.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 端（含笔记本 2K / 1080 / 4K）：统一左右内边距，与 rem 版心一致（1920 下 1rem≈100px，随视口等比缩放） */
@media (min-width: 1025px) {
  .container,
  .header-content {
    padding: 0 1rem;
  }

  /* 业务下拉：勿用 .container，见 header.css .navigation-panel；此处仅同步横向内边距变量 */
  .navigation .navigation-panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--nav-panel-pad-x, 0.24rem);
    padding-right: var(--nav-panel-pad-x, 0.24rem);
  }
}

/*
  小屏笔记本（adapter-manager.js 中对根字号再 ×1.3）时，19.2rem 会超过视口宽度。
  用 min() 限制最小布局宽度，避免 min-width: 19.2rem 撑出横向滚动。
  断点需与 JS 中 SMALL_LAPTOP_VIEWPORT_MAX 一致。
*/
@media (min-width: 1025px) and (max-width: 1680px) {
  .page-about,
  .page-cases,
  .page-cases-details,
  .page-news-details,
  .page-contact {
    min-width: min(19.2rem, 100vw);
  }
}

/* 高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;
  }
}