/* Keep modal width as is */
.custom-training-modal {
    max-width: 95vw;
    width: 95vw;
    margin: auto;
}

/* Triple the modal height */
#trainingModal .modal-content {
    height: 90vh; /* 3x the usual ~30vh modal */
    display: flex;
    flex-direction: column;
}

/* Triple the video height inside modal */
#trainingModal .modal-body {
    flex-grow: 1;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Make ratio container grow 3x larger than normal */
#trainingModal .ratio {
    width: 100%;
    height: 100%; /* fill the available height */
    max-height: 75vh; /* prevents going off-screen */
}

#trainingVideoIframe {
    width: 100%;
    height: 100%;
    border: none;
}



@media (max-width: 576px) {
    .custom-training-modal {
        max-width: 100vw;
        width: 100vw;
    }

    #trainingModal .modal-content {
        height: auto;
    }

    #trainingModal .ratio {
        max-height: 50vh;
    }
}