/**
 * Cargo Modal
 * Reuses the site-wide modal design system.
 */

/* Remove default separator */
.ey-cargo-modal-popup .modal-body {
    border-top: 0;
}

/* Close button */
.ey-cargo-modal-popup .ey-cargo-modal__close-row {
    display: flex;
    justify-content: flex-end;
}

.ey-cargo-modal-popup .ey-cargo-modal__close-row .close {
    position: static;
}

/* Header */
.ey-cargo-modal-popup .ey-cargo-modal__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}

.ey-cargo-modal-popup .ey-cargo-modal__badge-row {
    flex-basis: 100%;
}

.ey-cargo-modal-popup .ey-cargo-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ey-cargo-modal-popup .ey-cargo-modal__badge-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex-shrink: 0;
}

.ey-cargo-modal-popup .ey-cargo-modal__title {
    margin-top: 8px;
}

.ey-cargo-modal-popup .ey-cargo-modal__updated {
    margin-top: 8px;
    margin-left: auto;
    white-space: nowrap;
}

/* Modal body */
.ey-cargo-modal-popup .ey-cargo-modal__body {
    column-gap: 24px;
}

/* Media container */
.ey-cargo-modal__media {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

/* Image */
.ey-cargo-modal__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video play/pause button */
.ey-cargo-modal-popup
.ey-cargo-modal__media .play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ey-cargo-modal-popup
.ey-cargo-modal__media .play-pause-btn svg {
    width: 20px;
    height: 20px;
    fill: #1a1a1a;
}

.ey-cargo-modal-popup
.ey-cargo-modal__media .play-pause-btn.hidden {
    display: none;
}

/* Mobile */
@media (max-width: 767px) {

    /* Content-sized modal */
    .ey-cargo-modal-popup .modal-dialog {
        height: auto;
        max-height: 75vh;
        width: calc(100% - 32px);
        border-radius: 16px;
        overflow-y: auto;
    }

    /* Prevent shared modal body flex stretching */
    .ey-cargo-modal-popup
    .modal-content
    .modal-body.ey-cargo-modal__body {
        flex: 0 0 auto;
        height: auto;
        max-height: none;
    }

    /* Header title and date */
    .ey-cargo-modal-popup .ey-cargo-modal__title,
    .ey-cargo-modal-popup .ey-cargo-modal__updated {
        flex-basis: 100%;
        margin-left: 0;
    }

    .ey-cargo-modal-popup .ey-cargo-modal__updated {
        margin-top: 4px;
    }

    /* Stack image and description */
    .ey-cargo-modal-popup .ey-cargo-modal__body {
        flex-direction: column;
        align-items: stretch;
        row-gap: 16px;
    }

    /* Remove fixed aspect ratio */
    .ey-cargo-modal-popup .ey-cargo-modal__media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: auto;
    }

    /* Image determines its own height */
    .ey-cargo-modal-popup .ey-cargo-modal__asset {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media only screen and (max-width: 992px) {
    @supports (height: 100dvh) {
        .ey-cargo-modal-popup.ey-modal .modal-dialog .modal-content.ey-modal-content-flex {
            height: auto !important;
        }
    }
}