/*
|--------------------------------------------------------------------------
| Файл: /assets/css/pages/home.css
|--------------------------------------------------------------------------
| Тайлбар:
| Gobi Cinema нүүр хуудасны тусгай дизайн.
|
| Фонт:
| - Noto Serif       → киноны нэр, том гарчиг
| - Roboto Condensed → UI, цаг, товч, мэдээлэл
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.home-hero {
    position: relative;

    min-height:
            min(
                    780px,
                    calc(100vh - var(--header-height))
            );

    overflow: hidden;

    isolation: isolate;

    background:
            #08090c;
}

.home-hero__background {
    position: absolute;
    z-index: -4;

    inset: 0;

    background-image:
            var(--hero-image);

    background-position:
            center 28%;

    background-repeat:
            no-repeat;

    background-size:
            cover;

    transform:
            scale(1.025);
}

.home-hero__background::after {
    position: absolute;

    inset: 0;

    background:
            rgba(0, 0, 0, 0.1);

    content: '';
}


/*
|--------------------------------------------------------------------------
| Hero overlay
|--------------------------------------------------------------------------
*/

.home-hero__overlay {
    position: absolute;
    z-index: -3;

    inset: 0;

    background:
            linear-gradient(
                    90deg,
                    rgba(5, 6, 9, 0.98) 0%,
                    rgba(5, 6, 9, 0.92) 24%,
                    rgba(5, 6, 9, 0.68) 48%,
                    rgba(5, 6, 9, 0.25) 72%,
                    rgba(5, 6, 9, 0.1) 100%
            ),
            linear-gradient(
                    0deg,
                    #08090c 0%,
                    rgba(8, 9, 12, 0.86) 7%,
                    rgba(8, 9, 12, 0.16) 42%,
                    rgba(8, 9, 12, 0.08) 100%
            );
}

.home-hero::after {
    position: absolute;
    z-index: -2;

    right: 0;
    bottom: 0;
    left: 0;

    height: 190px;

    background:
            linear-gradient(
                    to bottom,
                    transparent,
                    #08090c
            );

    content: '';
}


/*
|--------------------------------------------------------------------------
| Hero container
|--------------------------------------------------------------------------
*/

.home-hero__container {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(270px, 350px);

    align-items: center;

    gap:
            clamp(
                    50px,
                    8vw,
                    130px
            );

    min-height:
            min(
                    780px,
                    calc(100vh - var(--header-height))
            );

    padding-top:
            68px;

    padding-bottom:
            95px;
}


/*
|--------------------------------------------------------------------------
| Hero content
|--------------------------------------------------------------------------
*/

.home-hero__content {
    max-width:
            760px;
}

.home-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom:
            19px;

    color:
            #f87171;

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

    font-size:
            13px;

    font-weight:
            700;

    letter-spacing:
            0.19em;
}

.home-hero__eyebrow::before {
    width:
            24px;

    height:
            2px;

    border-radius:
            999px;

    background:
            var(--color-accent);

    content: '';
}

.home-hero__title {
    max-width:
            820px;

    margin:
            0;

    color:
            #ffffff;

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

    font-size:
            clamp(
                    52px,
                    6.3vw,
                    94px
            );

    font-weight:
            700;

    letter-spacing:
            -0.045em;

    line-height:
            0.98;

    text-wrap:
            balance;

    text-shadow:
            0 12px 40px rgba(0, 0, 0, 0.42);
}

.home-hero__original-title {
    margin-top:
            15px;

    color:
            rgba(255, 255, 255, 0.52);

    font-size:
            18px;

    font-weight:
            400;

    letter-spacing:
            0.035em;
}


/*
|--------------------------------------------------------------------------
| Hero meta
|--------------------------------------------------------------------------
*/

.home-hero__meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
            10px 16px;

    margin-top:
            25px;
}

.home-hero__meta-item {
    position: relative;

    color:
            rgba(255, 255, 255, 0.76);

    font-size:
            15px;

    font-weight:
            500;
}

.home-hero__meta-item
+ .home-hero__meta-item::before {
    display: inline-block;

    width:
            3px;

    height:
            3px;

    margin:
            0 12px 3px 0;

    border-radius:
            50%;

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

    content: '';
}


/*
|--------------------------------------------------------------------------
| Hero description
|--------------------------------------------------------------------------
*/

