/* =============================================================================
 *  鹄得SCRM 官网 · pages.css
 *  【第 4 层】页面私有样式（尽量少）
 *   · 首页 Hero 漂浮数据卡
 *   · CRM 销售漏斗 clip-path 梯形
 *   · 伙伴页深色 Hero 变体
 *   · 能力对照表移动卡微调
 *
 *  约束：只引用 --c-* 语义别名与尺寸变量。
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 4.0 首页焦点轮播（两帧：鹄得SCRM × WorkBuddy 合作 Banner / 原 Hero）
 *     默认（无 JS）：track 纵向堆叠，两帧内容完整呈现
 *     .is-live（有 JS）：track 横向排列，左右滚动切换
 * -------------------------------------------------------------------------- */
.home-carousel {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
}
/* 默认（无 JS）：纵向堆叠，两帧内容都可读 */
.home-carousel__track {
  display: flex;
  flex-direction: column;
}
.home-carousel__slide {
  width: 100%;
}
/* .is-live：grid 同格堆叠 → 容器高度 = 较高的一帧，两帧天然等高（无需 JS 算高度） */
.home-carousel.is-live .home-carousel__track {
  display: grid;
  grid-template-areas: "stack";
}
.home-carousel.is-live .home-carousel__slide {
  grid-area: stack;
  transform: translateX(calc(var(--offset, 0) * 100%));
  transition: transform var(--dur-3) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .home-carousel.is-live .home-carousel__slide {
    transition: none;
  }
}

/* —— 第 1 帧：合作 Banner（底图为背景，文案走 HTML 层，等高裁切也不受影响） —— */
.home-banner {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 320px;
  align-items: center;
  background: var(--bg-deep);
  overflow: hidden;
}
.home-banner__media {
  position: absolute;
  inset: 0;
  background-image: url("../img/banner-home-bg.png");
  background-size: cover;
  background-position: 30% center;
  background-repeat: no-repeat;
}
/* 左侧压暗遮罩：保证白字对比度（底图被等高拉伸后仍稳定） */
.home-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--c-scrim-strong) 0%,
    var(--c-scrim-mid) 38%,
    var(--c-scrim-none) 72%
  );
}
.home-banner__inner {
  position: relative;
  z-index: 1;
  padding-top: 48px;
  padding-bottom: 48px;
}
.home-banner__lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
}
.home-banner .brand__logo {
  width: 152px;
  height: 56px;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}
.home-banner__x {
  color: var(--c-on-dark);
  font-size: var(--fs-h4);
  line-height: 1;
}
.home-banner__brand {
  color: var(--c-on-dark-strong);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* WorkBuddy 官方图标（2026-10-21）：assets/workbuddy.cn 官方渠道 logo.svg，
   40×40 viewBox=1:1，自带不透明渐变底（浅色/深色背景均可直接放置，无需改色）；
   2026-10-21 客户要求「圆角矩形、不要圆形」：SVG 内两处容器圆角 rx 20 → 9
   （第 3 行渐变底 rect + 第 26 行 clipPath rect，两者必须同步否则内部高光仍是圆裁切），
   图形本体笔画的 rx=2 属官方原稿，未改动；配色 / 尺寸 / 间距均未变。
   background-size: contain 保持原始宽高比，SVG 矢量在高清屏无损。
   尺寸与相邻 WorkBuddy 文字（--fs-h3=28px）视觉协调：桌面 32 → 37.33px / 移动 24 → 28px
   （2026-10-21 客户要求整体 ×7/6，宽高同步放大，比例与配色不变），
   垂直居中由 .home-banner__lockup 的 align-items:center 承担。 */
.home-banner__brand-logo {
  display: inline-block;
  /* 2026-10-21：整体放大 1/6（×7/6）——32 → 37.33px，宽高同步保持 1:1 不变形 */
  width: 37.33px;
  height: 37.33px;
  background-image: url("../img/logo-workbuddy.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .home-banner__brand-logo {
    /* 同上：24 → 28px */
    width: 28px;
    height: 28px;
  }
}
.home-banner__heading {
  margin: 0;
}
.home-banner__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  color: var(--c-on-dark-strong);
}
.home-banner__title + .home-banner__title {
  margin-top: 8px;
}
.home-banner__pill {
  padding: 6px 18px;
  border: 1px solid var(--c-primary-line-2);
  border-radius: var(--radius-pill);
  background: var(--c-primary-soft-2);
  color: var(--c-primary-text);
  font-size: var(--fs-caption);
  font-weight: 500;
  white-space: nowrap;
}
.home-banner__note {
  margin-top: 28px;
  color: var(--c-on-dark-sub);
}
@media (max-width: 767px) {
  .home-banner {
    min-height: 0;
  }
  .home-banner__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .home-banner .brand__logo {
    width: 116px;
    height: 43px;
  }
}

