/* ============================================================
   blog.css — 博客站布局（首页文章流 + 双栏 + 侧边栏）· 美化版
   ============================================================ */

/* ---------- 博客 Hero：大标题 + 光晕 + 点阵 ---------- */
.blog-hero{
    padding:5rem 0 3.5rem;text-align:center;
    background:linear-gradient(180deg,var(--color-primary-light) 0%,rgba(230,247,255,.35) 45%,transparent 100%);
    position:relative;overflow:hidden;
}
.blog-hero::before{
    content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
    width:640px;height:640px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,var(--color-primary-soft) 0%,transparent 62%);
    filter:blur(70px);opacity:.5;
}
.blog-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(var(--color-primary-soft) 1px,transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 30%,transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 30%,transparent 75%);
}
.blog-hero .container{position:relative;z-index:1}
.blog-hero-badge{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.42rem 1.15rem;margin-bottom:1.35rem;
    border-radius:var(--radius-full);
    background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid var(--color-primary-soft);
    font-size:.82rem;font-weight:600;color:var(--color-primary-dark);
    box-shadow:var(--shadow-sm);letter-spacing:.04em;
}
.blog-hero-badge::before{
    content:"";width:7px;height:7px;border-radius:50%;
    background:linear-gradient(135deg,var(--color-primary),#5ad1ff);
    box-shadow:0 0 0 3px var(--color-primary-soft);
    animation:heroPulse 2.4s ease-in-out infinite;
}
@keyframes heroPulse{0%,100%{box-shadow:0 0 0 3px var(--color-primary-soft)}50%{box-shadow:0 0 0 6px rgba(0,136,204,.08)}}
.blog-hero-title{
    font-size:clamp(2.1rem,5.5vw,3.25rem);font-weight:900;
    margin-bottom:1rem;letter-spacing:.015em;line-height:1.18;
    background:linear-gradient(120deg,#0a5f8f 0%,var(--color-primary) 45%,#31b4f5 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:var(--color-primary);
    animation:heroRise .7s cubic-bezier(.22,.61,.36,1) both;
}
.blog-hero-sub{
    color:var(--color-text-secondary);font-size:1.06rem;
    max-width:660px;margin:0 auto;line-height:1.85;letter-spacing:.012em;
    animation:heroRise .7s cubic-bezier(.22,.61,.36,1) .12s both;
}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ---------- 双栏布局 ---------- */
.blog-layout-section{padding:2.75rem 0}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.5rem;align-items:start}

/* ---------- 主栏：文章卡片流 ---------- */
.blog-post-list{display:flex;flex-direction:column;gap:1.6rem}
.blog-post-card{
    display:flex;gap:1.4rem;position:relative;
    background:var(--color-bg-card);
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-lg);padding:1.35rem;
    box-shadow:var(--shadow-card);
    transition:all var(--transition-base);overflow:hidden;
}
/* 左侧品牌色竖条：hover 亮起 */
.blog-post-card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--color-primary),#31b4f5);
    transform:scaleY(0);transform-origin:top;
    transition:transform var(--transition-base);
}
.blog-post-card:hover{
    border-color:var(--color-primary-soft);
    box-shadow:var(--shadow-card-hover),0 10px 30px rgba(0,136,204,.09);
    transform:translateY(-4px);
}
.blog-post-card:hover::before{transform:scaleY(1)}

/* 缩略图：hover 放大 + 底部渐变遮罩 */
.blog-post-thumb{
    width:224px;flex-shrink:0;border-radius:var(--radius-md);
    overflow:hidden;aspect-ratio:16/9;background:var(--color-bg-secondary);
    position:relative;box-shadow:var(--shadow-xs);
}
.blog-post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.blog-post-card:hover .blog-post-thumb img{transform:scale(1.07)}
.blog-post-thumb::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 62%,rgba(4,32,48,.22) 100%);
    opacity:0;transition:opacity var(--transition-slow);
}
.blog-post-card:hover .blog-post-thumb::after{opacity:1}

.blog-post-body{flex:1;min-width:0;display:flex;flex-direction:column}
.blog-post-title{font-size:1.26rem;font-weight:700;line-height:1.5;margin-bottom:.6rem}
/* 标题：渐变下划线滑入 */
.blog-post-title a{
    color:var(--color-heading);transition:color var(--transition-fast);
    background-image:linear-gradient(120deg,var(--color-primary),#31b4f5);
    background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
    padding-bottom:2px;transition:color var(--transition-fast),background-size var(--transition-base);
}
.blog-post-card:hover .blog-post-title a,
.blog-post-title a:hover{color:var(--color-primary);background-size:100% 2px}
.blog-post-excerpt{
    font-size:.9rem;color:var(--color-text-secondary);line-height:1.75;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-orient:vertical;overflow:hidden;flex:1;
}

/* 元信息行：图标 + 阅读全文 */
.blog-post-meta{
    font-size:.8rem;color:var(--color-text-muted);
    margin-top:.85rem;display:flex;align-items:center;gap:.55rem;
}
.blog-post-meta time,.blog-post-meta .meta-views{
    display:inline-flex;align-items:center;gap:.32rem;
}
.blog-post-meta svg{width:14px;height:14px;flex-shrink:0;opacity:.75}
.blog-post-meta-dot{opacity:.55}
.blog-post-readmore{
    margin-left:auto;display:inline-flex;align-items:center;gap:.28rem;
    font-weight:700;color:var(--color-primary);font-size:.82rem;
    opacity:0;transform:translateX(-6px);
    transition:all var(--transition-base);
}
.blog-post-card:hover .blog-post-readmore{opacity:1;transform:translateX(0)}
.blog-post-readmore .rp-arrow{transition:transform var(--transition-base)}
.blog-post-readmore:hover .rp-arrow{transform:translateX(3px)}

@media(max-width:640px){
    .blog-post-card{flex-direction:column;gap:.95rem;padding:1rem}
    .blog-post-thumb{width:100%}
    .blog-post-title{font-size:1.1rem}
    .blog-post-readmore{opacity:1;transform:none}
}

/* ---------- 空状态（增强） ---------- */
.blog-main .empty-state{
    background:var(--color-bg-card);border:1.5px dashed var(--color-border);
    border-radius:var(--radius-lg);padding:4.5rem 1.5rem;
}
.blog-main .empty-icon{
    width:88px;height:88px;margin:0 auto 1.35rem;display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-xl);color:var(--color-primary);
    background:linear-gradient(145deg,var(--color-primary-light),rgba(255,255,255,.9));
    box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.9);
    opacity:1;
}

