News Card: Vertical News Card

.news-card {
  width: 100%;
  margin-bottom: 0.8rem;
  text-decoration: none;
  transition: box-shadow 0.3s ease-in-out;

  &:hover {
    box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.32);
  }

  &__image {
    position: relative;
    background: url(./assets/images/new-card-placeholder-teams.jpg) no-repeat
      center;
    background-size: cover;

    img {
      border-radius: 0.2rem 0.2rem 0 0;
    }

    &--time {
      color: $color-interface-light;
      background: $white;
      padding: 1rem 1rem 1rem 4rem;
      display: inline-block;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      font-size: 1.2rem;
      font-family: var(--brand-text--font-family);

      &::before {
        content: '';
        background: $white url(./assets/images/file-icon.svg) no-repeat center;
        padding: 0.9rem 1rem;
        display: block;
        position: absolute;
        left: 0;
        width: 3.2rem;
        height: 3.1rem;
        bottom: 0;
        border-right: 0.1rem solid $grey-light1;
      }

      span {
        display: none;
      }
    }
  }

  &__content {
    padding: 1.2rem 1.6rem;
    background: $white;
    border: 0.1rem solid $grey-light;

    &--title {
      font-family: var(--brand-text--font-family);
      font-size: 1rem;
      line-height: 2.4rem;
      letter-spacing: 0.02em;
      color: $bold-red;
      text-transform: uppercase;
    }

    &--description {
      font-family: var(--brand-text--font-family);
      font-size: var(--brand-p-1--font-size);
      font-weight: 500;
      line-height: 2.4rem;
      letter-spacing: 0.01em;
      color: $blue;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 7.2rem;
    }

    hr {
      display: none;
    }

    &--date-wrap {
      @include text-xs;

      letter-spacing: 0.01em;
      text-align: right;
      padding-top: 1rem;
      color: $color-interface-light;
      line-height: 1.4rem;
    }
  }

  // For Single News Card
  &--single {
    .news-card__image {
      img {
        height: 28.6rem;
        object-fit: cover;
        width: 100%;
      }
    }
  }

  // For Horizontal News Card
  &--horizontal {
    display: flex;
    margin-bottom: 0.8rem;

    &:last-child {
      margin-bottom: 0;
    }

    .news-card__image {
      img {
        width: 20rem;
        height: 12.8rem;
        object-fit: cover;
        object-position: center;
        border-radius: 0.2rem 0 0 0.2rem;
      }
    }
    .news-card__content {
      padding: 1.2rem 1.2rem 0.8rem 1.2rem;
      width: 100%;

      &--description {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: 0.01em;
        min-height: 5.4rem;
        font-weight: 400;
      }

      &--date-wrap {
        padding-top: 1rem;
      }
    }
  }

  // For Vertical News Card
  &--vertical {
    display: flex;
    margin-bottom: 0.8rem;

    .news-card__image {
      img {
        width: 20rem;
        // max-width: 12rem;
        height: 12.8rem;
        object-fit: cover;
        object-position: center;
        border-radius: 0.2rem 0 0 0.2rem;
      }
    }

    .news-card__content {
      padding: 1.2rem 1.2rem 0.8rem 1.2rem;
      width: 100%;

      &--description {
        font-size: 1.4rem;
        line-height: 1.8rem;
        letter-spacing: 0.01em;
        min-height: 5.4rem;
      }

      &--date-wrap {
        padding-top: 1rem;
      }
    }
  }

  // Default Video Styling
  &--video {
    .news-card__image--time {
      color: $white;
      background-color: $blue;
      &::before {
        content: '';
        background: $bold-red url(./assets/images/video-play-button.svg)
          no-repeat center;
        padding: 0.9rem 1rem;
        display: block;
        position: absolute;
        left: 0;
        width: 3.2rem;
        height: 3.2rem;
        bottom: 0;
        border: 0;
      }
    }

    .news-card__content {
      background-color: $blue;
      border: none;

      hr {
        color: $white;
      }

      .news-card__content--title {
        color: $grey-light;
      }
      .news-card__content--description {
        font-family: $text-font;
        color: $white;
      }

      .news-card__content--date-wrap {
        @include text-xs;

        letter-spacing: 0.01em;
        text-align: right;
        padding-top: 1rem;
        color: $white;
        line-height: 1.4rem;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    display: flex;
    max-width: 78.5rem;
    width: 100%;
    margin-bottom: 0;
    border-radius: 0.4rem;

    &__image {
      order: 2;
      overflow: hidden;

      img {
        height: 42.8rem;
        width: 49.5rem;
        object-fit: cover;
        object-position: center;
        border-radius: 0 0.4rem 0.4rem 0;
        transition: transform 0.5s ease-in-out;

        /* stylelint-disable no-descending-specificity */
        .news-card:hover & {
          transform: scale(1.1);
        }

        .news-card--video:hover & {
          transform: none;
        }
      }

      .time {
        display: none;
      }
    }

    &__content {
      order: 1;
      width: 100%;
      max-width: 35.4rem;
      padding: 2.8rem 2.4rem;
      border-radius: 0.4rem 0 0 0.4rem;

      &--title {
        font-size: 1.4rem;
        line-height: 2rem;
        margin-bottom: 1.4rem;
      }

      hr {
        margin-top: 1.4rem;
        color: $color-interface-light;
        opacity: 0.2;
        display: block;
      }

      &--date-wrap {
        text-align: left;
        padding-top: 0;
        line-height: 1.8rem;
        .date {
          &::before {
            content: '';
            background: url(./assets/images/calendar.svg) no-repeat center /
              1.4rem;
            height: 1.4rem;
            width: 1.4rem;
            position: relative;
            display: inline-block;
            top: 0.2rem;
            margin-right: 0.8rem;
          }
        }
      }

      &--description {
        min-height: 12.4rem;
        -webkit-line-clamp: 4;
        font-size: 2.4rem;
        line-height: 3.1rem;
      }
    }

    // For Single News Card
    &--single {
      .news-card__image {
        img {
          height: 42.8rem;
          object-fit: cover;
        }
      }
      .news-card__content {
        min-width: 29rem;
      }
    }

    // For Horizontal News Card.news-card:hover
    &--horizontal {
      max-width: 27.4rem;
      padding-right: 0;
      display: block;

      &:last-child {
        padding-right: 0;
      }

      .news-card__image {
        img {
          width: 100%;
          max-width: 27.4rem;
          height: 22.8rem;
          border-radius: 0.4rem 0.4rem 0 0;
        }

        &--time {
          display: block;

          span {
            display: unset;
          }
        }
      }

      .news-card__content {
        padding: 0.8rem 1.6rem 1rem 1.6rem;
        max-width: 27.4rem;
        border-radius: 0 0 0.4rem 0.4rem;

        &--title {
          font-size: 1rem;
          line-height: 2.4rem;
          margin-bottom: 0.2rem;
        }

        &--date-wrap {
          padding-top: 0;
          line-height: 1.8rem;
        }

        &--description {
          -webkit-line-clamp: 3;
          font-size: 1.6rem;
        }
      }
    }

    // For Vertical News Card
    &--vertical {
      display: flex;
      max-width: 34.3rem;
      max-height: 12.8rem;
      margin-bottom: 2.2rem;
      padding-right: 0;
      margin-right: 0;
      border-radius: 0.2rem;

      &:last-child {
        margin-bottom: 0;
      }

      .news-card__image {
        order: unset;

        img {
          border-radius: 0.2rem 0 0 0.2rem;
        }
        &--time {
          display: block;
        }
      }

      .news-card__content {
        padding: 1.2rem 1.2rem;
        border-radius: 0 0.2rem 0.2rem 0;
        min-width: 22.3rem;

        &--title {
          font-size: 1rem;
          line-height: 2.4rem;
          margin-bottom: 0;
        }

        &--date-wrap {
          text-align: right;
          line-height: 1.4rem;
          .date {
            &::before {
              display: none;
            }
          }
        }

        hr {
          display: none;
        }

        &--description {
          -webkit-line-clamp: 3;
        }
      }
    }

    &--video {
      .news-card__content {
        .news-card__content--date-wrap {
          display: flex;
          color: $white;
          padding: 0.4rem 0;
          ::before {
            content: '';
            background: url(./assets/images/calendar-white.svg) no-repeat center /
              1.4rem;
            height: 1.4rem;
            width: 1.4rem;
            position: relative;
            display: inline-block;
            top: 0.2rem;
            margin-right: 0.8rem;
          }
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) and (max-width: 1140px) {
    &--vertical {
      .news-card__content {
        min-width: 14.3rem;
      }
    }
  }
}

[data-brand=''],
[data-brand='englandfootball'],
[data-brand='englandfootball--supplimentary'] {
  .news-card {
    &__image {
      background: url(./assets/images/new-card-placeholder-ef.jpg) no-repeat
        center;
      background-size: cover;
    }
    &__content {
      &--title {
        font-size: 1.2rem;
        line-height: 1.2rem;
        margin-bottom: 0.4rem;
      }
      &--description {
        font-size: 1.4rem;
        line-height: 2rem;
      }
      &--date-wrap {
        font-family: var(--brand-text--font-family);
        font-size: 1.2rem;
        line-height: 1.4rem;
        letter-spacing: -0.01em;
      }
    }

    // For Single News Card
    &--single {
      .news-card__content {
        &--description {
          font-size: 1.8rem;
        }
      }
    }

    // For Vertical News Card
    &--vertical {
      .news-card__content {
        &--title {
          margin-bottom: 0.4rem;
        }
        &--description {
          font-size: 1.4rem;
          line-height: 2rem;
        }
      }
    }

    @media screen and (min-width: $mq-medium) {
      &__content {
        &--title {
          font-size: 1.4rem;
          line-height: 2rem;
          margin-bottom: 1.4rem;
        }
        &--description {
          font-size: 2.4rem;
          line-height: 2.6rem;
        }
        &--date-wrap {
          font-size: 1.4rem;
          line-height: 1.6rem;
          letter-spacing: -0.02em;
        }
      }

      // For Single News Card
      &--single {
        .news-card__content {
          &--description {
            font-size: 2.4rem;
          }
        }
      }

      // For horizontal News Card
      &--horizontal {
        .news-card__content {
          &--title {
            margin-bottom: 0.4rem;
          }
          &--description {
            font-family: var(--brand-text--font-family);
            font-size: 1.8rem;
            line-height: 2rem;
            letter-spacing: 0.01em;
            font-weight: 400;
            min-height: 6rem;
          }
          &--date-wrap {
            font-size: 1.2rem;
            line-height: 1.2rem;
            letter-spacing: -0.01em;
          }
        }
      }
      // For Vertical News Card
      &--vertical {
        .news-card__content {
          &--title {
            margin-bottom: 0.4rem;
          }
          &--description {
            font-size: 1.4rem;
            line-height: 2rem;
          }
          &--date-wrap {
            font-size: 1.2rem;
            line-height: 1.2rem;
            letter-spacing: -0.01em;
          }
        }
      }
    }
  }
}