/* =========================================================
   CBMG – Full-Width Slider (final consolidated CSS)
   ========================================================= */

/* ----- Full-bleed wrapper while content stays container-aligned ----- */
.cbmg-fws{
  position:relative;
  width:100vw;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  isolation:isolate;
}
.cbmg-fws .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ----- Core sizing ----- */
.cbmg-fws__viewport{
  position:relative;
  height:var(--fws-h-desktop,700px);
  overflow:hidden;
  touch-action:pan-y;
}
@media (max-width:767px){
  .cbmg-fws__viewport{height:var(--fws-h-mobile,420px)}
}

/* ----- Layers ----- */



/* Slides: single live slide; prevent hit-testing on others */
.cbmg-fws__slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  pointer-events:none;
  will-change:opacity;
}
.cbmg-fws__slide.is-active{
  opacity:1; visibility:visible;
  pointer-events:auto;
  transition:opacity .45s ease;
  z-index:2;
}
.cbmg-fws__slide.is-fading{
  opacity:0; visibility:visible; /* allow fade-out then JS clears class */
  transition:opacity .45s ease;
  z-index:1;
}

/* Non-active mobile elements must not show during transitions */
.cbmg-fws__slide:not(.is-active) .cbmg-fws__mobile-img-wrap{display:none !important;}
@media (max-width:767px){
  .cbmg-fws__slide.ui-light.is-active .cbmg-fws__inner{
    background:linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
  }
  .cbmg-fws__slide.ui-light:not(.is-active) .cbmg-fws__inner{background:none}
}




.cbmg-fws__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  z-index:1; pointer-events:none;
}

/* Mobile inline image above text */
.cbmg-fws__mobile-img-wrap{display:none}
.cbmg-fws__mobile-img{width:100%; height:auto; display:block;}

@media (max-width:767px){
  .cbmg-fws__mobile-img-wrap{display:block; width:100vw; margin-bottom:16px; margin-left:-20px; z-index:2}
  .cbmg-fws__bg{display:none}
}

/* ----- Content block: left-aligned, respects WPB container widths ----- */
.cbmg-fws__inner{
  position:relative; z-index:2;
  height:100%;
  display:flex; align-items:center; justify-content:flex-start;
}
.cbmg-fws__content{width:50%; max-width:50%; margin:0; text-align:left}
@media (max-width:991px){ .cbmg-fws__content{width:70%; max-width:70%} }
@media (max-width:767px){ .cbmg-fws__content{width:100%; max-width:100%} }

.cbmg-fws__text{margin:0 0 18px 0}

/* ----- Mobile: legibility overlay for light UI ----- */
@media (max-width:767px){
  .cbmg-fws__slide.ui-light .cbmg-fws__inner{
    background:linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
  }
  .cbmg-fws__slide.ui-dark .cbmg-fws__inner{background:none}
}

/* ----- Controls: hide until JS ready to avoid pop-in ----- */
.cbmg-fws__controls{opacity:1}

/* ----- Controls cluster: [prev] [dots] [next] ----- */
.cbmg-fws__controls{
  position:absolute; left:0; right:0; bottom:28px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  gap:18px;
  pointer-events:auto;
}
@media (max-width:767px){
  .cbmg-fws__controls{bottom:16px; gap:14px}
}

/* Bullets */
.cbmg-fws__bullets{display:flex; gap:14px; justify-content:center}
.cbmg-fws__bullet{
  width:12px; height:12px; border-radius:50%;
  border:0; padding:0; cursor:pointer;
  background-color: var(--nav);
  opacity:.45; transition:opacity .2s ease;
}
.cbmg-fws__bullet:hover{opacity:.7}
.cbmg-fws__bullet.is-active{opacity:1}

/* Arrows */
.cbmg-fws__arrow{
  min-width:44px; min-height:44px;
  border:0; background:none!important; box-shadow:none!important;
  cursor:pointer; display:grid; place-items:center; line-height:1;
}
.cbmg-fws__arrow--prev::before,
.cbmg-fws__arrow--next::before{
  content:""; display:block; width:0; height:0; opacity:.6; transition:opacity .2s ease;
}
.cbmg-fws__arrow--prev::before{
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-right:12px solid var(--nav);
}
.cbmg-fws__arrow--next::before{
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-left:12px solid var(--nav);
}
.cbmg-fws__arrow:hover::before{opacity:1}

/* ----- Theme hooks for nav color (JS sets --nav on controls) ----- */
.ui-light { --nav: #fff }
.ui-dark  { --nav: var(--color-primary-dark) }

/* ----- Buttons keep VC’s native theme look ----- */
.vc_btn3-container.cbmg2-button{margin-top:10px}



/*--  full width slider mobile fixes  --*/

@media (max-width:767px){
  
  .cbmg-fws__inner {
	  height:auto;
  }
  
  .cbmg-fws .container {
	  height:100vh;
  }
  
  
}