.home-hero__description {
    display: -webkit-box;

    max-width:
            620px;

    margin:
            25px 0 0;

    overflow: hidden;

    color:
            rgba(255, 255, 255, 0.68);

    font-size:
            17px;

    line-height:
            1.7;

    -webkit-box-orient:
            vertical;

    -webkit-line-clamp:
            3;
}


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

.home-hero__next-showtime {
    display: inline-flex;

    align-items: center;

    gap:
            15px;

    margin-top:
            28px;

    padding:
            12px 16px;

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

    border-radius:
            10px;

    background:
            rgba(10, 11, 15, 0.56);

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

    backdrop-filter:
            blur(10px);
}

.home-hero__next-label {
    color:
            rgba(255, 255, 255, 0.5);

    font-size:
            13px;

    font-weight:
            500;
}

.home-hero__next-value {
    color:
            #ffffff;

    font-size:
            16px;

    font-weight:
            700;

    letter-spacing:
            0.02em;
}


/*
|--------------------------------------------------------------------------
| Hero actions
|--------------------------------------------------------------------------
*/

.home-hero__actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
            11px;

    margin-top:
            29px;
}

.home-hero__actions .btn {
    min-width:
            138px;
}

.home-hero__booking {
    box-shadow:
            0 14px 34px rgba(220, 38, 38, 0.27);
}

.home-hero__details {
    background:
            rgba(255, 255, 255, 0.08);

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

    backdrop-filter:
            blur(10px);
}


/*
|--------------------------------------------------------------------------
| Hero poster
|--------------------------------------------------------------------------
*/

.home-hero__poster {
    display: flex;

    justify-content: flex-end;

    perspective:
            1200px;
}

.home-hero__poster-frame {
    position: relative;

    width:
            min(
                    100%,
                    330px
            );

    aspect-ratio:
            2 / 3;

    overflow: hidden;

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

    border-radius:
            18px;

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

    box-shadow:
            0 42px 100px rgba(0, 0, 0, 0.58);

    transform:
            rotateY(-3deg)
            rotateX(1deg);
}

.home-hero__poster-frame::after {
    position: absolute;

    inset: 0;

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

    border-radius:
            inherit;

    box-shadow:
            inset 0 0 40px rgba(255, 255, 255, 0.02);

    content: '';

    pointer-events: none;
}

.home-hero__poster-frame img {
    width:
            100%;

    height:
            100%;

    object-fit:
            cover;
}


/*
|--------------------------------------------------------------------------
| Hero slider
|--------------------------------------------------------------------------
*/

.home-hero-slider {
    position:
            relative;

    overflow:
            hidden;

    background:
            #08090c;

    touch-action:
            pan-y;
}


.home-hero-slider__track {
    position:
            relative;

    min-height:
            min(
                    780px,
                    calc(100vh - var(--header-height))
            );
}


/*
|--------------------------------------------------------------------------
| Slides
|--------------------------------------------------------------------------
*/

.home-hero-slider .home-hero {
    position:
            absolute;

    inset:
            0;

    width:
            100%;

    opacity:
            0;

    visibility:
            hidden;

    pointer-events:
            none;

    transform:
            translateX(18px);

    transition:
            opacity 650ms ease,
            transform 650ms ease,
            visibility 650ms ease;
}


.home-hero-slider .home-hero.is-active {
    position:
            relative;

    z-index:
            2;

    opacity:
            1;

    visibility:
            visible;

    pointer-events:
            auto;

    transform:
            translateX(0);
}


/*
|--------------------------------------------------------------------------
| Background transition
|--------------------------------------------------------------------------
*/

.home-hero-slider .home-hero__background {
    transform:
            scale(1.055);

    transition:
            transform 7s ease;
}


.home-hero-slider .home-hero.is-active
.home-hero__background {
    transform:
            scale(1.025);
}


/*
|--------------------------------------------------------------------------
| Content transition
|--------------------------------------------------------------------------
*/

.home-hero-slider .home-hero__content {
    opacity:
            0;

    transform:
            translateY(18px);

    transition:
            opacity 600ms ease 120ms,
            transform 600ms ease 120ms;
}


.home-hero-slider .home-hero.is-active
.home-hero__content {
    opacity:
            1;

    transform:
            translateY(0);
}


/*
|--------------------------------------------------------------------------
| Poster transition
|--------------------------------------------------------------------------
*/

