/* mobileqiyecase.css - 企业案例移动端专属样式（基于mobilebase.css补充/覆盖） */
/* 仅覆盖案例页独有模块，通用规则依赖mobilebase.css */

/* ==============================================
   1. 案例页标题栏适配（核心覆盖）
   ============================================== */
@media (max-width: 1299px) {
    /* 标题栏容器 - 适配移动端宽度/高度/背景 */
.left_gg-ye {
    width: 100% !important; /* 覆盖PC端1300px */
    height: auto !important; /* 取消固定150px，自适应 */
    padding: 20px 15px !important; /* 移动端内边距 */
    font-size: large !important; /* 缩小标题字号 */
    background: #14293E !important; /* 保留背景色 */
    flex-direction: column !important;
    /* 关键修改：取消居中，改为左对齐 */
    justify-content: flex-start !important; /* 垂直方向上从顶部开始（保持原有垂直布局） */
    align-items: flex-start !important; /* 水平方向左对齐（核心：让文字偏左） */
}

    /* 主标题 */
    .zuozhe-nr-bt {
        font-size: 20px !important; /* 移动端缩小字号 */
        margin: 0 0 8px 0 !important;
        line-height: 1.3 !important;
    }

    /* 分类/点击数 */
    .zuozhe-nr-bt2 {
        font-size: 12px !important; /* 移动端缩小 */
        line-height: 1.2 !important;
    }

    .zuozhe-nr-bt2 span {
        margin: 0 8px !important; /* 缩小间距，替代PC端50px */
        display: inline-block !important; /* 防止换行挤在一起 */
    }
}

/* ==============================================
   2. 路径导航适配
   ============================================== */
@media (max-width: 1299px) {
    .xzfeizi {
        padding-left: 5px !important; /* 移动端左内边距 */
        font-size: 12px !important;
        line-height: 26px !important; /* 缩小行高 */
    }

    .xzfeizi a {
        font-size: 12px !important;
    }
}

/* ==============================================
   3. 案例内容容器适配（核心：重构Flex布局为移动端单列）
   ============================================== */
@media (max-width: 1299px) {
    /* 主容器宽度覆盖 */
    #hot_all, #neirong-ye, #zxnr-ye {
        width: 100% !important; /* 覆盖PC端1300px */
        padding: 0 2px !important; /* 移动端左右留白 */
        margin: 0 !important;
    }

    /* Flex容器：PC端左右双栏 → 移动端单列 */
    .columns-container {
        flex-direction: column !important; /* 垂直排列 */
        gap: 20px !important; /* 上下栏间距 */
    }

    /* 左栏：占满宽度，取消PC端950px */
    .neirong {
        width: 100% !important;
        padding: 15px 0 !important;
        float: none !important; /* 取消PC端浮动 */
        font-size: 14px !important; /* 对齐mobilebase的14px */
        line-height: 1.6 !important; /* 移动端行高优化 */
    }

    /* 右栏：占满宽度，适配移动端 */
    .longnow {
        width: 100% !important;
        padding: 15px !important;
        background: #fff !important;
        border-radius: 4px !important;
        box-shadow: 0 0 8px rgba(0,0,0,0.05) !important;
    }
}

/* ==============================================
   4. 报价模块移动端适配
   ============================================== */
@media (max-width: 1299px) {
    .budget-container {
        margin: 20px 0 !important;
        padding: 0 10px !important;
    }

    /* 报价项：PC端横向4列 → 移动端2列 */
.budget-grid {
    display: flex !important; /* 补充这行，确保是弹性布局 */
    flex-wrap: wrap !important;
    gap: 15px !important; /* 列之间的间距 */
    justify-content: space-between !important; /* 两端对齐，间距均匀 */
}

    .budget-item {
        flex: 0 0 calc(50% - 7.5px) !important; /* 2列，减去一半间距 */
        height: 60px !important; /* 缩小高度 */
        font-size: 13px !important;
    }

    .budget-item i {
        font-size: 16px !important; /* 图标缩小 */
        margin-bottom: 4px !important;
    }
}

