/* ===================================================================
   移动端硬规则 v3.0（SOP §25.8.2）+ §25.8.2.1 内联 <style> 后写后赢补丁
   触发顺序：≤1024 → 平板双列+1列布局；≤768 → 收紧；≤640 → 手机单列+汉堡
   =================================================================== */

/* 平板 ≤1024：双列网格 + 文章单列 + 隐藏 TOC
   【!important 必加】内联 <style> 在 <link rel=stylesheet> 之后加载，
   且与 .layout 选择器 specificity 相同（都是 0,1,0），
   source order 在后者胜出 → 媒体查询里的 1fr 会被桌面 260px 1fr 覆盖，
   实测 columns 会渲染成 "260px 46px"，文章被挤窄。补 !important 后置策略。 */
@media (max-width: 1024px) {
  .layout { grid-template-columns: 1fr !important; gap: 28px; padding: 28px 20px; }
  .toc { display: none !important; }
  .line-grid, .app-grid, .card-grid, .product-grid, .guide-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hero h1 { font-size: 34px; line-height: 1.3; }
  .section { padding: 44px 0; }
  .section h2.title { font-size: 24px; }
}

/* 中型屏 ≤768：进一步收紧（守住 768-640 这段"半平板"区段） */
@media (max-width: 768px) {
  .wrap { padding: 0 16px; }
  .line-grid, .app-grid, .card-grid, .product-grid, .guide-grid { gap: 14px; }
  .article-grid { gap: 14px; }
  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: 28px; }
  .hero .sub { font-size: 16px; }
  .hero-stats { gap: 22px; }
  .hero.media .wrap.hero-media { flex-direction: column; gap: 24px; }
  .hero.side .wrap.hero-side { flex-direction: column; gap: 24px; }
  .hero.cover .wrap { padding: 0 16px; }
  .hero.cover .cover-card { padding: 28px; }
  .hero.cta h1 { font-size: 34px; }
  .hero.side .si { padding: 12px 0; }
  .feature-row { flex-direction: column; gap: 16px; }
  .feature-row.reverse .fr-media { order: 0; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* 手机 ≤640：单列网格 + 汉堡菜单 + 紧凑品牌 */
@media (max-width: 640px) {
  /* === 导航：桌面四项链接收起，显示汉堡按钮 === */
  .nav-default { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  .nav .wrap { height: 56px; gap: 8px; padding: 0 16px; }
  /* 品牌压缩：只显示 logo + 短主名（隐藏完整子域后缀） */
  .brand { font-size: 16px; gap: 6px; min-width: 0; flex: 1; overflow: hidden; }
  .brand .logo-img { height: 30px; flex-shrink: 0; }
  .brand-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-subdomain { display: none !important; }

  /* === 主体单列 === */
  .line-grid, .app-grid, .card-grid, .product-grid, .guide-grid, .article-grid {
    grid-template-columns: 1fr !important; gap: 14px; }

  /* === Hero === */
  .hero { padding: 28px 0 24px; }
  .hero h1 { font-size: 22px; line-height: 1.4; margin: 0 0 12px; }
  .hero .sub { font-size: 14px; line-height: 1.7; }
  .hero .cta { gap: 10px; margin-top: 18px; }
  .hero .cta .btn { padding: 10px 18px; font-size: 13px; }
  .hero-stats { flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 22px; }
  .hero-stats .s { display: flex; gap: 12px; align-items: baseline; }
  .hero-stats .s b { font-size: 22px; }
  .hero-stats .s span { font-size: 12px; }

  /* === Section === */
  .section { padding: 32px 0; }
  .section h2.title { font-size: 20px; margin: 0 0 6px; }
  .section .lead { font-size: 13px; line-height: 1.7; margin: 0 0 18px; }

  /* === Cards / FAQ === */
  .card { padding: 16px 16px; border-radius: 12px; }
  .card h3 { font-size: 16px; }
  .card p { font-size: 13px; line-height: 1.7; }
  .faq-item { padding: 14px 16px; margin-bottom: 10px; border-radius: 10px; }
  .faq-item h3 { font-size: 15px; }
  .faq-item p { font-size: 13px; line-height: 1.7; }

  /* === Article body === */
  /* 同 §25.8.2.1：内联 <style> 的 .layout grid-template-columns 会被覆盖回 260px 1fr，
     此处 !important 复述一次，确保 ≤640 仍单列铺满 */
  .layout { grid-template-columns: 1fr !important; padding: 18px 14px; gap: 0; }
  .article-title { font-size: 22px !important; line-height: 1.35; margin: 0 0 10px; }
  .article-body { padding: 18px 18px !important; }
  .article-body .meta { font-size: 12px; margin-bottom: 18px; }
  .article-body h2 { font-size: 19px !important; line-height: 1.4; margin: 24px 0 10px; padding-top: 12px; }
  .article-body h3 { font-size: 17px; margin: 18px 0 8px; }
  .article-body p { font-size: 15px; line-height: 1.85; margin: 0 0 14px; }
  .article-body li { font-size: 15px; line-height: 1.8; }
  .article-body table { font-size: 13px; }
  .article-body td, .article-body th { padding: 8px 10px; }

  /* === Spec table === */
  table.spec td { padding: 10px 12px; font-size: 13px; }
  table.spec td:first-child { width: 130px; font-size: 12px; }

  /* === Hero button === */
  .btn { padding: 10px 18px; font-size: 14px; border-radius: 8px; }

  /* === 新增 hero 变体移动端 === */
  .hero.bg h1 { font-size: 26px; }
  .hero-statband { gap: 10px; }
  .hero-statband .s { min-width: 108px; padding: 10px 12px; }
  .hero.media .hero-panel-grid { grid-template-columns: 1fr; }
  .hero.cta h1 { font-size: 26px; }
  .hero.cover .cover-card { padding: 22px; border-radius: 14px; }
  .hero.side .si b { font-size: 18px; }
  .hero.side .si span { font-size: 12px; }
  .feature-row .fr-media { width: 100%; aspect-ratio: 16/9; }

  /* === Footer === */
  .footer { padding: 22px 0; font-size: 12px; margin-top: 24px; }
  .footer .wrap { flex-direction: column; gap: 14px; }
  .footer .f-brand { font-size: 13px; }
  .footer .f-meta { font-size: 11px; }
  .footer .f-links { gap: 14px; }
  .footer .f-links a, .footer .f-links .email-slot { font-size: 12px; }

  /* === Float bar 紧凑 === */
  .float-bar { right: 12px; bottom: 12px; gap: 10px; }
  .float-bar a.fb, .float-bar button { width: 46px; height: 46px; font-size: 11px; }
  .float-bar img, .float-bar svg { width: 22px; height: 22px; }

  /* === 微信弹窗收紧（v2 兜底） === */
  .wechat-modal { max-width: 92vw; padding: 22px 18px 18px; border-radius: 16px; }
  .wechat-modal h4 { font-size: 15px; }
  .wechat-modal img { width: 240px !important; max-width: 76vw; }
  .wechat-modal .hint { font-size: 12px; }

  /* 兜底：禁止任何全局 overflow 撑破 viewport */
  html, body { overflow-x: hidden; }
  h1, h2, h3, p, li, td, th { overflow-wrap: anywhere; word-break: break-word; }
}