/*
// Variables & Definitions
*/

.post-cards-component {
  .heading h2 {
    max-width: 650px;
    font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 26px;
    font-weight: bold;
    padding-top: 75px;
    color: #333647;
  }
  /* heading */

  .post-list {
    text-align: left;
    overflow: hidden;
    padding-left: 0;
    padding-bottom: 25px;


    ul {
      text-align: center;
      padding-left: 0;

      li {
        list-style: none;
        color: #00a360;
        font-size: 17px;
        text-align: center;
        display: inline-block;
        font-weight: 500;
        font-style: normal;
        padding-right: 80px;
        font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      }
    }
    /* ul */

    /* desktop */
    @media screen and (min-width: 1025px) {
      .post-list-row {
        padding-left: 5px;
        padding-right: 5px;
      }

      .post-container {
        padding: 15px;
        &.col-md-10.post-container--desktop-large {
          width: 66.66%;
        }
        &.col-md-10.post-container--desktop-small {
          width: 33.33%;
        }
      }
    }

    /* tablet */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      .post-list-row {
        padding-left: 10px;
        padding-right: 10px;
      }

      .post-container {
        padding: 10px;
        width: 50%;
      }
    }

    /* mobile */
    

    .post {
      opacity: 1;
      transition: opacity 200ms ease-in-out;
		-moz-transition: opacity 200ms ease-in-out;
		-webkit-transition: opacity 200ms ease-in-out;
      display: block;
	  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      color: #090a0a;
      text-decoration: none;
      height: 420px;
      font-size: 18px;
      line-height: 22px;
      border-radius: 6px;
	  background-clip: padding-box;

      &:hover {
        opacity: .7;
      }


      &.post {
        height: 400px;
      }

      &.post:nth-child(2n+1) {

        > span {

          &.bottom {
            

            .title {
              margin-top: 24px;
            }
          }
          /* bottom */
        }
        /* span */
      }

      .post-image {
        display: block;
        overflow: hidden;
        position: relative;

        .background-image {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          object-fit: cover;
          object-position: 50% 25%;
        }

        
      }

      /* desktop */
      @media screen and (min-width: 1025px) {
        &.post--desktop-large {
          .post-image {
            height: 240px;
          }
          .post-details {
            height: 160px;
          }
        }

        &.post--desktop-small {
          .post-image {
            height: 200px;
          }
          .post-details {
            height: 200px;
          }
        }
      }

      /* tablet  */
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        &.post--desktop-large {
          .post-image {
            height: 200px;
          }
          .post-details {
            height: 200px;
          }
        }

        &.post--desktop-small {
          .post-image {
            height: 200px;
          }
          .post-details {
            height: 200px;
          }
        }
      }

      /* mobile  */
      @media screen and (max-width: 767px) {
        &.post--mobile-large {
          height: 275px;
          .post-image {
            height: 175px;
          }
          .post-details {
            height: 100px;
          }

        }
        &.post--mobile-small {
          height: 120px;
          display: flex;
          flex-direction: row-reverse;
          .post-image {
            width: 120px;
          }
          .post-details {
            flex-grow: 1;
          }
        }
      }


      > span {
        display: block;
        overflow: hidden;
        &:last-child {
          font-size: 14px;
        }
      }

      &.left {
        margin-left: 0;
      }

      &.right {
        margin-right: 0;
      }

      &.wide {
        > span {

          &.bottom {
            position: relative;
            background-color: #ffffff;
            color: #86939e;
            overflow: visible;
            padding: 24px 18px 18px 18px;

            > span {
              display: inline-block;
              width: 100%;
            }

            > span.author-image {
              display: inline-block;
              overflow: hidden;
              position: absolute;
              z-index: 10;
              left: 30px;
              top: -23px;
              width: 46px;
              height: 46px;
              border-radius: 23px;
			  background-clip: padding-box;

              > img {
                float: left;
              }
            }

            .title {
              margin: 0;
              font-size: 26px;
              line-height: 29px;
              max-height: 85px;
              overflow: hidden;
              font-weight: bold;
              color: #333647;
            }

            .author-name {
              color : #1D1D1F;
            }
          }
          /* bottom */
        }
        /* span */
      }
      /* wide */

      &.small {

        > span {
          &.top {
            color: #ffffff;
            height: 306px;
            padding: 25px 30px 0 30px;

            > span {
              display: inline-block;
              width: 100%;
            }

            .title {
              margin-bottom: 20px;
              font-size: 26px;
              line-height: 32px;
              font-weight: bold;
            }

            .author-name {
              color : #1D1D1F;
            }

            .excerpt {
              font-size: 14px;
              line-height: 21px;
              font-weight: 500;
            }
          }
          /* top */

          &.bottom {
            position: relative;
            background-color: #ffffff;
            color: #86939e;
            padding: 32px 20px 0 30px;
            overflow: visible;

            > span {
              display: inline-block;
              overflow: hidden;
              position: absolute;
              z-index: 10;
              left: 30px;
              top: -23px;
              width: 46px;
              height: 46px;
              border-radius: 23px;
			  background-clip: padding-box;

              > img {
                float: left;
              }
            }
          }
          /* bottom */
        }
        /* span */
      }
      /* small */
    }
    /* post */

    /* START carousel */

    /* We'll be using the 'transform' property to move the carousel's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space. */
    .featured-carousel {
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    .featured-header {
      font-size: 34px;
      line-height: 1.14em;
      color: #000000;
      margin-top: 0px;
    }

    /* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */
    .featured-posts {
      opacity: 0;
      position: absolute;
      margin: auto;
      /* transition: transform .5s, opacity .5s, z-index .5s;  */
    }

    .featured-posts.initial,
    .featured-posts.active {
      opacity: 1;
      position: relative;
    }

    /* Set 'z-index' to sit behind our '.active' item. */
    .featured-posts.prev,
    .featured-posts.next {
      z-index: 800;
    }

    /* Translate previous item to the left */
    .featured-posts.prev {
      transform: translateX(-100%);
    }

    /* Translate next item to the right */
    .featured-posts.next {
      transform: translateX(200%);
    }

    #arrows {
      display: none;  /* disable since we have no arrows */
      padding: 0;
      height: 0px;
      width: 1125px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      top: 35px;
      left: -1px;
    }

    /* Style navigation buttons to sit in the middle, either side of the carousel. */
    .arrow_icon--prev,
    .arrow_icon--next {
      position: absolute;
      top: 100%;
      width: 3rem;
      height: 3rem;
      background-color: #FFF;
      transform: translateY(-50%);
      border-radius: 50%;
      cursor: pointer;
      z-index: 1001; /* Sit on top of everything */
      border: 1px solid black;
      /*  opacity: 0;  Hide buttons until carousel is initialised
        transition:opacity 1s;*/
    }

    .arrow_icon--prev {
      float: left;
      position: relative;
    }

    .arrow_icon--next {
      float: right;
      position: relative;
    }

    /* Use pseudo elements to insert arrows inside of navigation buttons */
    .arrow_icon--prev::after,
    .arrow_icon--next::after {
      content: " ";
      position: absolute;
      width: 10px;
      height: 10px;
      top: 50%;
      left: 54%;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      transform: translate(-50%, -50%) rotate(135deg);
    }

    .arrow_icon--next::after {
      left: 47%;
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    /* END Carousel */

  }
  /* posts */

  ul#header {

    li {
      list-style: none;
      display: inline-block;
      color: #5a646d;
      font-size: 16px;
      font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-weight: 500;
      padding-left: 25px;
      padding-right: 25px;
      border-bottom: none;
      cursor: pointer;

      &:hover {
        color: #04a052;
        text-decoration: none;
      }
    }

    .active {
      font-weight: 500;
      border-bottom: thick solid #04a052;
      color: #04a052;
    }
  }
  /* ul#header */
}

