/************************************************************
  BipolarBetty CSS v2.0 — Clean Final (Redux Full Width)
  - Slider full width
  - Hero overlay centered
  - Trustbar 4-col desktop / 2x2 mobile + tighter spacing
************************************************************/

/* ==========================================================
   GLOBAL SAFETY
========================================================== */
html, body{
  overflow-x: hidden !important;
}

/* ==========================================================
   SLIDER REVOLUTION — TRUE FULL WIDTH (edge-to-edge)
   Your row class: home-slider-row
========================================================== */
body.home .home-slider-row{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home .home-slider-row > .vc_column_container,
body.home .home-slider-row > .vc_column_container > .vc_column-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.home .rev_slider_wrapper,
body.home .rev_slider,
body.home rs-module-wrap,
body.home rs-module{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  left: 0 !important;
  margin: 0 !important;
}

/* ==========================================================
   HERO OVERLAY — CENTERED + RESPONSIVE PULL-UP
   Row class: hero-section
   Column class: hero-text
========================================================== */

/* Keep hero row stable and prevent drift */
body.home .vc_row.wpb_row.hero-section{
  position: relative !important;
  z-index: 50 !important;
  width: 100% !important;

  /* main overlap amount */
  transform: translateY(-165px) !important;

  /* prevent transform drift */
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: clip !important;
  transform-origin: center top !important;

  /* tighten gap below hero */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Center the hero content inside the stretched row */
body.home .vc_row.wpb_row.hero-section > .vc_column_container{
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 1100px !important;
}

body.home .vc_row.wpb_row.hero-section > .vc_column_container > .vc_column-inner{
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Hero “card” */
body.home .hero-text{
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  float: none !important;

  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  padding: 38px 42px;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.18);
}

/* Short-height laptops: pull more + compact */
@media (min-width: 992px) and (max-height: 760px){
  body.home .vc_row.wpb_row.hero-section{ transform: translateY(-220px) !important; }
  body.home .hero-text{ padding: 22px 26px !important; }
  body.home .hero-text p{ font-size: 0.95rem !important; line-height: 1.35 !important; }
}
@media (min-width: 992px) and (max-height: 700px){
  body.home .vc_row.wpb_row.hero-section{ transform: translateY(-240px) !important; }
  body.home .hero-text{ padding: 18px 22px !important; }
}

/* Mobile: reduce overlap + fit card */
@media (max-width: 767px){
  body.home .vc_row.wpb_row.hero-section{ transform: translateY(-90px) !important; }

  body.home .hero-text{
    max-width: 92% !important;
    padding: 18px 16px !important;
    border-radius: 14px !important;
  }

  body.home .hero-text .vc_custom_heading,
  body.home .hero-text h1,
  body.home .hero-text h2{
    font-size: clamp(32px, 8.5vw, 44px) !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
  }

  body.home .hero-cta-primary .vc_btn3,
  body.home .hero-cta-secondary .vc_btn3{
    width: 100% !important;
    display: block !important;
  }
}

/* ==========================================================
   TRUSTBAR — SINGLE ROW STRUCTURE (4 cols / 2 cols mobile)
   Row class: trustbar
   Column classes: logo-hbo, logo-newsweek, logo-sun, logo-tiktok
   Caption class: trustbar-caption (separate text block)
========================================================== */

/* Trustbar container: use GRID so WPBakery offsets/floats can't break it */
body.home .vc_row.wpb_row.trustbar{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-items: center !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;

  column-gap: 44px !important;
  row-gap: 16px !important;

  left: auto !important;
  right: auto !important;

  /* tighten space to hero */
  margin-top: -28px !important; /* adjust -18 to -42 */
  padding-top: 0 !important;
}

/* WPBakery clearfix can interfere */
body.home .vc_row.wpb_row.trustbar::before,
body.home .vc_row.wpb_row.trustbar::after{
  display: none !important;
}

/* Make each column behave as a clean grid item */
body.home .vc_row.wpb_row.trustbar > .vc_column_container{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home .vc_row.wpb_row.trustbar > .vc_column_container > .vc_column-inner{
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

/* Normalize logo module */
body.home .trustbar .wpb_single_image,
body.home .trustbar .wpb_single_image .vc_single_image-wrapper,
body.home .trustbar .wpb_single_image a{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  margin: 0 !important;
}

body.home .trustbar .wpb_single_image img{
  display: block !important;
  height: 30px !important;
  width: auto !important;
  max-width: 165px !important;
  margin: 0 auto !important;
  vertical-align: middle !important;

  opacity: .70 !important;
  filter: grayscale(100%) brightness(0.35) !important;
  transition: opacity .25s ease, filter .25s ease, transform .25s ease !important;
}

/* Optical tweaks (DESKTOP ONLY) */
@media (min-width: 768px){
  body.home .trustbar .logo-hbo img{ height: 28px !important; }
  body.home .trustbar .logo-newsweek img{ height: 30px !important; }
  body.home .trustbar .logo-sun img{ height: 28px !important; transform: translate(8px, 1px); }
  body.home .trustbar .logo-tiktok img{ height: 29px !important; transform: translateY(-2px); }
}

/* Hover: brighter + subtle lift */
body.home .trustbar .wpb_single_image a:hover img{
  opacity: 1 !important;
  filter: grayscale(0%) brightness(1.08) contrast(1.05) !important;
  transform: translateY(-2px) !important;
}

/* Mobile: 2x2 grid + remove nudges (fixes “HBO slightly left”) */
@media (max-width: 767px){
  body.home .vc_row.wpb_row.trustbar{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 14px !important;

    max-width: 92% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    margin-top: -12px !important; /* smaller pull on phones */
  }

  body.home .trustbar .logo-sun img,
  body.home .trustbar .logo-tiktok img{
    transform: none !important;
  }
}

/* Caption: darker + tighter spacing */
body.home .trustbar-caption{
  text-align: center !important;
  max-width: 1100px !important;
  margin: 6px auto 22px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;

  font-size: 0.85rem !important;
  letter-spacing: .03em !important;
  color: rgba(0,0,0,0.55) !important;
  font-weight: 500 !important;
}