@import "../../../sass/webpack_deps";
@import "masthead_variables";

$masthead-straplines-height-small: (2.6rem + 2.7rem); // height + margin-bottom
$masthead-straplines-height-large: (4.1rem + 2.4rem); // height + margin-bottom

.masthead {
  background-color: $titlegray;
  color: $color-white;
  height: 90vh;
  left: 0;
  max-height: 80rem;
  min-height: 40rem;
  overflow: hidden;
  position: relative;
  top: 0;
  z-index: z("slideshow-slide") + 3;

  &--narrow {
    background-color: transparent;
    max-height: 70.8rem;
  }

  &--normal {
    margin-top: -5rem;

    @media (min-width: $min-720) {
      margin-top: -13rem;
    }
  }

  &--no-images.masthead--normal {
    background-color: transparent;
    color: $titlegray;
    height: 30rem;
  }

  &--no-images.masthead--narrow {
    @include container-padded();
    border: 0;
    color: $titlegray;
    height: 30rem;
  }

  &--has-images.masthead--narrow {
    height: calc(90vh - #{$header-height-mobile});

    @media (min-width: $min-720) {
      height: calc(90vh - #{$header-height});
    }
  }

  &__wrap {
    height: 100%;
  }

  &__text-wrap {
    @include container-padded();
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: z("middle");

    @media (min-width: $min-1290) {
      margin-left: auto;
      margin-right: auto;
      max-width: 90%;
    }

    .no-flexbox & {
      display: table;
      height: 100%;
      max-width: 100%;
      width: 100%;
    }
  }

  &__text-wrap--pull-up {
    .masthead__text {
      @media (max-height: 699px) {
        margin-top: -4.5rem;
      }
    }
  }

  &--no-images &__text-wrap {
    height: 100%;
    position: static;

    @media (min-width: $min-1290) {
      max-width: 100%;
    }
  }

  &__text {
    @include container-padded();
    max-width: 100%; // override container mixin’s default; causes off-centered text in IE
    position: relative;
    text-align: center;
    width: 100%;

    @media (min-width: $min-720) {
      margin-top: $header-height-mobile;
    }

    .no-flexbox & {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
  }

  &__breadcrumb {
    color: $color-white;
    font-size: 1.4rem;
    letter-spacing: -.02rem;
    line-height: 1;
    margin-bottom: 2rem;

    @media (min-width: $min-480) {
      margin-bottom: 2.6rem;
    }

    a {
      color: $color-white;
      position: relative;
      text-transform: uppercase;
    }
  }

  &--no-images &__breadcrumb {
    color: $titlegray;

    a {
      color: currentColor;
    }
  }

  &__breadcrumb__separator {
    font-size: 1.1rem;
    padding-left: .5rem;
    padding-right: .4rem;
    position: relative;
    top: -.1rem;
  }

  &__title {
    font-size: 5.6rem;
    font-weight: 600;
    letter-spacing: -.3rem;
    line-height: .9;

    @media (min-width: $min-560) {
      font-size: 8rem;
    }

    @media (min-width: $min-1080) {
      font-size: 12rem;
    }

    @media (max-width: $max-480) and (max-height: $max-720) {
      font-size: 6rem;
    }
  }

  &__title + &__button {
    margin-top: 4.2rem;
  }

  &__straplines {
    position: relative;

    &:not(.has-empty) {
      height: $masthead-straplines-height-small;
      padding-top: .5rem;

      @media (min-width: $min-720) {
        height: $masthead-straplines-height-large;
        padding-top: .7rem;
      }
    }
  }

  &__strapline {
    font-family: $miller-daily;
    font-size: 2rem;
    font-style: italic;
    left: 0;
    letter-spacing: .1rem;
    line-height: 1;
    opacity: 0;
    position: absolute;
    transition: opacity ($animation-speed-ui * 2) ease-in-out;
    width: 100%;

    @media (min-width: $min-720) {
      font-size: 3rem;
    }

    &--visible {
      opacity: 1;
    }
  }

  &__straplines.has-empty &__strapline--visible {
    height: $masthead-straplines-height-small;
    position: relative;

    @media (min-width: $min-720) {
      height: $masthead-straplines-height-large;
    }
  }

  &__straplines.has-empty &__strapline:not(:empty) {
    transition: height ($animation-speed-ui * 2) ease-in-out;
  }

  &__button {
    @include button();
    position: relative;
    z-index: z("default") + 1;
  }

  &__video-container {
    height: 100%;
    width: 100%;

    .masthead--narrow & {
      @include container-padded();

      @media (min-width: $min-1290) {
        max-width: 90%;
        padding: 0;
        position: relative;
      }
    }
  }

  &__video-wrap {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  &__video {
    display: block;
    opacity: 0;
    position: relative;
    transition: 200ms opacity;
    z-index: z("slideshow-slide") + 1; // above slideshow

    &.is-playing {
      display: block;
      opacity: 1;
    }
  }

  &__ad {
    @include container-padded;
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    margin-bottom: 1.2rem;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 10;

    @media (min-width: $min-720) {
      text-align: left;
    }

    @media (min-width: $min-1290) {
      margin-left: auto;
      margin-right: auto;
      max-width: 90%;
    }

    @media (min-width: $min-1430) {
      max-width: container();
    }

    .masthead--has-nav & {
      bottom: ($masthead-nav-height + .1);
    }

    .masthead--narrow & {
      @media (min-width: $min-720) and (max-width: $max-1430) {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
      }
    }

    .no-js & {
      display: none;
    }

    > .adunit {
      @media (max-width: $max-720) and (max-height: (499 * .0625 * 1em)) {
        transform: scale(.5);
        transform-origin: 50% 100%;
      }
    }
  }

  &__cta {
    bottom: 20px;
    height: 100px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0%);
    width: 200px;
    z-index: 10;

    @media (min-width: $min-720) {
      bottom: 10px;
      left: 17%;
    }

    .button {
      font-size: 1rem;
      left: 70px;
      margin: .5rem;
      padding: .8rem .6rem .6rem;
      position: relative;
      top: 52px;
      width: 120px;
    }

    .masthead__cta--copy {
      color: $color-white;
      font-size: 1.2rem;
      left: 80px;
      position: absolute;
    }
  }
}