/* =========================================================================
 * Project — Video blok
 * Verschijnt automatisch onderaan het "Toelichting"-blok (onder het
 * contactblok), over de volledige contentbreedte. Responsieve 16:9
 * YouTube-video, net als de Elementor video-widget.
 * ====================================================================== */

.cge-toelichting__video {
    width: 100%;
    /* Ruimte boven komt uit de bottom-padding van .cge-toelichting__inner;
       deze padding zorgt voor gelijke ruimte onder de video. */
    padding-bottom: 64px;
}

.cge-project-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

/* Fallback voor browsers zonder aspect-ratio-ondersteuning */
@supports not (aspect-ratio: 16 / 9) {
    .cge-project-video__frame {
        height: 0;
        padding-top: 56.25%;
    }
}

.cge-project-video__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 640px) {
    .cge-toelichting__video {
        padding-bottom: 40px;
    }
}

/* -------------------------------------------------------------------------
 * Video op de plek van de uitgelichte afbeelding (hero, Single Project).
 * Vervangt de Elementor image-widget; afronding matcht de hero-afbeelding.
 * ---------------------------------------------------------------------- */

.cge-featured-video {
    width: 100%;
}

.cge-featured-video .cge-project-video__frame {
    border-radius: 7px;
}