/* ============================================================
   collab.css — 数智协同 产品页
   数值取自 Figma「创亚官网2期」· ·产品-数智协同（画布 1920 × 3460）

   Hero：原稿只取 banner 源图 188.3→648.8 行、纵向放大 1.366×（保满宽、拉高），
   裁切已烘焙进 collab-hero.jpg/webp（1920×629），故这里走普通 object-fit: cover：
   1920 下 1:1 还原原稿，窄屏只从两侧裁切、不再二次变形。

   四行：原稿行距 636/693/636、文案块相对配图 73/42/31/14，均系手工摆放。此处
   统一按 673 铺开（配图 580 + 行距 93）、文案下移 40px，页脚前总高与设计稿 3380
   吻合、单行最大偏差 27px；两列 597+181+695=1473 居中后左右各 223.5，原稿偏右
   10px，忽略。

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

/* ==================== 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;
}
/* 设计稿 mask 层：#0068dd → 全透明 */
.hero-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #0068dd 0%, rgba(0, 104, 221, 0) 100%);
}
/* 249px = 标题行框顶（设计稿实测 248.7，非居中结果） */
.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);
    margin-bottom: 17px;
}
/* 胶囊：底色 #2DA8FF 20% + 白描边 40%，与灵智 / AI Work 同一组件；
   内边距 30px 由设计稿宽 305.5 反推（文字约 245） */
.hero-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 38.7px;
    margin: 0 auto 17px;
    padding: 0 30px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    background: rgba(45, 168, 255, .2);
    font-size: 16px;
    color: #fff;
}
/* 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;
}

/* ==================== 主体 ====================
   #f7faff 打底 + 原稿整页底纹从 hero 底铺到页脚（1920×2751） */
.collab-body {
    position: relative;
    background: #f7faff url('../images/collab-bg.webp') center / cover no-repeat;
    padding: 58px 0 94px;      /* 58 = hero 底到首行配图顶；94 = 末行配图底到页脚 */
}

/* ==================== Feature 行 ==================== */
.feature-block {
    scroll-margin-top: 116px;   /* = --hn-h (73) + 一点呼吸，避免被固定头遮住 */
    display: flex;
    /* 文案与配图垂直居中。四行配图恒 580（aspect-ratio 决定行高），文案更矮
       （第 1 行 344.2，第 2–4 行 392.2），故本属性移动的是**文案**：
       文案盒顶下移 (580−344.2)/2 = 117.9（第 2–4 行 (580−392.2)/2 = 93.9）。
       原为「原稿文案块贴行顶，不随配图垂直居中」+ .feature-text 的 padding-top: 40px
       （原稿文案块相对配图下移 40），居中后这两层取齐关系都不再保留。
       注：padding-top 仍占文案盒高度，会把文案**内容**再压低 20（= 40/2）——
       要真正的内容居中，得把那条 padding-top 去掉。
       本属性不改容器高度 —— 93px 行距不受影响；
       ≤1024 的单列块显式写了 align-items: stretch，column 方向下不会被它误伤。 */
    align-items: center;
    gap: 181px;
    max-width: 1553px;         /* 597 + 181 + 695 + 左右内边距各 40 */
    margin: 0 auto 93px;
    padding: 0 40px;
}
.feature-block:last-child { margin-bottom: 0; }
.feature-block.reverse { flex-direction: row-reverse; }
/* 垂直位置由 .feature-block 的 align-items: center 统一负责，故不再保留文案块相对配图顶的
   padding-top 偏移（原 40px）。留着它只会把居中后的文案**内容**再压低半个偏移量
   （40/2 = 20）—— 居中偏的是盒，而 padding 占着盒高。
   注：文案盒本就不参与行高（四行行高恒由 580 的配图决定），删掉后页面总高不变；
   ≤1024 的单列块本来就写了 padding-top: 0，窄屏同样不受影响。 */
.feature-text { flex: 0 1 597px; min-width: 0; }
.feature-image { flex: 0 1 695px; min-width: 0; }
/* 配图自带透明留白与烘焙投影，勿加 border-radius / box-shadow。
   原稿四张的纵向缩放为 0.632/0.644/0.715/0.621（横向恒 0.644），即第 1、3、4 张
   被拉高 2%~11% 且互不相等——设计侧逐张拖拽所致，非取景意图。照抄要烘进四种
   变形、改列宽还得重烘，故统一等比 cover；代价是第 3 张比原稿小 11% */
.feature-image img {
    display: block;
    width: 100%;
    aspect-ratio: 695 / 580;
    object-fit: cover;
}

/* 72×24 = 文字 48（4 字 × 12px）+ 左右内边距各 12，与设计稿胶囊同尺寸 */
.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;
}
/* 行框 43.2（= 36 × 1.2），上下留白与设计稿文本框一致，
   16 / 21 / 20 三段间距由此反推 */
.feature-label {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 21px;
}
.feature-label .gradient {
    background-image: linear-gradient(180deg, #00e5ff 0%, #0068dd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.feature-desc {
    font-size: 18px;
    line-height: 36px;
    color: #000;
    margin-bottom: 20px;
}
/* 逐条 ✓ 用列表项承载，行距 48 由设计稿行框决定；
   去符号 / 清内外边距由 base.css 的全局 reset 负责，不在此重复 */
.feature-list {
    font-size: 18px;
    line-height: 48px;
    color: #000;
}

/* ==================== Responsive ====================
   断点只保留 1024：1025 以上交给文件末尾的等比缩放。缩放区间内不得再有任何降级块，
   否则会出现「既等比缩放、又局部改布局」的混合态（媒体查询按物理视口判定，
   1440 视口下 zoom 已把布局撑到 1920，但这条 1440 断点照样会命中）。
   原 @media (max-width: 1440px) 的 .feature-block{gap:72px} 已删 —— 它被下面 1024 块的
   gap:32px 覆盖；对 .feature-block.reverse 更是从来就没赢过（(0,1,0) 输给 (0,2,0)）。 */
@media (max-width: 1024px) {
    .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: 14px; }
    .hero-desc { font-size: 18px; line-height: 34px; }

    .collab-body { padding: 72px 0; }
    /* 单列后文案在配图之上，两列骨架失效，行距改为固定值。
       必须带上 .reverse —— 它的 (0,2,0) 压得过媒体查询里的 .feature-block (0,1,0)，
       漏掉的话第 2、4 行会一直停在 row-reverse 横排 */
    .feature-block,
    .feature-block.reverse {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        margin-bottom: 140px;
    }
    .feature-text,
    .feature-image { flex: 1 1 auto; }
    .feature-text { padding-top: 0; }
}

@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; }

    .feature-block { padding: 0 24px; margin-bottom: 100px; }
    .feature-label { font-size: 28px; }
    .feature-desc { font-size: 16px; line-height: 34px; }
    .feature-list { font-size: 16px; line-height: 40px; }
}

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

    .collab-body { padding: 56px 0; }
    .feature-block { padding: 0 16px; margin-bottom: 80px; gap: 24px; }
    .feature-label { font-size: 22px; }
    .feature-desc { font-size: 14px; line-height: 28px; }
    .feature-list { font-size: 14px; line-height: 34px; }
}

/* === 设计稿等比缩放（基准 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; }
}