/*
 * layout.css — каркас публичных страниц: обёртка сайта, шапка с hero и меню,
 * сетка «сайдбар + контент», футер, кнопка «наверх», мобильный drawer.
 *
 * Композиция задана MASTER ТЗ №3 (п.8–19, 123–124, 137–140, 274) и референсами
 * 1.png / 2.png / 3.png: тёмный узкий сайт, графическая шапка, горизонтальное
 * меню, левый сайдбар 300px и широкая контентная колонка. Наполнение блоков
 * (карусель, панели сайдбара, лента карточек) приходит на следующих этапах.
 */

/* ── Обёртка сайта ────────────────────────────────────────────────────────── */

/*
 * Шапка вынесена из `.site` и растянута во всю ширину окна, поэтому «липкий
 * футер» держит уже body, а не обёртка.
 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 0 var(--gap);
}

/*
 * В разметке первым идёт контент, шапка стоит после него (см. layouts/base.php):
 * главное содержимое страницы должно начинаться в начале документа. На экране
 * порядок прежний — шапка сверху, и держит его `order`, а не позиционирование:
 * `body` и так flex-колонка, так что перестановка ничего не стоит и не может
 * разъехаться на узких экранах.
 */
.site-header {
    order: -1;
}

.site__body {
    flex: 1 1 auto;
}

/* ── Шапка ────────────────────────────────────────────────────────────────── */

/*
 * Композиция 1.png: изображение от края до края окна, а логотип, меню и
 * карусель лежат на нём внутри колонки шириной --site-width. Рамки и
 * скругления у шапки нет — она не карточка, а фон верха страницы.
 */
.site-header {
    position: relative;
    background: #000;
    overflow: hidden;
}

/* Кадр начинается под строкой логотипа — на референсе там ровный чёрный край. */
.site-header__media {
    position: absolute;
    inset: var(--header-top-height) 0 0;
}

/*
 * Кадр прижат к верхнему краю, а не к своей середине: интересное в нём —
 * сверху (голова и плечи персонажа, ниши с бронёй), а низ всё равно закрыт
 * меню и полкой карусели. При `center 30%` на широком окне срезалась именно
 * голова — то, ради чего кадр и стоит.
 */
/*
 * `<picture>` — обёртка форматов (AVIF рядом с WebP), а не элемент вёрстки:
 * своей коробки у неё быть не должно, иначе размеры, заданные картинке,
 * начинают считаться от неё, а не от блока шапки.
 */
.site-header__media picture,
.logo picture {
    display: contents;
}

.site-header__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/*
 * Верх и низ кадра гасятся: сверху под строкой логотипа, снизу — под меню и
 * каруселью, иначе светлые места кадра съедают белый текст.
 *
 * Низ доводится до непрозрачного --site-bg: кадр не обрывается ровной линией
 * над контентом, а перетекает в фон страницы. Тот же цвет, что и у `body`,
 * поэтому стык не виден вовсе; по бокам кадр гасится в него же.
 */
.site-header__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(6, 8, 9, .5) 0,
            rgba(6, 8, 9, .08) 18%,
            rgba(6, 8, 9, .34) 52%,
            rgba(6, 8, 9, .78) 82%,
            var(--site-bg) 100%),
        linear-gradient(to right, var(--overlay-soft) 0, rgba(6, 8, 9, 0) 22%, rgba(6, 8, 9, 0) 78%, var(--overlay-soft) 100%);
}

.site-header__inner {
    position: relative;
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 0 var(--gap) var(--gap);
}

/* ── Верхняя строка шапки: логотип, аккаунт, поиск ────────────────────────── */

.header-top {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: var(--header-top-height);
    padding: 0 var(--space-5);
}

.header-top__spacer {
    flex: 1 1 auto;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    width: var(--logo-width);
    flex: none;
    color: var(--link-hover);
}