.home-hero-slider .home-hero__poster {
    opacity:
            0;

    transform:
            translateX(24px);

    transition:
            opacity 650ms ease 160ms,
            transform 650ms ease 160ms;
}


.home-hero-slider .home-hero.is-active
.home-hero__poster {
    opacity:
            1;

    transform:
            translateX(0);
}


/*
|--------------------------------------------------------------------------
| Slider controls
|--------------------------------------------------------------------------
*/

.home-hero-slider__controls {
    position:
            absolute;

    z-index:
            20;

    right:
            0;

    bottom:
            44px;

    left:
            0;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    gap:
            13px;

    pointer-events:
            none;
}


.home-hero-slider__arrow,
.home-hero-slider__dot {
    pointer-events:
            auto;
}


/*
|--------------------------------------------------------------------------
| Arrow
|--------------------------------------------------------------------------
*/

.home-hero-slider__arrow {
    display:
            inline-flex;

    align-items:
            center;

    justify-content:
            center;

    width:
            42px;

    height:
            42px;

    padding:
            0;

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

    border-radius:
            50%;

    background:
            rgba(8, 9, 12, 0.62);

    color:
            #ffffff;

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

    font-size:
            18px;

    cursor:
            pointer;

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

    backdrop-filter:
            blur(12px);

    transition:
            background var(--transition-normal),
            border-color var(--transition-normal),
            transform var(--transition-normal);
}


/*
|--------------------------------------------------------------------------
| Dots
|--------------------------------------------------------------------------
*/

.home-hero-slider__dots {
    display:
            flex;

    align-items:
            center;

    gap:
            7px;

    padding:
            9px 12px;

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

    border-radius:
            999px;

    background:
            rgba(8, 9, 12, 0.58);

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

    backdrop-filter:
            blur(12px);
}


.home-hero-slider__dot {
    width:
            7px;

    height:
            7px;

    padding:
            0;

    border:
            0;

    border-radius:
            999px;

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

    cursor:
            pointer;

    transition:
            width var(--transition-normal),
            background var(--transition-normal),
            transform var(--transition-normal);
}


.home-hero-slider__dot.is-active {
    width:
            24px;

    background:
            var(--color-accent);
}

/*
|--------------------------------------------------------------------------
| Empty hero
|--------------------------------------------------------------------------
*/

.home-hero--empty {
    display: flex;

    align-items: center;

    min-height:
            520px;

    background:
            radial-gradient(
                    circle at 70% 20%,
                    rgba(220, 38, 38, 0.12),
                    transparent 35%
            ),
            #08090c;
}

.home-empty-hero {
    max-width:
            780px;

    padding:
            90px 0;
}

.home-empty-hero p {
    max-width:
            530px;

    margin:
            24px 0 0;

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

    font-size:
            18px;
}


/*
|--------------------------------------------------------------------------
| Movies section
|--------------------------------------------------------------------------
*/

.home-movies {
    position: relative;

    padding-top:
            55px;
}

.home-movie-grid {
    display: grid;

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

    gap:
            34px 22px;
}


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

.home-movie-card__link {
    display: block;
}

.home-movie-card {
    transition:
            transform var(--transition-normal);
}

.home-movie-card:hover {
    transform:
            translateY(-5px);
}

.home-movie-card__poster-top {
    position: absolute;
    z-index: 3;

    top: 12px;
    left: 12px;

    display: flex;

    align-items: center;

    gap:
            7px;
}

/* /assets/css/pages/home.css */

.home-movie-card .movie-card__poster {
    border:
            1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.34),
            inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

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

.home-movie-card__showtime {
    position: absolute;
    z-index: 3;

    right:
            10px;

    bottom:
            10px;

    left:
            10px;

    display: flex;

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

    gap:
            10px;

    min-height:
            46px;

    padding:
            8px 11px;

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

    border-radius:
            9px;

    background:
            rgba(5, 6, 9, 0.78);

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

    backdrop-filter:
            blur(10px);
}

.home-movie-card__showtime span {
    color:
            rgba(255, 255, 255, 0.56);

    font-size:
            11px;

    font-weight:
            500;
}

.home-movie-card__showtime strong {
    color:
            #ffffff;

    font-size:
            14px;

    font-weight:
            700;

    letter-spacing:
            0.02em;

    white-space:
            nowrap;
}


