/*==========================================================================
  Header block - Home
  ========================================================================== */

.home-intro
  position: relative
  padding-bottom: 160px

  [class^="services"] &,
  [class^="jobs"] &
    padding-top: 20%

  /* Main image
    ========================================================================== */

  >figure
    position: absolute
    left: 0
    top: 0
    width: column(19, 24)
    height: calc(100% - 160px)
    background-size: cover
    background-position: center

    img
      width: 100%

  /* Blocks below the image
    ========================================================================== */
  .home-blocks
    position: relative
    z-index: 2
    display: block
    top: 160px
    font-size: 0
    line-height: 0
    white-space: nowrap
    letter-spacing: 0

    &:after
      content: ''
      position: absolute
      height: 160px

    .home-link-block
      position: relative
      height: 280px
      display: inline-block
      width: column(3, 10)
      margin-right: column(1, 20)
      vertical-align: top

      font-size: 1rem
      line-height: 1.6
      letter-spacing: 0.4px

      &:last-child
        margin-right: 0

      .placeholder
        +flex(center, flex-start)
        +align-content(flex-start)
        +flex-rows
        width: 100%
        height: 100%
        padding: 40px 10px 75px
        text-decoration: none

        figure
          +flex(center, center)
          width: 60px
          height: 60px
          margin-bottom: 20px
          border-radius: 100%
          background-color: rgba(255,255,255,0.1)

          &:before
            content: ''
            display: block

        h4
          width: 100%
          margin: 0
          font-size: 1.2rem
          line-height: 1.4
          text-align: center
          color: white
          opacity: 0.8

        p
          width: 100%
          margin: 0 0 20px
          font-size: 0.9rem
          font-style: italic
          text-align: center
          color: white

        span
          position: absolute
          bottom: 35px
          +flex(center, center)
          width: 180px
          height: 40px
          left: calc((100% - 180px) / 2)
          background-color: transparent
          border: 1px solid white
          border-radius: 20px
          font-weight: bold()
          color: white
          transition: background-color 0.3s

          &:after
            content: ''
            position: relative
            top: 1px
            display: inline-block
            margin-left: 20px
            +arrowWhite
            +translate3d(0,0,0)
            transition: transform 0.3s

        &:hover
          span
            background-color: rgba(255,255,255,0.1)
            &:after
              +translate3d(5px, 0, 0)

      // Responsive for smaller tablets
      +respond-to-width(1000)
        height: 220px
        .placeholder
          padding: 15px 10px
          h4
            font-size: 1rem
          p
            font-size: 0.8rem
          span
            bottom: 25px
            width: 150px
            font-size: 0.8rem

      // Define specific colors and icons for each block
      &.new-zuiderbos
        background-color: $pink
        .placeholder
          figure
            background-color: $lightPink
            &:before
              +sprite(-122px -128px, 27px, 26px)
      &.latest-news
        background-color: $darkBlue
        .placeholder
          figure
            background-color: $bluer
            &:before
              +sprite(-95px -128px, 25px, 25px)
      &.sick
        background-color: $yellow
        .placeholder
          figure
            background-color: $lightYellow
            &:before
              +sprite(-120px -102px, 20px, 20px)
      &.academy
        background-color: $globalBlue
        .placeholder
          figure
            background-color: $servicesBlue
            &:before
              +sprite(-167px -390px, 28px, 25px)

      &.education
        background-color: $servicesBlue
        .placeholder
          figure
            background-color: $globalBlue
            &:before
              +sprite(-135px -400px, 28px, 16px)


      // Colleague styling
      [class^="vso"] &
        &.new-zuiderbos
          background-color: $darkTurquoise
          .placeholder
            figure
              background-color: $turquoise

        &.latest-news
          background-color: $blue
          .placeholder
            figure
              background-color: $lightBlue

  +respond-to-width($xlGridBreakpoint)
    .home-directions
      margin-bottom: 120px