/**
 * Hero CSS
 */

/* Default Hero Variations */

.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Video Background Styles for all hero types */
  .hero-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
  }

  .hero-video-background.loaded {
    opacity: 1; /* Fade in when loaded class is added */
  }

  /* Enhanced YouTube/Vimeo iframe video styling */
  .hero-video-background iframe,
  .hero-video-background video.self-hosted-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; /* Full viewport width */
    height: 56.25vw; /* 16:9 aspect ratio (9/16 = 0.5625) */
    min-height: 100%; /* Ensure it covers full height */
    min-width: 177.77vh; /* 16:9 aspect ratio (16/9 = 1.7777) */
    background-color: black;
    border: none; /* Remove iframe border */
    object-fit: cover;
    
    /* Fix for YouTube iframe black bars */
    &[src*="youtube.com"],
    &[src*="vimeo.com"] {
      /* Force extra width/height to prevent letterboxing */
      width: 150vw !important;
      height: 150vh !important;
      min-width: 200% !important;
      min-height: 200% !important;
    }
    
    @media (min-width: 992px) {
      /* Adjust video scaling on larger screens */
      width: 100%;
      height: 100%;
      min-width: 100%;
      object-fit: cover;
      object-position: center center;
      
      /* Maintain the YouTube fix for desktop */
      &[src*="youtube.com"],
      &[src*="vimeo.com"] {
        width: 150% !important;
        height: 150% !important;
      }
    }
  }

  /* Hide video on small screens */
  @media (max-width: 767px) {
    .hero-video-background {
      display: none;
    }
  }

  /* Back button styling */
  .hero-back-button {
    position: relative;
    padding-top: var(--spacing-xl);
    z-index: 3;
  }

  .hero-wrapper {
    display: flex;
    flex-direction: column-reverse;

    @media screen and (min-width: 992px) {
      /* Keep flex layout for desktop to maintain tablet-style positioning */
      display: flex;
      width: 100%;
    }

    .hero-content {
      padding: 3.6rem;
      z-index: 2;

      @media screen and (min-width: 992px) {
        padding: 0;
        height: 100%;
      }

      &.has-image {
        background-color: rgba(0, 0, 0, 0.85);

        @media (min-width: 992px) {
          background-color: transparent;
          
          .hero-content-doublebag-wrapper {
            width: 55rem;
            margin: var(--spacing-xl) 0;

            .hero-content-doublebag{
               width:100%;
            }
          }
        
        }
     
       
       
      }

      .hero-content-doublebag-wrapper{
        max-width:65rem;
        padding-left: 0px;
        padding-right: 0px;

        .hero-content-doublebag{
           width:100%;
        }
      }


      .hero-content-doublebag {
        @media (min-width: 992px) {
          background-color: transparent;
          position: relative;
          padding: 3.6rem;
          display: inline-block;
          z-index: 1;
          &.has-image {
            background-color: rgba(0, 0, 0, 0.85);
          }
        }
      }

      .hero-content-wrapper {
        display: flex;
        flex-direction: column;

        .hero-description {
          display: inline-block;
          text-wrap: balance;
          width: 100%;
          p {
            color: inherit;
            text-wrap: balance;
          }
        }

        .btn {
          align-self: flex-start;
        }
      }

      .hero-title {
        text-transform: uppercase;
        margin: 0 0 1.2rem 0;
        padding: 0;
        text-wrap: balance;

        @media (min-width: 992px) {
          font-size: 7.2rem;
          line-height: 7.4rem;
        }
        @media (max-width: 992px) {
          font-size: 5.2rem;
          line-height: 5.4rem;
        }
        @media (max-width: 768px) {
          font-size: 4.2rem;
          line-height: 4.4rem;
        }
      }

      .hero-description {
        margin: 1.6rem 0;
        display: inline-block;
        text-wrap: balance;
        p {
          color: inherit;
          text-wrap: balance;
        }
      }
    }

    /* Full-width image styling for all hero variations */
    .hero-image {
      position: relative;
      width: 100%;
      height: 40rem;
      z-index: 1;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      /* Consistent positioning across all screen sizes */
    }
  }
}

section.hero.no-image {
  margin-bottom: 0 !important;
}

section.hero:not(.push-down) {
  margin-top: 0 !important;
}


.hero-content-doublebag:not(.has-image) {
  padding-left: 0px !important;
  margin-top: 3.6rem;
}

/* Title styling for all heroes EXCEPT homepage */
body:not(.home) .hero-title {
  font-size: 4.4rem;
  line-height: 4.6rem;
}


/* Responsive States */

@media (max-width: 768px) {
  body:not(.home) .hero .hero-content:not(.has-image) {
    padding-bottom: 0 !important;
    padding-left: 3.4rem !important;
  }
}

@media (max-width: 992px) {
  body:not(.home) .hero .hero-content:not(.has-image) {
    padding-left:0 !important;
  }
}

section.hero {
  @media (min-width: 991px) {
    .hero-wrapper.has-image {
      min-height: 75rem !important;
      height: auto !important; /* Allow container to grow */
    }
  }
  @media (max-width: 992px) {
    .hero-wrapper.has-image {
      min-height: 60vh !important;
      max-height:900px !important;
    }
    .hero-content.has-image {
      margin-top: 3.6rem;
      margin-bottom: 3.6rem;
    }
  }
  @media (max-width: 768px) {
    .hero-wrapper.has-image {
      height: 80vh !important;
      max-height: 800px !important;
    }
}