/* ============================================================
   crm.css — 数智CRM 页（template/crm.thtml）

   5 个子页共用一页，靠页内「2级产品列表」切换。
   原先分散在 product-{sfa,tpm,dms,dp,ltc}.css 里的 .content-section 背景，
   这里按 pane 作用域收敛 —— 五份规则互不覆盖，是这个文件存在的唯一理由。

   切换状态只有两个类：is-active（参与布局）与 is-entering（播入场动画）。
   规则见下方「子页切换状态」与「body 切换动效」两节。
   ============================================================ */

/* === 内容区公共部分（原 5 份 product-*.css 里逐字重复的那两行） === */
.content-section {
    position: relative;
    padding: 64px 0;
}

/* === 子页内容区背景：一 pane 一份 === */
.crm-pane[data-pane="product-sfa"] .content-section { background: url('../images/sfa-bg.webp') center top / cover no-repeat; }
.crm-pane[data-pane="product-tpm"] .content-section { background: url('../images/tpm-bg.webp') center top / cover no-repeat; }
.crm-pane[data-pane="product-dms"] .content-section { background: url('../images/dms-bg.webp') center top / cover no-repeat; }
.crm-pane[data-pane="product-dp"]  .content-section { background: url('../images/dp-bg.webp')  center top / cover no-repeat; }
.crm-pane[data-pane="product-ltc"] .content-section { background: url('../images/ltc-bg.webp') center top / cover no-repeat; }

/* === TPM 子页特有的阶段标签（原 product-tpm.css） === */
.feature-phase {
    display: inline-block; background: #e8f0fe; border: 1px solid #0068dd;
    border-radius: 30px; padding: 2px 14px;
    font-size: 12px; color: #0068dd; margin-bottom: 10px;
}

/* === SFA 子页特有的「功能亮点」徽章 ===
   72×24 = 文字 48（4 字 × 12px）+ 左右内边距各 12，底色 #d2e7ff。
   与 collab.css 的 .feature-tag 同值，是同一套组件。
   目前只落在 SFA 上；其余 4 个子页补齐后再决定是否上收到 product-common.css。 */
.crm-pane--body[data-pane="product-sfa"] .feature-tag {
    display: block;
    width: max-content;
    height: 24px;
    line-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    background: #d2e7ff;
    font-size: 12px;
    color: #0068dd;
    margin-bottom: 16px;
}

/* ============================================================
   子页切换状态
   pane 用 display:none 收起，同一时刻只有 is-active 的那个参与布局。
   is-entering 只由「点击 tab」这一条路径加上，播完即摘（见 js/crm-tabs.js）——
   init 与 hashchange 都不加，保证刷新、导航深链跳转都不播动画。
   ============================================================ */
.crm-pane { display: none; }
.crm-pane.is-active { display: block; }

/* ============================================================
   Hash 跳转目标让开固定头 + 切换条
   ============================================================ */
.crm-pane--body {
    /* = 导航栏高（73 × --z）+ .crm-tabs (75)：让切换条顶到固定导航栏下沿。
       导航按 1920 基准缩放（见文件末），故只有它的 73px 带 --z；
       切换条自身是页面内容、不缩，75px 保持原值。
       必须与 js/crm-tabs.js 的 scrollToTabs() 落点一致 —— 跨文档深链走浏览器的
       原生 fragment 滚动（受本值支配），页内切换走 JS 滚动；两者不一致时，
       其中一条路径会多露出 20px 被截断的 hero 底边。 */
    scroll-margin-top: calc(75px + 73px * var(--z, 1));
}

/* ============================================================
   body 切换动效：新旧交叉淡入淡出
   旧内容不立即消失 —— 它停在原位淡出，新内容同时在流里淡入并滑入，
   两者在整段时长里交叠。所以中间不存在「旧内容已经没了、新内容还是
   全透明」的空档，也就不会白屏闪一下。

   离场 pane 必须绝对定位：否则新旧两个 pane 同时留在文档流里，
   容器高度会变成两者之和，下方内容先被推走再弹回来。

   overflow:hidden 用来裁掉 translateX(80px) 的溢出色。
   ============================================================ */
.crm-bodies {
    position: relative;
    overflow: hidden;
}

