/*
|--------------------------------------------------------------------------
| Файл: /assets/css/pages/movies.css
|--------------------------------------------------------------------------
| Тайлбар:
| Gobi Cinema киноны жагсаалтын хуудасны дизайн.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

.page-movies {
    background:
            var(--color-bg);
}


/*
|--------------------------------------------------------------------------
| Movies hero
|--------------------------------------------------------------------------
*/

.movies-hero {
    position: relative;

    overflow: hidden;

    padding:
            90px 0 64px;

    border-bottom:
            1px solid var(--color-border);

    background:
            radial-gradient(
                    circle at 82% 24%,
                    rgba(220, 38, 38, 0.16),
                    transparent 32%
            ),
            radial-gradient(
                    circle at 20% 110%,
                    rgba(255, 255, 255, 0.035),
                    transparent 38%
            ),
            linear-gradient(
                    180deg,
                    #101218 0%,
                    #090a0e 100%
            );
}

.movies-hero::after {
    position: absolute;

    right: -120px;
    bottom: -210px;

    width: 500px;
    height: 500px;

    border:
            1px solid rgba(255, 255, 255, 0.035);

    border-radius:
            50%;

    content: '';

    pointer-events:
            none;
}

.movies-hero__content {
    position: relative;
    z-index: 1;

    max-width:
            760px;
}

.movies-hero__title {
    margin:
            0;

    color:
            #ffffff;

    font-family:
            var(--font-display);

    font-size:
            clamp(
                    54px,
                    7vw,
                    94px
            );

    font-weight:
            700;

    letter-spacing:
            -0.045em;

    line-height:
            1;
}

.movies-hero__description {
    max-width:
            570px;

    margin:
            19px 0 0;

    color:
            var(--color-text-muted);

    font-size:
            18px;

    line-height:
            1.65;
}


/*
|--------------------------------------------------------------------------
| Section
|--------------------------------------------------------------------------
*/

.movies-section {
    padding-top:
            64px;
}

.movies-section--upcoming {
    position: relative;

    margin-top:
            18px;

    padding-top:
            70px;

    border-top:
            1px solid var(--color-border);
}

.movies-section__count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height:
            34px;

    padding:
            0 13px;

    border:
            1px solid var(--color-border);

    border-radius:
            999px;

    background:
            rgba(255, 255, 255, 0.035);

    color:
            var(--color-text-muted);

    font-size:
            13px;

    font-weight:
            600;

    white-space:
            nowrap;
}


/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.movies-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
            38px 23px;
}


/*
|--------------------------------------------------------------------------
| Movie card
|--------------------------------------------------------------------------
*/

.movies-card {
    min-width:
            0;

    transition:
            transform var(--transition-normal);
}

.movies-card__link {
    display:
            block;
}

.movies-card__poster {
    position:
            relative;

    aspect-ratio:
            2 / 3;

    overflow:
            hidden;

    border:
            1px solid rgba(255, 255, 255, 0.08);

    border-radius:
            16px;

    background:
            var(--color-bg-card);

    box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.34);

    transition:
            border-color var(--transition-normal),
            box-shadow var(--transition-normal);
}

.movies-card__poster::after {
    position:
            absolute;

    inset:
            0;

    background:
            linear-gradient(
                    to top,
                    rgba(0, 0, 0, 0.7) 0%,
                    rgba(0, 0, 0, 0.14) 37%,
                    transparent 60%
            );

    content:
            '';

    pointer-events:
            none;
}

.movies-card__poster img {
    width:
            100%;

    height:
            100%;

    object-fit:
            cover;

    transition:
            transform var(--transition-slow),
            filter var(--transition-slow);
}

.movies-card:hover {
    transform:
            translateY(-6px);
}

.movies-card:hover
.movies-card__poster {
    border-color:
            rgba(255, 255, 255, 0.16);

    box-shadow:
            0 28px 64px rgba(0, 0, 0, 0.46);
}

.movies-card:hover
.movies-card__poster img {
    transform:
            scale(1.035);
}


/*
|--------------------------------------------------------------------------
| Badges
|--------------------------------------------------------------------------
*/

.movies-card__badges {
    position:
            absolute;

    z-index:
            3;

    top:
            12px;

    right:
            12px;

    left:
            12px;

    display:
            flex;

    flex-wrap:
            wrap;

    align-items:
            center;

    gap:
            7px;
}

