/* Surgical homepage hero: pre-vero mountain plate (no fox mascot) + readability scrim.
   Overrides inline React background without touching Vite entry. */

.hero-section {
  position: relative !important;
  background-color: #001438 !important;
  background-image: url("/images/heroFlights.png") !important;
  /* Center the mountain landscape — no left-bias for fox */
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  isolation: isolate;
}

/* Center/top veil for white type on bright snow/sky */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      72% 58% at 48% 26%,
      rgba(0, 12, 32, 0.74) 0%,
      rgba(0, 12, 32, 0.34) 46%,
      rgba(0, 12, 32, 0.1) 68%,
      transparent 100%
    ),
    radial-gradient(
      42% 36% at 36% 42%,
      rgba(0, 10, 28, 0.42) 0%,
      rgba(0, 10, 28, 0.16) 55%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      rgba(0, 16, 40, 0.58) 0%,
      rgba(0, 16, 40, 0.18) 36%,
      transparent 50%,
      rgba(0, 10, 28, 0.72) 100%
    );
}

.hero-section > * {
  position: relative;
  z-index: 1;
}

.hero-section__title {
  text-shadow:
    0 4px 28px rgba(0, 8, 24, 0.78),
    0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

.hero-section__subtitle {
  text-shadow:
    0 2px 16px rgba(0, 8, 24, 0.65),
    0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.hero-section__explore {
  background: rgba(0, 16, 40, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 8px 24px rgba(0, 8, 24, 0.28);
}

.hero-section__tab[aria-selected="true"] {
  background: rgba(0, 16, 40, 0.5) !important;
}

.hero-section .bg-\[\#FFFFFF1A\],
.hero-section [class*="backdrop-blur"] {
  background-color: rgba(0, 16, 40, 0.44) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 10px 32px rgba(0, 8, 24, 0.28);
}

.hero-section .bg-\[\#FFFFFF1A\]:hover,
.hero-section [class*="backdrop-blur"]:hover {
  background-color: rgba(0, 16, 40, 0.56) !important;
}

@media (max-width: 767px) {
  .hero-section {
    background-position: center center !important;
  }
  .hero-section::before {
    background:
      radial-gradient(
        90% 55% at 50% 22%,
        rgba(0, 12, 32, 0.78) 0%,
        rgba(0, 12, 32, 0.36) 50%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 16, 40, 0.62) 0%,
        rgba(0, 16, 40, 0.22) 40%,
        transparent 55%,
        rgba(0, 10, 28, 0.78) 100%
      );
  }
}