/* UNA BG Pack -> Hero binding (P1)
   Applies the Style Library vNext Background Pack to the first .is-hero element on the page.
   - No markup changes required (video is injected via JS when enabled).
   - Overlay uses CSS vars set by the module (or falls back to compiled vars).
*/

.is-hero{
  position: relative;
  overflow: hidden;
  background-color: var(--una-hero-bgp-color, var(--una-bgp-color, transparent));
  background-image:
    var(--una-hero-bgp-image-url, var(--una-bgp-image-url, none)),
    linear-gradient(
      var(--una-hero-bgp-gradient-angle, var(--una-bgp-gradient-angle, 135deg)),
      var(--una-hero-bgp-gradient-color-1, var(--una-bgp-gradient-color-1, transparent)),
      var(--una-hero-bgp-gradient-color-2, var(--una-bgp-gradient-color-2, transparent))
    );
  background-size: var(--una-hero-bgp-image-size, var(--una-bgp-image-size, cover));
  background-position: var(--una-hero-bgp-image-position, var(--una-bgp-image-position, center center));
  background-repeat: var(--una-hero-bgp-image-repeat, var(--una-bgp-image-repeat, no-repeat));
  background-attachment: var(--una-hero-bgp-image-attachment, var(--una-bgp-image-attachment, scroll));
}

.is-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--una-hero-bgp-overlay-opacity, 0));
  pointer-events:none;
  z-index:1;
}

.is-hero > *{
  position: relative;
  z-index: 2;
}

/* Video layer (injected) */
.is-hero .una-hero-bgp__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  z-index:0;
}

/* If video exists, prefer poster image as a fallback background image */
.is-hero.una-hero-bgp--has-video{
  background-image:
    var(--una-hero-bgp-video-poster-url, var(--una-bgp-video-poster-url, none)),
    linear-gradient(
      var(--una-hero-bgp-gradient-angle, var(--una-bgp-gradient-angle, 135deg)),
      var(--una-hero-bgp-gradient-color-1, var(--una-bgp-gradient-color-1, transparent)),
      var(--una-hero-bgp-gradient-color-2, var(--una-bgp-gradient-color-2, transparent))
    );
  background-size: cover;
  background-position: center center;
}

/* Respect prefers-reduced-motion: stop any JS-driven transforms */
@media (prefers-reduced-motion: reduce){
  .is-hero{ background-attachment: scroll; }
  .is-hero .una-hero-bgp__video{ transform:none !important; }
}