/* ============================================================
   responsive.css —— 响应式适配（桌面 / 平板 / 手机 H5）
   默认样式为桌面，以下为逐级收窄的覆盖
   ============================================================ */

/* ---------------- 窄平板 ≤880px ---------------- */
@media (max-width: 880px) {
  .about-body {
    grid-template-columns: 1fr;     /* 关于：图文堆叠 */
  }
  .about-img {
    max-width: 440px;
    margin: 0 auto;                 /* 竖版主图居中，避免过大 */
  }
  .cat-images--two {
    grid-template-columns: 1fr;     /* 双图改单列 */
    max-width: 760px;
  }
}

/* ---------------- 手机 H5 ≤768px ---------------- */
@media (max-width: 768px) {
  /* 顶栏：显示汉堡，主导航变右侧抽屉 */
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    width: min(78vw, 320px);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 28px;
    background: var(--bg);
    box-shadow: -12px 0 44px rgba(43, 43, 43, 0.16);
    transform: translateX(100%);
    transition: transform var(--ease);
  }
  .nav.open { transform: translateX(0); }
  .nav-link {
    width: 100%;
    padding: 16px 0;
    font-size: 1.12rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-link::after { display: none; }

  /* 分类导航：横向滚动 */
  .menu-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 12px 16px;
  }
  .menu-nav::-webkit-scrollbar { display: none; }

  /* 分类标题：允许换行，去掉延伸线 */
  .cat-banner {
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .cat-banner::after { display: none; }

  /* Lightbox 控件缩小、靠边 */
  .lb-img { max-width: 96vw; max-height: 80vh; }
  .lb-nav { width: 44px; height: 44px; font-size: 1.9rem; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-close { top: 12px; right: 14px; width: 44px; height: 44px; font-size: 1.7rem; }
  .lb-caption { bottom: 14px; font-size: 0.85rem; padding: 6px 16px; }

  /* hover 角标在触屏无意义，隐藏 */
  .menu-figure::after { display: none; }

  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ---------------- 小手机 ≤600px ---------------- */
@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;     /* 页脚单列 */
    text-align: center;
  }
  .footer-logo { margin-left: auto; margin-right: auto; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
}

/* ---------------- 超窄屏 ≤420px ---------------- */
@media (max-width: 420px) {
  .header-inner { padding: 0 16px; }
  .brand-en { display: none; }       /* 极窄屏隐藏品牌英文小字 */
  .brand-logo { width: 42px; height: 42px; }
  .cat-images { padding-left: 16px; padding-right: 16px; }
  .cat-banner { padding-left: 16px; padding-right: 16px; }
}

/* ---------------- 减少动效偏好（无障碍） ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}