/**
 * Overview of the latest posts
 *
 * 1. Put the text beneath the image on smaller screens
 */

.latest-posts
  margin-bottom: 100px
  +flex()
  +flex-rows

  +respond-to(small)
    flex-direction: column /* 1 */

  +respond-to(mobile)
    margin-bottom: 50px


  /**
    * Individual post item
    *
    * 1. Post item will have full-width on smaller screens
    * 2. Color settings of each post block item
    * 3. Link color
    * 4. Events when post-item is being hovered
    */

  .post-block
    width: $contentGrid*5.5
    +respond-to(small)
      width: 100% /* 1 */

    margin-bottom: 25px
    +flex(flex-start, flex-start)

    +respond-to(small-mobile)
      flex-direction: column

    color: $newsPostTextColor /* 2 */
    background:
      color: $newsPostBgColor

    transition: background 0.4s, box-shadow 0.4s

    a
      color: $white /* 3 */

    &:hover /* 4 */
      cursor: pointer
      background: $newsPostBgHoverColor
      box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.15)

      .post-intro
        .arrow-right
          transform: translateX(10px)

    .post-image
      background:
        position: center center
        size: cover
      min-width: 250px
      height: 100%
      min-height: 250px

      +respond-to(small)
        min-width: 50%
        width: 50%
      +respond-to(small-mobile)
        min-width: 100%
        width: 100%


    .post-intro
      height: 100%
      +flex(center, flex-start)
      flex-direction: column
      padding: $paddingSmallTextBlock

      +respond-to(small-mobile)
        width: 100%
        min-height: 200px

      h2
        color: $newsPostTitleColor
        margin-bottom: 5px
      h4
        color: $newsPostSubTitleColor

      .arrow-right
        margin-top: 10px
        display: block
        width: 35px
        height: 35px
        background:
          image: url('/img/icons/arrows-right.svg')
          repeat: no-repeat
        transition: transform 0.4s ease

  .timestamp
    +font-default(14px, 20px)
    color: $newsPostDateColor
    margin-bottom: 10px


/** SINGLE POSTS **/

.single-post
  +flex()

  .post-block
    padding: 75px
    width: 100%
    margin-bottom: 25px
    +flex(flex-start, flex-start)
    background:
      color: $singleNewsPostBgColor
    color: $singleNewsPostTextColor

    +respond-to(mobile)
      flex-direction: column
      padding: 0

    a
      color: $white

    .title
      color: $singleNewsPostTitleColor
      margin-bottom: 5px
    .subtitle
      color: $singleNewsPostSubTitleColor
      margin-bottom: 25px

    .post-image
      background:
        position: center center
        size: cover
      width: 50%
      height: 100%
      max-height: 1080px

      +respond-to(mobile)
        min-height: 250px
        width: 100%

    .post-content
      //max-width: $textMaxWidth
      padding: $paddingSmallTextBlock

      a
        transition: color 0.3s ease
        color: $singleNewsPostLinkColor
        &:hover
          color: $singleNewsPostLinkHoverColor

/** DYNAMIC PAGES **/

.dynamic
  p
    max-width: $textMaxWidth
  .content-container
    width: 100%

.full-text-block
  max-width: $textMaxWidth

/** POST BACK BUTTON **/

.post-back-button
  +flex(center, center)
  width: 225px
  height: 50px
  background:
    color: $primaryBtnColor
  color: $primaryBtnTextColor
  transition: background 0.4s, color 0.4s
  cursor: pointer
  margin: 0 auto 100px auto
  +respond-to-width(900)
    margin: 0 auto 50px auto

  a
    color: $primaryBtnTextColor

  &:hover
    background:
      color: $primaryBtnHoverColor
    color: $primaryBtnTextHoverColor