/* ============================================================
   campus.css — 校园食材阳光采购监督平台 产品页
   数值取自 Figma「创亚官网2期」· 产品-校园食材阳光采购监督平台（画布 1920 × 3866）

   本页只负责 75 ~ 3784 这段自研区：导航（0~75）由 include/header-nav.thtml 承担，
   页脚由 include/foot.thtml 承担，都不在本文件内。画布 3866 比内容 3784 多出 82px
   底部留白，属设计稿框高，不落到页面。

   纵向骨架：
       0~629      hero
     629~2804    主体三区（四大难点 / 七大闭环 / 核心场景界面），共用底纹 indexbg 9
    2804~3340    三类角色与职责（底纹 textbg 1，原稿 53% 不透明度已烘进导出件）
    3340~3784    部署与合规（自带底纹图）

   Hero 遮罩与原稿同为 SVG 线性渐变 #0068DD → 全透明（纵向 0→609.677），
   与灵智 / AI Work / 数智协同 / 即时通讯同组件，故走普通 linear-gradient。

   入场动效全部复用全站的 animations.css，本文件不定义动画。
   ============================================================ */

/* ==================== Hero ====================
   纵向用 padding-top 直接定位，不是 flex 居中：
   249 = 标题行框顶（原稿标题中心 278.68，48px × 1.2 = 57.6 行框 → 框顶 249.9）。
   胶囊顶 323.19、描述框顶 378.74，与数智协同 / 即时通讯一致，故共用一套值。

   设计稿标题／胶囊／描述整组横向中心在 x≈943，比画布中心 960 偏左 17px。
   这里按真正的居中对齐 —— 全站 hero 同为居中。 */
.hero {
    position: relative;
    min-height: 629px;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #0068dd 0%, rgba(0, 104, 221, 0) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 249px 20px 0;
}
.hero-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    /* 标题行框底 307.5 → 胶囊顶 323.19 */
    margin-bottom: 15.7px;
}
/* 胶囊：底色 #2DA8FF 20% + 白描边 40%，与全站同组件；
   高 38.71、内边距 30 取自设计稿（宽 305.5，文字约 245） */
.hero-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    height: 38.7px;
    margin: 0 auto 16.8px;
    padding: 0 30px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    background: rgba(45, 168, 255, .2);
    font-size: 16px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
/* 1198px = 设计稿描述框宽，决定两行的断行位置 */
.hero-desc {
    font-size: 24px;
    line-height: 48px;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    max-width: 1198px;
    margin: 0 auto;
}

/* ==================== 主体三区（629 ~ 2804） ====================
   底纹 1920×2172（原稿源图 675×1200，cover 铺满）；本区总高 2173，与底纹高吻合。
   81 = 区顶到首区胶囊顶（710−629）；90 = 末区卡片底到区底（2804−2714） */
.campus-main {
    background: #e9f1fc url('../images/campus-bg-main.webp') center / cover no-repeat;
    padding: 81px 0 90px;
}

/* ---- 区块头：胶囊 + 渐变标题，全页五处同构 ---- */
.sec-head { text-align: center; padding: 0 20px; }
/* 72×24 = 文字 72（6 字 × 12px）+ 左右内边距各 12；
   胶囊底 734 → 标题行框顶 763.2，四区一致取 29.2 */
