/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *= require ./bulma.min.css
 *= require ./custom.css
 */

 /* Keeps 16:9 and scales fluidly */
 .video-container {
   position: relative;
   width: 100%;
   max-width: 100%;
   aspect-ratio: 16 / 9;
 }

 .video-container iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
 }

 /* Make it go edge-to-edge on small screens (full viewport width) */
 @media (max-width: 768px) {
   .video-full-bleed {
     width: 100vw;
     /* full viewport width */
     margin-left: 50%;
     /* center the bleed */
     transform: translateX(-50%);
     border-radius: 0;
     /* optional: remove rounding inside Bulma .notification */
   }
 }