/* ============================================================
   v20-layout.css — 全站版式基准层
   解决：section 标题对齐不一致、栅格列宽参差、无统一版心
   类名依据：首页实际 DOM（home-section / section-heading / section-text）
   ============================================================ */

:root {
  --mahu-container: 1200px;
  --mahu-gutter: 40px;
  --mahu-gap: 24px;
}

/* ---------- 1. 统一版心 ---------- */
/* 容器：只对首页生效，避免改变子页既有 1100px 版心
   子页继续用 style.css 的 .container { max-width: 1100px } */
.home-section .container,
.hero-v2 .container,
.home-cta .container {
  width: 100%;
  max-width: var(--mahu-container);
  margin-inline: auto;
  padding-inline: var(--mahu-gutter);
  box-sizing: border-box;
}

/* ---------- 2. 统一区块节奏 ---------- */
.home-section { padding-block: 96px; position: relative; }
@media (max-width: 1024px) { .home-section { padding-block: 72px; } }
@media (max-width: 640px) {
  .home-section { padding-block: 56px; }
  .container { padding-inline: 20px; }
}

/* ---------- 3. 统一标题对齐（核心修复） ----------
   原问题：11 个 section 里 5 个标题居中、6 个左对齐，整站无基准
   方案：内容区统一左对齐（B 端更专业、便于扫读），
        Hero 与 CTA 作为宣言式版面保留居中 */
/* 标题宽度：按中文字数限，避免「收」这类孤字换行
   22ch 在中文下 ≈ 22 个半角宽 ≈ 11 个汉字，会把
   「怎么开始，交付什么，怎么验收」(12字) 挤成「…怎么验 / 收」 */
.home-section .section-heading,
.home-section h2.section-heading,
.home-section .section-title {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 15em;
  text-wrap: balance;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.18;
}

/* 区块引导句：左对齐 + 限宽，保证可读行长 */
.home-section .section-text,
.home-section .section-sub {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.75;
}

/* 眉标：左对齐，与标题同一条基准线 */
.home-section .section-label {
  text-align: left !important;
  margin-inline: 0 !important;
}

/* Hero 与 CTA 保留居中 */
.hero-v2 h1,
.hero-v2 .hero-sub,
.hero-v2 .hero-desc,
#cta .section-heading,
#cta .section-text,
#cta p { text-align: center !important; margin-inline: auto !important; }

/* ---------- 4. 统一栅格（消除 328.75/394.5 这类参差列宽） ----------
   根因：grid 用了 auto 列，内容长短决定列宽 → 第三列多出 66px
   方案：minmax(0,1fr) 强制等分 + min-width:0 防止长内容撑破 */
.home-section .grid-3,
.home-section .grid-2,
.home-section .grid-4 {
  display: grid;
  gap: var(--mahu-gap);
}
.home-section .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-section .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-section .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 站点实际使用的 6 个自定义栅格类，一并强制等分
   根因：这些类原本用 auto 列，内容长短决定列宽
   → #competition 出现 328.75 / 328.75 / 394.5 的参差 */
.home-section .service-grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-section .comparison-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-section .metrics-strip,
.home-section .industry-grid   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-section .scenario-grid,
.home-section .why-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.home-section .grid-3 > *,
.home-section .grid-2 > *,
.home-section .grid-4 > *,
.home-section .service-grid > *,
.home-section .comparison-grid > *,
.home-section .metrics-strip > *,
.home-section .industry-grid > *,
.home-section .scenario-grid > *,
.home-section .why-grid > * { min-width: 0; }

/* 卡片等高 */
.home-section .grid-3 > .service-card,
.home-section .grid-2 > .service-card,
.home-section .grid-4 > .card,
.home-section .grid-3 > *,
.home-section .grid-4 > * { height: 100%; align-self: stretch; }

/* ---------- 5. 响应式 ---------- */
@media (max-width: 1024px) {
  .home-section .grid-4,
  .home-section .metrics-strip,
  .home-section .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .home-section .grid-3,
  .home-section .grid-2,
  .home-section .service-grid,
  .home-section .comparison-grid,
  .home-section .scenario-grid,
  .home-section .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .home-section .grid-4,
  .home-section .metrics-strip,
  .home-section .industry-grid { grid-template-columns: 1fr; }
}

/* ---------- 6. 溢出兜底 ---------- */
html, body { overflow-x: clip; }
img, svg, video, canvas, table { max-width: 100%; }

