/* styles for the media pages goes here */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* Text Styles  */
#media-container .media-works .main .div-media-maincol-wrapper .div-maincol-content .text-maincol-title,
#media-container .media-works .main .div-people-maincol-wrapper .div-maincol-content .text-maincol-title {
    color: #2D2D2D;
    /* Search/H2 */
    font-family: Roboto Condensed;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#breadcrumbs {
    display: none;
}

@media screen and (max-width: 1024px) {
    #media-container {
        padding: 1rem 0rem;
    }
}

@media screen and (min-width: 1024px) {
    #media-container {
        padding: 2rem 2rem;
    }

    .media-works .main {
        display: grid;
        grid-template-columns: min(25%, 600px) 1fr;
        gap: 2rem;
        margin-bottom: 1rem;
    }

    .media-works .title {
        grid-column: span 2/ span 2;
        margin-bottom: 2rem;
    }

    .media-works .main > .div-media-sidebar-wrapper, 
    .media-works .main > .div-media-maincol-wrapper, 
    .media-works .main > .div-media-maincol-wrapper .div-maincol-content, 
    .media-works .main > .div-people-sidebar-wrapper,
    .media-works .main > .div-people-maincol-wrapper, 
    .media-works .main > .div-people-maincol-wrapper .div-maincol-content {
        display: flex;
        flex-direction: column;
        font-size: 1.125rem;
    }

    .media-works .main > .div-media-sidebar-wrapper > .div-sidebar-content, 
    .media-works .main > .div-media-maincol-wrapper > .div-maincol-content,
    .media-works .main > .div-people-sidebar-wrapper > .div-sidebar-content, 
    .media-works .main > .div-people-maincol-wrapper > .div-maincol-content {
        filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.25));
        background-color: #fff;
        border-radius: 10px;
    }

    .div-media-sidebar-wrapper {
        border-radius: 0.25rem;
        overflow: hidden;
    }


}

.media-works .title {
    margin-bottom: 1rem;
}

.media-works .main > .div-media-sidebar-wrapper > .div-sidebar-content, 
.media-works .main > .div-media-maincol-wrapper > .div-maincol-content,
.media-works .main > .div-people-sidebar-wrapper > .div-sidebar-content, 
.media-works .main > .div-people-maincol-wrapper > .div-maincol-content {
    background-color: #fff;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.25));
}

#media-container .profile-pic .content-icon-wrapper {
    --h: 350px;
    background: var(--image-bg-gradient);

    height: var(--h);
    border-radius: 10px 10px 0px 0px;
}

#media-container .profile-pic .content-icon-wrapper a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#media-container img.content-icon {
    padding: 2rem;
    box-sizing: border-box;
}

#media-container .profile-pic img.content-icon {
    display: block;
    width: 300px;
    height: 300px;
    border-radius: 10px 10px 0px 0px;
    position: absolute;

}

#media-container .profile-pic img.content-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 10px 10px 0px 0px;
}

#media-container .profile-pic p.text {
    font-size: 1rem;
    line-height: 130%;
    padding: 0.5rem 1rem;
    border-bottom: var(--border-soft-gray);
}

img.content-icon {
    filter: var(--black-to-white);
}

#media-container img.image {
    background: url("/img/placeholder.png");
    background-size: contain;
}

#media-container .media-works .title > .text-media-title, #media-container .media-works .title > .text-people-title {
    font-family: "Roboto Condensed";
    font-size: 2.5rem;
    font-weight: 700;
    line-height: normal; 
    padding: 0.5rem 1rem;
    gap: 1rem;
}

@media screen and (min-width: 1024px) {
    #media-container .media-works .title > .text-media-title, #media-container .media-works .title > .text-people-title {
        font-size: 4rem;
    }
}

#media-container .media-works > .title > .frame-year-runtime {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0rem 1rem;
    font-size: 1.5rem;
}

#media-container .media-works .email-us-to-revise {
    color: #C90450; 
    font-size: 1rem;
    line-height: 150%;
    text-align: right;
}

.email-us-to-revise span.span {
    color:  #C90450;
    text-decoration: underline;
}

#media-container .media-works .main > .div-media-sidebar-wrapper > .div-sidebar-content, 
#media-container .media-works .main > .div-people-sidebar-wrapper > .div-sidebar-content  
#media-container .media-works .main > .div-media-maincol-wrapper > .div-maincol-content, 
#media-container .media-works .main > .div-people-maincol-wrapper > .div-maincol-content  
{
    display: flex;
    flex-direction: column;
}

