/* ============================================================
   解决方案 cuxiao.css —— 蓝湖实测（画板 1920×7002 @1x，内容主背景 #F5F5F7）
   约定：设计值 D(px@1920) → clamp(round(D*0.625)px, D/19.2 vw, Dpx)
   结构：Hero(全出血整图,烘焙 + 叠加「预约方案沟通」主按钮) → 4 方案段(代码标题 + 白卡整图[圆角56/边框#DADADA 已烘焙] + 查看按钮叠加右下)
   ============================================================ */

.cuxiao-page {
    background: #F5F5F7;
}

/* Hero：全出血整图（2026-10-10 换图 1201.png 3840×2002 @2x → @1920 1920×1001，与旧图同尺寸） */
.cuxiao-hero {
    position: relative;
    line-height: 0; /* 消除 img 基线空隙 */
}
.cuxiao-hero-img {
    width: 100%;
    height: auto; /* 配合 HTML width/height 属性等比缩放，防缩屏纵向拉伸 */
    display: block;
}
/* 2026-10-10 新增「预约方案沟通」：复用全站 .btn-primary（166×53）+ data-modal="cooperate" 弹窗，
   与 guide/pyp/task/jishi/pay 等页 hero 按钮的结构和交互保持一致。
   位置（用户给定）：按「按钮底距图底 50」直接用 bottom 定位（比换算 top 更直观可调）：
   50/19.2 = 2.604vw（@1920 图高 1001，按钮高 53 → 等价 top 898）；水平居中。
   用 left:0/right:0 + flex 居中而非 translateX(-50%)：避开与 .reveal-item 入场动画 transform 相互覆盖。
   max() 下限 = @1200 值：body{min-width:1200} 使视口 <1200 时整图几何冻结在 1200 档，裸 vw 会让按钮相对整图跑位 */
.cuxiao-hero-btn {
    position: absolute;
    bottom: max(31.25px, 2.604vw);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    line-height: normal; /* 覆盖父级 line-height:0，否则按钮内文字行高为 0 会错位 */
}

/* 段间距：Hero 底→方案1标题 200；相邻方案 卡底→标题 157 */
.cuxiao-item1 {
    margin-top: clamp(125px, 10.417vw, 200px);
}
.cuxiao-item + .cuxiao-item {
    margin-top: clamp(98px, 8.177vw, 157px);
}

/* 代码标题（全站统一 51.38/72 Heavy #1D1D1F 居中） */
.cuxiao-title {
    font-size: clamp(32px, 2.676vw, 51.38px);
    line-height: clamp(45px, 3.75vw, 72px);
    font-weight: 700;
    color: #1D1D1F;
    text-align: center;
    margin-bottom: clamp(36px, 2.969vw, 57px);        /* 标题底→卡片顶 57 */
}
.cuxiao-item1 .cuxiao-title {
    margin-bottom: clamp(45px, 3.75vw, 72px);         /* 方案1 标题底→卡片顶 72 */
}

/* 白卡整图（1426 宽，圆角56/边框#DADADA/白底 已烘焙进图，无阴影） */
.cuxiao-card-wrap {
    position: relative;
    line-height: 0;
}
.cuxiao-card-img {
    width: 100%;
    display: block;
}

/* "查看"按钮（组158438 132×86）：叠加卡片右下
   距右 109/1426=7.64%，距底 77/985=7.82%，宽 132/1426=9.26% */
.cuxiao-view {
    position: absolute;
    right: 7.64%;
    bottom: 7.82%;
    width: 9.26%;
    line-height: 0;
    display: block;
    transition: opacity .2s ease;
}
.cuxiao-view img {
    width: 100%;
    display: block;
}
.cuxiao-view:hover {
    opacity: .88;
}

/* 末段：卡底→页脚 262 */
.cuxiao-last {
    padding-bottom: clamp(164px, 13.646vw, 262px);
}

/* ============================================================
   弹窗：解决方案详情 Modal（2026-09-21 二次优化：自定义窄版）
   用户裁决：750→600 收窄（同屏 80vh 容纳更多内容）+ 样式自定义优化
   结构：mask(加深+毛玻璃) + frame(进场动画/关闭钮定位基准，不随滚动)
        + scroll(弹窗本体：圆角16/投影/80vh 起滚/细滚动条) + content(顶图+轮播+底图)
   内部尺寸随宽等比 ×0.8：卡 619→495 / 间隙 43→34 / 边距 30→24 /
   箭头 69.5→56 / 箭头右距 58→46 / 卡底→箭头 116→93 / 箭头间隙 38→30
   关闭钮与箭头弃用蓝色切图，改 CSS 自绘（白色圆钮 + 深色 ×/chevron）
   轮播卡序/主题底色/末端钳制逻辑不变（见 cuxiao.js 与下方蓝湖实测存档）
   —— 蓝湖实测存档（画板26-29整图 @2x÷2）：弹窗原宽 750；切分点方案1
   1899/2872、方案2/3 2054/3027、方案4 2162/3135；卡 1238×1575@2x；
   方案1 黑底 #010302，方案2-4 白底 #FFFFFF
   ============================================================ */

/* 遮罩层：仅弹窗打开（display:flex）时参与渲染，毛玻璃安全 */
.cuxiao-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cuxiao-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: cuxiaoMaskIn .28s ease both;
}

