/* ============================================================
   ai-work.css — 企业级 AI Work 页面
   数值取自 Figma「创亚官网2期」· 创亚 Work（画布 1920 × 3964）

   没有和 lingzhi.css 抽公共骨架：两页同源，但逐项数值都不同 ——
   章节头间距 14/38 vs 29/24、图标 81×96 vs 80×94、行距 210 vs 269、
   波纹偏移 −210 vs −221/−209/−238。抽出去还得在两个页面回写覆写表，
   抽象不成立。要合并得先让设计侧统一两页的节奏。

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

/* ==================== Hero ====================
   纵向位置取自设计稿实测，不是居中结果：flex 居中会整体偏上 11px
   （设计稿内容中心 362.35，栏几何中心 351.5），故用 padding-top 直接定位
   240px = 固定导航 73 + 标题行框顶 167 */
.hero {
    position: relative;
    min-height: 630px;
    padding: 240px 0 0;
    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%);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}
.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: 26px;
}
/* 胶囊：底色 #2DA8FF 20% + 白描边 40%；内边距 43px 由设计稿宽度 305.5
   减去文字宽 215 反推，不要按视觉随意调 */
.hero-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 38.7px;
    margin: 0 auto 26px;
    padding: 0 43px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    background: rgba(45, 168, 255, .2);
    font-size: 16px;
    color: #fff;
}
.hero-desc {
    font-size: 24px;
    line-height: 48px;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    max-width: 1143px;
    margin: 0 auto;
}

/* ==================== 主体 ====================
   #f7faff 自 hero 底（y=630）起铺到底 */
.work-body {
    position: relative;
    background: #f7faff;
}
/* hero 下沉入内容的过渡波纹：原图按原始尺寸摆放，175px 高的窗口配 -107px 偏移。
   设计稿 830:21 写的是 h-[179.81%] / top-[-61.11%]，百分比基数是容器高而非图高，
   别当成"把波纹放大 1.8 倍"来理解 */
.work-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 175px;
    background: url('../images/work-stripe.webp') no-repeat 0 -107px / 100% auto;
    pointer-events: none;
}

/* ==================== 下载区 ==================== */
.download { padding: 183px 0 100px; }
.download-list {
    display: flex;
    justify-content: center;
    gap: 100px;
    padding: 0 20px;
}
/* flex:1 1 0 + max-width：1920 下即设计稿的 449px，窄屏等比收缩；
   写死 449px 会在 1200 附近溢出 */
.download-btn {
    flex: 1 1 0;
    max-width: 449px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    height: 120px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 28px;
    line-height: 1;
    white-space: nowrap;
    transition: box-shadow .3s, background .3s;
}
/* 图标用 mask 挖形 + background-color 上色，才能跟着按钮前景色走：
   高亮会在 Windows / Mac 之间切换，而两个 SVG 各自只固化了一种颜色
   （Windows 白、Mac 蓝），直接当 <img> 用会在换色后糊成一片。
   currentColor 取自 .download-btn 的 color —— 实心态白、描边态蓝，无需 JS。 */
