/* ==========================================================================
   LUYUN 麓云茶号 · 页脚
   --------------------------------------------------------------------------
   对应设计稿 S13 · 页脚（画板 6:385 / 内衬 6:386 / 顶栏 6:387 / 底栏 6:428）

   版面事实（实测值，逐条对齐画板）：
     内衬 padding    左 120 · 右 120 · 上 64 · 下 36
     行间距          48（顶栏 ↔ 分隔线 ↔ 底栏）
     顶栏列          品牌列 300 定宽 + 4 等分，列距 60
     品牌列内部      竖向 gap 14
     分隔线          1px #E3DCCB
     底栏            版权 12px + 支付方式 11px，两端对齐

   ★ 三个不在 8 档间距刻度（--sp-1…8）里的值：64 / 36 / 60 / 14。
     它们来自画板实测，不是拍脑袋 —— 用 Token 里最近的 72/48 会把版面撑开
     一圈，跟设计稿对不上。按「设计稿有的必须能溯源」的规则，就地写数值
     并注明出处，比硬塞进刻度里更诚实。

   ★ 本文件**全局加载**（见 inc/assets.php 第 5b 段）：页脚每页都在，
     不像 cart.css / checkout.css 那样能按页省。

   ★ 不画顶部描边。画板 6:385 本身没有边框，首页页脚上沿紧接 S12 深色带，
     加一条 1px 亮线反而会在深底上拉出一道接缝。其他页靠 64px 上留白分隔。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 外框
   -------------------------------------------------------------------------- */
.lu-footer {
  display: block;
  width: 100%;
  background: var(--bg-page);
  color: var(--fg-body);
}

.lu-footer__inner {
  display: grid;
  gap: 48px;

  width: 100%;
  max-width: var(--bp-desktop);
  margin-inline: auto;

  padding: 64px var(--page-margin-mobile) 36px;
}

@media (min-width: 768px) {
  .lu-footer__inner {
    padding-inline: var(--page-margin-desktop);
  }
}

/* --------------------------------------------------------------------------
   1. 顶栏 · 品牌列 + 四栏链接
   -------------------------------------------------------------------------- */

/* 375 起：两栏网格，品牌列横跨整行（占两格）。
   链接栏两两并排比一列到底短得多，375 上正好每格 ~157px，
   「Brewing guides」这档长词也放得下。 */
.lu-footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
}

.lu-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 14px;                    /* 画板 6:388 gap */
}

/* 1024 起四栏一排，品牌列仍占整行 —— 这一档内容宽 784，
   再挤 300 给品牌列，四个链接栏只剩 61px，词会全断行。 */
@media (min-width: 1024px) {
  .lu-footer__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px 40px;
  }
}

/* 1280 起才是画板那一版：300 + 4 等分，列距 60。 */
@media (min-width: 1280px) {
  .lu-footer__top {
    grid-template-columns: 300px repeat(4, minmax(0, 1fr));
    gap: 60px;
  }

  .lu-footer__brand {
    grid-column: auto;
  }
}

/* --- 品牌列 --- */
.lu-footer__logo {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 23px;              /* 画板 6:389 实测；Token 里最近的是 --fs-h3 22px */
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  text-decoration: none;
}

.lu-footer__logo:hover,
.lu-footer__logo:focus-visible {
  color: var(--fg-primary);
  text-decoration: none;
}

.lu-footer__origin {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-body);
}

.lu-footer__desc {
  margin: 0;
  max-width: 280px;             /* 画板 6:391 定宽 */
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
}

/* --- 社交图标行 --- */
.lu-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lu-footer__social-link {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--fg-primary);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.lu-footer__social-link svg {
  display: block;
  width: 20px;
  height: 20px;
}

.lu-footer__social-link:hover,
.lu-footer__social-link:focus-visible {
  opacity: 0.66;
}

/* --- 链接栏 --- */
.lu-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;                    /* 画板 6:402 gap */
  min-width: 0;
}

.lu-footer__title {
  margin: 0;
  font-family: var(--font-eyebrow);
  font-weight: var(--fw-medium);
  font-size: 13px;              /* 画板 6:403 实测 13px Cormorant Medium */
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-primary);
}

.lu-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lu-footer__link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

/* 悬停只把颜色提到墨色 + 一条下划线。不发灰、不加位移 ——
   页脚链接密度高，任何位移动效都会让整块跳。 */
.lu-footer__link:hover,
.lu-footer__link:focus-visible {
  color: var(--fg-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   2. 分隔线与底栏
   -------------------------------------------------------------------------- */
.lu-footer__rule {
  height: 1px;
  background: var(--border-default);
}

.lu-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
}

.lu-footer__copy,
.lu-footer__pay {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg-body);
}

.lu-footer__copy {
  font-size: var(--fs-label);   /* 12 / 19 */
  line-height: var(--lh-label);
}

.lu-footer__pay {
  font-size: var(--fs-caption); /* 11 / 17 */
  line-height: var(--lh-caption);
}

/* 375 上两行各占一行，各自左对齐；375 以下版权句会折成三行，
   支付行紧跟其后。 */
@media (max-width: 639px) {
  .lu-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
}