/* ---------------------------------------------------------------------------*/
/* MOBILE FIRST - page/_page-frontpage.scss                                      */
/* ---------------------------------------------------------------------------*/
@charset "UTF-8";
////////////////////////////////////////////////////// BREAKPOINT EXTRA SMALL UP
@include media-breakpoint-up(xs) {
  //////////////////////////////////////////////////////////////////////////////
  // [ COMMON ]

  .path-frontpage {
    // node sticky
    article.node--sticky img.image-style-wide {
      border: 5px solid $yellow;
    }
    article.node > h2 {
      margin-top: .5rem;

      &:before {
        mask            : url('../icon/file-text.svg');
        mask-size       : cover;
        mask-repeat     : no-repeat;
        content         : '';
        width           : 30px;
        height          : 30px;
        display         : inline-block;
        background-color: $primary;
        transform       : translateY(2px);
        transition      : $transition-base;
        margin-right    : .25rem;
      }
      &:hover {
        &:before {
          background-color: darken($primary, 15%);
        }
      }
    }

    article.node .text-formatted {
      text-align: justify;
    }
    article.node--type-page > h2 {
      &:before {
        mask     : url('../icon/file.svg');
        mask-size: cover;
        width    : 20px;
        height   : 27px;
      }

    }
    article.node--type-article > h2 {
      &:before {
        mask     : url('../icon/file-text.svg');
        mask-size: cover;
        width    : 20px;
        height   : 27px;
      }
    }

    article.node--type-book > h2 {
      &:before {
        mask     : url('../icon/book.svg');
        mask-size: cover;
      }

    }
    article.node--type-forum > h2 {
      &:before {
        mask     : url('../icon/comment-fill.svg');
        mask-size: cover;
      }
    }
    .box-hp {
      padding-bottom: 2rem;
    }
    .box-hp:nth-of-type(n+3) article.node {
      padding-top: 2rem;
      margin-left: 0;
      border-top : 1px solid $gray-400;
    }
    article .node__links li {
      font-size: 90%;
    }
    article.node .image-style-wide {
      margin-top     : 0;
      margin-bottom  : 1rem;
      margin-right   : 0;
      min-width      : 100%;
      object-fit     : cover;
      max-height     : 150px;
      object-position: 0 50%;
    }
    .col-md-6 > article {
      height: 100%;
    }
    .col-md-6 > article {
      height: 100%;

      .field--name-body {
        flex-grow: 1;
        flex     : 1 1 auto;
      }
      .field--name-field-tags {
        margin-top: 0;
      }
      .node__links {
        margin-left: .5rem;
      }
    }

    //user image
    article.node .field--name-user-picture img[class*="image-style"] {
      margin-bottom: 0;
      margin-right : .5rem;
    }
  }
}

/////////////////////////////////////////////////////////// BREAKPOINT MEDIUM UP
@include media-breakpoint-up(md) {
  .path-frontpage {
    .box-hp {
      padding-bottom: 3rem;
    }
    .box-hp:nth-of-type(n+3) article.node {
      padding-top: 3rem;
    }
  }
}
