fix: eliminate black bars in video modal player

Enforce full-width/height video display and dynamic object-fit logic to prevent letterboxing and layout gaps.

- Add robust CSS overrides to 'css/tailwind.source.css' to ensure video fills the stage.
- Update 'VideoModal.js' to dynamically switch between 'cover' and 'contain' based on aspect ratio match.
- Handle ambient canvas positioning to prevent layout shifts.

css/tailwind.source.css

@@ -6102,43 +6102,75 @@
 
 /* Embed & Video Modal Fixes */
 @layer components {
-  /* ensure the video fills the stage and doesn't show a black strip */
-  #embedVideo,
+  /* Force the video stage to let the video fully fill it and prevent 80vh constraints */
+  .video-modal__stage,
   .video-modal__video,
-  .video-modal__video > .video-modal__media,
-  .video-modal__video video#modalVideo,
-  .video-modal__video .video-modal__media {
-    display: block;
+  .video-modal__panel {
+    /* allow child to fill: do not let other rules limit height */
+    max-height: none !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    display: flex !important;
+    align-items: stretch !important;     /* allows the video to stretch vertically */
+    justify-content: center !important;
+  }
+
+  /* Prevent any earlier max-height on modal container from clashing */
+  .bv-modal__panel[role="dialog"],
+  .bv-modal__panel {
+    max-height: none !important;
+  }
+
+  /* Definitive video rules */
+  #modalVideo,
+  .video-modal__media {
+    display: block !important;
     width: 100% !important;
     height: 100% !important;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
-    object-position: center center;
+    max-width: 100% !important;
+    max-height: 100% !important;   /* ensure no earlier max-height causes clipping */
+    object-fit: cover !important;   /* or contain if you prefer letterbox */
+    object-position: center center !important;
     background: transparent !important;
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
+    padding: 0 !important;
+    margin: 0 !important;
+    box-sizing: border-box !important;
   }
 
-  /* make sure the stage wrapper doesn’t add bottom padding/space */
-  .video-modal__stage,
-  .video-modal__video {
-    padding: 0;
-    margin: 0;
-    display: flex;
-    align-items: stretch;
-    justify-content: center;
+  /* permanent class to force fill */
+  .video-modal__media--fill {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    object-position: center center !important;
+    background: transparent !important;
   }
 
+  .video-modal__stage {
+    position: relative;           /* ensure ambient is absolutely positioned relative to stage */
+    overflow: hidden;             /* clip any bleed visually; prevents layout expansion */
+  }
+
+  .video-modal__ambient {
+    position: absolute;
+    inset: calc(var(--video-modal-ambient-bleed) * -1);
+    pointer-events: none;         /* ensure it never captures pointer events */
+    z-index: 0;                   /* behind content */
+    will-change: transform, opacity;
+  }
+
+  /* ensure video is above ambient */
+  .video-modal__video { position: relative; z-index: 1; }
+
   /* if there is an ambient canvas or overlay, ensure it doesn't change layout */
-  .video-modal__ambient,
   .video-modal__ambient-canvas {
-    position: absolute;
-    inset: 0;
+    position: relative;
     width: 100%;
     height: 100%;
-    pointer-events: none;
+    display: block;
   }
 
   /* Logo accent wiring */