/* Каркас страницы: контейнер, шапка, подвал. */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-inline: var(--space-4);
}

/* ---------- Шапка ----------
   Селектор — класс, а не тег: на странице есть другие <header>
   (например .film-card__head внутри карточек главной). Селектор по тегу
   вешал на них sticky top:0 и z-index:9999 — заголовок карточки
   прилипал к верху окна и наезжал на шапку сайта. */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    width: 100%;
    height: auto;
    min-height: var(--header-height);
    background-color: var(--color-surface);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition), border-bottom-color var(--transition),
                background-color var(--transition);
    color: var(--color-text);
    box-sizing: border-box;
}

.site-header > .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* При прокрутке шапка становится непрозрачной и отбрасывает тень —
   контент не должен просвечивать сквозь полупрозрачный фон.
   Идёт после .site-header, поэтому !important не нужен. */
.site-header--scrolled {
    background-color: var(--color-surface);
    box-shadow: var(--shadow-raise);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


/* Логотип — слева, не сжимается, стабильная ширина */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;

    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    padding: var(--space-1) 0;
}

/* Поиск — большой, по центру, основной элемент шапки */
.site-header__search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    margin-inline: var(--space-4);
}

/* Правая группа действий — прижата вправо, равномерный ритм */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    margin-left: auto;
}

.logo:hover {
    color: var(--color-text);
}

/* Значок логотипа — треугольник «play», нарисованный рамками.
   Своя графика, без картинок и внешних иконочных шрифтов. */
.logo__mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;

    background-color: var(--color-accent);
    border-radius: var(--radius-sm);
    transition: transform var(--transition-fast);
}

.logo:hover .logo__mark {
    transform: scale(1.08);
}

.logo__mark::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent var(--color-on-accent);
}

.logo__accent {
    color: var(--color-accent);
}

/* Старая десктопная навигация удалена из base.html — навигация теперь
   в глобальном топ-наве lb-topnav (lumibox.css). Правила .site-nav из ветки
   arena сюда не переносим: разметки с этим классом в проекте больше нет,
   они стали бы мёртвым CSS. */

/* Планшет: поиск 440px, больше воздуха */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-header__search {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 440px;
        display: flex;
        justify-content: center;
        margin-inline: var(--space-4);
    }
}

/* Десктоп: поиск 560px — основной элемент */
@media (min-width: 1024px) and (max-width: 1439px) {
    .site-header__search {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 560px;
        display: flex;
        justify-content: center;
        margin-inline: var(--space-6);
    }
}

/* Широкий десктоп: поиск 640px */
@media (min-width: 1440px) {
    .site-header__search {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 640px;
        display: flex;
        justify-content: center;
        margin-inline: var(--space-8);
    }
}

/* Theme toggle button — 44×44px touch target */
.theme-toggle {
    width: var(--touch-target);
    height: var(--touch-target);
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-muted);
    flex-shrink: 0;
    font-size: 1rem;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.theme-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Telegram-ссылка в шапке — круглая иконка рядом с переключателем темы */
.telegram-header-link {
    width: var(--touch-target);
    height: var(--touch-target);
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent);
    flex-shrink: 0;
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.telegram-header-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-surface-hover);
}

/* Language switcher */
.lang-menu {
    position: relative;
}

.lang-menu__trigger {
    cursor: pointer;
    list-style: none;
    width: var(--touch-target);
    height: var(--touch-target);
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    transition: border-color var(--transition-fast);
}

.lang-menu__trigger::-webkit-details-marker {
    display: none;
}

.lang-menu__trigger:hover {
    border-color: var(--color-accent);
}

.lang-menu__current {
    pointer-events: none;
}

