/* ============================================================
 * 即时零售 V2 样式（jishi.html）
 * 设计稿：设计稿/画板/超级节点-即时零售@2x.png（1920×9089 @1x 基准）
 * 标注来源：蓝湖 MasterJSON（2026-09 读取）+ 画板像素实测复核
 *   页面底色 #FFFFFF；CTA 通栏 #F5F5F7（y7166-7535）；
 *   模块标题 51.38/72 Heavy #1D1D1F 居中；介绍副标题 28/38.33 Bold #1D1D1F；
 *   介绍正文 18/27.7 Bold #6D6D6D 居中 w1219；CTA 标题 40/56 Heavy #1D1D1F；
 *   CTA 副标题 22/31 Medium #3D3D3D；按钮 166×53 字 18 Bold #FFF；
 *   能力卡 390×603 间隙 25（2026-09-18 用户裁决：蓝湖原 459×709 统一缩 15%）
 * 模块 y 坐标（画板含头部 100）：hero100-740 钮(247,570) / 难题标题873 卡1025-1496 /
 *   介绍1691/1795/1875 看板图2025-2962 / 能力标题3000 卡3153-3862 /
 *   箭头3968-4041 / 价值标题4182 卡4334-4919 / 场景标题5115 卡5267-5738 /
 *   技术标题5921 卡6072-6940 / CTA7166-7535 / FAQ7711-8379 / 页脚8577
 * 规范：《重构规则.md》十一/十二/十三/十五/十六章节
 * ========================================================== */

/* ---------- 页面底色：蓝湖画板背景 #FFFFFF（本页设计稿为白底，2026-09-18 按蓝湖修正，仅本页例外） ---------- */
body.jishi-page {
    background-color: #FFFFFF;
}

/* ---------- 模块标题（蓝湖 51.38/72 Heavy #1D1D1F） ---------- */
.jishi-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 负责，内图不放大零裁切） ---------- */
.jishi-zoom {
    overflow: hidden;
}
.jishi-zoom > img {
    width: 100%;
}

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

/* ============================================================
 * M1 Hero：1920×640 全宽整图（切图含标题/副标题/正文）+ 代码按钮
 * ========================================================== */
.jishi-hero {
    position: relative;
}
.jishi-hero-bg {
    width: 100%;
    display: block;
}
.jishi-hero-btn {
    position: absolute;
    /* 下限 = @1200 值，与 body{min-width:1200} 冻结后的整图同基准（详见 guide.css .guide-hero-btn 注释） */
    left: max(154.4px, 12.864vw); /* 247px @1920，跟随整图比例 */
    top: max(293.7px, 24.479vw); /* (570-100)=470px @1920 */
}

/* ============================================================
 * M2 普遍难题：4 卡（341×471，间隙 22）
 * ========================================================== */
.jishi-pain {
    padding: clamp(83px, 6.927vw, 133px) 0 0; /* 标题 y873 - hero 底 y740 = 133 */
}
.jishi-pain-grid {
    margin-top: clamp(50px, 4.167vw, 80px); /* 卡顶 y1025 - 标题框底 945 = 80 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.jishi-pain-grid > .card-zoom {
    width: calc((100% - 66px) / 4); /* 341 @1428，间隙 22 */
}

/* ============================================================
 * M3 介绍区：标题 + 副标题 + 正文（代码文字，蓝湖标注）+ 数据看板整图
 * ========================================================== */
.jishi-intro {
    padding: clamp(122px, 10.156vw, 195px) 0 0; /* 标题 y1691 - 难题卡底 1496 = 195 */
}
.jishi-intro-sub {
    margin-top: clamp(20px, 1.667vw, 32px); /* 副标题 y1795 - 标题框底 1763 = 32 */
    font-size: clamp(17px, 1.458vw, 28px);
    font-weight: 700;
    line-height: clamp(24px, 1.996vw, 38.33px);
    color: #1D1D1F;
    text-align: center;
}
.jishi-intro-text {
    margin: clamp(26px, 2.188vw, 42px) auto 0; /* 正文 y1875 - 副标题框底 1833.33 ≈ 42 */
    max-width: 1219px; /* 蓝湖正文图层宽 1219 */
    font-size: clamp(14px, 0.9375vw, 18px);
    font-weight: 700;
    line-height: clamp(21px, 1.443vw, 27.7px);
    color: #6D6D6D;
    text-align: center;
}
.jishi-intro-dash {
    width: clamp(836px, 69.635vw, 1337px); /* 蓝湖看板图层框 1337 宽（含四周光晕） */
    margin: clamp(42px, 3.49vw, 67px) auto 0; /* 看板顶 y2025 - 正文 3 行框底 1958.1 ≈ 67 */
}

/* ============================================================
 * M4 产品能力：5 卡整卡切图手动轮播（390×603 间隙 25，右出血，task 式箭头；蓝湖原 459×709 缩 15%）
 * ========================================================== */
