.card {
    position: relative;
    overflow: hidden;
}

/* De onzichtbare beschermlaag over de hele kaart */
.card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: rgba(0,0,0,0);
    pointer-events: none;
}

.protected-image {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.embed-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Of 'contain' als je de hele video wilt zien zonder bijsnijden */
}

.embed-responsive-16by9 {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    padding-top: 56.25%; /* De magische rekensom voor 16:9 */
    overflow: hidden;
    background-color: #000; /* Altijd goed voor video */
}

.embed-responsive-16by9 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Houd dit op contain om je hele render te zien */
}

    .scroll-container {
        display: flex;
        flex-wrap: nowrap; /* Zorgt dat ze op één lijn blijven */
        overflow-x: auto;  /* Maakt horizontaal scrollen mogelijk */
        -webkit-overflow-scrolling: touch; /* Voor soepele scroll op iPhone */
        padding-bottom: 15px; /* Ruimte voor de scrollbar */
    }

    /* Optioneel: verberg de scrollbar voor een cleaner uiterlijk */
    .scroll-container::-webkit-scrollbar {
        height: 6px;
    }
    .scroll-container::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }
    
    /* Zorg dat de kolommen een vaste breedte behouden in de scrollbox */
    .scroll-container .col-sm-3 {
        flex: 0 0 auto;
        width: 250px; /* Pas dit aan naar de gewenste breedte per foto */
    }

    .lightbox-container {
    position: relative;
    display: inline-block;
}

/* De onzichtbare beschermlaag */
.lightbox-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(0,0,0,0); /* Volledig doorzichtig */
}

/* Zorg dat de afbeelding in de lightbox schaalt */
.modal-body img {
    max-width: 100%;
    height: auto !important;
    max-height: 85vh; /* Voorkomt dat je verticaal moet scrollen */
    object-fit: contain;
}

/* Optioneel: Maak de lightbox modal breder voor grote foto's */
.modal-dialog {
    max-width: 90vw !important;
}