/*******************
* Interior Hero V2
*******************/

/** Section wrapper **/

.interior-hero {
  overflow: hidden;
  position: relative;
  padding-top: 6rem; /* 96px - clears the fixed site header at desktop */
}

/* Below 1350px the site header collapses to the mobile variant which
   is shorter, so the 6rem clearance leaves a visible gap above the
   hero. Match the mobile header height to close it. */
@media (max-width: 84.375rem) /* <= 1350px */ {
  .interior-hero {
    padding-top: 4rem; /* 64px */
  }
}

.interior-hero .content-container {
  position: relative;
}

.interior-hero .content-container:has(.ae-breadcrumbs-list) {
  max-width: 107rem; /* 1712px */
  padding: 0 1.25rem; /* 20px */
}

.interior-hero .interior-hero__wrapper .content-container {
  max-width: 90rem; /* 1440px */
}


/** Breadcrumbs **/

.interior-hero .ae-breadcrumbs {
  position: absolute;
  left: 0;
  top: 3rem; /* 48px */
  z-index: 2; /* sits above .interior-hero__wrapper, which is now position:relative */
  padding: 0 1rem; /* 16px */
}

.interior-hero .ae-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.interior-hero .ae-breadcrumbs-list-item-link--home {
  display: inline-flex;
  align-items: center;
}

.interior-hero .ae-breadcrumbs-list-item-link--home .icon-home {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/** Mobile dropdown variant
 *  When the editor enables "Collapse Breadcrumbs on Mobile", the
 *  full <ol> is hidden under 48rem and a native <select> is shown
 *  in its place - mirrors the Interior Nav module's mobile pattern.
 *  Each option = a crumb URL; a small JS handler navigates on change.
 **/

.interior-hero .ae-breadcrumbs__mobile {
  display: none;
  position: relative;
  width: 100%;
  max-width: 22rem; /* 352px */
}

.interior-hero .ae-breadcrumbs__mobile-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.3;
  cursor: pointer;
}

.interior-hero .ae-breadcrumbs__mobile-select:focus,
.interior-hero .ae-breadcrumbs__mobile-select:focus-visible {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Force readable option styling - native renderers pick up dark text
   on dark backgrounds otherwise. */
.interior-hero .ae-breadcrumbs__mobile-select option {
  color: #122A3D;
  background-color: #fff;
}

.interior-hero .ae-breadcrumbs__mobile-chevron {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #fff;
  pointer-events: none;
}

@media (max-width: 47.9375rem) /* < 768px */ {
  .interior-hero[data-collapse-mobile-crumbs="true"] .ae-breadcrumbs-list {
    display: none;
  }
  .interior-hero[data-collapse-mobile-crumbs="true"] .ae-breadcrumbs__mobile {
    display: block;
  }
}


/** Video & overlay **/

.interior-hero__overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.interior-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}


/** Background graphics
 *  Width is controlled per-instance via [data-graphics-width].
 *  Default keeps the wave under ~60% so it doesn't run under titles.
 **/

.interior-hero__graphics {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60%; /* default = "medium" */
  height: 100%;
  pointer-events: none;
}

.interior-hero[data-graphics-width="narrow"] .interior-hero__graphics { width: 40%; }
.interior-hero[data-graphics-width="medium"] .interior-hero__graphics { width: 60%; }
.interior-hero[data-graphics-width="wide"]   .interior-hero__graphics { width: 80%; }
.interior-hero[data-graphics-width="full"]   .interior-hero__graphics { width: 100%; }

/* Mobile: always go full-width for graphics; the SVG is shaped to
   sit cleanly behind a stacked content block at small sizes. */
@media (max-width: 47.9375rem) /* < 768px */ {
  .interior-hero__graphics { width: 100%; }
}

.interior-hero__graphics svg {
  display: block;
  width: 100%;
  height: 100%;
  /* preserveAspectRatio="xMinYMax meet" on the SVG itself keeps the
     wave anchored to the bottom-left and prevents clipping when the
     container's aspect ratio differs from the SVG's viewBox. The
     unused area stays transparent above the wave. */
}

.interior-hero__graphics--mobile {
  display: block;
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero__graphics--mobile {
    display: none;
  }
}

.interior-hero__graphics--desktop {
  display: none;
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero__graphics--desktop {
    display: block;
  }
}

