/* DMF Heroes fit modes - 1.9.30 */
.dmf-hero-fit-frame {
  --dmf-hero-menu-height: 76px;
  --dmf-hero-top-offset: var(--dmf-hero-menu-height);
  --dmf-hero-bg: #000000;
  --dmf-hero-bg-rgb: 0,0,0;
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--dmf-hero-top-offset));
  min-height: 0;
  overflow: hidden;
  background: var(--dmf-hero-bg);
}

/* Fallback for browsers without dvh. */
@supports not (height: 100dvh) {
  .dmf-hero-fit-frame {
    height: calc(100vh - var(--dmf-hero-top-offset));
  }
}

.dmf-hero-fit-stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
  z-index: 1;
  isolation: isolate;
  transform: translateX(-50%);
  transform-origin: top center;
}

.dmf-hero-fit-stage > * {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Readability gradient tracks the ACTUAL rendered component. */
.dmf-hero-fit-gradient {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse at 16% 82%,
    rgba(var(--dmf-hero-bg-rgb),.94) 0%,
    rgba(var(--dmf-hero-bg-rgb),.78) 18%,
    rgba(var(--dmf-hero-bg-rgb),.48) 36%,
    rgba(var(--dmf-hero-bg-rgb),.18) 53%,
    rgba(var(--dmf-hero-bg-rgb),0) 70%
  );
}

/* Edge feathering joins the rendered component seamlessly to the frame colour. */
.dmf-hero-fit-feather {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.dmf-hero-fit-feather-left {
  background: linear-gradient(to right,
    rgba(var(--dmf-hero-bg-rgb),1) 0%,
    rgba(var(--dmf-hero-bg-rgb),.78) 18%,
    rgba(var(--dmf-hero-bg-rgb),.30) 52%,
    rgba(var(--dmf-hero-bg-rgb),0) 100%);
}

.dmf-hero-fit-feather-right {
  background: linear-gradient(to left,
    rgba(var(--dmf-hero-bg-rgb),1) 0%,
    rgba(var(--dmf-hero-bg-rgb),.78) 18%,
    rgba(var(--dmf-hero-bg-rgb),.30) 52%,
    rgba(var(--dmf-hero-bg-rgb),0) 100%);
}

.dmf-hero-fit-feather-bottom {
  /*
   * Fade starts INSIDE the rendered component and reaches the exact frame
   * colour before the component ends. The frame beneath is already the same
   * colour, so there can be no visible horizontal seam.
   */
  background: linear-gradient(to bottom,
    rgba(var(--dmf-hero-bg-rgb),0) 0%,
    rgba(var(--dmf-hero-bg-rgb),.14) 22%,
    rgba(var(--dmf-hero-bg-rgb),.48) 48%,
    rgba(var(--dmf-hero-bg-rgb),.82) 70%,
    rgba(var(--dmf-hero-bg-rgb),1) 88%,
    rgba(var(--dmf-hero-bg-rgb),1) 100%);
}


.dmf-hero-fit-frame[data-gradient="off"] .dmf-hero-fit-gradient {
  display: none !important;
}

.dmf-hero-fit-frame[data-edge="off"] .dmf-hero-fit-feather {
  display: none !important;
}

/*
 * 1.9.23: no breakpoint switches the fit frame back to auto/white.
 * The frame remains the selected background colour all the way to the
 * bottom of the viewport on desktop, tablet and mobile widths.
 */
.dmf-hero-fit-feather-left,
.dmf-hero-fit-feather-right,
.dmf-hero-fit-feather-bottom {
  will-change: left, top, width, height;
}