/**
 * @file
 * Page introduction
 *
 * Contains styles for accordion content object.
 */

@use '_helper' as *;

.page-intro {
  @include body-large(true);
  margin: 30px auto $spacing-vertical-sm;
  max-width: $content-narrow;

  @media screen and (min-width: $break-medium) {
    margin-top: $spacing-vertical-sm;
  }

  @media screen and (min-width: $break-large) {
    margin: 80px auto 60px;
  }

  &--with-border {
    padding-bottom: $spacing-vertical-sm;
    border-bottom: solid 1px $color-black-50;

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

  &--with-stats {
    @include body;
    max-width: $content-max;

    @media screen and (min-width: $break-medium) {
      margin: $spacing-vertical-sm 0;
    }

    @media screen and (min-width: $break-large) {
      margin: 80px 0 $spacing-vertical-lg;
    }

    .page-intro {
      &__header {
        margin-bottom: $spacing-vertical-text-sm;

        @media screen and (min-width: $break-large) {
          margin-bottom: $spacing-vertical-text-lg;
        }

        h2 {
          margin: 0;
        }
      }

      &__wrap {
        @media screen and (min-width: $break-medium) {
          display: flex;
          justify-content: space-between;
          gap: 27px;
        }

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

      &__content {
        margin-bottom: 30px;

        @media screen and (min-width: $break-medium) {
          margin: 0;
          flex: 0 0 60%;
        }

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

      &__text {
        @include body-large(true);
      }

      &__cta {
        margin-top: 20px;

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

      &__stats {
        margin: 0;
        padding: 0;

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

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

        li {
          margin-bottom: 20px;
          padding-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 15px;
          border-bottom: solid 1px $color-black-50;

          &:last-child {
            margin: 0;
            padding: 0;
            border: 0;
          }

          &::before {
            content: none;
          }
        }
      }

      &__number {
        @include h4;
      }
    }
  }

  &--with-list {
    @include body;
    max-width: $content-max;

    @media screen and (min-width: $break-medium) {
      margin: $spacing-vertical-sm 0;
    }

    @media screen and (min-width: $break-large) {
      margin: 80px 0 $spacing-vertical-lg;
    }

    .page-intro {
      &__header {
        margin-bottom: $spacing-vertical-text-sm;

        @media screen and (min-width: $break-large) {
          margin-bottom: $spacing-vertical-text-lg;
        }

        h2 {
          margin: 0;
        }
      }

      &__wrap {
        @media screen and (min-width: $break-medium) {
          display: flex;
          justify-content: space-between;
          gap: 27px;
        }
      }

      &__content {
        margin-bottom: 30px;

        @media screen and (min-width: $break-medium) {
          margin: 0;
          flex: 0 0 60%;
        }

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

      &__text {
        @include body-large(true);
      }

      &__cta {
        margin-top: 20px;

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

      &__list {
        margin: 0;
        padding: 0;

        &-title {
          margin-bottom: 20px;

          h2,
          h3 {
            @include h6;
            margin: 0;
            color: $color-black;
          }

          h2 {
            text-transform: unset;
          }
        }

        li {
          @include body-small;
          margin-bottom: 15px;
          padding-bottom: 15px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 10px;
          border-bottom: solid 1px $color-black-50;

          &:last-child {
            margin: 0;
            padding: 0;
            border: 0;
          }

          &::before {
            content: '';
            margin-top: -5px;
            margin-left: 1px;
            width: 13px;
            min-width: 13px;
            height: 5px;
            position: relative;
            top: unset;
            left: unset;
            transform: rotate(-45deg);
            background-color: unset;
            border: 0;
            border-bottom: 4px solid $color-blue-dark;
            border-left: 4px solid $color-blue-dark;
            border-radius: unset;
          }
        }
      }
    }
  }
}