#if($imageUrl || $bgcolor)

<script>


svDocReady(function() {
  // Only proceed if classes exist
  var hero = $svjq('.holder-hero');

  if (hero.length) {
    var imgUrl = "$imageUrl";
    var bgcolor = "$bgcolor";
     
     
     
    if (imgUrl || bgcolor) {
       
       
       hero.css({
           'background-size': 'cover',
           'background-position': 'center center',
           'background-repeat': 'no-repeat',
           'position': 'relative'
         });
       
      if (imgUrl){
         // Set as background image (cover) on .holder-hero
      	hero.css({
           'background-image': 'url("' + imgUrl + '")'
         });
         // Create black overlay with opacity 0.7
         var overlay = $svjq('<div class="hero-bg-overlay"></div>').css({
           position: 'absolute',
           top: 0, left: 0, right: 0, bottom: 0,
           width: '100%',
           height: '100%',
           background: 'rgba(0,0,0,0.7)',
           zIndex: 1,
           pointerEvents: 'none'
         });
         // Remove any previous overlay (prevents duplicates)
         hero.find('.hero-bg-overlay').remove();

         // Insert overlay as the first child of .holder-hero
         hero.prepend(overlay);
      } else{
         hero.addClass(bgcolor);

      }

      // Ensure all other children are above the overlay
      hero.children().not('.hero-bg-overlay').css({
        position: 'relative',
        zIndex: 2
      });
    }
  }
});


</script>

#end