.sec-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: 0 auto 29.2px;
}
/* 标题 48px 渐变填充，字距 2.88 取自设计稿 */
.sec-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 2.88px;
    background-image: linear-gradient(180deg, #00e5ff 0%, #0068dd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 标题行框底 → 内容顶，各区各自手摆，照抄原稿 */
.sec-diff   .sec-head { margin-bottom: 66.2px; }   /* 820.8 → 887 */
.sec-flow   .sec-head { margin-bottom: 56.7px; }   /* 1243.3 → 1300 */
.sec-scene  .sec-head { margin-bottom: 58.2px; }   /* 1938.8 → 1997 */
.sec-roles  .sec-head { margin-bottom: 29.2px; }   /* 2990.8 → 3020 */
.sec-deploy .sec-head { margin-bottom: 54.2px; }   /* 3439.3 → 3493.5 */

/* 区距：卡片／配图底 → 次区胶囊顶 */
.sec-diff { margin-bottom: 79px; }                 /* 1053 → 1132 */
.sec-flow { margin-bottom: 66px; }                 /* 1762 → 1828 */

/* ==================== 四大难点 ====================
   四张 330×166、间距 21.67，共 1385 居中（1920 下单边 267.5；设计稿 251，差 16.5）。
   原稿这四张无投影（与下方角色 / 部署卡不同），照抄。 */
.pain-cards {
    display: flex;
    justify-content: center;
    gap: 21.67px;
    max-width: 1465px;              /* 1385 + 左右内边距各 40 */
    margin: 0 auto;
    padding: 0 40px;
}
.pain-card {
    flex: 0 1 330px;
    min-width: 0;
    min-height: 166px;
    padding: 15px 19px 0;           /* 292 = 330 − 2 × 19，即设计稿描述框宽 */
    border-radius: 16px;
    background: rgba(253, 254, 255, .7);
    text-align: center;
}
/* 图标原图 60×60，设计稿摆在卡内居中、顶距 15 */
.pain-card-icon { width: 50px; height: 50px; margin: 0 auto; }
/* 图标底 952 → 标题行框顶 962.2 */
.pain-card-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-top: 10.2px;
}
/* 标题行框底 983.8 → 描述框顶 992；
   行高 36 取自原稿（单行，只影响这行墨迹的纵向落点） */
.pain-card-desc {
    font-size: 14px;
    line-height: 36px;
    color: #444;
    margin-top: 8.2px;
}

/* ==================== 七大闭环 ====================
   流程图整幅导出自节点渲染（1400×462，原稿取景已烘焙），故直接等比铺满 */
.flow-wrap {
    max-width: 1440px;              /* 1400 + 左右内边距各 20 */
    margin: 0 auto;
    padding: 0 20px;
}
.flow-wrap img { display: block; width: 100%; height: auto; }

/* ==================== 核心场景界面 ====================
   四张 645 宽，列距 39、行距 16，共 1329 居中（1920 下单边 295.5；设计稿 294）。
   蓝头 50 高、圆角 20 只在上两角，下接截图为平角。 */
.scene-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 39px;
    max-width: 1369px;              /* 1329 + 左右内边距各 20 */
    margin: 0 auto;
    padding: 0 20px;
}
.scene-card {
    min-width: 0;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.scene-card-head {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 18.6px;              /* 312.61 − 294 */
    background: #0068dd;
    font-size: 18px;
    color: #fff;
}
.scene-card img {
    display: block;
    width: 100%;
    aspect-ratio: 645 / 300;
    object-fit: cover;
}

/* ==================== 三类角色与职责（2804 ~ 3340） ====================
   底纹导出件已自带原稿的 53% 不透明度（烘进中心 2550×536 的图内），
   故这里按不透明铺满。
   76 = 区顶到胶囊顶（2880−2804）；60 = 卡片底到区底（3340−3280） */
.sec-roles {
    background: #eef5ff url('../images/campus-bg-roles.webp') center / cover no-repeat;
    padding: 76px 0 60px;
}
/* 三张 400×260、间距 27.5，共 1255 居中（1920 下单边 332.5；设计稿 353，差 20.5）。
   与即时通讯的「安全可控」卡片同组件，含 0 0 8px 5px 的柔光投影 */
.role-cards {
    display: flex;
    justify-content: center;
    gap: 27.5px;
    padding: 0 20px;
}
.role-card {
    flex: 0 1 400px;
    min-width: 0;
    min-height: 260px;
    padding: 25.5px 37.5px 0;       /* 325 = 400 − 2 × 37.5，即设计稿描述框宽 */
    border-radius: 16px;
    background: rgba(253, 254, 255, .7);
    box-shadow: 0 0 8px 5px rgba(210, 231, 255, .5);
    text-align: center;
}
.role-card-icon { width: 60px; height: 60px; margin: 0 auto; }
/* 图标底 3105.5 → 标题行框顶 3132.2 */
.role-card-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-top: 26.7px;
}
/* 标题行框底 3153.8 → 描述框顶 3169.8 */
.role-card-desc {
    font-size: 14px;
    line-height: 24px;
    color: #444;
    margin-top: 16px;
}

