/* kinodom.live — browse-by-genre, v1.0.0. Additive only. */

.kd-genres-feature {
    padding-top: 22px;
    padding-bottom: 16px;
}
.kd-genres-feature .kd-section-head {
    margin-bottom: 16px;
}
.kd-genre-chip-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(70, 202, 248, .4) transparent;
    padding: 4px 2px 15px;
    scroll-snap-type: x proximity;
}
.kd-genre-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 17px;
    border-radius: 999px;
    border: 1px solid rgba(55, 186, 232, .30);
    background: rgba(23, 213, 255, .075);
    color: #d3e8f2;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background .2s, border-color .2s, transform .2s;
}
.kd-genre-chip:hover {
    background: rgba(23, 213, 255, .15);
    border-color: rgba(75, 215, 255, .65);
    color: #fff;
    transform: translateY(-1px);
}
.kd-genre-chip:focus-visible {
    outline: 2px solid #62e5ff;
    outline-offset: 3px;
}

/* Genre is a first-class filter alongside title and release year. */
.kd-catalog .kd-filter-genre {
    grid-template-columns: minmax(200px, 1.6fr) minmax(145px, .78fr) minmax(120px, .58fr) max-content max-content;
}
.kd-catalog .kd-filter-genre select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
@media (max-width: 1080px) {
    .kd-catalog .kd-filter-genre {
        grid-template-columns: minmax(180px, 1.5fr) minmax(150px, 1fr) minmax(115px, .65fr) max-content;
    }
    .kd-catalog .kd-filter-genre .kd-filter-reset {
        grid-column: 1 / -1;
        justify-self: start;
    }
}
@media (max-width: 720px) {
    .kd-catalog .kd-filter-genre {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .kd-catalog .kd-filter-genre .kd-filter-search {
        grid-column: 1 / -1;
    }
    .kd-catalog .kd-filter-genre button[type=submit] {
        width: 100%;
        grid-column: 1 / -1;
    }
}
@media (max-width: 460px) {
    .kd-genres-feature { padding-top: 18px; padding-bottom: 8px; }
    .kd-genre-chip { font-size: 12px; min-height: 38px; padding: 8px 13px; }
    .kd-catalog .kd-filter-genre { grid-template-columns: minmax(0,1fr); }
    .kd-catalog .kd-filter-genre .kd-filter-search { grid-column: auto; }
}
html[data-theme="light"] .kd-genre-chip {
    background: rgba(0, 155, 210, .07);
    color: #18465d;
    border-color: rgba(0, 155, 210, .23);
}
html[data-theme="light"] .kd-genre-chip:hover {
    background: rgba(0, 155, 210, .15);
    border-color: rgba(0, 155, 210, .45);
    color: #092e41;
}
@media (prefers-reduced-motion: reduce) {
    .kd-genre-chip { transition: none; }
}