/* Front-end styles for the Hero Image Banner */
.hi-hero {
  position: relative;
  width: 100%;
}

.hi-hero .hi-inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: var(--hi-content-max, none);
}

/* Device-specific heights */
@media (min-width: 1025px) {
  .hi-hero .hi-inner { height: var(--hi-h-desktop, auto); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .hi-hero .hi-inner { height: var(--hi-h-tablet, auto); }
}
@media (max-width: 640px) {
  .hi-hero .hi-inner { height: var(--hi-h-mobile, auto); }
}

/* Content above background */
.hi-hero .hi-content-wrap {
  position: relative;
  z-index: 2;
}

/* Place the picture layer behind content, make it non-interactive */
.hi-hero picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none; /* prevents covering clicks */
}

/* Overlay (off by default) */
.hi-hero .hi-overlay { display: none; }

/* Base <img> inside picture */
.hi-hero .hi-img {
  display: block;
  width: 100%;
  height: 100%;
  object-position: var(--hi-objpos-desktop, 50% 50%);
  position: absolute;
  inset: 0;
  pointer-events: none; /* extra safety */
}
/* Prevent visible ALT text if the placeholder fails to load (e.g., CSP blocks data:) */
.hi-hero picture .hi-img {
  color: transparent;
  text-shadow: none;
}

/* Swap object-position per device */
@media (min-width: 1025px) {
  .hi-hero .hi-img { object-position: var(--hi-objpos-desktop, 50% 50%); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .hi-hero .hi-img { object-position: var(--hi-objpos-tablet, 50% 50%); }
}
@media (max-width: 640px) {
  .hi-hero .hi-img { object-position: var(--hi-objpos-mobile, 50% 50%); }
}

/* Placement rules */

/* DESKTOP */
@media (min-width: 1025px) {
  .hi-hero.--desktop-behind-left  picture .hi-img { width: 50%; left: 0; right: auto; }
  .hi-hero.--desktop-behind-right picture .hi-img { width: 50%; right: 0; left: auto; }

  /* below: picture becomes static flow *under* content */
  .hi-hero.--desktop-below picture {
    position: static;
    inset: auto;
    z-index: auto;
    margin-top: 16px;
  }
  .hi-hero.--desktop-below picture .hi-img {
    position: static;
    width: 100%;
    height: auto;
  }
}

/* TABLET */
@media (min-width: 641px) and (max-width: 1024px) {
  .hi-hero.--tablet-behind-left  picture .hi-img { width: 50%; left: 0; right: auto; }
  .hi-hero.--tablet-behind-right picture .hi-img { width: 50%; right: 0; left: auto; }

  .hi-hero.--tablet-below picture {
    position: static;
    inset: auto;
    z-index: auto;
    margin-top: 16px;
  }
  .hi-hero.--tablet-below picture .hi-img {
    position: static;
    width: 100%;
    height: auto;
  }
}

/* MOBILE */
@media (max-width: 640px) {
  .hi-hero.--mobile-behind-left  picture .hi-img { width: 50%; left: 0; right: auto; }
  .hi-hero.--mobile-behind-right picture .hi-img { width: 50%; right: 0; left: auto; }

  .hi-hero.--mobile-below picture {
    position: static;
    inset: auto;
    z-index: auto;
    margin-top: 12px;
  }
  .hi-hero.--mobile-below picture .hi-img {
    position: static;
    width: 100%;
    height: auto;
  }
}
/* When placement is "below", ignore the device height and let it expand 
@media (min-width: 1025px) {
  .hi-hero.--desktop-below .hi-inner { height: auto !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .hi-hero.--tablet-below .hi-inner { height: auto !important; }
}
@media (max-width: 640px) {
  .hi-hero.--mobile-below .hi-inner { height: auto !important; }
}
*/

/* Background video layer */
.bb-video-wrap { position:absolute; inset:0; overflow:hidden; z-index:0; }
.bb-video { width:100%; height:100%; object-fit:var(--bb-object-fit, cover); display:block; pointer-events:none; }

/* Half placement */
.bb-video-wrap.is-half { width:50%; height:100%; }
.bb-video-wrap.is-left { left:0; right:auto; }
.bb-video-wrap.is-right { right:0; left:auto; }

/* Below content: mirror your image-below rules */
.--desktop-below .bb-video-wrap.bb-video--desktop,
.--tablet-below .bb-video-wrap.bb-video--tablet,
.--mobile-below .bb-video-wrap.bb-video--mobile {
  position:static; width:100%; height:auto; margin-top:var(--hi-below-gap, 0);
}
.--desktop-below .bb-video.bb-video--desktop,
.--tablet-below .bb-video.bb-video--tablet,
.--mobile-below .bb-video.bb-video--mobile {
  width:100%; height:auto; max-height:none;
}

/* Only one device video visible per breakpoint */
@media (max-width:640px){ .bb-video--tablet, .bb-video--desktop { display:none; } }
@media (min-width:641px) and (max-width:1024px){ .bb-video--mobile, .bb-video--desktop { display:none; } }
@media (min-width:1025px){ .bb-video--mobile, .bb-video--tablet { display:none; } }


/* Video overlay (video-only) */
.bb-video-wrap { position:absolute; inset:0; overflow:hidden; z-index:0; }
.bb-video { width:100%; height:100%; object-fit:var(--bb-object-fit, cover); display:block; pointer-events:none; }
.bb-video-overlay { position:absolute; inset:0; pointer-events:none; z-index:1; }

/* Half placement */
.bb-video-wrap.is-half { width:50%; height:100%; }
.bb-video-wrap.is-left { left:0; right:auto; }
.bb-video-wrap.is-right { right:0; left:auto; }

/* Below content */
.--desktop-below .bb-video-wrap.bb-video--desktop,
.--tablet-below .bb-video-wrap.bb-video--tablet,
.--mobile-below .bb-video-wrap.bb-video--mobile { position:static; width:100%; height:auto; margin-top:var(--hi-below-gap, 0); }
.--desktop-below .bb-video.bb-video--desktop,
.--tablet-below .bb-video.bb-video--tablet,
.--mobile-below .bb-video.bb-video--mobile { width:100%; height:auto; max-height:none; }

/* Device visibility */
@media (max-width:640px){ .bb-video--tablet, .bb-video--desktop { display:none; } }
@media (min-width:641px) and (max-width:1024px){ .bb-video--mobile, .bb-video--desktop { display:none; } }
@media (min-width:1025px){ .bb-video--mobile, .bb-video--tablet { display:none; } }
@media (min-width:1441px) {
    #page .hi-hero .hi-img {
      object-fit: contain !important;
      object-position: right center !important;
    }
}
@media (min-width:1990px) {
    #page .hi-hero .hi-img {
      object-fit: contain !important;
      object-position: right center !important;
    }
}