/* Final homepage hero composition. Keep the image and copy as independent layers. */
.sta-hero {
  isolation:isolate;
  min-height:clamp(560px,47vw,680px);
  overflow:hidden;
  background:#0c0f13;
}

.sta-hero::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 0 38%;
  background:url('/wp-content/themes/stasuplu/assets/hero-brembo.jpg') 54% center / cover no-repeat;
  filter:saturate(.86) contrast(1.06) brightness(.82);
  transform:scale(1.015);
}

.sta-hero::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  height:auto;
  background:
    linear-gradient(90deg,#0c0f13 0%,#0c0f13 30%,rgba(12,15,19,.97) 39%,rgba(12,15,19,.76) 52%,rgba(12,15,19,.2) 72%,rgba(12,15,19,.06) 100%),
    linear-gradient(0deg,rgba(12,15,19,.68) 0%,transparent 24%,transparent 76%,rgba(12,15,19,.2) 100%);
}

.sta-hero__copy {
  max-width:650px;
  padding:78px 0 88px;
}

.sta-hero h1 {
  max-width:720px;
  font-size:clamp(48px,5.25vw,76px);
  text-wrap:balance;
}

.sta-hero p { max-width:570px; }

@media(max-width:1180px) {
  .sta-hero::before { left:34%; background-position:50% center; }
  .sta-hero__copy { max-width:590px; }
}

@media(max-width:900px) {
  .sta-hero {
    min-height:700px;
    align-items:end;
  }
  .sta-hero::before {
    inset:0 0 30% 0;
    background-position:50% center;
  }
  .sta-hero::after {
    background:linear-gradient(0deg,#0c0f13 0%,rgba(12,15,19,.99) 34%,rgba(12,15,19,.79) 52%,rgba(12,15,19,.1) 78%,rgba(12,15,19,.12) 100%);
  }
  .sta-hero__copy {
    max-width:680px;
    padding:290px 0 58px;
  }
  .sta-hero h1 { font-size:clamp(42px,8.2vw,62px); }
}

@media(max-width:560px) {
  .sta-hero { min-height:650px; }
  .sta-hero::before {
    inset:0 0 42% 0;
    background-position:47% center;
  }
  .sta-hero__copy { padding:245px 0 42px; }
  .sta-hero h1 { font-size:clamp(36px,10.5vw,46px); }
  .sta-hero p { line-height:1.55; }
}