/* YouTube Background
   Paired with /js/youtube-bg.js. Activate by adding `youtube-bg-VIDEOID`
   as an additional CSS class on any block (Stackable Hero, Group, etc.).
   The script also adds `.has-youtube-bg` for styling hooks below.
----------------------------------------------- */

.has-youtube-bg {
     position: relative;
     overflow: hidden;
}

[class*="youtube-bg-"].has-youtube-bg {
     /* Suppress Stackable / core block-image background once YouTube takes over.
        Remove this rule if you'd rather keep the image as a poster fallback. */
     background-image: none !important;
}

.youtube-bg-wrap {
     position: absolute;
     inset: 0;
     overflow: hidden;
     pointer-events: none;
     z-index: 0;
}

.youtube-bg-iframe {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100vw;
     height: 56.25vw; /* 16:9 of 100vw */
     min-height: 100vh;
     min-width: 177.78vh; /* 16:9 of 100vh */
     transform: translate(-50%, -50%);
     pointer-events: none;
     border: 0;
}

/* Keep block content above the iframe */
.has-youtube-bg > *:not(.youtube-bg-wrap) {
     position: relative;
     z-index: 1;
}

/* Optional dim overlay — add `has-yt-overlay` alongside `youtube-bg-XXX` to enable */
.has-youtube-bg.has-yt-overlay::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .4);
     pointer-events: none;
     z-index: 0;
}