{"version":3,"sourceRoot":"","sources":["../scss-styles/components/_featured-media.scss"],"names":[],"mappings":"AAGA,YACI,aACA,sBACA,mBACA,cAEA,6BACI,cACA,WAKR,gBACI,WACA,YACA,cAIJ,uBACI,WACA,gBACA,eACA,eAIJ,qBACI,cACA,sBACA,mBACA,cAIJ,yBACI,WACA,YACA,cAIJ,gCACI,WACA,gBACA,eACA,eAIJ,eACI,kBACA,WACA,kBAIJ,sBACI,WACA,YACA,SACA,kBACA,MACA,OAGJ,yBACI,aAGJ,sEACI,kBACI,cAKR,qCACI,2DACI,yBACI,cAGA,6BACI,aAMJ,6EACI,eAGJ,sEACI,0BAKJ,4EACI,iBAGJ,qEACI,2BAIR,kBACI,eACA,gBACA,yBACA,YACA,cACA,gBACA,gBACA,eACA","file":"featured-media.css","sourcesContent":["@import \"../variables/main-colors\";\r\n\r\n/* Make figure fill the column */\r\n.col figure {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    margin: 1rem 0;\r\n\r\n    .accordion-group {\r\n        display: block;\r\n        width: 100%;\r\n    }\r\n}\r\n\r\n/* Make image responsive */\r\n.col figure img {\r\n    width: 100%;\r\n    height: auto; /* Maintains aspect ratio */\r\n    display: block; /* Prevents extra spacing */\r\n}\r\n\r\n/* Style the caption */\r\n.col figure figcaption {\r\n    width: 100%;\r\n    text-align: left;\r\n    font-size: 1rem;\r\n    padding: 0.5em 0;\r\n}\r\n\r\n/* Make figure fill the column */\r\n.col-centered figure {\r\n    display: block;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    margin: 1rem 0;\r\n}\r\n\r\n/* Make image responsive */\r\n.col-centered figure img {\r\n    width: 100%;\r\n    height: auto; /* Maintains aspect ratio */\r\n    display: block; /* Prevents extra spacing */\r\n}\r\n\r\n/* Style the caption */\r\n.col-centered figure figcaption {\r\n    width: 100%;\r\n    text-align: left;\r\n    font-size: 1rem;\r\n    padding: 0.5em 0;\r\n}\r\n\r\n/* Responsive Video Wrapper */\r\n.video-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    aspect-ratio: 16 / 9; /* Ensures a perfect 16:9 aspect ratio */\r\n}\r\n\r\n/* Responsive Iframe */\r\n.video-wrapper iframe {\r\n    width: 100%;\r\n    height: 100%;\r\n    border: 0;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n}\r\n\r\n.video-transcript-toggle {\r\n    display: none;\r\n}\r\n\r\n@supports (not (position-area: center)) or (not (selector([popover]))){\r\n    .video-transcript {\r\n        display: none;\r\n    }\r\n}\r\n\r\n// Only show the popover transcript on desktop and if their browser is compatible\r\n@media screen and (min-width: 992px) {\r\n    @supports (position-area: center) and (selector([popover])){\r\n        .video-transcript-toggle {\r\n            display: block;\r\n        }\r\n        .col figure {\r\n            .accordion-group {\r\n                display: none;\r\n            }\r\n        }\r\n\r\n        // Video transcript\r\n        .featured-media-right-column:has(.video-transcript) {\r\n            .video-transcript-toggle {\r\n                align-self: end;\r\n            }\r\n\r\n            .video-transcript {\r\n                position-area: center left;\r\n            }\r\n        }\r\n\r\n        .featured-media-left-column:has(.video-transcript) {\r\n            .video-transcript-toggle {\r\n                align-self: start;\r\n            }\r\n\r\n            .video-transcript {\r\n                position-area: center right;\r\n            }\r\n        }\r\n\r\n        .video-transcript {\r\n            position: fixed;\r\n            background: white;\r\n            border: 2px solid $dark-grey-1;\r\n            margin: 2rem;\r\n            overflow: auto;\r\n            max-height: 100%;\r\n            max-width: 750px;\r\n            padding: 0 1rem;\r\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n        }\r\n    }\r\n}\r\n"]}