/* Hero video backdrop — hero area only (pre sidebar-extend) */

body.hcs-video-hero::before,
body:has(.hcs-hero-video)::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

.hero.hcs-wind {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0a1f3d !important;
  background-image: none !important;
}

.hero .hcs-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.hero.hcs-wind::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(18, 32, 48, 0.28) 0%,
    rgba(11, 61, 99, 0.36) 45%,
    rgba(55, 35, 18, 0.32) 100%
  );
}

.hero .hero-inner,
.hero .container {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero .hcs-hero-video {
    display: none !important;
  }
}
/* ============================================================
   LOCAL PREVIEW ONLY — hero video landscape continues under sidebar
   Do not ship to IONOS until Chelsea asks.
   Fixed underlay escapes clip (do not set overflow-x on html/body).
   ============================================================ */

body.hcs-video-hero::before,
body:has(.hcs-hero-video)::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

.hero.hcs-wind {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0a1f3d !important;
  background-image: none !important;
}

.hero .hcs-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.hero.hcs-wind::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(18, 32, 48, 0.28) 0%,
    rgba(11, 61, 99, 0.36) 45%,
    rgba(55, 35, 18, 0.32) 100%
  );
}

.hero .hero-inner,
.hero .container {
  position: relative;
  z-index: 2;
}

@media (min-width: 992px) {
  .main-wrapper {
    overflow: visible !important;
  }

  .saltire-ribbon {
    position: relative;
    z-index: 1028;
  }

  /* Login band above fixed hero underlay — force visible unless story-hide class is on */
  body.hcs-video-hero:not(.hc-hide-portal-over-story) .portal-login-cluster--desktop {
    display: flex !important;
    position: fixed !important;
    z-index: 2000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .hero.hcs-wind {
    overflow: visible !important;
    background-color: transparent !important;
    isolation: auto !important;
  }

  /* First-screen: fixed underlay under translucent sidebar (escapes ancestor clip) */
  body:not(.hc-past-hero) .hero.hcs-wind > .hcs-hero-video {
    position: fixed !important;
    inset: unset !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 1020 !important;
    pointer-events: none !important;
    object-fit: cover !important;
    /* top/height set by JS measure (inline) */
  }

  body:not(.hc-past-hero) .hero.hcs-wind::after {
    position: fixed !important;
    inset: unset !important;
    left: 0 !important;
    width: 100vw !important;
    top: var(--hc-fixed-vid-top, 0px) !important;
    height: var(--hc-fixed-vid-height, 100%) !important;
    z-index: 1021 !important;
    pointer-events: none !important;
  }

  body:not(.hc-past-hero) .hero.hcs-wind .hero-inner,
  body:not(.hc-past-hero) .hero.hcs-wind .container {
    position: relative;
    z-index: 1022;
  }

  /* Past hero: absolute within hero — reel owns sidebar; clear fixed cover */
  body.hc-past-hero .hero.hcs-wind > .hcs-hero-video {
    position: absolute !important;
    inset: 0 !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    top: auto !important;
    z-index: 0 !important;
    pointer-events: none !important;
    object-fit: cover !important;
  }

  body.hc-past-hero .hero.hcs-wind::after {
    position: absolute !important;
    inset: 0 !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .navbar-hc {
    background-image: none !important;
    background-color: transparent !important;
    background: linear-gradient(
      180deg,
      rgba(10, 31, 61, 0.28) 0%,
      rgba(11, 28, 51, 0.45) 28%,
      rgba(10, 31, 61, 0.68) 100%
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hcs-hero-video {
    display: none !important;
  }
}