/* 双类门控：is-active 让 display 生效，is-entering 触发入场。
   目标 pane 在切换前必然是 display:none，两类在同一帧同步加上，
   浏览器帧末统一算样式时动画从头播。
   「点当前已选中的 tab 不播」由 js/crm-tabs.js 判断后跳过，不靠这里。

   曲线用 Material standard (0.4, 0, 0.2, 1)：慢起 → 中段加速 → 缓停，
   位移在整段时长里均匀铺开，肉眼能看清「滑进来」的过程。
   不要换回 expo-out 那类 (0.22, 1, 0.36, 1) —— 它前 25% 时间就走完 87% 路程，
   随后大半段时间几乎不动，观感是"瞬间到位"，等于没有动画（实测 t=80ms 已走 73%）。 */
.crm-pane--body.is-active.is-entering {
    animation: crmBodyIn .6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* 离场：保留 is-active（display:block）让动画播完，同时脱离文档流叠回原位。
   动画结束后由 js/crm-tabs.js 的 animationend 摘掉这两个类 —— 用「动画结束事件」
   而不是定时器，省掉「JS 毫秒数必须和 CSS 时长对齐」这类必然漂移的约定。
   pointer-events:none 让淡出中的旧内容不再拦截点击。 */
.crm-pane--body.is-leaving {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    animation: crmBodyOut .6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes crmBodyIn {
    from { transform: translateX(80px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
/* 离场只走一半位移（−40px）：与入场反向且幅度相近，
   观感是「旧内容被新内容顶走」，而不是两页各滑各的。
   注：这里刻意不写 prefers-reduced-motion 兜底 —— 「是否播动画」由
   js/crm-tabs.js 单点决定（它还要负责清状态）。若 CSS 单独把动画关掉，
   animationend 不触发，离场 pane 的 is-active/is-leaving 就永远摘不掉。 */
@keyframes crmBodyOut {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-40px); opacity: 0; }
}

/* ============================================================
   页内切换条
   1920×75 白底带 + 5 个 200×45 胶囊，胶囊间距 70、整体居中、圆角 20、
   阴影 0 0 6px 2px rgba(0,104,221,.1)；选中态 #0068dd 白字，未选中
   白底 #444 字，均 14px
   ============================================================ */
.crm-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    height: 75px;
    padding: 15px 20px;
    background: #fff;
    scroll-margin-top: calc(73px * var(--z, 1));   /* = 导航栏高，切 tab 回滚时不被固定导航栏遮住 */
}

.crm-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 200px;
    height: 45px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(0, 104, 221, .1);
    font-size: 14px;
    color: #444;
    white-space: nowrap;
    transition: color .2s, background-color .2s;
}
.crm-tab:hover { color: #0068dd; }
.crm-tab.is-active { background: #0068dd; color: #fff; }

/* 5 个胶囊 1280 的总宽在 <1380 视口下放不下。改为横向滚动而不是压缩或截断 ——
   5 个中文标签最长 7 字，缩到放得下会掉到 12px 以下，反而更难读。
   注：溢出时 justify-content:center 会让左侧项滚不到，故此处必须改 flex-start */
@media (max-width: 1380px) {
    .crm-tabs {
        justify-content: flex-start;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .crm-tabs::-webkit-scrollbar { display: none; }
    .crm-tab { width: auto; min-width: 132px; padding: 0 20px; }
}

@media (max-width: 768px) {
    .crm-tabs { height: 63px; padding: 12px 16px; }
    .crm-tab { height: 39px; min-width: 118px; font-size: 13px; }
}

/* === 顶部导航栏按 1920 基准缩放 ===
   本页是「1200 系」：内容定宽 1200 居中，不加整页 zoom（加了 1440 下会缩到 900，
   比设计稿还小）。但导航栏来自共享的 base.css，在 1920 系页面上会跟着 html 的 zoom
   一起缩 —— 于是同一视口下本页导航比它们大 33%（1440 实测：导航内宽 1425 vs 1115，
   字号 16px vs 12px）。这里单独给 .hn 挂同一个系数，只缩导航、不动内容。

   不放 base.css：它被所有页面加载，写进去会让 1920 系页面双重缩放（html 一次 +
   .hn 一次）；放本页则那些页面完全不受影响。
   实测 zoom 作用在 position:fixed 的 .hn 上仍满宽，.hn-inner 与 1920 系逐项一致。 */
@media (min-width: 1025px) {
    html { --z: min(1, calc(100vw / 1920px)); }
    .hn { zoom: var(--z); }
}