/*==========================================================================
  News overview page
  ========================================================================== */
.news
  .white-styling-block
    position: relative
    height: 160px
    width: 100%
    background-color: white
    margin-top: -160px

  +respond-to-width(840)
    .image-wrapper
      background-image: none

  +respond-to-width(680)
    .news-overview
      .overview-placeholder
        .articles
          article
            height: auto
            width: 100%
            background-color: $darkBlue
            margin-bottom: 1px

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

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

                h3
                  font-size: 1.1rem

                .date
                  font-size: 0.9rem




    &[class^="vso"]
      .news-overview
        .overview-placeholder
          .articles
            article
              background-color: $turquoise
              &:nth-of-type(odd)
                background-color: $darkTurquoise


.news-overview
  position: relative

  .grid-row
    position: relative
    .styling
      position: absolute
      z-index: 3
      left: 0
      bottom: 25px
      width: 60px
      height: 212px
      &:after
        content: ''
        +sprite(-195px 0, 60px, 212px)
        display: block

      [class^="vso"] &
        &:after
          +sprite(-442px 0, 60px, 212px)


  // Offset coloring
  &:after
    content: ''
    position: absolute
    z-index: 0
    right: 0
    bottom: 0
    height: calc(100% - 120px)
    width: 50%
    background-color: white

  .overview-placeholder
    position: relative
    z-index: 1
    background-color: white
    padding: 0 column(1, 12)

    .overview-header
      margin-bottom: 60px

      h1
        font-size: 2rem
        color: $darkBlue

        [class^="vso"] &
          color: $darkTurquoise

      .pagination
        position: relative
        top: 17px

    // Return link
    .return-link
      height: 100px
      margin-top: 20px
      +flex(flex-start, center)
      a
        font-size: 0.8rem
        color: $blue
        text-decoration: none
        font-weight: medium()
        transition: color 0.3s

        &:before
          content: ''
          margin-right: 10px
          +arrowBlue
          +translate3dRotate(0,0,0,180deg)
          transition: transform 0.3s

        &:hover
          color: $bluer
          &:before
            +translate3dRotate(-5px,0,0,180deg)

    /* News items
      ========================================================================== */
    .articles
      +flex(space-between, flex-start)
      +flex-rows

      article
        width: calc((100% - 30px) / 3)
        margin-bottom: 15px

        a
          position: relative
          display: block
          height: 100%
          text-decoration: none
          background-color: $brightBlue
          transition: background 0.4s

          figure
            position: relative
            width: 100%
            height: 0
            padding-bottom: 57.2%
            overflow: hidden

            .overlay
              position: absolute
              z-index: 1
              left: 0
              top: 0
              height: 100%
              width: 100%
              background-color: $blue
              background-size: cover
              background-position: center
              transform: scale3d(1, 1, 1)
              transition: transform 0.7s

          .content
            position: relative
            z-index: 5
            padding: 30px
            min-height: 137px

            h3
              color: white
              font-size: 1rem
              line-height: 1.2
              font-weight: bold()

              +respond-to-width(1000)
                font-size: 0.9rem

            .date
              color: $blue
              font-size: 0.9rem
              line-height: 1.2
              font-weight: medium()
              +respond-to-width(1000)
                font-size: 0.7rem

          [class^="vso"] &
            background-color: $darkTurquoise

            figure
              span
                background-color: $turquoise
            .content
              .date
                color: $textTurquoise

            &:hover
              background-color: $turquoise

          &:hover
            background-color: $lockBlue
            figure
              .overlay
                transform: scale3d(1.06, 1.06, 1)

        +respond-to-width(1500)
          width: calc((100% - 15px) / 2)

  +respond-to-width(840)
    padding: 50px 0 35px

    .grid-row
      width: 100%

    .styling
      display: none

    .overview-placeholder
      width: 100%
      padding: 0
      margin-left: 0

      .overview-header
        width: column(12, 14)
        margin-left: auto
        margin-right: auto
        margin-bottom: 30px
        h1
          font-size: 1.6rem
          line-height: 1.2
          margin-top: 20px
          width: 100%

        .pagination
          width: 100%
          text-align: center
          top: 0

          li
            margin-top: 30px

      .return-link
        height: auto
        width: column(12, 14)
        margin-left: auto
        margin-right: auto