/* =========================================================================
   responsive.css —— 断点适配
   -------------------------------------------------------------------------
   ≤940px：三栏转单栏、角色墙转 3 列、导航隐藏、变量收窄
   ≤600px：角色墙转 2 列、按钮纵向排列
   ⚠️ 最后加载，所以这里的规则能覆盖前面所有文件。
   ========================================================================= */

/* ==================== 响应式 ==================== */
@media (max-width: 940px) {
  /* 窄屏收紧留白与字号；仍保留上下限，避免极端尺寸下过大过小 */
  :root {
    --gap-section: clamp(64px, 8vh, 96px);
    --gap-lg: 32px;
    --topbar-h: 64px;

    /* 窄屏下 vw 基准会偏小，改用以 vh 为主、保证可读性 */
    --fs-base:  clamp(15px, 4vw, 17px);
    --fs-sm:    clamp(13px, 3.4vw, 15px);
    --fs-xs:    clamp(11px, 3vw, 13px);
    --fs-card:  clamp(17px, 4.4vw, 20px);
    --fs-h3:    clamp(18px, 4.6vw, 22px);
    --fs-btn:   clamp(14px, 3.6vw, 16px);

    --h-char:   clamp(200px, 28vh, 300px);
    --h-media:  clamp(220px, 32vh, 340px);
    --pad-card: clamp(20px, 5vw, 28px);
  }

  .grid-3 { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr 1fr; }
  /* 角色墙：5 列 -> 3 列 */
  .char-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--gap-md); }

  /* ---- 窄屏导航：收进汉堡菜单 ----
     宽屏那排横导航在手机上放不下（6 项），所以改成：
     顶栏右上汉堡按钮 + 面板从顶栏下方展开。
     面板是 .topbar（position: sticky，本身是定位祖先）的绝对定位子元素，
     所以 top:100% 正好贴在顶栏下沿、left/right:0 撑满整条顶栏。 */
  .nav-toggle { display: flex; }

  .topnav {
    display: none;                 /* 默认收起 */
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--gap-sm) 0;
    /* 面板底色要够实：0.97 时背后的首屏大标题会透出来，像渲染坏了。
       这里用接近不透明的深色 + 模糊，保留一点玻璃感但不透字。 */
    background: rgba(8, 9, 15, .985);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .95);
    /* 展开时轻微下滑进场 */
    transform-origin: top center;
  }
  .topbar.nav-open .topnav { display: flex; animation: nav-drop .22s cubic-bezier(.22,.61,.36,1); }

  .topnav a {
    padding: 14px 24px;
    font-size: var(--fs-base);
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
  }
  .topnav a:last-child { border-bottom: 0; }

  /* 汉堡面板里：公告做成整行按钮，点起来更明确 */
  /* 子页（team / announcements / privacy）只有「返回首页」，没有汉堡按钮：
     窄屏下保留这一条链接，否则手机上就没有回家入口了 */
  .page-simple .topnav {
    display: flex;
    position: static;
    background: none;
    backdrop-filter: none;
    border: 0;
    padding: 0;
    box-shadow: none;
    gap: 0;
  }
  .page-simple .topnav a {
    padding: 6px 2px;
    border-bottom: 0;
    font-size: var(--fs-sm);
  }

  .topnav a.nav-page {
    margin: 10px 20px 12px;
    padding: 12px 16px;
    border-bottom: 0;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 24px -12px var(--accent-glow);
  }
  /* 移动端不需要那条悬停下划线 */
  .topnav a::after { display: none; }
  .topnav a.active { color: var(--text); }

  @keyframes nav-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  .hero { padding: clamp(80px, 12vh, 120px) 0 clamp(56px, 8vh, 90px); }
  .footer-inner { flex-direction: column; }

  /* 窄屏首屏：3:4 竖版首屏图按高度撑开后比屏幕还宽，
     标题与说明会直接压在人物脸上。这里压低图片存在感、
     加深压暗层，保证文字可读（宽屏不受影响）。 */
  .hero-bg::before { opacity: .42; }
  .hero-bg::after {
    background: linear-gradient(
      100deg,
      rgba(8, 9, 15, .95) 0%,
      rgba(8, 9, 15, .90) 45%,
      rgba(8, 9, 15, .78) 100%
    );
  }
}

@media (max-width: 600px) {
  .media-grid { grid-template-columns: 1fr; }
  /* 角色墙：3 列 -> 2 列（手机上两列比一列好看，也不至于太长） */
  .char-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-sm); }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { text-align: center; }
}