[data-roof-ai-hero-v1] {
  position: relative;
  isolation: isolate;
  min-height: clamp(340px, 42vw, 650px);
  background-color: #0d202b !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(8, 24, 32, 0.95) 0%,
      rgba(8, 24, 32, 0.82) 42%,
      rgba(8, 24, 32, 0.35) 76%,
      rgba(8, 24, 32, 0.18) 100%
    ),
    var(--roof-ai-image) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: var(--roof-ai-position, center) !important;
  color: #f6f2e9 !important;
}

[data-roof-ai-hero-v1][data-roof-ai-layout="article"] {
  min-height: clamp(300px, 34vw, 500px);
  background-image:
    linear-gradient(
      90deg,
      rgba(8, 24, 32, 0.93) 0%,
      rgba(8, 24, 32, 0.78) 50%,
      rgba(8, 24, 32, 0.35) 100%
    ),
    var(--roof-ai-image) !important;
}

[data-roof-ai-hero-v1] > * {
  position: relative;
  z-index: 1;
}

[data-roof-ai-hero-v1] h1,
[data-roof-ai-hero-v1] h2,
[data-roof-ai-hero-v1] h3 {
  color: #f6f2e9 !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.2);
}

[data-roof-ai-hero-v1] p,
[data-roof-ai-hero-v1] li,
[data-roof-ai-hero-v1] .lead,
[data-roof-ai-hero-v1] [class*="lead"] {
  color: rgba(246, 242, 233, 0.91) !important;
}

[data-roof-ai-hero-v1] a:not([class*="button"]):not([class*="btn"]) {
  color: #ffffff;
}

@media (max-width: 680px) {
  [data-roof-ai-hero-v1] {
    min-height: 430px;
    background-image:
      linear-gradient(
        180deg,
        rgba(8, 24, 32, 0.72) 0%,
        rgba(8, 24, 32, 0.88) 58%,
        rgba(8, 24, 32, 0.96) 100%
      ),
      var(--roof-ai-image-mobile, var(--roof-ai-image)) !important;
    background-position: var(--roof-ai-position-mobile, center) !important;
  }

  [data-roof-ai-hero-v1][data-roof-ai-layout="article"] {
    min-height: 390px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-roof-ai-hero-v1] {
    background-attachment: scroll !important;
  }
}