/* ==========================================================================
   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)

  .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
      width: column(12, 14)
      max-width: 740px
      margin: auto
      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
    width: column(12, 14)
    max-width: 740px
    margin: 0 auto column(1)
    font-size: 20px
    white-space: normal

    > * + *
      margin-top: 40px

  .job-intro
    color: $darkBodyText
    font-size: 1.22222rem
    line-height: 1.54545

  .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)
    //.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
        line-height: 1.45
      //.call-to-action-block h2
      //  display: none

  +respond-to-width($xsGridBreakpoint)
    .summary
      .text-block
        padding-left: column(1, 14)
        padding-right: column(1, 14)