/* =========================================================
   MoVix — Core: Variables, Reset, Base, Container,
   Buttons, Footer, Utilities, Accessibility, Print
   Загружается на ВСЕХ страницах
   ========================================================= */

/* =========================================================
   CSS VARIABLES (Design Tokens)
   ========================================================= */
:root {
    /* Тёмная тема по умолчанию */
    color-scheme: dark;
    /* Colors */
    --bs-body-bg: #0b0b0b;
    --bs-body-color: #ffffff;
    --bs-primary: #e50914;
    --bs-dark: #141414;
    --bs-secondary: #b3b3b3;
    --bs-border-color: rgba(255,255,255,.06);

    --accent: #e50914;
    --panel: #141414;
    --muted: #b3b3b3;

    /* Z-index System (UNIFIED) */
    --z-base: 1;
    --z-navbar: 100;
    --z-footer: 100;
    --z-row-nav: 40;
    --z-card-hover: 80;
    /* Модалки должны быть поверх всех слоёв */
    --z-modal: 9999;
    --z-modal-suggest: 10000;
    --z-player-dock: 3;
    --z-player-close: 300;

    /* Borders & Radius */
    --radius: 0.875rem;
    --radius-lg: 1rem;
    --b1: 0.0625rem;

    /* Spacing */
    --gap: clamp(0.8rem, 1.2vw, 1.4rem);
    --tap: 20px;

    /* Typography */
    --lh-body: 1.7;
    --desc-maxch: 68;
    --desc-fs-min: .94rem;
    --desc-fs-vw: .20vw;
    --desc-fs-max: 1.06rem;
    --desc-lh: 1.65;

    /* Hero */
    --hero-h: clamp(20rem, 50vw, 28rem);
    --hero-gap: clamp(2rem, 10vw, 12.5rem);
    --hero-overlay-h: clamp(32%, 40vh, 42%);
    --hero-content-bottom: clamp(0.25rem, 4vh, 5vh);
    --fade: 0vw;
    --hero-fade-duration: 0.8s;
    /* Hero: crossfade+cinema (blur/scale фона) и горизонтальный wipe */
    --hero-cinema-duration: 0.9s;
    --hero-wipe-duration: 0.55s;

    /* Cards (UNIFIED SIZES) */
    --unified-card-width: 160px;
    --unified-card-height: 240px;
    --unified-cards-width: 190px;
    --unified-cards-height: 240px;
    /* Горизонтальные ряды ТВ на главной: тот же шаг, что у фильмов; при необходимости переопределите только эту переменную */
    --tv-channel-cards-width: var(--unified-cards-width);
    --gap-card: 1vw;
    --gap-cards: 1.2vw;

    /* Navbar */
    --navbar-h: 60px;

    /* Layout: единая ширина контента на всех страницах (главная, детали, поиск…) */
    --mvx-content-max: min(92vw, 130rem);
    --mvx-content-pad-x: clamp(1rem, 2vw, 3.5rem);
    --container-max: 1920px;
    --hero-height: clamp(280px, 35vh, 420px);

    /* Footer Heights */
    --mvx-site-footer-h: 76px;
    --mvx-search-actions-h: 76px;

    /* Themeable surfaces (тёмная тема) */
    --mvx-card-bg: #111;
    --mvx-card-border: rgba(255, 255, 255, 0.06);
    --mvx-card-meta-bg: #151515;
    --mvx-card-meta-border: #1d1d1d;
    --mvx-link: #d5d6d7;

    /* Player */
    --shell-w: min(87.5rem, 70vw);
    --shell-h: min(55vh, calc(75vh - 6vh));

    /* Footer */
    --footer-h: 54px;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS (variable overrides)
   ========================================================= */

@media (max-width: 480px) {
    :root {
        --unified-card-width: 140px;
        --unified-card-height: 180px;
        --unified-cards-width: 165px;
        --unified-cards-height: 180px;
        --gap-card: 1.2vw;
        --gap-cards: .5vw;
        --gap: 3.2vw;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --unified-card-width: 130px;
        --unified-card-height: 210px;
        --unified-cards-width: 150px;
        --unified-cards-height: 210px;
        --gap-card: 1.5vw;
        --gap-cards: .5vw;
        --desc-maxch: 60;
        --hero-h: clamp(16rem, 52vw, 24rem);
        --hero-gap: 6vw;
        --navbar-h: 64px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --unified-card-width: 150px;
        --unified-card-height: 225px;
        --unified-cards-width: 150px;
        --unified-cards-height: 225px;
        --gap-card: 1vw;
        --gap-cards: 1vw;
        --gap: 2vw;
        --hero-h: clamp(18rem, 38vw, 26rem);
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    :root {
        --unified-card-width: 180px;
        --unified-card-height: 250px;
        --unified-cards-width: 180px;
        --unified-cards-height: 250px;
        --gap-card: 1vw;
        --gap-cards: 1vw;
        --gap: 1.3vw;
        --hero-h: clamp(22rem, 44vw, 26rem);
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    :root {
        --unified-card-width: 185px;
        --unified-card-height: 270px;
        --gap-card: 1vw;
        --unified-cards-width: 185px;
        --unified-cards-height: 270px;
        --gap-cards: 1vw;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    :root{
        --unified-card-width: 240px;
        --unified-card-height: 360px;
        --gap-card: 1.5vw;
        --unified-cards-width: 240px;
        --unified-cards-height: 360px;
        --gap-cards: 1.5vw;
        --gap: 1.4vw;
    }
}

@media (min-width: 2560px) {
    :root {
        --desc-maxch: 76;
        --desc-fs-min: 1.02rem;
        --desc-fs-max: 1.18rem;
        --hero-h: clamp(24rem, 42vw, 48rem);
        --shell-w: min(105rem, 58vw);
        --unified-card-width: 220px;
        --unified-card-height: 330px;
        --unified-cards-width: 240px;
        --unified-cards-height: 350px;
        --gap-card: 1vw;
        --gap-cards: 1.2vw;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    :root {
        --hero-h: clamp(14rem, 45vh, 20rem);
        --unified-card-width: 160px;
        --unified-card-height: 260px;
        --unified-cards-width: 160px;
        --unified-cards-height: 260px;
        --gap-card: 1.5vw;
        --gap-cards: 1.5vw;
    }
}

/* =========================================================
   BASE STYLES
   ========================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: var(--lh-body);
    padding-top: var(--navbar-h);
    padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
}

a {
    color: var(--mvx-link);
    text-decoration: none;
}

a:hover {
    color: inherit;
}

/* =========================================================
   CONTAINER
   ========================================================= */
.container {
    width: 100%;
    max-width: var(--mvx-content-max);
    margin: 0 auto;
    padding-left: var(--mvx-content-pad-x);
    padding-right: var(--mvx-content-pad-x);
    box-sizing: border-box;
}

/* =========================================================
   BUTTONS (UNIFIED)
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: .75rem;
    padding: .8rem 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease;
    min-height: var(--tap);
    text-decoration: none;
}

.btn:hover {
    filter: brightness(1.1);
    color: #fff;
}

.btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .btn {
        width: 100%;
        padding: 1rem 1.4rem;
        min-height: var(--tap);
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .btn {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   CHIPS (shared)
   ========================================================= */
.mvx-chip,
.chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: .42rem .72rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    cursor:pointer;
    font-size: .86rem;
    line-height: 1;
    user-select:none;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.mvx-chip:hover,
.chip:hover{
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
}

.mvx-chip.is-active,
.mvx-chip.active,
.chip.is-active,
.chip.active{
    background: rgba(229,9,20,.18);
    border-color: rgba(229,9,20,.55);
    color:#fff;
}

.chip--link {
    color: #e6e6e6;
}

.hr {
    height: var(--b1);
    background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.18), rgba(255,255,255,.05));
    margin: .9rem 0;
}

/* =========================================================
   FOOTER
   ========================================================= */
.sticky-footer {
    position: fixed;
    z-index: var(--z-footer);
    left: 0;
    right: 0;
    bottom: 0;
    padding: .5rem;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.80), rgba(0,0,0,.95));
}

@supports (backdrop-filter: blur(6px)) {
    .sticky-footer {
        backdrop-filter: blur(6px);
        background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65), rgba(0,0,0,.9));
    }
}

