/**
** ARTICLE
** Clean-modifier is used to avoid negative margin (when used in design manual)
** Title has icon when article is a resource type
**/

@mixin contentList() {
  ul:not([class]),
  ul.o-list--two-columns,
  ul.o-list--bullets,
  ol {
    @content;
  }
}

.c-article {
  font-family: $font-serif;
  background: $white;
  margin-top: $spacing--large;
  margin-right: auto;
  margin-bottom: $spacing;
  margin-left: auto;
  overflow-wrap: break-word;
  @include font-size(18px, 29px);
  position: relative;

  > section > p {
    &:not([class]) {
      margin-bottom: 29px;
    }
  }
  p {
    @include chinese() {
      @include font-size(20px, 35px);
    }
  }

  @include contentList() {
    @include chinese() {
      @include font-size(20px, 35px);
    }
  }

  @include chinese() {
    @include contentList() {
      @include font-size(22px, 35px);
    }

    p {
      @include font-size(22px, 35px);
    }
  }

  @include mq(tablet) {
    @include font-size(20px, 35px);

    p {
      @include chinese() {
        @include font-size(22px, 35px);
      }
    }

    > section > p {
      &:not([class]) {
        margin-bottom: 35px;
      }
    }

    @include contentList() {
      @include chinese() {
        @include font-size(22px, 35px);
      }
    }

    @include chinese() {
      @include contentList() {
        @include font-size(22px, 35px);
      }
      p {
        @include font-size(22px, 35px);
      }
    }

    padding: 0 $spacing $spacing;
    margin-bottom: $spacing--large;
    margin-top: -$spacing*6;
    padding-top: $spacing--large + $spacing;
  }
  @include mq(desktop) {
    padding-bottom: $spacing--large;
    margin-bottom: $spacing--large;
  }

  &:after {
    content: '';
    display: table;
    clear: both;
  }

  p {
    margin-top: 0;
  }
}
.c-article--clean {
  margin-top: $spacing;
  padding: $spacing--small;
  @include mq(tablet) {
    padding: none;
  }
  border: none;
}

.c-article__header {
  margin-bottom: $spacing;
  @include mq(tablet) {
    margin-bottom: $spacing--large;
  }
  @include mq(desktop) {
    margin-bottom: $spacing--large;
  }
}

.c-article__title {
  position: relative;

  h1 {
    margin: 0;
    @include mq($until: tablet) {
      line-height: 2rem;
    }
  }

  &--with-competence-goals {
    // Adjust first line width if article has competence goals
    @include mq(desktop) {
      h1:before {
        content: '';
        float: right;
        width: 140px;
        height: 1em;
      }
    }
  }

  padding: 0 0 $spacing--small 0;

  @include mq(tablet) {
    padding: 0 0 $spacing 0;
  }

  p {
    @include inuit-font-size(16px, 20px);
    color: $text-light-color;
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: $font;
    @include mq($until: tablet) {
      margin-bottom: 0;
    }
  }
}

.c-article__title--icon {
  padding-left: 70px;

  @include mq(desktop) {
    padding-left: 0;
  }

  .c-content-type-badge {
    position: absolute;
    left: 0;

    @include mq(tablet) {
      top: $spacing--small / 2;
    }

    @include mq(desktop) {
      left: -70px;
      top: $spacing--small / 2;
    }
  }
}