/* =====================================================================
   通用区块样式（v1.0.51）
   服务于 flt/hero / flt/cta / flt/metrics / flt/section 四个通用区块。

   设计纪律：这些区块「命名只描述视觉/结构、不绑定业务场景」，
   因此任何 post type（页面 / 文章 / 产品 / 案例 / FAQ）都可能使用它们，
   样式不能像 case.css 那样只挂在案例页 —— 独立成文件，
   由 inc/assets.php 用 has_block() 逐个字符串判断后条件加载。

   变量全部来自 main.css :root（全局单一事实源，本文件不重复定义）。
   ===================================================================== */

/* ============ 通用 Hero（flt/hero） ============ */
.flt-hero {
  position: relative;
  overflow: hidden;
  /* v1.0.60：默认 margin-top: 40px + border-radius: 10px —— 让正文里内嵌的 hero 与上方内容有自然分隔、不再像矩形卡片。
     页面顶部 hero（archive / 首页）通过 inlineStyle='margin-top:0;border-radius:0;' 覆盖（archive-flt_case.php 已配）。 */
  margin-top: 40px;
  border-radius: 10px;
  padding: 100px 0 96px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--divider);
  background: linear-gradient(180deg, rgba(1,77,255,.08) 0%, rgba(1,77,255,.035) 50%, rgba(1,77,255,.01) 100%);
}

/* v1.0.118：**隐藏页面标题的页面**（body.flt-page--no-title，由「页面配置」面板的
   「隐藏页面标题」开关产生）—— 让正文的**第一个** hero 与页面顶部（透明主导航）**无缝衔接**：
   顶部外边距归零 + 顶部圆角归零。
   · 与「归档页 / 首页」的既有做法**完全一致**（见上方 v1.0.60 注释：
     页面顶部 hero 通过 `margin-top:0;border-radius:0` 覆盖）。
   · 为什么只针对 no-title 页面：正文**中间**内嵌的 hero 仍应保留 40px 分隔与圆角（原设计意图）。
   · 选择器精确到 `.entry-content` 的**第一个子元素** ⇒ 只影响页面首屏那一个 hero；
     特异性 (0,3,1) > `.flt-hero` (0,1,0)，**无需 !important**。
   · 修的是 v1.0.115「方案 A」的漏项：当时只把页面容器的 padding-top 归零，
     hero 自身的 40px margin-top 仍会留出顶部缝隙（Boss 在 /contact/ 实测截图）。 */
body.flt-page--no-title .entry-content > .flt-hero:first-child {
  margin-top: 0;
  border-radius: 0;
}

.flt-hero .wrap {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 48px;
  align-items: center;
}
.flt-hero .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--primary); font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 24px;
}
.flt-hero .hero-eyebrow::before {
  content: ""; width: 28px; height: 1.5px; background: var(--primary); border-radius: 1px;
}
.flt-hero h1 {
  font-size: 48px; line-height: 1.2; font-weight: 700; letter-spacing: -.5px;
  margin-bottom: 18px; color: var(--ink-1);
}
.flt-hero h1 em { font-style: normal; color: var(--primary); }
.flt-hero .lede {
  font-size: 17px; line-height: 1.65; color: var(--text-sub);
  max-width: 540px; margin-bottom: 32px;
}
.flt-hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* v1.0.84：【修 flt/hero 区块嵌入产品详情正文时按钮文字变主题蓝】
   根因：product-detail.css 的 `.flt-pdetail .ov-content a{color:var(--primary)}` (0,2,1)
       压过 main.css 的 `.btn-primary{background:var(--accent);color:#0F172A}` (0,1,0) —— 按钮同为 <a>。
   根治：product-detail.css 该规则已改为 `a:not(.btn)`（与 v1.0.78 修「下划线」同一手法），
       从源头隔离「正文链接色」与「按钮色」，flt/cta 等其它区块一并受益。
   本段保留作「模块级统一 + 防御」：
     - 统一：让 flt/hero 内所有按钮（含次要 ghost 按钮）文字统一为 #0F172A，符合本区块视觉规范；
     - 防御：即便未来再出现高特异性的链接规则，本区块按钮也不会被染色。 */