/** Mobile/tablet fallback for graphics mode
 *  At <=1280px we hide the wave SVG entirely and paint a solid
 *  overlay over the wrapper's bg image (same approach as the
 *  gradient-mode mobile fallback). Color and opacity come from
 *  --interior-hero-graphics-overlay-bg / -opacity, set inline on
 *  the section by the template when add_graphics is enabled.
 **/
.interior-hero__wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; /* above bg image, below content (.interior-hero__content has z-index: 3) */
  display: none;
  background-color: var(--interior-hero-graphics-overlay-bg, transparent);
  opacity: var(--interior-hero-graphics-overlay-opacity, 0);
  pointer-events: none;
}

@media (max-width: 79.9375rem) /* < 1280px */ {
  .interior-hero[data-has-graphics="true"] .interior-hero__graphics {
    display: none;
  }
  .interior-hero[data-has-graphics="true"] .interior-hero__wrapper::after {
    display: block;
  }
}


/*******************
* Wrapper / background
*******************/

.interior-hero__wrapper {
  position: relative;
  /* Cap the wrapper - and therefore the background image painted on
     it - at 1920px. The outer .interior-hero takes the editor-driven
     section background color so any space beyond 1920 still has the
     intended color rather than the page body showing through. */
  max-width: 120rem; /* 1920px */
  margin: 0 auto;
  padding-top: 6.5rem; /* 104px - breadcrumbs-to-title breathing room */
  background-repeat: no-repeat;
  background-position: bottom center;
  /* --interior-hero-bg-size set inline per instance */
  background-size: var(--interior-hero-bg-size, cover);
}

/* Gradient fade overlay on the wrapper's left/right edges. Only kicks
   in once the viewport is *wider* than the 1920px wrapper cap (so
   the editor only sees it when there's actually a section bg color
   visible beside the image - avoids a fade appearing on a stock
   1920px display where the wrapper fills the whole viewport).
   The pseudo-elements sit in the gutter between the wrapper edge and
   the centered .content-container (1440px max), so they overlay the
   bg image area only and never touch text.
   The 1px negative offset + +1px width overlaps each pseudo into the
   adjacent section bg by a single pixel, eliminating the hairline
   seam that subpixel rounding can leave at the wrapper edge. */
@media (min-width: 120.0625rem) /* > 1920px */ {
  .interior-hero__wrapper::before,
  .interior-hero__wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(10rem + 1px); /* 160px fade + 1px overlap into the section bg */
    pointer-events: none;
    z-index: 1;
  }
  .interior-hero__wrapper::before {
    left: -1px;
    background: linear-gradient(
      to right,
      var(--interior-hero-section-bg, #122A3D) 0%,
      transparent 100%
    );
  }
  .interior-hero__wrapper::after {
    right: -1px;
    background: linear-gradient(
      to left,
      var(--interior-hero-section-bg, #122A3D) 0%,
      transparent 100%
    );
  }
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero__wrapper {
    /* --interior-hero-bg-position set inline per instance */
    background-position: var(--interior-hero-bg-position, center center);
  }
}


/*******************
* Content
*******************/

.interior-hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero__content {
    /* --interior-hero-align comes from the content_alignment field */
    justify-content: var(--interior-hero-align, flex-end);
    /* --interior-hero-content-width comes from the size_and_spacing.content_width field */
    max-width: var(--interior-hero-content-width, 100%);
  }
}

.interior-hero__content--hide {
  display: none;
}


/** Layout: Full **/

.interior-hero[data-layout="full"] .interior-hero__content {
  text-align:center;
}

@media (min-width: 64rem) { /* 1024px */
  .interior-hero[data-layout="full"] .interior-hero__content {
    text-align:left;
    min-height: 20rem; /* 672px */
    padding-top: 9.625rem; /* 250px */
  }
}

.interior-hero[data-layout="full"] .interior-hero__wrapper {
  padding-bottom: 4rem; /* 64px */
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero[data-layout="full"] .interior-hero__wrapper {
    padding-bottom: 3.625rem; /* 90px */
  }
}


/** Layout: Half **/

.interior-hero[data-layout="half"] .interior-hero__content {
  min-height: 16rem; /* 256px */
  padding-top: 3rem; /* 48px */
  padding-bottom: 3rem; /* 48px */
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero[data-layout="half"] .interior-hero__content {
    min-height: 18rem; /* 288px */
    padding-top: 4rem; /* 64px */
    padding-bottom: 4rem; /* 64px */
  }
}


/** Layout: Quarter **/

