/* ============================================================
   LAKEFOX — section-contact-form.css
   客户支持联系表单（任务 25）
   布局：信息卡 + 表单 双列 grid（移动 1 列 → 768 双列，§六 断点阶梯）；
         表单字段 1024+ 双列（name/email、phone/country 同行），message 全宽
   令牌：仅 var() 引用（base.css 设计令牌 + theme.liquid scheme 变量，禁止裸 hex）
   对比度决策（DESIGN-SPEC §2.10 实测表）：
     - 错误文字 --acc on 白 ≈5.5:1 ✓（砖红不做错误底，只做描边+文字）
     - 信息行/占位符走 scheme 令牌（暗 scheme 下 --color-text-secondary 自适应）
     - 成功提示：金左侧描边（--acc 点缀通道）+ scheme 卡底文字，非金色正文
   输入框：min-height 44px（§2 touch-target-size）、--radius-base、占位符 scheme 辅助色；
     focus 强化 border 金色 + 全局 :focus-visible 金环（§1 focus-states）
   RTL：逻辑属性（border-inline-start / padding-inline / inset-inline-start），方向自动镜像
   ============================================================ */

.lf-contact {
  padding-block: var(--section-pad); /* 区块垂直节奏对齐 .lf-container 体系（原 var(--space-12) 硬值 48px → section-pad 同值） */
}

/* 双列 grid：移动 1 列 → 768 双列（minmax(0,·) 防内容撑爆，DESIGN-SPEC §5） */
.lf-contact__grid {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media screen and (min-width: 768px) {
  .lf-contact {
    padding-block: var(--section-pad-lg); /* 72px 桌面端 */
  }

  .lf-contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); /* 信息卡稍窄，表单稍宽 */
    gap: var(--space-10);
  }
}

/* ---------- 卡片共用：类在 liquid 改为 lf-card（base.css §7b 契约），此处只留布局 padding。
   原 background fallback 误用无效令牌 bg-warm-gray（笔误，正确为 brand-warm-gray），已随重复声明删除、
   由 .lf-card 契约接管（契约 fallback 即 brand-warm-gray） ---------- */
.lf-contact__info,
.lf-contact__card {
  padding: var(--space-8);
}

/* ---------- 左栏：联系信息卡 ---------- */
.lf-contact__heading {
  color: var(--color-foreground, var(--text-primary));
  margin-block-end: var(--space-5);
}

/* 信息行：icon chip（品牌色浅底 + 内联 SVG，§5.2）→ label 辅助色 / value 前景色 */
.lf-contact__channels {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lf-contact__channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-card-border, rgba(20, 30, 34, 0.08));
}

.lf-contact__channel:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

/* 信息行图标 chip：类在 liquid 改为 lf-icon-chip lf-icon-chip--sm lf-icon-chip--accent lf-icon-chip--pill
   （40px 砖红胶囊，base.css §7b 契约含 color-mix 兜底；原为金底 + 无效令牌 bg-warm-gray 笔误，已统一到契约），
   本地定义与 @supports 兜底结构删除 */

.lf-contact__channel-label {
  display: block;
  font-size: var(--text-2);
  color: var(--color-text-secondary, var(--text-secondary));
}

.lf-contact__channel-value {
  display: block;
  color: var(--color-foreground, var(--text-primary));
  font-weight: 600; /* 联系值强调：规范标签档（原 500），有意的视觉增强 */
  word-break: break-word; /* 长邮箱/地址防溢出 */
}

.lf-contact__channel-value a {
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.lf-contact__channel-value a:hover {
  color: var(--acc);
}

/* Live Chat 入口：secondary 砖红（≈5.9:1 ✓），全宽显眼 —— 每屏单 primary（submit 金），
   Live Chat 为次级 CTA（§4 primary-action） */
.lf-contact__live-chat {
  margin-block-start: var(--space-6);
  width: 100%;
}

/* ---------- 右栏：表单 ---------- */
/* 成功提示：类在 liquid 改为 lf-form-alert lf-form-alert--success（金左侧描边 + 金 12% 浅底 + 前景字，
   契约；原 background fallback 无效令牌 bg-warm-gray 笔误已随之删除），此处只留布局 flex */
.lf-contact__success {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lf-contact__success-icon {
  flex: none;
  color: var(--acc);
}

.lf-contact__success-title {
  color: var(--color-foreground, var(--text-primary));
  font-weight: 600;
}

/* 总错误：类在 liquid 改为 lf-form-alert lf-form-alert--error（砖红左侧描边 + 砖红 8% 浅底 + 砖红字，
   契约；≈5.5:1 ✓），role="alert" 播报（§8 aria-live-errors）；此处只留布局 margin */
.lf-contact__errors {
  margin-block-end: var(--space-5);
}

.lf-contact__errors-heading {
  font-weight: 600;
  margin-block-end: var(--space-2);
}

/* form.errors | default_errors 输出的原生 ul/li 兜底样式 */
.lf-contact__errors ul {
  margin: 0;
  padding-inline-start: var(--space-5);
}

/* 字段网格：移动/平板 1 列 → 1024+ 2 列（message 全宽跨列）。
   表单密度控制：断点取 1024 有意不同于内容网格的 768 升列（表单字段行需更宽才不拥挤） */
.lf-contact__fields {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media screen and (min-width: 1024px) {
  .lf-contact__fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* grid-column 1/-1 跨全部列线，RTL 下同样全宽（与方向无关） */
.lf-contact__field--full {
  grid-column: 1 / -1;
}

/* 字段 label：类在 liquid 改为 lf-label（base.css §7b 契约），本地定义删除 */
.lf-contact__required {
  color: var(--acc);
}

/* 输入控件/textarea/字段错误/聚焦态/aria-invalid：类在 liquid 改为 lf-input / lf-textarea / lf-field-error
   （base.css §7b 契约），本地定义删除。聚焦态由全局契约提供「金边 + 金 25% 环」
   （原 contact 仅金边，属有意增强到全局一致） */

.lf-contact__submit {
  margin-block-start: var(--space-6);
  width: 100%;
}