.movies-card__badges
.badge {
    box-shadow:
            0 5px 15px rgba(0, 0, 0, 0.24);

    -webkit-backdrop-filter:
            blur(8px);

    backdrop-filter:
            blur(8px);
}


/*
|--------------------------------------------------------------------------
| Next showtime
|--------------------------------------------------------------------------
*/

.movies-card__next {
    position:
            absolute;

    z-index:
            3;

    right:
            10px;

    bottom:
            10px;

    left:
            10px;

    display:
            flex;

    align-items:
            center;
    justify-content:
            space-between;

    gap:
            10px;

    min-height:
            48px;

    padding:
            8px 12px;

    border:
            1px solid rgba(255, 255, 255, 0.12);

    border-radius:
            10px;

    background:
            rgba(6, 7, 10, 0.8);

    -webkit-backdrop-filter:
            blur(12px);

    backdrop-filter:
            blur(12px);
}

.movies-card__next span {
    color:
            rgba(255, 255, 255, 0.52);

    font-size:
            11px;

    font-weight:
            500;

    line-height:
            1.1;
}

.movies-card__next strong {
    color:
            #ffffff;

    font-size:
            14px;

    font-weight:
            700;

    letter-spacing:
            0.025em;

    white-space:
            nowrap;
}


/*
|--------------------------------------------------------------------------
| Card body
|--------------------------------------------------------------------------
*/

.movies-card__body {
    padding:
            16px 3px 0;
}

.movies-card__title {
    margin:
            0;

    overflow:
            hidden;

    color:
            #ffffff;

    font-family:
            var(--font-display);

    font-size:
            21px;

    font-weight:
            700;

    letter-spacing:
            -0.02em;

    line-height:
            1.28;

    text-overflow:
            ellipsis;
}

.movies-card__original {
    margin-top:
            5px;

    overflow:
            hidden;

    color:
            var(--color-text-faint);

    font-size:
            13px;

    line-height:
            1.3;

    text-overflow:
            ellipsis;

    white-space:
            nowrap;
}


/*
|--------------------------------------------------------------------------
| Meta
|--------------------------------------------------------------------------
*/

.movies-card__meta {
    display:
            flex;

    flex-wrap:
            wrap;

    align-items:
            center;

    gap:
            6px 14px;

    margin-top:
            9px;

    color:
            var(--color-text-muted);

    font-size:
            13px;
}

.movies-card__meta span {
    position:
            relative;
}

.movies-card__meta
span + span::before {
    position:
            absolute;

    top:
            50%;

    left:
            -8px;

    width:
            3px;

    height:
            3px;

    border-radius:
            50%;

    background:
            var(--color-text-faint);

    content:
            '';

    transform:
            translateY(-50%);
}


/*
|--------------------------------------------------------------------------
| Release date
|--------------------------------------------------------------------------
*/

.movies-card__release {
    display:
            flex;

    align-items:
            center;

    gap:
            8px;

    margin-top:
            11px;
}

.movies-card__release span {
    color:
            var(--color-text-faint);

    font-size:
            12px;

    font-weight:
            500;
}

.movies-card__release strong {
    color:
            var(--color-text-soft);

    font-size:
            13px;

    font-weight:
            600;
}


/*
|--------------------------------------------------------------------------
| Action
|--------------------------------------------------------------------------
*/

.movies-card__action {
    display:
            inline-flex;

    align-items:
            center;

    gap:
            7px;

    margin-top:
            14px;

    color:
            var(--color-text-soft);

    font-size:
            14px;

    font-weight:
            600;

    transition:
            color var(--transition-fast),
            gap var(--transition-fast);
}

.movies-card__action span {
    color:
            var(--color-accent-hover);

    font-size:
            17px;

    line-height:
            1;
}

.movies-card:hover
.movies-card__action {
    gap:
            10px;

    color:
            #ffffff;
}


/*
|--------------------------------------------------------------------------
| Placeholder
|--------------------------------------------------------------------------
*/

.movies-card__placeholder {
    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;
    justify-content:
            center;

    width:
            100%;

    height:
            100%;

    background:
            radial-gradient(
                    circle at 50% 44%,
                    rgba(220, 38, 38, 0.14),
                    transparent 40%
            ),
            linear-gradient(
                    145deg,
                    #171a21 0%,
                    #0b0c10 100%
            );
}

