/* Dark Background Framing for Portrait/Tall Media */
.media-frame,
.sv-video {
    background-color: #000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Use a standard height for consistency, or standard aspect ratio */
    min-height: 300px;
    max-height: 650px;
    overflow: hidden;
    position: relative;
    border-radius: 4px; /* Optional: smooth corners */
}

/* Ensure images and videos are contained nicely within the black frame */
.media-frame img,
.media-frame video,
.sv-video img,
.sv-video video {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain; /* This enables the "letterboxing" effect automatically */
    display: block;
    margin: 0 auto;
}

/* Specific overrides if .zoom-image was conflicting */
.zoom-image.media-frame {
    display: flex; /* Ensure flexbox works even if zoom-image had block */
}

/* Optional: Hide video controls initially if desired, though we are removing the attribute via JS/Blade */
video.preview-video {
    object-fit: contain;
}

/* Remove padding around post media on mobile */
@media only screen and (max-width: 767px) {
    .post-media-container {
        height: auto !important;
        min-height: 200px;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        overflow: hidden;
    }

    .post-media-container .vid {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        display: block;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
    }

    .post-media-container video.vid {
        min-height: 200px;
    }

    .post-media-container img.vid {
        min-height: 200px;
    }

    .b-video .v-img {
        padding: 0 !important;
        margin: 0 !important;
    }

    .b-video .v-img a {
        display: block;
        padding: 0 !important;
        margin: 0 !important;
    }
}