/**** ARTICLEVIEWER  ****/


/* der er to "instances" (artikel containere), 
for at lave pæne overgange mellem præsentationer */

#info-article>.instance {
    grid-area: article;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: grid;
}


/* CLEAN */

#info-article>.instance {
    grid-template-columns: 9% 53% auto;
    grid-template-rows: 62% auto;
    grid-template-areas: "media media text" "media media text";
}

#info-article.portraitmode>.instance {
    grid-template-rows: 9% 53% auto;
    grid-template-columns: 62% auto;
    grid-template-areas: "media media" "media media" "text text";
}


/* TITLE BAR */

#info-article .instance.titlecell {
    grid-template-areas: "title media text" "title media text";
}

#info-article.portraitmode .instance.titlecell {
    grid-template-areas: "title title" "media media" "text text";
}


/* TOUCH ADVICE */

.touch-advice #info-article .instance {
    grid-template-areas: "media media text" "ta ta text";
}

.touch-advice #info-article.portraitmode .instance {
    grid-template-areas: "media media" "media media" "text ta";
}


/* TITLE BAR + TOUCH ADVICE */

.touch-advice #info-article .instance.titlecell {
    grid-template-areas: "title media text" "ta ta text";
}

.touch-advice #info-article.portraitmode .instance.titlecell {
    grid-template-areas: "title title" "media media" "text ta";
}


/* FULLSCREEN */

#info-article>.instance.fullscreenlayout {
    grid-template-areas: "both both both" "both both both";
}

#info-article.portraitmode>.instance.fullscreenlayout {
    grid-template-areas: "both both" "both both" "both both";
}


/* FULLSCREEN + TITLE BAR */

#info-article>.instance.titlecell.fullscreenlayout {
    grid-template-areas: "title both both" "title both both";
}

#info-article.portraitmode>.instance.titlecell.fullscreenlayout {
    grid-template-areas: "title title" "both both" "both both";
}


/* FULLSCREEN + TOUCH ADVICE */

.touch-advice #info-article>.instance.fullscreenlayout {
    grid-template-areas: "both both ta" "both both ta";
}

.touch-advice #info-article.portraitmode>.instance.fullscreenlayout {
    grid-template-areas: "both both" "both both" "ta ta";
}


/* FULLSCREEN + TOUCH ADVICE + TITLE BAR */

.touch-advice #info-article>.instance.titlecell.fullscreenlayout {
    grid-template-areas: "title both ta" "title both ta";
}

.touch-advice #info-article.portraitmode>.instance.titlecell.fullscreenlayout {
    grid-template-areas: "title title" "both both" "ta ta";
}


/* fullscreenlayout partition placement */

#info-article .instance.fullscreenlayout #text-partition,
#info-article .instance.fullscreenlayout #overlaytitle,
#info-article .instance.fullscreenlayout .media-partition {
    grid-area: both;
}


/*  color fullscreen text background */

#info-article .instance.no-media #text-partition {
    background-color: rgba(0, 0, 0, 0.25);
}


/* title bar stuff */

#title-partition {
    display: none;
    grid-area: title;
    justify-content: center;
    align-items: center;
    color: white;
}

.titlecell #title-partition {
    /* vis kun når theme title er slået til */
    display: flex;
}


/* ta bar stuff */

#ta-partition {
    display: none;
    grid-area: ta;
    margin: 0;
}

.touch-advice #ta-partition {
    /* vis kun når theme title er slået til */
    display: block;
}


/* DETTE skal ændres så logo kun kan være i top af billedet (måske) */


/*  flyt theme title til højre hvis ventre logo i vejen */

#title-partition .themetitle {
    font-size: var(--HD45px);
    position: absolute;
    transform: rotate(90deg);
    font-weight: bold;
    width: 100vh;
    text-align: left;
    padding: 0 var(--HD75px);
    text-transform: uppercase;
}

#info-article.portraitmode #title-partition .themetitle {
    transform: initial;
    top: initial;
    width: 100vw!important;
    text-align: center;
}

#info-article #overlaytitle {
    display: none;
    color: white;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--HD60px) var(--HD90px);
    /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0) 40%); */
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0) 50%);
}

