/*
|--------------------------------------------------------------------------
| UBEX Single Episode
|--------------------------------------------------------------------------
*/


.ubex-episode-page {
    background:
        #050505;
    color:
        #fff;
    min-height:
        100vh;
}


/*
|--------------------------------------------------------------------------
| Video Player
|--------------------------------------------------------------------------
*/

.ubex-episode-player {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
}


.ubex-episode-player::before {
    content:"";
    position: absolute;
    inset: 0;
    background-image: var(--episode-poster);
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    z-index: 0;
}


.ubex-episode-player::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        35%;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 5, 5, 0) 0%,
            rgba(5, 5, 5, 0.65) 65%,
            rgba(5, 5, 5, 1) 100%
        );

    pointer-events:
        none;

    z-index:
        1;
}


.ubex-episode-player-inner {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        1600px;

    margin:
        0 auto;

    background:
        #000;
}


.ubex-episode-player video,
.ubex-episode-player iframe {
    display:
        block;

    width:
        100%;

    max-width:
        100%;

    margin:
        0;

    border:
        0;
}


/*
|--------------------------------------------------------------------------
| Episode Details
|--------------------------------------------------------------------------
*/

.ubex-episode-info {
    position:
        relative;

    padding:
        32px 50px 60px;

    background:
        linear-gradient(
            to bottom,
            #050505 0%,
            #080808 100%
        );
}


.ubex-episode-info-inner {
    width:
        100%;

    max-width:
        1450px;

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        80px;

    align-items:
        start;
}


/*
|--------------------------------------------------------------------------
| Main Episode Information
|--------------------------------------------------------------------------
*/

.ubex-episode-main {
    max-width:
        850px;
}


.ubex-episode-series {
    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        #bcbcbc;

    font-size:
        14px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;

    text-decoration:
        none;
}


.ubex-episode-series:hover {
    color:
        #fff;
}


.ubex-episode-title {
    margin:
        0 0 14px;

    padding:
        0;

    color:
        #fff;

    font-size:
        clamp(
            32px,
            4vw,
            54px
        );

    font-weight:
        700;

    line-height:
        1.08;
}


.ubex-episode-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0;

    margin-bottom:
        25px;

    color:
        #aaa;

    font-size:
        15px;
}


.ubex-episode-meta span {
    display:
        inline-flex;

    align-items:
        center;
}


.ubex-episode-meta span:not(:last-child)::after {
    content:
        "•";

    margin:
        0 10px;

    color:
        #5f5f5f;
}


.ubex-episode-description {
    max-width:
        760px;

    color:
        #d2d2d2;

    font-size:
        17px;

    line-height:
        1.7;
}


.ubex-episode-description p:first-child {
    margin-top:
        0;
}


.ubex-episode-description p:last-child {
    margin-bottom:
        0;
}


/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/

.ubex-episode-actions {
    margin-top:
        32px;
}


.ubex-episode-back {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        44px;

    padding:
        0 22px;

    border:
        1px solid #666;

    border-radius:
        3px;

    color:
        #fff;

    font-size:
        14px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.ubex-episode-back::before {
    content:
        "←";

    margin-right:
        9px;
}


.ubex-episode-back:hover {
    background:
        #fff;

    border-color:
        #fff;

    color:
        #050505;
}


/*
|--------------------------------------------------------------------------
| Up Next
|--------------------------------------------------------------------------
*/

.ubex-up-next {
    padding-top:
        10px;
}


.ubex-up-next-label {
    margin-bottom:
        12px;

    color:
        #8f8f8f;

    font-size:
        13px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;
}


.ubex-up-next-card {
    display:
        block;

    color:
        inherit;

    text-decoration:
        none;
}


.ubex-up-next-image {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #111;
}


.ubex-up-next-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


.ubex-up-next-card:hover
.ubex-up-next-image img {
    transform:
        scale(1.035);

    opacity:
        0.8;
}


.ubex-up-next-play {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -50%);

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    width:
        48px;

    height:
        48px;

    padding-left:
        3px;

    border:
        2px solid rgba(255,255,255,0.85);

    border-radius:
        50%;

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

    color:
        #fff;

    font-size:
        15px;
}


.ubex-up-next-content {
    padding:
        14px 0 0;
}


.ubex-up-next-content h3 {
    margin:
        0 0 5px;

    color:
        #fff;

    font-size:
        18px;

    font-weight:
        600;

    line-height:
        1.3;
}


.ubex-up-next-content p {
    margin:
        0;

    color:
        #8e8e8e;

    font-size:
        14px;
}


/*
|--------------------------------------------------------------------------
| Trailer
|--------------------------------------------------------------------------
*/

.ubex-episode-trailer {
    padding:
        30px 50px 70px;

    background:
        #080808;
}


.ubex-episode-section-inner {
    width:
        100%;

    max-width:
        1450px;

    margin:
        0 auto;
}


.ubex-episode-trailer h2 {
    margin:
        0 0 22px;

    color:
        #fff;

    font-size:
        25px;

    font-weight:
        600;
}


.ubex-trailer-player {
    width:
        100%;

    max-width:
        900px;

    background:
        #000;
}


.ubex-trailer-player video {
    display:
        block;

    width:
        100%;
}


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

@media (max-width: 1000px) {

    .ubex-episode-info-inner {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .ubex-up-next {
        max-width:
            500px;
    }

}


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

@media (max-width: 700px) {

    .ubex-episode-info {
        padding:
            25px 20px 45px;
    }


    .ubex-episode-info-inner {
        gap:
            35px;
    }


    .ubex-episode-title {
        font-size:
            30px;
    }


    .ubex-episode-meta {
        font-size:
            13px;

        line-height:
            1.7;
    }


    .ubex-episode-meta span:not(:last-child)::after {
        margin:
            0 7px;
    }


    .ubex-episode-description {
        font-size:
            15px;

        line-height:
            1.65;
    }


    .ubex-episode-back {
        width:
            100%;

        justify-content:
            center;
    }


    .ubex-episode-trailer {
        padding:
            20px 20px 50px;
    }

}