/* ============================================================
   tag.css — 标签/关键词聚合页样式 (v3)
   ============================================================ */

/* ---------- Page Title ---------- */
.tag-page-title{font-size:clamp(1.5rem,3.5vw,1.85rem);font-weight:900;margin-bottom:2.5rem;color:var(--color-heading);border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--color-primary),var(--color-accent)) 1;padding-bottom:.85rem;display:inline-block}

/* ---------- Article List (matches tutorial pattern) ---------- */
.article-list-item{display:flex;gap:1.75rem;padding:1.6rem 1.25rem;border-bottom:1px solid var(--color-border);transition:all var(--transition-base);border-radius:var(--radius-lg);margin:0;position:relative}
.article-list-item::before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:3px;background:linear-gradient(180deg,var(--color-primary),var(--color-accent));border-radius:0 2px 2px 0;opacity:0;transition:opacity var(--transition-base)}
.article-list-item:hover{border-bottom-color:transparent;background:var(--color-bg-secondary);box-shadow:var(--shadow-lg);transform:translateX(6px)}
.article-list-item:hover::before{opacity:1}
.article-list-item:first-child{padding-top:.3rem}
.article-list-item:last-child{border-bottom:none}
.article-list-thumb{width:240px;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/9;background:var(--color-bg-secondary);position:relative;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.article-list-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.article-list-item:hover .article-list-thumb img{transform:scale(1.08)}
.article-list-body{flex:1;min-width:0}
.article-list-body h2{font-size:1.2rem;margin-bottom:.35rem;line-height:1.4}
.article-list-body h2 a{color:var(--color-heading);transition:color var(--transition-fast)}
.article-list-body h2 a:hover{color:var(--color-primary)}
.article-list-meta{font-size:.8rem;color:var(--color-text-muted);margin-bottom:.55rem;display:flex;gap:1rem;align-items:center}
.article-list-desc{font-size:.9rem;color:var(--color-text-secondary);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-list-more{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;font-size:.85rem;color:var(--color-primary);font-weight:600;transition:all var(--transition-fast)}
.article-list-more:hover{gap:.55rem;color:var(--color-primary-dark)}
.article-list-more::after{content:"→";transition:transform var(--transition-fast)}
.article-list-more:hover::after{transform:translateX(4px)}
@media(max-width:1024px){.article-list-thumb{width:200px}.article-list-item{gap:1.25rem}}
@media(max-width:640px){.article-list-item{flex-direction:column;gap:.85rem;padding:1.25rem .75rem}.article-list-item:hover{transform:none}.article-list-thumb{width:100%}}
@media(max-width:480px){.article-list-item{padding:1rem .5rem}.article-list-body h2{font-size:1.05rem}}

/* ---------- Empty State ---------- */
.empty-state{text-align:center;padding:5rem 1rem}
.empty-icon{color:var(--color-text-muted);margin-bottom:1.25rem;opacity:.45}
.empty-state h3{font-size:1.3rem;color:var(--color-heading);margin-bottom:.5rem}
.empty-state p{color:var(--color-text-secondary);margin-bottom:1.5rem;font-size:.95rem}
.empty-state .btn{margin:0 auto}