/* Custom tweaks to complement Bootstrap */
body {
    background-color: #fff;
}

/* Add a little breathing room for cards inside grids */
.card {
    border-radius: .5rem;
}

.card-img-top {
    object-fit: cover;
}

/* Thumbnail helpers for media */
.thumb-img {
    width: 100%;
    height: 140px;
    /* smaller image thumb */
    object-fit: cover;
}

.thumb-video {
    width: 100%;
    height: 140px;
    /* smaller video thumb */
    object-fit: cover;
    background: #000;
}

/* Optional: tighten default container spacing on very wide screens */
@media (min-width: 1400px) {

    /* Lightbox/modal image should fit within viewport without scrolling */
    #photoModal .modal-dialog {
        max-width: 95vw;
    }

    #photoModal .modal-body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-img {
        max-width: 100%;
        max-height: 90vh;
        /* keep within viewport height */
        width: auto;
        height: auto;
        object-fit: contain;
    }

    #modalCaption {
        word-break: break-word;
    }

    main.container {
        max-width: 1140px;
    }
}

/* Drag & Drop zone */
.drop-zone {
    border: 2px dashed #6c757d;
    border-radius: .5rem;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.drop-zone.dragover {
    background-color: #eef6ff;
    border-color: #0d6efd;
}

.drop-zone.uploading {
    opacity: .7;
    pointer-events: none;
}

/* Give sticky navbar a subtle shadow for separation */
.navbar.sticky-top {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .15);
    z-index: 1020;
    /* ensure above page content */
}

/* Video modal sizing */
#videoModal .modal-dialog {
    max-width: 95vw;
}

#videoModal .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-video {
    max-width: 100%;
    max-height: 90vh;
}

#videoModal .ratio {
    width: 100%;
}

.modal-iframe {
    width: 100%;
    height: 100%;
}