.sticky-footer__inner {
    height: 15px;
    text-align: center;
    color: #dfe3ea;
    font-size: clamp(.7rem, 1.4vw, .9rem);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sticky-footer .brand {
    color: #fff;
}

.sticky-footer .brand b {
    color: #ff4757;
}

@media (orientation: landscape) and (max-height: 600px) {
    .sticky-footer {
        display: none;
    }
}

/* =========================================================
   UTILITIES
   ========================================================= */
.hide {
    display: none;
}

.section {
    margin: 1.5rem 0 .9rem;
    justify-content: space-between;
}

.section h2 {
    margin: 0;
    font-size: clamp(1.05rem, 1.2rem + .25vw, 1.6rem);
    font-weight: 800;
}

.thin {
    font-weight: 300;
}

.mvx-search-hint{
    display:block;
}

#mvxChipsGenres{
    max-height: 280px;
    overflow: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
}

#mvxChipsGenres::-webkit-scrollbar{
    width: 10px;
}

#mvxChipsGenres::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,.35);
}

#mvxChipsGenres::-webkit-scrollbar-thumb:hover{
    background: rgba(255,255,255,.18);
}

.grid .card .poster[style*="aspect-ratio"],
.row-scroller .card .poster[style*="aspect-ratio"]{
    aspect-ratio: unset;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
@media (prefers-contrast: high) {
    :root {
        --bs-border-color: rgba(255,255,255,.25);
        --bs-body-color: #ffffff;
    }

    .card {
        border-width: 2px;
    }

    .mvx-brand.is-active {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .meta .title,
    .slide .title,
    .detail h2 {
        text-shadow: 0 2px 8px rgba(0,0,0,.9);
        font-weight: 800;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bs-body-bg: #0b0b0b;
        --bs-body-color: #ffffff;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none;
        animation: none;
        scroll-behavior: auto;
    }

    .hero.is-fade .slide {
        transition: none;
    }

    .reveal-fade {
        transition: none;
    }

    .chip,
    .mvx-chip {
        transition: none;
    }
}

/* =========================================================
   PERFORMANCE
   ========================================================= */
.card,
.mvx-brand,
.btn {
    will-change: transform;
}

.card:hover,
.mvx-brand:hover {
    will-change: auto;
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
    .navbar,
    .sticky-footer,
    .player-stage,
    .mvx-search,
    .fav-heart,
    .row-nav {
        display: none;
    }

    .card {
        break-inside: avoid;
    }
}