@charset "utf-8";
/* ============================================================================
 * solution-common.css — 解决方案二级页共享样式
 * ----------------------------------------------------------------------------
 * 引入方式：13 个解决方案页模板的 <head> 中，放在该页专属 CSS **之后**（最后一份样式表）
 *   <link href="static/css/solution-common.css" rel="stylesheet">
 *
 * 两段结构：
 *   第 1 段  平台入口区块（platform-entry / pe-card）—— 由 platform-entry.html 内联
 *            <style> 原样迁入，选择器保持不变
 *   第 2 段  .sol-* 共享区块体系（解决方案页正文区块：标题/网格/卡片/列表/步骤/标签/FAQ/CTA）
 *
 * 注：导航「AI平台」子菜单的滚动修正已迁出至 nav-submenu.css（由 header.html 全站引入），
 *     本文件不再包含 .submenu--scroll 任何规则。
 *
 * 三条硬约束（改本文件前必读）：
 *   1. 禁止全局 reset：本文件不得出现 html / body / * / img / a / h1..h6 等裸元素选择器，
 *      所有规则必须写在类名或 #id 选择器内。
 *   2. 禁止改框架模板的既有内联样式方案：模板里不得新增内联 <style>/<script>，
 *      样式一律写进本文件（ss 框架会把模板里的 {...} 编译成 PHP，内联 CSS 会导致整页 500）。
 *   3. 标题语义升级必须配合本文件的 .sol-h2 / .sol-h3 字号钉死类：
 *      style.css 全局 h3=30px、h5=18px，直接升级标签会撑破版式。
 *
 * 配色（沿用站点主色）：深灰蓝 #35404e · 主绿 #a3c85e · 辅助绿 #7ba832
 *                     浅底 #f8f9fa · 边框 #e9ecef · 正文灰 #5b6672 / #838c97
 * 断点：992 / 768 / 420（与现有样式保持一致）
 * ========================================================================= */

/* ============================================================================
 * 第 1 段 · 平台入口区块（由 platform-entry.html 原 <style> 迁入，选择器不变）
 * ========================================================================= */
/* 平台入口区块样式，全部以 .platform-entry 前缀限定，不影响全站其他元素 */
.platform-entry {
    box-sizing: border-box;
    width: 100%;
    padding: 56px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}
.platform-entry *,
.platform-entry *::before,
.platform-entry *::after {
    box-sizing: border-box;
}
.platform-entry__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
}
.platform-entry__head {
    text-align: center;
    margin-bottom: 30px;
}
.platform-entry__title {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
    color: #35404e;
    letter-spacing: 1px;
}
.platform-entry__title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 3px;
    background: #a3c85e;
}
.platform-entry__subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #838c97;
}
.platform-entry__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 16px;
}
.platform-entry .pe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 18px 18px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.platform-entry .pe-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #a3c85e;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.platform-entry .pe-card:hover,
.platform-entry .pe-card:focus {
    transform: translateY(-4px);
    border-color: #a3c85e;
    box-shadow: 0 10px 24px rgba(53, 64, 78, 0.12);
    text-decoration: none;
}
.platform-entry .pe-card:hover::before,
.platform-entry .pe-card:focus::before {
    opacity: 1;
}
.platform-entry .pe-card__name {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #35404e;
    transition: color 0.25s ease;
}
.platform-entry .pe-card:hover .pe-card__name,
.platform-entry .pe-card:focus .pe-card__name {
    color: #7ba832;
}
.platform-entry .pe-card__desc {
    display: block;
    flex: 1 1 auto;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.7;
    color: #838c97;
}
.platform-entry .pe-card__domain {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #a3c85e;
    word-break: break-all;
}
@media (max-width: 768px) {
    .platform-entry {
        padding: 40px 16px;
    }
    .platform-entry__title {
        font-size: 22px;
    }
    .platform-entry__head {
        margin-bottom: 22px;
    }
    .platform-entry__grid {
        grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
        gap: 12px;
    }
    .platform-entry .pe-card {
        padding: 16px 14px 14px;
    }
    .platform-entry .pe-card__name {
        font-size: 16px;
    }
}
@media (max-width: 420px) {
    .platform-entry__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
 * 第 2 段 · .sol-* 共享区块体系
 * 用法示例见 docs/solution-refactor-design.md §3.3 / §3.4
 * 全部为类名选择器（特异性 >= 0,1,0），优先于 style.css 的裸 h1..h6（0,0,1）
 * ========================================================================= */

/* ---------- 区块外壳 ---------- */
.sol-section {
    box-sizing: border-box;
    width: 100%;
    padding: 72px 16px;
    background: #ffffff;
}
.sol-section *,
.sol-section *::before,
.sol-section *::after {
    box-sizing: border-box;
}
.sol-section--alt {
    background: #f8f9fa;
}
.sol-section--tight {
    padding: 48px 16px;
}

/* ---------- 容器 ---------- */
.sol-inner,
.sol-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
}

/* ---------- 标题组 ---------- */
.sol-head {
    text-align: center;
    margin: 0 0 32px;
}
.sol-h2 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
    color: #35404e;
    letter-spacing: 1px;
}
.sol-h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 3px;
    background: #a3c85e;
}
.sol-head--left {
    text-align: left;
}
.sol-head--left .sol-h2::after {
    margin-left: 0;
}
.sol-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #838c97;
}
/* 字号钉死工具类：h5->h3 / h4->h3 升级时必须加，防止 30px 撑破卡片 */
.sol-h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: #35404e;
}
.sol-h4 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: #35404e;
}
.sol-lead {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.8;
    color: #4a5560;
}
.sol-lead:last-child {
    margin-bottom: 0;
}

