@use "../helpers/functions" as lib;
@use "../mixins/mixins" as mixins;

article aside[role="alert"],
article aside[role="status"] {
  margin-bottom: 1rem;
  padding: .75rem 1.25rem .75rem 3rem;
  position: relative;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

article aside[role="alert"] {
  color: var(--brand-primary);
  border-color: #fdb8b8;
  background-color: #FBBFBF;
}

article aside[role="alert"]:before,
article aside[role="status"]:before {
  width: 3rem;
  position: absolute;
  top: calc(50% - 0.75rem);
  left: 0;
  text-align: center;
  font-size: 1rem;
}

article aside[role="alert"]:before {
  content: "\f071";
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  font-weight: 900;
}

article aside[role="status"] {
  color: var(--brand-secondary);
  border-color: #bee5eb;
  background-color: #d1ecf1;
}

article aside[role="status"]:before {
  content: "\f129";
  font-family: "Font Awesome 5 Free";
  font-size: 1rem;
  font-weight: 900;
}

.article {
  @include mixins.content-reset;

  font-family: $font-family-content;
  font-size: lib.rem(16);
  font-weight: 400;
  line-height: lib.rem(32);

  @include mixins.content-image;

  &_narrow {
    @include media-breakpoint-up(lg) {
      margin: 0 6rem;
    }
  }

  h1, h2, h3, h4, h5 {
    margin-bottom: lib.rem(24);
    font-family: $font-family-non-content;
    font-weight: 700;
    font-style: normal;
  }

  h1 {
    font-size: lib.rem(40);
    line-height: lib.rem(48);
  }

  h2 {
    font-size: lib.rem(34);
    line-height: lib.rem(38);
  }

  h3 {
    font-size: lib.rem(28);
    line-height: lib.rem(33);
  }

  h4 {
    font-size: lib.rem(22);
    line-height: lib.rem(28);
  }

  h5 {
    font-size: lib.rem(20);
    line-height: lib.rem(24);
    color: var(--brand-dark-gray);
  }

  //ul, ol {
  //  margin-left: 0;
  //}
  //
  & > ul, & > ol {
    margin-left: lib.rem(24);
  }
  //
  //li {
  //  margin-left: 0;
  //}

  //img {
  //  max-width: 100%;
  //  height: auto;
  //  margin: 0 auto;
  //  border-radius: lib.rem(14);
  //}

  //figcaption {
  //  margin-top: lib.rem(10);
  //  font-size: lib.rem(18);
  //  font-style: italic;
  //  line-height: lib.rem(32);
  //}

  &__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: lib.rem(24);
    color: var(--brand-dark-gray);
    font-family: $font-family-non-content;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: lib.rem(17);
  }

  &__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: lib.rem(14);
    overflow: hidden;

    @include media-breakpoint-up(lg) {
      height: lib.rem(300);
    }

    img {
      width: 100%;
      height: auto;
    }
  }

  &__more-btn {
    width: 100%;
    margin-right: lib.rem(30);
    margin-left: lib.rem(30);
    text-align: center;

    @include media-breakpoint-up(md) {
      width: auto;
      margin-right: 0;
      margin-left: 0;
    }
  }

  /* border bottom */
  &_bb {
    border-bottom: 1px solid var(--brand-mid-grey);
  }
}

.article-title {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: lib.rem(14);
  color: var(--brand-secondary);

  @include media-breakpoint-up(md) {
    flex-direction: row;
  }

  & > h1, & > h2, & > h3 {
    margin-bottom: 0;
    font-size: lib.rem(40);
    line-height: lib.rem(48);
  }

  &__image {
    display: block;
    width: 100%;
    height: lib.rem(94);
    margin-bottom: lib.rem(16);
    text-align: center;
    border-radius: lib.rem(14);
    overflow: hidden;

    @include media-breakpoint-up(md) {
      width: lib.rem(56);
      height: lib.rem(56);
      margin-right: lib.rem(12);
      margin-bottom: 0;
    }

    img {
      width: auto;
      height: lib.rem(94);
      object-fit: cover;

      @include media-breakpoint-up(md) {
        width: auto;
        height: lib.rem(56);
      }
    }
  }

}

.article {
  padding-top: lib.rem(24);

  @include media-breakpoint-up(lg) {
    padding-top: lib.rem(38);
  }

  &_benchmarks {
    margin-right: 0;
    margin-left: 0;
    @include media-breakpoint-up(lg) {
      margin-right: 9rem;
    }
  }
}