/* ============================================================================
 * public/css/footer-shared.css —— 内页用的「首页同款页脚」样式
 *
 * 为什么单开一份：
 *   客户要内页底部与首页完全一致（`<footer class="ft">`，6 列导航 + 联系信息 + 备案条）。
 *   但首页那套样式在 `home.css` 里，而 `home.css` **不能给内页加载** ——
 *   两套设计同名类 15 个（hero 系列、brand、btn-more、wrap、pic、tag、date、d、qr、bar），
 *   且旧表（proto.css）的全局 reset 会改掉新设计依赖的 UA 内边距（见 MEMORY）。
 *   ⇒ 只把 `.ft` 这一支**逐字抄出来**，加 `.ft` 作用域与容器兜底，内页单独挂这一张。
 *   2026-10-28 起本文件**还承载 `.to-top`**（返回顶部按钮）：内页原来用的是打包 CSS 里的旧
 *   `.back-top`（46×46 红方块），客户要求与首页一致 ⇒ 内页组件换成 `HomeToTop`，
 *   样式从 home.css 抄到本文件（见下面 "返回顶部" 那段）。
 *
 * 与 home.css 的差异只有三处，都是为了"内页没有 home.css 的变量/容器"：
 *   ① `.ft .wrap` 自己给容器宽度（首页靠 `--wrap:1344px` 与全局 `.wrap`）；
 *   ② `--ease` 换成等值字面量（内页没有这个变量，未定义会让整条 transition 失效）；
 *   ③ 其余声明**一个字没动**（含 1100 / 1280 / 767 三个断点）。
 * 改首页页脚样式时，这里要同步 —— 或直接把两份都从 home.css 抽。
 * ========================================================================== */

.ft {
  background: #1a1a1a;
  color: #fff;
  padding: 56px 0 0;
}

/* 容器：等价于 home.css 的 `.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}` */
.ft .wrap {
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
  padding: 0 24px;
}

.ft-main { display: flex; justify-content: space-between; gap: 44px; }
.ft-links { display: grid; grid-template-columns: repeat(6, minmax(0, auto)); gap: 0 22px; flex: 1; }
.ft-col h4 { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: .02em; white-space: nowrap; }
.ft-col a {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .52);
  line-height: 1;
  margin-bottom: 14px;
  white-space: nowrap;
  /* 原为 var(--ease) = cubic-bezier(.22,1,.36,1) */
  transition: color .3s cubic-bezier(.22, 1, .36, 1);
}
.ft-col a:last-child { margin-bottom: 0; }
.ft-col a:hover { color: #fff; }
.ft-info { flex: 0 0 330px; text-align: left; padding-top: 0; }
.ft-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .03em; }
.ft-hot { margin-top: 16px; font-size: 12.5px; color: rgba(255, 255, 255, .52); }
.ft-hot b { display: block; margin-top: 8px; font-size: 21px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.ft-info p { font-size: 12.5px; line-height: 1.9; color: rgba(255, 255, 255, .52); margin-top: 9px; }
.ft-info p.ft-hot { margin-top: 16px; }
.ft-bar { border-top: 1px solid rgba(255, 255, 255, .09); padding: 18px 0 24px; margin-top: 46px; }
.ft-bar .in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12px; color: rgba(255, 255, 255, .4); }
.ft-bar a { color: inherit; }
.ft-bar a:hover { color: #fff; }

/* ---------------- 返回顶部（客户 2026-10-28：内页要与首页一致） ----------------
 * 为什么要有这一支：
 *   首页的 `.to-top` 写在 home.css（客户 2026-10-19 设计原件），内页**不能**加载 home.css
 *   （两套设计同名类会打架）⇒ 内页原来用的是打包 CSS 里的旧 `.back-top`（46×46 / 圆角 4px /
 *   品牌红底 #e60013），跟首页那个 42×42 / 直角 / 白底细边框的按钮完全两个样。
 *   现在内页组件也换成 `HomeToTop`（类名 `.to-top`），这里把 home.css 那一支**逐字抄过来**，
 *   只把三个变量换成等值字面量（与 `.ft` 同一套兜底口径）：
 *     `var(--line)` → #e5e5e5、`var(--ink)` → #111111、`var(--ease)` → cubic-bezier(.22,1,.36,1)。
 * 🔴 改首页这支时要两边同步（home.css 是原件不能改，改之前先问客户）。 */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 42px; height: 42px; background: #fff; border: 1px solid #e5e5e5;
  display: grid; place-items: center; color: #333;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1), visibility .35s;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #111111; color: #fff; border-color: #111111; }
.to-top svg { width: 14px; height: 14px; }

/* 页脚：窄桌面提前折行，避免 6 列挤爆（与 home.css 同断点） */
@media (max-width: 1280px) {
  .ft-main { flex-direction: column; gap: 38px; }
  .ft-links { grid-template-columns: repeat(3, 1fr); gap: 0 28px; row-gap: 30px; }
  .ft-info { flex: 0 0 auto; }
  .ft-bar .in { padding-right: 58px; }
}

@media (max-width: 1100px) {
  .ft-main { flex-direction: column; gap: 40px; }
  .ft-links { grid-template-columns: repeat(3, 1fr); gap: 0 28px; row-gap: 30px; }
  .ft-info { padding-top: 0; }
}

@media (max-width: 767px) {
  /* 客户 2026-10-28：Wap 端页脚**整块不要**这 6 列链接
     （关于我们 / 火锅锅具 / 餐饮桌椅 / 商用后厨设备 / 火锅专用电磁炉燃气灶 / 新闻资讯）。
     桌面与平板（≥768）一律保留，所以只在手机断点里置 none。
     🔴 本文件是首页与内页**共用**的页脚样式（entry-server 与 App 的 RouteStyles 都保证它
        两类页面都挂着、且不会被 home / 内页 的样式切换摘掉）⇒ 改这一处，首页与内页同时生效，
        不用再去 home.css（客户原件）里动第二遍。 */
  .ft-links { display: none; }
  .ft-name { font-size: 14px; }
  .ft-hot b { font-size: 19px; }
  .ft-bar .in { flex-direction: column; gap: 8px; }
  /* 与 home.css 手机断点同口径（首页是 right:14px / bottom:14px，别让两边差 10px） */
  .to-top { right: 14px; bottom: 14px; }
}

/* 页脚底栏右侧别被「返回顶部」按钮压住（客户 2026-10-28 加了「企业资质」链接）。
   与 public/css/home-page-extra.css 里同一条规则**必须同步**（首页用 home.css + extra，内页用本文件）。 */
@media (min-width: 1281px) {
  .ft-bar .in { padding-right: 72px; }
}