/* ============================================================
   产品页公共组件样式 · product-shared.css
   适用于所有产品介绍页：
     1) 视频背景（Hero 整段 / 区块整段 / AI 卡片内）
     2) 品牌客户 logo 无缝滚动墙（includes/product_logos.php）
     3) 客户证言轮播（includes/product_testimonials.php）
   用法：<link rel="stylesheet" href="/css/product-shared.css">
   依赖：需先引入 /css/products.css（pf- 基础变量与组件）
   ============================================================ */

/* ============ 1. 视频背景 ============ */

/* ============================================================
   Hero 首屏：视频作为整段背景
   首屏为深色文字，故用浅色蒙版提亮，保证 H1/正文对比度
   ============================================================ */
.pf-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* 浅色蒙版：视频未加载时即为 hero 原有浅色渐变底 */
.pf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(244, 249, 255, .8) 0%, rgba(255, 255, 255, .84) 55%, rgba(247, 250, 255, .86) 100%);
    pointer-events: none;
}

/* 首屏内容在视频与蒙版之上 */
.pf-hero > .pf-hero-grid {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .pf-hero::before {
        background: linear-gradient(180deg, rgba(244, 249, 255, .86) 0%, rgba(255, 255, 255, .9) 55%, rgba(247, 250, 255, .92) 100%);
    }
}

/* 尊重系统“减少动效”：不播放背景视频 */
@media (prefers-reduced-motion: reduce) {
    .pf-hero-video {
        display: none;
    }
}

/* 区块背景视频：铺满整段（最佳实践） */
.pf-sec-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* 内容在视频之上 */
#practices > .pf-wrap {
    position: relative;
    z-index: 2;
}

/* 尊重系统“减少动效”：不播放背景视频 */
@media (prefers-reduced-motion: reduce) {
    .pf-sec-video {
        display: none;
    }
}

/* ============================================================
   AI 应用：视频仅作为 .pf-ai 卡片的背景（不铺满整段区块）
   静音 + 内联播放（autoplay muted loop playsinline）；无渐变遮罩，视频直接呈现
   ============================================================ */
#ai .pf-ai {
    position: relative; /* 保险：确保视频 absolute 相对卡片定位 */
    overflow: hidden;
    isolation: isolate;
}

/* 卡片背景视频：只覆盖卡片自身区域 */
.pf-ai-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* 默认可见：视频元素没有画面时自身透明，自然露出卡片背景色；有画面即显示视频 */
    opacity: .58;
    pointer-events: none;
    transition: opacity .6s ease;
}

/* JS 确认画面就绪后略微提亮（JS 未执行也不影响显示） */
#ai .pf-ai.has-video .pf-ai-video {
    opacity: .68;
}

/* 共享样式里的蓝色光晕放在视频之上、内容之下 */
#ai .pf-ai::after {
    z-index: 1;
}

/* 三张能力卡：深色底 60% 不透明，其余透出背景视频，保证白字可读 */
#ai .pf-ai-card {
    background: rgba(11, 18, 32, .6);
    border-color: rgba(255, 255, 255, .16);
}

#ai .pf-ai-card:hover {
    background: rgba(11, 18, 32, .74);
}

/* 卡片内容在视频之上 */
#ai .pf-ai-head,
#ai .pf-ai-grid {
    position: relative;
    z-index: 3;
}

@media (max-width: 768px) {
    .pf-ai-video {
        opacity: .45;
    }

    #ai .pf-ai.has-video .pf-ai-video {
        opacity: .52;
    }
}

/* 尊重系统“减少动效”：不播放背景视频 */
@media (prefers-reduced-motion: reduce) {
    .pf-ai-video {
        display: none;
    }
}

/* ============ 2. 品牌客户 logo 墙 ============ */

/* -- 品牌客户 logo：全屏宽极慢速无缝滚动条 -- */
.pf-brandlogos {
    overflow: hidden;
}

.pf-logos {
    width: 100%;
    overflow: hidden;
    padding: 22px 0;
}

.pf-logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: pfLogosScroll 90s linear infinite;
}

.pf-logos-track:hover {
    animation-play-state: paused;  /* 悬停细看时暂停 */
}

.pf-logos-track img {
    width: 40px;
    height: 40px;
    margin-right: 56px;
    object-fit: contain;
    border-radius: 8px;
    opacity: .82;
    transition: opacity .25s ease;
}

.pf-logos-track img:hover {
    opacity: 1;
}

/* 每份宽 = 14 × (40 + 56)，两份等宽，-50% 恰好一份，无缝循环 */
@keyframes pfLogosScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============ 3. 客户证言轮播 ============ */

/* ============================================================
   客户证言：逐卡滚动轮播（每次前进一张卡：855px 卡宽 + 28px 间距）
   ============================================================ */
#testimonials {
    padding: 72px 0 64px;
}

/* 轮播区横向铺满全屏，标题仍随页面容器居中 */
.pf-caro {
    width: 100%;
}

.pf-caro-viewport {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 6px 4vw;
}

.pf-caro-track {
    display: flex;
    column-gap: 28px;
    transition: transform .55s ease;
}

/* -- 卡片：整卡客户场景图（900×400）打底，卡片取图 95%（855×380）；hover 卡片不位移 -- */
.pf-caro-item {
    position: relative;
    flex: 0 0 855px;
    width: 855px;
    height: 380px;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 18px 44px -24px rgba(15, 23, 42, .35);
}

/* 背景层：cover 基础上默认放大 1/0.95 ≈ 1.0526 倍（只见图片中心 95%），hover 恢复 100% 全图，卡片尺寸不变 */
.pf-caro-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    transform: scale(1.0526);
    transition: transform .7s ease;
}

