/* ============================================================
   移动端增强样式 mobile.css（黎民康维保平台）
   规则全部包在 @media 内，桌面端（>768px）完全不受影响。
   目标：① 维保拉新（案例/评价滑动带）② 方便报修（按钮放大）
        ③ 收工程师（技师入驻卡强调 + 城市本地提示）④ 细节页修复
   ============================================================ */

/* ---------- 平板/手机（≤768px） ---------- */
@media (max-width: 768px) {

    /* 首页轮播压缩为紧凑 Hero：降高、隐藏箭头/圆点
       （当前轮播为渐变占位、无真图，竖屏占高无意义，压缩给下方内容让路） */
    .banner-wrap { height: 200px; }
    .banner-slide h1 { font-size: 24px; margin-bottom: 10px; }
    .banner-slide p { font-size: 14px; }
    .banner-arrow, .banner-dots { display: none; }

    /* 客户纪实 / 客户评价 → 横向滑动带（scroll-snap，露 1.3 张）
       直接服务"维保拉新"：手机上把最强证据做成可滑卡片，不堆长图墙 */
    .home-case-grid,
    .home-feedback-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        /* ★切断最小内容宽度向上传导：flex 不换行容器的 min-content = 全部卡片宽度之和，
           会把手机布局视口撑宽（实测撑到 477px），导致整页右侧被截断。
           inline-size 尺寸 containment 使其固有宽度视为 0，横向溢出只留在自身滚动条内。 */
        contain: inline-size;
    }
    .home-case-grid .case-item,
    .home-feedback-grid .feedback-item {
        flex: 0 0 78%;
        max-width: 78%;
        scroll-snap-align: start;
    }
    .home-feedback-grid .feedback-item { height: auto; }
    .home-case-grid::-webkit-scrollbar,
    .home-feedback-grid::-webkit-scrollbar { display: none; }

    /* 臻品推荐大卡窄屏更紧凑 */
    .featured-grid { gap: 14px; }
    .featured-card { height: 200px; }

    /* 技师入驻卡（服务网格第 2 张）在手机上强调，服务"收工程师"目标 */
    .home-service-grid .card:nth-child(2) {
        border: 2px solid var(--accent);
        box-shadow: 0 0 0 3px rgba(76, 175, 80, .22);
    }

    /* 城市分站：本地工程师空态提示更显眼（就近指派文案放大） */
    .city-tech-empty { font-size: 15px; padding: 30px 18px; line-height: 2; }

    /* 黑名单：内容区内边距收窄，手机不顶边 */
    .bl-content { padding: 30px 16px; }

    /* ---- 视觉统一层移动端微调（配合 theme.css） ---- */
    .card, .pg-card, .part-card, .feedback-item,
    .home-case-grid .case-item, .qa-item {
        box-shadow: 0 8px 22px -14px rgba(16, 61, 20, .30) !important;
    }
    .home-body { padding: 36px 18px; }
    .page-title { letter-spacing: 1px; }
    .quick-book button { letter-spacing: 2px; }

    /* ★首屏双按钮（报修+咨询）并排 + 本地服务承诺句
       直接服务"三目标"内容优先级文档第1屏：手机上把最强转化入口（报修/咨询）做成并排大按钮。
       规则全部收敛到 .quick-book 下，优先级压过桌面 .quick-book button，确保手机端不被桌面样式覆盖 */
    .quick-book .qb-btns { display:flex; gap:8px; }
    .quick-book .qb-btns > * { flex:1; min-width:0; }
    .quick-book .qb-repair,
    .quick-book .qb-consult,
    .quick-book .qb-tech {
        flex:1; width:100%; padding:14px 6px; font-size:15px; font-weight:bold;
        border-radius:10px; cursor:pointer; text-decoration:none; white-space:nowrap;
        display:flex; align-items:center; justify-content:center; line-height:1.25;
    }
    /* r80：三按钮统一白描边幽灵款（与桌面同款：透明底+白描边+白字，悬停填白反色绿字；等宽由 flex:1 保证） */
    .quick-book .qb-repair,
    .quick-book .qb-consult,
    .quick-book .qb-tech { background:transparent; color:#fff; border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.18); }
    .quick-book .qb-promise { display:block; margin:14px 0 0; color:#fff; font-size:13px; opacity:.95; text-shadow:0 1px 3px rgba(0,0,0,.3); }
}

/* ---------- 手机（≤600px） ---------- */
@media (max-width: 600px) {

    /* 报修条按钮全宽、点按区更大，服务"方便报修" */
    .quick-book { padding: 24px 16px; }
    .quick-book button {
        width: 100%;
        padding: 14px 18px;
        font-size: 17px;
    }

    /* 滑动带更窄（露 1.1 张） */
    .home-case-grid .case-item,
    .home-feedback-grid .feedback-item {
        flex-basis: 86%;
        max-width: 86%;
    }

    /* 首页内容区与标题间距收敛 */
    .home-body { padding: 28px 16px; }
    .featured-title { font-size: 22px; letter-spacing: 2px; margin: 36px 0 22px; }
    .page-title { font-size: 22px; }

    /* 案例详情：四格图集改 2 列（避免手机挤成 4 条细列） */
    .case-photos { grid-template-columns: repeat(2, 1fr) !important; }

    /* 黑名单弹窗：表单两列堆叠，手机不挤压 */
    .bl-form-row { flex-direction: column; gap: 0; }
    .bl-form-row .bl-col { width: 100%; margin-bottom: 12px; }
    .bl-modal { padding: 22px 16px; }

    /* ---- 视觉统一层移动端微调（配合 theme.css） ---- */
    .featured-title { letter-spacing: 3px; }
    .footer-v2 { padding: 48px 20px 24px; }
    .footer-v2 h4 { letter-spacing: 1px; }
}

/* ---------- 小屏（≤380px） ---------- */
@media (max-width: 380px) {
    .banner-wrap { height: 180px; }
    /* r77：三按钮小屏收字号，保证"一键报修/免费咨询/技师入驻"不换行 */
    .quick-book .qb-repair, .quick-book .qb-consult, .quick-book .qb-tech {
        font-size:13px; padding:12px 4px; letter-spacing:0;
    }
    .home-case-grid .case-item,
    .home-feedback-grid .feedback-item {
        flex-basis: 90%;
        max-width: 90%;
    }
}

/* ---------- 城市分站：本地工程师双列紧凑网格（r22） ----------
   原 city.blade 内联 ≤600px 规则为单列堆叠，纵向过长；
   注意：city.blade 的内联 <style> 在 body 中、位于 mobile.css 链接之后，
   同优先级会压掉本文件，故全部用双类选择器提权。 */
@media (max-width: 600px) {
    .city-tech-grid.city-tech-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .city-tech-card.city-tech-card {
        padding: 14px 12px;
    }
    .city-tech-card .ct-head.ct-head {
        gap: 9px;
        margin-bottom: 8px;
    }
    .city-tech-card .ct-avatar.ct-avatar {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
    .city-tech-card .ct-name.ct-name {
        font-size: 14px;
    }
    .city-tech-card .ct-level.ct-level {
        font-size: 11px;
    }
    .city-tech-card .ct-phone.ct-phone {
        font-size: 12.5px;
        margin-bottom: 6px;
    }
    .city-tech-card .ct-skills.ct-skills {
        font-size: 12px;
        line-height: 1.6;
    }
}


/* ---------- 城市分站：手机端「本地工程师」前置（r23） ----------
   用户反馈：手机打开 /weinan 首屏只有「正在筹备中」大卡，本地工程师网格
   沉在 ~4900px 底部（排在筹备卡/广告/臻品/服务8卡/案例8卡之后）根本看不到。
   ≤600px 时把工程师标题+网格提为 home-body 首个内容（紧跟报修条），
   桌面端 DOM 顺序与视觉完全不变。
   配套：city.blade.php 的 home-body 已加 .city-body 钩子（仅城市页有），
   避免误伤首页的 .home-body；工程师 h2 加 .city-tech-title 便于精确定位。 */
@media (max-width: 600px) {
    .home-body.city-body {
        display: flex;
        flex-direction: column;
    }
    .home-body.city-body > .city-tech-title { order: -2; }
    .home-body.city-body > .city-tech-grid { order: -1; }
}


/* ---------- 首页「本地工程师」移动端（r25）：双列 + chips 横滚 ----------
   首页内联 <style> 晚于 mobile.css，网格列数须双类提权覆盖。 */
@media (max-width: 600px) {
    .home-tech-grid.home-tech-grid { grid-template-columns:1fr 1fr; gap:12px; }
    .home-tech .ht-head { flex-direction:column; align-items:flex-start; }
    .home-tech .ht-cities { width:100%; }
    .home-tech .ht-chip { padding:6px 12px; font-size:12px; }
}

/* r35：r27 的 flex order 下移补丁已删除——本地工程师区块已在 r35 直接挪进 blade DOM（客户评价之后），DOM 顺序即视觉顺序，不再需要 order 补丁。
   教训：order 补丁只搬走了标题和列表，没搬 r32 后加的「查看全部」按钮，导致按钮孤悬在客户评价下方、与评价按钮叠排。 ---------- */

/* ---------- 首页广告位上下大空白压缩（r30，用户红框1/2） ----------
   实测 ≤600px：承诺条→橙广告 76px（quick-book pb24 + home-body pt28 + ad-row mt48），
   蓝广告→臻品标题 84px（ad-row mb48 + featured-title mt36）。压缩到 36/24px。
   双类选择器提权，压过 layout 内联的单类规则。 */
@media (max-width: 600px) {
    .home-body:not(.city-body) { padding-top: 12px; }
    .quick-book { padding-bottom: 16px; }
    .home-body:not(.city-body) .ad-row.ad-row { margin-top: 8px; margin-bottom: 8px; }
    .home-body:not(.city-body) .featured-title.featured-title { margin-top: 16px; }
}

/* ---------- 首页间距/臻品/banner 再优化（r31，用户选项 1.2.4.5） ----------
   项目4：手机端臻品改 2 列（实测原单列4张总高842px；单卡已200px无需限高），总高减半。
   项目2：臻品网格→核心服务标题 40px→~24px（相邻兄弟提权压过 .page-title）。
   项目1：核心服务网格→客户纪实标题 66px→~30px（.home-service-grid 双类提权压过 .card-grid 的 mb56）。 */
@media (max-width: 600px) {
    .home-body:not(.city-body) .featured-grid.featured-grid { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
    .home-body:not(.city-body) .home-service-grid.home-service-grid { margin-bottom: 18px; }
}


/* ============================================================
   r32（2026-10-08）：首页五大区块移动端横滑重构
   ① 客户纪实/客户评价：修复"只能左滑不能右滑"（scroll-snap mandatory 在边界与页面纵向滚动抢手势；
      overscroll-behavior-x:auto 把越界手势泄露给页面）→ 改 proximity + 隔离 overscroll + 左右留白。
   ② 核心服务/本地工程师/技术问答：改 2 排左右横滑（grid-auto-flow:column + 2 行 + grid-auto-columns），
      均加 contain:inline-size（防 min-content 把视口撑宽，r22 铁律）。
   全部包在 ≤768 / ≤600，桌面基准不动。
   ============================================================ */

/* ---------- 客户纪实 / 客户评价：横滑健壮性（保留 1 行） ---------- */
@media (max-width: 768px) {
    .home-case-grid,
    .home-feedback-grid {
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        width: 100%;
        max-width: 100%;
    }
    .home-case-grid .case-item,
    .home-feedback-grid .feedback-item { scroll-snap-align: start; }
}

/* ---------- 核心服务：2 排左右横滑 + 底部查看全部 ---------- */
@media (max-width: 768px) {
    .home-service-grid.home-service-grid {
        display: grid;
        grid-template-columns: none;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        grid-auto-columns: 44%;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        contain: inline-size;
        padding-bottom: 8px;
        margin-bottom: 18px;
    }
    .home-service-grid.home-service-grid::-webkit-scrollbar { display: none; }
    .home-service-grid .card { scroll-snap-align: start; }
}

/* ---------- 技术问答精华：2 排左右横滑 + 底部查看全部 ---------- */
@media (max-width: 768px) {
    .home-body:not(.city-body) .qa-list.qa-list {
        display: grid;
        grid-template-columns: none;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        grid-auto-columns: 70%;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        contain: inline-size;
        padding-bottom: 8px;
        margin-top: 16px;
    }
    .home-body:not(.city-body) .qa-list .qa-item { scroll-snap-align: start; }
    .home-body:not(.city-body) .qa-list.qa-list::-webkit-scrollbar { display: none; }
}

/* ---------- 本地工程师：2 排左右横滑 + 底部查看全部（≤600，桌面隐藏；覆盖 r25 的 2 列网格） ---------- */
@media (max-width: 600px) {
    .home-tech-grid.home-tech-grid {
        display: grid;
        grid-template-columns: none;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        grid-auto-columns: 42%;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        contain: inline-size;
        padding-bottom: 8px;
    }
    .home-tech-grid.home-tech-grid::-webkit-scrollbar { display: none; }
    .home-tech-grid .city-tech-card { scroll-snap-align: start; }
    /* ht-cities 同为横滑带，补 contain 防视口溢出（r22 铁律） */
    .home-tech .ht-cities.ht-cities { contain: inline-size; }
}

/* ============================================================
   r34（2026-10-08 晚）：手机端整体美化（和谐·美观·大方·高端）
   ① 核心服务：44% 窄列下 padding24+图标50+标题18 被两行标题拉出大留白 → 紧凑化
      + 简介最多 3 行截断（行高齐平，卡片高度一致）
   ② 臻品推荐：有图卡 fc-bar/fc-logo/fc-go 压小适配 190px 短卡；
      标题单行省略（此前窄列逐字换行竖排，观感差）
   ③ 页脚「业务范围」上方大空白：footer margin-top72+padding-top64 手机端压缩
   ============================================================ */

/* ---------- 核心服务卡片紧凑化（横滑 2 排内） ---------- */
@media (max-width: 768px) {
    .home-service-grid.home-service-grid .card.card {
        padding: 14px 12px;
        display: flex;
        flex-direction: column;
    }
    .home-service-grid .card .card-icon.card-icon {
        width: 38px;
        height: 38px;
        font-size: 20px;
        border-radius: 9px;
        margin-bottom: 8px;
        flex: none;
    }
    .home-service-grid .card.card h3 { font-size: 15px; margin: 0 0 4px; }
    .home-service-grid .card.card p {
        font-size: 12.5px;
        line-height: 1.6;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ---------- 臻品推荐：底部标题条/角标适配手机短卡 ---------- */
@media (max-width: 768px) {
    .featured-card .fc-bar.fc-bar {
        padding: 10px 12px;
        font-size: 13.5px;
        letter-spacing: 1px;
        gap: 8px;
    }
    .featured-card .fc-bar.fc-bar > span:first-child {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .featured-card .fc-go.fc-go { font-size: 11.5px; padding: 5px 10px; flex: none; }
    .featured-card .fc-logo.fc-logo { top: 10px; left: 10px; width: 28px; height: 28px; font-size: 12px; }
}

/* ---------- 页脚与问答区间大空白压缩 + 段落呼吸统一 ---------- */
/* r91：压缩区间从 ≤600 扩展到 ≤768（平板/大手机仍用桌面 margin-top:72 会留大空白），并收紧间距 */
@media (max-width: 768px) {
    .footer-v2.footer-v2 { margin-top: 12px; padding-top: 22px; padding-bottom: 18px; }
    .footer-v2-grid.footer-v2-grid { gap: 18px 0; }
    .home-body:not(.city-body) { padding-bottom: 16px; }
}