/* ===========================================================================
 * Contact 页（page-templates/contact.php）
 * ---------------------------------------------------------------------------
 * 只在 Page Template = "Contact" 的页面上加载（见 inc/assets.php 6i）。
 *
 * 版面：[正文宽 1fr | 侧列 360] —— 左侧是主卡片（邮箱 + 写信要点），
 *       右侧是「更快的答案」与批发入口。
 *
 * ★ 为什么左宽右窄，而不是三等分
 *   这一页只有一个主行动（写信），其余四条都是「你可能根本不用写信」的
 *   分流入口。三等分会把主卡片压到和一条链接同样宽度，等于告诉访客
 *   「这些是同级选项」——实际不是。360 是让右侧能放下「标题 + 一句说明 +
 *   箭头」而不换行的最小宽度，再宽就要在 1200 里多切左侧。
 *
 * ★ 页框复用 legal.css
 *   面包屑、眉标 + H1 与政策页是同一件东西，类名直接沿用 `.lu-legal__*`。
 *   faq.php 的文件头已经因为「同一设计不留两份实现」做过一次同样的决定。
 *   本文件只负责这一页独有的三块：主卡片 / 快速答案列表 / 批发块。
 *
 * ★ 不做卡片阴影
 *   全站只用 hairline 描边（`--border-default`）分层，没有 `box-shadow`
 *   卡片。这里跟着不用 —— 加一层阴影就会让 Contact 页看起来比商品页
 *   「更现代」，而那是另一个品牌。
 * =========================================================================== */

/* ===========================================================================
 * 1. 页头导语
 * ---------------------------------------------------------------------------
 * legal.css 的 `.lu-legal__head` 只给了 padding，没有导语样式 ——
 * 政策页没有导语，FAQ 的导语用的是 `.lu-faq__lead`。这一页自己的导语
 * 按长文行宽卡 780，与政策页正文同一条基线。
 * =========================================================================== */

.lu-contact__lead {
  margin: var(--sp-4) 0 0;
  max-width: var(--container-narrow);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-body);
}

/* ===========================================================================
 * 2. 两栏网格
 * =========================================================================== */

.lu-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .lu-contact__grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--two-col-gap);
  }
}

/* ===========================================================================
 * 3. 主卡片：邮箱 + 三个要点
 * ---------------------------------------------------------------------------
 * 邮箱本身是链接，且是这一页最大的可点目标 —— 它是唯一的主行动。
 * =========================================================================== */

.lu-contact__card {
  padding: var(--card-padding-lg);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
}

/* 小标签：与眉标同一套排版语言，但用正文族而不是衬线族 ——
   衬线族留给 H1 和邮箱地址，页内小节不再抢。 */
.lu-contact__label {
  margin: 0;
  font-size: var(--fs-field-label);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-field-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lu-contact__mail {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  /* 跨境站常见的长地址溢出：邮箱里有长域名时宁可断行也不要撑破卡片 */
  overflow-wrap: anywhere;
}

.lu-contact__mail a {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--bw-hairline) solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lu-contact__mail a:hover {
  color: var(--fg-accent);
  border-bottom-color: var(--fg-accent);
}

/* 没有可用邮箱时的降级态：不假装有链接，也不留一个空的可点区域 */
.lu-contact__mail--missing {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-muted);
}

.lu-contact__note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--fg-muted);
}

/* 要点区：用一条 hairline 与上半部分隔开，而不是再加一个盒子 ——
   嵌套盒子会让卡片出现「卡中卡」，视觉上多一层不存在的层级。 */
.lu-contact__hint-title {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: var(--bw-hairline) solid var(--border-soft);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.lu-contact__hints {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}

.lu-contact__hints li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
}

/* 琥珀短横做项目符号：比圆点安静，且与全站强调色一致 */
.lu-contact__hints li::before {
  content: "";
  position: absolute;
  left: 0;
  /* 10.5px = (20px 行高 − 1px 线高) / 2，让短横落在第一行文字的中线上 */
  top: 10.5px;
  width: 10px;
  height: 1px;
  background: var(--fg-accent);
}

/* ===========================================================================
 * 4. 侧列：更快的答案 + 批发
 * =========================================================================== */

.lu-contact__aside {
  display: grid;
  gap: var(--sp-5);
}

.lu-contact__aside-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
}

.lu-contact__quick {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.lu-contact__quick li + li {
  border-top: var(--bw-hairline) solid var(--border-soft);
}

/* 整行可点：箭头贴右，说明换行时不会把箭头挤到第二行中间。
 *
 * ★ 三列子元素必须**显式指定列**，不能靠自动布局。
 *   只写 `grid-row: 1 / span 2` 而不管列时，自动布局会把箭头放进第 1 列、
 *   把标签与说明挤到第 2 列 —— 实测效果是「箭头在左、文字在右」，
 *   整列看起来像错位。行/列两个轴都要钉住，少钉一个就等于没钉。
 */
.lu-contact__quick a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  padding-block: var(--sp-3);
  text-decoration: none;
}

.lu-contact__quick-label {
  grid-column: 1;
  display: block;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-primary);
  transition: color 0.15s ease;
}

.lu-contact__quick-note {
  grid-column: 1;
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-muted);
}

.lu-contact__quick-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--fs-body-sm);
  color: var(--fg-accent);
  transition: transform 0.15s ease;
}

.lu-contact__quick a:hover .lu-contact__quick-label {
  color: var(--fg-accent);
}

.lu-contact__quick a:hover .lu-contact__quick-arrow {
  transform: translateX(3px);
}

/* 批发块：用纸的深一档做底，而不是再加描边 ——
   它是一条旁注，不该和主卡片争同级视觉重量。 */
.lu-contact__block {
  padding: var(--card-padding);
  background: var(--bg-surface-alt);
  border-radius: var(--r-md);
}

.lu-contact__block-text {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
}

.lu-contact__block-text a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lu-contact__block-text a:hover {
  color: var(--fg-primary);
}

/* ===========================================================================
 * 5. 附加说明（后台正文非空时才出现）
 * ---------------------------------------------------------------------------
 * 给节假日公告这类会变的内容留的口子，排版按长文基线走。
 * =========================================================================== */

.lu-contact__extra {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--bw-hairline) solid var(--border-default);
  max-width: var(--container-narrow);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
}

.lu-contact__extra > :first-child {
  margin-top: 0;
}

/* ===========================================================================
 * 6. 移动端
 * =========================================================================== */

@media (max-width: 767px) {
  .lu-contact__card {
    padding: var(--sp-5);
  }

  .lu-contact__mail {
    font-size: 21px;
  }
}

/* 尊重系统的减少动效偏好：箭头的位移是纯装饰 */
@media (prefers-reduced-motion: reduce) {
  .lu-contact__quick a:hover .lu-contact__quick-arrow {
    transform: none;
  }

  .lu-contact__mail a,
  .lu-contact__quick-label,
  .lu-contact__quick-arrow {
    transition: none;
  }
}