.lang-menu__dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    min-width: 140px;
    padding: var(--space-2);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.lang-menu__link {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.lang-menu__link:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

/* !important здесь был не нужен: он перебивал собственный :hover выше.
   Достаточно описать активный пункт и в состоянии наведения. */
.lang-menu__link--active,
.lang-menu__link--active:hover {
    color: var(--color-accent);
    font-weight: 600;
}

/* ---------- Основная область ---------- */

.site-main {
    flex: 1;
    /* Gap between sticky header+topnav and content: 12px only.
       Header and topnav are in normal flow before site-main, so they already
       occupy their space. Only the gap is needed here. */
    padding-top: var(--space-3);
    padding-bottom: var(--space-10);
    overflow-x: clip;
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    box-sizing: border-box;
    /* Горизонтальные отступы — через .container, не здесь, чтобы не дублировать:
       было container 16px + site-main 16px = 32px двойной, на десктопе 64+64=128px */
    padding-inline: 0;
}

/* Mobile: no topnav, header is ~61px (actual rendered height).
   Header and topnav are in normal flow before site-main, so only gap is needed. */
@media (max-width: 1024px) {
    .site-main {
        padding-top: var(--space-3); /* 12px gap only */
    }
}

@media (max-width: 480px) {
    .site-main {
        padding-top: var(--space-3); /* 12px gap only */
    }
}

/*
  Когда сверху показано сообщение, баннеры не должны втягивать себя вверх
  отрицательным отступом — иначе шапка страницы наедет на текст сообщения.
*/
.site-main--with-messages .film-hero {
    margin-top: 0;
}

.page-header {
    margin-bottom: var(--space-6);
    position: relative;
    padding-bottom: var(--space-2);
}

/* Размер приходит от h1 из variables.css. Здесь стоял литерал 1.625rem,
   и заголовок раздела не рос вместе с экраном: на мониторе 1920 он был
   ровно того же кегля, что на телефоне 360. */
.page-title {
    letter-spacing: var(--tracking-tight);
}

/* Оранжевая черта под заголовком убрана: она повторяла роль самого
   заголовка (и так самого крупного текста на странице) и добавляла третий
   акцентный элемент к кнопке и активному фильтру. Иерархию держит размер. */

.page-subtitle {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Подвал целиком живёт в footer.css — там же, где его разметка.
   Держать .site-footer в двух файлах значит однажды поправить не тот. */

/* ---------- Theme toggle: показываем moon в тёмной теме, sun в светлой ---------- */

/* Тёмная тема (data-theme=""): показываем sun (нажать → переключить на светлую) */
[data-theme=""] .theme-sun { display: block; }
[data-theme=""] .theme-moon { display: none; }

/* Светлая тема (data-theme="light"): показываем moon (нажать → переключить на тёмную) */
[data-theme="light"] .theme-moon { display: block; }
[data-theme="light"] .theme-sun { display: none; }

/* Smooth icon transition */
.theme-toggle .icon {
    transition: transform var(--transition), opacity var(--transition);
}

.theme-toggle:hover .icon {
    transform: rotate(15deg);
}

/* ---------- Мобильные: высота шапки 61px ---------- */
/* На маленьких экранах шапка компактнее — 61px вместо 67px. */
@media (max-width: 480px) {
    :root {
        --header-height: 61px;
    }
}

/* ---------- Светлая тема: шапка и внутренние элементы ---------- */

[data-theme="light"] .site-header {
    background-color: var(--color-surface);
    color: var(--color-text);
}

[data-theme="light"] .search-wrapper {
    border-color: var(--color-border);
}

[data-theme="light"] .search {
    background-color: var(--color-surface);
}

[data-theme="light"] .search:focus-within {
    background-color: var(--color-surface-hover);
}

[data-theme="light"] .search__input {
    color: var(--color-text);
}

[data-theme="light"] .search__input::placeholder {
    color: var(--color-text-dim);
}

[data-theme="light"] .search__submit {
    color: var(--color-text-muted);
}

[data-theme="light"] .theme-toggle {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="light"] .telegram-header-link {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="light"] .lang-menu__trigger {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="light"] .hamburger {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="light"] .hamburger__line {
    background: var(--color-text);
}

/* ---------- Телефоны ---------- */

/* Лупа поиска: 32px хватает мыши, но не пальцу. Условие по указателю,
   а не по ширине — планшет с клавиатурой и сенсорный ноутбук бывают
   любой ширины, а раньше правило действовало только до 900px. */
@media (pointer: coarse) {
    .search__submit {
        width: var(--touch-target);
        height: var(--touch-target);
    }
}

/* Компактная шапка до 1024px: три колонки — логотип | поиск (центр) | действия (право).
   На узких экранах скрываем telegram, язык и кнопку входа (она есть в bottom-nav).
   Поиск растягивается на доступное пространство — ширина ~70% от шапки. */
@media (max-width: 1023px) {
    .site-header__inner {
        flex-wrap: nowrap;
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
        gap: var(--space-2);
    }

    .logo {
        flex: 0 0 auto;
    }

    .site-header__search {
        flex: 1 1 60%;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .site-header__actions {
        flex: 0 0 auto;
        margin-left: auto;
        gap: var(--space-2);
    }

    .telegram-header-link,
    .lang-menu {
        display: none;
    }

    /* Скрываем кнопку входа в шапке на мобильном — она есть в bottom-nav.
       Увеличиваем specificity (.site-header .), чтобы перебить
       display: inline-flex из .button в components.css. */
    .site-header .site-header__login--mobile-hidden {
        display: none;
    }

    /* Поиск: крупная кнопка-лупа и полный тач-таргет */
    .search__submit {
        width: var(--touch-target);
        height: var(--touch-target);
        flex: 0 0 var(--touch-target);
    }
}

/*
  На очень узких экранах (≤560px) просто гарантируем nowrap —
  трехколоночная структура сама сжимает поиск.
*/
@media (max-width: 560px) {
    .site-header__inner {
        flex-wrap: nowrap;
        gap: var(--space-2);
    }

    .site-header__actions {
        gap: var(--space-2);
    }
}

/*
  На 320px: уменьшаем зазоры, логотип, боковые поля контейнера.
  Кнопки действий (тема, гамбургер) остаются 44×44 — минимальный тач-таргет.
*/
@media (max-width: 400px) {
    .site-header__inner {
        gap: var(--space-1);
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .site-header__actions {
        gap: var(--space-1);
    }

    .logo {
        gap: var(--space-1);
        font-size: var(--text-md);
    }

    .logo__mark {
        width: 22px;
        height: 22px;
    }
}

/* ---------- Большие мониторы ----------

   Ширина колонки одна и задаётся токеном. Раньше её задавали двумя разными
   способами: медиазапрос от 1440px ставил жёсткий max-width на .container,
   а от 1920px менял токен. На широком мониторе работали оба, и побеждало
   число — токен переставал что-либо значить.

   Строка текста не должна становиться бесконечной: сверх 1280px растут поля
   по бокам, а не длина строки. Это и есть «просторно», в отличие от
   «растянуто». */

/* Планшеты: отступы 32px */
@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-6);
    }
}

/* Десктоп: отступы 40px */
@media (min-width: 1024px) {
    .container {
        padding-inline: var(--space-10);
    }
}

/* Широкий десктоп: отступы 48px */
@media (min-width: 1440px) {
    .container {
        padding-inline: var(--space-10);
    }
}