/* ==========================================================================
   VIRTUEEL KLASLOKAAL: FLUID & RESPONSIVE INTERFACE (BOOTSTRAP 5 EXTENSION)
   ========================================================================== */

.classroom-container {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* Event kaarten focus en WCAG contrast verbeteringen */
.event-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #cbd5e1 !important; /* Goed zichtbare randen voor visueel beperkten */
    border-radius: 12px !important;
    background-color: #ffffff;
}

    .event-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(15, 118, 110, 0.08) !important;
    }

    /* Toegankelijkheidsfocus (WCAG 2.2 Verplichting) */
    .event-card button:focus,
    .bbb-room-wrapper button:focus {
        outline: 3px solid #0f766e !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.25) !important;
    }

/* IFrame container die meeschaalt op smartphones en high-end laptops */
.bbb-iframe-container {
    background-color: #0f172a;
    border: 1px solid #e2e8f0;
    width: 100%;
}

@media (max-width: 767.98px) {
    .bbb-room-wrapper h2 {
        font-size: 1.25rem;
    }

    .bbb-iframe-container iframe {
        height: 65vh !important; /* Iets korter op mobiel voor betere scroll functionaliteit */
        min-height: 450px !important;
    }
}