@charset "utf-8";

/* ===================== 企业案例列表页移动端适配（≤1299px） ===================== */
@media (max-width: 1299px) {
    /* 1. 页面头部适配 */
    .case-page-header {
        padding: 30px 0 10px 0;
        width: 100vw !important;
        max-width: 100% !important;
    }

    .case-page-header .case-main-title {
        font-size: 24px;
        margin-bottom: 15px;
        line-height: 1.2;
    }

    .case-page-header p {
        font-size: 0.9rem;
        max-width: 100%;
        padding: 0 15px;
        margin: 0 auto 15px;
        line-height: 1.5;
    }

    /* case-stats 强制2列布局 */
    .case-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 20px;
        padding: 0 15px;
        justify-content: flex-start;
    }

    .case-stat-item {
        flex: 0 0 calc(50% - 7.5px) !important;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .case-stat-number {
        font-size: 1.5rem;
        color: #007FFF;
    }

    .case-stat-label {
        font-size: 0.8rem;
    }

    /* 2. 分类导航适配 */
    .category-navigation {
        width: 100%;
        padding: 15px 0px;
        margin: 0 auto 10px;
        border: none;
        background-color: #f8f9fa;
        border-radius: 0;
    }

    .category-navigation .category-section {
        margin-bottom: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

/* 基础样式：黑色底色 + 蓝色文字 */
.category-navigation .category-title {
    float: none;
    width: 100%;
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: #007FFF; /* 蓝色文字 */
    line-height: 2;
    border-radius: 2px;
    background-color: #000; /* 新增：黑色框体底色 */
}

/* 核心修复：取消点击/激活时的红色背景 */
.category-navigation .category-title:active,
.category-navigation .category-title:focus {
    background-color: #000 !important; /* 强制保持黑色底色 */
    color: #007FFF !important; /* 强制保持蓝色文字 */
    /* 可选：如果有其他点击态样式（如边框），也一并重置 */
    outline: none; /* 清除点击时的默认外边框 */
}

    .category-navigation .category-links {
        margin-left: 0;
        line-height: 1.8;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .category-navigation .category-links a {
        padding: 4px 8px;
        font-size: 0.8rem;
        margin-right: 0;
        margin-bottom: 5px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

    /* 3. 案例网格容器适配 - 强制2列布局 */
    .case-grid-container {
        width: 100%;
 
        box-sizing: border-box;
    }

    .cases-grid-enhanced {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 20px;
        width: 100% !important;
    }

    .case-card-enhanced {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        width: 100% !important;
        box-sizing: border-box;
    }

    .case-img-enhanced {
        height: 120px;
        width: 100% !important;
    }

    .case-tag-enhanced {
        top: 8px;
        right: 8px;
        padding: 2px 6px;
        font-size: 0.7rem;
    }

    .case-content-enhanced {
    padding: 10px 0; /* 上/下 10px，左/右 0px */
    }

    .case-content-enhanced h3 {
        font-size: 0.95rem;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .case-content-enhanced p {
        font-size: 0.8rem;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .case-meta-enhanced {
    display: none !important;
    }

    .case-industry-enhanced {
        font-size: 0.7rem;
    }

    .case-meta-enhanced span:last-child {
        margin-left: 0;
        flex: 1 1 100%;
    }

    /* 4. 加载更多按钮适配 */
    .case-load-more {
        width: 100%;
        margin: 20px auto 30px;
        padding: 0 15px;
    }

    .case-load-more button {
        padding: 12px 20px;
        font-size: 1rem;
        min-width: 100%;
        height: auto;
    }

    .case-load-more button i {
        margin-right: 8px;
        font-size: 1rem;
    }

    /* 5. 相关推荐区域适配 - 强制2列布局（核心修改） */
    .case-recommendations {
        width: 100%;
        padding: 20px 0px;
        margin-bottom: 30px;
        border-radius: 0;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }

    .case-recommendations h2 {
        font-size: 1.4rem;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .case-recommendations h2:after {
        width: 60px;
    }

    .case-services-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 强制2列 */
        gap: 15px !important;
        width: 100% !important;
    }

    .case-service-card {
        padding: 15px 10px;
        border-radius: 4px;
        width: 100% !important;
        box-sizing: border-box;
    }

    .case-service-card i {
        font-size: 2rem !important;
        margin-bottom: 10px;
        height: 40px;
        line-height: 40px;
    }

    .case-service-card h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .case-service-card p {
        font-size: 0.8rem;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .service-link {
        font-size: 0.8rem;
    }

    /* 6. 无案例提示适配 */
    .no-cases-message {
        padding: 40px 15px;
        grid-column: 1 / -1;
    }

    .no-cases-message i {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }

    .no-cases-message h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .no-cases-message p {
        font-size: 0.9rem;
    }

    /* 7. 全局容器适配（覆盖PC端固定宽度） */
    #hot_all,
    #neirong-yezp,
    #zxnr-ye {
        width: 100% !important;
        padding: 0 15px;
        margin: 0 auto;
    }
    .service-process-section {
        display: none !important; /* 完全隐藏，不占用任何空间 */
    }
}

/* ===================== 小屏手机适配（≤480px） ===================== */
@media (max-width: 480px) {
    /* 1. 页面头部小屏适配 */
    .case-page-header .case-main-title {
        font-size: 20px;
    }

    .case-page-header p {
        font-size: 0.85rem;
    }

    /* case-stats 小屏仍保持2列 */
    .case-stats {
        gap: 10px;
    }

    .case-stat-item {
        flex: 0 0 calc(50% - 5px) !important;
    }

    .case-stat-number {
        font-size: 1.2rem;
    }

    /* 2. 案例网格小屏强制保持2列 */
    .cases-grid-enhanced {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .case-img-enhanced {
        height: 110px;
    }

    /* 3. 相关推荐小屏强制保持2列（核心修改） */
    .case-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .case-service-card {
        padding: 15px 10px;
    }

    /* 4. 分类导航小屏适配 */
    .category-navigation .category-links a {
        font-size: 0.75rem;
        padding: 3px 6px;
    }
}

/* ===================== 动画样式（移动端复用PC端逻辑） ===================== */
@keyframes caseFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================== 兜底样式（确保适配完整性） ===================== */
@media (max-width: 1299px) {
    /* 确保卡片hover效果移动端正常 */
    .case-card-enhanced:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .case-card-enhanced:hover .case-img-enhanced img {
        transform: scale(1.03);
    }

    /* 按钮hover效果适配 */
    .case-link-enhanced:hover {
        background-color: #2a3a8c;
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

    .case-load-more button:hover {
        background-color: white;
        color: #007FFF;
        transform: translateY(-1px);
    }

    .case-service-card:hover {
        background-color: #f0f7ff;
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
    }
}