/* =========================================
   HERO IMAGE ONLY
   Match responsive sizing to video hero
   + account for fixed navbar on tablet/mobile
========================================= */

.hero-image-only,
.hero-image-only * {
  box-sizing: border-box;
}

.hero-image-only {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000;

  --hero-header-offset: 0px;
}

/* Real <img> (preload-scanner discoverable); object-fit gives the cover crop. */
.hero-image-only__bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  z-index: 1;
}

/* Astra / full-width safety */
.hero-image-only.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* =========================================
   HERO HEIGHT LOGIC
========================================= */

/* Use a pseudo-element to create the frame height */
.hero-image-only::after {
  content: "";
  display: block;
  width: 100%;
  padding-top: calc((9 / 21) * 100% + var(--hero-header-offset));
}

/* Default capped height, like video hero */
.hero-image-only {
  max-height: 600px;
}

/* Short viewport handling */
@media (max-height: 700px) {
  .hero-image-only {
    max-height: 70vh;
  }
}

/* Extra large screens */
@media (min-width: 2400px) {
  .hero-image-only {
    max-height: 720px;
  }
}

.hero-image-only__inner {
  position: absolute;
  inset: var(--hero-header-offset) 0 0 0;
  z-index: 2;
}

/* Top gradient overlay */
.hero-image-only::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 225px;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / .75) 0%,
    rgb(0 0 0 / .40) 60%,
    rgb(0 0 0 / 0) 100%
  );
  z-index: 5;                    /* above image */
  pointer-events: none;
}

/* =========================================
   FOREGROUND MAP / OVERLAY IMAGE
========================================= */

.hero-image-only__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-image-only__overlay-img {
  position: absolute;
  top: 65%;
  right: 5%;
  transform: translateY(-50%);
  width: min(78vw, 1350px);
  height: auto;
  display: block;
}

/* =========================================
   NAVBAR OFFSETS
========================================= */

/* Tablet: 547px–1200px */
@media (max-width: 1200px) and (min-width: 547px) {
  .hero-image-only {
    --hero-header-offset: 101px;
  }

  .hero-image-only__bg {
    object-position: center 50px;
  }

  .hero-image-only::before {
    display: none;
  }

  .hero-image-only__overlay-img {
    right: 1%;
    width: min(82vw, 1100px);
  }
}

/* Mobile: 546px and below */
@media (max-width: 546px) {
  .hero-image-only {
    --hero-header-offset: 75px;
  }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (min-width: 2200px) {
  .hero-image-only__overlay-img {
    top: 53%;
    right: 5%;
  }
}

@media (min-width: 1600px) {
  .hero-image-only__overlay-img {
    top: 57%;
    right: 5%;
    width: min(78vw, 1050px);
  }
}

@media (max-width: 1024px) {
  .hero-image-only__overlay-img {
    top: 55%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 92vw;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .hero-image-only__bg {
    object-position: center 50px;
  }
  .hero-image-only__overlay-img {
    top: 58%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 95vw;
  }
  .hero-image-only::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-image-only__overlay-img {
    top: 60%;
    width: 96vw;
  }
}