/* ============================================================
 * 任务营销 V2 样式（task.html）
 * 设计稿：设计稿/画板/超级节点-任务营销@2x.png（1920×8737 @1x 基准）
 * 标注来源：蓝湖 MasterJSON（2026-09 读取）+ 画板像素实测复核
 *   页面底色 #F5F5F7（背景层 矩形665 y740-8785）；CTA 白色通栏 1920×369；
 *   模块标题 51.38/72 Heavy #1D1D1F 居中；介绍副标题 28/38.33 Bold #1D1D1F；
 *   介绍正文 18/27.7 Bold #6D6D6D 居中 w1201；CTA 标题 40/56 Heavy #1D1D1F；
 *   CTA 副标题 22/31 Medium #3D3D3D；按钮 166×53 字 18 Bold #FFF
 *   模块 y 坐标（画板含头部 100）：hero100-740 / 难题标题873 卡1025-1556 /
 *   介绍1747/1851/1931 / 系统卡2101-2855(切图含透明边) / 能力标题3025 卡3178
 *   箭头3916-3989 / 价值标题4118 卡4270-4855 / 场景标题5035 卡5187-5658 /
 *   技术标题5846 卡5998-6856 / CTA7012-7381 / FAQ7557-8049 / 页脚8225
 * 规范：《重构规则.md》十一/十二/十三/十五/十六章节
 * ========================================================== */

/* ---------- 页面底色：蓝湖画板背景层 #F5F5F7（第十五章第3条，禁止默认白） ---------- */
body.task-page {
    background-color: #F5F5F7;
}

/* ---------- 模块标题（蓝湖 51.38/72 Heavy #1D1D1F） ---------- */
.task-title {
    font-size: clamp(32px, 2.676vw, 51.38px);
    font-weight: 700;
    line-height: clamp(45px, 3.75vw, 72px);
    color: #1D1D1F;
    text-align: center;
}

/* ---------- 卡片内层（第十三章：放大由外层 .card-zoom 负责，内图不放大零裁切） ---------- */
.task-zoom {
    overflow: hidden;
}
.task-zoom > img {
    width: 100%;
}

/* ---------- 本页按钮字重/字号（蓝湖 18 Bold） ---------- */
.task-page .btn-primary {
    font-size: 18px;
    font-weight: 700;
}

/* ============================================================
 * M1 Hero：1920×640 全宽整图 + 代码按钮叠加（设计坐标 247,548）
 * ========================================================== */
.task-hero {
    position: relative;
}
.task-hero-bg {
    width: 100%;
    display: block;
}
.task-hero-btn {
    position: absolute;
    left: 12.864vw; /* 247px @1920，跟随整图比例 */
    top: 23.333vw; /* 548-100(头部)=448px @1920 */
}

/* ============================================================
 * M2 普遍难题：左列 2 卡(701×254) + 右列 1 卡(701×531)
 * ========================================================== */
.task-pain {
    padding: clamp(83px, 6.927vw, 133px) 0 0; /* 标题顶 y873 - hero 底 y740 = 133 */
}
.task-pain-grid {
    margin-top: clamp(50px, 4.167vw, 80px); /* 卡顶 y1025 - 标题框底 945 = 80 */
    display: flex;
    justify-content: space-between;
}
.task-pain-col {
    width: calc((100% - 26px) / 2); /* 701px @1428 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.task-pain-col .card-zoom + .card-zoom {
    margin-top: 23px; /* 531 = 254×2 + 23 */
}
.task-pain-big {
    width: calc((100% - 26px) / 2);
}

/* ============================================================
 * M3 介绍区：标题 + 副标题 + 正文（y1747 / 1851 / 1931）
 * ========================================================== */
.task-intro {
    padding: clamp(119px, 9.948vw, 191px) 0 0; /* 1747 - 难题卡底 1556 = 191 */
}
.task-intro-sub {
    margin-top: clamp(20px, 1.667vw, 32px); /* 1851 - (1747+72) = 32 */
    font-size: clamp(17px, 1.458vw, 28px);
    font-weight: 700;
    line-height: clamp(24px, 1.996vw, 38.33px);
    color: #1D1D1F;
    text-align: center;
}
.task-intro-text {
    margin: clamp(26px, 2.188vw, 42px) auto 0; /* 1931 - (1851+38.33) ≈ 42 */
    max-width: 1201px;
    font-size: clamp(14px, 0.9375vw, 18px);
    font-weight: 700;
    line-height: clamp(21px, 1.443vw, 27.7px);
    color: #6D6D6D;
    text-align: center;
}

