/* ============================================================
   Landing-page inline inquiry block  (2026-10-03)
   ------------------------------------------------------------
   问题：全站 18 页里只有 index.html 有一个询盘表单，其余 17 页
   （产品页 / 内容页 / 博客页）没有任何询盘入口。买家看完内容想
   问价，只能自己回首页再找一遍 —— 这是"第一个询盘"的最大漏点。

   方案：在每页正文末尾放一个**精简三字段**询盘块（姓名 / 邮箱 /
   需求），提交走同一套 Web3Forms 后端（与首页同一个 accessKey），
   邮件标题自动带上来源页，便于判断哪篇内容带来询盘。

   为什么不复制首页的完整表单：
   首页那套 11 个字段（MOQ / 预算 / 微信 / 材料配色单价…）是给
   已经看完首页、愿意认真填的访客设计的。落地页读者是刚被某篇内容
   说服的初访者，字段一多提交率就崩。这里只留 3 个必填，
   想要细节的仍可回首页走完整流程。

   类名一律加 lq- 前缀，绝不复用 .inquiry / .form-* —— 那是首页
   专属样式，混用会串味（全站 .inquiry 有 ::before/::after 装饰层）。

   配色：只用 css/style.css 已有的浅色狸花令牌，不新增色值。
   ============================================================ */

.lq-section {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-subtle);
  padding: 56px 24px;
}
.lq-wrap { max-width: 840px; margin: 0 auto; }

.lq-label {
  display: inline-block;
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-text);
  background: var(--accent-soft);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.lq-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 29px);
  line-height: 1.28; font-weight: 500; color: var(--text-primary);
  margin-bottom: 10px;
}
.lq-desc {
  font-size: 15px; line-height: 1.7; color: var(--text-secondary);
  margin-bottom: 26px; max-width: 60ch;
}

.lq-form { display: grid; gap: 14px; }
.lq-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.lq-field { display: flex; flex-direction: column; gap: 6px; }
.lq-field label {
  font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.lq-field label .lq-req { color: var(--accent-text); }

.lq-input {
  font: inherit; font-size: 14.5px; color: var(--text-primary);
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 11px 13px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.lq-input::placeholder { color: var(--text-tertiary); }
.lq-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow-accent);
}
textarea.lq-input { resize: vertical; min-height: 104px; line-height: 1.6; }

.lq-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 4px;
}
.lq-submit {
  font: inherit; font-size: 15px; font-weight: 500;
  color: #FFFFFF; background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 26px; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.lq-submit:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.lq-submit:disabled { opacity: .6; cursor: not-allowed; }

.lq-wa {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500;
  color: var(--accent-text); text-decoration: none;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm); padding: 11px 18px;
  transition: background .15s;
}
.lq-wa:hover { background: var(--accent-soft); }

.lq-note {
  font-size: 12.5px; color: var(--text-secondary);
  margin-top: 14px; line-height: 1.65;
}

/* 状态区：成功 / 失败 与表单互斥显示 */
.lq-status {
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 14px; line-height: 1.6; margin-bottom: 16px;
}
.lq-status[hidden] { display: none; }
.lq-status.ok {
  background: #EAF3DE; border: 1px solid #C0DD97; color: #3B6D11;
}
.lq-status.err {
  background: #FCEBEB; border: 1px solid #F09595; color: #A32D2D;
}

/* 窄屏：两列塌成一列，按钮各占整宽方便点按 */
@media (max-width: 640px) {
  .lq-section { padding: 40px 18px; }
  .lq-row { grid-template-columns: 1fr; }
  .lq-submit, .lq-wa { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lq-input, .lq-submit, .lq-wa { transition: none; }
}