/* ============================================================
   外贸 ERP · product-trade-erp.css
   页面专属微调（加载顺序：products.css → product-shared.css → 本文件）
   ============================================================ */

/* ============================================================
   Banner：深色背景图 /images/bg4.jpg（2000×500，原名引用）
   高 500px；背景图按高 500px 等比、水平居中显示，
   视口宽于图片时两侧回落背景色 #0A3B70
   ============================================================ */
.pf-hero {
    height: 500px;
    background-color: #0A3B70;
    background-image: url('/images/bg4.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

/* 共享层的浅色蒙版服务于视频背景，深色图下直接移除 */
.pf-hero::before {
    display: none;
}

/* 单列布局，内容左对齐、垂直居中 */
.pf-hero .pf-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    height: 100%;
    padding: 40px 24px;
    align-items: center;
    text-align: left;
}

/* 深色底上的文字对比 */
.pf-hero h1 {
    font-size: clamp(36px, 3.9vw, 50px);
    color: #fff;
}
.pf-hero h1 em {
    color: #69B4FF;
}
.pf-hero .pf-slogan {
    color: #F0F6FF;
}
.pf-hero .pf-lead {
    max-width: 760px;
    color: rgba(255, 255, 255, .8);
}
.pf-hero .pf-actions {
    justify-content: flex-start;
    margin-bottom: 0;
}
.pf-hero .pf-btn-ghost {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
}
.pf-hero .pf-btn-ghost:hover {
    border-color: #fff;
    color: #fff;
}

/* 响应式：压缩间距与字号，保证内容控制在 500px 内 */
@media (max-width: 900px) {
    .pf-hero .pf-hero-grid {
        padding: 32px 20px;
    }
}
@media (max-width: 768px) {
    .pf-hero .pf-hero-grid {
        padding: 30px 20px;
    }
    .pf-hero .pf-slogan {
        font-size: 1.0625rem;
        margin-bottom: 12px;
    }
    .pf-hero .pf-lead {
        font-size: .875rem;
        line-height: 1.75;
        margin-bottom: 20px;
    }
    .pf-hero .pf-actions {
        gap: 10px;
    }
}

/* -- 产品架构图：预留设计师图片位 -- */
#architecture .pf-ph {
    min-height: 560px;
}

#architecture .pf-arch-note {
    margin-top: 16px;
}

/* -- 核心功能：9 个功能块，三列铺排 -- */
#features .pf-feats {
    grid-template-columns: repeat(3, 1fr);
}

/* -- AI 应用：本页为两项（重复性 / 执行风险提示），两列铺排 -- */
#ai .pf-ai-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* -- 最佳实践：5 张卡，三列铺排 -- */
#practices .pf-prac {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1200px) {
    #features .pf-feats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 980px) {
    #ai .pf-ai-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #architecture .pf-ph {
        min-height: 340px;
    }
}

@media (max-width: 640px) {
    #features .pf-feats,
    #practices .pf-prac {
        grid-template-columns: 1fr;
    }
}