/*
|--------------------------------------------------------------------------
| Movie placeholder
|--------------------------------------------------------------------------
*/

.home-movie-card__placeholder {
    display: flex;

    flex-direction: column;

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

    width:
            100%;

    height:
            100%;

    background:
            radial-gradient(
                    circle at center,
                    rgba(220, 38, 38, 0.14),
                    transparent 48%
            ),
            linear-gradient(
                    145deg,
                    #171920,
                    #0c0d11
            );

    color:
            #ffffff;
}

.home-movie-card__placeholder span {
    font-size:
            29px;

    font-weight:
            700;

    letter-spacing:
            0.12em;
}

.home-movie-card__placeholder small {
    margin-top:
            5px;

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

    font-size:
            10px;

    letter-spacing:
            0.35em;
}


/*
|--------------------------------------------------------------------------
| Booking CTA
|--------------------------------------------------------------------------
*/

.home-booking-cta {
    padding-top:
            30px;
}

.home-booking-cta__card {
    position: relative;

    display: flex;

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

    gap:
            50px;

    overflow: hidden;

    padding:
            44px 48px;

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

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

    background:
            linear-gradient(
                    120deg,
                    #14171d,
                    #0c0e12
            );

    box-shadow:
            var(--shadow-md);
}

.home-booking-cta__card::before {
    position: absolute;

    top:
            -130px;

    right:
            12%;

    width:
            330px;

    height:
            330px;

    border-radius:
            50%;

    background:
            rgba(220, 38, 38, 0.12);

    filter:
            blur(15px);

    content: '';

    pointer-events:
            none;
}

.home-booking-cta__card::after {
    position: absolute;

    top:
            0;

    right:
            0;

    width:
            180px;

    height:
            100%;

    background:
            linear-gradient(
                    120deg,
                    transparent,
                    rgba(220, 38, 38, 0.045)
            );

    content: '';

    pointer-events:
            none;
}

.home-booking-cta__content {
    position: relative;
    z-index: 1;

    max-width:
            690px;
}

.home-booking-cta__title {
    margin:
            0;

    color:
            #ffffff;

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

    font-size:
            clamp(
                    30px,
                    3.2vw,
                    46px
            );

    font-weight:
            700;

    letter-spacing:
            -0.03em;

    line-height:
            1.13;
}

.home-booking-cta__description {
    max-width:
            610px;

    margin:
            14px 0 0;

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

    font-size:
            16px;

    line-height:
            1.65;
}

.home-booking-cta__action {
    position: relative;
    z-index: 1;

    flex-shrink:
            0;
}

.home-booking-cta__action .btn {
    min-width:
            170px;

    min-height:
            52px;
}


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

@media (
min-width: 1500px
) {
    .home-hero__poster-frame {
        width:
                350px;
    }

    .home-movie-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

        gap:
                38px 26px;
    }
}


/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

@media (
max-width: 1280px
) {
    .home-hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(245px, 295px);

        gap:
                55px;
    }

    .home-movie-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}


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

@media (
max-width: 991px
) {
    .home-hero {
        min-height:
                670px;
    }

    .home-hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            230px;

        min-height:
                670px;

        gap:
                38px;

        padding-top:
                52px;

        padding-bottom:
                78px;
    }

    .home-hero__title {
        font-size:
                clamp(
                        45px,
                        7vw,
                        68px
                );
    }

    .home-hero__description {
        font-size:
                16px;
    }

    .home-hero__poster-frame {
        width:
                230px;

        border-radius:
                15px;
    }

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

    .home-booking-cta__card {
        padding:
                38px 36px;
    }
}


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