/* frame：进场动画 + 关闭按钮定位基准（不随内容滚动） */
.cuxiao-modal-frame {
    position: relative;
    z-index: 1;
    animation: cuxiaoModalIn .36s cubic-bezier(.32, .72, .36, 1) both;
}
@keyframes cuxiaoMaskIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes cuxiaoModalIn {
    from { opacity: 0; transform: translateY(18px) scale(.95); }
    to { opacity: 1; transform: none; }
}

/* 关闭按钮（CSS 自绘 ×）：与弹窗 24px 圆角弧外切（切点在 45° 方向，视觉零间隙）
   2026-09-21 三次调整：36/贴6 → 28/贴2 → 外切定位（用户两轮反馈“还是远”，
   空隙源自圆角弧而非贴边距离，改用外切彻底消除）
   几何：按钮 r=14，外切 d=(24+14)/√2−24≈2.9px，top/right = −(14+2.9) ≈ −17px */
.cuxiao-modal-close {
    position: absolute;
    top: -17px;
    right: -17px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    cursor: pointer;
    padding: 0;
    transition: transform .25s ease, background .25s ease;
}
.cuxiao-modal-close::before,
.cuxiao-modal-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44%;
    height: 1.5px;
    background: #1D1D1F;
    border-radius: 1px;
}
.cuxiao-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.cuxiao-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cuxiao-modal-close:hover {
    background: #FFFFFF;
    transform: scale(1.1);
}

/* 外层滚动容器＝弹窗本体：宽 600 收窄；内容超 90vh 起滚（2026-09-21 用户裁决 80→90）；
   圆角 24（用户指定）+ 分层投影 + 隐藏滚动条（保留滚轮/触控板滚动） */
.cuxiao-modal-scroll {
    width: clamp(375px, 31.25vw, 600px);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .24);
    /* 隐藏滚动条（2026-09-21 用户裁决），不影响滚动能力 */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* 旧 IE/Edge */
}
.cuxiao-modal-scroll::-webkit-scrollbar { display: none; }   /* Chrome/Safari/新 Edge */

/* 内容：背景随方案主题（与顶/底切图空白区同色，接缝无缝） */
.cuxiao-modal-content {
    position: relative;
    background: #FFFFFF;
}
.cuxiao-modal-content.theme-dark {
    background: #010302;
}
.cuxiao-modal-content.theme-light {
    background: #FFFFFF;
}

/* 顶部/底部切图：宽=弹窗宽，高按原图比例自适应 */
.cuxiao-modal-top,
.cuxiao-modal-bottom {
    width: 100%;
    display: block;
    line-height: 0;
}

/* 轮播区：随弹窗收窄等比 ×0.8（卡 495 / 间隙 34 / 边距 24）
   视口按第十三章第9条加 12px 上下放大缓冲，负 margin 抵消占位不变 */
.cuxiao-modal-carousel {
    line-height: 0;
}
.cuxiao-modal-viewport {
    overflow: hidden;
    padding: 12px 0;
    margin: -12px 0;
}
.cuxiao-modal-track {
    position: relative;
    display: flex;
    gap: clamp(21px, 1.771vw, 34px);
    padding: 0 clamp(15px, 1.25vw, 24px);
    transition: transform .5s cubic-bezier(0.4, 0, 0.6, 1);
    will-change: transform;
}

/* 卡片：外层 .card-zoom 悬停放大（第十三章），内层整卡切图（原 1238×1575@2x） */
.cuxiao-modal-track > .card-zoom {
    flex: 0 0 clamp(309px, 25.781vw, 495px);
    min-width: 0;
}
.cuxiao-modal-card {
    width: 100%;
    aspect-ratio: 1238 / 1575; /* 图片加载前占位，防箭头位置跳动 */
    line-height: 0;
}
.cuxiao-modal-card img {
    width: 100%;
    display: block;
}

/* 箭头（CSS 自绘圆形钮）：⌀56，右缘距弹窗右 46，距卡底 93 */
.cuxiao-modal-arrows {
    display: flex;
    justify-content: flex-end;
    gap: clamp(19px, 1.563vw, 30px);
    padding-right: clamp(29px, 2.396vw, 46px);
    margin-top: clamp(58px, 4.844vw, 93px);
}
.cuxiao-modal-prev,
.cuxiao-modal-next {
    position: relative;
    width: clamp(35px, 2.917vw, 56px);
    height: clamp(35px, 2.917vw, 56px);
    border: 1px solid #D2D2D7;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    cursor: pointer;
    padding: 0;
    transition: background .25s ease, border-color .25s ease, transform .25s ease, opacity .25s ease;
}
.cuxiao-modal-prev::before,
.cuxiao-modal-next::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24%;
    height: 24%;
}
.cuxiao-modal-prev::before {
    border-left: 2px solid #1D1D1F;
    border-bottom: 2px solid #1D1D1F;
    transform: translate(-32%, -50%) rotate(45deg);
}
.cuxiao-modal-next::before {
    border-right: 2px solid #1D1D1F;
    border-top: 2px solid #1D1D1F;
    transform: translate(-68%, -50%) rotate(45deg);
}
.cuxiao-modal-prev:hover,
.cuxiao-modal-next:hover {
    background: #1D1D1F;
    border-color: #1D1D1F;
    transform: scale(1.06);
}
.cuxiao-modal-prev:hover::before,
.cuxiao-modal-next:hover::before { border-color: #FFFFFF; }
.cuxiao-modal-prev[disabled],
.cuxiao-modal-next[disabled] {
    opacity: .35;
    cursor: default;
    transform: none;
}