/* 博客列表卡片 - 贴近UI */
.blog-cards{ width:100%; }
.blog-cards .cards-grid{ display:grid; gap:50px 92px; grid-template-columns:repeat(3,1fr); }
.blog-cards.cols-2 .cards-grid{ grid-template-columns:repeat(2,1fr); }
.blog-cards.cols-3 .cards-grid{ grid-template-columns:repeat(3,1fr); }
.blog-cards.cols-4 .cards-grid{ grid-template-columns:repeat(4,1fr); }

.blog-card{ background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.blog-card .thumb{ display:block; width:100%; aspect-ratio: 418 / 199; background:#f5f5f5; overflow:hidden; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease; }

.blog-card .meta-top{ padding:16px 18px 6px; font-size:16px; color:#9aa0a6; }
.blog-card .title{ padding:0 18px; margin:0 0 14px; font-size:24px; line-height:1.6; color:#333; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition: color .2s ease; }
.blog-card .title span{ color:inherit; }

/* 描述区域：预留固定高度，默认隐藏但占位，hover时显现；确保卡片高度不变 */
.blog-card .desc{ height: var(--blog-desc-h, 140px); padding:18px; color:#6b7280; line-height:1.8; opacity:0; visibility:hidden; overflow:hidden; position:relative; transform: translateY(14px); transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s cubic-bezier(.22,.61,.36,1); border-top:none; font-size:16px!important;}
/* 分割线改为伪元素，便于动画 */
.blog-card .desc::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:#f0f0f0; transform: translateY(10px); opacity:0; transition: transform .36s cubic-bezier(.22,.61,.36,1), opacity .36s cubic-bezier(.22,.61,.36,1); }

.blog-card .meta-bottom{ padding:0 18px 48px; min-height:40px; }
.blog-card .detail-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; font-size:16px; color:#DA251C; border:1px solid #f0f0f0; border-radius:14px; text-decoration:none; background:#fff; }
.blog-card .detail-btn::after{ content:""; width:18px; height:18px; display:inline-block; border-radius:50%; background-color:#DA251C; background-image:url('https://test5.geekdance.cn/wp-content/uploads/2025/08/SVG-25.svg'); background-repeat:no-repeat; background-position:center; background-size:7px 7px; }

/* 整卡可点击覆盖层 */
.blog-card .card-link{ position:absolute; inset:0; z-index:10; display:block; }
.blog-card .thumb, .blog-card .meta-top, .blog-card .title, .blog-card .desc, .blog-card .meta-bottom{ position:relative; z-index:2; }

/* 悬停：封面内部放大、标题变红、按钮隐藏、描述显现；卡片尺寸保持 */
.blog-card:hover .thumb img{ transform: scale(1.06); }
.blog-card:hover .title, .blog-card:hover .title span{ color:#DA251C !important; }
.blog-card:hover .meta-bottom{ opacity:0; visibility:hidden; }
/* 悬停：描述与分割线自下而上进入 */
.blog-card:hover .desc{ opacity:1; visibility:visible; transform: translateY(0); transition-delay: 60ms; }
.blog-card:hover .desc::before{ opacity:1; transform: translateY(0); transition-delay: 0ms; }

/* 分页 */
.blog-cards .cards-pager{ margin:50px 0; text-align:center; }
.blog-cards .cards-pager ul{ list-style:none; padding:0; margin:0; display:inline-flex; gap:8px; }
.blog-cards .cards-pager a, .blog-cards .cards-pager span{ display:inline-flex; width:45px; height:45px; align-items:center; justify-content:center; border:1px solid #eee; border-radius:6px; color:#999; text-decoration:none; font-size:18px; }
.blog-cards .cards-pager .current{ border-color:#DA251C; color:#DA251C; }

@media (max-width:992px){ .blog-cards .cards-grid{ grid-template-columns:repeat(2,1fr); gap:28px 28px; } }
@media (max-width:576px){ .blog-cards .cards-grid{ grid-template-columns:1fr; gap:22px 22px; } }

/* 尊重减少动态效果的系统偏好 */
@media (prefers-reduced-motion: reduce){
  .blog-card .thumb img{ transition:none; }
  .blog-card .desc, .blog-card .desc::before{ transition:none; transform:none; }
}