/* ============================================================================
   content.css — 内容页（content 模板：rfq / contact / 后续 index·content·form 页）

   与全站同一套约定：版心只认 --z02-canvas，文字只用 --z02-* token，
   控件 44–48px、圆角 6–8px、少阴影。
   ⚠️ 本文件只服务 blocks[] 渲染出来的那几种块。要加块类型先改
      build.mjs 的 CONTENT_BLOCK，再在这里补样式 —— 顺序反了会出现「有 DOM 没样式」。
   ========================================================================== */

body.content-page {
  --ct-radius: 6px;
  --ct-gap: 20px;
}

/* 版心：main 的直接子元素对齐到 --z02-canvas（inner-banner.css 已处理），
   这里只管块与块之间的呼吸。不要再包一层 canvas 类，会二次收缩。 */
.ct-block {
  width: var(--z02-canvas);
  margin: clamp(28px, 2.8vw, 44px) auto;
}
.ct-block:first-of-type { margin-top: clamp(36px, 3.6vw, 56px); }

.ct-block-title {
  margin: 0 0 8px;
  color: var(--z02-text);
  font-size: var(--z02-fs-h4);
  font-weight: var(--z02-fw-medium);
  letter-spacing: var(--z02-ls-component-title);
}
.ct-block-note {
  margin: 0 0 var(--ct-gap);
  max-width: 68ch;
  color: var(--z02-text-muted);
  font-size: var(--z02-fs-copy);
  line-height: var(--z02-lh-copy);
}
.ct-prose {
  margin: 0 0 12px;
  max-width: 72ch;
  color: var(--z02-text);
  font-size: var(--z02-fs-copy);
  line-height: var(--z02-lh-copy);
}

/* ── 表单 ─────────────────────────────────────────────────────────────────── */
.ct-form { display: contents; }

.ct-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px var(--ct-gap);
}
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-field--half { grid-column: span 1; }
/* 没标 half 的字段（Message、按类型出现的那些）占满整行。 */
.ct-field:not(.ct-field--half) { grid-column: 1 / -1; }
/* 按询价类型隐藏的字段：hidden 而不是 display:none 会被 grid 留空位，
   所以两种都要写。 */
.ct-field[hidden] { display: none; }

.ct-label {
  color: var(--z02-text);
  font-size: var(--z02-fs-action);
  font-weight: var(--z02-fw-medium);
}
.ct-optional {
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-supporting);
  font-weight: var(--z02-fw-regular);
}
/* ⚠️ 必填不只靠星号或颜色：required 由浏览器管，这里的文字是给人看的备份。 */
.ct-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--z02-border-control);
  border-radius: var(--ct-radius);
  background: var(--z02-surface);
  color: var(--z02-text);
  font: inherit;
  font-size: var(--z02-fs-copy);
}
.ct-input:focus-visible {
  outline: 2px solid var(--z02-accent);
  outline-offset: 1px;
  border-color: var(--z02-accent);
}
textarea.ct-input { min-height: 110px; resize: vertical; }
.ct-field-help {
  margin: 0;
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-supporting);
  line-height: var(--z02-lh-copy);
}

.ct-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--z02-border-line);
}
.ct-submit {
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--z02-accent);
  border-radius: var(--ct-radius);
  background: var(--z02-accent);
  color: var(--z02-on-dark, #fff);
  font-size: var(--z02-fs-action);
  font-weight: var(--z02-fw-medium);
  cursor: pointer;
}
.ct-submit:hover { background: var(--z02-accent-hover); border-color: var(--z02-accent-hover); }
.ct-submit:focus-visible { outline: 2px solid var(--z02-text); outline-offset: 2px; }
.ct-form-state {
  margin: 0;
  color: var(--z02-text-muted);
  font-size: var(--z02-fs-supporting);
}
.ct-form-disclaimer {
  width: 100%;
  max-width: 76ch;
  margin: 12px 0 0;
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-supporting);
  line-height: var(--z02-lh-copy);
}

/* 提交后生成的询价摘要。⚠️ 它是「给你复制走」的，不是「已发送」的回执 ——
   标题必须写清这一点，别做成绿色的成功提示。 */
/* ⚠️ .ct-form 是 display:contents（让里面的块各自保持版心），所以摘要虽然是
   form 的子节点，视觉上仍是 main 的直系块 —— 版心要自己声明。 */