/* ============================================================
 * M4 一体化管理体系：蓝湖卡槽 1426×754；切图 1624×952 含上下透明边（内容 y44-908）
 * ========================================================== */
.task-system {
    padding: clamp(30px, 2.5vw, 48px) 0 0; /* 切图盒顶 2062 - 正文字身底 2014 ≈ 48 */
    text-align: center;
}
.task-system img {
    width: clamp(891px, 74.271vw, 1426px); /* 蓝湖摆放 1426 宽，禁止按切图原宽 1624 放大 */
    margin: 0 auto;
}

/* ============================================================
 * M5 产品能力：标题切图居中 + 5 卡手动轮播（460×706，间隙 24，右下箭头）
 * ========================================================== */
.task-ability {
    padding: clamp(86px, 7.188vw, 138px) 0 0; /* 标题字身顶 3037 - 系统切图盒底 2898 ≈ 138 */
}
.task-ability-title {
    width: clamp(124px, 10.338vw, 198.5px);
    margin: 0 auto;
}
.task-ab-viewport {
    margin-top: calc(clamp(58px, 4.844vw, 93px) - 12px); /* 卡顶 y3178 - 标题字身底 3085 ≈ 93，-12 为 hover 放大缓冲补偿 */
    /* 苹果官网完整模式（2026-09-18 用户裁决）：viewport 左右均出血至屏幕边缘（1920 封顶）；padding-left = 内容区边距，默认首卡左缘仍对齐内容区左缘（与标题齐平）；滚动时整轨左移，卡片滑过左侧出血区、在屏幕左缘才被裁（可轮播到最左边，禁止在内容区左缘就裁没）；末端末卡右缘对齐内容区右缘 */
    margin-left: calc(-1 * (max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px));
    margin-right: calc(-1 * (max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px));
    /* hover 整卡放大缓冲：上下 12px；padding-left 为内容区边距（默认首卡定位用，JS 对包裹透明） */
    padding: 12px 0 12px calc(max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px);
    margin-bottom: -12px;
    overflow: hidden;
}
.task-ab-track {
    display: flex;
    gap: 24px; /* 蓝湖卡间隙 23~25 实测，取 24：前 4 卡右缘 2159 与画板出血位一致 */
    transition: transform .5s cubic-bezier(0.4, 0, 0.6, 1);
    will-change: transform;
}
.task-ab-track > .card-zoom {
    flex: 0 0 clamp(288px, 23.958vw, 460px); /* 2026-09-20 用户裁决：默认需展示 3 个半，卡槽由 390 调回蓝湖原尺寸 460（覆盖 09-18 缩 15% 裁决） */
    /* 必须 min-width: 0：flex item 默认 min-width:auto(=min-content)，首卡 -wide 切图定宽+负 margin 的 min-content 会撑开 item，导致首卡比设计宽、卡间距视觉异常（2026-09-18 用户指出修复） */
    min-width: 0;
}
/* 首卡：卡槽 460；供稿切图含左右透明边，img 定宽+负 margin 偏移对齐内容区（2026-09-20 随卡槽恢复原尺寸 640/-82） */
.task-ab-card-wide > img {
    width: clamp(401px, 33.333vw, 640px);
    max-width: none;
    margin-left: clamp(-82px, -4.271vw, -51px);
}
.task-ab-arrows {
    margin-top: clamp(17.4px, 1.208vw, 23.2px); /* 再上移 0.2 倍当前间距（1920 下约上移 5.8px），原 clamp(21.75px, 1.51vw, 29px)，仅本页 */
    display: flex;
    justify-content: flex-end;
}
.task-ab-prev,
.task-ab-next {
    width: 48px; /* 全站统一按钮宽 48px（基准 pengyipeng），原 73.5×73 */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .3s ease;
}
.task-ab-prev + .task-ab-next {
    margin-left: 24px; /* 全站统一两钮间距 24px（基准 pengyipeng），原 38 */
}
.task-ab-prev img,
.task-ab-next img {
    width: 100%;
    height: auto;
    display: block;
}
.task-ab-prev img {
    transform: scaleX(-1); /* 左箭头 = 右箭头镜像 */
}
.task-ab-prev:disabled,
.task-ab-next:disabled {
    opacity: .35; /* 禁用态 = 设计稿浅灰箭头 */
    cursor: default;
}

/* ============================================================
 * M6 核心业务价值：2×2（701×280，间隙 26/25）
 * ========================================================== */
.task-value {
    padding: clamp(81px, 6.719vw, 129px) 0 0; /* 标题 y4118 - 箭头底 3989 = 129 */
}
.task-value-grid {
    margin-top: clamp(50px, 4.167vw, 80px); /* 卡顶 y4270 - 标题框底 4190 = 80 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 25px; /* 蓝湖第二行卡顶 y4575 - 首行底 4550 = 25 */
}
.task-value-grid > .card-zoom {
    width: calc((100% - 26px) / 2);
}

