/* ============================================================
   layout_T2.css — 转化型变体 T2「分栏 Hero 型」专属布局层
   ------------------------------------------------------------
   配套渲染函数：layout_engine.render_T2_split_hero()
   输出结构：<div class="t2-layout">{hero}{body}</div>
   说明：T2 的左右分栏视觉由 Hero 区内部（hero_split）实现，
        本层只负责整页容器约束 + 下方 body 通栏排版。
   颜色/字体/圆角等全部继承 seo_global.css 的 CSS 变量，零硬编码。
   ============================================================ */

.t2-layout {
  width: 100%;
}

/* 下方通栏内容区限宽居中，与公共 .container 对齐 */
.t2-layout > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.t2-layout > .t2-layout-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* T2 Hero 区左右分栏栅格（当 hero 由 hero_split 输出 .hero-split 时生效） */
.t2-layout .hero-split .container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: center;
}

.t2-layout .hero-split .hero-left {
  min-width: 0;
}

/* 右栏实体卡：半透明卡片，继承公共圆角 */
.t2-layout .hero-split .hero-right .entity-card {
  background: var(--blue-50);
  border-radius: 14px;
  padding: 22px;
}

/* 响应式：移动端塌为单列 */
@media (max-width: 768px) {
  .t2-layout .hero-split .container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ── 通用内容容器限宽 ── */
.container-page { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 20px; }

/* ── 正文排版间距（匹配 .section-body > * 和 .t2-layout 中的正文元素）── */
.section-body { font-size: 16px; line-height: 1.85; color: #374151; padding: 24px 0; }
.section-body p { margin: 0 0 20px 0; }
.section-body h2 { font-size: 22px; font-weight: 700; color: #111827; margin: 40px 0 16px 0; padding-bottom: 8px; border-bottom: 2px solid #e5e7eb; }
.section-body h3 { font-size: 18px; font-weight: 600; color: #1f2937; margin: 28px 0 12px 0; }
.section-body ul, .section-body ol { margin: 0 0 20px 0; padding-left: 24px; }
.section-body li { margin-bottom: 8px; line-height: 1.7; }
.section-body strong { color: #111827; }
.section-body table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.section-body th { background: #f3f4f6; padding: 12px 16px; text-align: left; font-weight: 600; border-bottom: 2px solid #e5e7eb; }
.section-body td { padding: 10px 16px; border-bottom: 1px solid #e5e7eb; }
.section-body a { color: #2563eb; text-decoration: none; }
.section-body a:hover { text-decoration: underline; }

/* t2-layout direct text elements: spacing only, no margin override */
.t2-layout > p { margin-bottom: 20px; }
.t2-layout > h2 { font-size: 22px; font-weight: 700; color: #111827; margin-top: 40px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #e5e7eb; }
.t2-layout > h3 { font-size: 18px; font-weight: 600; color: #1f2937; margin-top: 28px; margin-bottom: 12px; }
.t2-layout > ul, .t2-layout > ol { margin-bottom: 20px; padding-left: 24px; }
.t2-layout > li { margin-bottom: 8px; line-height: 1.7; }

/* ── 视觉组件宽度约束 ── */
.steps-v2, .notice-v2, .faq-v2, .cta-section-v2, .compare-table { max-width: 1100px; margin-left: auto; margin-right: auto; }
.t2-layout .hero-v2 .cta-primary span { color: #fff !important; font-size: 16px; font-weight: 600; }
.t2-layout .hero-v2 .cta-primary svg { color: #fff !important; }
