/*********************************************/

/*********** BASIC HORIZONTAL ***********/

#basic-h,
#basic-V {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding-bottom: 30px;
    overflow: auto;

}

#basic-h {
    /* tykkelse på boghylde */
    --shelfHeight: var(--HD30px);
}

#basic-h.singlerow {
    /* tykkelse på boghylde i singlerow */
    --shelfHeight: var(--HD45px);
}

#basic-h h2,
#basic-v h2 {
    text-align: center;
    color: var(--background-text-color);
    font-size: var(--HD75px);
    text-transform: uppercase;
}

#basic-h h2 {
    margin: var(--HD75px) auto var(--HD36px) auto;
}

#basic-h .content {
    position: fixed;
    top: var(--HD150px);
    left: 0px;
    bottom: var(--HD90px);
    right: 0px;
    overflow: auto;
    /* background: #000; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#basic-h .content .row {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    align-items: flex-end;
    flex-grow: 0;
    min-width: 100%;
    justify-content: center;
    padding: 0 var(--HD90px);
}

#basic-h .articles,
#basic-v .articles {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#basic-h .article,
#basic-v .article {
    border: 5px #fff solid;
    border-radius: 5px;
    margin: 7px;
    width: 60vw;
    height: 60vw;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
}

#basic-h .article .title,
#basic-v .article .title {
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    text-align: center;
}

#basic-h .article .title>span,
#basic-v .article .title>span {
    display: flex;
    align-self: center;
    margin: 0.5em;
}

#basic-h .article .event-label,
#basic-v .article .event-label {
    position: absolute;
    margin-top: 0;
    transform: translateY(-100%);
    left: 0;
    right: 0;
    background-color: var(--image-overlay-color-transp);
    color: var(--image-overlay-text-color);
    font-size: 1.2rem;
    padding: var(--HD9px) var(--HD15px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    backdrop-filter: blur(2px);
}

#basic-h .article .event-label .date,
#basic-v .article .event-label .date {
    font-weight: bold;
    flex-grow: 0;
}

#basic-h .article .event-label .date .time,
#basic-v .article .event-label .date .time {
    display: none;
}

#basic-h .article .event-label .location,
#basic-v .article .event-label .location {
    font-size: 0.7em;
    flex-grow: 0;
}

#basic-h .article .image,
#basic-v .article .image {
    border-radius: 0;
    width: initial;
    height: initial;
    /* background-position: 50% 20%;
    background-size: cover; */
}

#basic-v .article .image {
    background-position: 50% 20%;
    background-size: cover;
}

#basic-h .article .no-img,
#basic-v .article .no-img {
    background-color: rgba(0, 0, 0, 0.4);
}


#basic-h .article .mediacrop,
#basic-v .article .mediacrop {
    object-fit: cover;
    object-position: 50% 0%;
    width: 100%;
    height: 100%;
}

#basic-h .article .play-icon,
#basic-v .article .play-icon {
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 1em));
}

/* bookshelf articles */

#basic-h.bookshelf .articles,
#basic-v.bookshelf .articles {
    justify-content: center;
    align-items: flex-end;
}

#basic-h .book,
#basic-v .book {
    width: auto;
    height: auto;
    margin: 25px 7px;
}

#basic-h .book img,
#basic-v .book img {
    max-width: 140px;
    max-height: 180px;
    display: block;
    box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.8);
    opacity: 0;
}

#basic-h .book .title,
#basic-h .book .author,
#basic-h .book .type-label,
#basic-v .book .title,
#basic-v .book .author,
#basic-v .book .type-label {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 0 7% 0 8%;
}

#basic-h .book .title,
#basic-v .book .title {
    top: 25%;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
}

#basic-h .book .author,
#basic-v .book .author {
    bottom: 10%;
    color: #999;
    font-weight: normal;
    font-size: 0.9em;
}

#basic-h .book .type-label,
#basic-v .book .type-label {
    width: auto;
    max-width: 100%;
    right: 0;
    bottom: 20%;

    font-weight: bold;
    font-size: 0.9em;
    padding: 1em;
}

#basic-h .shelf,
#basic-v .shelf {
    height: 18px;
    width: 100vw;
    left: 0;
    background: #333;
    display: block;
    z-index: 999;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.6) 100%);
    box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    pointer-events: none;
}

#basic-h .shelf {
    position: fixed;
}

#basic-v .shelf {
    position: absolute;
}

#basic-h .filler,
#basic-v .filler {
    display: none;
}

#basic-h .ghostbook,
#basic-v .ghostbook {
    display: none;
}

