@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;
        text-align: center;
    }

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

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

    /* 2. 分类导航适配（适配移动端标签布局） */
    .category-navigation {
        width: 100%;
        padding: 15px;
        margin: 0 auto 10px;
        border-radius: 0;
        background: transparent !important;
        text-align: left;
    }

    .category-navigation .all-categories {
        display: block;
        width: 100%;
    }

    .category-navigation .category-item {
        display: inline-block;
        margin: 0 5px 10px;
        width: calc(50% - 10px);
        box-sizing: border-box;
    }

    .category-navigation .category-block {
        padding: 6px 15px !important;
        font-size: 0.85rem;
        min-width: 100%;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

    .category-navigation .category-header {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .category-navigation .subcategory-links {
        gap: 3px;
        margin-top: 4px;
        font-size: 0.7rem;
    }

    .category-navigation .subcategory-links a {
        padding: 2px 5px;
        font-size: 0.7rem;
    }

    /* 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-industry-enhanced {
    display: inline-block; /* 确保行内布局稳定 */
    white-space: nowrap; /* 禁止文字换行 */
}

/* 两个span的父容器（如果有）强制不换行 */
.case-industry-enhanced.parent { /* 替换为实际父容器类名，若无则删此行 */
    display: flex; /* 弹性布局强制同行 */
    flex-wrap: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出部分（可选） */
}

/* 点击次数span优化：缩小间距+强制行内 */
.case-industry-enhanced + span { /* 精准选中第二个span */
    margin-left: 5px !important; /* 缩小移动端间距，避免挤换行 */
    white-space: nowrap; /* 禁止点击次数换行 */
    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 15px;
        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;
        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;
    }
}

/* ===================== 小屏手机适配（≤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-item {
        width: 100%;
        margin: 0 0 10px 0;
    }

    .category-navigation .category-block {
        font-size: 0.8rem;
        padding: 5px 10px !important;
    }

    .category-navigation .subcategory-links a {
        font-size: 0.65rem;
        padding: 2px 4px;
    }
}

/* ===================== 动画样式（移动端复用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);
    }

    /* 分类导航hover/激活态适配 */
    .category-navigation .subcategory-links a:hover {
        background: #007FFF !important;
        color: #ffffff !important;
    }

    .category-navigation .category-item.on .category-block {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    }

    .category-navigation .subcategory-links a.current {
        background: #007FFF !important;
        color: #ffffff !important;
    }
}