#info-article .fullscreenlayout #overlaytitle {
    display: none!important;
}

#info-article.portraitmode #overlaytitle {
    display: flex;
}

#info-article .metatitle {
    font-size: var(--HD30px)!important;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #fff;
    margin-bottom: 1.4em;
    margin-top: -10px;
}

#info-article #overlaytitle .metatitle {
    margin-bottom: 1em;
}


/*  plads til theme title hvis logoer i clean/widget+portrait */


/* .clean.logo-on-left .portraitmode #title-partition .themetitle,
.clean.logo-on-right .portraitmode #title-partition .themetitle,
.widgets.logo-on-right .portraitmode #title-partition .themetitle,
.widgets.logo-on-left .portraitmode #title-partition .themetitle {
    padding-top: var(--HD75px)!important;
} */


/**** ARTICLEVIEWER MEDIER ****/

#info-article .media-partition,
#info-article #overlaytitle {
    grid-area: media;
    position: relative;
    overflow: hidden;
}

#info-article .media-partition .inner-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
}


/*  billed teskt */

#info-article .media-partition .caption {
    position: absolute;
    color: #fff;
    font-size: var(--HD18px);
    z-index: 999;
    bottom: 0;
    left: 0;
    padding: 0.7em 0.9em;
    text-align: left;
    max-width: 40%;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 0 var(--HD12px) 0 0;
}

.portraitmode #info-article .media-partition .caption {
    right: 0;
    left: initial;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.8);
    background-color: transparent;
}

#info-article .media-partition .caption.long {
    max-width: initial;
    border-radius: 0;
}


/*  medier i FULLSCREEN */


/* vis fulscreen billedet centreret hvis der ikke er touchadvice */


/*  skal "fittes" via js, se: infoarticle.js panImage() */

#info-article .fullscreenlayout .media-partition .inner-container {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* video */

#info-article video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /* height: auto; */
    object-fit: contain;
}


/* video crop */

#info-article video.crop {
    /* width: auto;
    min-width: 100%;
    min-height: 100%; */
    object-fit: cover;
}


/* video fulscreen fit */

#info-article .fullscreenlayout video {
    width: 100%;
    height: 100%;
}


/* video fulscreen cover */

/* #info-article .fullscreenlayout video.crop {
    width: auto;
    height: auto;
} */


/* image fulscreen fit */

#info-article .fullscreenlayout img {
    width: 100%!important;
    height: 100%!important;
    object-fit: contain;
}


/* image  fulscreen cover */

#info-article .fullscreenlayout img.crop {
    object-fit: cover;
    object-position: 50% 0%;
}


/* margin på fullscreen højkants medier, som ikke passer perfekt i containers aspect ratio */

.inner-container.unfitted-fullscreen-media,
.inner-container.unfitted-fullscreen-media video {
    padding: var(--HD60px);
    min-width: initial !important;
    min-height: initial !important;
}


/* audio */

#info-article audio {
    position: absolute;
    opacity: 0;
}


/**** ARTICLEVIEWER TEXT (NON-FULSCREEN)  ****/

#info-article #text-partition {
    grid-area: text;
    position: relative;
}

#info-article .text-container {
    position: absolute;
    height: 100%;
    width: 100%;
    color: var(--background-text-color);
    line-height: 1.3;
    overflow: hidden;
    padding: var(--HD90px);
}

.portraitmode #info-article .text-container {
  
    padding: var(--HD75px) var(--HD90px);
}

#info-article .fullscreenlayout .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* LOGO ADJUSTMENTS */


/* centrer vertikal theme title */

.logo-on-left #title-partition .themetitle {
    text-align: center;
}


/* ekstra top-padding når der er højre-logo (tekst til højre) */

.logo-on-right #info-article .text-container {
    padding-top: var(--HD120px);
}

.portraitmode .logo-on-right #info-article .text-container {
    padding-top: var(--HD75px);
}


/* no media landscabe no reason for logo space - reset padding */

#info-article .instance.no-media .text-container {
    /* padding: var(--HD300px); */
    padding: var(--HD150px) var(--HD300px)
}

