/* 站点级覆盖（2026-11-12）：
 * 模板 trade.css 的页脚多列规则写的是
 *   grid-template-columns: 1.6fr repeat(auto-fit, minmax(160px, 1fr));
 * 「已有 fr 轨道 + auto-fit repeat」是非法组合，浏览器会丢弃整条声明，
 * 结果页脚在所有宽度下都退化成单列（一栏一栏往下堆，页面被拉得很长）。
 * 这里用合法写法覆盖；选择器提高到 .tr-footer .tr-footer__grid，
 * 因为本文件在 <head> 里排在 _astro 打包 CSS 之前，必须靠更高优先级生效。
 */

/* 手机 / 平板：两列，品牌介绍独占整行 —— 4 个栏目 2×2，页脚不再无限拉长 */
.tr-footer .tr-footer__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
}

.tr-footer .tr-footer__grid > :first-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .tr-footer .tr-footer__grid {
    gap: 2rem;
  }
}

/* 桌面：品牌介绍 + 4 个栏目，一行五列 */
@media (min-width: 1024px) {
  .tr-footer .tr-footer__grid {
    grid-template-columns: 1.7fr repeat(4, minmax(140px, 1fr));
  }

  .tr-footer .tr-footer__grid > :first-child {
    grid-column: auto;
  }
}

/* About 页「13+ Years」装饰徽章在窄屏向右外挑 24px，会撑出横向滚动条：小屏贴边放 */
@media (max-width: 640px) {
  .absolute.-bottom-6.-right-6.bg-white {
    right: 0;
  }
}

/* WhatsApp 浮窗样式已内联进 LegacyPage 的 <head>（2026-11-13），不再放在这里：
 * 源站对静态资源 max-age=43200，放外部文件会出现「HTML 已更新、CSS 还是旧的」，
 * 有结构没样式时无尺寸的 <svg> 会被模板 svg{max-width:100%} 拉成 1394px 巨型图标。 */

/* 长英文词不撑破窄屏视口：break-word 只在放不下时才断词，不影响 min-content，
 * 布局其余部分不变。2026-11-13 修：About 时间线 2020 条文案的长单词撑出 0.6px，
 * 移动端出现横向滚动条（scrollWidth 391 > 390）。 */
body {
  overflow-wrap: break-word;
}