/* ------------------------------------------------------------
   Hero Bottom-Image Overflow Recovery
   Scope: universal hero layout "Centered Text Hero — Bottom Image".
   Purpose: stop the text stack from being pushed/clipped above the
   visible viewport when copy + CTAs + bottom media are taller than
   the hero's old fixed theater frame.

   Root cause: legacy bottom-image CSS bottom-aligned the full stack
   inside a constrained/hidden masthead. On short desktop windows,
   tablet preview, and Customizer mobile preview, the H1/subtitle could
   overflow upward under the announcement/nav/menu stack.
------------------------------------------------------------- */

:root{
  --vh-hero-bottom-image-safe-top: max(
    var(--vh-context-hero-padding-top, clamp(5.5rem, 8vw, 7.5rem)),
    calc(var(--vh-hero-top-stack-reserve, 0px) + .75rem),
    calc(var(--vh-adminbar-height, 0px) + var(--vh-announcement-height, 0px) + var(--vh-navbar-height, 56px) + 1rem)
  );
}

/* Turn the bottom-image layout back into a normal readable stack.
   The image may still sit visually at the bottom of the section, but
   the text no longer gets sacrificed to preserve a fixed hero height. */
.vh-hero-layout-editorial_center_bottom_image.masthead{
  height: auto !important;
  min-height: auto !important;
  align-items: stretch !important;
  overflow: visible !important;
  padding-top: var(--vh-hero-bottom-image-safe-top) !important;
  padding-bottom: 0 !important;
}

.vh-hero-layout-editorial_center_bottom_image.masthead > .container{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{
  width: min(100%, 960px) !important;
  max-width: min(100%, 960px) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(1.25rem, 3vw, 2.75rem) !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-title,
.vh-hero-layout-editorial_center_bottom_image .vh-hero-lead,
.vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{
  transform: none !important;
  opacity: 1;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-title{
  max-width: min(100%, 22ch) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{
  max-width: min(100%, 48rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{
  justify-content: center !important;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{
  width: min(100%, 1120px) !important;
  max-width: min(100%, 1120px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto !important;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge,
.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
  width: 100% !important;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
  display: block !important;
  height: auto !important;
  max-height: min(52vh, 34rem) !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (min-width: 600px) and (max-width: 991.98px){
  :root{
    --vh-hero-bottom-image-safe-top: max(
      var(--vh-context-hero-padding-top-tablet, clamp(5.75rem, 10vw, 7.25rem)),
      calc(var(--vh-hero-top-stack-reserve, 0px) + .75rem),
      calc(var(--vh-adminbar-height, 0px) + var(--vh-announcement-height, 0px) + var(--vh-navbar-height, 56px) + 1rem)
    );
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{
    width: min(100%, 44rem) !important;
    max-width: min(100%, 44rem) !important;
    margin-bottom: clamp(1.15rem, 3vw, 2rem) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{
    max-width: min(100%, 18ch) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{
    max-width: min(100%, 40rem) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{
    width: min(100%, 44rem) !important;
    max-width: min(100%, 44rem) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
    max-height: min(46vh, 29rem) !important;
  }
}

@media (max-width: 599.98px){
  :root{
    --vh-hero-bottom-image-safe-top: max(
      var(--vh-context-hero-padding-top-mobile, clamp(5.25rem, 18vw, 6.75rem)),
      calc(var(--vh-hero-top-stack-reserve, 0px) + .75rem),
      calc(var(--vh-adminbar-height, 0px) + var(--vh-announcement-height, 0px) + 4.75rem)
    );
  }

  .vh-hero-layout-editorial_center_bottom_image.masthead{
    padding-top: var(--vh-hero-bottom-image-safe-top) !important;
    padding-bottom: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image.masthead > .container{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.15rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{
    max-width: min(100%, 15ch) !important;
    margin-bottom: .65rem !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{
    max-width: min(100%, 31ch) !important;
    margin-bottom: 1rem !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{
    width: min(100%, 21rem) !important;
    max-width: min(100%, 21rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{
    width: 100% !important;
    max-width: 100% !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
    max-height: min(38vh, 20rem) !important;
  }
}

@media (max-width: 380px){
  .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{
    max-width: min(100%, 14ch) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{
    max-width: min(100%, 29ch) !important;
  }
}