/* ============================================================================
   页脚组件（.tk-ft）
   ----------------------------------------------------------------------------
   从 kit.css 里拆出来单独一个文件，原因是：
   - 模板页引 kit.css，页脚一直在里面；
   - 会员中心那 15 个页面（个人中心 / 订单 / 钱包 …）刻意**不**引 kit.css
     ——那是整套设计体系，带 html/body/h1 这类全局重置，会把会员页重排一遍；
   - 但它们同样需要页脚，于是独立成文件，两边引同一份。

   变量全部带兜底值：会员页的 --tk-* 由 member_theme 注入，模板页由主题自己的
   <style> 声明，两边都能正常取到。
   ============================================================================ */

/* ---------- 11. 页脚 ---------- */
/* 结构：左品牌（logo / 一句话 / 社交）+ 右栏目（栅格等宽），
   底部一条版权与合规链接。底色用 paper 而不是 card，和正文区分开，
   避免整页白到最后分不清哪里是内容、哪里是页脚。 */
.tk-ft {
  /* 原来 56px：会员中心的内容区（.hp-shell）本身是白底、到内容结束就收边，
     56 的 margin 会把 body 底色（浅灰）露出一条 —— 内容卡和页脚之间浮一条
     谁都不属于的空白带。页脚自己有 border-top 划界，不需要再用外边距分隔。 */
  margin-top: 0;
  background: var(--tk-paper);
  border-top: 1px solid var(--tk-line);
  color: var(--tk-ink-2);
}

.tk-ft__main {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.9fr);
  gap: 48px 56px;
  padding: 54px 0 44px;
}

.tk-ft__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 32ch;
}

.tk-ft__logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tk-ink);
}

/* 品牌点：页头 logo 是图形标记，页脚只有文字，补一个小色块把视线锚住 */
.tk-ft__logo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--tk-accent);
  flex-shrink: 0;
}

.tk-ft__desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--tk-ink-3);
}

.tk-ft__socials {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.tk-ft__socials a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--tk-line);
  color: var(--tk-ink-2);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .18s var(--tk-ease), border-color .18s var(--tk-ease), background-color .18s var(--tk-ease);
}

.tk-ft__socials a:hover {
  color: var(--tk-accent);
  border-color: var(--tk-accent);
  background: var(--tk-accent-soft);
}

.tk-ft__socials img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* 栏目：等宽栅格，窄屏自动折成两列；不再用 flex + min-width，
   否则栏目数一变，右边就会剩一大块空白。 */
.tk-ft__nav {
  display: grid;
  /* 列宽给上限（200），栏数少的时候靠左排，不会把两栏撑到整行、
     中间空出半屏；栏数多时自然折行。 */
  grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
  justify-content: end;
  gap: 30px 44px;
  align-content: start;
}

.tk-ft__group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tk-ft__group-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--tk-ink);
}

a.tk-ft__group-title:hover {
  color: var(--tk-accent);
}

.tk-ft__link {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tk-ink-2);
  overflow-wrap: anywhere;
  transition: color .18s var(--tk-ease);
}

.tk-ft__link:hover {
  color: var(--tk-accent);
}

.tk-ft__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  padding: 18px 0 24px;
  border-top: 1px solid var(--tk-line);
  font-size: 12.5px;
  color: var(--tk-ink-3);
}

.tk-ft__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

/* 小法律链接：字号小，但可点高度仍给够（手机上别点空） */
.tk-ft__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--tk-ink-3);
  transition: color .18s var(--tk-ease);
}

.tk-ft__legal a:hover {
  color: var(--tk-accent);
}

/* 平板及以下：上下排。左品牌 + 右栏目两栏在这个宽度里会被挤成窄条 */
@media (max-width: 991px) {
  .tk-ft {
    margin-top: 40px;
  }

  /* 平板起就上下排：左品牌 + 右栏目两栏在这个宽度里会被挤成窄条 */
  .tk-ft__main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 0 28px;
  }

  .tk-ft__brand {
    max-width: none;
  }

  .tk-ft__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
    gap: 24px 20px;
  }

  .tk-ft__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 0 calc(20px + env(safe-area-inset-bottom));
  }
}