/* PQR_VIDEO_EQUAL_PREVIEW_V3 */

/*
 * Equal desktop workspace:
 * editor 50% and QR preview 50%.
 */
@media (min-width: 1101px) {
    body.pqr-video-modern-v1
    .pqr-video-modern-grid-v1 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(18px, 2vw, 28px) !important;
        align-items: stretch !important;
    }

    body.pqr-video-modern-v1
    .pqr-video-modern-editor-v1,
    body.pqr-video-modern-v1
    .pqr-video-modern-preview-v1 {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100%;
    }

    body.pqr-video-modern-v1
    .pqr-video-modern-preview-v1 {
        display: flex;
        flex-direction: column;
        min-height: 760px;
    }

    body.pqr-video-modern-v1
    .pqr-video-modern-stage-v1 {
        flex: 1 1 auto;
        width: 100%;
        min-height: 720px;
        padding: clamp(20px, 2.4vw, 34px);
        align-items: start;
    }

    body.pqr-video-modern-v1
    .pqr-video-modern-stage-v1
    #videoResult {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.pqr-video-modern-v1
    #videoResult > .row {
        width: 100% !important;
        max-width: none !important;
    }

    body.pqr-video-modern-v1
    .pqr-video-document {
        width: 100% !important;
        min-height: 150px;
        padding: clamp(18px, 2vw, 25px);
    }

    body.pqr-video-modern-v1
    .pqr-video-qr {
        width: 100% !important;
        min-height: 500px !important;
        padding: clamp(22px, 3vw, 38px);
    }

    body.pqr-video-modern-v1
    #videoQrImage {
        width: min(100%, 430px) !important;
        max-width: 430px !important;
    }

    body.pqr-video-modern-v1
    #videoResult
    .pqr-video-actions {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}

/*
 * Medium desktop and tablets remain single-column,
 * giving both editor and preview the full available width.
 */
@media (min-width: 701px) and (max-width: 1100px) {
    body.pqr-video-modern-v1
    .pqr-video-modern-grid-v1 {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    body.pqr-video-modern-v1
    .pqr-video-modern-preview-v1 {
        width: 100% !important;
        max-width: none !important;
    }

    body.pqr-video-modern-v1
    .pqr-video-modern-stage-v1
    #videoResult {
        width: 100% !important;
        max-width: 760px !important;
    }

    body.pqr-video-modern-v1
    #videoQrImage {
        width: min(100%, 400px) !important;
    }
}

/*
 * Prevent filenames, provider labels and URLs from
 * ever collapsing into character-by-character columns.
 */
body.pqr-video-modern-v1
:is(
    .pqr-video-name,
    .pqr-video-url,
    #videoDocumentSize
) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
}

body.pqr-video-modern-v1
.pqr-video-document
.d-flex > div:last-child {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
}

html[dir="rtl"]
body.pqr-video-modern-v1
:is(
    .pqr-video-name,
    .pqr-video-url,
    #videoDocumentSize
) {
    text-align: start;
}

/*
 * Mobile remains stacked and compact.
 */
@media (max-width: 700px) {
    body.pqr-video-modern-v1
    .pqr-video-modern-grid-v1 {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    body.pqr-video-modern-v1
    .pqr-video-modern-stage-v1
    #videoResult {
        width: 100% !important;
        max-width: none !important;
    }

    body.pqr-video-modern-v1
    .pqr-video-qr {
        min-height: 330px !important;
    }

    body.pqr-video-modern-v1
    #videoQrImage {
        width: min(100%, 310px) !important;
    }

    body.pqr-video-modern-v1
    #videoResult
    .pqr-video-actions {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }
}