/* ==========================================================================
   ФИЛЬМОГРАФИЯ  —  /name/{slug}/filmography
   --------------------------------------------------------------------------
   Тот же скелет, что у страницы человека: слева карточка, которая держится
   у края экрана, справа — то, ради чего пришли. Читатель, пришедший с
   профиля, попадает в знакомое устройство.

   Плитка работы (.k-films / .k-film), отбор (.k-filt), кнопка (.k-loadmore),
   пустое место (.k-empty) и шапка (.k-head) — общие, лежат в общих листах.
   ========================================================================== */

.k-fmg__cols {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* Липкой колонка бывает только пока помещается в экран, поэтому потолок по
   высоте окна: на низком экране карточка листается внутри себя, а не
   перестаёт быть липкой. */
.k-fmg__side {
    position: sticky;
    top: calc(var(--k-bar, 66px) + 20px);
    max-height: calc(100vh - var(--k-bar, 66px) - 40px);
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.k-fmg__side::-webkit-scrollbar { width: 6px; }

.k-fmg__card {
    padding: 18px;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-xl);
    background: var(--kt-surface);
}

.k-fmg__shot {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-lg);
    overflow: hidden;
    background: var(--kt-surface-2);
}

.k-fmg__shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    transition: transform .5s var(--kt-ease);
}

.k-fmg__shot:hover img { transform: scale(1.04); }
.k-fmg__ph { font-family: var(--kt-font-display); font-size: 54px; line-height: 1; color: var(--kt-line-2); }

.k-fmg__profs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.k-fmg__prof {
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(var(--kt-accent-rgb), .14);
    color: var(--kt-accent-ink);
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.k-fmg__n {
    display: block;
    font-family: var(--kt-font-display);
    font-size: 26px;
    line-height: 1.06;
    letter-spacing: -.02em;
    text-decoration: none;
    text-wrap: balance;
    transition: color .2s ease;
}

.k-fmg__n:hover { color: var(--kt-accent-ink); }

.k-fmg__stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--kt-line);
}

.k-fmg__stat { display: block; min-width: 0; }
.k-fmg__statv { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.k-fmg__statv.is-rate { color: var(--kt-accent-ink); }

.k-fmg__statk {
    display: block;
    margin-top: 4px;
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-fmg__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--kt-line);
    width: 100%;
    color: var(--kt-muted);
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s ease;
}

.k-fmg__back:hover { color: var(--kt-ink); }
.k-fmg__back svg { transition: transform .25s var(--kt-ease); }
.k-fmg__back:hover svg { transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   ПРАВАЯ КОЛОНКА.
   -------------------------------------------------------------------------- */

.k-fmg__main { min-width: 0; }

/*
 * Имя остаётся в заголовке: страница о нём, и поисковик читает h1, а не
 * карточку рядом. Крупным при этом стоит то, чем эта страница отличается
 * от профиля, — иначе два одинаковых имени подряд, в карточке и в шапке.
 */
.k-fmg__h { margin: 0; }

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

.k-fmg__hs {
    display: block;
    font-family: var(--kt-font-display);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: lowercase;
}

.k-fmg__res { margin-top: 34px; }

/* Пока сетка перерисовывается, старая гаснет: подмена без этого выглядит
   рывком, будто страница мигнула. */
.k-fmg.is-loading .k-fmg__res { opacity: .5; transition: opacity .15s ease; }

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

@media (max-width: 1080px) {
    /* Липкой колонке нужна ширина, которой уже нет: карточка становится
       обычным блоком сверху. */
    .k-fmg__cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .k-fmg__side { position: static; max-height: none; overflow: visible; }

    .k-fmg__card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: start; }
    .k-fmg__shot { grid-row: span 5; margin-bottom: 0; }
    .k-fmg__stats { margin-top: 14px; }
}

@media (max-width: 560px) {
    .k-fmg__card { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
    .k-fmg__ph { font-size: 38px; }
    .k-fmg__n { font-size: 22px; }
    .k-fmg__statv { font-size: 18px; }
}