/*
 * Mobile Optimization for iOS/iPhone Display
 * ONLY targets #bp_675 and #bp_900 breakpoints
 * Does NOT affect desktop #bp_infinity breakpoint
 */

/* ==========================================================================
   GLOBAL MOBILE FIXES - Prevent horizontal scrolling on mobile only
   ========================================================================== */

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ==========================================================================
   MOBILE BREAKPOINT #BP_675 (Portrait mode ≤675px)
   ========================================================================== */

/* Main container */
#bp_675 {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

#bp_675 .borderbox {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* Remove problematic clearfix margins that cause layout issues */
#bp_675 .clearfix {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* All images must scale */
#bp_675 img {
  max-width: 100% !important;
  height: auto !important;
}

/* ====================
   POSTER IMAGE (Line 151-153)
   ==================== */
#bp_675 > .borderbox > .clip_frame.grpelem:first-child {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
}

#bp_675 > .borderbox > .clip_frame.grpelem:first-child img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ====================
   FACEBOOK & IMDB ICONS (Line 154-157) - LEFT ALIGNED
   ==================== */
#bp_675 > .borderbox > .clearfix.grpelem {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 15px !important;
  width: 100% !important;
  float: none !important;
  margin: 15px 0 !important;
  padding-left: 10px !important;
}

#bp_675 > .borderbox > .clearfix.grpelem > a.clip_frame {
  float: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 6px !important;
  margin: 0 !important;
}

/* ====================
   VIDEO CONTAINER (Line 158-161) - #pu235 and #u235 - CENTERED
   ==================== */
#bp_675 #pu235 {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#bp_675 #u235 {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#bp_675 #u235 iframe {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  display: block !important;
  margin: 0 auto !important;
}

@supports not (aspect-ratio: 16 / 9) {
  #bp_675 #u235 iframe {
    height: 56.25vw !important;
    max-height: 400px !important;
  }
}

/* ====================
   CREDITS IMAGE (Line 162) - #u607-33
   ==================== */
#bp_675 #u607-33 {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 15px auto !important;
}

/* ====================
   PLATFORM LOGOS (Line 163-169) - iTunes, Vudu, Google Play, YouTube, Amazon
   ==================== */
#bp_675 .platform-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 15px auto !important;
  float: none !important;
}

#bp_675 .platform-logos a {
  float: none !important;
  margin: 5px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 4px !important;
}

#bp_675 .platform-logos img {
  max-width: 80px !important;
  max-height: 30px !important;
  height: auto !important;
}

/* ====================
   CABLE PROVIDER LOGOS (Line 170-182)
   ==================== */
#bp_675 .colelem.clearfix {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 10px auto !important;
  float: none !important;
}

#bp_675 .colelem.clearfix img.grpelem {
  max-width: 80px !important;
  max-height: 24px !important;
  margin: 5px !important;
  float: none !important;
  display: inline-block !important;
}

/* ====================
   BOTTOM LOGOS (Line 183-187) - 32Thirteen, CIMM, Cinema Concepts
   ==================== */
#bp_675 .colelem.clearfix a.clip_frame {
  float: none !important;
  display: inline-block !important;
  margin: 10px !important;
}

#bp_675 .colelem.clearfix a.clip_frame img {
  max-width: 100px !important;
  height: auto !important;
}

#bp_675 .colelem.clearfix img.grpelem[alt*="CIMM"] {
  max-width: 100px !important;
  height: auto !important;
}

/* ====================
   COPYRIGHT (Line 188)
   ==================== */
#bp_675 img.colelem[alt*="©"] {
  width: 100% !important;
  max-width: 300px !important;
  display: block !important;
  margin: 15px auto !important;
}

/* ====================
   ITUNES BUTTON AT BOTTOM (Line 190) - RIGHT ALIGNED
   ==================== */
#bp_675 > .borderbox > a.rounded-corners {
  max-width: 250px !important;
  display: block !important;
  margin: 20px 10px 20px auto !important;
  float: right !important;
}

#bp_675 > .borderbox > a.rounded-corners img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   TABLET BREAKPOINT #BP_900 (Landscape mode 676-900px)
   ========================================================================== */

/* Main container */
#bp_900 {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

#bp_900 .borderbox {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* Remove problematic clearfix margins */
#bp_900 .clearfix {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* All images must scale */
#bp_900 img {
  max-width: 100% !important;
  height: auto !important;
}

/* Poster image */
#bp_900 img[src*="32thirteen_poster"] {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* Video iframe */
#bp_900 iframe {
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Center social media icons */
#bp_900 .colelem .clearfix {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  width: 100% !important;
  margin: 10px auto !important;
}

#bp_900 a[href*="facebook"],
#bp_900 a[href*="imdb"] {
  display: inline-block !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 6px !important;
  margin: 10px !important;
}

/* Platform logos */
#bp_900 .platform-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: 15px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

#bp_900 .platform-logos a {
  margin: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Cable provider logos */
#bp_900 img[alt*="EastlinkTV"],
#bp_900 img[alt*="Insight"],
#bp_900 img[alt*="Charter"],
#bp_900 img[alt*="RCN"],
#bp_900 img[alt*="Cox"],
#bp_900 img[alt*="Rogers"],
#bp_900 img[alt*="Shaw"],
#bp_900 img[alt*="DISH"],
#bp_900 img[alt*="Suddenlink"] {
  max-width: 100px !important;
  margin: 10px !important;
  display: inline-block !important;
}

/* Credits and copyright */
#bp_900 img[alt*="Credits"],
#bp_900 img[alt*="©"],
#bp_900 #u3095-33 {
  display: block !important;
  margin: 10px auto !important;
  max-width: 100% !important;
}

/* Center all colelem containers */
#bp_900 .colelem {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ==========================================================================
   iOS SPECIFIC FIXES (only for mobile viewports)
   ========================================================================== */

/* Smooth scrolling on mobile only */
@media (max-width: 900px) {
  html {
    scroll-behavior: smooth !important;
  }
}

/* Safe area for notch and bottom bar */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    #bp_675,
    #bp_900 {
      padding-top: max(10px, env(safe-area-inset-top)) !important;
      padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Improve tap highlighting on mobile only */
@media (max-width: 900px) {
  #bp_675 a,
  #bp_900 a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
  }
}