/* ============================================================
 * 智慧导购 V2 样式（guide.html）—— 2026-09 依蓝湖画板重做（旧猜测版完全重写）
 * 设计稿：蓝湖「超级节点-智慧导购」画板（1920×6865 @1x 基准）
 * 标注来源：蓝湖单画板 d2c/sketch 图层实测（2026-09 读取，第一准则），计算依据逐条写入注释
 *   页面通底背景 #F5F5F7（矩形665 y740 起，第十五章第3条逐层实测）；卡片为白色 #FFFFFF；
 *     仅底部 CTA 为白色通栏（矩形796 y5984 高369 #FFFFFF）。本页无交替灰带，无需灰隙拆法。
 *   内容列宽 1427（.container 内容 1428，左右 gutter≈247/245，吻合）
 *   章节大标题统一 51.38/72 Heavy #1D1D1F 居中；标题顶→首块内容顶≈152
 *   模块 y 坐标（画板含头部100）：Hero100-740 / 难题标题873 卡1025 / 什么是标题1747 图2121 /
 *     解决什么标题3076 卡3229 箭头4072 / 业务价值标题4276 图4428 / 业务场景标题5141 卡5293 /
 *     CTA带5984-6353（标题6096 按钮6189）
 *   切图（开图实测 @2x÷2，全部整卡烘焙含文字，禁止叠加代码文字）：Hero整图1920×640仅叠按钮；
 *     难题4卡341×643；什么是流程图1427×728；解决什么轮播7卡459×706（158566=158565重复已弃）；
 *     业务价值宽图1427×492；业务场景4卡340×471
 * 规范：《重构规则.md》十一/十二/十三/十五/十六章节
 * ========================================================== */

/* ---------- 页面底色：蓝湖通底 #F5F5F7（第十五章第3条） ---------- */
body.guide-page {
    background-color: #F5F5F7;
}

/* ---------- 章节大标题（蓝湖 51.38/72 Heavy #1D1D1F 居中） ---------- */
.guide-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 放大，内图 overflow hidden 零裁切） ---------- */
.guide-zoom {
    overflow: hidden;
}
.guide-zoom > img {
    width: 100%;
    display: block;
}

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

/* ============================================================
 * M1 Hero：整幅切图（浅紫蓝底+左文案+右插画均含图内）+ 代码按钮
 *   按钮蓝湖 组158123 x247 y548 166×53 → 距 hero 顶(100) 448；left 247/1920=12.865vw，top 448/1920=23.333vw
 * ========================================================== */
.guide-hero {
    position: relative;
}
.guide-hero-bg {
    width: 100%;
    display: block;
}
.guide-hero-btn {
    position: absolute;
    left: 12.865vw;
    top: 23.333vw;
}

/* ============================================================
 * M2 终端难题：通底 + 代码标题 + 4 卡网格（341×643，间隙22）
 *   段顶距 Hero 底 133（873-740）；标题底距卡顶 80（1025-945）
 *   网格：容器 1428 减 3×22 间隙 ÷4 = 340.5 ≈ 蓝湖卡宽 341（吻合，无需固定 flex-basis）
 * ========================================================== */