/* —— 轮播控件：仅 .is-live 时出现 —— */
.home-carousel__arrow,
.home-carousel__dots {
  display: none;
}
.home-carousel.is-live .home-carousel__arrow {
  display: flex;
  position: absolute;
  top: 50%;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  color: var(--c-text);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
.home-carousel.is-live .home-carousel__arrow:hover {
  color: var(--c-primary-text);
  border-color: var(--c-primary-line-2);
  box-shadow: var(--shadow-card-hover);
}
.home-carousel.is-live .home-carousel__arrow:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.home-carousel__arrow--prev { left: 16px; }
.home-carousel__arrow--next { right: 16px; }
@media (max-width: 767px) {
  .home-carousel.is-live .home-carousel__arrow {
    width: 34px;
    height: 34px;
    margin-top: -17px;
  }
  .home-carousel__arrow--prev { left: 8px; }
  .home-carousel__arrow--next { right: 8px; }
}

.home-carousel.is-live .home-carousel__dots {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  z-index: 2;
  gap: 8px;
  justify-content: center;
}
.home-carousel__dot {
  width: 28px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), width var(--dur-1) var(--ease);
}
.home-carousel__dot[aria-selected="true"] {
  width: 44px;
  background: var(--c-primary);
}
.home-carousel__dot:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
 * 4.1 首页 Hero（左文右图 + 漂浮数据卡）
 * -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--split-gap);
  align-items: center;
}
@media (max-width: 1023px) {
  .hero__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
.hero__actions { margin-top: 36px; }
.hero__lead { margin-top: 24px; }
.hero__media { position: relative; }

.hero-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  white-space: nowrap;
}
.hero-float__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
}
.hero-float__label { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-cap); }
.hero-float--tr { top: -20px; right: 8px; }
.hero-float--br { bottom: -24px; left: -12px; }

@media (max-width: 1023px) {
  /* 漂浮卡在平板及以下降为静态堆叠，绝不溢出 */
  .hero__media { display: flex; flex-direction: column; gap: 16px; }
  .hero-float {
    position: static;
    width: 100%;
    white-space: normal;
  }
}
@media (max-width: 479px) {
  .hero-float { padding: 12px 14px; }
}

/* -----------------------------------------------------------------------------
 * 4.2 CRM 销售漏斗（4 段 clip-path 梯形，宽度 100/78/56/34%）
 *     R6：视觉比例 ≠ 真实转化率，页面不得标注任何百分比。
 * -------------------------------------------------------------------------- */
.sales-funnel { display: flex; flex-direction: column; gap: 12px; }
.sales-funnel__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: center;
}
@media (max-width: 767px) {
  .sales-funnel__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
.sales-funnel__track { display: flex; justify-content: center; }
.sales-funnel__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  color: var(--c-on-primary);
  font-size: var(--fs-body);
  font-weight: 600;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  /* clip-path 兜底：老浏览器退化为圆角块，视觉近似且不影响信息 */
  border-radius: 4px;
}
.sales-funnel__seg--1 { width: 100%; background-color: var(--c-primary); }
.sales-funnel__seg--2 { width: 78%; background-color: var(--c-primary-hover); }
.sales-funnel__seg--3 { width: 56%; background-color: var(--c-primary-soft-2); color: var(--c-primary-hover); }
.sales-funnel__seg--4 { width: 34%; background-color: var(--c-primary-line); color: var(--c-primary-hover); }
.sales-funnel__cap { display: flex; flex-direction: column; gap: 4px; }
.sales-funnel__cap-title { font-weight: 600; color: var(--c-title); }
.sales-funnel--center { align-items: center; }

