/*
 * One frame for every full-width photo or video hero, so moving from page
 * to page the hero doesn't jump: same height, the text block sits on the
 * same line near the bottom (so buttons land in the same spot and a short
 * headline doesn't float high over empty photo), same left edge and size.
 *
 * Put `site-hero` on the hero's outer element and `site-hero_content` on
 * the block that holds its top and bottom padding. Loaded after the
 * Webflow sheets; the !important flags beat the per-page heights and
 * paddings (many of them inline styles) that this replaces.
 */

:root {
  --site-hero-height: clamp(640px, 88svh, 800px);
  /* Least room above the text, so a long block still clears the navbar */
  --site-hero-top: 170px;
  /* Where the text block ends, measured up from the hero's bottom edge */
  --site-hero-bottom: 128px;
}

@media (max-width: 767px) {
  :root {
    --site-hero-height: clamp(560px, 86svh, 720px);
    --site-hero-top: 130px;
    --site-hero-bottom: 80px;
  }
}

.site-hero {
  min-height: var(--site-hero-height) !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.site-hero_content {
  padding-top: var(--site-hero-top) !important;
  padding-bottom: var(--site-hero-bottom) !important;
}

/* A breadcrumb sits in the space above the headline instead of pushing
   it down: taken out of the flow at its own spot, then lifted clear. */
.site-hero_crumb {
  position: absolute !important;
  margin: 0 !important;
  transform: translateY(calc(-100% - 20px));
}

/* Boxed heroes (a rounded photo card inside a 1400px frame) line their
   text up with the full-width heroes' 1250px column. */
@media (min-width: 992px) {
  .site-hero--boxed {
    padding-left: calc(max(3vw, (100vw - 1250px) / 2) - max(2vw, (100vw - 1400px) / 2)) !important;
  }
}

/* Same left edge everywhere: the 1250px column most pages already use */
.site-hero .container-large {
  max-width: 1250px !important;
}

.site-hero h1,
.site-hero .heading-style-h1 {
  font-size: clamp(2.75rem, 6vw, 5.25rem) !important;
  line-height: 1.08 !important;
}