/* ---------- 卡片网格 ---------- */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.sol-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}
.sol-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
.sol-card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 20px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sol-section--alt .sol-card {
    background: #ffffff;
}
.sol-card:hover {
    transform: translateY(-4px);
    border-color: #a3c85e;
    box-shadow: 0 10px 24px rgba(53, 64, 78, 0.1);
}
.sol-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 14px;
    border-radius: 10px;
    background: #f1f7e6;
    color: #7ba832;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
.sol-card__title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: #35404e;
}
.sol-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: #5b6672;
}
.sol-card__text:last-child {
    margin-bottom: 0;
}

/* ---------- 要点列表 ---------- */
.sol-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sol-list > li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.8;
    color: #5b6672;
}
.sol-list > li:last-child {
    margin-bottom: 0;
}
.sol-list > li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a3c85e;
}

/* ---------- 实施路径 / 步骤 ---------- */
.sol-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sol-step {
    position: relative;
    box-sizing: border-box;
    padding: 20px 18px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
}
.sol-step__no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 0 12px;
    border-radius: 50%;
    background: #a3c85e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.sol-step__title {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: #35404e;
}
.sol-step__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #5b6672;
}

/* ---------- 场景标签 ---------- */
.sol-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sol-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f1f7e6;
    color: #5f7a2a;
    font-size: 14px;
    line-height: 1.6;
    white-space: nowrap;
}

/* ---------- FAQ（常显 H3 + P，禁用折叠） ---------- */
.sol-faq .sol-inner,
.sol-faq .sol-container {
    max-width: 980px;
}
.sol-faq__item {
    box-sizing: border-box;
    padding: 18px 0;
    border-bottom: 1px solid #e9ecef;
}
.sol-faq__item:first-of-type {
    border-top: 1px solid #e9ecef;
}
.sol-faq__q {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
    color: #35404e;
}
.sol-faq__a {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #5b6672;
}

/* ---------- CTA 转化区 ---------- */
.sol-cta {
    background: #35404e;
    color: #ffffff;
    text-align: center;
    padding: 64px 16px;
}
.sol-cta__title {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.35;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
}
.sol-cta__title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 3px;
    background: #a3c85e;
}
.sol-cta__sub {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}
.sol-btn {
    display: inline-block;
    margin: 0 6px;
    padding: 14px 36px;
    border: 0;
    border-radius: 999px;
    background: #a3c85e;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.sol-btn:hover,
.sol-btn:focus {
    background: #7ba832;
    color: #ffffff;
    text-decoration: none;
}
.sol-btn--ghost {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.sol-btn--ghost:hover,
.sol-btn--ghost:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.85);
    color: #ffffff;
}

/* ---------- 数据口径注释 ---------- */
.sol-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #98a1ab;
}

/* ---------- 响应式：平板 <=992 ---------- */
@media (max-width: 992px) {
    .sol-section {
        padding: 56px 16px;
    }
    .sol-grid,
    .sol-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sol-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .sol-head {
        margin-bottom: 26px;
    }
}

/* ---------- 响应式：移动 <=768 ---------- */
@media (max-width: 768px) {
    .sol-section {
        padding: 56px 16px;
    }
    .sol-h2 {
        font-size: 22px;
    }
    .sol-cta__title {
        font-size: 22px;
    }
    .sol-card {
        padding: 20px 16px;
    }
    .sol-cta {
        padding: 56px 16px;
    }
}

/* ---------- 响应式：小屏 <=420 ---------- */
@media (max-width: 420px) {
    .sol-section {
        padding: 40px 16px;
    }
    .sol-grid,
    .sol-grid--2,
    .sol-grid--4 {
        grid-template-columns: 1fr;
    }
    .sol-steps {
        grid-template-columns: 1fr;
    }
    .sol-cta {
        padding: 44px 16px;
    }
    .sol-btn {
        display: block;
        width: 100%;
        margin: 0 0 12px;
        padding: 14px 20px;
    }
    .sol-btn:last-child {
        margin-bottom: 0;
    }
}

/* ============================================================================
 * 第 3 段 · 新增解决方案页通用首屏（羊业/鹿业/马业等新页复用）
 * 使用：<section class="sol-hero"><div class="sol-hero__inner">
 *          <h1 class="sol-hero__title">…</h1><p class="sol-hero__sub">…</p></div></section>
 * ========================================================================= */
.sol-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 520px;
    padding: 140px 20px 80px;
    background: url(../images/home/bg-blog-solution.jpg) center center / cover no-repeat;
    text-align: center;
    overflow: hidden;
}
.sol-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(37, 41, 52, 0.66);
}
.sol-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
}
.sol-hero__title {
    margin: 0 0 16px;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
}
.sol-hero__sub {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 992px) {
    .sol-hero {
        min-height: 420px;
        padding: 120px 16px 60px;
    }
    .sol-hero__title {
        font-size: 32px;
    }
}
@media (max-width: 768px) {
    .sol-hero {
        min-height: 320px;
        padding: 100px 16px 48px;
    }
    .sol-hero__title {
        font-size: 26px;
        letter-spacing: 1px;
    }
    .sol-hero__sub {
        font-size: 15px;
    }
}