/* ============ Pages ============= */

.main {
  padding-top: 49px;
}

.resource,
.news {
  &__thumb {
    border: 1px solid #707070;

    img {
      width: 100%;
      height: auto;
    }
  }

  &__text-wrap {
    padding: 1.5em 20px;
    color: $white;

    @include font-size(1.5);

    a {
      color: $white;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &__heading {
    @include font-size(2.4);
  }

  &__link {
    font-weight: 700;
    text-decoration: underline;
  }
}

.resource-filters,
.news-filters {
  margin: 0 0 2em;
  background: #ebeeef;
  padding: 1em 0;

  h2 {
    border-bottom: 1px solid #444;
    padding: 0 0 1em;

    @include font-size(1.7);
  }

  @include font-size(1.6);

  &__checks,
  &__select {
    padding: 0.5em 0;
    border-bottom: 1px solid #aaa;
    padding-bottom: 0.75em;

    @include font-size(1.4);

    .check {
      width: 50%;
      margin: 0;
    }

    select {
      @include font-size(1.4);
    }
  }

  &__select {
    padding-bottom: 1.75em;
  }
}

.news {
  max-width: 1230px;
  margin: 0 auto;
}

.news-header {
  color: $white;
  margin-top: 10px;
  margin-bottom: 2em;

  &__title {
    margin-bottom: 0.5em;
  }

  &__image {
    padding: 20px;
    background-position: center center;
    background-size: cover;
  }

  &__breadcrumb {
    color: $white;
    font-weight: 300;
    margin-top: 2.5em;

    @include font-size(1.3);

    p {
      margin: 0;
    }

    /* stylelint-disable-next-line no-descending-specificity */
    a {
      color: $white;
    }
  }
}

.nav-next {
  display: none;
}

.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  text-align: center;
  color: #777;
}

.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em); }
}

@keyframes pulse {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

/* stylelint-disable-next-line no-duplicate-selectors */
.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

#page-load-wrapper {
  height: 100px;
}

@media (min-width: 768px) {
  .resource-filters,
  .news-filters {
    &__checks {
      .check {
        width: 33.33%;
      }
    }
  }

  .news-filters {
    &__checks {
      .check {
        width: 25%;
      }
    }
  }

  .news-header {
    &__image {
      padding: 30px;
    }

    &__intro {
      max-width: 512px;

      @include font-size(1.8);
    }

    &__breadcrumb {
      margin-top: 5em;
    }
  }
}

@media (min-width: 992px) {
  .main {
    padding-top: 148px;
  }

  .resource,
  .news {
    &__text-wrap {
      padding: 1.5em 35px;
    }
  }

  .news-header {
    &__intro {
      @include font-size(2);
    }
  }
}




/* ============ Post Grid ============= */

form.searchandfilter {
  background: #eaeeef;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1160px;
  padding: 1em 20px;
  width: 100%;

  ul {
    display: table;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;

    li {
      display: table-cell;
      padding: 0;
      width: 100%;

      label {
        display: block;
        margin: 0;
        flex-grow: 1;
        // margin-right: 20px;

        input {
          border: 1px solid #666;
          font-size: 1rem;
          padding: 1.1em 20px;
          width: 100%;

          @include font-size(1.6);
        }
      }

      input {
        &[type="submit"] {
          appearance: none;
          border: none;
          background: $brand-green url("../images/template-icons/search-01-currentcolor.svg") no-repeat center center;
          background-size: 2rem;
          color: white;
          min-height: 61px;
          height: 100%;
          text-indent: -9999%;
        }
      }

      + li {
        padding-left: 10px;
      }
    }
  }
}

.search-filter-results {
  h1 {
    color: $brand-green;
    margin-bottom: 30px;
  }

  .search-filter-results-list {
    .search-filter-results-grid {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 100%;

      > article {
        background-color: #6d3c74;
        display: grid;
        grid-template-columns: 100%;

        // Purple, Blue, Black, Green, Grey

        &:nth-child(1n) {
          background-color: #6d3c74;
        }

        &:nth-child(2n) {
          background-color: #64c2c9;
        }

        &:nth-child(3n) {
          background-color: #22333b;
        }

        &:nth-child(4n) {
          background-color: $brand-green;
        }

        &:nth-child(5n) {
          background-color: #99a8b1;
        }

        > figure {
          background-color: white;
          display: flex;

          img {
            object-fit: cover;
          }
        }

        > div {
          color: white;
          padding: 50px 35px;

          header {
            h2 {
              color: white;
              margin-bottom: 2rem;

              a {
                color: inherit;
                text-decoration: none;

                &:hover,
                &:active,
                &:focus {
                  color: inherit;
                }
              }
            }
          }

          p {
            margin-bottom: 2rem;
          }

          a {
            color: white;
            font-weight: bold;

            &:hover,
            &:active,
            &:focus {
              color: inherit;
            }
          }
        }
      }
    }

    @media screen and (min-width: 769px) {
      .search-filter-results-grid {
        grid-gap: 25px;
        grid-template-columns: auto auto;

        > article {
          grid-template-columns: 50% 50%;
          // max-width: 50%;
        }
      }
    }
  }

  .search-filter-infinite-scroll {
    text-align: center;
  }

  .pagination {
    margin-top: 2rem;
    display: table;
    width: 100%;

    > div {
      display: table-cell;

      &.nav-next {
        text-align: right;
      }

      a {
        color: $brand-green;
      }
    }
  }
}