.download-icon {
    width: 46px;
    height: 46px;
    flex: none;
    background-color: currentColor;
}
.download-icon--win {
    -webkit-mask: url('../images/work-icon-windows.svg') center / contain no-repeat;
            mask: url('../images/work-icon-windows.svg') center / contain no-repeat;
}
.download-icon--mac {
    -webkit-mask: url('../images/work-icon-mac.svg') center / contain no-repeat;
            mask: url('../images/work-icon-mac.svg') center / contain no-repeat;
}
.download-btn.is-primary { background: #0068dd; color: #fff; }
.download-btn.is-primary:hover { box-shadow: 0 8px 20px rgba(0, 104, 221, .35); }
.download-btn.is-ghost {
    background: #fff;
    border: 2px solid #0068dd;
    color: #0068dd;
}
.download-btn.is-ghost:hover { background: #f0f6ff; }

/* ==================== 章节头 ==================== */
.feature-section { padding: 0 0 138px; }
.section-header {
    text-align: center;
    max-width: 960px;          /* 设计稿描述单行 873px，留出断行余量 */
    margin: 0 auto 82px;
    padding: 0 20px;
}
.section-header .tag {
    display: inline-block;
    background: #d2e7ff;
    border-radius: 999px;
    padding: 3px 16px;
    font-size: 12px;
    line-height: 18px;
    color: #0068dd;
    margin-bottom: 29px;
}
.section-header .title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 2.88px;
    background: linear-gradient(180deg, #00e5ff 0%, #0068dd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
}
.section-header .desc {
    font-size: 24px;
    line-height: 48px;
    color: #000;
}

/* ==================== Feature 行 ====================
   四行左右交替，行距 269px（设计稿行距 679 − 配图高 410） */
.feature-rows {
    --wave-h: 314.67px;
    --wave-1: -221px;
    --wave-2: -209px;
    --wave-3: -238px;
    position: relative;
}
.feature-row { position: relative; }
/* 装饰波纹：三处纵坐标是设计稿实测值，各自锚在本行底边（第 4 行无波纹）。
   写成变量而非裸 bottom，断点里可整体改写 */
.feature-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: var(--wave-h);
    background: url('../images/work-stripe.webp') center / cover no-repeat;
    pointer-events: none;
    z-index: 0;
}
.feature-row:nth-child(1)::before { bottom: var(--wave-1); }
.feature-row:nth-child(2)::before { bottom: var(--wave-2); }
.feature-row:nth-child(3)::before { bottom: var(--wave-3); }
.feature-row:nth-child(4)::before { display: none; }

.feature-block {
    position: relative;
    z-index: 1;
    display: flex;
    /* 配图与文案垂直居中。与 lingzhi 相反，本页是配图更高（410，恒由配图决定容器高）
       而文案更矮（326.2，第 3 行 374.2），故本属性移动的是**文案**：
       文案顶下移 (410−326.2)/2 = 41.9，第 3 行文案较长故只下移 (410−374.2)/2 = 17.9
       —— 于是各行图标顶不再齐平（相差 24）。原为图标顶与配图顶对齐，居中后放弃该对齐。
       注意本属性不改容器高度 —— 269px 行距与 ::before 波纹偏移都不受影响；
       ≤1024 的单列块显式写了 align-items: stretch，column 方向下不会被它误伤。 */
    align-items: center;
    gap: 127px;
    max-width: 1607px;         /* 内容 633 + 127 + 766 + 左右内边距各 40 */
    margin: 0 auto 269px;
    padding: 0 40px;
}
.feature-block.reverse { flex-direction: row-reverse; }
.feature-row:last-child .feature-block { margin-bottom: 0; }
.feature-text { flex: 0 1 633px; min-width: 0; }
.feature-image { flex: 0 1 766px; min-width: 0; }
.feature-image img {
    width: 100%;
    aspect-ratio: 766 / 410;
    object-fit: cover;
}
/* 圆角与投影落在图片自身，不用给容器加 overflow 裁切 */
.feature-image > picture > img {
    border-radius: 20px;
    box-shadow: 15px -10px 4px rgba(0, 104, 221, .05);
}

.feature-icon { width: 80px; height: 94px; margin-bottom: 29px; }
.feature-icon img { width: 100%; height: 100%; object-fit: contain; }
.feature-label {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 31px;
}
.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-underline {
    width: 80px;
    height: 3px;
    background: #0068dd;
    margin-bottom: 30px;
}
.feature-desc {
    font-size: 18px;
    line-height: 48px;
    color: #000;
}

/* ==================== Responsive ====================
   断点只保留 1024：1025 以上交给文件末尾的等比缩放。缩放区间内不得再有任何降级块，
   否则会出现「既等比缩放、又局部改布局」的混合态（媒体查询按物理视口判定，
   1440 视口下 zoom 已把布局撑到 1920，但这条 1440 断点照样会命中）。
   原 @media (max-width: 1440px) 的 .feature-block{gap:72px} 与 .download-list{gap:56px}
   已删 —— 两条都被下面 1024 块的 gap:32px / gap:20px 覆盖，删掉不改变任何视口的结果。 */
@media (max-width: 1024px) {
    .hero { min-height: 520px; padding-top: 170px; }
    .hero-title { font-size: 36px; margin-bottom: 20px; }
    .hero-pill { height: 34px; padding: 0 24px; font-size: 14px; margin-bottom: 20px; }
    .hero-desc { font-size: 18px; line-height: 34px; }

    .download { padding: 96px 0 72px; }
    .download-list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .download-btn {
        flex: 0 0 auto;
        width: 100%;
        max-width: 449px;
        height: 84px;
        font-size: 20px;
        gap: 16px;
    }
    .download-icon { width: 34px; height: 34px; }

    .section-header { margin-bottom: 56px; }
    .section-header .tag { margin-bottom: 18px; }
    .section-header .title { font-size: 34px; letter-spacing: 1.8px; margin-bottom: 16px; }
    .section-header .desc { font-size: 18px; line-height: 32px; }

    .feature-section { padding-bottom: 88px; }
    .feature-block {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        margin-bottom: 140px;
    }
    .feature-text,
    .feature-image { flex: 1 1 auto; }

    /* 收窄为单列后行高骤增：波纹压扁、贴住行底，三处偏移合并成一个
       （设计稿那三个坐标是 PC 稿的绝对定位，单列下没有意义） */
    .feature-rows {
        --wave-h: 200px;
        --wave-1: -120px;
        --wave-2: -120px;
        --wave-3: -120px;
    }
}

@media (max-width: 768px) {
    .hero { min-height: 460px; 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; }

    .section-header .title { font-size: 28px; letter-spacing: 1px; }
    .section-header .desc { font-size: 16px; line-height: 28px; }

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

@media (max-width: 480px) {
    .hero { min-height: 400px; 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; }

    .download { padding: 72px 0 56px; }
    .download-btn { height: 64px; font-size: 17px; }
    .download-icon { width: 26px; height: 26px; }

    .section-header .title { font-size: 24px; letter-spacing: .5px; }
    .section-header .desc { font-size: 15px; line-height: 26px; }

    .feature-section { padding-bottom: 64px; }
    .feature-block { padding: 0 16px; margin-bottom: 80px; gap: 24px; }
    .feature-icon { width: 56px; height: 66px; margin-bottom: 20px; }
    .feature-label { font-size: 22px; margin-bottom: 20px; }
    .feature-underline { margin-bottom: 20px; }
    .feature-desc { font-size: 14px; line-height: 28px; }
}

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