/* ==================== 部署与合规（3340 ~ 3784） ====================
   本区自带底纹图（源图 2880×909，cover 到 1920×444），无区标签，只有标题。
   43.2 = 区顶到标题行框顶（3383.2−3340）；79 = 卡片底到区底（3784−3705） */
.sec-deploy {
    background: #d5e4ff url('../images/campus-bg-deploy.webp') center / cover no-repeat;
    padding: 43.2px 0 79px;
}
/* 两张 551.5×210、间距 69，共 1172 居中（1920 下单边 374；设计稿 372） */
.deploy-cards {
    display: flex;
    justify-content: center;
    gap: 69px;
    padding: 0 20px;
}
.deploy-card {
    flex: 0 1 552px;
    min-width: 0;
    min-height: 210px;
    padding: 28px 51.5px 0;         /* 449 = 552 − 2 × 51.5，即设计稿描述框宽 */
    border-radius: 16px;
    background: rgba(253, 254, 255, .7);
    box-shadow: 0 0 6px 3px rgba(210, 231, 255, .5);
    text-align: center;
}
.deploy-card-icon { width: 60px; height: 60px; margin: 0 auto; }
.deploy-card-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-top: 12px;
}
.deploy-card-desc {
    font-size: 14px;
    line-height: 24px;
    color: #444;
    margin-top: 12px;
}

/* ==================== Responsive ====================
   断点只保留 1024：1025 以上交给文件末尾的等比缩放。缩放区间内不得再有任何降级块，
   否则会出现「既等比缩放、又局部改布局」的混合态（媒体查询按物理视口判定，
   1440 视口下 zoom 已把布局撑到 1920，但那些断点照样会命中）。

   原 @media (max-width: 1536px) 整块已删：.scene-grid 的 gap 被本块末尾的 gap:16px 覆盖，
   .pain-cards 的 gap:18px 被原 1280 档的 gap:16px 覆盖。
   原 @media (max-width: 1280px) 整体并入本块、且必须排在最前 —— 它的 .pain-card 与
   .deploy-cards 会被本块后半段覆盖，顺序颠倒就改了 ≤1024 的结果。
   下面每一条在 769–1024 段都仍然生效（.role-card / .deploy-card 的左右内边距尤其不可删）。 */
@media (max-width: 1024px) {
    /* ---- 原 1280 档：区块节奏与卡片内边距 ---- */
    .campus-main { padding: 64px 0 72px; }
    .sec-diff { margin-bottom: 60px; }
    .sec-flow { margin-bottom: 52px; }
    .sec-diff   .sec-head { margin-bottom: 52px; }
    .sec-flow   .sec-head { margin-bottom: 44px; }
    .sec-scene  .sec-head { margin-bottom: 46px; }
    .sec-roles  .sec-head { margin-bottom: 26px; }
    .sec-deploy .sec-head { margin-bottom: 42px; }

    .pain-cards { flex-wrap: wrap; gap: 16px; }
    .pain-card { flex: 0 1 300px; }
    .role-card { padding-left: 28px; padding-right: 28px; }
    .deploy-card { padding-left: 36px; padding-right: 36px; }
    .deploy-cards { gap: 32px; }

    /* ---- 单列堆叠 ---- */
    .hero { min-height: 520px; }
    .hero-content { padding-top: 170px; }
    .hero-title { font-size: 36px; margin-bottom: 14px; }
    .hero-pill { height: 34px; padding: 0 24px; font-size: 14px; margin-bottom: 15px; }
    .hero-desc { font-size: 18px; line-height: 34px; }

    .sec-title { font-size: 38px; letter-spacing: 1.8px; }
    .sec-tag { margin-bottom: 22px; }
    .sec-roles { padding: 60px 0 48px; }
    .sec-deploy { padding: 40px 0 60px; }

    /* 单列堆叠：两列骨架失效，卡片一律撑满可用宽 */
    .pain-cards { padding: 0 24px; }
    .pain-card { flex: 1 1 100%; max-width: 420px; min-height: 0; padding: 22px 20px 22px; }
    .pain-card-desc { line-height: 24px; }

    .scene-grid { grid-template-columns: minmax(0, 1fr); max-width: 725px; gap: 16px; }

    .role-cards { flex-direction: column; align-items: center; gap: 16px; }
    .role-card { flex: 0 0 auto; width: 100%; max-width: 400px; min-height: 0; padding-bottom: 28px; }

    .deploy-cards { flex-direction: column; align-items: center; gap: 16px; }
    .deploy-card { flex: 0 0 auto; width: 100%; max-width: 552px; min-height: 0; padding-bottom: 28px; }
}

