.xhb-category-directory { padding-block: 24px 40px; }
.xhb-category-directory h1 { margin: 0 0 20px; font-size: 1.65rem; letter-spacing: 0; }
.xhb-category-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.xhb-category-list li { min-width: 0; }
.xhb-category-list a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(128,128,128,.35); border-radius: 8px; color: inherit; text-decoration: none; }
.xhb-category-list a:hover, .xhb-category-list a:focus-visible { border-color: #e65b58; outline-offset: 3px; }
.xhb-category-art { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #28201d; }
.xhb-category-meta { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; align-items: start; gap: 7px; padding: 13px; }
.xhb-category-meta strong { font-size: 1rem; overflow-wrap: anywhere; }
.xhb-category-meta small { font-size: .75rem; opacity: .8; }
.xhb-category-film { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.xhb-category-film i { height: 4px; border-radius: 1px; background: rgba(128,128,128,.25); }
.xhb-category-film .is-filled { background: #dc554e; }
@media (max-width: 540px) {
    .xhb-category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .xhb-category-meta { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px; }
}