/* ==========================================================================
   Specific CSS for the jobs page
   ========================================================================== */

// TODO: Refactor the whole page
.jobs

  // Remove margin on the header
  header.main
    margin-bottom: 0

    .intro
      padding: column(2) 0 column(1)

  .job-list
    margin-top: column(1,8)
    padding: 0
    color: $brightBlue
    font-size: $baseFontSize
    line-height: 1.4
    list-style: none

    li
      margin-bottom: 10px

    a
      display: block
      padding: 20px
      border: solid 2px $brightBlue
      font-size: 1.1em

      cursor: pointer
      &:hover
        border: solid 2px #fff
        color: #fff

  .our-offer
    margin-bottom: column(1)

  .image-holder
    margin-bottom: column(1)

  +respond-to-width($mdGridBreakpoint)
    .summary,
    .job
      .text-block
        display: block
        width: column(10,12)
        margin: 0 auto
        padding-left: 0
        padding-right: 0

        &:first-child
          padding-bottom: 1em
        &:nth-child(2)
          padding-top: 0
        .h2-spacer
          display: none
    .summary
      margin-bottom: 80px
    .our-offer
      display: block
      margin: 0 auto
      width: column(10,14)

  +respond-to-width($smGridBreakpoint)
    .summary,
    .job
      .text-block
        width: 100%
    .summary
      .image-holder
        width: 100%
    .our-offer
      width: column(12,14)

  +respond-to-width($xsGridBreakpoint)
    .our-offer
      width: 100%
      padding: 0 $mobileAsideSpace
    .summary,
    .job
      padding: 0 $mobileAsideSpace

// Job detail page
//QnD todo: refactor
.job
  header.main
    .intro
      padding: column(2) 0 column(.5)

      h1
        margin: 0
        color: #fff
        font-size: 2rem
        font-weight: medium()
        line-height: 1.25
        text-transform: none

  .job-description
    margin-bottom: column(1)

  .back-to-grid
    margin-bottom: column(1,6)

  .call-to-action-block
    margin-bottom: 0
    line-height: 1.4

    .flex-col
      &:first-child
        margin-right: column(1,8)
        width: column(3,8)
    h3
      color: #fff

    ol
      margin-bottom: 0

  .summary
    .text-block.top-indent .h2-spacer
      margin-top: -27px
    .image-holder
      margin-bottom: column(1)

  .back-to-grid-holder
    text-align: center

  +respond-to-width($lgGridBreakpoint)
    header.main .intro,
    .job-description .col-6
      width: column(10)
    .call-to-action-block
      width: 100%
    .summary
      .text-block
        display: block
        width: 100%
        &:first-child
          padding-bottom: 0
        &.top-indent .h2-spacer
          display: none
      .image-holder
        width: 100%
    +respond-to-width($smGridBreakpoint)
      header.main .intro,
      .job-description .col-6
        width: 90%
        line-height: 1.45
      .call-to-action-block h2
        display: none