/*==========================================================================
  News row
  ========================================================================== */

.post-row
  position: relative
  min-height: 500px
  padding-bottom: 50px

  // Gray balk bellow
  &:after
    content: ''
    position: absolute
    z-index: -1
    bottom: 0
    left: 0
    height: 220px
    width: 100%
    background-color: $lightGray2
    // Colleague styling
    [class^="vso"] &
      background-color: $lighterGray

  // Forrest background
  .background
    position: absolute
    left: 0
    top: 0 
    width: 100%
    height: calc(100% - 220px)
    background-image: url('/img/forest_top_view.jpg')
    background-size: cover
    background-position: center bottom
    [class^="vso"] &
      background-image: url('/img/forest_top_view_green.jpg')

  // Latest news title
  .streamer
    +flex(flex-start, center)
    padding: 50px 25px 0
    margin-top: 0
    margin-bottom: 0
    font-size: 0.9rem
    color: $brightBlue
    font-weight: semi-bold()
    display: none
    [class^="vso"] &
      color: $turquoise


  /* Articles
    ========================================================================== */
  .article-wrapper
    +flex(space-between, flex-start)
    overflow: visible
    padding-top: 60px

    article
      width: column(3, 10)
      background-color: white
      box-shadow: 0 0 0 0 rgba($darkBlue, 0)
      transition: box-shadow 0.4s

      a
        display: block
        text-decoration: none
        figure
          width: 100%
          padding-bottom: 100%
          background-image: url("/img/no-image.jpg")
          background-size: cover
          background-position: center

        .content
          position: relative
          padding: 30px column(1, 12) 20px
          min-height: 170px

          // News icon
          .icon
            position: absolute
            left: 0
            top: -60px
            +flex(center, center)
            width: 60px
            height: 60px
            background-color: $blue
            &:before
              content: ''
              display: inline-block
              +sprite(-95px -128px, 25px, 25px)

          h3
            color: $darkBlue
            height: 85px
            font-size: 1rem
            line-height: 1.2
            font-weight: bold()
            +respond-to-width(1200)
              font-size: 0.85rem


          span
            color: $lightPurple
            font-size: 0.8rem
            +respond-to-width(1200)
              font-size: 0.7rem

      &:hover
        box-shadow: 0 0 20px 0 rgba($darkBlue, 0.3)

      [class^="vso"] &
        box-shadow: 0 0 0 0 rgba($turquoise, 0)

        a
          .content
            h3
              color: $darkTurquoise
            span.date
              color: $turquoise
              opacity: 0.5

        &:hover
          box-shadow: 0 0 20px 0 rgba($turquoise, 0.4) 

  /* Call-to-action button
    ========================================================================== */
  a.button
    background-color: $yellow
    width: 220px
    height: 50px
    margin: 50px auto 0
    +flex(center, center)
    border-radius: 25px

    color: white
    font-size: 1rem
    font-weight: bold()
    text-decoration: none
    transition: background 0.3s

    &:after
      content: ''
      +arrowWhite
      display: inline-block
      margin-left: 15px
      margin-right: -10px
      +translate3d(0,0,0)
      transition: transform 0.3s

    &:hover
      background-color: $darkYellow
      &:after
        +translate3d(5px, 0, 0)


  +respond-to-width(840)
    .article-wrapper
      width: 100%
      margin-left: 0
      article
        a
          .content
            span
              display: inline-block
              height: 32px
              line-height: 1.2

  +respond-to-width(600)

    a.button, &:after, .background
      display: none

    .streamer
      display: block

    .article-wrapper
      display: block
      padding-top: 20px

      article
        height: auto
        width: 100%
        background-color: $darkBlue
        margin-bottom: 1px

        &:nth-of-type(odd)
          background-color: $lockBlue

        [class^="vso"] &
          background-color: $turquoise
          &:nth-of-type(odd)
            background-color: $darkTurquoise 

        a
          position: relative
          +flex(flex-start, flex-start)

          .content
            width: calc( 100% - 120px )
            padding: 25px
            min-height: 120px

            .icon
              display: none

            h3
              font-size: 1.1rem
              color: white !important
              height: auto

            .date
              font-size: 0.9rem
              color: white !important
              opacity: 0.6

          figure
            width: 120px
            height: 100%
            padding-bottom: 0
            position: absolute
            right: 0
            top: 0

            .overlay
              display: none

            &:after
              display: none

  +respond-to-width(450)
    .grid-row
      width: 100%

    .article-wrapper
      article
        a
          .content
            .date
              font-size: 0.8rem