///
/// Phantom by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Tiles */

.tiles {
  $gutter: 30px;
  $duration: 0.5s;
  $ease: "ease";

  @include vendor("display", "flex");
  @include vendor("flex-wrap", "wrap");
  justify-content: space-between;

  article {
    @include vendor("transition", ("all #{$duration} #{$ease}"));
    width: calc((100% - 60px) / 3);
    margin: 15px 0;
    background: #fff;
    box-shadow: 0px 0px 6px rgba(41, 41, 132, 0.12);
    position: relative;
    transition: 0.2s ease-in-out all;
    overflow: hidden;

    &:hover {
      box-shadow: 0 0 0 1px #8f68fc, 0px 2px 12px rgba(41, 41, 132, 0.24);
      transform: translateY(-3%);
      > a .iamge img {
        transform: scale(1.05);
      }
    }

    > .image {
      @include vendor("transition", "transform #{$duration} #{$ease}");
      position: relative;
      display: block;
      width: 100%;
      border-radius: _size(border-radius);
      overflow: hidden;

      img {
        transition: 0.3s ease-in-out all;
        width: 100%;
        height: 175px;
        object-fit: cover;
      }

      &:before {
        @include vendor("pointer-events", "none");
        @include vendor(
          "transition",
          (
            "background-color #{$duration} #{$ease}",
            "opacity #{$duration} #{$ease}"
          )
        );
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        z-index: 1;
        opacity: 0.8;
      }

      &:after {
        @include vendor("pointer-events", "none");
        @include vendor("transition", "opacity #{$duration} #{$ease}");
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: svg-url(
          '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 0.25px; stroke: #ffffff; }</style><line x1="0" y1="0" x2="100" y2="100" /><line x1="100" y1="0" x2="0" y2="100" /></svg>'
        );
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      @include vendor("display", "flex");
      @include vendor("flex-direction", "column");
      @include vendor("align-items", "start");
      @include vendor("justify-content", "center");
      @include vendor(
        "transition",
        (
          "background-color #{$duration} #{$ease}",
          "transform #{$duration} #{$ease}",
          "color #{$duration} #{$ease}"
        )
      );
      width: 100%;
      height: 100%;
      padding: 13px 18px;
      border-radius: _size(border-radius);
      border-bottom: 0;
      text-decoration: none;
      z-index: 3;
      font-family: Kanit;
      font-style: normal;
      font-weight: 500;
      font-size: 22px;
      line-height: 120%;
      color: #8f68fc;

      span {
        position: absolute;
        right: 20px;
        font-family: Open Sans;
        font-size: 16px;
        color: #bdbdbd;
      }

      > :last-child {
        margin: 0;
      }

      h2 {
        margin: 0;
        margin-right: auto;
        letter-spacing: 0;
        text-transform: none;
        font-size: 22px;
        font-weight: 500;
      }

      .content {
        @include vendor(
          "transition",
          ("max-height #{$duration} #{$ease}", "opacity #{$duration} #{$ease}")
        );
        width: 100%;
        max-height: 0;
        line-height: 1.5;
        margin-top: 0.35em;
        opacity: 0;
        font-family: "Open Sans";
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 160%;

        > :last-child {
          margin-bottom: 0;
        }
      }
    }

    &.style1 {
      > .image:before {
        background-color: _palette(accent1);
      }
    }

    &.style2 {
      > .image:before {
        background-color: _palette(accent2);
      }
    }

    &.style3 {
      > .image:before {
        background-color: _palette(accent3);
      }
    }

    &.style4 {
      > .image:before {
        background-color: _palette(accent4);
      }
    }

    &.style5 {
      > .image:before {
        background-color: _palette(accent5);
      }
    }

    &.style6 {
      > .image:before {
        background-color: _palette(accent6);
      }
    }

    body:not(.is-touch) & {
      &:hover {
        > .image {
          @include vendor("transform", "scale(1.1)");

          &:before {
            background-color: _palette(bg-accent);
            opacity: 0.35;
          }

          &:after {
            opacity: 0;
          }
        }

        .content {
          max-height: 15em;
          opacity: 1;
        }
      }
    }
  }

  &.floating {
    article:hover {
      box-shadow: 0 0 0 1px #8f68fc, 0px 2px 12px rgba(41, 41, 132, 0.24);
      transform: translateY(-20%);

      a {
        color: #05d2dd;
      }
    }
  }

  * + & {
    margin-top: _size(element-margin);
  }

  body.is-loading & {
    article {
      @include vendor("transform", "scale(0.9)");
      opacity: 0;
    }
  }

  body.is-touch & {
    article {
      .content {
        max-height: 15em;
        opacity: 1;
      }
    }
  }

  @include breakpoint(large) {
    $gutter: _size(gutter) * 0.5;

    article {
      width: calc (#{(100% / 3)} - #{$gutter * 1});
      margin: $gutter 0 0 $gutter;
    }
  }

  @include breakpoint(medium) {
    $gutter: _size(gutter);

    article {
      width: calc (#{(100% / 2)} - #{$gutter * 1});
      margin: $gutter 0 0 $gutter;
    }
  }

  @include breakpoint(small) {
    $gutter: _size(gutter) * 0.5;

    article {
      width: calc (#{(100% / 2)} - #{$gutter * 1});
      margin: $gutter 0 0 $gutter;

      &:hover {
        > .image {
          @include vendor("transform", "scale(1.0)");
        }
      }
    }
  }

  @include breakpoint(xsmall) {
    $gutter: _size(gutter) * 0.5;

    margin: 0;

    article {
      width: 100%;
      margin: $gutter 0 0 0;
    }
  }
}

// For post page

.post {
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-transform: none;
    letter-spacing: normal;
  }
  .tiles {
    display: flex;
    margin: 0 -15px;
    @include breakpoint(small) {
      margin: 0;
    }
    article {
      width: calc(33.33% - 30px);
      margin: 0 15px 30px;
      max-height: 100%;
      box-shadow: 0px 2px 4px rgba(41, 41, 132, 0.06);
      background-color: #fff;
      overflow: hidden;

      transition: 0.3s ease-in-out all;

      &:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid _color(purple-color);
        z-index: 10;
        background: transparent;
        transition: 0.3s;
        opacity: 0;
      }
      &:hover {
        transform: translateY(-10px);
        cursor: pointer;
        box-shadow: 0px 4px 20px rgba(41, 41, 132, 0.24);
        &:before {
          opacity: 1;
        }
        > a img {
          transform: scale(1.05);
        }
      }
      @include breakpoint(small) {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
      }
    }
    .post-link {
      display: flex;
      flex-direction: column;
      width: 100%;
      color: _color(main-color);
      padding: 0;
      position: relative;
      border-radius: 0;
      z-index: 100;
      border: 1px solid transparent;
    }
    .post-top {
      width: 100%;
      position: relative;
      padding-top: 55%;
      overflow: hidden;
      @include breakpoint(medium) {
        padding-top: 65%;
      }
      @include breakpoint(medium) {
        padding-top: 56.25%;
      }
    }
    .image {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      object-fit: cover;
      img {
        border-radius: 0;
        width: 100%;
        height: 100%;
        transition: 0.3s ease-in-out all;
      }
    }
    .descr2 {
      flex-grow: 1;
      margin-right: auto;
      padding: 1px 18px 15px 15px;
      font-style: normal;
      font-weight: 500;
      font-size: 22px;
      display: flex;
      flex-direction: column;
      .content {
        overflow: hidden;
        flex-grow: 1;
        max-height: 105px;
        opacity: 1;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .descr {
      padding: 2em 1.5em;
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      .content {
        overflow: hidden;
        flex-grow: 1;
        max-height: 105px;
        opacity: 1;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
