/*==========================================================================
  Blog overview page
  ========================================================================== */
#blog
  .spotlight-row
    background-color: $lighterGrey2
    padding-top: 52px
    margin-bottom: 120px

    h1
      margin: 0
      font-size: 1.8rem
      line-height: 1.2
      color: $greyBluer
      +bree

    .first-post
      position: relative
      top: 60px

      &:before, &:after
        content: ''
        position: absolute
        top: 0
        width: 50%
        height: 100%

      &:before
        z-index: 1
        left: 0
        background-color: $greyBlue

      &:after
        right: 0
        width: 51%
        background-color: $greyBluer

      a
        text-decoration: none

      figure
        position: relative
        z-index: 2
        display: inline-block
        vertical-align: top
        width: 50%

        .placeholder
          display: block
          position: relative
          width: 100%
          height: 0
          padding-bottom: 66.667%

          span
            position: absolute
            left: 0
            top: 0
            height: 100%
            width: 100%
            background-position: center
            background-size: cover

            &.small
              display: none

            +respond-to-width(450)
              &.medium
                display: none
              &.small
                display: block

      .kms-content
        position: relative
        z-index: 2
        display: inline-block
        vertical-align: top
        width: 50%
        padding: 30px

        >*
          max-width: 450px

        h3
          color: white
          margin-bottom: 30px

        p
          color: white
          font-size: 0.8rem

        .button
          margin-top: 15px

      .post-meta
        +flex(flex-start, center)
        margin-top: 30px

        .author-image
          position: relative
          width: 60px
          height: 60px
          border-radius: 100%
          background-color: rgba(white, 0.2)
          margin: 0

          span
            position: absolute
            width: 100%
            height: 100%
            border-radius: 100%
            background-position: center
            background-size: cover
            background-repeat: no-repeat

        .author-name
          display: inline-block
          margin-left: 15px
          color: $greyLightBlue
          font-size: 0.75rem
          line-height: 1.2

        .date
          display: inline-block
          margin-left: 10px
          color: $darkGrey
          font-size: 0.75rem
          line-height: 1.2


      +respond-to-width(1400)
        figure
          position: absolute
          left: 0
          top: 0
          height: 100%

          .placeholder
            height: 100%

        .kms-content
          margin-left: 50%

      +respond-to-width(780)
        &:before, &:after
          display: none

        figure
          position: relative
          height: auto
          width: 100%

        .kms-content
          width: 100%
          margin-left: 0
          background-color: $greyBluer


  .post-category-title
    margin: 50px auto 60px

    h1
      margin: 0 0 10px
      font-size: 1.8rem
      line-height: 1.2
      color: $greyBluer
      +bree

    h2
      margin: 0
      font-size: 1.4rem
      line-height: 1.2
      color: $orange
      +bree


  .most-recent-row
    margin-bottom: 40px

    .grid-row
      +flex(space-between, center)

      .most-recent-posts
        width: 50%

      .feedback-company-placeholder
        width: 50%

      +respond-to-width(1200)
        .most-recent-posts
          width: column(8, 12)
        .feedback-company-placeholder
          width: column(4, 12)

      +respond-to-width(910)
        .most-recent-posts
          width: 100%

        .feedback-company-placeholder
          display: none

  .posts-overview
    margin-bottom: 60px

    .pagination
      margin-top: 45px
      padding-left: 0
      +flex(center, center)
      font-size: 0.8rem
      line-height: 1.2
      list-style: none
      font-weight: 600

      li
        margin: 0 6px

        a
          color: $greyBluer
          text-decoration: none

        &.active
          span
            color: $orange

        &:first-of-type, &:last-of-type
          a, span
            position: relative
            top: 1px
            display: block
            +sprite(-93px -1px, 6px, 10px)
            font-size: 0
            color: rgba(white, 0)

        &:first-of-type
          a, span
            transform: scale3d(-1, 1, 1)

        &.disabled
          opacity: 0.4

      +respond-to-width(620)
        margin-top: 60px



  +respond-to-width(680)
    .spotlight-row, .most-recent-row, .category-filters-row
      .grid-row
        width: calc(100% - 80px)


  +respond-to-width(450)

    .spotlight-row, .most-recent-row, .category-filters-row
      .grid-row
        width: calc(100% - 40px)

    .spotlight-row
      padding-top: 30px

      h1
        padding-left: 20px

      .grid-row
        .first-post
          top: 40px
          margin-bottom: -20px

          .kms-content
            padding: 20px

    .most-recent-row
      .grid-row
        .most-recent-posts
          h4
            padding-left: 20px

          ul
            li
              a
                width: calc(100% - 20px)

    .category-filters-row
      h4
        padding-left: 20px