@media (
max-width: 767px
) {

    .home-hero-slider__track {
        min-height:
                0;
    }


    .home-hero-slider__controls {
        bottom:
                20px;
    }


    .home-hero-slider__arrow {
        width:
                36px;

        height:
                36px;
    }


    .home-hero-slider__dots {
        padding:
                8px 10px;
    }

    .home-hero {
        min-height:
                auto;
    }

    .home-hero__background {
        background-position:
                center top;
    }

    .home-hero__overlay {
        background:
                linear-gradient(
                        to bottom,
                        rgba(5, 6, 9, 0.42) 0%,
                        rgba(5, 6, 9, 0.63) 28%,
                        rgba(5, 6, 9, 0.93) 64%,
                        #08090c 100%
                );
    }

    .home-hero__container {
        display: flex;

        flex-direction: column-reverse;

        align-items: flex-start;

        min-height:
                auto;

        gap:
                28px;

        padding-top:
                42px;

        padding-bottom:
                55px;
    }

    .home-hero__poster {
        width:
                100%;

        justify-content:
                flex-start;
    }

    .home-hero__poster-frame {
        width:
                155px;

        border-radius:
                12px;

        transform:
                none;

        box-shadow:
                0 22px 55px rgba(0, 0, 0, 0.44);
    }

    .home-hero__content {
        width:
                100%;
    }

    .home-hero__eyebrow {
        margin-bottom:
                13px;

        font-size:
                11px;
    }

    .home-hero__title {
        max-width:
                100%;

        font-size:
                clamp(
                        39px,
                        12vw,
                        60px
                );

        line-height:
                1.02;
    }

    .home-hero__original-title {
        margin-top:
                11px;

        font-size:
                15px;
    }

    .home-hero__meta {
        margin-top:
                18px;
    }

    .home-hero__meta-item {
        font-size:
                13px;
    }

    .home-hero__description {
        margin-top:
                19px;

        font-size:
                15px;

        line-height:
                1.62;

        -webkit-line-clamp:
                4;
    }

    .home-hero__next-showtime {
        margin-top:
                21px;

        padding:
                10px 13px;
    }

    .home-hero__actions {
        margin-top:
                22px;
    }

    .home-hero__actions .btn {
        min-width:
                0;

        flex:
                1;
    }

    .home-movies {
        padding-top:
                28px;
    }

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

        gap:
                28px 14px;
    }

    .home-movie-card__showtime {
        right:
                7px;

        bottom:
                7px;

        left:
                7px;

        min-height:
                40px;

        padding:
                6px 8px;
    }

    .home-movie-card__showtime span {
        display:
                none;
    }

    .home-movie-card__showtime strong {
        margin-inline:
                auto;

        font-size:
                13px;
    }

    .home-booking-cta {
        padding-top:
                15px;
    }

    .home-booking-cta__card {
        align-items:
                flex-start;

        flex-direction:
                column;

        gap:
                26px;

        padding:
                30px 26px;
    }

    .home-booking-cta__action {
        width:
                100%;
    }

    .home-booking-cta__action .btn {
        width:
                100%;
    }
}


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

@media (
max-width: 430px
) {
    .home-hero__container {
        padding-top:
                30px;
    }

    .home-hero__poster-frame {
        width:
                135px;
    }

    .home-hero__title {
        font-size:
                40px;
    }

    .home-hero__next-showtime {
        align-items:
                flex-start;

        flex-direction:
                column;

        gap:
                2px;
    }

    .home-movie-grid {
        gap:
                25px 11px;
    }

    .home-movie-card .movie-card__body {
        padding-top:
                12px;
    }

    .home-movie-card .movie-card__title {
        font-size:
                16px;
    }

    .home-movie-card .movie-card__meta {
        gap:
                4px 6px;

        margin-top:
                6px;

        font-size:
                12px;
    }

    .home-movie-card__availability {
        margin-top:
                8px;

        font-size:
                12px;
    }
}


/*
|--------------------------------------------------------------------------
| Hover capable devices
|--------------------------------------------------------------------------
*/

@media (
hover: hover
) and (
pointer: fine
) {
    .home-hero__poster-frame {
        transition:
                transform var(--transition-slow),
                box-shadow var(--transition-slow);
    }

    .home-hero__poster-frame:hover {
        transform:
                rotateY(0deg)
                rotateX(0deg)
                translateY(-5px);

        box-shadow:
                0 52px 115px rgba(0, 0, 0, 0.67);
    }

    .home-hero-slider__arrow:hover {
        border-color:
                rgba(255, 255, 255, 0.28);

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

        transform:
                scale(1.06);
    }


    .home-hero-slider__dot:hover {
        background:
                rgba(255, 255, 255, 0.7);
    }
}


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

@media (
prefers-reduced-motion: reduce
) {
    .home-hero__poster-frame,
    .home-movie-card {
        transform:
                none !important;
    }

    .home-hero-slider .home-hero,
    .home-hero-slider .home-hero__content,
    .home-hero-slider .home-hero__poster,
    .home-hero-slider .home-hero__background {
        transition:
                none !important;

        transform:
                none !important;
    }
}