.logo__mascot {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.logo__word {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

.logo__word span {
    color: var(--accent);
}

.account-links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
}

.account-links__item {
    color: var(--link);
}

.account-links__sep {
    color: var(--text-muted);
}

.header-search {
    /* Относительное позиционирование нужно выпадающим подсказкам поиска. */
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 250px;
    flex: none;
}

.header-search .field {
    background: rgba(21, 23, 25, .85);
}

/* ── Hero: свободная зона между верхней строкой и меню ────────────────────── */

/*
 * Открытый кусок кадра между строкой логотипа и меню. Высота задана явно, а не
 * растяжкой: карусель — тоже часть шапки, и на `flex: 1 1 auto` она съедала
 * всю свободную высоту, оставляя от картинки полоску.
 */
.site-header__hero {
    flex: none;
    height: var(--hero-height);
}

/* ── Главное меню ─────────────────────────────────────────────────────────── */

/*
 * Меню — ряд отдельных вкладок поверх кадра (1.png): каждая со своей серой
 * подложкой и щелью в 3px, а не сплошная полоса во всю ширину.
 *
 * Ряд прижат вправо и заканчивается ровно там же, где полка карусели: на
 * референсе вкладки и полка образуют одну фигуру с общим правым краем, левее
 * которой остаётся открытый кадр. Центрирование давало симметричные поля
 * слева и справа — на 1.png их нет.
 */
.main-nav {
    flex: none;
}

.main-nav__list {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 3px;
}

/*
 * Вкладки стоят на полке без щели (1.png): скругление снизу снимается, иначе
 * между меню и постерами появляется тёмная полоска в 2px, и «одна фигура»
 * распадается на два блока.
 */
.main-nav__link {
    display: inline-flex;
    align-items: center;
    height: var(--nav-height);
    padding: 0 14px;
    background: var(--nav-tab-bg);
    box-shadow: inset 0 0 0 1px var(--nav-tab-edge);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    color: var(--link-hover);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.main-nav__link:hover {
    background: var(--nav-tab-hover);
    color: var(--link-hover);
}

.main-nav__item--active .main-nav__link {
    background: var(--nav-tab-active);
    color: var(--link-hover);
}

/* ── Карусель постеров: нижний ярус шапки ─────────────────────────────────── */

/*
 * Полка примыкает к меню вплотную: на референсе нижняя кромка вкладок и
 * верхняя кромка полки — одна линия. Отступа сверху здесь быть не должно.
 */
.site-header__carousel {
    flex: none;
}

/* Кнопки, которые нужны только на узких экранах. */
.header-toggle {
    display: none;
}

/* ── Сетка «сайдбар + контент» ────────────────────────────────────────────── */

/*
 * Сайдбар и контентная колонка — одна фигура (1.png): не две карточки рядом,
 * а разделённый вертикальной линией лист. Отсюда три правила:
 *
 *  - промежутка по горизонтали нет, стык рисует одна рамка (у сайдбара правой
 *    границы нет, её роль играет левая граница контентной колонки);
 *  - `align-items: stretch` вместо `start`: колонки заканчиваются на одной
 *    линии даже там, где контента заметно меньше, чем панелей сайдбара
 *    (страницы входа, правовые). Разная высота колонок и читается как две
 *    отдельные карточки;
 *  - скругления только по внешним углам фигуры.
 */
.layout-grid {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    column-gap: 0;
    row-gap: var(--gap);
    align-items: stretch;
    margin: var(--gap) 0;
}

/*
 * Внутри сетки та же перестановка: в разметке первой идёт контентная колонка,
 * на экране первой стоит кнопка «Каталог», за ней сайдбар, и только потом
 * контент. Порядок задаётся `order`, а не явными `grid-column`/`grid-row`:
 * автоматическое размещение продолжает работать, и в один столбец на телефоне
 * колонки встают сами, без второго набора правил в медиазапросе.
 */
.layout-grid > .sidebar-toggle {
    order: 1;
}

.layout-grid > .sidebar {
    order: 2;
}

.layout-grid > .content-column {
    order: 3;
}

.layout-grid--full {
    grid-template-columns: 1fr;
}

/*
 * Сайдбар — такой же сплошной лист, как контентная колонка: блоки внутри
 * разделены врезанной линией, а не промежутком (1.png). Собственные фон,
 * рамка и скругление снимаются у всех прямых детей разом — по той же причине,
 * что и в `.content-column`: забытый блок иначе остаётся «карточкой в карточке».
 */
.sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--sidebar-bg);
    border: 1px solid var(--sheet-edge);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--border);
    /* Разделители не должны выступать из-под скругления углов листа. */
    overflow: hidden;
    font-size: var(--font-size-sidebar);
}

