{"version":3,"sourceRoot":"","sources":["../scss-styles/components/_video-transcript-bubble.scss"],"names":[],"mappings":"AACI,kDACI,uBAGJ,iDACI,gBAGJ,iDACI,sBACA,aACA,sBACA,WACA,SACA,UACA,gBACA,cACA,gBACA,qCACA,4BACA,0CAGJ,uDACI,aACA,sBAGJ,kDACI,oBAGJ,kDACI,YACA,yBAGJ,yCACI,WACA,gBACA,kBACA,gBACA,8BAEA,gDACI,cACA,WACA,YACA,SAIR,uDACI,aAEA,+DACI,aAIR,oDACI,gBACA,iBAGJ,iDACI,eACA,gBAEA,mDACI,gBAEA,8DACI,gBAKZ,wDACI,aACA,cACA,yBACA,aAGJ,mDACI,WACA,gBASJ,0DACI,eACA,2CACA,WACA,YACA,6CACA,sBACA,kDACA,eACA,SACA,UAGJ,8DACI,aACA,0CAGJ,2DACI,yBAQA,kGACI,aACA,sCACA,YACA,kBACA,aAGJ,6FACI,YAGJ,kGACI,cACA,YACA,uDAIA,gBAKA,6HACI,gBACA,WAGJ,wHACI,iBAMJ,uHACI,gBAGJ,4HACI,iBASZ,yBAEQ,wGACI,UAKJ,uGACI,aAGJ,uGACI,WACA,gBAUR,kGACI,aACA,sBACA,SAGJ,6FACI,QAGJ,kGACI,cACA,QACA,gBACA,iBACA,aAIR,yBAEQ,0GACI,QAGJ,0GACI,QAIR,wDACI,qBAGJ,iDACI,mBAGJ,yCACI,sBAIR,uCACI,iDACI,iBAKZ,mCAEQ,iDACI","file":"video-transcript-bubble.css","sourcesContent":[".video-transcript-section {\n    .video-transcript-panel {\n        align-items: flex-start;\n    }\n\n    .video-transcript-copy {\n        max-width: 57rem;\n    }\n\n    .video-transcript-card {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        margin: 0;\n        padding: 0;\n        overflow: hidden;\n        color: inherit;\n        background: #fff;\n        border: 1px solid rgba(11, 61, 116, 0.08);\n        border-radius: min(20px, 2vw);\n        box-shadow: 0 18px 50px rgba(20, 32, 55, 0.08);\n    }\n\n    .video-transcript-card-inner {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .video-transcript-media {\n        padding: 1rem 1rem 0;\n    }\n\n    .video-transcript-video {\n        min-width: 0;\n        background: transparent;\n    }\n\n    .video-wrapper {\n        width: 100%;\n        overflow: hidden;\n        aspect-ratio: 16 / 9;\n        background: #000;\n        border-radius: min(16px, 1.5vw);\n\n        iframe {\n            display: block;\n            width: 100%;\n            height: 100%;\n            border: 0;\n        }\n    }\n\n    .video-transcript-transcript{\n        padding: 1rem;\n\n        &[hidden] {\n            display: none;\n        }\n    }\n\n    .video-transcript-heading {\n        margin: 0 0 1rem;\n        font-size: 1.5rem;\n    }\n\n    .video-transcript-text {\n        font-size: 1rem;\n        line-height: 1.6;\n\n        p {\n            margin: 0 0 1rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n    }\n\n    .video-transcript-card-footer {\n        display: flex;\n        flex: 0 0 auto;\n        justify-content: flex-end;\n        padding: 1rem;\n    }\n\n    .video-transcript-toggle {\n        width: auto;\n        margin-bottom: 0;\n    }\n\n    /*\n     * The Popover API still puts the card in the browser's top\n     * layer. JavaScript supplies the exact content edges of the\n     * existing DPL row so the card cannot grow towards the edge\n     * of the viewport when CSS anchor sizing is unavailable.\n     */\n    .video-transcript-card[popover] {\n        position: fixed;\n        top: var(--video-transcript-popover-top, 0);\n        right: auto;\n        bottom: auto;\n        left: var(--video-transcript-popover-left, 0);\n        box-sizing: border-box;\n        width: var(--video-transcript-popover-width, auto);\n        max-width: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .video-transcript-card:popover-open {\n        display: flex;\n        box-shadow: 0 26px 72px rgba(20, 32, 55, 0.18);\n    }\n\n    .video-transcript-card::backdrop {\n        background: transparent;\n    }\n\n    /*\n     * Expanded desktop card. Its two tracks repeat the 7/5 split\n     * used by the surrounding DPL columns.\n     */\n    .video-transcript-card.is-popover-expanded {\n        .video-transcript-card-inner {\n            display: grid;\n            grid-template-columns: repeat(12, 1fr);\n            gap: 1.25rem;\n            align-items: start;\n            min-height: 0;\n        }\n\n        .video-transcript-video {\n            min-width: 0;\n        }\n\n        .video-transcript-transcript {\n            display: block;\n            min-width: 0;\n            max-height: var(\n                --video-transcript-media-height,\n                25rem\n            );\n            overflow-y: auto;\n        }\n\n        /* Video on the right: transcript left, video right. */\n        &[data-video-position=\"right\"] {\n            .video-transcript-transcript {\n                grid-column: 1 / 8;\n                grid-row: 1;\n            }\n\n            .video-transcript-media {\n                grid-column: 8 / -1;\n            }\n        }\n\n        /* Video on the left: video left, transcript right. */\n        &[data-video-position=\"left\"] {\n            .video-transcript-media {\n                grid-column: 1 / 6;\n            }\n\n            .video-transcript-transcript {\n                grid-column: 6 / -1;\n            }\n        }\n    }\n\n    /*\n     * Keep the original row in the document while its card is in\n     * the top layer. This prevents the following section jumping.\n     */\n    @media (min-width: 992px) {\n        .video-transcript-card[data-video-position=\"left\"] {\n            .video-transcript-card-inner {\n                padding: 0;\n            }\n        }\n\n        .video-transcript-panel.is-native-popover-open {\n            > .video-transcript-copy-column {\n                display: none;\n            }\n\n            > .video-transcript-card-column {\n                width: 100%;\n                max-width: 100%;\n            }\n        }\n    }\n\n    /*\n     * Stacked disclosure for centred cards, small screens and the\n     * non-Popover fallback.\n     */\n    .video-transcript-panel.is-inline-expanded {\n        .video-transcript-card-inner {\n            display: flex;\n            flex-direction: column;\n            gap: 1rem;\n        }\n\n        .video-transcript-video {\n            order: 1;\n        }\n\n        .video-transcript-transcript {\n            display: block;\n            order: 2;\n            max-height: none;\n            overflow: visible;\n            padding: 1rem;\n        }\n    }\n\n    @media (max-width: 991px) {\n        .video-transcript-panel[data-video-position=\"left\"] {\n            > .video-transcript-copy-column {\n                order: 1;\n            }\n\n            > .video-transcript-card-column {\n                order: 2;\n            }\n        }\n\n        .video-transcript-copy-column {\n            margin-bottom: 1.5rem;\n        }\n\n        .video-transcript-card {\n            border-radius: 1rem;\n        }\n\n        .video-wrapper {\n            border-radius: 0.75rem;\n        }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .video-transcript-card {\n            transition: none;\n        }\n    }\n}\n\n@media (prefers-color-scheme: dark) {\n    .video-transcript-section {\n        .video-transcript-card {\n            color: #000000;\n        }\n    }\n}\n"]}