/* ==========================================================================
   ГРАФИК ВЫХОДА  —  /releases
   --------------------------------------------------------------------------
   Лист одной страницы. Прежних было два, и первый из них — catalog-v404a —
   тянул сюда всё оформление старого каталога ради одной сетки.

   Карточка премьеры — общая карточка сайта (.k-card из kino/home.css), и
   здесь для неё задана только ширина в ленте. Общее с остальными
   страницами (.k-page, .k-sect, .k-empty, .k-spring) тоже лежит в общих
   листах и не повторяется.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ГОЛОВА: заголовок и переключатель «фильмы / сериалы».
   -------------------------------------------------------------------------- */

.k-rel__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.k-rel__top .k-page { margin-bottom: 0; }

/* Два вида материала — не два фильтра, а два разных расписания. Поэтому
   переключатель, а не пара пилюль в общем ряду отбора. */
.k-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
    background: var(--kt-surface-2);
    flex: 0 0 auto;
}

.k-seg__b {
    padding: 11px 22px;
    border-radius: 10px;
    color: var(--kt-muted);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.k-seg__b:hover { color: var(--kt-ink); }
.k-seg__b.is-on { background: var(--kt-accent); color: var(--kt-on-accent); }
.k-seg__b.is-on:hover { color: var(--kt-on-accent); }

/* --------------------------------------------------------------------------
   ГОД И МЕСЯЦ.
   -------------------------------------------------------------------------- */

.k-rel__nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 40px;
    min-width: 0;
}

.k-rel__years { display: flex; gap: 4px; flex: 0 0 auto; }

.k-rel__year {
    padding: 6px 11px;
    border-radius: 8px;
    color: var(--kt-muted);
    font-family: var(--kt-font-mono);
    font-size: 12px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.k-rel__year:hover { color: var(--kt-ink); }
.k-rel__year.is-on { background: var(--kt-surface-2); color: var(--kt-ink); }

/* Полоса, которую листают. Стрелки показывает releases.js — и только
   тогда, когда полосе есть куда вести. */
.k-rail { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }

.k-rail__track {
    display: flex;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    flex: 1;
    padding: 2px 0;
}

.k-rail__track::-webkit-scrollbar { display: none; }

.k-rail__arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--kt-line);
    border-radius: 50%;
    background: var(--kt-bg);
    color: var(--kt-muted);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.k-rail__arrow:hover { border-color: var(--kt-line-2); color: var(--kt-ink); }

.k-mchip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--kt-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    text-transform: capitalize;
    transition: background .18s ease, color .18s ease;
}

.k-mchip:hover { background: var(--kt-surface-2); color: var(--kt-ink); }
.k-mchip.is-on { background: var(--kt-accent); color: var(--kt-on-accent); }
.k-mchip.is-on:hover { color: var(--kt-on-accent); }

/* Месяц без премьер остаётся в полосе: пропуск в ряду месяцев читается
   как ошибка вёрстки, а пустой месяц — это ответ. */
.k-mchip.is-empty { opacity: .38; }

.k-mchip b {
    font-family: var(--kt-font-mono);
    font-size: 10px;
    font-weight: 500;
    opacity: .7;
}

/* --------------------------------------------------------------------------
   ЧИСЛА И ПЕРЕХОДЫ ПО ДНЯМ.
   -------------------------------------------------------------------------- */

.k-rel__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 44px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--kt-line);
}

.k-rel__stat { display: block; flex: 0 0 auto; }

.k-rel__statk {
    display: block;
    margin-bottom: 8px;
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-rel__statv {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.035em;
}

.k-rail--days { flex: 0 1 auto; max-width: 100%; }

.k-dchip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid var(--kt-line);
    border-radius: 11px;
    color: var(--kt-muted);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.k-dchip:hover { border-color: var(--kt-line-2); color: var(--kt-ink); }
.k-dchip.is-on { border-color: var(--kt-accent); background: var(--kt-accent); color: var(--kt-on-accent); }
.k-dchip.is-today:not(.is-on) { border-color: var(--kt-accent); color: var(--kt-accent-ink); }
.k-dchip.is-empty { border-style: dashed; cursor: default; }

.k-dchip__wd {
    font-family: var(--kt-font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.k-dchip__dd { font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.k-dchip.is-empty .k-dchip__dd { display: none; }
.k-dchip.is-empty .k-dchip__wd { text-transform: none; letter-spacing: .04em; }

.k-rel__mode {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: 4px;
    color: var(--kt-accent-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.k-rel__mode:hover { opacity: .75; }

/* --------------------------------------------------------------------------
   ДЕНЬ.

   Слева число, которое держится у края экрана, пока листаешь премьеры
   этого дня; справа — сами премьеры одной лентой. Так видно, что
   «девятое» ещё не кончилось, даже на пятой карточке.
   -------------------------------------------------------------------------- */

.k-rel__day {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 32px;
    padding: 34px 0;
    border-top: 1px solid var(--kt-line);
}

.k-rel__day:first-of-type { margin-top: 34px; }

.k-rel__when {
    position: sticky;
    top: calc(var(--k-bar, 66px) + 22px);
    align-self: start;
}

.k-rel__dd {
    display: block;
    font-size: 56px;
    font-weight: 800;
    line-height: .88;
    letter-spacing: -.055em;
}

.k-rel__dd.is-today { color: var(--kt-accent-ink); }

.k-rel__wd {
    display: block;
    margin-top: 10px;
    font-family: var(--kt-font-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-rel__tag {
    display: inline-flex;
    margin-top: 14px;
    padding: 5px 10px;
    border-radius: 7px;
    background: var(--kt-surface-2);
    color: var(--kt-muted);
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.k-rel__tag.is-today { background: var(--kt-accent); color: var(--kt-on-accent); }

/*
 * Лента дня.
 *
 * Не сетка: у одного дня бывает две премьеры, у другого двадцать, и
 * сеткой второй день занял бы полэкрана, а первый оставил бы дыру.
 * Лентой оба дня — одна строка, и высота страницы говорит о числе дней, а
 * не о том, как повезло одному из них.
 */
.k-rel__rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 2px 0 10px;
    scrollbar-width: thin;
}

.k-rel__rail > .k-card { flex: 0 0 168px; scroll-snap-align: start; }

/* Полоса прокрутки у ленты появляется под курсором: под каждым днём
   постоянная серая черта — это двадцать черт на странице. */
.k-rel__rail::-webkit-scrollbar { height: 6px; }
.k-rel__rail::-webkit-scrollbar-thumb { border-width: 1px; }

.k-rel__note {
    margin: 34px 0 0;
    padding-top: 34px;
    border-top: 1px solid var(--kt-line);
    font-family: var(--kt-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

/* --------------------------------------------------------------------------
   УЗКИЕ ЭКРАНЫ.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
    .k-rel__top { align-items: flex-start; }
    .k-rel__nav { flex-wrap: wrap; gap: 12px; }
    .k-rel__years { order: -1; }
    .k-rel__bar { gap: 16px 28px; }
    .k-rel__statv { font-size: 22px; }

    .k-rel__day { grid-template-columns: 78px minmax(0, 1fr); gap: 16px; }
    .k-rel__dd { font-size: 40px; }
    .k-rel__wd { font-size: 9.5px; letter-spacing: .12em; }
    .k-rel__tag { margin-top: 10px; padding: 4px 7px; font-size: 9px; }

    .k-rel__rail > .k-card { flex: 0 0 132px; }

    /* Стрелки на сенсорном экране лишние: полоса листается пальцем. */
    .k-rail__arrow { display: none; }
}