/* =============================================================
 * responsive.css —— 断点策略与移动端适配
 * 断点：1230（两栏→单栏） / 1100（Hero 缩进） / 860（导航折叠为汉堡）
 *        / 640（手机精修） / 480（超小屏）
 * 原则：桌面优先，向下渐进增强；所有断点只调整布局与字号，不动视觉语言。
 * ============================================================= */

/* 汉堡按钮：默认隐藏，860px 以下显示 */
.nav-toggle{
  display:none;
  width:42px; height:42px; border:1px solid var(--line); border-radius:10px;
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  cursor:pointer; position:relative; flex:0 0 auto;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after{
  content:""; position:absolute; left:50%; top:50%;
  width:18px; height:2px; background:var(--txt); border-radius:2px;
  transform:translate(-50%,-50%); transition:transform .25s var(--ease),opacity .2s;
}
.nav-toggle-bar::before{ transform:translate(-50%,-7px); }
.nav-toggle-bar::after{ transform:translate(-50%,5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{ transform:translate(-50%,0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{ transform:translate(-50%,0) rotate(-45deg); }

/* 移动端下拉菜单：默认隐藏 */
.mobile-menu{
  display:none;
  flex-direction:column; gap:2px;
  padding:10px var(--wrap-pad) 16px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu:not([hidden]){ display:flex; }
.mobile-menu a{
  padding:13px 6px; font-size:15px; color:var(--txt-2);
  border-bottom:1px solid var(--line); transition:color .2s;
}
.mobile-menu a:hover,.mobile-menu a.active{ color:var(--txt); }
.mobile-lang{ display:flex; gap:14px; padding-top:14px; color:var(--txt-2); font-size:13px; }

/* ===================== 1230px：双栏 → 单栏 ===================== */
@media (max-width:1230px){
  .detail{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .story-gallery{ grid-template-columns:repeat(2,1fr); }
  .elem-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ===================== 1100px：Hero 缩进 + 规格表放大 ===================== */
@media (max-width:1100px){
  .hero{ min-height:580px; }
  .hero-grid{ padding:76px 0 44px; }
  .hero-copy h1{ font-size:44px; }
  .hero-scrim{
    background:
      linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.52) 55%, rgba(0,0,0,.28) 100%),
      linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 55%);
  }
  .spec-table .row{ padding:16px 20px; font-size:16px; }
  .spec-table .row .v{ font-size:16px; }
  .spec-table .row .k .si{ font-size:16px; }
}

/* ===================== 860px：导航折叠为汉堡 ===================== */
@media (max-width:860px){
  .menu{ display:none; }
  .lang{ display:none; }
  .nav-toggle{ display:block; }
  .wrap{ padding:0 18px; }
  .section{ padding:80px 0; }
  .section h2{ font-size:28px; }
  .hero-copy h1{ font-size:38px; }
  .about-grid{ grid-template-columns:1fr; }
  .banner{ height:200px; padding:28px; }
  .story-gallery{ grid-template-columns:1fr; }
  .elem-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ===================== 640px：手机精修 ===================== */
@media (max-width:640px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .spec-table .row{ padding:14px 16px; font-size:15px; gap:12px; }
  .spec-table .row .v{ font-size:15px; }
  .spec-table .row .k .si{ font-size:15px; }
  .credits,.guarantee{ padding:20px 18px; }
  .credits h4,.guarantee h4{ font-size:18px; margin-bottom:14px; }
  .cr{ font-size:15px; gap:10px; }
  .guarantee li{ font-size:15px; line-height:1.65; gap:10px; }
  .guarantee li::before{ font-size:15px; line-height:1.65; }
  .guarantee .gameplay-note{ font-size:14px; line-height:1.7; }
  .copyright{ font-size:13px; padding:12px 14px; }
  .proto-note{ font-size:13px; }
  .disc-head h3{ font-size:24px; }
  .disc-tag{ font-size:13px; padding:6px 14px; }

  /* ============== Hero 移动端：图文改为纵向堆叠（文字在上 / 轮播在下） ==============
     【关键改动 1 · 布局结构】
     原实现：.hero-media 是 position:absolute; inset:0 —— 轮播铺满整个 hero 当背景，
     文字层 .hero-grid 靠 z-index:3 压在图上。手机上就成了「文字盖住产品图」，
     图看不全、字又压在暗角渐变上，两者互相挤占。
     改法：移动端取消绝对定位，两者回到正常文档流，
     用 flex column + order 让「文字 order:1 在上、轮播 order:2 在下」，互不遮挡。
     桌面端（>640）不受本段影响，仍保持原有的「图铺底 + 文字压图」横向构图。 */
  .hero{
    min-height:auto;
    display:flex;
    flex-direction:column;   /* 纵向堆叠 */
    align-items:stretch;     /* 原 align-items:flex-end 会让子项宽度塌成内容宽，必须改 stretch */
  }
  .hero-media{
    position:relative;       /* 取消 absolute，回到文档流 */
    inset:auto;              /* 清掉 inset:0，否则 relative 下仍会偏移 */
    z-index:auto;
    order:2;                 /* 轮播排到文字下方 */
    width:100%;
    /* relative 之后必须自己给高度：内部 .gallery-fill 是 absolute inset:0，
       父级没高度就会塌成 0，整张轮播消失。按视口比例给，超高屏封顶 340px。 */
    height:min(86vw, 340px);
    margin:18px 0 30px;      /* 上：与文字块的间距；下：与 hero 下边框的留白 */
  }
  .hero-scrim{ display:none; }   /* 文字已不在图上，压暗渐变只会让整块图发灰 */

  .hero-grid{
    order:1;                 /* 文字排到轮播上方 */
    position:relative;
    z-index:auto;            /* 不再需要与轮播层比层级 */
    padding:26px 0 0;        /* 原 96px 上边距是为了躲开铺满背景的轮播图，现在收到 26px */
  }

  /* ============== 【关键改动 2 · 文字层级排版】 ==============
     小屏下重建层级：主标题 26 / 正文 14 / 参数值 13.5 / 眉标与参数名 11，
     靠「字号 + 字重 + 字距 + 行高」拉开层次，而不是靠一味放大。文案与机甲风格不变。 */
  .hero-copy{ max-width:100%; }
  .hero-copy .eyebrow{
    font-size:11px;
    font-weight:800;         /* 小字靠字重立住，别靠放大 */
    letter-spacing:.1em;     /* 英文眉标放宽字距，更像机甲 HUD 标签 */
    padding:5px 11px;
    margin-bottom:12px;
  }
  .hero-copy h1{
    font-size:26px;          /* 30 → 26：三行标题在 360px 宽下不再顶满整屏 */
    line-height:1.3;         /* 多行标题放宽行高，换行之间不粘连 */
    letter-spacing:-.2px;    /* 大字号略微收紧字距，收得更利落 */
    margin:4px 0 14px;
    font-weight:900;         /* 保持机甲主题的厚重感 */
  }
  .hero-copy .lead{
    font-size:14px;          /* 正文不与主标题抢分量 */
    line-height:1.8;         /* 小屏正文放宽行高，长段落更好读 */
    margin:0 0 18px;
    max-width:100%;          /* 解除 500px 限制，避免窄屏白白折行 */
  }
  .hero-meta{
    gap:8px;
    margin-bottom:16px;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .hero-meta .item{ min-width:0; padding:10px 12px; }
  .hero-meta .item:first-child{ grid-column:1 / -1; }   /* 第 1 个（材质）满宽一行 */
  .hero-meta .k{ font-size:11px; letter-spacing:.05em; font-weight:600; }
  .hero-meta .v{ font-size:13.5px; font-weight:700; }
  /* ============== 【关键改动 3 · 触控区】 ============== */
  .hero-cta{ gap:10px; flex-direction:column; align-items:stretch; }
  .hero-cta .btn-lg{
    padding:15px 16px;       /* 上下 15 + 行高 → 实测约 52px，超过 44px 触控建议值 */
    font-size:15px;
    font-weight:700;
    gap:8px;
    width:100%;              /* 满宽按钮，拇指最容易点到 */
  }
  .hero-cta-hint{ font-size:11px; letter-spacing:.03em; text-align:center; }

  /* ============== gallery：移动端隐藏 prev/next，依赖 swipe（gallery.js 已挂 touchstart/touchend） ============== */
  .gallery .arrow{ display:none; }
  /* 移动端箭头隐藏，圆点成了唯一的切图入口，必须给足可点面积：
     视觉圆点放大到 9px（原来 7px），并把间距从 6 提到 14，
     配合 components.css 里 28×40 的透明命中区，手指才点得中。 */
  .gallery .dots{ bottom:10px; gap:14px; }
  .gallery .dots .dot{ width:9px; height:9px; }
  .gallery .dots .dot.active{ width:20px; }

  /* ============== 周边轮播：压缩箭头占位，让卡片完整显示 ============== */
  /* 原缺陷：箭头 44×2 + gap 14×2 共占 116px，把 .carousel-viewport 挤到约 223px，
     而卡片宽 78vw(≈293px)，右侧约 39% 被 overflow:hidden 裁掉（价格/文字看不到）。
     改法：缩小箭头与间距，卡片宽度改为按视口比例自适应，整卡可见且右侧露出下一张作滑动暗示。 */
  .merch-carousel{ gap:10px; }
  .carousel-arrow{ width:34px; height:34px; font-size:19px; }
  .carousel-track{ padding:12px; gap:12px; }
  .carousel-slide{ width:min(300px, 62vw); }
  /* 弹窗内款图：3 列在窄屏每格只有 86px，改 2 列看得清 */
  .merch-gallery{ grid-template-columns:repeat(2,1fr); gap:10px; }
  /* ============== fcta：移动端改造成「红色 FAB + 底部 sheet」 ============== */
  .floating-cta{ right:12px; bottom:12px; gap:8px; }
  .fcta-toggle{
    width:54px; height:54px; min-width:0;
    padding:0;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    border:2px solid color-mix(in srgb, #fff 38%, transparent);
    font-size:24px;
    box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 6px rgba(0,0,0,.35);
    z-index:81;
  }
  .fcta-toggle:hover{
    transform:translateY(-2px) scale(1.04);
    color:#fff;
    border-color:color-mix(in srgb, #fff 60%, transparent);
  }
  .fcta-toggle .fcta-toggle-icon{ font-weight:300; line-height:1; }
  /* panel 改为底部 sheet：fixed + bottom + 左右充满 + 上圆角 */
  .fcta-panel{
    position:fixed;
    left:12px; right:12px; bottom:80px;
    width:auto;
    padding:16px;
    margin:0;
    border-radius:var(--r-lg);
    transform-origin:bottom right;
  }
  .fcta-panel:not(.open){ display:none; }   /* 折起时彻底隐藏 */
  .fcta-head{ margin-bottom:4px; }
  .fcta-title{ font-size:12px; }
  .fcta-btn{ padding:14px 15px; font-size:14px; }
  .fcta-btn .ico{ width:28px; height:28px; font-size:17px; }
  .fcta-foot{ font-size:10px; }

  /* 模态框手机适配 */
  .modal-panel{ width:96vw; max-height:92vh; }
  .modal-head{ padding:14px 16px; }
  .modal-head h3{ font-size:16px; }
  .modal-desc,.modal-body,.modal-foot{ padding-left:16px; padding-right:16px; }
  .spec-row-edit{ grid-template-columns:24px 1fr 1.5fr 28px; gap:6px; padding:6px 8px; }
  .spec-row-edit .k-in,.spec-row-edit .v-in{ font-size:12px; padding:5px 6px; }
  .fav-item{ grid-template-columns:36px 1fr auto; gap:8px; padding:10px; }
  .fav-item .fav-icon{ width:36px; height:36px; font-size:18px; }
}

/* ===================== 480px：超小屏微调 ===================== */
@media (max-width:480px){
  /* 超小屏主标题再降一档（须与 640 段的 26px 同步下调，否则本段后定义会把它盖回 28px） */
  .hero-copy h1{ font-size:24px; }
  .hero-media{ height:min(88vw, 300px); }   /* 窄屏轮播同步收一点，别把首屏顶出太多 */
  .hero-meta{ gap:10px; }
  .hero-meta .item{ min-width:84px; padding:11px 14px; }
  /* 78vw 是按「整屏宽」算的，但轮播视口两侧还有箭头与 track 内边距，
     会导致卡片被裁切。改用视口比例较小的取值，保证整卡完整可见。 */
  .carousel-slide{ width:min(300px, 54vw); }
  .carousel-track{ padding:12px; gap:12px; }
  .about-grid{ gap:16px; }
  .about-card{ padding:20px; }
}