/* =========================================================
   FLY BREEZE VIRTUAL — FINAL HOMEPAGE HERO
   ========================================================= */

.home-hero {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;

  /*
   * The first layer is only a soft readability gradient.
   * The second layer is the actual hero image.
   */
  background-image:
    linear-gradient(
      90deg,
      rgba(246, 251, 255, 0.98) 0%,
      rgba(246, 251, 255, 0.91) 16%,
      rgba(246, 251, 255, 0.64) 28%,
      rgba(246, 251, 255, 0.22) 40%,
      rgba(246, 251, 255, 0.03) 54%,
      rgba(246, 251, 255, 0) 68%
    ),
    url("/assets/images/hero_images/Home_hero_logo.png?v=1785608587");

  background-size:
    100% 100%,
    cover;

  background-position:
    center,
    center center;

  background-repeat:
    no-repeat,
    no-repeat;
}

/* Remove every old generated-aircraft or overlay pseudo-element. */

.home-hero::before,
.home-hero::after {
  display: none !important;
  content: none !important;
}

/* Center the hero contents to the same width as the page cards. */

.home-hero__inner {
  position: relative;
  z-index: 2;

  width: min(calc(100% - 64px), var(--page-width));
  min-height: 500px;
  margin-inline: auto;

  display: flex;
  align-items: flex-start;

  padding-top: 48px;
}

/*
 * Hero text directly over the image.
 * No card, no border, no blur, no background.
 */

.home-hero__content {
  width: 390px;
  margin: 0;
  padding: 0;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-hero__content .section-eyebrow {
  margin: 0 0 5px;

  color: #086bcf;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-hero__content h1 {
  margin: 0;

  color: #052b5b;
  font-size: clamp(64px, 5.7vw, 88px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 0.88;
  text-transform: uppercase;

  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.38);
}

.home-hero__description {
  width: 350px;
  margin: 24px 0 0;

  color: #334f6b;
  font-size: 17px;
  line-height: 1.55;
}

/* Soft transition between the hero and the page background. */

.home-hero__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;

  height: 72px;

  background:
    linear-gradient(
      to bottom,
      rgba(237, 245, 250, 0),
      rgba(237, 245, 250, 0.45) 52%,
      var(--breeze-page) 100%
    );

  pointer-events: none;
}

/*
 * Search bar overlaps the bottom of the hero,
 * like the reference image.
 */

.flight-search-section {
  position: relative;
  z-index: 10;

  margin-top: -74px;
}

.flight-search--compact {
  padding: 18px 22px;

  border: 1px solid rgba(210, 226, 237, 0.84);
  border-radius: 22px;

  background: rgba(255, 255, 255, 0.97);

  box-shadow:
    0 18px 48px rgba(3, 29, 61, 0.16);
}

/* Large monitors */

@media (min-width: 1500px) {
  .home-hero {
    min-height: 520px;
  }

  .home-hero__inner {
    min-height: 520px;
    padding-top: 52px;
  }

  .flight-search-section {
    margin-top: -78px;
  }
}

/* Tablet */

@media (max-width: 1020px) {
  .home-hero {
    min-height: 520px;

    background-position:
      center,
      59% center;
  }

  .home-hero__inner {
    width: min(calc(100% - 38px), var(--page-width));
    min-height: 520px;
    padding-top: 40px;
  }

  .home-hero__content {
    width: 355px;
  }

  .home-hero__content h1 {
    font-size: 64px;
  }

  .home-hero__description {
    width: 325px;
    font-size: 16px;
  }

  .flight-search-section {
    margin-top: -58px;
  }
}

/* Mobile */

@media (max-width: 720px) {
  .home-hero {
    min-height: 585px;

    background-image:
      linear-gradient(
        90deg,
        rgba(246, 251, 255, 0.93) 0%,
        rgba(246, 251, 255, 0.74) 54%,
        rgba(246, 251, 255, 0.15) 100%
      ),
      url("/assets/images/hero_images/Home_hero_logo.png?v=1785608587");

    background-position:
      center,
      61% center;
  }

  .home-hero__inner {
    width: calc(100% - 30px);
    min-height: 585px;
    padding-top: 31px;
  }

  .home-hero__content {
    width: min(100%, 350px);
  }

  .home-hero__content .section-eyebrow {
    font-size: 14px;
  }

  .home-hero__content h1 {
    font-size: 56px;
    letter-spacing: -2px;
  }

  .home-hero__description {
    width: min(100%, 320px);
    margin-top: 18px;
    font-size: 15px;
  }

  .flight-search-section {
    margin-top: -38px;
  }
}