/* Index hero banner. Shared page shell rules live in page-shell.css. */

.hero {
  --hero-img-position: center 35%;
  --hero-content-z: 5;
  --hero-content-width: 100%;
  --hero-content-align: center;
  --hero-content-margin: 0;
  --hero-content-padding: 0 clamp(24px, 5vw, 72px) clamp(8px, 1.5vw, 20px);
  --hero-title-size: clamp(1.18rem, 2.72vw, 2.26rem);
  --hero-title-weight: 600;
  --hero-title-spacing: 0.155em;
  --hero-title-transform: none;
  --hero-title-line-height: 1.05;
  --hero-title-max-width: min(92vw, 1100px);
  --hero-title-color: rgba(200, 191, 176, 0.52);
  --hero-title-opacity: 0.86;
  --hero-title-shadow:
    0 1px 4px rgba(0, 0, 0, 0.44),
    0 0 14px rgba(0, 0, 0, 0.22);
  position: relative;
  width: 100%;
  height: clamp(280px, 42vw, 500px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__img {
  object-position: var(--hero-img-position);
}

.hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 14, 0) 34%,
    rgba(8, 8, 14, 0.10) 58%,
    rgba(8, 8, 14, 0.30) 72%,
    rgba(8, 8, 14, 0.64) 88%,
    rgba(8, 8, 14, 0.96) 100%
  );
}

@media (min-width: 1000px) {
  /* Desktop cover sizing. */
  .hero {
    --desktop-hero-height: clamp(430px, 31vw, 650px);
    --hero-img-position: var(--race-banner-position, center 34%);
    height: var(--desktop-hero-height);
  }

}

/* Very large desktops get extra banner height. */
@media (min-width: 1700px) {
  .hero {
    --desktop-hero-height: clamp(500px, 32vw, 700px);
  }
}

/* Normal laptop/desktop banner height. */
@media (min-width: 1000px) and (max-width: 1399px) {
  .hero {
    --desktop-hero-height: clamp(380px, 33vw, 540px);
  }
}

/* Mobile/tablet banner framing. */
@media (max-width: 999px) {
  .hero {
    --hero-img-position: center center;
  }
}

/* ─── INDEX HEADER TITLE ────────────────────────
   Matches the race page title scale, color, spacing, and placement. */
.hero__content {
  position: relative;
  z-index: var(--hero-content-z);
  left: auto;
  right: auto;
  bottom: auto;
  width: var(--hero-content-width);
  text-align: var(--hero-content-align);
  margin: var(--hero-content-margin);
  padding: var(--hero-content-padding);
  box-sizing: border-box;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  letter-spacing: var(--hero-title-spacing);
  text-transform: var(--hero-title-transform);
  line-height: var(--hero-title-line-height);
  max-width: var(--hero-title-max-width);
  color: var(--hero-title-color);
  opacity: var(--hero-title-opacity);
  text-shadow: var(--hero-title-shadow);
  margin: 0 auto;
}

.hero__title-img {
  display: block;
  width: min(78vw, clamp(340px, 49vw, 760px));
  max-width: 100%;
  max-height: clamp(142px, 18.4vw, 250px);
  object-fit: contain;
  margin: 0 auto;
  filter:
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 18px rgba(7, 7, 13, 0.32));
}

@media (max-width: 700px) {
  .hero {
    --hero-content-padding: 0 18px 10px;
    --hero-title-size: clamp(0.98rem, 5.8vw, 1.44rem);
    --hero-title-spacing: 0.105em;
    --hero-title-color: rgba(200, 191, 176, 0.56);
  }

  .hero__title-img {
    width: min(88vw, 400px);
    max-height: 178px;
  }
}