/**
 * Article
 */

.Article {
  &:after {
    display: none !important;
  }
}

.Article-header,
.Article-footer {
  p {
    margin-bottom: 0;
    line-height: inherit;
  }
}

.Article-header {
  @include pie-clearfix;
  padding: 3em 0 1.8em;
}

.Article-title {
  margin: 0;
  font-size: 2.8em;
  line-height: 1.2;
}

.Article-content {
  h2 {
    margin: {
      top: 1em;
      bottom: .5em;
    }
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.4em;
  }

  p,
  figure,
  table,
  .Video {
    margin-bottom: 1.5em;
  }

  p {
    line-height: 1.8;
    word-break: break-all;

    + ul,
    + ol {
      margin: {
        top: -1.3em;
        bottom: 1.5em;
      }
    }
  }

  figure img,
  .Video iframe {
    display: block;
    margin: 0 auto;
  }

  figure {
    text-align: center;

    &.highlight {
      text-align: left;
    }

    a,
    img,
    .ImageSet {
      + figcaption {
        margin-top: 10px;
      }
    }
  }

  figcaption {
    font: {
      size: 14px;
      weight: normal;
    }
  }

  table {
    table-layout: fixed;
  }

  th,
  td {
    word-break: break-all;
  }

  blockquote p {
    margin-bottom: 12px;

    + ul,
    + ol {
      margin: {
        top: -10px;
        bottom: 12px;
      }
    }
  }

  .ImageSet--splice {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;

    .ImageSet-image {
      @include stretch;
      background-size: cover;

      img {
        display: none;
      }

      + .ImageSet-image {
        -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);
      }
    }
  }

  .Video {
    iframe {
      width: 100%;
    }

    &--bilibili iframe {
      height: 500px;
    }
  }
}

.Article-siblings {
  a {
    padding: 50px 25px 70px;
    text-align: center;
  }

  .Sibling {
    min-width: 50%;

    a {
      &:before {
        @include inline-block;
        position: relative;
        z-index: 2;
        padding: 2px 10px;
        border: 1px solid rgba(255, 255, 255, .5);
        border-radius: 4px;
        font: {
          size: 12px;
          weight: normal;
        }
        color: rgba(255, 255, 255, .8);
      }

      &:hover:before {
        color: #222;
        background-color: #fff;
      }
    }

    &.Sibling--previous {
      a:before {
        content: "上一篇";
      }
    }

    &.Sibling--next {
      a:before {
        content: "下一篇";
      }
    }

    @media all and (min-width: $screen-sm-min) {
      h3,
      p {
        text-align: left;
      }
    }

    h3 {
      margin-top: 15px;
      font-size: 16px * 1.4;
    }
  }

  .u-noCover {
    a {
      background-color: #f5f8fa;
      color: rgba(68, 68, 68, .8);

      &:before {
        color: rgba(0, 0, 0, .5);
        border-color: rgba(0, 0, 0, .2);
      }

      &:after {
        display: none;
      }
    }

    h3 {
      color: #444;
    }
  }

  + .Article-comments {
    margin-top: 15px;
  }

  @media all and (max-width: $screen-sm-max) {
    margin-top: 15px;
  }

  @media all and (max-width: $screen-xs-max) {
    .Sibling {
      a {
        padding: {
          top: 30px;
          bottom: 50px;
        }
      }
    }
  }
}

@media all and (min-width: $screen-md-min) {
  .Article-content,
  .Article-siblings,
  .Article-comments {
    padding-left: 0;
  }

  .Article-content {
    $media-width: 640px;

    figure img {
      max-width: $media-width;
    }

    .Video iframe {
      width: $media-width;
    }
  }

  .Article-footer {
    padding-right: 0;
  }
}

@media all and (max-width: $screen-sm-max) {
  .Article-title {
    font-size: 2.5em;
  }

  .Article-content,
  .Article-siblings,
  .Article-comments {
    padding: {
      right: 0;
      left: 0;
    }
  }

  .Article-footer {
    $c: #0871ab;

    padding: 20px;
    border-left: 4px solid $c;
    background-color: tint($c, 95);

    + .Article-comments {
      margin-top: 15px;
    }
  }
}

@media all and (max-width: $screen-xs-max) {
  .Article-content .Video--bilibili iframe {
    height: 320px;
  }
}



.ArticleList-item .fa {
  margin: {
    right: .5em;
    left: .5em;
  }
  font-size: 14px;
}