/*==========================================================================
  Post detail page
  ========================================================================== */
body.default.post

  //.impression-image
  //  .placeholder
  //    figure
  //      padding-bottom: 50%

  .page-title
    .post-meta
      +flex(flex-start, center)

      .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: $darkGrey
        font-size: 0.75rem
        line-height: 1.2

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

    .post-categories
      padding-left: 0
      list-style: none
      +flex(flex-start, center)
      +flex-rows

      li
        background-color: white
        margin-right: 10px
        margin-bottom: 10px
        border-radius: 4px
        padding-left: 0
        transition: background-color 0.2s, border 0.2s
        border: 1px solid transparent

        + li
          margin-top: 0

        &:before
          display: none

        a
          display: inline-block
          padding: 6px 14px
          text-decoration: none
          font-size: 0.7rem
          line-height: 1.2
          color: $grey
          font-weight: 600

        &:hover
          background-color: rgba(white, 0)
          border-color: rgba($grey, 0.4)


  .dynamic-content
    padding-bottom: 100px
    border-bottom: 1px solid $greyLightBlue

    .share-post
      position: relative
      max-width: 600px
      padding-top: 10px
      margin: 60px auto 0

      &:before
        content: ''
        position: absolute
        left: 0
        top: 0
        display: block
        height: 1px
        width: 200px
        background-color: $greyLightBlue

      p
        font-size: 0.7rem
        line-height: 1.2
        color: $greyBluer

      .share-buttons
        +flex(flex-start, center)

        >span
          +flex(center, center)
          width: 30px
          height: 30px
          cursor: pointer

          + span
            margin-left: 10px

          &:before
            content: ''
            display: block
            opacity: 1
            transition: opacity 0.2s

          &:hover
            &:before
              opacity: 0.75

          &#shareFacebook
            &:before
              +sprite(0 -75px, 24px, 24px)
          &#shareTwitter
            &:before
              +sprite(-52px -75px, 24px, 20px)
          &#shareLinkedin
            &:before
              +sprite(-265px -100px, 25px, 24px)

  .posts-row
    margin-top: 60px

    +respond-to-width(1260)
      padding-bottom: 120px
      .title, .overview
        max-width: 600px
        margin-left: auto
        margin-right: auto

    +respond-to-width(620)
      padding-bottom: 60px

  .posts-overview
    padding-bottom: 60px

    +respond-to-width(875)
      padding-bottom: 0