.flt-hero .hero-actions .btn,
.flt-hero .hero-actions .btn:hover,
.flt-hero .hero-actions .btn:focus,
.flt-hero .hero-actions .btn:active { color: #0F172A; }
.flt-hero .hero-visual {
  position: relative; width: 100%; max-width: 460px; margin-left: auto; aspect-ratio: 5/4;
  /* v1.0.55：加圆角 + overflow hidden，让 SVG 视觉 / 用户上传媒体不再是矩形 */
  border-radius: var(--r-lg);
  overflow: hidden;
}
.flt-hero .hero-visual svg { width: 100%; height: 100%; display: block; }
/* v1.0.52：用户上传的真实图片/视频（替代 SVG 抽象视觉） */
.flt-hero .hero-visual .hero-media-img,
.flt-hero .hero-visual video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px -10px rgba(15,23,42,.12);
}

/* ============ 通用 CTA（flt/cta） ============ */
.flt-cta { padding: 64px 0; margin-top: 40px; }
.flt-cta .cta-box {
  border-radius: var(--r-lg); padding: 36px 44px;
  display: flex; flex-direction: row; justify-content: space-between;
  align-items: center; gap: 24px; text-align: left;
}
.flt-cta .cta-box > div { flex: 1; min-width: 0; }
.flt-cta h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.3px; }
.flt-cta p { max-width: 560px; font-size: 14.5px; line-height: 1.6; }

