/* layouts.css — 多模板布局变体配套 CSS
*
* 仅 split 布局需要本文件。centered 布局沿用 seo_global.css，无需引入。
*
* 引入方式：split 站点的 在 seo_global.css 之后再引入本文件：
* （已含 seo_global.css 内容）
*
*
* 设计文档：docs/plans/2026-06-09-多模板布局变体-design.md
* 复用的基类（来自 seo_global.css，不在此重定义）：
* .hero-v2 / .cta-primary / .cta-secondary / .cta-meta / .hero-sub
*/
/* ─────────── 模板B：左右分栏型 Hero ─────────── */
/* split 容器：左右两栏。覆盖 hero-v2 的居中文本，改左对齐 */
.hero-split { text-align: left; }
.hero-split .container {
display: flex;
align-items: stretch; /* 左右栏等高，顶边对齐 */
gap: 40px;
max-width: 1080px; /* 比居中型 980 略宽，容纳右栏 */
}
/* 左栏：文字 + 按钮 */
.hero-split .hero-left { flex: 1 1 auto; min-width: 0; }
.hero-split .hero-left h1 { margin: 0 0 14px; } /* 沿用 hero-v2 字号，仅去掉居中外边距 */
.hero-split .hero-left .hero-sub { margin: 0 0 24px; max-width: none; }
.hero-split .hero-left .cta-row { justify-content: flex-start; } /* 按钮左对齐 */
.hero-split .hero-left .cta-meta { margin: 8px 0 0; }
/* 右栏：大图标 + 精简实体卡，整体卡片化，顶边与左栏 H1 对齐 */
.hero-split .hero-right {
flex: 0 0 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* 顶部对齐，不再垂直居中飘移 */
gap: 16px;
padding-top: 4px; /* 与左栏 H1 视觉基线微调对齐 */
}
.hero-split .hero-icon-lg {
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-split .hero-icon-lg svg { width: 100%; height: 100%; }
/* 精简实体卡 */
.hero-split .mini-entity {
width: 100%;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 16px 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.hero-split .mini-entity-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px solid #f1f5f9;
}
.hero-split .mini-entity-row:last-child { border-bottom: none; }
.hero-split .mini-entity-label { font-size: 13px; color: #64748b; }
.hero-split .mini-entity-value { font-size: 14px; font-weight: 600; color: #0f172a; }
/* ─────────── 移动端：强制堆叠（满足 SEO公共规范 §2.16） ─────────── */
@media (max-width: 768px) {
.hero-split { text-align: center; }
.hero-split .container { flex-direction: column; gap: 24px; }
.hero-split .hero-left .hero-sub { margin: 0 auto 24px; }
.hero-split .hero-left .cta-row { justify-content: center; }
.hero-split .hero-left .cta-meta { margin: 8px auto 0; }
.hero-split .hero-right { flex: none; width: 100%; max-width: 320px; margin: 0 auto; }
.hero-split .hero-icon-lg { width: 88px; height: 88px; }
}