/**
 * @file
 * Story Display
 *
 * Contains styles for Story Display object.
 */

@use '_helper' as *;

.story-display {
  &__intro {
    margin-bottom: 30px;
  }

  &__cta {
    margin-bottom: 30px;
  }

  &__wrap {
    border-radius: 15px;
    overflow: hidden;

    @media screen and (min-width: $break-large) {
      display: flex;
    }
  }

  &__media {
    @media screen and (min-width: $break-large) {
      flex: 0 0 50%;
    }

    img {
      // border-radius: 15px 15px 0 0;
      width: 100%;
    }

    .vid-inline {
      margin: 0;

      @media screen and (min-width: $break-large) {
        height: 100%;
      }

      &__container {
        border-radius: 0;

        @media screen and (min-width: $break-large) {
          height: 100%;
          overflow: visible;
        }
      }

      &__cover {
        @media screen and (min-width: $break-large) {
          @include focus-light($offset: -4px);
          height: 100%;
        }

        &::before {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 47%, rgba(0, 0, 0, 0.50) 78.8%);

          @media screen and (min-width: $break-large) {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);
          }
        }

        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -2;
          object-fit: cover;
        }
      }

      &__icon {
        width: 50px;
        min-width: 50px;
        height: 50px;
        position: relative;
        top: unset;
        left: unset;
        transform: unset;

        @media screen and (min-width: $break-large) {
          width: 68px;
          min-width: 68px;
          height: 68px;
        }

        svg {
          path {            
            @media screen and (max-width: ($break-large - 1)) {
              transform: scale(0.75) translate(8px, 6px);
            }
          }
        }
      }
    }
  }

  &__video-cover {
    padding: 61.7% 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    bottom: 0;
    left: 0;
    z-index: 2;

    @media screen and (min-width: $break-medium) {
      padding: 43.8% 30px 30px;
      align-items: center;
      flex-direction: row;
      gap: 16px;
    }

    @media screen and (min-width: $break-large) {
      padding: 80.3% 40px 40px;
      height: 100%;
      align-items: flex-end;
    }

    span {
      font-family: $font-roboto-condensed;
      font-size: rem(25px);
      line-height: 1.05;
      font-weight: 900;
      text-transform: uppercase;
      color: $color-white;

      @media screen and (min-width: $break-large) {
        font-size: rem(35px);
      }
    }
  }

  &__video-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;

    @media screen and (min-width: $break-medium) {
      align-items: center;
      flex-direction: row;
      gap: 16px;
    }
  }

  &__image {
    padding-top: 100.6%;
    position: relative;

    @media screen and (min-width: $break-medium) {
      padding-top: 59.1%;
    }

    @media screen and (min-width: $break-large) {
      padding-top: 105.4%;
      min-height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }
  }

  &__content {
    padding: 30px 20px 20px;
    background-image: url('../../assets/img/watercolor/watercolor.jpg');
    background-position: center center;

    @media screen and (min-width: $break-medium) {
      padding: 40px 30px;
    }

    @media screen and (min-width: $break-large) {
      padding: 45px 50px 50px;
    }
  }

  &__quote {
    @include quote(true);
    margin-bottom: 20px;
    position: relative;

    &::before {
      content: '“';
      position: absolute;
      left: -8px;

      @media screen and (min-width: $break-medium) {
        left: -10px;
      }

      @media screen and (min-width: $break-large) {
        left: -12px;
      }
    }

    &::after {
      content: '”';
      position: absolute;
      margin-left: -1px;

      @media screen and (min-width: $break-medium) {
        margin-left: -2px;
      }
    }
  }

  &__quote-footer {
    margin-bottom: 20px;

    @media screen and (min-width: $break-medium) {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    @media screen and (min-width: $break-large) {
      margin-bottom: 18px;
      gap: 8px;
    }
  }

  &__title {
    @include body(true);
  }

  &__caption {
    padding-top: 20px;
    border-top: solid 1px $color-black;

    @media screen and (min-width: $break-medium) {
      padding-top: 18px;
    }

    @media screen and (min-width: $break-large) {
      padding: 20px 16px 0 0;
    }
  }

  &__intro {
    & + .story-display__wrap {
      @media screen and (min-width: $break-large) {
        margin-top: 50px;
      }
    }
  }

  &__cta {
    margin-top: 20px;

    & + .story-display__wrap {
      @media screen and (min-width: $break-large) {
        margin-top: 70px;
      }
    }
  }

  &--media-left {
    .story-display__wrap {
      @media screen and (min-width: $break-large) {
        flex-direction: row;
      }
    }
  }

  &--media-right {
    .story-display__wrap {
      @media screen and (min-width: $break-large) {
        flex-direction: row-reverse;
      }
    }
  }
}