/* ==========================================================================
   «Все релизы» (/catalog/): шапка, фильтры, жанры-чипы, плитки или список.
   Только transform/opacity в переходах, без backdrop-filter (правило производительности сайта).
   ========================================================================== */

.ct-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0 22px;
}

.ct-title {
    margin: 0;
    font-family: var(--air-display, inherit);
    font-size: clamp(26px, 2.6vw, 44px);
    line-height: 1.1;
}

.ct-sub {
    margin: 6px 0 0;
    color: var(--air-cream-dim, rgba(255, 255, 255, .6));
}

.ct-view {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.ct-view__btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 36px;
    border-radius: 10px;
    color: var(--air-cream-dim, #aaa);
}

.ct-view__btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.ct-view__btn.is-active {
    background: var(--air-forest, #003e33);
    color: var(--air-mint, #3ddc97);
}

/* ---------- фильтры ---------- */
.ct-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.ct-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--air-line, rgba(255, 255, 255, .12));
    border-radius: 12px;
    background: rgba(2, 21, 17, .6);
}

.ct-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    outline: none;
}

.ct-filters select {
    height: 44px;
    max-width: 100%;
    padding: 0 12px;
    border: 1px solid var(--air-line, rgba(255, 255, 255, .12));
    border-radius: 12px;
    background: rgba(2, 21, 17, .6);
    color: inherit;
    font: inherit;
}

.ct-filters select:focus,
.ct-search:focus-within {
    border-color: var(--air-line-strong, rgba(61, 220, 151, .34));
    outline: none;
}

.ct-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--air-line, rgba(255, 255, 255, .12));
    border-radius: 12px;
    background: rgba(2, 21, 17, .6);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* настоящий чекбокс остаётся в форме, видно только переключатель */
.ct-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ct-check__switch {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    transition: background-color .18s;
}

.ct-check__switch i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--air-cream, #ece9df);
    transition: transform .18s var(--air-out, ease);
}

.ct-check input:checked + .ct-check__switch {
    background: var(--air-mint, #3ddc97);
}

.ct-check input:checked + .ct-check__switch i {
    background: var(--air-bg, #021511);
    transform: translateX(14px);
}

.ct-check input:focus-visible + .ct-check__switch {
    outline: 2px solid var(--air-mint, #3ddc97);
    outline-offset: 2px;
}

.ct-check:has(input:checked) {
    border-color: var(--air-line-strong, rgba(61, 220, 151, .34));
}

/* наши выпадающие списки в строке фильтров: по ширине содержимого, а не на всю строку */
.ct-filters .fsel_field {
    flex: 0 0 auto;
    width: auto;
}

.ct-filters .fsel_field .fsel__btn {
    min-width: 150px;
}

.ct-reset {
    color: var(--air-mint, #3ddc97);
    font-size: 14px;
}

/* ---------- жанры: одна строка, остальное по кнопке «Ещё N жанров» ---------- */
.ct-genres-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
}

.ct-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.ct-genres-box:not(.is-open) .ct-genres {
    max-height: 36px;
    overflow: hidden;
}

.ct-genres__more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--air-line, rgba(255, 255, 255, .12));
    border-radius: 999px;
    background: transparent;
    color: var(--air-mint, #3ddc97);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ct-genres__more[hidden] {
    display: none;
}

.ct-genres__more:hover {
    border-color: var(--air-line-strong, rgba(61, 220, 151, .34));
}

.ct-genres__more svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    transition: transform .2s var(--air-out, ease);
}

.ct-genres-box.is-open .ct-genres__more svg {
    transform: rotate(180deg);
}

.ct-genre__x {
    margin: 0 -4px 0 2px;
    font-size: 16px;
    line-height: 1;
    opacity: .7;
}

.ct-genre:hover .ct-genre__x {
    opacity: 1;
}

.ct-genre {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: var(--air-cream, #fff);
    font-size: 14px;
    transition: transform .15s var(--air-out, ease), background-color .15s;
}

.ct-genre small {
    color: var(--air-cream-faint, rgba(255, 255, 255, .5));
    font-size: 12px;
}

.ct-genre:hover {
    background: rgba(61, 220, 151, .12);
    color: var(--air-cream, #fff);
    transform: translateY(-1px);
}

.ct-genre.is-active {
    border-color: var(--air-line-strong, rgba(61, 220, 151, .34));
    background: var(--air-forest, #003e33);
    color: var(--air-mint, #3ddc97);
    font-weight: 600;
}

.ct-genre.is-active small {
    color: inherit;
}

/* ---------- список ---------- */
.ct-list {
    display: grid;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.ct-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 110px 64px;
    align-items: center;
    gap: 16px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--air-line, rgba(255, 255, 255, .08));
    border-radius: 14px;
    background: rgba(6, 42, 33, .5);
    color: inherit;
    transition: border-color .15s;
}

.ct-row:hover {
    border-color: var(--air-line-strong, rgba(61, 220, 151, .34));
    color: inherit;
}

.ct-row__poster {
    width: 48px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
}

.ct-row__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-row__main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ct-row__title,
.ct-row__orig,
.ct-row__genres {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ct-row__orig,
.ct-row__genres,
.ct-row__meta {
    color: var(--air-cream-dim, rgba(255, 255, 255, .6));
    font-size: 13px;
}

.ct-row__genres {
    color: var(--air-cream-faint, rgba(255, 255, 255, .45));
}

.ct-row__meta {
    display: grid;
    justify-items: end;
    gap: 2px;
    white-space: nowrap;
}

.ct-row__status {
    font-size: 13px;
    color: var(--air-cream-dim, #aaa);
}

.ct-row__status.is-on {
    color: var(--air-mint, #3ddc97);
}

.ct-row__rating {
    color: var(--air-gold, #f2c25b);
    font-weight: 600;
    text-align: right;
}

@media (max-width: 720px) {
    .ct-head {
        align-items: center;
    }

    .ct-filters .fsel_field {
        flex: 1 1 calc(50% - 10px);
    }

    .ct-filters .fsel_field .fsel__btn {
        min-width: 0;
    }

    .ct-genre {
        flex: none;
    }

    .ct-row {
        grid-template-columns: 44px minmax(0, 1fr) 52px;
        gap: 12px;
    }

    .ct-row__meta,
    .ct-row__status {
        display: none;
    }
}