/* ============================================================
 * M7 通用业务应用场景：4 卡（341×471，间隙 22；切图含底部透明边，裁 471）
 * ========================================================== */
.task-scene {
    padding: clamp(113px, 9.375vw, 180px) 0 0; /* 标题 y5035 - 价值卡底 4855 = 180 */
}
.task-scene-grid {
    margin-top: clamp(50px, 4.167vw, 80px); /* 卡顶 y5187 - 标题框底 5107 = 80 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.task-scene-grid > .card-zoom {
    width: calc((100% - 66px) / 4);
    /* 蓝湖卡槽 341×471。原 height: clamp(294px, 24.531vw, 471px) 是视口缩放，
       而卡宽跟容器走（1476 封顶）：<1920 时高度先于宽度缩小，图片等比高度超出卡槽，
       底部被 .task-zoom 的 overflow:hidden 硬裁（仅 ≥1920 完美）。
       改用 aspect-ratio 宽高随容器等比联动（全站同类 341×471 卡统一写法，
       如 kuaiyanai/pengyipeng），任意视口不再裁底；切图底部 0~2px 抗锯齿边缘仍在槽内被裁，与全站一致 */
    aspect-ratio: 341 / 471;
}
.task-scene-grid .task-zoom {
    height: 100%;
}
.task-scene-grid .task-zoom > img {
    height: auto;
}

/* ============================================================
 * M8 技术底座：左 821 大暗卡 + 右列 584×2（左右间隙 22 固定，右列卡距 20）
 * ========================================================== */
.task-tech {
    padding: clamp(118px, 9.792vw, 188px) 0 0; /* 标题 y5846 - 场景卡底 5658 = 188 */
}
.task-tech-grid {
    margin-top: clamp(50px, 4.167vw, 80px); /* 卡顶 y5998 - 标题框底 5918 = 80 */
    display: grid;
    grid-template-columns: 821fr 584fr; /* 蓝湖 x246/1089 间隙 22，禁止 vw+space-between 拉伸间隙 */
    column-gap: 22px;
    align-items: start;
}
.task-tech-main {
    width: 100%;
}
.task-tech-col {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.task-tech-col > .card-zoom {
    /* 蓝湖右列卡槽 584×419。同理弃 vw 高度改 aspect-ratio：tech-1 切图底部
       透明边（838~983 行 @2x）仍由 overflow:hidden 裁掉，但内容底 837 恰在槽内，
       任意视口不再误裁内容 */
    aspect-ratio: 584 / 419;
}
.task-tech-col .task-zoom {
    height: 100%;
}
.task-tech-col .task-zoom > img {
    height: auto;
}
.task-tech-col .card-zoom + .card-zoom {
    margin-top: 20px; /* 蓝湖右下卡顶 y6437 - 右上卡底 6417 = 20 */
}

/* ============================================================
 * M9 CTA：蓝湖白色通栏 1920×369（y7012-7381，标题7098/副文案7165/按钮7234）
 * ========================================================== */
.task-cta {
    margin-top: clamp(98px, 8.125vw, 156px); /* CTA 顶 y7012 - 技术卡底 6856 = 156 */
    padding: clamp(54px, 4.479vw, 86px) 0 clamp(59px, 4.896vw, 94px);
    background-color: #FFFFFF; /* 蓝湖：白色通栏（页面底色 #F5F5F7 透出上下间隙） */
    text-align: center;
}
.task-cta-title {
    font-size: clamp(25px, 2.083vw, 40px);
    font-weight: 700;
    line-height: clamp(35px, 2.917vw, 56px);
    color: #1D1D1F;
}
.task-cta-sub {
    margin-top: clamp(7px, 0.573vw, 11px);
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 500;
    line-height: clamp(20px, 1.615vw, 31px);
    color: #3D3D3D;
}
.task-cta-btn {
    margin-top: clamp(24px, 1.979vw, 38px);
}

/* ============================================================
 * M10 FAQ：1427×492 整区切图（蓝湖 x246 y7557；上下间距均 176）
 * ========================================================== */
.task-faq {
    padding: clamp(110px, 9.167vw, 176px) 0 clamp(110px, 9.167vw, 176px); /* 7557-7381=176 / 8225-8049=176 */
}
.task-faq img {
    width: clamp(892px, 74.323vw, 1427px); /* 蓝湖切图层 1427 宽，左缘 x246 */
    margin: 0 auto;
}