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

.services

  header.main
    margin-bottom: 0

  +respond-to-width($mdGridBreakpoint)
    header.main
      .intro
        width: column(10)
    .call-to-action-block
      padding-left: column(2)
      padding-right: column(2)
      margin: 0
      .flex-col:first-child
        margin-right: column(2,10)

  +respond-to-width($xsGridBreakpoint)
    header.main
      .intro
        width: 100%
    .call-to-action-block
      padding: $mobileTopSpace $mobileAsideSpace


/* Services Grid
   ========================================================================== */

.services-grid

  background: $blue

  // The list containing all services
  ul
    display: grid
    grid-template-columns: 1fr 1fr 1fr 1fr
    grid-gap: 60px

    padding: 0 0 column(1,10)
    width: 100%
    margin: 0 auto column(1,10)
    list-style: none
    font-size: $baseFontSize

  // Service grid cell
  // 1. Because ul has a width of 12 with .75 padding on each side
  //    The width origin from the li is 10.5
  li
    border-bottom: 1px solid white

    &:hover
      border-color: $brightBlue
      .title
        color: $brightBlue
      .arrow
        +transform(translate3D(20px,0,0))
  a
    display: block
    padding-bottom: 1.5rem
    text-decoration: none
    color: rgba(255,255,255,0.8)
    +transition(borderColor 200ms ease-out)

  // Title
  .title
    display: block
    height: 6rem
    color: #fff

    line-height: 1.142857
    font-size: 1.4rem
    font-weight: bold()
    text-transform: uppercase
    letter-spacing: .05em
    +transition(color 200ms ease-out)

  .arrow
    display: block
    width: 25px
    height: 14px
    margin: 23px 0
    +sprite(0 0)
    +transition(transform 200ms ease-out)

  .comment
    display: block


  // Switch to 3-column layout
  +respond-to-width($mdGridBreakpoint)
    ul
      grid-template-columns: 1fr 1fr 1fr
      margin: 0

  // Switch to 2-column layout
  +respond-to-width($mdGridBreakpoint)
    ul
      grid-template-columns: 1fr 1fr

  // Switch to 1-column layout
  +respond-to-width(500)
    ul
      grid-template-columns: 1fr

  +respond-to-width($xsGridBreakpoint)
    .col-10
      width: 100%
    ul
      border-top: 1px solid #fff
      padding-bottom: 0
      grid-gap: 0
    li
      padding-bottom: 0
      &:last-child
        border: none
    a
      position: relative
      padding: $mobileTopSpace $mobileAsideSpace

    .title
      font-size: 1.2rem
      height: auto
    .comment
      width: 75%
    .arrow
      +position(absolute, 50% 20px null null)
      margin-top: -6px