.div-maincol-content .mirror,
.div-maincol-content .text-wrapper  {
    font-size: 1.125rem;
}

#media-container .media-works .main > .div-media-sidebar-wrapper > .div-sidebar-content > .frame-sidebar-meta, 
#media-container .media-works .main > .div-people-sidebar-wrapper > .div-sidebar-content > .frame-sidebar-meta {
    display: flex;
    flex-direction: column;
}

#media-container .media-works .main > .div-media-sidebar-wrapper > .div-sidebar-content > .frame-sidebar-meta > .div-meta-element, 
#media-container .media-works .main > .div-people-sidebar-wrapper > .div-sidebar-content > .frame-sidebar-meta > .div-meta-element {
    padding: 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-bottom: var(--border-soft-gray);
}

#media-container .media-works .main > .div-media-sidebar-wrapper > .div-sidebar-content > .frame-sidebar-meta > .div-meta-element > .text-wrapper-meta-header,
#media-container .media-works .main > .div-people-sidebar-wrapper > .div-sidebar-content > .frame-sidebar-meta > .div-meta-element > .text-wrapper-meta-header {
    font-weight: 700;
    font-size: 1.25rem;
}

#media-container .media-works .main > div > div > div.title-wrapper {
    padding: 1rem 1rem;
    border-bottom: 4px solid var(--divider-color);
    font-size: 1.25rem;
}

#media-container .media-works .main > div > div > div.title-wrapper > div[class^="title-"] img {
    width: 1rem;
    height: 1rem;
}

#media-container .media-works .main > div > div > div.searchcards-wrapper > div.searchcards {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
}

#media-container .media-works .main > div > div > div.searchcards-wrapper > div.searchcards > div[class^="frame-"] > img {
    width: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
}

#media-container .media-works .main > div > div > div.searchcards-wrapper > div.searchcards > div[class^="frame-"] > p {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    color: #C90450;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.searchcards-wrapper {
    padding: 1rem;
    container-name: searchcards;
    container-type: inline-size;
}

.searchcards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@container searchcards (min-width: 600px) {
    .searchcards {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@container searchcards (min-width: 900px) {
    .searchcards {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.searchcards img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.searchcards p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1;
}

.searchcards .sidebar-img-caption {
    font-size: 1rem;
    line-height: 130%;
}

#media-container .media-works .main > div > div > [class^="frame-"] > div > div:first-child .flex-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-wrap: wrap;
}

#media-container .media-works .main > .div-media-maincol-wrapper > .div-maincol-content > .title-maincol-wrapper,
#media-container .media-works .main > .div-people-maincol-wrapper > .div-maincol-content > .title-maincol-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 4px solid var(--divider-color);
}

#media-container .media-works .main > div > div > .body > div[class^="frame-"] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#media-container .media-works .main > div > div > div[class^="title-"] img {
    width: 1rem;
    height: 1rem;
}

#media-container .media-works .main > div.div-2 > div.div-5 > div.body-2 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 1024px) {
    #media-container .media-works .main > div.div-2 > div.div-5 > div.body-2 {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
    }
}

#media-container .media-works .main > div.div-2 > div.div-5 > div.body-2 > div {
    padding: 0 1.25rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
}

#media-container .media-works .main > div.div-2 > div.div-5 > div.body-2 > div > div {
    padding: 0.5rem 0;
    border-bottom: var(--border-soft-gray);
    display: grid;
    grid-template-columns: 75px auto;
    gap: 1rem;

}

#media-container .media-works .main > div.div-2 > div.div-5 > div.body-2 > div.div-6 > div {
    padding: 0.5rem 0;
    border-bottom: var(--border-soft-gray);
    display: grid;
    grid-template-columns: 150px auto;
    gap: 1rem;
}

#media-container .media-works .main > div.div-2 > div.div-5 > div.body-2 > div.div-8 > div.cast-card > div.img-wrapper > img.content-icon-2 {
    width: 100%;
    height: 100%;
    background-size: contain;
    border-radius: 0.25rem;
    background: linear-gradient(180deg, rgba(214, 63, 9, 0.30) 0%, rgba(201, 4, 80, 0.30) 100%);
    padding: 1rem;
    box-sizing: border-box;
}

