/* =====================================================================
 * Video galerija
 *
 * Izgled kartice (.video-wrap, .small-video-grid, .close-video) je u
 * main.css i ne dira se. Ovdje je samo ono što dizajn nije imao: plejer
 * preko cijele strane.
 *
 * U dizajnu je `.video-popup-wrap` bio `position: absolute` unutar
 * kartice — jer je na naslovnoj strani jedan video i popup pripada toj
 * kartici. Ovdje je jedan plejer za deset kartica, pa mora biti fiksan
 * preko cijelog ekrana.
 * ===================================================================== */

.video-popup-wrap.video-popup-fixed {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 5vh 5vw;
    z-index: 1000;
}

/* `hidden` mora da nadjača `display: flex` iz main.css. */
.video-popup-wrap.video-popup-fixed[hidden] {
    display: none;
}

.video-popup-wrap.video-popup-fixed.open-video {
    z-index: 1000;
    opacity: 1;
}

.video-popup-fixed .video-popup {
    max-width: 1400px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 90vh;
    overflow: hidden;
}

.video-popup-fixed .video-popup-frame {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background-color: #000;
}

.video-popup-fixed .video-popup-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Dok je plejer otvoren, strana iza ne smije da se pomjera. */
body.video-open {
    overflow: hidden;
}

.videos-empty {
    margin: 40px 0;
    text-align: center;
    color: rgba(51, 51, 51, 0.7);
    font-style: italic;
}

@media screen and (max-width: 767px) {
    .video-popup-wrap.video-popup-fixed {
        padding: 0 16px;
    }
    .video-popup-fixed .video-popup-frame {
        border-radius: 16px;
    }
}