iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"] {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 16 / 9 !important;

    max-width: 100%;
}


/* =====================================================
   VIDEO SLIDER

   DESKTOP:
   - thumbnail
   - YouTube Shorts ikona
   - YouTube až po kliknutí

   MOBILE:
   - YouTube až když se slider dostane do viewportu
   - vždy jen JEDEN připravený player
   - originální YouTube play button
===================================================== */


/* =====================================================
   0) SHOPTET OVERFLOW
===================================================== */

.pageArticleDetail,
.content-inner,
.content.wide,
.content-wrapper-in {
    overflow: visible !important;
}


/* =====================================================
   1) VIDEO SLIDER
===================================================== */

.video-slider {
    position: relative !important;

    left: 50% !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 2rem !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;

    margin-left: -50vw !important;
    margin-right: 0 !important;

    padding:
        1rem
        2rem
        2rem !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling:
        touch;

    scroll-snap-type:
        x mandatory;

    scrollbar-width:
        none !important;

    box-sizing:
        border-box !important;
}


/* =========================
   SCROLLBAR
========================= */

.video-slider::-webkit-scrollbar {
    display: none !important;

    width: 0 !important;

    height: 0 !important;
}


/* =====================================================
   2) LARGE DESKTOP
   CCA 8,3 VIDEA
   NAD 1800 PX
===================================================== */

.video-slider >
.shorts-video.youtube-video.youtube-video-facade {
    flex-grow: 0 !important;

    flex-shrink: 0 !important;

    flex-basis:
        calc(
            (100vw - 20rem) /
            8.3
        ) !important;

    width:
        calc(
            (100vw - 20rem) /
            8.3
        ) !important;

    min-width:
        calc(
            (100vw - 20rem) /
            8.3
        ) !important;

    max-width:
        calc(
            (100vw - 20rem) /
            8.3
        ) !important;

    margin: 0 !important;

    scroll-snap-align:
        start;

    box-sizing:
        border-box !important;
}


/* =====================================================
   3) SHORTS – 9:16
===================================================== */

.shorts-video {
    position:
        relative !important;

    width:
        100% !important;

    aspect-ratio:
        9 / 16 !important;

    border-radius:
        3rem !important;

    overflow:
        hidden !important;

    background:
        #000;

    box-sizing:
        border-box !important;
}


/* =====================================================
   4) KLASICKÉ YOUTUBE – 16:9
===================================================== */

.youtube-video:not(.shorts-video) {
    position:
        relative !important;

    width:
        100% !important;

    max-width:
        100% !important;

    aspect-ratio:
        16 / 9 !important;

    border-radius:
        1.5rem !important;

    overflow:
        hidden !important;

    background:
        #000;

    box-sizing:
        border-box !important;
}


/* =====================================================
   5) FACADE
===================================================== */

.youtube-video-facade {
    position:
        relative !important;

    cursor:
        pointer;

    background:
        #000;
}


/* =====================================================
   6) THUMBNAIL
===================================================== */

.youtube-video-thumbnail {
    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        3 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    border:
        0 !important;

    opacity:
        1;

    transform:
        scale(1);

    transition:
        transform .6s ease,
        opacity .35s ease;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


/* =========================
   RADIUS SHORTS
========================= */

.shorts-video
.youtube-video-thumbnail {
    border-radius:
        3rem !important;
}


/* =========================
   RADIUS 16:9
========================= */

.youtube-video:not(.shorts-video)
.youtube-video-thumbnail {
    border-radius:
        1.5rem !important;
}


/* =====================================================
   7) OVERLAY
===================================================== */

.youtube-video-facade::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        4;

    pointer-events:
        none;

    background:
        rgba(
            9,
            23,
            26,
            0
        );

    transition:
        background-color .4s ease,
        opacity .35s ease;
}


/* =========================
   DESKTOP HOVER
========================= */