@media (max-width: 768px) {
    .hero { min-height: 460px; }
    .hero-content { padding-top: 140px; }
    .hero-title { font-size: 30px; }
    .hero-pill { height: 30px; padding: 0 18px; font-size: 12px; }
    .hero-desc { font-size: 16px; line-height: 30px; }

    .campus-main { padding: 48px 0 56px; }
    .sec-title { font-size: 30px; letter-spacing: 1px; }
    .sec-roles { padding: 44px 0 40px; }
    .sec-deploy { padding: 32px 0 44px; }
    .pain-cards { padding: 0 20px; }
    .scene-card-head { font-size: 16px; }
    .role-card-name, .deploy-card-name { font-size: 17px; }
}

@media (max-width: 480px) {
    .hero { min-height: 400px; }
    .hero-content { padding-top: 118px; }
    .hero-title { font-size: 26px; margin-bottom: 12px; }
    .hero-pill { height: 28px; padding: 0 14px; font-size: 11px; margin-bottom: 12px; }
    .hero-desc { font-size: 15px; line-height: 26px; }

    .campus-main { padding: 36px 0 44px; }
    .sec-title { font-size: 24px; letter-spacing: .5px; }
    .sec-tag { padding: 0 10px; }
    .sec-roles { padding: 36px 0 32px; }
    .sec-deploy { padding: 28px 0 36px; }

    .pain-cards { padding: 0 16px; }
    .pain-card { padding: 18px 16px; }
    .pain-card-name { font-size: 16px; }
    .pain-card-desc { font-size: 13px; }
    .role-card, .deploy-card { padding-left: 20px; padding-right: 20px; }
    .role-card-desc, .deploy-card-desc { font-size: 13px; line-height: 22px; }
}

/* === 设计稿等比缩放（基准 1920）===
   本页尺寸全按 1920 画布写死。视口不足 1920 时原本只有左右留白被压、元素尺寸不动，
   观感就是「元素被放大」。这里把整页按 视口/1920 缩放：留白与元素乘同一个系数，
   比例关系恒定，任意视口下都是设计稿的等比副本。

   zoom 只改「尺寸的缩放系数」，不改变媒体查询的判定依据 —— 媒体查询与 100vw 仍按
   **物理视口**判定，而布局视口被撑成 物理视口/zoom（1440 下即 1920）。所以本页
   max-width 落在 [1025,1919] 的降级块都已收进 1024。 */
@media (min-width: 1025px) {
    html { --z: min(1, calc(100vw / 1920px)); zoom: var(--z); }

    /* 页脚与设计稿同比：base.css 那条 1600 断点兜底只服务 1200 系页面，
       在缩放区间（1025–1600）会把内边距压成 40px，比页面其余部分宽出一截。
       同特异性下后加载者胜，故这里可直接覆盖 base.css 的规则。 */
    .footer .content { padding: 18px 180px 0; }
    .footer-qr { margin-right: 94px; }
}