.pf-caro-item:hover .pf-caro-bg {
    transform: scale(1);
}

/* 证言内容框：宽 400px 靠左，距卡片上/左/下各 10px，65% 白色透明遮罩 */
.pf-caro-body {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 400px;
    padding: 20px 24px 18px;
    background: rgba(255, 255, 255, .65);
    border-radius: 10px;
}

/* 客户 logo：顶部左对齐，等比缩放不变形 */
.pf-caro-logo {
    height: 35px;
    object-fit: contain;
    object-position: left center;
}

/* 证言：上方弹性留白，文字沉到下半区 */
.pf-caro-item blockquote {
    margin: auto 0 16px;
    font-size: .9375rem;
    line-height: 1.85;
    color: var(--pf-ink);
}

/* 署名区：底部细分隔线收口 */
.pf-caro-item figcaption {
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, .12);
}

/* -- 滚动指示条：当前页 25px 品牌色长条，待滚动 10px 灰色短条 -- */
.pf-caro-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.pf-caro-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #CBD5E1;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.pf-caro-dots button:hover {
    background: #94A3B8;
}

.pf-caro-dots button.on {
    width: 25px;
    background: var(--pf-primary);
}

.pf-caro-dots button.on:hover {
    background: var(--pf-primary);
}

.pf-caro-item .who {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.4;
}

.pf-caro-item .who b {
    font-size: .9375rem;
    color: var(--pf-ink);
}

.pf-caro-item .who i {
    font-style: normal;
    font-size: .8125rem;
    color: var(--pf-muted);
}

@media (max-width: 640px) {
    .pf-caro-viewport {
        padding: 6px 5vw;
    }

    .pf-caro-item {
        flex: 0 0 100%;
        width: 100%;
        height: 380px;
    }

    .pf-caro-body {
        width: min(400px, 100%);
        padding: 18px 20px 16px;
    }

    .pf-caro-logo {
        height: 35px;
    }

    .pf-caro-dots {
        margin-top: 18px;
    }
}

/* ============ 4. 减少动效 ============ */

@media (prefers-reduced-motion: reduce) {
    .pf-caro-track,
    .pf-caro-bg,
    .pf-caro-dots button {
        transition: none;
    }

    .pf-caro-item:hover .pf-caro-bg {
        transform: scale(1.0526);
    }

    .pf-logos-track {
        animation: none;
    }
}

/* ============ 5. 最佳实践区块（深色底 + 视频背景） ============ */

#practices {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #0F172A; /* 视频未加载时的兜底背景色 */
}

#practices .pf-head h2 {
    color: #fff;
}

/* 默认 4 卡一行；页面可按需覆盖列数 */
#practices .pf-prac {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

#practices .pf-prac-c {
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 14px;
    padding: 22px 18px;
    transition: transform .22s, border-color .22s, box-shadow .22s;
}

#practices .pf-prac-c:hover {
    transform: translateY(-5px);
    border-color: rgba(145, 202, 255, .6);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .65);
}

/* 场景标签：亮蓝胶囊 */
#practices .pf-prac-c .sub {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 10px;
    border-radius: 100px;
    background: rgba(64, 150, 255, .16);
    border: 1px solid rgba(145, 202, 255, .38);
    color: #91CAFF;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
}

#practices .pf-prac-c .tt {
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.55;
    margin-bottom: 8px;
}

#practices .pf-prac-c p {
    font-size: .8125rem;
    line-height: 1.8;
    color: #CBD5E1;
}

/* ============ 6. 需求痛点区块（角色 / 问题 / 方案 表格行） ============ */

/* -- 需求痛点：grid 行卡片；问题块 5% 红底、方案块 5% 绿底，无边框线 -- */
#pains {
    padding: 56px 0;
}

#pains .pf-pain-list {
    display: grid;
    gap: 4px; /* 行与行之间的间距收紧 */
}

/* 行自身上下留白（左右保持 26px，列宽对齐不变） */
#pains .pf-pain-row {
    padding: 12px 26px;
}

/* 表头与数据行共用同一 grid 模板，三列严格对齐 */
#pains .pf-pain-head,
#pains .pf-pain-row {
    display: grid;
    grid-template-columns: 168px 1fr 1fr;
    gap: 8px;
}

/* 表头行左右内边距与数据行一致（26px），保证三列宽度严格相同 */
#pains .pf-pain-head {
    padding: 0 26px;
}

#pains .pf-pain-head span {
    padding: 8px 16px;
    background: #334155;
    color: #FFF;
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
}

#pains .pf-pain-row .pf-pain-q,
#pains .pf-pain-row .pf-pain-a {
    display: flex;
    align-items: center;   /* 同行等高的色块内文字垂直居中 */
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.7;
}

/* 遇到的问题块：5% 红色背景 */
#pains .pf-pain-row .pf-pain-q {
    background: rgba(245, 63, 63, .05);
}

/* 解决方案块：5% 绿色背景，无打钩图标 */
#pains .pf-pain-row .pf-pain-a {
    background: rgba(0, 180, 42, .05);
}

#pains .pf-pain-row .pf-role {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
    font-size: .9375rem;
}

#pains .pf-pain-row .pf-role i {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex: none;
}

#pains .pf-pain-row .pf-role i svg {
    width: 14px;
    height: 14px;
}

/* 窄屏：表头隐藏，行内三块竖向堆叠 */
@media (max-width: 900px) {
    #pains .pf-pain-head {
        display: none;
    }

    #pains .pf-pain-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    #pains .pf-pain-row .pf-role {
        padding: 2px 0 0;
    }

    #pains .pf-pain-row .pf-pain-q,
    #pains .pf-pain-row .pf-pain-a {
        padding: 10px 14px;
    }
}