/* assets/css/responsive.css — 全站断点：1020 / 960 / 860 / 680。
   桌面优先：基础样式写宽屏布局，这里一律用 max-width 覆盖式降级。
   960 是"移动导航总开关"，与 main.js 里的 matchMedia 断点必须同值。
   版块专属断点写在各 section 文件内，不放这里（那些规则只有该页加载）。 */

/* ============ ≤1020：多列网格降为两列 ============ */
@media (max-width:1020px){
  .band{ padding-block:72px; }
  .hero-grid{ grid-template-columns:1fr; gap:40px; padding-block:72px 84px; }
  .hero-title{ font-size:42px; }
  .card-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .card-grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* 6 轨道网格的跨列规则在窄屏下全部撤销，回到自动放置 */
  .card-grid--3 > *,
  .card-grid--3 > :nth-last-child(2):nth-child(3n+1),
  .card-grid--3 > :last-child:nth-child(3n+2),
  .card-grid--3 > :last-child:nth-child(3n+1){ grid-column:auto; }
  .sec-head{ margin-bottom:40px; }
  .sec-head h2{ font-size:29px; }
  .foot-in{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ============ ≤960：移动导航总开关 ============ */
@media (max-width:960px){
  .head-in{ gap:16px; }
  .nav-toggle{ display:flex; margin-left:auto; }

  /* 导航整体变为下拉面板：绝对定位在页头之下，独立滚动 */
  .head-nav{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    margin-left:0; padding:6px 24px 18px;
    background:var(--surface); border-bottom:1px solid var(--line);
    max-height:calc(100dvh - 68px); overflow-y:auto;
    box-shadow:0 20px 34px -26px rgba(15,35,56,.45);
  }
  .site-head.nav-open .head-nav{ display:flex; }

  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-list a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-list a::after{ display:none; }
  .nav-list a[aria-current="page"]{ color:var(--cinnabar); }

  .head-actions{ flex-direction:column; align-items:stretch; gap:10px; margin-top:16px; }
  .head-actions .btn{ width:100%; padding:13px 20px; font-size:15px; }

}

/* ============ ≤860：小屏排版 ============ */
@media (max-width:860px){
  .band{ padding-block:64px; }
  .sec-head h2{ font-size:27px; }
  .hero-title{ font-size:38px; }
  .cta h2{ font-size:29px; }
}

/* ============ ≤680：手机档 ============ */
@media (max-width:680px){
  .band{ padding-block:56px; }
  .wrap,.wrap-wide{ padding-inline:20px; }

  .hero-grid{ padding-block:56px 64px; gap:32px; }
  .hero-title{ font-size:33px; }
  .hero-lead,.page-lead{ font-size:16px; }
  .hero-actions .btn,.page-actions .btn,.cta-actions .btn{ width:100%; }

  .card-grid--2,.card-grid--3,.card-grid--4{ grid-template-columns:1fr; }
  .card-grid--3 > *,
  .card-grid--3 > :nth-last-child(2):nth-child(3n+1),
  .card-grid--3 > :last-child:nth-child(3n+2),
  .card-grid--3 > :last-child:nth-child(3n+1){ grid-column:auto; }
  .card{ padding:22px 20px; }
  .card-grid--joined .card{ border-right:1px solid var(--line); border-bottom:0; }
  .card-grid--joined .card:last-child{ border-bottom:1px solid var(--line); }

  .sec-head{ margin-bottom:32px; }
  .sec-head h2{ font-size:25px; }
  .cta .wrap{ padding-block:56px; }
  .cta h2{ font-size:25px; }

  .foot-in{ grid-template-columns:1fr; gap:32px; }
  .foot-legal{ margin-top:32px; }
  .foot-legal .sp{ margin-left:0; }
}

/* ============ 打印与动效的兜底（各文件内已有局部处理，这里是全站级） ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}