/* ==========================================================================
   YIXU Tools — About / 制造能力页专属样式（#16）
   规则（#12/#13）：颜色 / 字号 / 间距 / 圆角一律引用 design-tokens.css 变量，
   不写死值；公共组件（card / grid / placeholder / cta-band 等）由
   components.css 提供，本文件只做页面级布局。
   ========================================================================== */

/* ------------------------------------------------------------ 区块留白
   design-tokens 未提供全局 section 类，此处为本页自用定义 */
.section-y { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-y--alt { background: var(--bg-alt); }

/* ------------------------------------------------------------ 事实栏 */
.about-facts { padding-bottom: var(--section-y-sm); }

/* 法定主体信息（迁移自旧站 #8）：
   B2B 买家在下单前要看清注册主体与工厂地址，放在页头 lede 之后 */
.legal-line {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--brand-100);
  color: var(--ink-2);
  font-size: var(--fs-3-thin);
  line-height: var(--lh-snug);
}

.legal-line strong { color: var(--ink); font-weight: 600; }

/* 产品线卡（迁移自旧站 #8「Our Product Focus」三条） */
.focus-card { display: flex; flex-direction: column; gap: var(--space-3); }

.focus-card h3 { font-size: var(--fs-5); letter-spacing: var(--ls-tight); }

.focus-card p { color: var(--ink-2); font-size: var(--fs-3-thin); line-height: var(--lh-snug); }

.focus-card__link {
  margin-top: auto;
  font-size: var(--fs-3-thin);
  color: var(--brand-600);
  text-decoration: none;
}

.focus-card__link:hover { text-decoration: underline; }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
}

.fact {
  background: var(--neutral-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fact__num {
  font-size: var(--fs-fact);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--accent-dk);
}

.fact__label {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: var(--lh-snug);
}

/* ------------------------------------------------------ 能力卡片微调 */
.cap-card { display: flex; flex-direction: column; gap: var(--space-3); }

.cap-card__title { font-size: var(--fs-5); letter-spacing: var(--ls-tight); }

.cap-card p { color: var(--ink-2); font-size: var(--fs-3-thin); line-height: var(--lh-base); }

/* 占位细节行：比正文弱一档，视觉上明确"待补充" */
.cap-card__detail {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-2);
}

/* ------------------------------------------------------------ 质量追溯 */
.trace-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: var(--container-narrow);
}

.trace-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  background: var(--neutral-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.trace-step {
  flex: 0 0 auto;
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--brand-300);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.trace-list h3 { font-size: var(--fs-h4); margin-bottom: var(--space-1); }

.trace-list p { color: var(--muted); font-size: var(--fs-3-thin); line-height: var(--lh-snug); }

/* ------------------------------------------------------ 证书 / 照片图位 */
.cert-slot { min-height: 220px; }

.photo-slot { min-height: 240px; }

/* ------------------------------------------------------------ 响应式
   断点与 design-tokens.css 注释对齐：≤1024 两列降级，≤760 单列 */
@media (max-width: 1024px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .facts-grid { grid-template-columns: 1fr; }

  .trace-list li { flex-direction: row; gap: var(--space-4); padding: var(--space-4); }

  .trace-step { font-size: var(--fs-4); }
}