#media-container .media-works .main > div.div-2 > div.div-5 > div.body > div.div-9 > div.title-4 {
    display: flex;
    justify-content: space-between;
    border-bottom: var(--border-soft-gray);
}

@media screen and (min-width: 1024px) {   
    #media-container .media-works .main > div.div-2 > div.div-5 > div.body > div.div-9 > div.title-4 {
        padding: 1rem;
    }
}
    
#media-container .media-works .main > div.div-2 > div.div-5 > div.body > div.div-9 > div.title-4 > img {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

#media-container .media-works .main > div.div-2 > div.div-5 > div.body-2 > div.div-6 > div > div:first-child {
    font-weight: 700;
}

#media-container .media-works .main > div.div-2 > div.div-5 > div.body-2 > div.div-8 > div:first-child {
    font-weight: 700;
}

#media-container .media-works .main > .div-2 > .div-5 > .body > div.div-9 > .frame-12 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 1024px) {
    #media-container .media-works .main > .div-2 > .div-5 > .body > div.div-9 > .frame-12 {
        flex-direction: row;
        justify-content: space-around;
        padding: 1rem;
    
    }
}

#media-container .media-works .main > .div-2 > .div-5 > .body > div > .video-frame, #media-container .media-works .main > .div-2 > .div-5 > .body > div > .polygon-wrapper {
    width: 100%;
    height: 350px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

@media screen and (min-width: 1024px) {
    #media-container .media-works .main > .div-2 > .div-5 > .body > div > .video-frame, #media-container .media-works .main > .div-2 > .div-5 > .body > div > .polygon-wrapper {
        width: calc(100% - 2rem);
        margin: 1rem;
    }
}

#media-container .media-works .main > .div-2 > .div-5 > .body > div {
    border-bottom: var(--border-soft-gray);
    padding: 1rem;
}

#media-container .media-works .main > .div-2 > .div-5 > .body > div > div[class^="title-"] {
    font-weight: 700;
    padding: 0 0 0.5rem 0;
    border-bottom: var(--border-soft-gray);
}

#media-container .media-works .main > .div-2 > .div-5 > .body > div > div[class^="frame-"] {
    padding: 0.5rem 0;
    border-bottom: var(--border-soft-gray);
}

#media-container .media-works .main > .div-2 > .div-5 > .body > .div-9 > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

@media screen and (min-width: 1024px) {
    
    #media-container .media-works .main > .div-2 > .div-5 > .body > .div-9 > div:last-child {
        flex-direction: row;
        justify-content: space-around;
        padding: 0.75rem 0 0 0;
    }
}

#media-container .sidebar-bubbles {
    border-radius: 25px;
    border: 2px solid #D63F09;
    padding: 0.4em 1.25em;
    font-size: 1.125rem;
    background: #FFF;
    color: #D63F09;
}

#media-container a.sidebar-bubbles.searchable-keyword {
    color: #D63F09;
    transition: background-color 100ms linear, color 100ms linear;
}

#media-container .sidebar-bubbles.searchable-keyword:hover {
    text-decoration: none;
    color: #fff;
    background-color: #D63F09;
}

.div-sidebar-content p {
    font-size: 1.25rem;
    line-height: 150%;
    margin: 0;
}

#media-container [class^="external-links"] {
    display: flex;
    gap: 0.5rem;
}

.title-wrapper {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

.bubble-frame {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.5rem;
    padding: 0.5rem 0rem;
}

.collapsible-content [class^="body"] {
    padding: 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.collapsible-content .body > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (prefers-reduced-motion) { 
    button.content-collapse-button {
        transition: none;
    }

    .collapsible-content { 
        transition: none;
    }

}

.collapsible-content .body div[class^="div"] div[class^="title"] {
    border-bottom: var(--border-soft-gray);
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 0.75rem;
}

.collapsible-content .body .video-frame {
    border-bottom: var(--border-soft-gray);
}

.bottom-revise-box {
    grid-column: 2/2;
}

@media screen and (min-width: 600px) {   
    .collapsible-content .cast-crew {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

.cast-crew-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cast-crew-section .cast-crew-section-header {
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom: var(--border-soft-gray);
    padding-bottom: 0.5rem;
}

.cast-crew-position-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cast-crew-position-item {
    display: flex;
    gap: 1rem;
    font-size: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: var(--border-soft-gray);
}

.cast-crew-position-item .position-name {
    font-weight: 700;
    line-height: 150%;
/*    width: 160px;*/
}

.cast-crew-position-item .position-people-list {
    line-height: 150%;
}

.cast-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cast-card {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: var(--border-soft-gray);
    align-items: center;
}

.cast-card .img-wrapper {
    width: 80px;
    height: 80px;
    background: var(--image-bg-gradient);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.cast-card .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cast-card .cast-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#media-container .cast-card .cast-info p {
    font-size: 1.25rem;
}

#media-container .body.description .text-media-maincol {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 150%;
}

#media-container .body.description .frame-media-maincol {
    border-bottom: var(--border-soft-gray);
    padding-bottom: 0.75rem;
}

#media-container .body.description cite {
    padding: .25rem 0rem .25rem 0.6rem;
    font-size: 1rem;
    line-height: 130%;
    border-left: 2px solid #D63F09;
}

#media-container .body [class^="title"] {
    font-size: 1.5rem;
    font-weight: 700;
}

