{% if include.banner_content._type == 'image' %}
<section class="bg-center bg-cover flex items-{{include.banner_content.text_horizontal_position}} justify-{{include.banner_content.text_vertical_position}} text-{{include.banner_content.text_alignment}} svh padding-banner relative" style="background-image:url('{{include.banner_content.image}}')"> 

    {% if include.banner_content.desktop_image_overlay == 'black' %}
    <div class="md:landscape:absolute md:landscape:w-full md:landscape:h-full inset-0 bg-[rgba(1,1,1,0.3)]"></div>
    {% elsif include.banner_content.desktop_image_overlay == 'white' %}
    <div class="md:landscape:absolute md:landscape:w-full md:landscape:h-full inset-0 bg-[rgba(255,255,255,0.3)]"></div>
    {% elsif include.banner_content.desktop_image_overlay == 'none' %}
    {% endif %}

    {% if include.banner_content.mobile_image_overlay == 'black' %}
    <div class="md:landscape:hidden absolute w-full h-full inset-0 bg-[rgba(1,1,1,0.3)]"></div>
    {% elsif include.banner_content.mobile_image_overlay == 'white' %}
    <div class="md:landscape:hidden absolute w-full h-full inset-0 bg-[rgba(255,255,255,0.3)]"></div>
    {% elsif include.banner_content.mobile_image_overlay == 'none' %}
    {% endif %}

        <div class="lg:w-[40%] md:w-[45%] md:text-{{include.banner_content.desktop_colour_of_text}} text-{{include.banner_content.mobile_colour_of_text}} md:space-y-6 space-y-4 z-[2]">

            {% if include.banner_content.subtitle_position == 'above-heading' %}
            <p class="uppercase">{{include.banner_content.subtitle}}</p>
            {% endif %}


            <h3 class="title-lg">{{include.banner_content.heading}}</h3>

            {% if include.banner_content.subtitle_position == 'below-heading' %}
            <p class="uppercase">{{include.banner_content.subtitle}}</p>
            {% endif %}
            
            {{ include.banner_content.description_html }}
        </div>

</section>


{% elsif include.banner_content._type == 'vimeo' %}
<section class="video-background-section relative svh">
  <!-- VIDEO WRAPPER -->
  <div class="video-wrapper">
    <div class="video-embed overflow-hidden">
        <iframe src="https://player.vimeo.com/video/{{include.banner_content.vimeo_id}}?background=1&autoplay=1&muted=1&loop=1" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
        </iframe>

    </div>
  </div>

  <!-- POSTER IMAGE -->
  <img src="{{include.banner_content.image}}" class="video-poster absolute inset-0 w-full h-full object-cover z-[1]" />

  <!-- overlay (same as image variant) -->
  {% if include.banner_content.image_overlay == 'black' %}
  <div class="absolute w-full h-full inset-0 bg-[rgba(1,1,1,0.3)]"></div>
  {% elsif include.banner_content.image_overlay == 'white' %}
  <div class="absolute w-full h-full inset-0 bg-[rgba(255,255,255,0.3)]"></div>
  {% elsif include.banner_content.image_overlay == 'none' %}
  {% endif %}

  <!-- TEXT WRAPPER -->
  <div class="padding-banner absolute inset-0 w-full h-full flex items-{{include.banner_content.text_horizontal_position}} justify-{{include.banner_content.text_vertical_position}} z-[2]">
        <div class="lg:w-[40%] md:w-[45%] md:text-{{include.banner_content.desktop_colour_of_text}} text-{{include.banner_content.mobile_colour_of_text}} md:space-y-6 space-y-4 text-{{include.banner_content.text_alignment}}">
            {% if include.banner_content.subtitle_position == 'above-heading' %}
            <p class="uppercase">{{include.banner_content.subtitle}}</p>
            {% endif %}

            <h3 class="title-lg">{{include.banner_content.heading}}</h3>

            {% if include.banner_content.subtitle_position == 'below-heading' %}
            <p class="uppercase">{{include.banner_content.subtitle}}</p>
            {% endif %}

            {{ include.banner_content.description_html }}
        </div>
    </div>
</section>


{% elsif include.banner_content._type == 'custom-video-upload' %}
<section class="flex items-{{include.banner_content.text_horizontal_position}} justify-{{include.banner_content.text_vertical_position}} text-{{include.banner_content.text_alignment}} svh padding-banner relative"> 

    <video autoplay muted loop playsinline poster="{{ include.banner_content.image }}" 
       class="absolute inset-0 w-full h-[110%] object-cover -z-[1]">
    <source src="{{ include.banner_content.custom_video_upload_url }}" type="video/mp4" />
    </video>


    <div class="absolute w-full h-full inset-0 bg-[rgba(1,1,1,0.3)]"></div>

        <div class="lg:w-[40%] md:w-[45%] md:text-{{include.banner_content.desktop_colour_of_text}} text-{{include.banner_content.mobile_colour_of_text}} md:space-y-6 space-y-4 z-[2]">

            {% if include.banner_content.subtitle_position == 'above-heading' %}
            <p class="uppercase">{{include.banner_content.subtitle}}</p>
            {% endif %}


            <h3 class="title-lg">{{include.banner_content.heading}}</h3>

            {% if include.banner_content.subtitle_position == 'below-heading' %}
            <p class="uppercase">{{include.banner_content.subtitle}}</p>
            {% endif %}
            
            {{ include.banner_content.description_html }}
        </div>

</section>
{% endif %}

<style>
  .video-background-section {
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden!important;
}
.video-wrapper {
    z-index: -999;
    background-color: #000;
    width: 1000%;
    height: 100%;
    padding-bottom: 56.25%;
    position: absolute;
}
@media screen and (max-width: 991px) {
    .video-embed {
        z-index: 1;
    }
}
.video-embed {
    opacity: .75;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}
</style>


<script src="https://player.vimeo.com/api/player.js"></script>
<script>
  const iframe = document.querySelector('.video-embed iframe');
  const poster = document.querySelector('.video-poster');
  const player = new Vimeo.Player(iframe);

  // Hide poster as soon as video starts playing
  player.on('play', function() {
    poster.style.transition = 'opacity 0.5s ease';
    poster.style.opacity = 0;

    // optional: remove from DOM after fade
    setTimeout(() => poster.remove(), 500);
  });
</script>