.sidebar > * {
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.sidebar > * + * {
    border-top: 1px solid var(--sheet-rule);
    box-shadow: inset 0 1px 0 var(--border);
}

/*
 * Секции идут вплотную, как в сайдбаре: колонка — один лист, и делит его
 * врезанная линия, а не пустая полоса.
 *
 * Щели между секциями здесь раньше стояло `gap: var(--gap)`, и она ломала
 * отбивку заголовков. У каждой секции свои поля по 10px, но разделитель
 * рисуется по верхнему краю следующей: под крошками оказывалось 10px поля
 * плюс 14px щели, а над заголовком — только 10px. Отсюда и «внизу отступ
 * больше, чем сверху» у крошек, у «Фильмы и сериалы 2021 года» и у всего
 * остального в колонке (замечание заказчика).
 */
.content-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Кнопка «Каталог» существует только на узких экранах (раскрытие ниже, в медиазапросе). */
.sidebar-toggle {
    display: none;
    margin-bottom: var(--gap);
}

/* Заглушка колонки до появления её наполнения на следующих этапах. */
.content-column__placeholder {
    padding: var(--space-6);
    color: var(--text-secondary);
}

/* ── Футер ────────────────────────────────────────────────────────────────── */

/*
 * Футер живёт прямо на фоне страницы (замечание заказчика): ни заливки, ни
 * рамки. Панель вокруг служебных ссылок только утяжеляла низ страницы и
 * повторяла собой контентную колонку — разделение здесь даёт отступ, а не
 * ещё один прямоугольник.
 */
.site-footer {
    margin-bottom: var(--gap);
    padding: var(--space-6) var(--space-6) var(--space-5);
    background: none;
    border: 0;
}

/*
 * Текст о сайте над подвалом (14.png) — только на главной. Стоит под сеткой во
 * всю ширину колонки сайта: длинные абзацы в контентной колонке рвались бы по
 * пять слов в строке, а рядом с ними нечему обтекать картинку.
 *
 * Блок оформлен панелью: полупрозрачная подложка и рамка отделяют его от фона
 * страницы и от подвала.
 */
.footer-text {
    /* По горизонтали — вровень с подвалом: у него та же внутренняя отбивка. */
    margin-top: var(--gap);
    padding: var(--space-6) var(--space-6);
    border: 1px solid var(--sheet-edge);
    color: var(--text-faint);
    font-size: var(--font-size-base);
    line-height: var(--line-height-loose);
    background: rgba(21, 23, 25, .85);
    border-radius: var(--radius-sm);
}

.footer-text__heading {
    margin-bottom: var(--space-5);
    color: var(--text-primary);
    font-size: var(--font-size-section);
    line-height: var(--line-height-tight);
}

.footer-text__paragraph + .footer-text__paragraph {
    margin-top: var(--space-5);
}

/*
 * Картинка обтекается текстом, поэтому именно float, а не сетка: соседний
 * абзац должен огибать её, а не стоять во второй колонке — иначе короткий
 * абзац оставил бы под картинкой дыру в половину экрана.
 */
.footer-text__figure {
    float: left;
    width: 320px;
    margin: var(--space-4) var(--space-6) var(--space-4) 0;
    padding: var(--space-6);
    background: var(--sidebar-bg);
    border-radius: var(--radius-md);
}

/*
 * Картинка встаёт по центру подложки. `text-align` здесь бессилен: в base.css
 * у всех изображений `display: block`, поэтому центрирует поля, а не
 * выравнивание строки. `<picture>` тоже переводим в блок — иначе строчная
 * обёртка прижимает блочный `<img>` к левому краю.
 */
.footer-text__figure picture {
    display: block;
}

.footer-text__figure img {
    width: 128px;
    height: 128px;
    margin-inline: auto;
    object-fit: contain;
}

/* Флоат не удлиняет родителя: без этого рамка блока прошла бы сквозь картинку. */
.footer-text::after {
    content: '';
    display: block;
    clear: both;
}

.site-footer__main {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: var(--gap) var(--space-7);
    align-items: start;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--link-hover);
}

.site-footer__logo .logo__mascot {
    width: 38px;
    height: 38px;
}

.site-footer__text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--font-size-sm);
}

.site-footer__copyright {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* ── Кнопка «наверх» ──────────────────────────────────────────────────────── */

.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: var(--z-back-to-top);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--surface-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), color var(--transition-fast), border-color var(--transition-fast);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Мобильный drawer меню ────────────────────────────────────────────────── */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer-backdrop);
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base);
}

.drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

body.is-drawer-open {
    overflow: hidden;
}

