@import "_functions";
@import "_mixins";
@import "_variables";

.hero__banner__tall {
  display: grid;
  // Bottom padding so that shadow is not cut off.
  padding-bottom: 40px;

  grid-template-rows: auto 50px auto;
  grid-template-columns: 1fr;
  grid-template-areas: "content" "overlap" "image";

  @include media-breakpoint-up(lg) {
    grid-template-rows: 1fr 50px;
    grid-template-columns: 480px 186px 1fr;
    grid-template-areas:
        "image overlap content"
        "foot foot foot";
  }

  .banner-wrapper {
    background: var(--smally-hero-gradient, linear-gradient(
        118.46deg,
        var(--wsPrimaryColor, #3F4042) 28.72%,
        var(--wsSecondaryColor, #636466) 96.61%
    ));

    grid-row: 1 / span 2;
    grid-column: 1 / 1;

    @include media-breakpoint-up(lg) {
      grid-row: 1;
      grid-column: span 2 / -1;
      display: inline-grid;
      padding-left: 186px;
      min-height: 500px;
    }
  }

  .hero_banner-image,
  .hero_banner-video {
    grid-column: 1 / 1;
    grid-row: 2 / span 2;

    @include media-breakpoint-up(lg) {
      grid-row: 1 / span 2;
      grid-column: 1 / span 2;
    }

  }

  .chevron {
    position: absolute;
    z-index: 2;
    top: -10%;
    right: 0;
    transform: translateX(50%);
    overflow: hidden;

    @include media-breakpoint-up(lg) {
      height: calc(100% - 90px);
      top: 0;
      right: 50px;
      transform: translate(0);
    }

    svg {
      height: calc(100% + 50px);
      width: 100%;
      opacity: var(--smally-hero-chevron-opacity, 10%);

      @include media-breakpoint-up(lg) {
        width: auto;
      }

      path {
        fill: var(--smally-hero-chevron-fill, white);
      }
    }
  }

  .wrapper-content {
    order: 1;
    flex: 1 1;
    display: flex;
    justify-content: flex-start;
    padding: 40px 40px 90px;

    @include media-breakpoint-up(md) {
      margin-top: 0;
      align-items: center;
      background: none;
      padding-bottom: 40px;
    }
  }

  .breadcrumb-container,
  .hero_banner-content {
    position: relative;
    z-index: 3;
  }

  .hero_banner-content {
    width: fit-content;

    @include media-breakpoint-up(lg) {
      max-width: 480px;
    }

    .cta-wrapper {
      margin-top: 40px;
    }

    .block-title {
      font-size: 32px;
      line-height: 40px;
      margin-bottom: 20px;
      color: var(--smally-hero-color-header, white);

      @include media-breakpoint-up(lg) {
        font-size: 50px;
        line-height: 63px;
      }
    }

    .hero_banner-body {
      font-size: 18px;
      line-height: 24px;
      color: var(--smally-hero-color, white);
    }
  }

  .hero_banner-image,
  .hero_banner-video {
    // Add drop shadow to media container.
    filter: drop-shadow(0 10px 15px #00000040);

    height: calc(370 / 498 * 100vw);
    max-height: 370px;
    max-width: 498px;
  }

  .field--name-field-background-image img,
  .hero_banner--img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;

    @supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
      mask-image: url(../svg/hero_tall_mask.svg);
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: left;
    }

    // Make the class breakpoints match because they... don't for some reason.
    @include media-breakpoint-up(lg) {
      &.d-lg-none {
        display: none !important;
      }
      &.d-lg-block {
        display: block !important;
      }
    }
  }

  // AUDIO CONTROLS
  .hero_banner--audio-controls {
    background-color: rgba(#ffffff, .5);

    i,
    svg {
      font-size: 24px;
      width: 24px;
      height: auto;

      @media (min-width: 992px) {
        font-size: 36px;
      }

      &[class*="fa-volume"] {
        max-width: 50px;
      }
    }

    // Hide our play button
    &.is-playing #hero_banner--btn-play {
      display: none;
    }

    // Hide our pause button
    &:not(.is-playing) #hero_banner--btn-pause {
      display: none;
    }

    // Hide our mute button
    &.is-muted #hero_banner--btn-mute {
      display: none;
    }

    // Hide our mute button
    &:not(.is-muted) #hero_banner--btn-unmute {
      display: none;
    }
  }

  // YouTube Video
  .hero_banner-video,
  .hero_banner-image {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;

    &.hero_banner-video {
      flex: 1 1 auto;

      @include media-breakpoint-up(lg) {
        height: auto;
        position: relative;
      }
    }

    @include media-breakpoint-up(lg) {
      height: auto;
      max-height: calc(100% + 50px);
      max-width: 100%;
    }

    .field--name-field-background-image .contextual-region {
      position: static;
    }

    .hero_banner-video--youtube-player-wrapper {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;

      @supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
        mask-image: url(../svg/hero_tall_mask.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: left;
      }
    }

    video,
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .hero-banner-preloader {
    width: 60px;
    height: 60px;
    position: absolute;
    left: calc(50% - 30px);
    bottom: calc(25% - 30px);

    @include media-breakpoint-up(lg) {
      left: calc(25vw - 30px);
    }

    svg {
      width: 60px;
      height: auto;
    }
  }
}