.interior-hero[data-layout="quarter"] .interior-hero__content {
  min-height: 6rem; /* 96px */
  padding-top: 2rem; /* 32px */
  padding-bottom: 2rem; /* 32px */
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero[data-layout="quarter"] .interior-hero__content {
    min-height: 8rem; /* 128px */
    padding-top: 2rem; /* 32px */
    padding-bottom: 2rem; /* 32px */
  }
}


/** Graphics-only override
 * When add_graphics is on (and stats / gradient are off), the SVG
 * occupies the right-hand portion of the hero. Layout heights
 * (Full/Half/Quarter) drive the section size as configured; we
 * only ensure the content stays above the SVG via z-index.
 **/

.interior-hero[data-has-graphics="true"] .interior-hero__content {
  position: relative;
  z-index: 3;
}


/*******************
* Title & summary
*******************/

.interior-hero__title {
  margin: 0 0 1rem; /* 16px */
  width: 100%;
  /* --interior-hero-title-max-width is set inline only when the field has a value */
  max-width: var(--interior-hero-title-max-width, 100%);
  font-size: clamp(2.5rem, 5vw, 6rem); /* 40px → 96px */
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.12rem; /* -1.92px */
  color: #fff;
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero__title {
    margin: 0 0 1.5rem; /* 24px */
  }
}

/** Layout-specific title cap - half/quarter heroes get a smaller upper bound so an oversized title doesn't crowd the shorter content area **/
.interior-hero[data-layout="half"] .interior-hero__title,
.interior-hero[data-layout="quarter"] .interior-hero__title {
  font-size: clamp(2.5rem, 5vw, 4rem); /* 40px → 64px */
}

.interior-hero__summary,
.interior-hero__summary p {
  width: 100%;
  font-size: 1.5rem; /* 24px */
  line-height:1.8rem;
  font-weight: 300;
  color: #fff;
}


/*******************
* Stats
*******************/

.interior-hero__stats {
  margin-top: clamp(2.5rem, 2.5vw, 5.75rem); /* 40px → 92px */
}

.interior-hero__stats-title {
  display: flex;
  align-items: center;
  gap: 1rem; /* 16px */
  margin-bottom: 2.5rem; /* 40px */
  font-size: clamp(1.25rem, 2.5vw, 1.25rem); /* 20px → 24px */
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
}

/* Decorative trailing line, replaces the invalid <hr> inside <h2> */
.interior-hero__stats-title::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  border-top: 1px solid currentColor;
}

.interior-hero__stats-wrapper,
.interior-hero__stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem; /* 40px */
  justify-content: space-between;
}
@media (min-width: 48rem) { /* 768px */
  .interior-hero__stats-wrapper,
  .interior-hero__stats-row {
    justify-content: center;
  }
}
@media (min-width: 87.5rem) { /* 1400px */
  .interior-hero__stats-wrapper,
  .interior-hero__stats-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}


/** Stats icon **/

.interior-hero__icon {
  margin: 0 auto;
  width: 100%;
  max-width: 5rem; /* 80px */
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero__icon {
    margin: 0;
    max-width: 12.875rem; /* 206px */
  }
}
@media (min-width: 75rem) { /* 1200px */
  .interior-hero__icon {
    max-width: 5rem; /* 80px */
  }
}

.interior-hero__icon img {
  display: block;
  margin: 0 auto;
}


/** Stat **/

.interior-hero__stat {
  flex: 0 0 calc((100% - 2.5rem) / 2); /* 2 col grid w/ 40px gap */
}
@media (min-width: 64rem) { /* 1024px */
  .interior-hero__stat {
    flex: 1 0 calc(20% - 12.5rem); /* 200px */
    width: 100%;
  }
}

.interior-hero__stat-number {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem; /* 16px */
  line-height: 120%;
  letter-spacing: -0.24rem; /* -3.84px */
  text-align: center;
  text-transform: uppercase;
  color: #3E93CD;
  font-weight: 900;
}
{#
@media (min-width: 64rem) { /* 1024px */
  .interior-hero__stat-number {
    margin-left:-45px;
  }
}#}

.interior-hero__stat-number--no-prefix {
  text-align: center;
}

/* em-based so the prefix scales with the number font-size */
.interior-hero__stat-number-prefix {
  position: relative;
  left: -0.05em;
  top: 0.45em;
  font-size: 0.6em;
  font-weight: inherit;
}

.interior-hero__stat-text {
  font-size: clamp(0.875rem, 2.5vw, 1rem); /* 14px → 18px */
  font-weight: 600;
  line-height: 1.5625rem; /* 25px */
  text-align: center;
  color: #fff;
}