.touch-advice #info-article .instance.no-media .text-container {
    padding: var(--HD180px);
}


/* no media men portraitmode - reset padding */

.portraitmode #info-article .instance.no-media .text-container {
    padding: var(--HD150px);
}


/* TEXT STØRRELSER I HD */

#info-article #text-partition .title {
    font-size: 70px;
    font-weight: bold;
    margin-bottom: .5em;
    line-height: 1.2;
}

#info-article #overlaytitle .title {
    font-size: var(--HD75px);
    font-weight: bold;
    margin-bottom: 0;
    line-height: 1em;
}


/* gem std. meta-title hvis portrait mode, har titlecell, eller ikke "active" */

#info-article.portraitmode #text-partition .title,
#info-article #text-partition .metatitle,
#info-article.portraitmode #text-partition .metatitle.active,
#info-article .titlecell .metatitle {
    display: none;
}


/* vis std. meta-title hvis "active" eller "active" + portrait mode + kun tekst */

#info-article #text-partition .metatitle.active,
#info-article.portraitmode .fullscreenlayout #text-partition .metatitle.active {
    display: block;
}

#info-article .fullscreenlayout #text-partition .title {
    display: block;
}

#info-article #text-partition .text {
    font-size: 32px;
    line-height: 1.3;
    font-weight: thin;
}


/* datamanchet er depricated - vi bruger kun manchet fra 1.11  */

#info-article .datamanchet {
    font-weight: normal;
    /* font-size: 1.1em; */
    margin-bottom: 1.2em;
    /* border-top: 2px rgba(255, 255, 255, 0.3) dotted;
    border-bottom: 2px rgba(255, 255, 255, 0.3) dotted; */
    /* padding: .6em 0; */
}

#info-article .datamanchet div {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px rgba(255, 255, 255, 0.3) dotted;
    padding: .2em 0;
}

#info-article .datamanchet .right {
    text-align: right;
}



#info-article .manchet {
    font-weight: bold;
    margin-bottom: 1em;
    line-height: 1.5em;
}

#info-article .datamanchet .time,
#info-article .manchet .time {
    margin-left: 0.3em;
}

#info-article .manchet .location .pin.material-icons {
    font-size: 1.15em;
    vertical-align: -4px;
    margin-right: 0.2em;
    margin-left: -0.2em;
}


/* lange location tekster */
#info-article .manchet .long {
    font-size: 0.7em;
    font-style:italic;
}
#info-article .manchet .long .location .material-icons.arrow{
    font-size: 0.7em;
    font-weight: bold;
}




#info-article .manchet .time::before {
    content: '\2022 ';
    margin-right: 0.3em;
}



#info-article .manchet .no-break {
    white-space: nowrap;
}

#info-article .manchet p,
#info-article .datamanchet p {
    margin: 0em;
}


/* Links i brødtekst */

.weburl {
    font-size: 0.4em;
}


/* calendar provider logo (kultunaut) */

#info-article .provider-logo {
    position: absolute;
    bottom: var(--HD30px);
    right: var(--HD30px);
    width: var(--HD120px);
}

#info-events .provider-logo {
    height: 1em;
    margin-left: 0.3em;
    width: var(--HD150px);
    min-width: var(--HD150px);
}

#info-events .provider-logo img,
#info-article .provider-logo img {
    width: 100%;
}

#info-article .btn-expand {
    display: none;
}

#info-article .dymo1,
#info-article .dymo2 {
    display: none;
}


/* BOOK STUFF */


/* bog cover modifikationer til media-container */

#info-article .book {
    position: absolute;
    width: 95%;
    height: 95%;
    background-size: contain;
    background-position: 50% 50%;
    /* scalering overskrives af animation */
    transform: scale(0.8);
}

#info-article .book.back {
    filter: blur(1px) brightness(80%);
}



.logo-on-left #info-article .book {
    margin-top: var(--HD18px);
}

#info-article .bookbg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    filter: blur(40px) brightness(70%);
    /* scalering overskrives af animation */
    transform: scale(1.1);
}