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

/*************** ARTICLE **************/

/*********** (mobile first) ***********/

#article {
    z-index: 90;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    color: #fff;
    overflow: auto;
}

#article .bg, #listmenu .bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    /* background: rgba(0, 0, 0, 0.767); */
}

#article .content {
    padding: 30px;
    background: #000;
    border: 4px solid #fff;
    border-radius: 5px;
    min-height: 100%;
}

#article .title {
    /* font-size: 2.5rem; */
    margin-bottom: 20px;
    font-weight: 700;
}

#article .text {
    /* font-size: 1.6rem; */
    line-height: 1.5em;
}

#article .shorttext {
    font-weight: bold;
    margin-bottom: 1em;
}

#article .shorttext p {
    margin: 0;
}

#article .btn-close, #fullscreen .btn-close, #textinput .btn-close {
    text-align: center;
    position: fixed;
    right: 0;
    top: 0;
    width: 50px;
    height: 40px;
    line-height: 45px;
    border-radius: 0 0 0 15px;
    background: #000;
    color: #fff;
    z-index: 900;
}

/* #article .btn-close img, #fullscreen .btn-close img, #textinput .btn-close img {
    height: 12px;
} */

/* #article .btn-close:active, #fullscreen .btn-close:active, #textinput .btn-close:active {
    background: #fff;
} */

#article .more-container {
    margin-top: 20px;
}

/*  more buttons */

#article .more-container .btn {
    height: 40px;
    /* color: #000; */
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

/* ARTICLE AUTHOR */

#article .author {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    /* mobile */
    height: 40px;
    margin-bottom: 20px;
}

#article .author img {
    width: var(--HD60px);
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    /* mobile */
    width: 40px;
}

#article .author .author-texts {
    padding-left: 1em;
    line-height: 1.4em;
    /* mobile */
    font-size: 15px;
}

#article .author .author-title {
    font-style: italic;
    opacity: 0.7;
}

/* ARTICLE MEDIA */

#article .slide {
    display: block;
    margin: 20px 0 0px 0;
}

#article .slide img, #article .slide video {
    width: 100%;
    background: #000;
}

#article .slide .caption {
    font-size: 1.2rem;
}

#article .audio .caption {
    bottom: 0;
}

#article .slide .video-container, #article .slide .audio-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#article .slide .audio-container {
    position: absolute;
    height: 100%;
    width: 100%;
    /* background: #000; */
    background-image: url("../../images/audio.png");
    background-size: cover;
}

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

/*********** EXPLICIT MOBILE & TABLET ************/

/* ting vi ikke gider/kan reverse i desktop mode */

@media (max-width: 900px) {
    #article .content {
        background: var(--article-bg-color);
    }
    #article .slide .caption {
        color: var(--article-text-color);
    }
    #article .more-container .btn .icon {
        margin-right: 10px;
    }
    #article .slide .caption {
        margin-top: 10px;
    }
    #article .cscroll-pane {
        display: none;
    }
    #article .slide .audio-container {
        position: relative;
        height: initial;
        background-image: none;
    }
}

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

/************* (TABLET) ************/

@media (min-width: 480px) and (max-width: 899px) {
    #article .slider {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #article .slide {
        width: calc(50% - 10px);
    }
    #article .more-container {
        display: flex;
        justify-content: flex-start;
        flex-direction: row-reverse;
    }
    #article .more-container {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    #article .more-container .btn {
        width: calc(50% - 10px);
    }
}

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

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

