/*==========================================================================
  Jobs overview page
  ========================================================================== */
body.jobs
  .content
    .job-overview
      overflow: hidden
      .grid-col
        overflow: visible

      > .grid-col
        > .grid-row
          padding: 120px 0 30px
          position: relative

          &:after
            content: ''
            display: block
            position: absolute
            top: 0
            left: column(11, 12)
            width: 30vw
            height: 100%
            background-color: $neutral-400
            z-index: -1

          +respond-to-width(850)
            width: 100%
            padding: 120px column(1) 30px

            &:after
              width: 180px
              left: auto
              right: 0

          h2
            color: $blue
            font-size: 2rem
            font-weight: 500
            line-height: 2.875rem
            margin-top: 0
            margin-bottom: 60px

          > .grid-col
            width: column(10,12)
            +flex(space-between, flex-start)
            flex-wrap: wrap

            article
              position: relative
              background-color: white
              display: block
              width: column(4.5, 10)
              margin-bottom: 60px
              box-shadow: 0 0 100px 0 rgba(0,40,105,0)
              transition: box-shadow 0.3s

              &:nth-child(2n)
                margin-right: 0

              h3
                position: relative
                overflow: visible
                width: 100%
                color: white
                font-size: 1.125rem
                font-weight: bold
                line-height: 1.1
                padding: 22px 30px
                margin: 0
                background-color: $blue-300

              .image
                width: 100%
                margin-bottom: 40px

                figure
                  background-color: lightgrey
                  display: block
                  width: 100%

                  img
                    width: 100%

              .wrapper
                padding: 30px 30px 60px

              .more
                display: block
                overflow: hidden
                position: absolute
                right: 0
                bottom: 0
                width: 160px
                height: 160px

                .more-button-placeholder
                  position: absolute
                  right: -76px
                  bottom: -35px
                  width: 213px
                  height: 127px
                  background-color: rgba($blue-300, 0.2)
                  transform: rotate(-45deg)
                  +flex(center, center)
                  flex-direction: column
                  cursor: pointer

                  color: $pastelBlue
                  font-size: 0.75rem
                  font-weight: bold
                  letter-spacing: 1px
                  line-height: 1rem
                  text-transform: uppercase
                  transition: background-color 0.3s, color 0.3s

                  .arrow-down
                    width: 0
                    height: 0
                    border-left: 10px solid transparent
                    border-right: 10px solid transparent
                    border-top: 10px solid $blue-300
                    margin-top: 10px
                    transition: border 0.3s

              .job-content
                color: $pastelBlue
                font-size: 1.125rem
                line-height: 2rem
                padding-right: 35px

                p:first-child
                  margin-top: 0

              &:hover
                box-shadow: 0 0 100px 0 rgba(0,40,105,0.2)

                .more
                  .more-button-placeholder
                    color: white
                    background-color: $blue-300

                    .arrow-down
                      border-top-color: white

            +respond-to-width(1260)
              width: 100%

              article
                width: calc(95% / 2)

            +respond-to-width(850)
              display: block

              article
                width: 100%
                max-width: 550px
                margin-left: auto
                margin-right: auto !important

    .job-footer
      position: relative
      z-index: 4
      background-color: $pastelBlue
      box-shadow: inset 0 0 200px 20px rgba(0,0,0,0.1)

      .grid-row
        padding: 80px 0
        position: relative
        overflow: visible
        height: 100%
        +flex(center, center)
        flex-direction: column

        .top-triangle
          display: block
          width: 48px
          height: 48px
          position: absolute
          top: -24px
          left: 0
          margin-left: column(-0.5, 12)
          z-index: 2

        h2
          text-align: center
          color: white
          font-size: 2rem
          font-weight: 500
          line-height: 2.875rem
          margin-top: 0

        .buttons
          a.button
            width: 240px

            &:first-child
              margin-right: 60px
              background-color: $green

              &:hover
                background-color: lighten($green, 10%)

          +respond-to-width(650)
            a.button
              display: block
              width: 250px
              margin: 0 auto

              &:first-child
                margin-right: auto

              + a.button
                margin-top: 20px

  +respond-to-width(960)
    .intro
      padding-bottom: 0

  +respond-to-width(425)
    .intro
      > .grid-col
        > .grid-row
          .right
            h1
              margin-bottom: 80px