/* Keep the Ellis County Courthouse as the hero's visual anchor at every size. */
.dual-hero__image {
  left: 78%;
  z-index: 0;
}

/* A softly feathered second exposure reveals the lower courthouse facade
   without lifting the whole image or weakening contrast behind the copy. */
.dual-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 78%;
  width: 100%;
  max-width: 1728px;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("/images/waxahachie-courthouse-night-hero-web.jpg") center / contain no-repeat;
  filter: brightness(1.9) saturate(0.68) sepia(0.24) hue-rotate(-9deg) contrast(1.04);
  opacity: 0.92;
  -webkit-mask-image: radial-gradient(
    ellipse 34% 46% at 49% 84%,
    #000 0%,
    rgba(0, 0, 0, 0.9) 40%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 34% 46% at 49% 84%,
    #000 0%,
    rgba(0, 0, 0, 0.9) 40%,
    transparent 100%
  );
}

.dual-hero::after {
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(0, 20, 54, 0.98) 0%,
    rgba(0, 27, 68, 0.9) 43%,
    rgba(0, 20, 54, 0.5) 55%,
    rgba(0, 20, 54, 0.1) 69%,
    rgba(0, 20, 54, 0.04) 100%
  );
}

.dual-hero__inner {
  z-index: 3;
}

@media (max-width: 900px) and (min-width: 621px) {
  .dual-hero {
    min-height: 820px;
  }

  .dual-hero__image {
    top: 0;
    bottom: auto;
    left: 50%;
    width: 100%;
    max-width: none;
    height: 46%;
    object-fit: cover;
    object-position: 43% 44%;
  }

  .dual-hero::before {
    top: 0;
    bottom: auto;
    left: 50%;
    width: 100%;
    max-width: none;
    height: 46%;
    background-size: cover;
    background-position: 43% 44%;
  }

  .dual-hero::after {
    background: linear-gradient(
      180deg,
      rgba(0, 20, 54, 0.1) 0%,
      rgba(0, 20, 54, 0.3) 31%,
      rgba(0, 20, 54, 0.96) 48%,
      #001436 100%
    );
  }

  .dual-hero__inner {
    padding-top: clamp(320px, 43vw, 360px);
  }
}

@media (max-width: 620px) {
  .dual-hero__image {
    left: 50%;
    object-position: 43% 42%;
  }

  .dual-hero::before {
    top: 0;
    bottom: auto;
    left: 50%;
    height: 42%;
    background-size: cover;
    background-position: 43% 42%;
  }

  .dual-hero::after {
    background: linear-gradient(
      180deg,
      rgba(0, 20, 54, 0.1) 0%,
      rgba(0, 20, 54, 0.38) 27%,
      rgba(0, 20, 54, 0.97) 45%,
      #001436 100%
    );
  }
}