/* ---------- 8. 深色区块玻璃卡（可读性根治） ----------
   BUG：#engagement 等深色区块里，卡片背景写成 rgba(255,255,255,.06)
        （6% 白 = 白底上叠白 = 纯白），而标题是 #fff
        → 白底白字，整段文字不可见
   方案：深底区块内改用「深色玻璃」而非「白色蒙版」 */
.home-section:has(#engagement .service-card),
#engagement,
#competition,
#metrics,
#philosophy,
#why {
  --mahu-glass-bg: rgba(18, 13, 44, 0.86);
  --mahu-glass-bg-hover: rgba(28, 21, 62, 0.94);
  --mahu-glass-border: rgba(168, 85, 247, 0.34);
  --mahu-glass-title: #ffffff;
  --mahu-glass-desc: rgba(255, 255, 255, 0.82);
}

#engagement .service-card,
#engagement .scenario-card,
#engagement .comp-card,
#competition .service-card,
#competition .comp-card,
#metrics .metric-block,
#philosophy .service-card,
#why .service-card {
  background: var(--mahu-glass-bg) !important;
  border: 1px solid var(--mahu-glass-border) !important;
  color: var(--mahu-glass-desc) !important;
  backdrop-filter: blur(14px);
}

#engagement .service-card:hover,
#competition .comp-card:hover,
#philosophy .service-card:hover {
  background: var(--mahu-glass-bg-hover) !important;
}

#engagement .service-card .service-title,
#engagement .service-card h3,
#competition .comp-card h3,
#philosophy .service-card h3,
#why .service-card h3 {
  color: var(--mahu-glass-title) !important;
}

#engagement .service-card .service-desc,
#engagement .service-card p,
#engagement .service-card li,
#engagement .service-card span,
#competition .comp-card p,
#competition .comp-card li,
#competition .comp-card span,
#philosophy .service-card p,
#philosophy .service-card li,
#why .service-card p,
#why .service-card li {
  color: var(--mahu-glass-desc) !important;
}

/* li 前面有 ✕ / △ / ✓ 符号，需保留字形色但整体提亮 */
#competition .comp-card li {
  color: rgba(255, 255, 255, 0.84) !important;
}
#competition .comp-card.legacy li { color: rgba(255, 255, 255, 0.80) !important; }

/* ---------- 9. 全站文字对比度兜底 ----------
   任何深底区块内的卡片/标题，若前景与背景亮度接近则强制提亮 */
.home-section .service-card,
.home-section .scenario-card,
.home-section .comp-card,
.home-section .industry-card {
  text-shadow: 0 1px 2px rgba(6, 10, 28, 0.35);
}

/* ---------- 10. 深底玻璃卡片：文字/徽章对比度补漏（2026-10-01 Cline） ----------
   背景：v20.css 的 !important 规则（.comp-card.evolutionary h3 渐变、
   .mb-trend 紫色、.comp-badge 青字）是按【浅底】设计的，落到本文件定义的
   深色玻璃卡片（rgba(18,13,44,.86)）上就变成"深字压深底"。
   实测审计：深底 70 处不达标，最低 1.30:1。
   原则：只在深底玻璃作用域内提亮，不动浅底规则。 */

/* 渐变标题：深底上渐变两端都要够亮（原来 var(--text-primary)=#0d0a1f 几乎隐形） */
#competition .comp-card.evolutionary h3 {
  background: linear-gradient(135deg, #ffffff 0%, #a5f3fc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

/* 指标块：渐变值 + 说明 + 趋势，深底上全部提亮 */
#metrics .metric-block .mb-value {
  background: linear-gradient(135deg, #c4b5fd 0%, #7dd3fc 55%, #5eead4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}
#metrics .metric-block .mb-label { color: rgba(255, 255, 255, 0.86) !important; }
#metrics .metric-block .mb-trend { color: #c4b5fd !important; }

/* 徽章：对比度令牌在深底上用亮色 */
#competition .comp-card .comp-badge { color: rgba(255, 255, 255, 0.92) !important; }
#competition .comp-card.legacy .comp-badge  { color: #cbd5e1 !important; }
#competition .comp-card.functional .comp-badge { color: #93c5fd !important; }
#competition .comp-card.evolutionary .comp-badge { color: #5eead4 !important; }
#competition .comp-card .comp-desc { color: rgba(255, 255, 255, 0.86) !important; }
#competition .comp-card .recommended-tag { color: #ffffff !important; }