/*
    Author: Ludovic Dieu
    Description: The styles for this application
    Date: 17.06.2022 / V1.1
*/

/*
    General styling
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --color-accent: rgb(38, 131, 156);
    --color-gray  : rgb(243, 243, 243);
}


html {
    scroll-behavior: smooth;
}

body {
    margin     : 0;
    font-family: Arial, Helvetica, sans-serif
}

#view {
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : column;
    margin         : auto;
    width          : 75%;
}

#view h1 {
    text-align: center;
}

#about,
#browse {
    background-color: var(--color-gray);
    border          : 1px solid black;
    width           : 20%;
    height          : 3em;
    transition      : background-color, 200ms;
}

#about:hover,
#browse:hover,
#about:active,
#browse:active {
    cursor          : pointer;
    background-color: var(--color-accent);
    color           : white;
}

/*
    Styling for the "Browse" view
*/
#inputs {
    margin-top     : 1em;
    width          : 60%;
    display        : flex;
    justify-content: center;
    flex-direction : column;
    gap            : 1em;
}

#inputs-search {
    display        : flex;
    justify-content: center;
    gap            : 1em;
    height         : 2em;

}

#input-text {
    border   : 1px solid var(--color-accent);
    font-size: 11pt;
    flex     : 2;
}

#input-submit,
#input-now-playing {
    background-color: var(--color-gray);
    border          : 1px solid black;
    transition      : background-color 200ms;
}

#input-submit:hover,
#input-now-playing:hover {
    background-color: var(--color-accent);
    border          : 1px solid black;
    color           : white;
}

#input-submit {
    flex: 0.5;
}

#input-now-playing {
    align-self: center;
    width     : 50%;
    height    : 4em;
}

#result {
    margin-top     : 2em;
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-direction : column;
    margin-bottom  : 10em;
}

#loadMore {
    margin          : 2em;
    height          : 2em;
    width           : 30%;
    background-color: var(--color-gray);
    color           : black;
    border          : 1px solid black;
    transition      : background-color 200ms;
}

#loadMore:hover {
    background-color: var(--color-accent);
    color           : white;

}

/*
Styles for the individual movies & tv-shows
*/

.content {
    width     : 80%;
    border-top: 1px solid black;

}

.summary-text {
    display       : flex;
    flex-direction: row;
    gap           : 2em;
    justify-self  : flex-start;
}


.title,
.date {
    font-size  : 20pt;
    font-weight: bold;
    flex       : 1;
}

.content summary {
    display: flex;
}

.content .summary-container {
    width          : 100%;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    list-style     : none;
    overflow       : hidden;
}

/*
Remove the default arrow on the left, add my own on the right  
*/
.content summary::-webkit-details-marker {
    display: none;
}

.content summary::after {
    margin   : 0;
    font-size: xx-large;
    content  : "▲";
}

.content[open] summary::after {
    margin   : 0;
    font-size: xx-large;
    content  : "▼";
}

.general {
    display        : flex;
    flex-direction : row;
    margin-top     : 1em;
    align-items    : center;
    justify-content: space-between;
}

.img-banner {
    justify-self: flex-end;
    align-self  : flex-end;
    margin      : 0;

    /*  the parallax effect */
    background-attachment: fixed;
    background-position  : center;
    background-repeat    : no-repeat;
    background-size      : cover;
    z-index              : -1;

    height: 8vw;
    width : 40vw;
}

.img-fullsize {
    width : 60%;
    height: auto;

}

.trailer {
    align-self  : center;
    justify-self: center;
    margin      : 5px
}

.description {
    font-size: 16pt;
    width    : 55%;
}


hr {
    width : 75%;
    margin: 2em;
}

/*
Styles for the cast cards
Inspiration from : 
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_cards
*/

.cast-img {
    height      : auto;
    width       : 75%;
    justify-self: center;
    align-self  : center;
}

.cast-card {
    box-shadow    : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition    : 0.3s;
    width         : 30%;
    display       : flex;
    flex          : 1 1 auto;
    flex-direction: column;
    padding       : 1rem;
    border-radius : 0.5em;
}

.cast-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.cast-card-container {
    padding: 2px 10px;
}

.cast-list {
    display   : flex;
    flex-wrap : wrap;
    list-style: none;
    margin    : 0;
    padding   : 0;
}

.cast-list li {
    display       : flex;
    flex-direction: row;
    padding       : 0.7rem;
    width         : 50%;

}

/*
Media queries to adjust the number of cards in a row
*/
@media(min-width: 35rem) {
    .cast-list li {
        width: 33%;
    }
}

@media(min-width: 55rem) {
    .cast-list li {
        width: 25%;
    }
}

@media(min-width: 70rem) {
    .cast-list li {
        width: 20%;
    }
}

/*
Styles for the about page
*/
#about-text {
    margin-top   : 2em;
    margin-bottom: 2em;
    width        : 75%;

}

#mapcontainer {
    width        : max(42vw, 350px);
    height       : max(27vw, 250px);
    margin-bottom: 3em;
}

/*
Styles for the footer
*/
footer {
    z-index         : 10;
    bottom          : 0;
    width           : 100%;
    text-align      : center;
    position        : fixed;
    padding-top     : 1.5em;
    padding-bottom  : 1.5em;
    background-color: rgb(168, 167, 167);
    transition      : background-color 200ms;
}

footer ul {
    padding-left   : 0;
    list-style     : none;
    flex-wrap      : wrap;
    display        : flex;
    flex-direction : row;
    justify-content: space-evenly;
    align-items    : center;
}

footer ul li {
    margin: 1em;
}

footer ul li a {
    color          : black;
    text-decoration: underline;
    transition     : background-color 200ms;
}

footer:hover,
footer:hover ul li a {
    color           : white;
    background-color: var(--color-accent);
}


/*
    Dynamic styling for smaller screens
*/
@media screen and (max-width: 900px) {

    #view {
        width: 85%;
    }

    .summary-container {
        align-items: center;
    }

    .summary-text {
        flex-direction: column;
        gap           : 0.5em;
        max-width     : 50%;
        font-size     : 14px;
    }

    .title {
        margin-bottom: 0;
    }

    .general {
        flex-direction: column;
    }

    .img-banner {
        height: 200px;
    }

    .trailer {
        width       : 60vw;
        height      : auto;
        aspect-ratio: 16 / 9;
        margin      : 0;
        margin-top  : 1em;

    }

    .img-fullsize {
        width : 50%;
        height: auto;
    }
}