/*
 * video section style
 *
 * Renamed youtube.css -> youtube-v2.css: that asset is served with a
 * 1-year Cache-Control and no cache-busting, so the new consent-recovery
 * placeholder styling below wouldn't reach visitors with a cached copy -
 * a brand-new, never-before-requested filename is needed to guarantee a
 * fresh load (see includes/youtube.php).
 */
.videoContainer {
    width: 60%;
    padding: 2em 0 0;
    margin: 0 auto;
    display: block;
}

.videoContainer .firsSwiper {
    height: 24em;
}

.videoContainer .firsSwiper iframe {
    width: 100%;
    height: 100%;
}

/*
 * YouTube consent-recovery placeholder (see includes/youtube.php).
 * Shown only while the iframe is blocked by Iubenda's cookie consent
 * script (class "is-blocked" is toggled by JS based on the iframe's
 * actual src attribute).
 */
.youtube-embed-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-size: cover;
    background-position: center;
}

.youtube-embed-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.youtube-consent-play {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6em;
    background: rgba(0, 0, 0, .45);
    border: 0;
    cursor: pointer;
    padding: 0;
}

.youtube-embed-wrapper.is-blocked .youtube-consent-play {
    display: flex;
}

.youtube-consent-play-icon {
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    position: relative;
}

.youtube-consent-play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: .7em 0 .7em 1.1em;
    border-color: transparent transparent transparent #FF0000;
}

.youtube-consent-play-label {
    color: #FFFFFF;
    font-size: .95em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.videoContainer .thumbsSwiper {
    height: 6em;
    box-sizing: border-box;
    padding: 10px 0;
}

@media screen and (max-width: 768px) {
    .videoContainer {
        width: 70%;
    }

    .videoContainer .firsSwiper {
        height: 18em;
    }

    .videoContainer .thumbsSwiper {
        height: 5em;
    } 
}

@media screen and (max-width: 576px) {
    .videoContainer {
        width: 80%;
    }

    .videoContainer .firsSwiper {
        height: 11em;
    }

    .videoContainer .thumbsSwiper {
        height: 4em;
    }
}