/* ========== Category List Page ========== */
/* sidebar layout + article list */

/* ---- Sidebar Layout ---- */
.page-row{display:flex;gap:36px;align-items:flex-start}
.page-sidebar{width:220px;flex-shrink:0}
.page-main{flex:1;min-width:0}
.page-main .page-header{text-align:left;padding:0 0 20px}

/* ---- Sidebar Nav ---- */
.cat-side-head{background:#1a1a1a;color:#fff;padding:10px 14px;font-size:14px;font-weight:500;letter-spacing:.04em}
.cat-side-list{list-style:none;margin:0;padding:0;background:var(--bg);border:1px solid var(--border);border-top:none}
.cat-side-list li{border-bottom:1px solid var(--border)}
.cat-side-list li:last-child{border-bottom:none}
.cat-side-list a{display:block;padding:12px 14px;font-size:13px;color:var(--text);transition:all .2s}
.cat-side-list a:hover{color:var(--primary);background:var(--bg-gray)}
.cat-side-list a.active{color:var(--primary);font-weight:700;background:var(--bg-gray);border-left:3px solid var(--primary);padding-left:11px}

/* ---- Article List ---- */
.article-list{display:grid;grid-template-columns:1fr;gap:20px}
.article-item{display:flex;gap:20px;padding:20px;border:1px solid var(--border-light);border-radius:var(--radius-lg);transition:all .35s ease;background:var(--bg)}
.article-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.article-item .item-img{width:200px;min-height:150px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-gray)}
.article-item .item-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.article-item:hover .item-img img{transform:scale(1.06)}
.article-item .item-img .no-img{display:flex;align-items:center;justify-content:center;height:100%;font-size:40px;color:var(--border)}
.article-item .item-body{flex:1;display:flex;flex-direction:column}
.article-item .item-body h2{font-size:18px;margin-bottom:8px;font-weight:600}
.article-item .item-body h2 a{color:var(--text)}
.article-item .item-body h2 a:hover{color:var(--primary)}
.article-item .item-body .desc{color:var(--text-light);font-size:14px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.7}
.article-item .item-body .meta{font-size:12px;color:var(--text-muted);margin-top:10px}
.article-item .item-body .meta span{margin-right:16px}

/* ---- Responsive ---- */
@media (max-width:768px){
    .article-item{flex-direction:column}
    .article-item .item-img{width:100%;min-height:180px}
    .page-row{flex-direction:column;gap:20px}
    .page-sidebar{width:100%}
    .page-main .page-header{text-align:center}
    .cat-side-head{border-radius:var(--radius-sm) var(--radius-sm) 0 0}
    .cat-side-list{border-radius:0 0 var(--radius-sm) var(--radius-sm)}
}
@media (max-width:480px){
    .article-item .item-body h2{font-size:16px}
}