Hero: Wave

.c-hero {
  padding: remify(48px) remify(16px);

  main & {
    grid-column: full;
  }

  .c-hero__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 remify(16px);
  }

}


/*------------------------------------*\
  Hero simple
\*------------------------------------*/

.c-hero--simple {
  background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);

  .c-hero__inner {
    max-width: remify(720px);
  }

  .c-hero__image {
    text-align: center;
    margin-bottom: remify(16px);

    img {
      width: remify(48px);
    }
  }

  .c-hero__text {
    color: primary(night, 100);
    text-align: center;
    @include font-scale(level-5);

    strong {
      font-weight: fw(semibold);
    }
  }

}

/*------------------------------------*\
  Hero host
\*------------------------------------*/

.c-hero--host {
  // padding-bottom: remify(80px);

  // @include min-screen (bp(tablet)) {
  //   padding-bottom: remify(48px);
  // }
}

/*------------------------------------*\
  Hero MyFlight
\*------------------------------------*/

.c-hero--myflight {
  padding-left: remify(16px);
  padding-right: remify(16px);

  .c-hero__inner {
    max-width: remify(1360px);
    text-align: center;
  }

  .c-hero__image {
    @include min-screen (bp(tablet)) {
      margin-bottom: 0;
    }

    img {
      width: 100%;
      max-width: remify(30px);
    }
  }
  h1 { font-size: 100%; }
  
  h1 .c-hero__flight-number {
    color: primary(night, 100);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    @include font-scale(level-5, bold);
  }

  h1 .c-hero__text {
    margin-bottom: remify(8px);
    @include font-scale(level-2);
  }

  .c-hero__flight-radar {
    color: secondary(text, 100);
    margin-left: auto;
    margin-right: auto;
    max-width: remify(360px);

    .c-hero__line,
    .c-hero__distance {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .c-hero__line {
      @include font-scale(level-3, bold);
    }
    .c-hero__distance {
      color: #000;
      @include font-scale(level-1-5);
    }

    .c-hero__progress {
      flex-grow: 1;
      margin: 0 remify(4px);
      position: relative;
      overflow: hidden;
      
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-1px);
        left: 0;
        right: 0;
        border-bottom: 2px solid primary(sky, 10);
        
      }
    }
    
    .c-hero__plane {
      width: 10%;
      min-width: remify(30px);
      min-height: remify(30px);
      position: relative;
      background: url(../../images/svgs/flightradar24.svg) no-repeat right center;
      
    }
  }

}

/*------------------------------------*\
  Hero wave
\*------------------------------------*/

.c-hero--wave {
  position: relative;
  background-image: url('/images/hero-go-live.jpg');
  background-size: cover;
  padding: 0;

  .c-hero__inner {
    padding: remify(80px) remify(16px) 0;
    text-align: center;
    position: relative;
  }

  h1 {
    text-align: center;
    color: #fff;
    max-width: remify(900px);
    margin: remify(140px) auto;
  }

  .discover-more p {
    color: #fff;
    text-transform: uppercase;
    font-weight: fw(semibold);
    margin-bottom: remify(8px);
  }

  .c-hero__waveform {
    position: relative;
    bottom: remify(-6px);
    width: 100%;

    path {
      fill: secondary(page, 100);
    }

  }

  .ornament-cloud {
    position: absolute;
    bottom: remify(-220px);
    right: remify(-114px);
    max-width: remify(500px);
    z-index: 1;
    display: none;

    @include min-screen (bp(tablet)) {
      bottom: remify(-130px);
      display: block;
    }
  }

}

/*------------------------------------*\
  Hero map
\*------------------------------------*/

.c-hero--map {
  padding-top: remify(40px);
  padding-bottom: remify(40px);
  
  @include min-screen (bp(tablet-p)) {
    padding-bottom: remify(80px);
  }

  &.c-hero--detail {
    display: none;
    
    @include min-screen (bp(tablet-p)) {
      display: block;
    }
  }

  .c-airport-maps--search-results &,
  .c-airport-maps--category-selected &,
  .c-airport-maps--detail &,
  .c-airport-maps--empty-state & {
    
    @include min-screen (bp(tablet-p)) {
      padding-top: remify(80px);
    }
  }

  .c-hero__text {
    font-size: 180%;

    @include min-screen (bp(tablet-p)) {
      font-size: 300%;
    }
  }

  .c-hero__inner {
    margin-bottom: 0;
  }

  .c-hero__image {
    display: none;
  }

  .o-back {
    display: none;

    @include min-screen (bp(tablet-p)) {      
      margin-bottom: remify(24px);
      display: block;
    }
  }
}