/******************************************************************/
/*                     CUSTOM VIDEO CONTAINERS                    */
/******************************************************************/

/*  Basically allows for:                                         */
/*      Sizing proportional to the image/text section ratio       */
/*      Filling background behind video if ratio isn't 16:9       */
/*      Custom thumbnails/play buttons to bypass initial YouTube  */
/*      iframe branding and heavy load scripts                    */
/*                                                                */
/*  URL PARAMETER TIPS (for iframes ):                            */
/*    autoplay=1   : Starts playback immediately upon clicking    */
/*    rel=0        : Limits end-screen video suggestions to our   */
/*                   channel's videos                             */
/*    controls=0   : Hides the bottom scrub bar and controls      */
/*    cc_load_policy=1 Forces CC to start on                      */
/*    cc_lang_pref=en Forces CC in English/es for Spanish, use    */
/*                    with above                                  */
/*    loop=1&playlist=VIDEO_ID   Loops vid infinitely             */
/*    mute=1         Mutes on load, use with autplay=1 to prevent */
/*                   browser blocking                             */
/*    start=X, end=Y Clips                                        */
/*    youtube-nocookie.com  Does what it says on the tin          */
/*    playsinline=1  Prevents video expanding to fullsized player */
/*                   on mobile                                    */
/*    color=white    Changes scrub bar to white                   */
/* enablejsapi=1&origin=YOUR_DOMAIN                               */
/*                   Allows JS API tracking via goople analytics  */
/*                                                                */
/*  THUMBNAIL CDN FORMAT (https://img.youtube.com/vi/[ID]/):      */
/*  - maxresdefault.jpg (Full HD 1080p cover frame)               */
/*  - hq1.jpg, hq2.jpg, hq3.jpg (High-res video timeline stills)  */
/******************************************************************/

.video-framed-section {
  position: relative;
  flex: 0 0 49%;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.video-framed-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.video-framed-section:hover img { transform: scale(1.03); }

/* 16:9 ratio and gradient background when playing */
.video-framed-section.is-playing { aspect-ratio: 16 / 9; background: linear-gradient(136deg, var(--fau-red, #cc0000) 0%, #002142 112.25%); }
.video-framed-section iframe { width: 100%; height: 100%; border: none; }

/* custom play button */
.play-btn {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--fau-red, #cc0000);
  border: 2px solid #ffffff;
  border-radius: 50%;
  width: 72px;
  height: 72px;
  cursor: pointer;
  z-index: 6;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.1); background: var(--fau-blue, #003366); }

/* mobile handling */
@media screen and (max-width: 991px) {
  .video-framed-section { flex: 0 0 100%; width: 100%; }
  .video-framed-section .video-wrapper { width: calc(100% - 4rem); margin: 2rem; }
}