/* 英文版样式：沿用共享黑白设计，只做英文字体、字距与英文专属组件的调整。
   所有规则基于 .en-page 作用域或 en- 前缀类，不影响中文页面。 */

/* 拉丁字体栈与基准字号：英文正文略大，层次保持干净 */
:root { --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.en-page { font-size: 17px; }

/* 英文标题不适用中文的紧字距，统一放宽 */
.en-page h1, .en-page h2, .en-page h3 { letter-spacing: -0.015em; }

/* 详情页标题沿用共享 details.css，仅微调英文长标题的断行 */
.en-page .detail-site h1, .en-page .detail-site h2, .en-page .detail-site h3 { letter-spacing: -0.012em; text-wrap: balance; }

/* ---------- 文字版品牌字标（不出现中文品牌字图） ---------- */

.brand-word {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-indent: 0.28em; /* 视觉居中补偿末字符字距 */
  color: var(--c-ink);
  white-space: nowrap;
}

/* 语言切换胶囊 */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #d6d6d2;
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-body);
  white-space: nowrap;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-switch:hover { border-color: var(--c-ink); color: var(--c-ink); }

.header-actions { gap: 12px; }

/* 手机端顶栏保留语言切换 */
@media (max-width: 900px) {
  .header-actions .btn { display: none; }
  .header-actions .lang-switch { display: inline-flex; }
}

/* ---------- 首页技术区步骤条 ---------- */

/* 长任务四步示意：胶囊 + 箭头，纯文字无图标 */
.en-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 36px;
}
.en-steps span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 13.5px;
  color: #d9d9d4;
  max-width: 100%;
}
.en-steps i {
  font-style: normal;
  color: #6f6f6a;
  font-size: 14px;
}

/* 技术行内迷你步骤：小号文字链，避免与说明文字抢层次 */
.en-mini-steps {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8f8f8a;
}
.en-mini-steps b { font-weight: 400; color: #d9d9d4; }
.en-mini-steps i { font-style: normal; color: #5f5f5b; }

.tech-row > div { min-width: 0; }

/* ---------- 行业卡片：暖灰 / 淡蓝 / 淡杏 / 石墨 抽象几何（无 emoji） ---------- */

.en-industry-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.en-industry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 20px;
  min-height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: #ffffff;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.en-industry-card:hover { border-color: var(--c-ink); }
.en-industry-card.is-active { background: var(--c-ink); border-color: var(--c-ink); }
.en-industry-card.is-active .en-card-name { color: #ffffff; }

.en-geo { display: block; width: 72px; height: 54px; }
.en-geo svg { width: 100%; height: 100%; display: block; }

.en-card-name {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

/* 桌面端行业卡片四列 */
@media (min-width: 900px) {
  .en-industry-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

/* 无脚本时不隐藏任何行业内容：卡片仅作图例，全部面板平铺 */
.en-industries:not(.js-on) .en-industry-cards { margin-bottom: 8px; }
.en-industries:not(.js-on) .en-industry-card { cursor: default; }

/* ---------- 底部动效联系区：为 ribbon.js 预留画布 ---------- */

.ribbon-contact { position: relative; overflow: hidden; }
.ribbon-contact .ribbon-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ribbon-contact .contact-inner { position: relative; z-index: 1; }

/* ---------- 英文细节修正：防溢出与断行 ---------- */

.en-page .hero-title, .en-page .section-title, .en-page .contact-title { text-wrap: balance; overflow-wrap: break-word; }
.en-page .product-face-title { font-size: 34px; }
.en-page .service-name { font-size: clamp(24px, 3vw, 32px); }
.en-page .detail-hero h1 { overflow-wrap: break-word; }
.en-page .chapter-nav { gap: 16px 32px; }
.en-page .chapter-nav a { white-space: nowrap; }
.en-page .faq-list summary h3 { font-size: clamp(18px, 2.4vw, 22px); }
.en-page .explain-row { grid-template-columns: 56px minmax(0, .85fr) minmax(0, 1.15fr); }
.en-page .record dl > div { grid-template-columns: 132px 1fr; }
.en-page .flow-index { font-size: 48px; }
.en-page .mechanism-node:not(:last-child):after { content: '→'; }

/* 中屏以下英文行距与字号微调，保证不溢出 */
@media (max-width: 900px) {
  .en-page { font-size: 16.5px; }
  .en-page .explain-row { grid-template-columns: 40px 1fr; }
  .en-page .explain-row p { grid-column: 2; }
  .en-page .record dl > div { grid-template-columns: 104px 1fr; }
}

@media (max-width: 480px) {
  .brand-word { font-size: 17px; }
  .en-industry-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .en-card-name { font-size: 13px; }
  .en-geo { width: 60px; height: 45px; }
  .en-steps span { padding: 8px 14px; font-size: 12.5px; }
  .en-page .hero-actions .btn { width: 100%; }
}

/* 减少动画偏好：沿用共享规则，无需额外覆盖；步骤条本身即静态 */