/* ============================================================
   tutorial.css — 教程文章列表页样式 (v3)
   ============================================================ */

/* ---------- Page Title ---------- */
.tutorial-page-title{text-align:center;margin-bottom:3rem;position:relative}
.tutorial-page-title h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;margin-bottom:.6rem;display:inline-block}
.tutorial-page-title h1::after{content:"";display:block;width:70%;height:3px;margin:.4rem auto 0;background:linear-gradient(90deg,transparent,var(--color-primary),var(--color-accent),transparent);border-radius:2px}
.tutorial-page-title p{color:var(--color-text-secondary);font-size:1rem;margin:0}

/* ---------- Article List ---------- */
.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}}

/* ---------- Pagination — pill group ---------- */
.pagination{display:flex;justify-content:center;gap:.35rem;margin:3.5rem 0 .5rem;flex-wrap:wrap}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .9rem;border-radius:var(--radius-full);font-size:.88rem;font-weight:500;border:1.5px solid var(--color-border);color:var(--color-text-secondary);background:var(--color-bg-card);transition:all var(--transition-fast)}
.page-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light);box-shadow:0 2px 12px var(--color-primary-glow);transform:translateY(-2px)}
.page-btn.active{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;border-color:transparent;font-weight:700;box-shadow:0 4px 16px var(--color-primary-glow)}
.page-btn.disabled{opacity:.3;pointer-events:none}
.page-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;color:var(--color-text-muted);font-size:.875rem}
@media(max-width:768px){.page-btn,.page-ellipsis{min-width:44px;height:44px}}
.page-info{text-align:center;font-size:.85rem;color:var(--color-text-muted);margin-bottom:1rem}
.page-info strong{color:var(--color-primary);font-weight:700}