/* ==========================================================================
   Direct Homes – Homepage hero (components/home-hero.php)
   Full photo with a deep green shade, centered text, two buttons.
   The benefits bar (.h2-benefits) overlaps its bottom edge.
   Header on top is white: body.dh-header-dark (css/directhomes-header.css)
   ========================================================================== */
.dh-hhero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100vh, 860px);
  padding: 150px 0 170px;
  overflow: hidden;
  background: var(--dh-primary);
  color: #fff;
  text-align: center;
}

.dh-hhero__bg {
  position: absolute;
  inset: 0;
}

.dh-hhero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%; /* calm sky behind the text, house below */
}

/* green shade: darker at the top (header) and bottom (benefits bar) */
.dh-hhero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 35, 28, 0.5) 0%, rgba(10, 35, 28, 0.26) 42%, rgba(10, 35, 28, 0.62) 100%),
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(10, 35, 28, 0.32) 0%, rgba(10, 35, 28, 0) 100%);
}

.dh-hhero__inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.dh-hhero__title {
  margin: 0 0 24px;
  font-family: var(--dh-font-heading);
  font-size: clamp(46px, calc(18px + 5.2vw), 96px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.dh-hhero__title em {
  font-style: italic;
  color: #D9B77A;
}

.dh-hhero__lead {
  max-width: 660px;
  margin: 0 auto;
  font-size: clamp(16px, calc(14px + 0.3vw), 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.dh-hhero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
}

/* gold and ghost buttons (light on the dark photo) */
.dh-hhero .dh-btn.dh-btn--gold {
  border-color: var(--dh-accent);
  background-color: var(--dh-accent);
  color: #fff;
  --dh-btn-fill: var(--dh-primary);
}

.dh-hhero .dh-btn.dh-btn--ghost {
  border-color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
  --dh-btn-fill: #fff;
}

.dh-hhero .dh-btn.dh-btn--ghost:hover {
  border-color: #fff;
  color: var(--dh-primary);
}

/* hover: border takes the same colour as the fill */
.dh-hhero .dh-btn.dh-btn--gold:hover,
.dh-hhero .dh-btn.dh-btn--gold:focus-visible {
  border-color: var(--dh-primary);
  color: #fff;
}

/* header (absolute) sits on top of the photo */
.dh-hhero {
  z-index: 0;
}

/* the benefits bar sits on the bottom edge: no white half behind it here */
.dh-home2 .dh-hhero + .h2-benefits,
.dh-home2 .h2-benefits {
  margin-top: -82px;
}

@media (max-width: 991px) {
  .dh-hhero {
    min-height: 0;
    padding: 150px 0 130px;
  }
}

@media (max-width: 575px) {
  .dh-hhero {
    padding: 120px 0 80px;
  }

  .dh-hhero__actions .dh-btn {
    width: 100%;
    justify-content: center;
  }

  /* the benefits bar starts under the hero (no overlap on phones) */
  .dh-home2 .dh-hhero + .h2-benefits,
  .dh-home2 .h2-benefits {
    margin-top: 0;
    padding-top: 24px;
    background: #fff;
  }
}