@media (min-width: 900px) {
    #article {
        padding: 0;
    }
    #article .content {
        padding: 0;
        background: none;
        border-radius: 0;
        border: initial;
        display: grid;
        grid-gap: var(--HD21px);
        grid-template-columns: auto 31.25vw auto auto;
        grid-template-rows: auto 31.25vw auto;
        grid-template-areas: ". year year close" ". texts media thumbs" ". buttons . .";
        height: 100%;
        width: 100%;
        justify-content: center;
        align-content: center;
    }
    #article.no-media .content {
        grid-template-rows: auto auto auto;
    }
    #article .text-container {
        grid-area: texts;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--HD60px);
    }
    #article.no-media .text-container {
        max-height: 70vh;
    }
    /* ARTICLE FONT SIZES */
    #article .title {
        font-size: var(--HD36px);
        margin-top: -4px;
        margin-bottom: var(--HD24px);
    }
    #article .text {
        overflow: scroll;
        font-size: var(--HD24px);
        line-height: 1.4em;
        width: 100%;
    }
    /* ARTICLE AUTHOR */
    #article .author {
        height: var(--HD60px);
        margin-bottom: var(--HD24px);
    }
    #article .author img {
        width: var(--HD60px);
    }
    #article .author .author-texts {
        font-size: var(--HD21px);
    }
    /* ARTICLE BOOK */
    #article #bookdata {
        font-size: .8em;
        margin-bottom: 1em;
        line-height: 1.6em;
        opacity: 0.9;
    }
    #article #bookdata div {
        border-bottom: 1px dashed var(--article-ruler-color);
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.1em;
        text-align:right;
    }
    #article #bookdata .bookdatatype {
        font-weight: bold;
        font-size: .9em;
        padding-right:2em;
    }

    #article #bookdata div .arrow {
        font-weight: bold;
        font-size: .7em;
        
    }

    #article #bookdata .home {
        color: var(--yes);
        font-weight: bold;
    }
    #article #bookdata .onloan {
        color: var(--no);
        font-weight: bold;
    }
    #article #bookdata .nearby {
        color: var(--maybe);
        font-weight: bold;
    }
    #article #bookdata .time {
        margin-left:0.4em;
    }

    /* ARTICLE MEDIA */
    #article .media-container {
        grid-area: media;
        position: relative;
        /* default bredde for ikke croppede medier */
        width: 31.25vw;
    }
    #article .slide {
        margin: 0;
        width: 100%;
    }
    /* cropped slide */
    #article .slide.crop {
        width: 31.25vw;
        height: 31.25vw;
    }
    #article .slide.crop img, #article .slide.crop video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 0%;
    }
    #article .slide.crop .video-container {
        height: 100%;
    }
    #article .slide .caption {
        font-size: var(--HD15px);
        color: #fff;
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        padding: var(--HD21px) 0;
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
    }
    #article .to-bg-image.slide .caption {
        /* tekst ind over billedet ved crops */
        bottom: 0;
        padding: var(--HD21px);
    }
    /* image with sound */
    #article .slide .sound{
        position: absolute;
        top: 0;
        right: 0;
        padding: var(--HD12px);
        margin: var(--HD12px);
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }
    /* close button */
    #article .btn-close, #fullscreen .btn-close, #textinput .btn-close {
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        /* placering i top */
        font-size: var(--HD36px);
        right: var(--HD36px);
        top: var(--HD36px);
        width: 2em;
        height: 2em;
        border-radius: 50%;
        background:none;
        border: 2px solid #fff;
        /*  placering i bund */
        /* top: initial;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        font-size: var(--HD45px);
        width: var(--HD90px);
        height: var(--HD90px);
        border-radius: 0; */
    }
    /* year */
    #article .year {
        grid-area: year;
        font-size: var(--HD45px);
        text-align: right;
        line-height: 0.7em;
        pointer-events: none;
    }
    #article.no-media .year {
        margin-right: var(--HD21px);
    }
    /*  thumbs */
    #article .thumb-container {
        grid-area: thumbs;
        position: relative;
        margin-left: -2px;
        margin-top: -2px;
        padding-top: 2px;
        overflow: scroll;
    }
    #article .thumb {
        width: var(--HD75px);
        margin: 0 var(--HD18px) var(--HD21px) 2px;
        transition: box-shadow .2s;
        box-shadow: 0 0 0px #fff;
    }
    #article .thumb.active {
        /* border: 3px solid #fff; */
        box-shadow: 0px 0px 0px 2px var(--element-text-color-secondary);
    }
    #article .thumb img, #article .thumb video {
        width: 100%;
        background: #000;
    }
    #article .thumb .flash {
        box-shadow: 0px 0px 4px;
    }
    /* cropped thumbs */
    #article .thumb.crop {
        height: var(--HD75px);
        object-position: 100% 0;
        overflow: hidden;
    }
    #article .thumb.crop img, #article .thumb.crop video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 0%;
    }
    #article .thumb .caption {
        display: none;
    }
    #article .more-container {
        grid-area: buttons;
        display: flex;
        justify-content: flex-start;
        flex-direction: row-reverse;
        margin: 0;
    }
    #article .more-container .btn {
        height: var(--HD75px);
        min-width: var(--HD75px);
        margin-left: var(--HD21px);
        font-size: var(--HD21px);
        margin-bottom: 0;
        justify-content: space-evenly;
    }
    #article .more-container #btn-links, #article .more-container #btn-wayfinding, #article #btn-reserve, #article .more-container #btn-pollresult {
        padding: 0 var(--HD18px);
    }
    #article .more-container .btn .icon {
        font-size: var(--HD36px);
    }
    #article .more-container .btn .txt {
        margin: 0 var(--HD9px);
    }
    #article .more-container #btn-pollresult.disabled {
        opacity: .5;
    }
    #article .clear {
        clear: both;
    }
    /* poll */
    #article .poll-text {
        display: none;
        font-size: var(--HD18px);
        margin-bottom: 1em;
    }
    #article .pollchoice {
        width: calc(100% - 3px);
        color: #000;
        margin-bottom: var(--HD12px);
        display: flex;
        align-items: center;
        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.3);
    }
    #article .pollchoice .square {
        background: rgba(0, 0, 0, 0.1);
        width: var(--HD18px);
        height: var(--HD18px);
        margin: 0 var(--HD15px);
        flex-shrink: 0;
        border-radius: 50%;
        border: 2px solid #000;
    }
    #article .pollchoice .text {
        padding: var(--HD9px);
        padding-right: var(--HD90px);
    }
    #article .pollchoice.active {
        background: #000;
        color: #fff;
    }
    #article .pollchoice.active .square {
        background: #000;
        color: #fff;
        background: #fff;
        border: 2px solid #fff;
    }
    #article .pollchoice .resultpct {
        position: fixed;
        right: var(--HD12px);
    }
    #article .pollchoice .resultbar {
        background: var(--element-text-color-secondary);
        position: fixed;
        height: var(--HD9px);
        width: 0%;
        right: 0;
        bottom: 0;
        border-radius: 6px 0 0 0;
        border-top: rgba(0, 0, 0, 0.2) solid 1px;
        border-left: rgba(0, 0, 0, 0.2) solid 1px;
    }
    #article #resultloader {
        opacity: 0;
        pointer-events: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #article #resultloader .loadtext {
        color: #fff;
        margin-top: 50px;
    }
    #article #resultloader .spinner {
        margin: -30px 0 0 0;
    }
    #article .cscroll-pane {
        width: 2px;
        position: absolute;
        right: var(--HD36px);
        height: 200px;
        top: 100px;
        background: var(--article-scrollpane-color);
    }
    #article .cscroll-thumb {
        width: 2px;
        /* left: -1px; */
        position: absolute;
        background: var(--article-text-color);
        opacity: 0.12;
        touch-action: none;
    }
}

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

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

@media (min-width: 900px) and (orientation: portrait) {
    #article .content {
        grid-template-columns: auto 30vh auto;
        grid-template-rows: auto auto 30vh auto;
        grid-template-areas: ". year ." ". media thumbs" ". texts thumbs" ". buttons .";
    }
    #article.no-media .content {
        grid-template-rows: auto auto auto auto;
    }
    /* høje billeder (ikke croppet) klippes i bunden (bøger) */
    #article .media-container {
        /* max-width: initial; */
        max-height: 42vh;
        overflow: hidden;
        width: initial;
    }
    /* crop billede størrelse */
    #article .slide.crop {
        height: 30vh;
        width: 30vh;
    }
    #article .slide .caption {
        /* tekst ind over billedet ved både cropped og full */
        bottom: 0;
        padding: var(--HD21px);
    }
    #article.no-media .year {
        margin: 0;
        line-height: 0;
    }
}