/* ── Планшет ──────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .header-search {
        width: 200px;
    }

    .main-nav__link {
        padding: 0 9px;
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 992px) {
    .account-links {
        display: none;
    }
}

/* ── Мобильный ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .site {
        padding: 0 var(--gap);
    }

    .header-top {
        gap: var(--space-3);
        padding: 0 var(--space-4);
    }

    .logo {
        width: var(--logo-width-mobile);
    }

    .logo__mascot {
        width: 26px;
        height: 26px;
    }

    .logo__word {
        font-size: 16px;
    }

    .header-search {
        width: auto;
    }

    /* Поле поиска раскрывается по кнопке, чтобы шапка осталась в одну строку. */
    .header-search__field {
        display: none;
    }

    .header-search.is-expanded {
        position: absolute;
        left: var(--space-4);
        right: var(--space-4);
        top: calc(var(--header-top-height) + var(--space-2));
        width: auto;
    }

    .header-search.is-expanded .header-search__field {
        display: block;
    }

    .header-toggle {
        display: inline-flex;
        flex: none;
        background: rgba(21, 23, 25, .85);
    }

    .main-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-drawer);
        width: 268px;
        max-width: 84vw;
        background: var(--sidebar-bg);
        border: 0;
        border-right: 1px solid var(--border-strong);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
    }

    .main-nav.is-open {
        transform: translateX(0);
    }

    /*
     * В drawer список вертикальный, и прижатие вправо с десктопа стало бы
     * прижатием вниз: пункты уехали бы в подвал панели.
     */
    .main-nav__list {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        padding: var(--space-3) 0;
    }

    .main-nav__item {
        width: 100%;
    }

    /*
     * В drawer пункт — строка списка, а не вкладка поверх кадра: подложка,
     * скругление и внутренняя обводка снимаются, иначе меню превращается в
     * столбик серых таблеток.
     */
    .main-nav__link {
        width: 100%;
        height: 40px;
        padding: 0 var(--space-5);
        background: none;
        box-shadow: none;
        border-bottom: 1px solid var(--border);
        border-left: 2px solid transparent;
        border-radius: 0;
        font-size: var(--font-size-sm);
    }

    .main-nav__link:hover {
        background: rgba(255, 255, 255, .05);
    }

    .main-nav__item--active .main-nav__link {
        background: rgba(255, 255, 255, .06);
        border-bottom-color: var(--border);
        border-left-color: var(--accent);
        color: var(--accent-yellow);
    }

    .layout-grid {
        grid-template-columns: 1fr;
    }

    /* Колонки встают друг под друга, и стыковаться боками им уже не с чем. */
    .sidebar {
        border-right: 1px solid var(--sheet-edge);
        border-radius: var(--radius-sm);
    }

    /* Сайдбар не постоянная колонка: раскрывается кнопкой «Каталог» (ТЗ №3, п.140). */
    .sidebar-toggle {
        display: flex;
        width: 100%;
    }

    .sidebar[hidden] {
        display: none;
    }

    .site-footer {
        padding: var(--space-5);
    }

    .site-footer__main {
        grid-template-columns: 1fr;
    }

    .footer-text {
        padding: var(--space-5);
    }

    /*
     * На узком экране обтекать нечем: 320px картинки не оставляют строке
     * ширины. Она становится обычным блоком в потоке текста.
     */
    .footer-text__figure {
        float: none;
        width: auto;
        margin: var(--space-5) 0;
        padding: var(--space-5);
    }
}

@media (min-width: 769px) {
    /* На десктопе сайдбар виден всегда, даже если JS скрыл его на мобильном. */
    .sidebar[hidden] {
        display: flex;
    }
}

/* ── Меню аккаунта в шапке (этап 13) ─────────────────────────────────────── */

.account-links__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.account-links__name:hover {
    color: var(--link-hover);
}

/* Единственное место с круглым скруглением — аватар (UI_TOKENS.md). */
.account-links__avatar {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-avatar);
    background: var(--surface-3);
    object-fit: cover;
}

.account-links__form {
    display: inline;
    margin: 0;
}

/* Кнопка выхода обязана выглядеть как соседние ссылки: она стоит с ними
   в одной строке, и «настоящая» кнопка ломала бы ритм шапки. */
.account-links__button {
    padding: 0;
    background: none;
    border: none;
    color: var(--link);
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

.account-links__button:hover {
    color: var(--link-hover);
}

/* Дубль ссылок аккаунта внутри drawer: на десктопе не нужен — там есть
   верхняя строка шапки. */
.main-nav__account {
    display: none;
}

.main-nav__button {
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

@media (max-width: 992px) {
    .main-nav__account {
        display: block;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--border);
    }

    .main-nav__user {
        display: block;
        padding: 0 var(--space-4) var(--space-2);
        color: var(--text-muted);
        font-size: var(--font-size-sm);
    }
}