/**
 * @file
 * Program Outcomes
 *
 * Styles for Program Outcomes object.
 */

@use '_helper' as *;

.program-outcomes {
  &__eyebrow {
    @include h6;
    margin-bottom: 16px;
    text-transform: uppercase;
  }

  &__header {
    margin-bottom: 14px;
  }

  &__intro {
    margin-bottom: 30px;

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

  &__story {
    margin-bottom: 20px;

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

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

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

      .vid-inline {
        margin: 0;

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

        &__container {
          border-radius: 15px 15px 0 0;
          overflow: visible;

          @media screen and (min-width: $break-large) {
            height: 100%;
            border-radius: 15px 0 0 15px;
          }
        }

        &__cover {
          @include focus-dark;

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

          &::before {
            z-index: 3;
          }

          img {
            position: absolute;
            height: 100%;
            border-radius: 15px 15px 0 0;
            object-fit: cover;

            @media screen and (min-width: $break-large) {
              border-radius: 15px 0 0 15px;
            }
          }
        }

        &__icon {
          width: 50px;
          height: 50px;
          position: relative;
          top: unset;
          left: 0;
          transform: unset;
          z-index: 2;

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

        video {
          border-radius: 15px 15px 0 0;

          @media screen and (min-width: $break-large) {
            border-radius: 15px 0 0 15px;
          }
        }
      }
    }

    &-image {
      padding-top: 102.2%;
      position: relative;

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

      @media screen and (min-width: $break-large) {
        padding-top: 105.4%;
        height: 100%;
      }
      
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 15px 15px 0 0;
        object-fit: cover;

        @media screen and (min-width: $break-large) {
          border-radius: 15px 0 0 15px;
        }
      }
    }

    &-content {
      @include watercolor-background;
      padding: 31px 20px;
      border-radius: 0 0 15px 15px;
      overflow: clip;

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

      @media screen and (min-width: $break-large) {
        padding: 60px 51px;
        flex: 1 1 50%;
        border-radius: 0 15px 15px 0;
      }
    }

    &-quote {
      @include quote(true);
      margin-bottom: 19px;

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

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

      &::before,
      &::after {
        position: absolute;
      }

      &::before {
        content: "\201C";
        margin-left: -8px;

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

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

      &::after {
        content: '\201D';

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

    &-footer {
      margin-bottom: 21px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;

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

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

    &-name {
      @include body(true);
    }
  }

  &__video-cover {
    padding: 52.3% 20px 29px;
    display: flex;
    position: relative;
    bottom: 0;
    left: 0;
    z-index: 2;

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

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

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      background: linear-gradient(
        180deg,
        rgba($color-black, 0) 0%,
        rgba($color-black, 0.5) 100%
      );
      border-radius: 15px 15px 0 0;

      @media screen and (min-width: $break-large) {
        border-radius: 15px 0 0 15px;
      }
    }
  }

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

    @media screen and (min-width: $break-medium) {
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      align-self: flex-end;
    }

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

    span {
      position: relative;
      z-index: 2;
      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);
      }
    }
  }

  // placeholder styles for empty embed wrapper
  &__embed {
    margin-bottom: 20px;
    padding: 20px;
    height: 450px;
    border: solid 1px $color-black;
    border-radius: 15px;

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

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

  &__footer {
    padding: 30px 20px;
    color: $color-white;
    background-color: $color-blue-dark;
    border-radius: 15px;

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

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

    &-title {
      margin-bottom: 10px;

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

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

      h3 {
        @include h5;
        margin: 0;
        color: $color-white;
      }
    }

    &-body {
      margin-bottom: 22px;

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

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

      &:last-child {
        margin: 0;
      }

      *:first-child {
        margin-top: 0;
      }

      a {
        @include focus-light;
        color: $color-white;
      }

      ul,
      ol {
        @media screen and (min-width: $break-medium) {
          column-count: 2;
          column-gap: 80px;
        }

        @media screen and (min-width: $break-large) {
          column-gap: 66px;
        }

        li {
          @media screen and (min-width: $break-medium) {
            flex: 0 0 calc(50% - 40px);
          }

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

      ul {
        li {
          &::before {
            border-color: $color-white;
          }
        }
      }

      ol {
        li {
          &::marker {
            color: $color-white;
          }
        }
      }
    }

    &-cta {
      a {
        @include focus-light;

        &:hover {
          color: $color-white;
          border-color: $color-white;
        }
      }
    }
  }
}