/* 变体：主色底 */
.flt-cta-primary .cta-box { background: var(--primary); color: #fff; }
.flt-cta-primary .cta-box p { color: rgba(255,255,255,.85); }
.flt-cta-primary .btn-on-primary { background: #fff; color: var(--primary); font-weight: 600; }
.flt-cta-primary .btn-on-primary:hover { background: var(--bg-sub); }

/* 变体：浅色底 */
.flt-cta-soft .cta-box { background: var(--primary-tint); }
.flt-cta-soft .cta-box h2 { color: var(--ink-1); }
.flt-cta-soft .cta-box p { color: var(--text-sub); }
.flt-cta-soft .btn-on-primary { background: var(--primary); color: #fff; font-weight: 600; }

/* 变体：描边 */
.flt-cta-outline .cta-box { background: #fff; border: 1px solid var(--border); }
.flt-cta-outline .cta-box h2 { color: var(--ink-1); }
.flt-cta-outline .cta-box p { color: var(--text-sub); }
.flt-cta-outline .btn-on-primary { background: var(--primary); color: #fff; font-weight: 600; }

/* ============ 通用内容小节（flt/section） ============
   v1.0.55：section 容器不再有 padding-left —— 标题/正文与正文其他块（H2/p/列表）
   左对齐；变体的左边框只挂在容器上，标题/正文的左内缩改放在 .sec-title / .sec-body 上。 */
.flt-section { padding: 30px 0; margin-bottom: 40px; }
.flt-section .sec-title {
  font-size: 28px; font-weight: 700; color: var(--ink-1);
  letter-spacing: -.4px; line-height: 1.35;
  /* v1.0.58：去掉 border-bottom + padding-bottom，与详情页 .block h2 / 相关案例 .section-head h2 完全统一
     （变体靠左边框区分，不再用下划线）。标题与正文间距保持 24px（v1.0.56 已调整）。 */
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
  /* 默认 padding-left: 0：与正文对齐；有边框的变体再覆盖 */
  padding-left: 0;
}
.flt-section .sec-body {
  color: var(--text-sub); font-size: 16px; line-height: 1.8;
  padding-left: 0;
}
.flt-section .sec-body p { margin-bottom: 14px; }
.flt-section .sec-body p:last-child { margin-bottom: 0; }
.flt-section .sec-body b,
.flt-section .sec-body strong { color: var(--ink-1); font-weight: 600; }
.flt-section .sec-body ul { margin: 0 0 14px; padding-left: 22px; }
.flt-section .sec-body li { margin-bottom: 8px; }

/* —— 6 个语义变体：只挂左边框 + 标题色；标题/正文的 padding-left 由下方选择器统一加 —— */
.flt-section .sec-title::before {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  color: #fff; background: var(--primary);
}

/* v1.0.55：default 变体无边框 → 容器/标题/正文 padding-left 全 0，与正文完美对齐 */
.flt-section-default .sec-title::before { content: none; display: none; }

/* 5 个语义变体：左边框 + 标题色（前缀图标在 .sec-title::before） */
.flt-section-challenge { border-left: 3px solid var(--accent-deep); }
.flt-section-challenge .sec-title { color: var(--accent-deep); border-bottom-color: rgba(230,94,0,.2); }
.flt-section-challenge .sec-title::before { content: "!"; background: var(--accent-deep); }

.flt-section-solution { border-left: 3px solid var(--success); }
.flt-section-solution .sec-title { color: var(--success); border-bottom-color: rgba(16,185,129,.2); }
.flt-section-solution .sec-title::before { content: "\2713"; background: var(--success); }

.flt-section-feature { border-left: 3px solid var(--primary); }
.flt-section-feature .sec-title { color: var(--primary); border-bottom-color: rgba(1,77,255,.18); }
.flt-section-feature .sec-title::before { content: "\2605"; background: var(--primary); }

.flt-section-warning { border-left: 3px solid var(--warn); }
.flt-section-warning .sec-title { color: var(--warn); border-bottom-color: rgba(245,158,11,.25); }
.flt-section-warning .sec-title::before { content: "!"; background: var(--warn); }

/* v1.0.55：v1.0.56 移除 FAQ 紫色变体（紫色用得少，与「问」语义重叠）。

   有边框的变体 → 标题/正文左缩 16px（避开边线） */
.flt-section-challenge .sec-title,
.flt-section-challenge .sec-body,
.flt-section-solution .sec-title,
.flt-section-solution .sec-body,
.flt-section-feature .sec-title,
.flt-section-feature .sec-body,
.flt-section-warning .sec-title,
.flt-section-warning .sec-body {
  padding-left: 16px;
}



/* ============ 指标网格（flt/metrics） ============
   v1.0.51：基础样式由 case.css 迁移至此。
   metrics 已是通用区块，任何 post type 都可能使用，
   样式不能只挂在 case.css（仅案例页加载），故由 blocks.css 统一提供。 */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.metric {
  background: #fff; border: 1px solid var(--divider); border-radius: var(--r-md);
  padding: 22px; transition: border-color .2s;
}
.metric:hover { border-color: transparent; }
.metric .m-k { font-size: 12px; color: var(--text-weak); font-weight: 600; letter-spacing: .5px; margin-bottom: 12px; text-transform: uppercase; }
.metric .m-v { font-size: 30px; font-weight: 700; letter-spacing: -.5px; color: var(--primary); line-height: 1; margin-bottom: 8px; }
.metric .m-v b { font-weight: 700; }
.metric .m-v small { font-size: 14px; font-weight: 600; color: var(--text-weak); margin-left: 3px; }
.metric .m-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px dashed var(--divider); }
.metric .m-down { font-size: 13px; font-weight: 700; color: var(--success); }
.metric .m-down.neutral { color: var(--primary); }
.metric .m-vs { font-size: 11px; color: var(--text-weak); font-weight: 500; }
.metric.hl { background: var(--primary-tint); border-color: transparent; }
.metric.hl .m-k { color: var(--primary); }
.metric.hl .m-v { font-size: 36px; }

/* 列数变体（区块属性 cols） */
.metrics.cols-2 { grid-template-columns: repeat(2, 1fr); }
.metrics.cols-3 { grid-template-columns: repeat(3, 1fr); }
.metrics.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============ 响应式 ============ */
@media (max-width: 900px) {
  /* v1.0.82：单列时 gap 归零 —— 原 gap:48px 在单列下变成文案与视觉图之间的行间距，
     与下方 .hero-visual 的 margin-top:24px 叠加成 72px 空白（Boss 反馈 gap 过宽）。
     间距统一交给 .hero-visual margin-top 承担，与案例详情 detail-hero 同手法。 */
  .flt-hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .flt-hero h1 { font-size: 36px; }
  .flt-hero .hero-visual { margin: 24px 0 0; max-width: 380px; }
  .flt-cta .cta-box { flex-direction: column; align-items: flex-start; padding: 28px; }
  .metrics.cols-3,
  .metrics.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* v1.0.82：48 → 84px 顶部内边距 —— 48px 小于主导航高度（64px），移动端 hero 顶部与导航贴边/被遮。
     84 = nav 64 + 20 呼吸（与首页其他区块移动端留白口径一致）。 */
  .flt-hero { padding: 84px 0 40px; }
  .flt-hero h1 { font-size: 30px; }
  .metrics.cols-2,
  .metrics.cols-3,
  .metrics.cols-4 { grid-template-columns: 1fr; }
}