/* ==========================================================================
   nav-page-category.css  分类页专用：横版 item 列表
   仅 category.html 引入
   ========================================================================== */

.website-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.website-item {
    padding: 12px 15px; background: var(--nav-card); border-radius: 10px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: all .3s; text-decoration: none; color: var(--nav-card-text); position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.website-item:hover { background: var(--nav-primary); color: #fff; transform: translateY(-2px); }
.website-item:hover .website-item-info h3, .website-item:hover .website-item-info p { color: #fff; }
.website-item-icon {
    width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: var(--nav-tag-bg); font-size: 16px; overflow: hidden; flex-shrink: 0;
}
.website-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.website-item-info { min-width: 0; }
.website-item-info h3 { font-size: 15px; margin-bottom: 3px; transition: color .3s; }
.website-item-info p {
    font-size: 12px; color: var(--nav-muted); transition: color .3s;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.website-item .qr-btn {
    position: absolute; right: 10px; top: 8px; opacity: 0; cursor: pointer;
    font-size: 13px; color: var(--nav-muted);
}
.website-item:hover .qr-btn { opacity: 1; color: #fff; }