/* Home module: hero. */

.bjs-hero {
  position: relative;
  display: grid;
  min-height: clamp(620px, calc(100svh - 100px), 880px);
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-bottom: 1px solid var(--home-line);
}

.bjs-hero__visual {
  min-width: 0;
  background-image: var(--bjs-hero-image);
  background-position: center;
  background-size: cover;
}

.bjs-hero__visual--light { background-position: 58% center; }
.bjs-hero__visual--dark { background-position: 45% center; }

.bjs-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 8, 12, .25), rgba(5, 8, 12, .82) 44%, rgba(5, 8, 12, .82) 56%, rgba(5, 8, 12, .28)), linear-gradient(0deg, rgba(5, 8, 12, .8), transparent 45%, rgba(5, 8, 12, .25));
}

.bjs-hero__content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(820px, calc(100% - 40px));
  text-align: center;
  transform: translate(-50%, -52%);
}

.bjs-hero h1 {
  font-size: clamp(58px, 8vw, 112px);
  line-height: .88;
}

.bjs-hero__lead {
  max-width: 660px;
  margin: 26px auto 0;
  color: #d5dbe0 !important;
  font: 400 clamp(16px, 1.6vw, 21px)/1.6 Inter, sans-serif;
}

.bjs-actions--hero { justify-content: center; }

.bjs-hero__scroll {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 50%;
  color: #cbd2d9;
  font: 600 10px/1 Inter, sans-serif;
  text-decoration: none;
  transform: translateX(-50%);
}

.bjs-hero__scroll span { margin-left: 10px; color: var(--home-red); }

@media (max-width: 620px) {
  .bjs-hero { min-height: calc(100svh - 92px); }
  .bjs-hero__visual--light { background-position: 64% center; }
  .bjs-hero__visual--dark { background-position: 38% center; }
  .bjs-hero__shade { background: linear-gradient(0deg, rgba(5,8,12,.9), rgba(5,8,12,.38) 70%, rgba(5,8,12,.38)); }
  .bjs-hero__content { width: calc(100% - 32px); transform: translate(-50%, -48%); }
  .bjs-hero h1 { font-size: 54px; }
  .bjs-hero__lead { font-size: 14px; line-height: 1.55; }
  .bjs-actions--hero { display: grid; grid-template-columns: 1fr; width: 100%; }
  .bjs-hero__scroll { bottom: 14px; white-space: nowrap; }
}