/* -----------------------------------------------------------------------------
 * 4.3 生态集成链路（企业微信页）
 *     横向三段式：触点层 → 鹄得SCRM 数据层 → 运营能力层
 *     用「数据流」替代原星型辐射图 —— 后者四角对称导致中部空洞、信息密度低。
 *     桌面三列 + 中间箭头连接；移动端纵向堆叠、箭头转为向下。
 * -------------------------------------------------------------------------- */
.integ-chain {
  display: grid;
  grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr);
  align-items: stretch;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
}

/* 列容器 */
.integ-chain__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* 左列触点在垂直方向均分撑满，与右列高度视觉平衡 */
.integ-chain__col--sources { justify-content: center; }
.integ-chain__col--sources .integ-chain__item { flex: 1 1 auto; }

/* 列标题（小标签） */
.integ-chain__colhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 4px;
}
.integ-chain__colhead b {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--c-title);
}
.integ-chain__colhead span {
  font-size: var(--fs-caption);
  color: var(--c-text-cap);
}

/* 外部触点项 */
.integ-chain__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  color: var(--c-title);
  font-size: var(--fs-body-sm);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.integ-chain__item:hover {
  border-color: var(--c-primary-line-2);
  box-shadow: var(--shadow-card);
}
.integ-chain__item .ico { flex-shrink: 0; color: var(--c-primary-text); }

/* 中间数据层（品牌色实心块） */
.integ-chain__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 20px;
  background-color: var(--c-primary);
  border-radius: var(--radius-lg);
  color: var(--c-on-primary);
  text-align: center;
  box-shadow: var(--shadow-modal);
}
.integ-chain__core b { font-size: var(--fs-h4); font-weight: 700; }
.integ-chain__core span { font-size: var(--fs-caption); opacity: 0.85; }

/* 连接箭头（桌面为向右，移动端转为向下） */
.integ-chain__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  color: var(--c-primary-line-2);
}
.integ-chain__arrow .ico { width: 28px; height: 28px; }

/* 右侧运营能力网格 */
.integ-chain__caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.integ-chain__cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background-color: var(--c-primary-soft);
  border-radius: var(--radius-lg);
}
.integ-chain__cap b {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--c-title);
}
.integ-chain__cap span {
  font-size: var(--fs-caption);
  color: var(--c-text-sub);
  line-height: var(--lh-caption);
}

@media (max-width: 767px) {
  .integ-chain { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .integ-chain__arrow { width: 100%; height: 32px; transform: rotate(90deg); }
  .integ-chain__caps { grid-template-columns: minmax(0, 1fr); }
}
/* -----------------------------------------------------------------------------
 * 4.4 伙伴页深色 Hero（全站唯一深色 Hero）
 * -------------------------------------------------------------------------- */
.hero--deep {
  position: relative;
  overflow: hidden;
  background-color: var(--c-dark);
  background-image: var(--grad-deep);
}
.hero--deep .t-display,
.hero--deep .t-h2 { color: var(--c-on-dark-strong); }
.hero--deep .t-lead,
.hero--deep .t-body { color: var(--c-on-dark); }
.hero--deep .eyebrow { color: var(--c-on-dark); }
/* ISSUE-A 修复：--c-text-cap(ink-500) 是为浅底设计的副文本色，
   搬到深底 #0B1B3D 上仅 3.14:1；.eyebrow__cn 只有 13px，属最看不清的组合。
   深底上的中文 eyebrow / 说明小字统一改用 --c-on-dark(brand-300，8.92:1)，
   与同级英文 eyebrow 完全一致。

   ⚠️ 注意：此处**不能**用 --c-primary-bright —— 它映射的是 brand-400
   (#4D93FF)，对深底仅 5.60:1，并非派单预期的 brand-300。 */
.hero--deep .t-caption { color: var(--c-on-dark); }
/* 不再覆盖 .btn--primary 的渐变：
   原先此处用 var(--grad-brand)，其亮端 #4D93FF 对白字仅 3.03:1，
   在深色 Hero 上属于「装饰色当按钮底色」的对比度违规。
   现统一继承 components.css 的 var(--grad-btn)（4.66:1 / 9.17:1）。 */
.hero--deep .card {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--c-dark-border);
  color: var(--c-on-dark);
}
.hero__claim {
  margin-top: 28px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-dark-border);
}
.hero__claim-text {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--c-on-dark-strong);
}
.hero__claim-note { margin-top: 10px; color: var(--c-on-dark-sub); font-size: var(--fs-caption); }
.hero__chips { margin-top: 28px; }
.hero--deep .tag {
  background-color: rgba(255, 255, 255, 0.10);
  color: var(--c-on-dark-strong);
}