#media-container .body > .frame {
    padding-bottom: 0.5rem;
    border-bottom: var(--border-soft-gray);
}

#media-container .body.distributor-info .flex-container {
    display: flex;
    font-size: 1.25rem;
    gap: 10%;
    flex-wrap: wrap;
    padding: 0.75rem 0;
}

#media-container .body.distributor-info .distributors-list [class^="title"] {
    padding-bottom: 0.5rem;
    border-bottom: var(--border-soft-gray);
}

#media-container .body.distributor-info .distributors-list .frame {
    padding: 0.75rem 0;
    border-bottom: var(--border-soft-gray);
}

#media-container .body.distributor-info .distributors-list .sub-heading {
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: 0.25rem;
}

#media-container .body.screening-info .screening-item {
    padding-bottom: 0.75rem;
    border-bottom: var(--border-soft-gray);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#media-container .body.screening-info .screening-item p {
    font-size: 1.25rem;
}

@media screen and (min-width: 600px) {
    #media-container .body.screening-info .screening-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }    
}

#media-container .body.screening-info .screening-item .frame {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#media-container .body.screening-info .screening-item .screening-type {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: capitalize;
}

#media-container .body.screening-info .screening-item .festival-information p {
    font-weight: 700;
    font-size: 1.25rem;
}

#media-container .body.funding_info .frame-wrapper {
    padding: 0.25rem 0 0.75rem;
    border-bottom: var(--border-soft-gray);
    font-size: 1.25rem;
}

#media-container .body.archive-info .archive-item {
    display: grid;
    grid-template-columns: 2fr 1fr;
    border-bottom: var(--border-soft-gray);
    padding-bottom: 0.75rem;
}

#media-container .body.archive-info .archive-item .archival-item-format {
    display: flex;
    gap: 0.5em;
}

#media-container .body.reference-info .frame-wrapper {
    padding-bottom: 0.75rem;
    border-bottom: var(--border-soft-gray);
    font-size: 1.125rem;
    line-height: 150%;
}

.filmography-list, .episodes-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filmography-list li, .episodes-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: var(--border-soft-gray);
}

.film-poster-wrapper {
    background: var(--image-bg-gradient);
    border-radius: 8px;
    width: 100px;
    height: 150px;
    overflow: hidden;
}

img.film-poster {
    object-fit: contain;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.film-details {
    flex: 1;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 0.1rem 0;
}

.film-details h4 {
    font-size: 1.35rem;
}

.film-details .film-release-year {
    text-align: right;
}

cite, cite a {
    font-style: normal;
}

.frame-sidebar-meta > * {
    padding: 1rem 1rem;
    border-bottom: var(--border-soft-gray);
}

.frame-sidebar-meta .text-maincol-title {
    font-size: 1.25rem;
    font-weight: 700;
    width: 100%;
}

.frame-sidebar-meta .people-metadata-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.frame-sidebar-meta .people-metadata-list .people-metadata-value {
    font-size: 1.125rem;
    line-height: 130%;
}

.frame-sidebar-meta .text {
    font-size: 1.125rem;
    line-height: 130%;
}

#media-container .frame-sidebar-meta .people-metadata-title {
    font-weight: 700;
}

.sidebar-socialmedia .socialmedia-item {
    font-size: 1.25rem;
    padding: .5rem 0rem;
}

.text-wrapper-meta-header .identity-cats {
    padding: 1rem 0rem 0rem;
    border-top: var(--border-soft-gray);
}