/*==========================================================================
  Service - Detail page
  ========================================================================== */

$blockAmount: 6
$transitionDelay: 0.7
$delayIntersect: 0.2
$delayBlockIntersect: 0.4

.ajax-container.services-detail
  display: grid
  grid-template-columns: 1fr 1fr
  grid-template-areas: "content image"

  .backToOverview
    position: absolute
    right: 85px
    top: 20px
    z-index: 5
    text-decoration: none
    font-size: 0.8rem
    text-transform: uppercase
    font-family: din()
    color: $darkRed
    transition: color 0.3s, opacity 0.3s
    opacity: 1
    &:hover
      color: $black

  .next-service, .open-realisations
    position: absolute
    bottom: 15px
    left: calc(50% - 100px)
    text-decoration: none
    width: 200px
    z-index: 10
    text-align: center
    cursor: pointer
    opacity: 1
    transition: opacity 0.4s
    p
      display: inline-block
      font-size: 0.8rem
      color: white
      font-family: din()
      text-transform: uppercase
      margin: 0
      opacity: 1
      text-shadow: 0 0 10px rgba(0,0,0, 0.5)
      transform: scale3d(1,1,1)
      transition: transform 0.3s, color 0.3s, opacity 0.5s, text-shadow 0.1s

    span
      display: block
      margin: auto
      +sprite(-33px -41px, 22px, 22px)
      +translate3d(0,0,0)
      opacity: 1
      transition: transform 0.3s

    &.animation-part
      p
        opacity: 0

      span
        opacity: 0
        +translate3d(0, -6px, 0)

    &:hover
      p
        color: $fontBlack
        text-shadow: 0 0 10px rgba(0,0,0, 0)
        transform: scale3d(1.1, 1.1, 1)
      span
        +translate3d(0, 2px, 0)

  .next-service
    z-index: 9
    pointer-events: none
    opacity: 0
    &.active
      z-index: 103
      pointer-events: all
      opacity: 1

  .title
    position: absolute
    z-index: 10
    left: 4%
    top: 5vh
    width: 96%
    font-size: 3.2rem
    line-height: 1
    text-transform: uppercase
    font-family: din()
    pointer-events: none

    div
      pointer-events: none

    .pre-title
      position: relative
      z-index: 1
      display: inline-block
      font-size: 0.7em
      background-color: white
      padding: 15px 15px 0
      margin-bottom: 8px
      +translate3d(0,0,0)
      opacity: 1
      transition: all 0.5s

      &.loaded-animation
        +translate3d(-40px, 0, 0)
        opacity: 0

        +respond-to-width-beyond(900)
          a, p span
            color: rgba($darkRed, 0)
            text-indent: -40px

          p
            color: rgba($lightGray, 0)
            text-indent: -40px

    a, p span
      color: rgba($darkRed, 1)
      text-decoration: none
      pointer-events: all
      text-indent: 0
      transition: all 0.5s ease 0.4s

    p
      display: inline-block
      color: rgba($lightGray, 1)
      margin: 0
      pointer-events: all
      text-indent: 0
      transition: all 0.5s ease 0.4s

    .main-title
      +translate3d(0,0,0)
      opacity: 1
      transition: all 0.5s ease 0.4s

      &.loaded-animation
        +translate3d(-40px, 0, 0)
        opacity: 0

        +respond-to-width-beyond(900)
          h1
            color: rgba($red, 0)
            text-indent: -40px

    h1
      margin-top: -14px
      padding: 4px 15px 0
      background-color: white
      display: inline-block
      font-size: 2em
      line-height: 1
      pointer-events: all
      color: rgba($red, 1)
      text-indent: 0
      transition: all 0.5s ease 0.7s

    +respond-to-width(1800)
      font-size: 2.6rem
      h1
        padding-bottom: 4px

    +respond-to-width(1650)
      h1
        font-size: 1.6em

    +respond-to-width(1150)
      font-size: 2.2rem

      h1
        font-size: 1.6em

  .content
    position: relative
    z-index: 4
    grid-area: content
    padding: 275px 8% 60px
    border-radius: 25px 0 0 25px

    background-color: transparent
    transition: all 0.4s

    &.loaded-animation
      background-color: transparent !important

    +respond-to-width(1800)
      padding-top: 265px

    +respond-to-width(1650)
      padding-top: 220px

    +respond-to-width(1150)
      padding-top: 250px

    +respond-to-width(1080)
      padding-top: 185px

    &.in-active
      .service-block
        max-height: 0
        opacity: 0
        margin-bottom: 0

    .service-block
      margin-bottom: 25px
      max-height: 470px
      opacity: 1
      transition: max-height 1s, margin-bottom 1s, opacity 0.5s ease 0.2s

      &:last-of-type
        margin-bottom: 0
        p:last-of-type
          margin-bottom: 0

      @for $i from 1 through $blockAmount
        &:nth-of-type(#{$i})
          h2
            transition-delay: #{$transitionDelay}s

          p
            transition-delay: #{$transitionDelay+0.1}s

          $transitionDelay: $transitionDelay + $delayIntersect !global

      h2
        position: relative
        color: $red
        padding-left: 50px
        font-size: 1.8rem
        line-height: 1
        text-transform: uppercase
        margin-bottom: 0
        opacity: 1
        +translate3d(0,0,0)
        transition: all 0.5s

        span
          position: absolute
          top: -1px
          left: 0
          color: white

      p
        color: white
        opacity: 1
        +translate3d(0,0,0)
        transition: all 0.5s

        &:first-of-type
          margin-top: 5px

        strong
          //color: $darkRed

      &.loaded-animation
        h2, p
          opacity: 0
          +translate3d(-40px, 0, 0)

  .image
    position: relative
    +flex(center, center)
    grid-area: image

    border-radius: 0 25px 25px 0
    overflow: hidden
    cursor: pointer

    &:before
      opacity: 1
      transition: opacity 0.6s

    &:after
      content: ''
      position: absolute
      top: 0
      right: 0
      width: 100%
      height: 100%
      background-color: $red
      transform: scale3d(1,1,1)
      border-radius: 0 25px 25px 0
      opacity: 1
      transition: transform 0.2s, opacity 0.2s, background 0.4s

    .placeholder
      position: relative
      z-index: 3
      width: 100%
      text-align: center
      cursor: pointer
      //overflow: hidden

      a
        text-decoration: none

      img
        width: 100%
        margin: 0 auto

      p
        +flex(center, center)
        position: relative
        z-index: 10
        top: -20px
        width: 70%
        max-width: 500px
        margin: auto
        padding: 15px 15px 12px
        font-family: din()
        text-transform: uppercase
        text-decoration: none
        color: $darkRed
        font-size: 1.4rem
        line-height: 1
        opacity: 1
        transition: opacity 0.4s ease 0.6s, color 0.4s

        &:after
          content: ''
          position: absolute
          z-index: -2
          top: 0
          left: 0
          width: 100%
          height: 100%
          background-color: white
          opacity: 1
          transition: width 0.4s ease 0.5s, opacity 0.2s ease 0.5s, background-color 0.4s

        +respond-to-width(1400)
          font-size: 1.2rem
        +respond-to-width(600)
          width: 90%

    .shape
      position: absolute
      z-index: 2
      top: 10%
      left: 10%
      +flex(center, center)
      width: 80%
      height: 80%
      transform: scale3d(1,1,1)
      transition: transform 0.6s

      svg
        width: 80%
        opacity: 1
        transform: scale3d(1,1,1)
        transition: transform 0.6s, opacity 0.6s

        path
          transform-origin: 50% 50%
          transition: fill 0.4s

        &#circle
          max-width: 600px

        &#triangle
          max-width: 700px

    &.animation-part
      &:after
        background-color: transparent !important
      &:before
        opacity: 0.3

      .shape
        svg
          opacity: 0

      .placeholder
        p
          opacity: 0
          &:after
            opacity: 0
            width: 0

    &:hover
      .placeholder
        p
          color: white
          &:after
            background-color: $darkRed
      .shape
        transform: scale3d(0.9, 0.9, 1)
        svg
          .st0
            fill: rgba(255,255,255, 0.3)


    // Custom fixes and animation for each service
    &.graphicDesign
      .placeholder
        img
          max-width: 550px
          width: 68%
          margin-top: -75px
          transform: scale3d(1,1,1)
          transition: transform 0.6s ease 0.2s, opacity 0.6s ease 0.05s
          opacity: 1

      &.animation-part
        .placeholder
          img
            transform: scale3d(0.6,0.6,1)
            opacity: 0
        .shape
          svg
            transform: scale3d(0.5,0.5,1)

    &.signage
      .placeholder
        img
          +translate3d(0,0,0)
          opacity: 1
          transition: transform 0.6s ease 0.2s, opacity 0.6s ease 0.05s
      .shape
        svg
          transform-origin: 50% 100%
          path
            transform: rotate(180deg)
      &.animation-part
        .placeholder
          img
            +translate3d(0,-5%,0)
            opacity: 0
        .shape
          svg
            transform: scale3d(1,0.3,1)

    &.fleetMarketing
      .shape
        width: 73.5%
        height: 73.5%
        left: 13.25%
        top: 13.25%

        svg
          transform: rotate(45deg)

      .placeholder
        img
          width: 80%
          +translate3d(0,0,0)
          opacity: 1
          transition: transform 0.6s ease 0.1s, opacity 0.6s ease 0.05s

      &.animation-part
        .placeholder
          img
            opacity: 0
            +translate3d(10%, 2.6%, 0)
        .shape
          svg
            transform: rotate(0)

    &.boatWrapping
      .shape
        width: 68.5%
        height: 68.5%
        left: 15.75%
        top: 15.75%
        svg
          transform: rotate(-45deg)

      .placeholder
        img
          width: 100%
          margin-top: -12%
          margin-bottom: -12%
          +translate3d(0,0,0)
          opacity: 1
          transition: transform 0.6s ease 0.1s, opacity 0.6s ease 0.05s

      &.animation-part
        .placeholder
          img
            +translate3d(10%, -2% , 0)
            opacity: 0

        .shape
          svg
            transform: rotate(0)

    &.carWrapping
      .shape
        width: 85%
        height: 85%
        left: 7.5%
        top: 7.5%
        svg
          transform: rotate(30deg)

      .placeholder
        padding-top: 150px
        img
          width: 95%
          margin-bottom: 40px
          opacity: 1
          transition: transform 0.6s ease 0.1s, opacity 0.6s ease 0.05s

      &.animation-part
        .placeholder
          img
            +translate3d(10%, -1%, 0)
            opacity: 0
        .shape
          svg
            transform: rotate(0)

    &.posMaterial
      .shape
        width: 100%
        height: 100%
        left: 0
        top: 0
        svg#triangle
          max-width: none

      .placeholder
        img
          margin-top: -13%
          width: 80%
          transition: transform 0.6s ease 0.1s, opacity 0.6s ease 0.05s

      &.animation-part
        .placeholder
          img
            +translate3d(0,5%,0)
            opacity: 0
        .shape
          svg
            transform: scale3d(0.3,1,1)

    &.fabric
      .shape
        transform: scale3d(1,1,1)
        transition: transform 0.6s

      .placeholder
        img
          margin-top: -16%
          margin-bottom: -20%
          width: 60%
          max-width: 580px
          +translate3d(0,0,0)
          opacity: 1
          transition: transform 0.6s ease 0.1s, opacity 0.6s ease 0.05s

      &.animation-part
        .placeholder
          img
            +translate3d(0, 8%, 0)
            opacity: 0
        .shape
          transform: scale3d(1.5,1.5,1)

      &:hover
        .shape
          transform: scale3d(0.9, 0.9, 1)

    &.interiorDeco
      .placeholder
        img
          width: 80%
          margin-top: -15%
          margin-bottom: -15%
          opacity: 1
          transform: scale3d(1,1,1)
          transition: transform 0.6s ease 0.1s, opacity 0.6s ease 0.05s

      &.animation-part
        .placeholder
          img
            opacity: 0
            transform: scale3d(0.8,0.8,1)

  // Background Spot White
  &#signage, &#carWrapping, &#posMaterial
    .image
      &:before
        content: ''
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        z-index: 1

        $endPosition: 40%
        background: transparent
        background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%, rgba(246,246,246,0) #{$endPosition})
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.7)), color-stop(#{$endPosition}, rgba(246,246,246,0)))
        background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%, rgba(246,246,246,0) #{$endPosition})
        background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%, rgba(246,246,246,0) #{$endPosition})
        background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%, rgba(246,246,246,0) #{$endPosition})
        background: radial-gradient(ellipse at center, rgba(255,255,255,0.8) 0%, rgba(246,246,246,0) #{$endPosition})

  // Background Spot Black
  &#fleetMarketing, &#boatWrapping
    .image
      &:before
        content: ''
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        z-index: 1

        $endPosition: 40%
        background: transparent
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) #{$endPosition})
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,0.7)), color-stop(#{$endPosition}, rgba(0,0,0,0)))
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) #{$endPosition})
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) #{$endPosition})
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) #{$endPosition})
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) #{$endPosition})
  &#boatWrapping
    .image:before
      opacity: 0.4

  // Inverted styling for odd children
  &[data-color-type='2']
    .backToOverview
      color: $darkGray
      &:hover
        color: $black

    .title
      a, p span
        color: $red

    h1
      color: $darkRed

    .image
      &:after
        background-color: $gray

    .content
      background-color: $red

      .service-block
        h2
          color: $darkRed

        p
          strong
            //color: $fontBlack

  &.animateOut
    .backToOverview, .next-service, .open-realisations
      opacity: 0

    .title
      .pre-title
        +translate3d(-40px, 0, 0)
        opacity: 0

      .main-title
        +translate3d(-40px, 0, 0)
        opacity: 0
        transition-delay: 0.3s !important

    .content
      transition: all 0.4s ease 0.6s
      background-color: transparent

      .service-block
        max-height: 470px
        h2, p
          transition-delay: 0.6s !important
          opacity: 0
          +translate3d(-40px, 0, 0)

    .image
      &:after
        background-color: transparent !important
        transition: transform 0.2s, opacity 0.2s, background 0.4s ease 0.6s

      &:before
        opacity: 0

      .placeholder

        img
          opacity: 0

        p
          opacity: 0

          &:after
            opacity: 0

      .shape
        transform: scale3d(0.6, 0.6, 1)

        svg
          opacity: 0


  /* (Small) Tablet view
    ========================================================================== */
  +respond-to-width-or-height(950, 700)
    display: block
    padding-top: 60px

    .title
      position: relative
      top: 0
      left: 8%
      width: 84%

    .content
      padding-top: 40px
      background-color: transparent !important

    .image
      max-height: 100%
      padding: 100px 0 150px
      border-radius: 0 0 25px 25px
      transition: padding 0.5s

      .placeholder
        transition: padding 0.5s
        img
          max-width: 700px
          margin: auto
          max-height: 100%
          transition: max-height 0.5s

      &.in-active
        padding: 0 !important
        .placeholder
          padding: 0 !important
          img
            max-height: 0
            margin-bottom: 0!important

      &:after
        border-radius: 0 0 25px 25px

      &.signage
        padding-top: 40px
        padding-bottom: 120px

        .shape
          top: 0

      &.carWrapping
        padding-top: 0
        padding-bottom: 85px

      &.fleetMarketing
        padding-bottom: 125px
        .shape
          top: 5%

      &.boatWrapping
        padding-bottom: 125px
        .shape
          top: 8%

    &[data-color-type='2']
      background-color: $red

      .backToOverview
        color: $darkRed

    &[data-color-type='1']
      .backToOverview
        color: $darkGray

  +respond-to-width(680)
    .title
      font-size: 1.5rem

  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(500, 600)
    padding-top: 80px

    .backToOverview
      color: $darkGray
      &:hover
        color: $black

    .next-service, .open-realisations
      position: relative
      z-index: 20
      padding: 40px 0
      display: block
      width: 100%
      left: 0
      bottom: auto
      background-color: $lighterGray
      pointer-events: all
      opacity: 1

      p
        color: $fontBlack
        text-shadow: 0 0 0 rgba(255,255,255, 0)

      span
        +sprite(-58px -41px, 22px, 22px)

    .next-service
      background-color: white

    .title
      font-size: 1.6rem

      .pre-title
        position: relative

    .content
      padding-top: 50px

      .service-block
        max-height: none
        h2
          font-size: 1.4rem
          padding-left: 35px

      &.in-active
        .service-block
          max-height: none
          opacity: 1

    .image
      border-radius: 0
      width: 100%
      height: 0
      padding-top: 0 !important
      padding-bottom: 85% !important
      &:after
        border-radius: 0

      .placeholder
        position: absolute
        top: 0
        left: 0
        +flex(center, center)
        +flex-rows
        height: 100%
        width: 100%

        img
          max-width: 700px
          margin: 20px auto 0

        p
          font-size: 1.1rem


      &.graphicDesign
        .placeholder
          img
            margin-top: -20px

      &.carWrapping
        .placeholder
          padding-top: 0
          img
            margin-top: 70px
            margin-bottom: 0

      &.boatWrapping
        .placeholder
          img
            margin-top: 0
            margin-bottom: -13%

      &.posMaterial
        .placeholder
          img
            margin-top: 0
            margin-bottom: -13%

      &.fabric
        .placeholder
          img
            margin-top: 0
            margin-bottom: -13%
          p
            margin-top: -9%

      &.interiorDeco
        .placeholder
          img
            margin-top: 0
            margin-bottom: 0

          p
            margin-top: -15%

    &[data-color-type='2']
      background-color: $red

      .backToOverview
        color: $darkRed