/* ============================================================
   教程文章列表页样式 (v3)
   ============================================================ */

/* ---------- Page Title ---------- */
.c4mxnw{text-align:center;margin-bottom:3rem;position:relative}
.c4mxnw h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;margin-bottom:.6rem;display:inline-block}
.c4mxnw 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}
.c4mxnw p{color:var(--color-text-secondary);font-size:1rem;margin:0}
/* v4: mono comment decor */
.c4mxnw h1::before{content:"//";font-family:var(--font-mono);color:#93c5fd;font-weight:700;margin-right:.5rem;font-size:.8em;vertical-align:.06em}

/* ---------- Article List ---------- */
.c6a99a{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}
.c6a99a::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)}
.c6a99a:hover{border-bottom-color:transparent;background:var(--color-bg-secondary);box-shadow:var(--shadow-lg);transform:translateX(6px)}
.c6a99a:hover::before{opacity:1}
.c6a99a:first-child{padding-top:.3rem}
.c6a99a:last-child{border-bottom:none}
.cpa8xv{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)}
.cpa8xv img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.c6a99a:hover .cpa8xv img{transform:scale(1.08)}
.ca8mmd{flex:1;min-width:0}
.ca8mmd h2{font-size:1.2rem;margin-bottom:.35rem;line-height:1.4}
.ca8mmd h2 a{color:var(--color-heading);transition:color var(--transition-fast)}
.ca8mmd h2 a:hover{color:var(--color-primary)}
.ckbhhz{font-size:.8rem;color:var(--color-text-muted);margin-bottom:.55rem;display:flex;gap:1rem;align-items:center}
.c9z9gm{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}
.ckursn{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)}
.ckursn:hover{gap:.55rem;color:var(--color-primary-dark)}
.ckursn::after{content:"→";transition:transform var(--transition-fast)}
.ckursn:hover::after{transform:translateX(4px)}
@media(max-width:1024px){.cpa8xv{width:200px}.c6a99a{gap:1.25rem}}
@media(max-width:640px){.c6a99a{flex-direction:column;gap:.85rem;padding:1.25rem .75rem}.c6a99a:hover{transform:none}.cpa8xv{width:100%}}
@media(max-width:480px){.c6a99a{padding:1rem .5rem}.ca8mmd h2{font-size:1.05rem}}

/* ---------- Pagination — pill group ---------- */
.ccm379{display:flex;justify-content:center;gap:.35rem;margin:3.5rem 0 .5rem;flex-wrap:wrap}
.c3jyc8{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)}
.c3jyc8: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)}
.c3jyc8.cvf7wf{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)}
.c3jyc8.cgs88j{opacity:.3;pointer-events:none}
.cxne7u{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){.c3jyc8,.cxne7u{min-width:44px;height:44px}}
.czg3u6{text-align:center;font-size:.85rem;color:var(--color-text-muted);margin-bottom:1rem}
.czg3u6 strong{color:var(--color-primary);font-weight:700}