/* ==========================================================================
   Specific CSS for the services detail page
   ========================================================================== */

.service

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

  // Top row with back-button and title
  .go-back-holder,
  .title-holder
    position: relative
    padding-bottom: column(2)

    .alignment-controller
      +position(absolute, 0 null null 0)
      display: flex
      align-items: center
      height: 100%
      width: 100%

  // Back to services
  .go-back-holder
    .alignment-controller
      justify-content: flex-end

  .title-holder h2
      padding-left: column(1,7)
      margin: 0

  // Service top row on large
  +respond-to-width($lgGridBreakpoint)
    .title-holder h2
      padding-left: column(.5,7)

  // Service top row on small
  +respond-to-width($smGridBreakpoint)
    text-align: left

    .title-holder h2
      padding-left: 0
    .title-holder,
    .go-back-holder
      padding: 30px column(1.5,14)
      width: 100%

      .alignment-controller
        position: relative
        justify-content: flex-start

  // Service top row on extra small
  +respond-to-width($xsGridBreakpoint)
    .go-back-holder,
    .title-holder
      padding: $mobileTopSpace $mobileAsideSpace

  // Description and image
  .description-container
    .image
      margin-bottom: column(1)
    .text-block
      padding-top: 0

    // Next service
    hr
      border: 0
      height: 1px
      margin: column(1,6) 0 10px
      background: $borderColor

    .next-service
      display: inline-block
      position: relative
      padding-right: 22px
      color: $black
      text-decoration: none

      // Arrow
      &:after
        +position(absolute, 7px 0 null null )
        content: ''
        width: 14px
        height: 14px
        +sprite(-80px -20px)
        +transition(transform 300ms ease-out)

      // Move arrow on hover
      &:hover:after
        +transform(translateX(5px))

  // Featured
  .featured-cases
    max-width: $gridMaxWidth
    margin: 0 auto

  +respond-to-width($smGridBreakpoint)
    .description-container .image
      margin-bottom: 0
      width: 100%
    .text-block
      padding: column(2) column(1) !important
      width: 100%

  +respond-to-width($xsGridBreakpoint)

    .description-container
      .image
        margin-top: 0