/* post-cards-component */

/* TABLET STYLES */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .post-cards-component {
    .post-list {

      .featured-carousel {

        .featured-header {
          text-align: center;
          margin-bottom: 20px;
        }
      }

      .post {

        &.post {
          height: 400px;
        }

        &.post:nth-child(2n+1) {

          > span {

            &.bottom {
              

              .title {
                margin-top: 0;
              }
            }
            /* bottom */
          }
          /* span */
        }

        }
      /* post */

      #arrows {
        width: 727px;
        left: 0;
      }
    }
    /* posts */
  }
  /* post-cards-component */
}

/* MOBILE STYLING */

@media screen and (max-width: 767px) {
  .post-cards-component {

    .post-list {
      padding-bottom: 10px;

      .heading {

        h1, h2 {
          max-width: 100%;
          margin: 0 auto 25px auto;
          font-size: 26px !important;
          line-height: 30px;
          font-weight: 600 !important;
        }

        h1 {
          margin-bottom: 30px;

          & + p {
            margin-top: -10px;
          }
        }

        p {
          max-width: 100%;
          margin: 0 auto 30px auto;
          font-size: 18px;
          line-height: 22px;
        }
      }

      .featured-carousel {

        .featured-header {
          font-size: 22px;
          line-height: 1.14em;
          text-align: center;
          margin-bottom: 20px;
        }

        .post {
          margin: 0 0 21px 0 !important;
          font-size: 18px;
          line-height: 22px;
          background-color: white;

          

          &.post.post--mobile-large {

            > span {

              &.bottom {
                justify-content: center;
                width: 100%;
                padding: .5em;

                span.title {
                  font-size: 20px;
                  font-weight: bold;
                  position: relative;
                  color: #333647;
                  line-height: 1.2;
                }

                span.author-name {
                  font-size: 14px;
                  color: #1D1D1F;
                  display: inline-block;
                  line-height: 15px;
                }
              } /* bottom */
            } /* span */
          } /* &.post.post-container--mobile-large */

          > span {
            display: block;
          }

          &.small-mobile {
            background-color: #ffffff;

            > span {
              &.left {
                float: left;
                width: 59%;
                padding: 6px;

                .title {
                  font-size: 17px;
                  font-weight: 600;
                  line-height: 1.2;
                  padding: 6px;
                  display: inline-block;
                  margin-top: 0;
                }

                .author-name {
                  font-size: 14px;
                  color: #1D1D1F;
                  display: inline-block;
                  padding-left: 6px;
                  line-height: 15px;
                }
              }
              /* left */

              
              /* right */
            }
            /* span */
          }
          /* small-mobile */

          &.small {
            > span {
              &.top {
                height: auto;
                padding: inherit;
              }

              &.bottom {
                height: 80px;

                span.title {
                  font-size: 18px;
                  font-weight: bold;
                  position: relative;
                  width: 100%;
                  display: inline-block;
                  color: #333647;
                }

                span.author-name {
                  font-size: 13px;
                  padding: 10px 5px 10px 5px;
                  color: #1D1D1F;
                  display: inline-block;
                  position: relative;
                  line-height: 15px;
                  width: 100%;
                }
              }
              /* bottom */
            }
            /* span */
          }
          /* small */

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

          &.footer-ad {
            margin-top: 10px;
            margin-bottom: 0;
          }
        }
        /* post */

        ul#header {
          padding-left: 14px;

          li {
            list-style: none;
            display: inline-block;
            color: #5a646d;
            font-size: 16px;
            font-family: Roboto, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-weight: 500;
            padding-left: 7px;
            padding-right: 7px;
            border-bottom: none;
          }

          .active {
            font-weight: 500;
            border-bottom: thick solid #04a052;
            color: #04a052;
          }
        }
        /* ul#header */

        #arrows {
          display: none; /* disable since we have no arrows */
          height: 40px;
          padding: 0;
          width: 335px;
          margin-left: auto;
          margin-right: auto;
          position: relative;
          top: -28px;
          left: 2px;

          .arrow_icon--next {
            float: right;
            position: relative;
          }

          .arrow_icon--prev {
            float: left;
            position: relative;
          }
        }

      }
      /* featured-carousel */
    }
    /* posts */

    .button {
      text-align: center;
      padding: 5px 20px 0 20px;

      .mbt-btn {
        max-width: 100%;
        width: 100%;
        font-weight: 400;
      }
    }
  }
  /* post-cards-component */
}