/* ---------- 侧边栏 ---------- */
.blog-sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:1.6rem}
.sidebar-widget{
    background:var(--color-bg-card);
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-lg);padding:1.3rem 1.35rem;
    box-shadow:var(--shadow-card);
    transition:box-shadow var(--transition-base),border-color var(--transition-base);
}
.sidebar-widget:hover{box-shadow:var(--shadow-card-hover)}
.sidebar-widget-title{
    font-size:1rem;font-weight:800;margin-bottom:1.05rem;
    display:flex;align-items:center;gap:.55rem;
    padding-bottom:.75rem;border-bottom:1px solid var(--color-border);
    position:relative;letter-spacing:.02em;
}
.sidebar-widget-title::after{
    content:"";position:absolute;left:0;bottom:-1px;width:44px;height:2.5px;
    border-radius:var(--radius-full);
    background:linear-gradient(90deg,var(--color-primary),#31b4f5);
}
.sidebar-widget-icon{
    width:28px;height:28px;flex-shrink:0;font-size:.95rem;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:var(--radius-sm);
    background:linear-gradient(145deg,var(--color-primary-light),#f3fbff);
    border:1px solid var(--color-primary-soft);
}

/* 排行列表（最新/热门） */
.sidebar-post-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.sidebar-post-list li{
    display:flex;gap:.6rem;align-items:flex-start;line-height:1.55;
    padding-bottom:.8rem;border-bottom:1px dashed var(--color-border);
}
.sidebar-post-list li:last-child{padding-bottom:0;border-bottom:none}
.sidebar-post-list li a{font-size:.87rem;color:var(--color-text);transition:color var(--transition-fast)}
.sidebar-post-list li a:hover{color:var(--color-primary)}
.sidebar-post-rank{
    flex-shrink:0;width:21px;height:21px;border-radius:var(--radius-sm);
    background:var(--color-bg-secondary);color:var(--color-text-muted);
    font-size:.72rem;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;margin-top:.12rem;
}
/* Top3：金银铜差异化 */
.sidebar-post-rank.top{color:#fff}
.sidebar-post-list li:nth-child(1) .sidebar-post-rank.top{background:linear-gradient(135deg,#f6b73c,#e08e0b);box-shadow:0 2px 6px rgba(224,142,11,.35)}
.sidebar-post-list li:nth-child(2) .sidebar-post-rank.top{background:linear-gradient(135deg,#a8b6c4,#7d8c9b);box-shadow:0 2px 6px rgba(125,140,155,.3)}
.sidebar-post-list li:nth-child(3) .sidebar-post-rank.top{background:linear-gradient(135deg,#e59260,#c96f3a);box-shadow:0 2px 6px rgba(201,111,58,.3)}

/* 分类列表 */
.sidebar-category-list{display:flex;flex-direction:column;gap:.12rem}
.sidebar-category-list a{
    display:flex;align-items:center;gap:.55rem;
    padding:.58rem .8rem;border-radius:var(--radius-md);
    font-size:.88rem;color:var(--color-text);font-weight:500;
    transition:all var(--transition-fast);
}
.sidebar-category-list a::before{
    content:"";width:5px;height:5px;border-radius:50%;
    background:linear-gradient(135deg,var(--color-primary),#31b4f5);
    opacity:.55;transition:all var(--transition-fast);
}
.sidebar-category-list a:hover{
    background:var(--color-primary-light);color:var(--color-primary-dark);
    padding-left:.95rem;
}
.sidebar-category-list a:hover::before{opacity:1;box-shadow:0 0 0 3px var(--color-primary-soft)}

/* 标签云 */
.sidebar-tag-cloud{display:flex;flex-wrap:wrap;gap:.5rem}
.sidebar-tag-cloud .tag-pill{font-size:.8rem;padding:.38rem .9rem}
.sidebar-tag-cloud .tag-pill:hover{
    background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
    color:#fff;border-color:transparent;
    box-shadow:0 3px 12px var(--color-primary-glow);
    transform:translateY(-2px);
}

/* ---------- 响应式：单栏 ---------- */
@media(max-width:1024px){
    .blog-layout{grid-template-columns:1fr}
    .blog-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
    .blog-sidebar .sidebar-widget{flex:1 1 300px}
}