#basic-h .provider-logo,
#basic-v .provider-logo {
    position: fixed;
    right: var(--HD30px);
    top: var(--HD30px);
    width: var(--HD210px);
}

#basic-h .provider-logo img,
#basic-v .provider-logo img {
    width: 100%;
}

/***************************************/

/********* (Tablet) *********/

@media (min-width: 480px) and (max-width: 899px) {

    #basic-h .article,
    #basic-v .article {
        width: 40vw;
        height: 40vw;
    }

    #basic-h .article .title,
    #basic-v .article .title {
        font-size: 2.5vw;
    }
}

/***************************************/

/********* (DESKTOP LANDSCAPE) *********/

@media (min-width: 900px) {

    /************************/
    /***** BASIC *******/
    #basic-h,
    #basic-v {
        display: flex;
        flex-direction: column;
        /* justify-content: safe center; */
        align-content: center;
        padding: 0;
    }

    #basic-h h2 {
        font-size: var(--HD45px);
        margin: var(--HD90px) auto var(--HD36px) auto;

    }

    #basic-v h2 {
        font-size: var(--HD45px);
        transform: rotate(90deg);
        z-index: 9999;
        position: fixed;
        transform-origin: 0% 0%;
        top: var(--HD30px);
        left: calc(1em + var(--HD15px));
        text-align: left;
        max-width: 90vh;
        display: flex;
        align-items: flex-end;
        height: 1em;
    }

    #basic-h .articles,
    #basic-v .articles {
        flex-direction: row;
        justify-content: center;
        align-content: flex-start;
        margin: 0 7vw;
        margin-bottom: auto;
    }

    #basic-v .articles.column-3 {
        margin-left: auto;
        margin-right: auto;
        width: calc(3.5 * var(--HD360px))
    }

    #basic-v .articles.column-2 {
        margin-left: auto;
        margin-right: auto;
        width: calc(2.5 * var(--HD360px))
    }


    #basic-v .articles {
        margin-top: var(--HD120px);
    }

    #basic-h .article,
    #basic-v .article {
        width: var(--HD360px);
        height: var(--HD360px);
        margin: var(--HD15px);
        position: relative;
        grid-template-columns: 1fr;
        grid-template-rows: 3fr 1fr;
        /*image , title*/
        border: none;
    }

    #basic-v .article:last-child {
        margin-bottom: var(--HD120px);
    }

    #basic-h .article .image,
    #basic-v .article .image {
        background-color: #000;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }

    #basic-h .article .title,
    #basic-v .article .title {
        font-size: var(--HD24px);
    }

    #basic-h .article .event-label,
    #basic-v .article .event-label {
        font-size: var(--HD21px);
        /* padding: var(--HD9px) var(--HD15px); */
    }

    /* BOOKSHELF BASIC */
    #basic-h .book {
        display: flex;
        justify-content: center;
        width: var(--HD240px);
        margin: var(--HD30px);
        margin-bottom: var(--shelfHeight);
    }

    #basic-v .book {
        margin: var(--HD30px);
        margin-top: var(--HD15px);
        margin-bottom: var(--HD75px);
    }

    #basic-h .book img,
    #basic-v .book img {
        max-width: var(--HD240px);
        max-height: calc(var(--HD360px) - var(--HD15px));
    }

    /*  SINGLE ROW BOOKSHELF */
    #basic-h.singlerow .articles {
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: nowrap;
        margin-top: auto;
    }

    #basic-h.singlerow .book {
        /* skaleres via js */
        width: initial;
    }

    #basic-h.singlerow .book img {
        /* skaleres via js */
        max-width: none;
        max-height: none;
    }

    /* faker slut margin i singlerow */
    #basic-h.singlerow .ghostbook {
        display: initial;
    }

    #basic-h.singlerow .ghostbook img {
        width: 7vw;
        height: 10px;
        opacity: 0;
    }

    #basic-h.singlerow .shelf {
        position: fixed;
    }

    #basic-h .book .title,
    #basic-v .book .title {
        font-size: var(--HD24px);
    }

    #basic-h .book .author,
    #basic-v .book .author {
        font-size: var(--HD15px);
    }

    #basic-h .book .type-label,
    #basic-v .book .type-label {
        font-size: var(--HD15px);
    }

    #basic-h .shelf {
        height: var(--shelfHeight);
    }

    #basic-v .shelf {
        height: var(--HD36px);
    }

    #basic-h .filler,
    #basic-v .filler {
        display: initial;
        height: var(--HD120px);
        width: 100%;
    }
}

/***************************************/

/********** (DESKTOP PORTRAIT) *********/

@media (min-width: 900px) and (orientation: portrait) {
    /* ikke noget.. :) */
}