.jishi-ability {
    padding: clamp(24px, 1.979vw, 38px) 0 0; /* 标题 y3000 - 看板图底 2962 = 38 */
}
.jishi-ab-viewport {
    margin-top: calc(clamp(51px, 4.219vw, 81px) - 12px); /* 卡顶 y3153 - 标题框底 3072 = 81，-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;
}
.jishi-ab-track {
    display: flex;
    gap: 25px; /* 蓝湖卡间隙 24/27/25，取 25：五卡 x246/730/1214/1698/2182 */
    transition: transform .5s cubic-bezier(0.4, 0, 0.6, 1);
    will-change: transform;
}
.jishi-ab-track > .card-zoom {
    flex: 0 0 clamp(288px, 23.958vw, 460px); /* 2026-09-20 用户裁决：默认需展示 3 个半，卡槽由 390 调回蓝湖原尺寸 460（覆盖 09-18 缩 15% 裁决，与 task 产品能力卡一致）；高由 img 自适应 */
}
/* 轮播箭头：全站共用 task 页方案（img 切图 + 禁用态降透明度） */
.jishi-ab-arrows {
    margin-top: clamp(43.5px, 3.021vw, 58px); /* 全站统一（基准 pengyipeng M2 轮播按钮）：原 clamp(66px, 5.521vw, 106px) */
    display: flex;
    justify-content: flex-end;
}
.jishi-ab-prev,
.jishi-ab-next {
    width: 48px; /* 全站统一按钮宽 48px（基准 pengyipeng），原 73.5×73 */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .3s ease;
}
.jishi-ab-prev + .jishi-ab-next {
    margin-left: 24px; /* 全站统一两钮间距 24px（基准 pengyipeng），原 37 */
}
.jishi-ab-prev img,
.jishi-ab-next img {
    width: 100%;
    height: auto;
    display: block;
}
.jishi-ab-prev img {
    transform: scaleX(-1); /* 左箭头 = 右箭头镜像 */
}
.jishi-ab-prev:disabled,
.jishi-ab-next:disabled {
    opacity: .35; /* 禁用态 = 设计稿浅灰箭头 */
    cursor: default;
}

/* ============================================================
 * M5 业务价值：2×2（701×280，间隙 26/25）
 * ========================================================== */
.jishi-value {
    padding: clamp(88px, 7.344vw, 141px) 0 0; /* 标题 y4182 - 箭头底 4041 = 141 */
}
.jishi-value-grid {
    margin-top: clamp(50px, 4.167vw, 80px); /* 卡顶 y4334 - 标题框底 4254 = 80 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 25px; /* 蓝湖第二行卡顶 y4639 - 首行底 4614 = 25 */
}
.jishi-value-grid > .card-zoom {
    width: calc((100% - 26px) / 2);
}

/* ============================================================
 * M6 通用业务场景：4 卡（341×471，间隙 22）
 * ========================================================== */
.jishi-scene {
    padding: clamp(123px, 10.208vw, 196px) 0 0; /* 标题 y5115 - 价值卡底 4919 = 196 */
}
.jishi-scene-grid {
    margin-top: clamp(50px, 4.167vw, 80px); /* 卡顶 y5267 - 标题框底 5187 = 80 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.jishi-scene-grid > .card-zoom {
    width: calc((100% - 66px) / 4);
}

/* ============================================================
 * M7 技术底座：1426×868 整卡切图
 * ========================================================== */
.jishi-tech {
    padding: clamp(114px, 9.531vw, 183px) 0 0; /* 标题 y5921 - 场景卡底 5738 = 183 */
    text-align: center;
}
.jishi-tech img {
    width: clamp(891px, 74.271vw, 1426px);
    margin: clamp(49px, 4.115vw, 79px) auto 0; /* 卡顶 y6072 - 标题框底 5993 = 79 */
}

/* ============================================================
 * M8 CTA：#F5F5F7 灰通栏（蓝湖 y7166-7535，衬在 #FFFFFF 页面底色上）
 * ========================================================== */
.jishi-cta {
    margin-top: clamp(141px, 11.771vw, 226px); /* CTA 顶 y7166 - 技术卡底 6940 = 226 */
    padding: clamp(54px, 4.479vw, 86px) 0 clamp(59px, 4.896vw, 94px);
    background-color: #F5F5F7;
    text-align: center;
}
.jishi-cta-title {
    font-size: clamp(25px, 2.083vw, 40px);
    font-weight: 700;
    line-height: clamp(35px, 2.917vw, 56px);
    color: #1D1D1F;
}
.jishi-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;
}
.jishi-cta-btn {
    margin-top: clamp(24px, 1.979vw, 38px);
}

/* ============================================================
 * M9 FAQ：1427×669 整区切图（蓝湖 x246 y7711；上 176 / 下 197.5）
 * ========================================================== */
.jishi-faq {
    padding: clamp(110px, 9.167vw, 176px) 0 clamp(123px, 10.286vw, 197.5px); /* 7711-7535=176 / 8577-8379.5=197.5 */
}
.jishi-faq img {
    width: clamp(892px, 74.323vw, 1427px);
    margin: 0 auto;
}