.ct-summary {
  width: var(--z02-canvas);
  margin: 20px auto 0;
  padding: 18px 20px;
  border: 1px solid var(--z02-border-line);
  border-radius: var(--ct-radius);
  background: var(--z02-surface-product);
}
.ct-summary[hidden] { display: none; }
.ct-summary-title {
  margin: 0 0 10px;
  color: var(--z02-text);
  font-size: var(--z02-fs-action);
  font-weight: var(--z02-fw-medium);
}
.ct-summary-body {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--ct-radius);
  background: var(--z02-surface);
  color: var(--z02-text);
  font-family: var(--font);
  font-size: var(--z02-fs-supporting);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}
.ct-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.ct-copy {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--z02-border-control);
  border-radius: var(--ct-radius);
  background: var(--z02-surface);
  color: var(--z02-text);
  font-size: var(--z02-fs-action);
  cursor: pointer;
}
.ct-copy:hover { border-color: var(--z02-accent); color: var(--z02-accent); }
.ct-copy:focus-visible { outline: 2px solid var(--z02-accent); outline-offset: 2px; }
.ct-summary-note {
  margin: 10px 0 0;
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-supporting);
}

/* ── Quote List → RFQ review ───────────────────────────────────────────────
   This is a hand-off summary, not a cart or checkout surface. It keeps the
   selected lines visible while the contact form remains the source of the
   final enquiry details. */
.ct-quote-review {
  width: var(--z02-canvas);
  margin: clamp(28px, 2.8vw, 44px) auto 0;
  padding: 20px 22px;
  border: 1px solid var(--z02-border-line);
  border-radius: var(--ct-radius);
  background: var(--z02-surface-product);
}
.ct-quote-review .ct-block-title { margin-bottom: 8px; }
.ct-quote-review .ct-block-note { margin-bottom: 16px; }
.ct-quote-review-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-quote-review-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, .8fr);
  gap: 4px 16px;
  padding: 12px 14px;
  border: 1px solid var(--z02-border-line);
  border-radius: var(--ct-radius);
  background: var(--z02-surface);
}
.ct-quote-review-list strong {
  color: var(--z02-text);
  font-size: var(--z02-fs-action);
  font-weight: var(--z02-fw-medium);
}
.ct-quote-review-list span {
  color: var(--z02-text-muted);
  font-size: var(--z02-fs-supporting);
  text-align: right;
}
.ct-quote-review-list small {
  grid-column: 1 / -1;
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-supporting);
  line-height: var(--z02-lh-copy);
}

/* ── 路由卡 ───────────────────────────────────────────────────────────────── */
.ct-routes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-route {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 18px;
  padding-right: 40px;
  position: relative;
  border: 1px solid var(--z02-border-line);
  border-radius: var(--ct-radius);
  background: var(--z02-surface);
  color: var(--z02-text);
}
.ct-route:hover { border-color: var(--z02-accent); }
.ct-route:focus-visible { outline: 2px solid var(--z02-accent); outline-offset: 2px; }
.ct-route-label {
  font-size: var(--z02-fs-action);
  font-weight: var(--z02-fw-medium);
}
.ct-route-note {
  color: var(--z02-text-muted);
  font-size: var(--z02-fs-supporting);
  line-height: var(--z02-lh-copy);
}
.ct-route-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -10px;
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-action);
}
.ct-route:hover .ct-route-arrow { color: var(--z02-accent); }

/* ── 键值表 ───────────────────────────────────────────────────────────────── */
.ct-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 var(--ct-gap);
  margin: 0;
}
.ct-facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--z02-border-line);
}
.ct-facts dt {
  flex: 0 0 40%;
  color: var(--z02-text-muted);
  font-size: var(--z02-fs-action);
}
.ct-facts dd {
  margin: 0;
  flex: 1 1 50%;
  color: var(--z02-text);
  font-size: var(--z02-fs-action);
}
.ct-pending {
  color: var(--z02-text-faint);
  font-style: italic;
}

/* ── 待补插槽 ─────────────────────────────────────────────────────────────── */
.ct-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-slot {
  padding: 16px 18px;
  border: 1px dashed var(--z02-border-control);
  border-radius: var(--ct-radius);
  background: var(--z02-surface-product);
}
.ct-slot-label {
  margin: 0 0 6px;
  color: var(--z02-text);
  font-size: var(--z02-fs-action);
  font-weight: var(--z02-fw-medium);
}
.ct-slot-note {
  margin: 0;
  color: var(--z02-text-faint);
  font-size: var(--z02-fs-supporting);
  line-height: var(--z02-lh-copy);
}

@media (max-width: 900px) {
  .ct-fields { grid-template-columns: minmax(0, 1fr); }
  .ct-field--half { grid-column: 1 / -1; }
  .ct-quote-review-list li { grid-template-columns: minmax(0, 1fr); }
  .ct-quote-review-list span { text-align: left; }
}