/* =========================================================
   MOVIEBOX SINGLE PAGE - STEP 1
   Info / Cast / Links Tabs
   ========================================================= */


/* ---------------------------------------------------------
   Tab Buttons
--------------------------------------------------------- */

.moviebox-single-tabs {
    width: 100%;
    margin: 10px 0 15px;
}

.moviebox-tab-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.moviebox-tab-button {
    appearance: none;
    -webkit-appearance: none;

    border: 0 !important;
    outline: none !important;

    background: #ffcc00 !important;
    color: #242424 !important;

    padding: 10px 18px !important;

    border-radius: 6px !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.moviebox-tab-button:hover {
    background: #303030 !important;
    color: #fff !important;
}

.moviebox-tab-button.active {
    background: #e50914 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   Tab Content
--------------------------------------------------------- */

/*
 * JavaScript adds .moviebox-tab-visible
 * when a tab is opened.
 */

.moviebox-tab-content {
    display: none !important;

    width: 100%;

    margin: 0 !important;
}

.moviebox-tab-content.moviebox-tab-visible {
    display: block !important;
}


/* ---------------------------------------------------------
   Prevent old Dooplay tab behavior from showing content
--------------------------------------------------------- */

#info.moviebox-tab-content,
#cast.moviebox-tab-content {
    visibility: hidden;
    opacity: 0;

    height: 0;
    overflow: hidden;
}

#info.moviebox-tab-content.moviebox-tab-visible,
#cast.moviebox-tab-content.moviebox-tab-visible {
    visibility: visible;
    opacity: 1;

    height: auto;
    overflow: visible;
}


/* ---------------------------------------------------------
   Mobile
   3 buttons per row
--------------------------------------------------------- */

@media (max-width: 600px) {

    .moviebox-single-tabs {
        width: 100% !important;

        margin: 5px 0 10px !important;
    }

    .moviebox-tab-buttons {
        display: grid !important;

        grid-template-columns: repeat(3, 1fr);

        gap: 7px !important;

        width: 100% !important;
    }

    .moviebox-tab-button {
        width: 100% !important;

        min-width: 0 !important;

        padding: 10px 5px !important;

        border-radius: 6px !important;

        font-size: 16px !important;

        text-align: center;
        white-space: nowrap;
    }

}





/* =========================================================
   STEP 2 - CAST / DIRECTOR GRID
   ========================================================= */

/* Cast & Director container */
#cast .persons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

/* Individual person */
#cast .persons > * {
    min-width: 0;
}

/* Mobile - 4 persons per row */
@media (max-width: 600px) {

    #cast .persons {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

}


/* =========================================================
   STEP 2 FIX - CAST / DIRECTOR NAME
   ========================================================= */

@media (max-width: 600px) {

    /* Person item */
    #cast .persons > * {
        width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Person image */
    #cast .persons > * img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        object-fit: cover;
    }

    /* Person name / information */
    #cast .persons > * .data,
    #cast .persons > * .name,
    #cast .persons > * .title,
    #cast .persons > * h3,
    #cast .persons > * h4 {
        display: block !important;

        width: 100% !important;

        height: auto !important;

        margin: 6px 0 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        visibility: visible !important;
        opacity: 1 !important;

        color: #fff !important;

        font-size: 12px !important;
        line-height: 1.3 !important;

        text-align: center !important;
    }

}