/* -----------------------------------------------------------------------------
 * 4.5 任务海报页 S7 上下叠放区块的过渡带
 * -------------------------------------------------------------------------- */
.stack-band { display: flex; flex-direction: column; }
.stack-band > * + * { margin-top: var(--section-y); }

/* -----------------------------------------------------------------------------
 * 4.6 任务海报 S3 优势卡内微图示（16:10）
 * -------------------------------------------------------------------------- */
.mini-mock { position: relative; }
.mini-mock .mock { border-radius: var(--radius-lg); }

/* -----------------------------------------------------------------------------
 * 4.7 客户案例页：筛选条 + 空态
 * -------------------------------------------------------------------------- */
.case-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.case-grid__empty { margin-top: 24px; }

/* -----------------------------------------------------------------------------
 * 4.8 三大支撑 3 列 × 3 子项
 * -------------------------------------------------------------------------- */
.support-col {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.support-col__head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--c-border); }
.support-col__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
  flex-shrink: 0;
}
.support-col__items { display: flex; flex-direction: column; gap: 22px; }
.support-item__title { margin-bottom: 6px; font-weight: 600; color: var(--c-title); }

/* -----------------------------------------------------------------------------
 * 4.9 加盟流程步骤卡内时长行（未确认时整行不渲染）
 * -------------------------------------------------------------------------- */
.step-meta { margin-top: 8px; color: var(--c-text-cap); }

/* -----------------------------------------------------------------------------
 * 4.10 关于我们页标语放大
 * -------------------------------------------------------------------------- */
.hero-slogan {
  margin-top: 24px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--c-title);
  max-width: 720px;
}

/* -----------------------------------------------------------------------------
 * 4.11 表单页信息栏装饰
 * -------------------------------------------------------------------------- */
.form-aside {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
@media (max-width: 1023px) { .form-aside { position: static; } }

/* -----------------------------------------------------------------------------
 * 4.12 客户案例页统计条上分隔线在深底下的表现
 * -------------------------------------------------------------------------- */
.section--deep .stats-bar--deep .stats-item { border-top-color: var(--c-dark-border-strong); }

/* -----------------------------------------------------------------------------
 * 4.13 居中 Hero 内 H1 上下留白
 * -------------------------------------------------------------------------- */
.hero-title { margin-top: 20px; }

/* -----------------------------------------------------------------------------
 * 4.14 暖色收敛使用点 ①/②（全站仅两处，PRD S2 ≤ 2%）
 *   ① 任务海报页「裂变增长」语义强调（.poster-growth）
 *   ② 创业合伙人页返佣卡暖色细边框（components.css 的 .card--accent-warm）
 *   备选方案 B（客户要求绝对零暖色）：仅需改 tokens.css 中 --c-warning 一行映射。
 * -------------------------------------------------------------------------- */
.poster-growth {
  font-weight: 600;
  color: var(--c-warning);
}
/* -----------------------------------------------------------------------------
 * partner · Hero 标题单行（2026-10-20 用户要求「鹄得SCRM 创业合伙人」不折行）
 *   实测：56px 时标题单行宽 578px，而 Hero 左栏宽仅 544px（≥1200 视口）/ 464px（1024-1199），
 *   故按栏宽反推字号：≥1200 用 52px（536px < 544），1024-1199 用 44px（454px < 464）。
 *   <1024px 布局转为上下堆叠（整行可用宽度），保持默认字号自然折行。
 * ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  body[data-page="partner"] .hero--deep .t-display {
    font-size: 52px;
    white-space: nowrap;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body[data-page="partner"] .hero--deep .t-display {
    font-size: 44px;
    white-space: nowrap;
  }
}