/* ==============================================
   5. 推荐案例/分类列表适配
   ============================================== */
@media (max-width: 1299px) {
    /* 分类标题 */
    .longnow span[style*="font-size: 20px"] {
        font-size: 16px !important;
    }
    .longnow font[color="#00a7b2"] {
        font-size: 16px !important;
    }

    /* 案例列表表格 */
    .longnow table {
        width: 100% !important;
    }
    .longnow td {
        padding: 4px 0 !important;
        font-size: 13px !important;
    }
    /* 列表项容器：覆盖PC端310px */
    .longnow div[style*="310px"] {
        width: 100% !important;
        padding-left: 15px !important;
    }
    /* 统计文本 */
    .stats-text {
        font-size: 14px !important;
        margin: 8px 0 !important;
    }
}

/* ==============================================
   6. 小屏手机适配（≤480px，补充mobilebase的断点）
   ============================================== */
@media (max-width: 480px) {
    /* 标题栏进一步缩小 */
    .zuozhe-nr-bt {
        font-size: 18px !important;
    }

    /* 案例列表文字进一步缩小 */
    .longnow td {
        font-size: 12px !important;
    }
    /* 上下篇案例链接 */
    .neirong div[align="left"] {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

/* ==============================================
   7. 兜底：大屏还原PC样式（对齐mobilebase的≥1300px）
   ============================================== */
@media (min-width: 1300px) {
    /* 大屏下不生效移动端样式，还原PC端qiyecase.css */
    .left_gg-ye, .zuozhe-nr-bt, .zuozhe-nr-bt2,
    .columns-container, .neirong, .longnow,
    .budget-container, .budget-grid, .budget-item {
        all: unset !important;
    }
}




/* 移动端表格适配核心样式 - 解决多列表格纵向拉长问题 */
@media screen and (max-width: 1299px) {
    /* 1. 给表格外层加横向滚动容器（自动匹配所有文章内的表格） */
    .neirong table,  /* 文章内容区的表格 */
    .longnow table,  /* 右侧推荐区的表格 */
    #zxnr-ye table { /* 案例内容区的表格 */
        width: 100%;
        min-width: 600px; /* 保证表格列宽不被过度压缩，根据实际调整 */
        border-collapse: collapse; /* 合并边框，更整洁 */
    }

    /* 2. 给表格的直接父元素添加横向滚动（关键！） */
    .neirong,
    .longnow,
    #zxnr-ye {
        overflow-x: auto; /* 横向滚动 */
        -webkit-overflow-scrolling: touch; /* 开启iOS弹性滚动，提升体验 */
        padding-bottom: 10px; /* 滚动条不遮挡内容 */
    }

    /* 3. 表格单元格样式优化（可选，提升可读性） */
    .neirong td,
    .neirong th,
    .longnow td,
    .longnow th {
        padding: 8px 6px !important; /* 缩小单元格内边距，适配移动端 */
        font-size: 12px !important; /* 缩小字号，减少横向占比 */
        line-height: 1.4 !important; /* 优化行高 */
        white-space: nowrap; /* 禁止单元格文字换行，避免纵向拉长 */
        border: 1px solid #eee !important; /* 统一边框样式 */
    }

    /* 4. 表格标题/表头优化 */
    .neirong th,
    .longnow th {
        background-color: #f5f5f5 !important; /* 表头加背景色，区分内容 */
        font-weight: 600 !important;
        color: #333 !important;
    }

    /* 5. 滚动条样式美化（可选，隐藏原生滚动条，保留功能） */
    .neirong::-webkit-scrollbar,
    .longnow::-webkit-scrollbar {
        height: 4px; /* 横向滚动条高度 */
    }
    .neirong::-webkit-scrollbar-thumb,
    .longnow::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 2px;
    }
}