/* Каталог предметов (/items, /items/<slug>) — SEO-хабы */

.catalog-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.catalog-header h1 {
    font-size: 1.6em;
    margin-bottom: 8px;
}

.catalog-header p {
    color: var(--text-muted, #8b949e);
    max-width: 720px;
    font-size: 0.95em;
}

.catalog-breadcrumbs {
    font-size: 0.85em;
    color: var(--text-muted, #8b949e);
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.catalog-breadcrumbs a { color: var(--link, #58a6ff); text-decoration: none; }
.catalog-breadcrumbs a:hover { text-decoration: underline; }

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.catalog-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    background: var(--card-bg, #161b22);
    text-decoration: none;
    transition: border-color .15s;
}

.catalog-card:hover { border-color: var(--link, #58a6ff); }
.catalog-card-name { font-weight: 600; color: var(--text, #c9d1d9); }
.catalog-card-count { font-size: 0.82em; color: var(--text-muted, #8b949e); }

.catalog-cats-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 6px;
}

.catalog-cats-nav a {
    font-size: 0.82em;
    padding: 4px 10px;
    border: 1px solid var(--border, #30363d);
    border-radius: 20px;
    color: var(--text-muted, #8b949e);
    text-decoration: none;
}

.catalog-cats-nav a:hover { color: var(--link, #58a6ff); border-color: var(--link, #58a6ff); }

.catalog-tier { margin-top: 26px; }

.catalog-tier h2 {
    font-size: 1.15em;
    border-bottom: 1px solid var(--border, #30363d);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.catalog-tier-count {
    font-size: 0.7em;
    color: var(--text-muted, #8b949e);
    font-weight: 400;
    margin-left: 8px;
}

.catalog-items {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 4 220px;
    column-gap: 24px;
}

.catalog-items li { break-inside: avoid; padding: 2px 0; }

.catalog-items a {
    color: var(--text, #c9d1d9);
    text-decoration: none;
    font-size: 0.9em;
}

.catalog-items a:hover { color: var(--link, #58a6ff); text-decoration: underline; }

.catalog-item-tier {
    color: var(--text-muted, #8b949e);
    font-size: 0.85em;
}

@media (max-width: 900px) {
    .catalog-items { columns: 2 150px; }
    .catalog-header h1 { font-size: 1.3em; }
}