@media (hover: hover) and (pointer: fine) {

    .youtube-video-facade:hover::after {
        background:
            rgba(
                9,
                23,
                26,
                .40
            );
    }


    .youtube-video-facade:hover
    .youtube-video-thumbnail {

        transform:
            scale(1.04);
    }


    .youtube-video-facade:hover
    .youtube-video-play {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.08) !important;
    }

}


/* =====================================================
   8) YOUTUBE SHORTS BUTTON
   DESKTOP + TABLET

   používá:
   /user/documents/upload/obsahy/ikony/youtube-shorts.svg
===================================================== */

.youtube-video-play {
    position:
        absolute !important;

    top:
        50% !important;

    left:
        50% !important;

    z-index:
        5 !important;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1) !important;

    width:
        5rem !important;

    height:
        6.2rem !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background-color:
        transparent !important;

    background-image:
        url("/user/documents/upload/obsahy/ikony/youtube-shorts.svg") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;

    cursor:
        pointer;

    box-shadow:
        none !important;

    filter:
        drop-shadow(
            0
            .4rem
            1rem
            rgba(
                0,
                0,
                0,
                .30
            )
        );

    appearance:
        none;

    -webkit-appearance:
        none;

    transition:
        transform .3s ease,
        filter .3s ease;
}


/* =====================================================
   ODSTRANĚNÍ PŮVODNÍHO TROJÚHELNÍKU
===================================================== */

.youtube-video-play::before {
    content:
        none !important;

    display:
        none !important;
}


/* =====================================================
   SHORTS BUTTON HOVER
===================================================== */

@media (hover: hover) and (pointer: fine) {

    .youtube-video-facade:hover
    .youtube-video-play {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.08) !important;

        filter:
            drop-shadow(
                0
                .5rem
                1.4rem
                rgba(
                    0,
                    0,
                    0,
                    .35
                )
            );
    }

}


/* =====================================================
   9) DESKTOP IFRAME PO KLIKNUTÍ
===================================================== */

.youtube-video-facade.is-loaded
iframe {
    position:
        absolute !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        #000;
}


/* =========================
   SHORTS
========================= */

.shorts-video.youtube-video-facade.is-loaded
iframe {
    aspect-ratio:
        9 / 16 !important;

    border-radius:
        3rem !important;
}


/* =====================================================
   10) MOBILE PLAYER
===================================================== */

.youtube-mobile-player-layer {
    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        2 !important;

    width:
        100% !important;

    height:
        100% !important;

    background:
        #000;

    opacity:
        0;

    pointer-events:
        none;

    overflow:
        hidden;

    transition:
        opacity .35s ease;
}


.youtube-mobile-player-layer
iframe {
    position:
        absolute !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        #000;
}


/* =====================================================
   11) DESKTOP / SMALL DESKTOP
   CCA 6,3 VIDEA
   1200–1800 PX
===================================================== */

@media (max-width: 1800px) {

    .video-slider {
        gap:
            .8rem !important;
    }


    .video-slider >
    .shorts-video.youtube-video.youtube-video-facade {

        flex-basis:
            calc(
                (
                    100vw -
                    4rem -
                    (6 * .8rem)
                ) /
                6.7
            ) !important;

        width:
            calc(
                (
                    100vw -
                    4rem -
                    (6 * .8rem)
                ) /
                6.7
            ) !important;

        min-width:
            calc(
                (
                    100vw -
                    4rem -
                    (6 * .8rem)
                ) /
                6.7
            ) !important;

        max-width:
            calc(
                (
                    100vw -
                    4rem -
                    (6 * .8rem)
                ) /
                6.7
            ) !important;
    }

}


/* =====================================================
   12) TABLET
   CCA 4,3 VIDEA
   768–1199 PX
===================================================== */