.guide-pain {
    padding-top: clamp(83px, 6.927vw, 133px);
}
.guide-pain-grid {
    margin-top: clamp(50px, 4.167vw, 80px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 22px;
}

/* ============================================================
 * M3 什么是智慧导购：通底 + 代码标题/副标题/正文 + 大流程图整图（1427×728）
 *   段顶距难题卡底 79（1747-1668）；标题底距副标题 32；副标题距正文≈42；正文距流程图≈93
 *   副标题 28/38.33 Bold #1D1D1F 居中；正文 18/27.7 Bold #6D6D6D 居中
 *   正文三行断点按蓝湖写死为 <br />（提现。/ 复杂 APP，/ 终端数据），不依赖框宽自然折行
 * ========================================================== */
.guide-what {
    padding-top: clamp(49px, 4.115vw, 79px);
    text-align: center;
}
.guide-what-sub {
    margin-top: clamp(20px, 1.667vw, 32px);
    font-size: clamp(18px, 1.458vw, 28px);
    font-weight: 700;
    line-height: clamp(24px, 1.996vw, 38px);
    color: #1D1D1F;
}
.guide-what-p {
    margin: clamp(20px, 1.667vw, 32px) auto 0;
    max-width: clamp(751px, 62.552vw, 1201px); /* 蓝湖正文框宽 1201，与字号/行高同一套 clamp 基准（防窄视口自然折行破坏 <br /> 断点） */
    font-size: clamp(12px, 0.9375vw, 18px);
    font-weight: 700;
    line-height: clamp(19px, 1.443vw, 27.7px);
    color: #6D6D6D;
}
.guide-what-img {
    display: block;
    width: 100%;
    height: auto;
    margin: clamp(58px, 4.844vw, 93px) auto 0;
}

/* ============================================================
 * M4 可以帮您解决什么：通底 + 代码标题 + 7 卡手动轮播（459×706，间隙24）
 *   段顶距流程图底 167（3076-2909）；标题底距卡顶 81（3229-3148）
 *   卡槽宽 459（蓝湖 x 步长 483 → 间隙 24）；箭头圆 73×73 右对齐距卡底 137（4072-3935）
 * ========================================================== */
.guide-solve {
    padding-top: clamp(104px, 8.698vw, 167px);
}
.guide-solve-viewport {
    margin-top: calc(clamp(51px, 4.219vw, 81px) - 12px); /* -12 为 hover 放大缓冲 */
    /* 苹果官网完整模式（第十三章第10条）：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));
    padding: 12px 0 12px calc(max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px);
    margin-bottom: -12px;
    overflow: hidden;
}
.guide-solve-track {
    display: flex;
    align-items: flex-start; /* 整卡烘焙高度略差，顶对齐不裁文字 */
    gap: 24px;
    transition: transform .5s cubic-bezier(0.4, 0, 0.6, 1);
    will-change: transform;
}
.guide-solve-track > .card-zoom {
    flex: 0 0 clamp(287px, 23.906vw, 459px); /* 蓝湖卡 459×706 @1920 */
    min-width: 0;
}
.guide-solve-card > img {
    width: 100%;
    height: auto;
}
.guide-solve-arrows {
    margin-top: clamp(43.5px, 3.021vw, 58px); /* 全站统一（基准 pengyipeng M2 轮播按钮）：原 clamp(86px, 7.135vw, 137px) */
    display: flex;
    justify-content: flex-end;
}
.guide-solve-prev,
.guide-solve-next {
    width: 48px; /* 全站统一按钮宽 48px（基准 pengyipeng），原自绘圆钮 clamp(46px, 3.802vw, 73px) */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .3s ease;
}
.guide-solve-prev + .guide-solve-next {
    margin-left: 24px; /* 全站统一两钮间距 24px（基准 pengyipeng），原 37 */
}
.guide-solve-prev img,
.guide-solve-next img {
    width: 100%;
    height: auto;
    display: block;
}
.guide-solve-prev img {
    transform: scaleX(-1); /* 左箭头 = 右箭头镜像 */
}
.guide-solve-prev:disabled,
.guide-solve-next:disabled {
    opacity: .35; /* 全站统一禁用态（基准 pengyipeng），原 .45 */
    cursor: default;
}

/* ============================================================
 * M5 获得的业务价值：通底 + 代码标题 + 宽幅整图（1427×492）
 *   段顶距箭头底 131（4276-4145）；标题底距图 80（4428-4348）
 * ========================================================== */
.guide-value {
    padding-top: clamp(82px, 6.823vw, 131px);
    text-align: center;
}
.guide-value-img {
    display: block;
    width: 100%;
    height: auto;
    margin: clamp(50px, 4.167vw, 80px) auto 0;
}

/* ============================================================
 * M6 业务场景：通底 + 代码标题 + 4 卡网格（340×471，间隙22）
 *   段顶距价值图底 221（5141-4920）；标题底距卡顶 80（5293-5213）
 *   网格：容器 1428 减 3×22 ÷4 = 340.5 ≈ 蓝湖卡宽 340（吻合）
 * ========================================================== */
.guide-scene {
    padding-top: clamp(138px, 11.51vw, 221px);
}
.guide-scene-grid {
    margin-top: clamp(50px, 4.167vw, 80px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 22px;
}

/* ============================================================
 * M7 CTA：白色通栏 #FFFFFF（矩形796 y5984 高369）+ 代码标题/按钮（无副标题）
 *   上灰隙 220（margin-top，5984-5764 通底灰显）；带内上边距 112（6096-5984）；
 *   标题底距按钮 37（6189-6152）；带内下边距 111（6353-6242）
 *   标题 40/56 Heavy #1D1D1F 居中
 * ========================================================== */
.guide-cta {
    margin-top: clamp(138px, 11.458vw, 220px);
    background-color: #FFFFFF;
    padding: clamp(70px, 5.833vw, 112px) 0 clamp(69px, 5.781vw, 111px);
    text-align: center;
}
.guide-cta-title {
    font-size: clamp(25px, 2.083vw, 40px);
    font-weight: 700;
    line-height: clamp(35px, 2.917vw, 56px);
    color: #1D1D1F;
}
.guide-cta-btn {
    margin-top: clamp(23px, 1.927vw, 37px);
}