.movies-card__placeholder strong {
    color:
            #ffffff;

    font-size:
            30px;

    font-weight:
            700;

    letter-spacing:
            0.12em;
}

.movies-card__placeholder span {
    margin-top:
            5px;

    color:
            var(--color-text-muted);

    font-size:
            10px;

    font-weight:
            600;

    letter-spacing:
            0.36em;
}


/*
|--------------------------------------------------------------------------
| Empty state
|--------------------------------------------------------------------------
*/

.movies-section
.empty-state {
    min-height:
            300px;

    border:
            1px dashed rgba(255, 255, 255, 0.1);

    border-radius:
            var(--radius-lg);

    background:
            rgba(255, 255, 255, 0.018);
}


/*
|--------------------------------------------------------------------------
| Large desktop
|--------------------------------------------------------------------------
*/

@media (
min-width: 1550px
) {
    .movies-grid {
        gap:
                42px 27px;
    }

    .movies-card__title {
        font-size:
                22px;
    }
}


/*
|--------------------------------------------------------------------------
| Medium desktop
|--------------------------------------------------------------------------
*/

@media (
max-width: 1280px
) {
    .movies-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (
max-width: 991px
) {
    .movies-hero {
        padding:
                72px 0 54px;
    }

    .movies-hero__title {
        font-size:
                68px;
    }

    .movies-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
                34px 20px;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
max-width: 767px
) {
    .movies-hero {
        padding:
                56px 0 42px;
    }

    .movies-hero__title {
        font-size:
                52px;
    }

    .movies-hero__description {
        margin-top:
                14px;

        font-size:
                16px;
    }

    .movies-section {
        padding-top:
                45px;
    }

    .movies-section--upcoming {
        margin-top:
                5px;

        padding-top:
                50px;
    }

    .movies-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
                30px 14px;
    }

    .movies-card__poster {
        border-radius:
                13px;
    }

    .movies-card__badges {
        top:
                8px;

        right:
                8px;

        left:
                8px;
    }

    .movies-card__next {
        right:
                7px;

        bottom:
                7px;

        left:
                7px;

        min-height:
                41px;

        padding:
                6px 8px;
    }

    .movies-card__next span {
        display:
                none;
    }

    .movies-card__next strong {
        width:
                100%;

        text-align:
                center;
    }

    .movies-card__body {
        padding-top:
                12px;
    }

    .movies-card__title {
        font-size:
                18px;
    }

    .movies-card__meta {
        gap:
                5px 11px;

        margin-top:
                7px;

        font-size:
                12px;
    }

    .movies-card__release {
        margin-top:
                8px;
    }

    .movies-card__action {
        margin-top:
                10px;

        font-size:
                13px;
    }
}


/*
|--------------------------------------------------------------------------
| Small mobile
|--------------------------------------------------------------------------
*/

@media (
max-width: 430px
) {
    .movies-hero {
        padding:
                47px 0 36px;
    }

    .movies-hero__title {
        font-size:
                46px;
    }

    .movies-grid {
        gap:
                27px 11px;
    }

    .movies-card__title {
        font-size:
                16px;

        line-height:
                1.3;
    }

    .movies-card__original {
        font-size:
                11px;
    }

    .movies-card__meta {
        display:
                block;
    }

    .movies-card__meta span {
        display:
                block;
    }

    .movies-card__meta
    span + span {
        margin-top:
                2px;
    }

    .movies-card__meta
    span + span::before {
        display:
                none;
    }

    .movies-card__release {
        align-items:
                flex-start;

        flex-direction:
                column;

        gap:
                1px;
    }

    .movies-card__badges
    .badge {
        min-height:
                23px;

        padding-inline:
                7px;

        font-size:
                10px;
    }
}


/*
|--------------------------------------------------------------------------
| Hover device
|--------------------------------------------------------------------------
*/

@media (
hover: hover
) and (
pointer: fine
) {
    .movies-card__poster::before {
        position:
                absolute;

        z-index:
                2;

        inset:
                0;

        background:
                rgba(255, 255, 255, 0.025);

        opacity:
                0;

        content:
                '';

        transition:
                opacity var(--transition-normal);

        pointer-events:
                none;
    }

    .movies-card:hover
    .movies-card__poster::before {
        opacity:
                1;
    }
}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (
prefers-reduced-motion: reduce
) {
    .movies-card,
    .movies-card__poster img {
        transform:
                none !important;
    }
}