/* =========================================
   【标签聚合页】专属 CSS (Tags Specific)
   维护记录：已彻底剥离所有弹窗/侧边栏的全局冗余代码，清空内联样式
========================================= */

.tags-page-content { background-color: var(--bg-gray, #f1f5f9); padding-bottom: 100px; }

/* --- 1. 顶部横幅与高级面包屑 --- */
.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); background-size: cover; background-position: center; }
.page-title { font-size: 2.5rem; font-weight: 900; margin-bottom: 10px; line-height: 1.3; }
.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; display: flex; align-items: center; flex-wrap: wrap; }
.breadcrumbs a { color: #cbd5e1; transition: var(--transition, all 0.3s ease); text-decoration: none; display: inline-flex; align-items: center; }
.breadcrumbs a:hover { color: var(--warn-yellow, #f59e0b); }
.breadcrumbs span { color: var(--warn-yellow, #f59e0b); font-weight: 700; }
.breadcrumbs .divider { color: #94a3b8; font-size: 0.7rem; margin: 0 10px; font-weight: normal; }

/* --- 2. 聚合页数据头部栏 --- */
.tags-header { background-color: var(--white, #ffffff); padding: 25px 30px; border-radius: 8px; border: 1px solid var(--border-color, #e2e8f0); margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 5px 15px rgba(0,0,0,0.02); border-left: 5px solid var(--warn-yellow, #f59e0b); }
.tags-header h2 { font-size: 1.5rem; color: var(--auth-blue, #1e3a8a); font-weight: 900; margin: 0; display: flex; align-items: center; gap: 10px; }
.tags-header h2 i { color: var(--warn-yellow, #f59e0b); }
.tags-header span { color: var(--text-light, #64748b); font-size: 0.95rem; display: flex; align-items: center; }
.tags-header span i { color: #cbd5e1; margin-left: 5px; }

/* --- 3. 聚合结果卡片瀑布流 --- */
.tags-result-wrapper { display: flex; flex-direction: column; gap: 25px; }
.tag-result-card { background-color: var(--white, #ffffff); border-radius: 8px; border: 1px solid var(--border-color, #e2e8f0); display: flex; overflow: hidden; transition: var(--transition, all 0.3s ease); box-shadow: 0 4px 10px rgba(0,0,0,0.02); text-decoration: none; }
.tag-result-card:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(30,58,138,0.08); border-color: rgba(30,58,138,0.15); }

/* 缺省空数据状态 (剥离出的 Class) */
.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; }

/* 图片缩略图 (自动判断有无) */
.tag-card-img { width: 260px; flex-shrink: 0; background-color: #f8fafc; overflow: hidden; display: block; border-right: 1px solid var(--border-color, #e2e8f0); }
.tag-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; border: none; }
.tag-result-card:hover .tag-card-img img { transform: scale(1.05); }

/* 卡片主体内容区 */
.tag-card-body { padding: 30px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.tag-card-title { font-size: 1.3rem; font-weight: 800; margin-top: 0; margin-bottom: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-card-title a { color: var(--text-main, #1e293b); transition: color 0.3s; text-decoration: none; }
.tag-card-title a:hover { color: var(--auth-blue, #1e3a8a); }

/* 【核心黑科技】：强制接管 SDCMS 的 {redkey} 输出颜色，不破坏版面 */
.tag-card-title font[color="red"], .tag-card-desc font[color="red"] { color: var(--danger-red, #ef4444) !important; font-weight: 900; background-color: rgba(239, 68, 68, 0.05); padding: 0 2px; border-radius: 2px; }

.tag-card-desc { font-size: 0.95rem; color: var(--text-light, #64748b); line-height: 1.6; margin-bottom: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* 卡片底部标签药丸与日期 */
.tag-card-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; border-top: 1px dashed var(--border-color, #e2e8f0); padding-top: 15px; }
.tag-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background-color: var(--bg-gray, #f1f5f9); color: var(--text-light, #64748b); font-size: 0.8rem; font-weight: 700; border-radius: 4px; transition: var(--transition, all 0.3s ease); border: 1px solid transparent; text-decoration: none; }
.tag-pill:hover { background-color: var(--auth-blue, #1e3a8a); color: var(--white, #ffffff); }
.tag-pill.active { background-color: rgba(245, 158, 11, 0.1); color: var(--warn-yellow-hover, #d97706); border-color: rgba(245, 158, 11, 0.3); }
.tag-card-date { font-size: 0.85rem; color: var(--text-light, #64748b); font-weight: 500; white-space: nowrap; flex-shrink: 0; margin-left: 15px; display: flex; align-items: center; gap: 5px; }

/* --- 分页自适应兼容 --- */
.pagination { margin-top: 50px; }
.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; }

/* =========================================
   4. 右侧边栏及转化组件
========================================= */
.blog-layout-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; padding-top: 50px; }
.blog-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 30px; }
.sidebar-widget { background: var(--white, #ffffff); border-radius: 8px; padding: 30px; border: 1px solid var(--border-color, #e2e8f0); box-shadow: 0 5px 15px rgba(0,0,0,0.02); }

/* 引流卡片纯净版 */
.widget-cta { background-image: linear-gradient(135deg, var(--auth-blue-dark, #172554) 0%, var(--auth-blue, #1e3a8a) 100%); border: none; padding: 40px 25px; text-align: center; }
.widget-cta-badge { background-color: rgba(245,158,11,0.15); color: var(--warn-yellow, #f59e0b); display: inline-flex; padding: 5px 14px; border-radius: 50px; font-size: 0.85rem; font-weight: 800; margin-bottom: 18px; border: 1px solid rgba(245,158,11,0.3); }
.widget-cta h3 { color: var(--white, #ffffff); font-size: 1.3rem; margin-top: 0; margin-bottom: 15px; line-height: 1.4; }
.widget-cta p { color: #cbd5e1; font-size: 0.9rem; margin-bottom: 20px; line-height: 1.6; }
.widget-cta .btn { width: 100%; display: flex; justify-content: center; }

.widget-title { font-size: 1.2rem; color: var(--auth-blue, #1e3a8a); font-weight: 900; margin-top: 0; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--border-color, #e2e8f0); position: relative; }
.widget-title::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 40px; height: 2px; background: var(--warn-yellow, #f59e0b); }

.hot-posts-list { list-style: none; margin: 0; padding: 0; }
.hot-posts-list li { display: flex; gap: 15px; margin-bottom: 15px; border-bottom: 1px dashed var(--border-color, #e2e8f0); padding-bottom: 15px; }
.hot-posts-list li:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.hot-rank { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #e2e8f0; color: var(--text-light, #64748b); font-weight: 900; border-radius: 4px; font-size: 0.85rem; flex-shrink: 0; }
.hot-rank.rank-top { background: var(--warn-yellow, #f59e0b); color: var(--white, #ffffff); }
.hot-posts-list a { color: var(--text-main, #1e293b); font-weight: 500; font-size: 0.95rem; line-height: 1.5; transition: color 0.3s; display: block; text-decoration: none; }
.hot-posts-list a:hover { color: var(--auth-blue, #1e3a8a); }

/* =========================================
   5. 响应式移动端深度适配
========================================= */
/* =========================================
   5. 响应式移动端深度适配 (修复挤压版)
========================================= */
@media (max-width: 1024px) {
    /* 平板端：取消右侧 320px 固定宽度，改为单列 */
    .blog-layout-grid { grid-template-columns: 1fr; gap: 30px; }
    /* 侧边栏在平板端横向排列两列 */
    .blog-sidebar { position: static; margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (max-width: 768px) {
    /* 1. 修复头部 Banner 比例，节省首屏空间 */
    .page-banner { padding: 40px 0 30px; }
    .page-title { font-size: 1.8rem; margin-bottom: 8px; }
    .page-desc { font-size: 1rem; margin-bottom: 15px; }
    
    /* 2. 【核心修复】：强制单列护体，彻底解决挤压成垂直面条的 BUG */
    .tags-page-content { padding-bottom: 60px; }
    .blog-layout-grid { grid-template-columns: 1fr !important; padding-top: 30px; gap: 30px; }
    
    /* 3. 聚合数据头部适配 */
    .tags-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
    .tags-header h2 { font-size: 1.3rem; }
    
    /* 4. 核心卡片：手机端改为上下堆叠，恢复正常浏览 */
    .tag-result-card { flex-direction: column; }
    .tag-card-img { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--border-color, #e2e8f0); }
    .tag-card-body { padding: 20px; }
    
    /* 手机端标题允许换行显示 2 行，防止内容看不全 */
    .tag-card-title { 
        font-size: 1.2rem; 
        white-space: normal; 
        display: -webkit-box; 
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 2; 
    }
    
    .tag-card-footer { flex-direction: column; align-items: flex-start; gap: 15px; padding-top: 15px; }
    .tag-card-date { margin-left: 0; font-size: 0.8rem; }
    
    /* 5. 侧边栏适配：手机端恢复单列堆叠 */
    .blog-sidebar { grid-template-columns: 1fr; margin-top: 10px; }
}