@media (max-width: 1199px) {

    .video-slider {
        gap:
            2rem !important;
    }


    .video-slider >
    .shorts-video.youtube-video.youtube-video-facade {

        flex-basis:
            calc(
                (100vw - 10rem) /
                4.3
            ) !important;

        width:
            calc(
                (100vw - 10rem) /
                4.3
            ) !important;

        min-width:
            calc(
                (100vw - 10rem) /
                4.3
            ) !important;

        max-width:
            calc(
                (100vw - 10rem) /
                4.3
            ) !important;
    }

}


/* =====================================================
   13) MOBILE
   CCA 1,3 VIDEA
   DO 767 PX
===================================================== */

@media (max-width: 767px) {

    .video-slider {
        gap:
            1.5rem !important;

        padding:
            1rem
            1.5rem
            1.5rem !important;
    }


    .video-slider >
    .shorts-video.youtube-video.youtube-video-facade {

        flex-basis:
            calc(
                (100vw - 3rem) /
                1.3
            ) !important;

        width:
            calc(
                (100vw - 3rem) /
                1.3
            ) !important;

        min-width:
            calc(
                (100vw - 3rem) /
                1.3
            ) !important;

        max-width:
            calc(
                (100vw - 3rem) /
                1.3
            ) !important;
    }


    .shorts-video {
        border-radius:
            1.5rem !important;
    }


    /*
       Na mobilu naši Shorts ikonu
       nepotřebujeme.

       Počkáme na připravený originální
       YouTube player.
    */

    .video-slider .youtube-video-play {
        display:
            none !important;
    }


    /*
       Mimo carousel necháme na mobilu
       vlastní play button stejně jako na desktopu.
    */

    .youtube-video-facade:not(.video-slider .youtube-video-facade)
    .youtube-video-play {
        display:
            block !important;
    }


    /*
       Thumbnail leží nad připravovaným
       originálním YouTube playerem.
    */

    .youtube-video-thumbnail {
        z-index:
            4 !important;

        pointer-events:
            none;
    }


    /*
       Dokud není YouTube ready,
       thumbnail zůstává beze změny.
    */

    .youtube-video-facade.mobile-player-preparing
    .youtube-mobile-player-layer {

        opacity:
            0;
    }


    /*
       YouTube READY:
       player plynule odkryjeme.
    */

    .youtube-video-facade.mobile-player-ready
    .youtube-mobile-player-layer {

        z-index:
            6 !important;

        opacity:
            1;

        pointer-events:
            auto;
    }


    /*
       Současně plynule zmizí thumbnail.
    */

    .youtube-video-facade.mobile-player-ready >
    .youtube-video-thumbnail {

        opacity:
            0 !important;
    }


    /*
       Overlay na mobilu nepotřebujeme.
    */

    .youtube-video-facade.mobile-player-ready::after {

        opacity:
            0;
    }


    /*
       MOBILE RADIUS
    */

    .shorts-video
    .youtube-video-thumbnail,

    .shorts-video
    .youtube-mobile-player-layer,

    .shorts-video
    .youtube-mobile-player-layer
    iframe,

    .shorts-video.youtube-video-facade.is-loaded
    iframe {

        border-radius:
            1.5rem !important;
    }

}

/* =====================================================
   VIDEO V COLUMN1 / COLUMN2 / COLUMN3

   Column se roztáhne pouze tehdy,
   když obsahuje naše YouTube video.
===================================================== */


/* COLUMN S VIDEEM */

.column1:has(.youtube-video),
.column2:has(.youtube-video),
.column3:has(.youtube-video) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    justify-self: stretch !important;

    box-sizing: border-box !important;
}


/* NAŠE VIDEO UVNITŘ COLUMN */

.column1 .youtube-video,
.column2 .youtube-video,
.column3 .youtube-video {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/* SHORTS 9:16 */

.column1 .shorts-video.youtube-video,
.column2 .shorts-video.youtube-video,
.column3 .shorts-video.youtube-video {
    aspect-ratio: 9 / 16 !important;
}