/* =========================================
   【案例列表页】专属 CSS (Cases Specific)
   维护记录：已剥离全局冗余，提取所有内联样式，完美适配移动端与胶囊导航
========================================= */

/* --- 1. 顶部 Banner 与面包屑 --- */
.page-banner { background-color: var(--auth-blue-dark, #172554); padding: 60px 0 40px; color: var(--white, #ffffff); border-bottom: 4px solid var(--eco-green, #059669); }
.page-title { font-size: 2.5rem; font-weight: 900; margin-bottom: 10px; }
.page-desc { color: #cbd5e1; font-size: 1.1rem; margin-bottom: 25px; max-width: 800px; line-height: 1.6; }
.breadcrumbs { font-size: 0.9rem; color: #94a3b8; }
.breadcrumbs a { color: #cbd5e1; transition: var(--transition, all 0.3s ease); text-decoration: none; }
.breadcrumbs a:hover { color: var(--warn-yellow, #f59e0b); }
.breadcrumbs span { color: var(--warn-yellow, #f59e0b); font-weight: 700; }

/* --- 2. 悬浮分类导航 (大厂质感胶囊滑动版) --- */
.category-sticky-nav { background: var(--white, #ffffff); border-bottom: 1px solid var(--border-color, #e2e8f0); position: sticky; top: 85px; z-index: 990; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.sticky-nav-inner { display: flex; justify-content: flex-start; gap: 15px; overflow-x: auto; white-space: nowrap; padding: 16px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: center; }
.sticky-nav-inner::-webkit-scrollbar { display: none; }
.anchor-link { color: var(--text-main, #1e293b); font-weight: 600; font-size: 0.95rem; padding: 8px 24px; background-color: var(--bg-gray, #f1f5f9); border: 1px solid transparent; border-radius: 50px; transition: var(--transition, all 0.3s ease); text-decoration: none; display: inline-flex; }
.anchor-link:hover { color: var(--auth-blue, #1e3a8a); background-color: var(--white, #ffffff); border-color: var(--auth-blue, #1e3a8a); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(30, 58, 138, 0.08); }
.anchor-link.active { background-color: var(--auth-blue, #1e3a8a); color: var(--white, #ffffff); border-color: var(--auth-blue, #1e3a8a); font-weight: 700; box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25); pointer-events: none; }

/* --- 3. 案例列表主区域 --- */
.cases-page-content { padding: 60px 0 100px; background-color: var(--bg-gray, #f1f5f9); }
.cases-grid-large { display: flex; flex-direction: column; gap: 40px; }

/* 缺省空数据状态 */
.empty-data-tips { text-align: center; padding: 60px; color: #94a3b8; font-weight: bold; background: var(--white, #ffffff); border: 1px dashed var(--border-color, #e2e8f0); border-radius: 8px; font-size: 1.1rem; }
.empty-data-tips i { font-size: 3rem; margin-bottom: 15px; color: #cbd5e1; display: block; }

/* --- 4. 详细案例卡片 --- */
.detailed-case-card { display: flex; background-color: var(--white, #ffffff); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color, #e2e8f0); box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: var(--transition, all 0.3s ease); }
.detailed-case-card:hover { box-shadow: 0 20px 40px rgba(30, 58, 138, 0.08); border-color: var(--auth-blue, #1e3a8a); transform: translateY(-5px); }

.d-case-image { width: 45%; position: relative; background-color: var(--bg-gray, #f1f5f9); display: block; overflow: hidden; flex-shrink: 0; }
.d-case-image img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; transition: transform 0.5s ease; display: block; }
.detailed-case-card:hover .d-case-image img { transform: scale(1.05); }

.case-badge { position: absolute; top: 20px; left: 20px; color: var(--white, #ffffff); padding: 6px 16px; border-radius: 4px; font-weight: 700; font-size: 0.9rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2; pointer-events: none; background-color: var(--warn-yellow, #f59e0b); }

.d-case-info { width: 55%; padding: 40px; display: flex; flex-direction: column; }
.d-case-header { margin-bottom: 25px; }
.case-date { display: inline-block; color: var(--text-light, #64748b); font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; background-color: var(--bg-gray, #f1f5f9); padding: 4px 12px; border-radius: 50px; }
.case-date i { color: var(--eco-green, #059669); margin-right: 5px; }
.d-case-header h3 { font-size: 1.5rem; font-weight: 900; line-height: 1.4; margin: 0; }
.d-case-header h3 a { color: var(--auth-blue, #1e3a8a); transition: color 0.3s; text-decoration: none; }
.d-case-header h3 a:hover { color: var(--warn-yellow, #f59e0b); }

/* 核心指标条 (Metrics) */
.case-metrics { display: flex; background-color: #f8fafc; border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; margin-bottom: 25px; padding: 15px 20px; }
.metric-item { flex: 1; display: flex; flex-direction: column; border-right: 1px dashed #cbd5e1; padding-right: 15px; margin-right: 15px; }
.metric-item:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.metric-item span { color: var(--text-light, #64748b); font-size: 0.85rem; margin-bottom: 4px; }
.metric-item strong { color: var(--text-main, #1e293b); font-size: 1.05rem; font-weight: 700; }
.metric-item .text-green { color: var(--eco-green, #059669); }

.d-case-desc { flex-grow: 1; margin-bottom: 25px; color: var(--text-main, #1e293b); font-size: 0.95rem; line-height: 1.7; }
/* 多行文本截断 */
.intro-text-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; }

.d-case-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 25px; border-top: 1px dashed var(--border-color, #e2e8f0); margin-top: auto; }
.d-case-actions .btn-text { color: var(--warn-yellow-hover, #d97706); font-size: 0.95rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.d-case-actions .btn-text:hover { color: var(--auth-blue, #1e3a8a); }

/* --- 5. 穿插 CTA 横幅 --- */
.infeed-cta { background-color: var(--white, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 40px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 10px 30px rgba(30, 58, 138, 0.05); margin-top: 80px; }
.infeed-text h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; color: var(--auth-blue, #1e3a8a); margin-top: 0; }
.infeed-text p { color: var(--text-light, #64748b); font-size: 0.95rem; max-width: 600px; line-height: 1.6; margin: 0; }

/* SDCMS 分页兼容 */
.pagination { margin-top: 60px; }
.pagination ul { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.pagination li { display: block; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 15px; background: var(--white, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 4px; color: var(--text-main, #1e293b); font-weight: 700; transition: var(--transition, all 0.3s ease); text-decoration: none; }
.pagination a:hover { background: #f8fafc; color: var(--auth-blue, #1e3a8a); border-color: var(--auth-blue, #1e3a8a); }
.pagination .active, .pagination .active a, .pagination .current, .pagination .current a { background: var(--auth-blue, #1e3a8a) !important; color: var(--white, #ffffff) !important; border-color: var(--auth-blue, #1e3a8a) !important; }
.pagination .disabled, .pagination .disabled a { color: #cbd5e1 !important; pointer-events: none; background: #f8fafc !important; }

/* =========================================
   6. 移动端/平板响应式适配
========================================= */
@media (max-width: 1024px) {
    .detailed-case-card { flex-direction: column; } 
    .d-case-image { width: 100%; height: 350px; min-height: auto; }
    .d-case-image img { min-height: 350px; }
    .d-case-info { width: 100%; padding: 30px; }
    .infeed-cta { flex-direction: column; text-align: center; gap: 25px; padding: 30px; }
}

@media (max-width: 768px) {
    .cases-page-content { padding: 40px 0 80px; }
    
    .sticky-nav-inner { padding: 12px 20px; gap: 10px; }
    .anchor-link { padding: 6px 18px; font-size: 0.9rem; }

    .d-case-header h3 { font-size: 1.3rem; }
    
    /* 核心修复：手机端指标条优雅堆叠，左边文字，右边数据 */
    .case-metrics { flex-direction: column; gap: 10px; padding: 15px; margin-bottom: 20px; }
    .metric-item { border-right: none; border-bottom: 1px dashed #cbd5e1; padding-right: 0; margin-right: 0; padding-bottom: 10px; flex-direction: row; justify-content: space-between; align-items: center; }
    .metric-item:last-child { border-bottom: none; padding-bottom: 0; }
    .metric-item span { margin-bottom: 0; }
    
    .d-case-actions { flex-direction: column-reverse; gap: 15px; align-items: stretch; text-align: center; padding-top: 20px; }
    .d-case-actions .btn { width: 100%; }
    .d-case-actions .btn-text { justify-content: center; }
    
    .infeed-text h3 { font-size: 1.3rem; }
    .infeed-cta { margin-top: 50px; }
    .infeed-btn { width: 100%; }
    .infeed-btn .btn { width: 100%; }
}