/* ===========================================================================
   site-fixes.css — post-migration QA fixes for ExceptionalWeb.com
   Loaded site-wide AFTER the Webflow stylesheet so these rules win.
   Each fix is dated and explained. Keep additions small and targeted.
   =========================================================================== */

/* 2026-06-04 — Mobile testimonial video: collapse + mis-placed frame.
   The single "floated" testimonial video (.line-shadow > .video-gif-container >
   .w-background-video) broke two ways on mobile (<=767px):
   1) The container had no width in Webflow's CSS and the inner <video> is
      position:absolute, so it collapsed to width:0 -> video invisible.
   2) .line-shadow did not establish a block formatting context, so a float in
      the layout pushed the video ~430px down inside it; the frame (.line-shadow
      :before, height:100%) then rendered ~930px tall and overlapped the heading
      instead of hugging the video.
   Fix: make .line-shadow a flow-root (contains the float -> wraps the video at
   its real height) with an explicit width (so the BFC doesn't shrink), and force
   the video container/atom to full width. Frame now hugs the video; height
   auto-adapts per page (500 on /programs, 400 on /outcomes). The multi-video
   carousels (210px) and home are unaffected. */
@media screen and (max-width: 767px) {
  .line-shadow { display: flow-root !important; width: 100% !important; }
  .video-gif-container,
  .video-gif-container .w-background-video { width: 100% !important; }
}