/*
    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
    Copyright (C) 2025 metamuffin <metamuffin.org>
    Copyright (C) 2023 tpart
*/
.backdrop {
    width: calc(100% + 2 * var(--main-side-margin));
    height: min(50vh, calc(var(--backdrop-height) + 5em));
    margin-left: calc(-1 * var(--main-side-margin));
    margin-right: calc(-1 * var(--main-side-margin));
    margin-top: calc(-1 * var(--bar-height));
    margin-bottom: -5em;
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 1),
        transparent min(50vh, calc(var(--backdrop-height) + 5em))
    );
    mask-image: linear-gradient(
        rgba(0, 0, 0, 1),
        transparent min(50vh, calc(var(--backdrop-height) + 5em))
    );
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    pointer-events: none;
    object-fit: cover;
    object-position: center;
}
.page.node {
    position: relative;
    width: 100%;
}
.page.node .bigposter {
    width: max(8em, 25%);
    float: left;
    margin: 3em;
    margin-top: -1em;
    height: 100%;
}
.page.node .bigposter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.bigposter.aspect-thumb {
    aspect-ratio: var(--land-thumb-aspect)
}
.bigposter.aspect-land {
    aspect-ratio: var(--land-poster-aspect)
}
.bigposter.aspect-port {
    aspect-ratio: var(--port-poster-aspect)
}
.bigposter.aspect-square {
    aspect-ratio: 1;
}

.page.node .title h1 {
    margin-right: 1em;
}
.page.node .title .play {
    display: inline-block;
    font-size: small;
    background-color: #52b83340;
}
.page.node .title .play::before {
    content: "play_arrow";
    vertical-align: middle;
}
.page.node .title .mark_watched,
.page.node .title .mark_unwatched {
    display: inline-block;
}
.page.node .title .mark_watched input,
.page.node .title .mark_unwatched input {
    background-color: #80808040;
}

/* TODO find a non-horrible way to put the icon there */
/*.page.node .title .mark_watched input::before {
    content: "done_all";
}
.page.node .title .mark_unwatched input::before {
    content: "undo";
}*/

.dirup {
    width: 100%;
    font-size: large;
    display: block;
    text-align: center;
    background-color: var(--background-light);
    border-radius: 0.2em;
    padding: 0.6em;
    margin: 0.2em;
    transition: filter 0.22s;
}
.dirup:hover {
    filter: brightness(120%);
}

@media (max-width: 500px) {
    .page.node .bigposter {
        margin: 1.5em;
    }
}