// Partials / Hero Code

.block{
  .hero-code{
    margin-top:-210px;
  }
}

.hero-code{
  @extend %background-image-positions;
  background-size:cover;
  color:$white;
  overflow-x:hidden;

  &:not(:only-child){
    & > .inner{
      padding-bottom:50px;
    }
  }
  
  & > .inner{
    display:flex;
    max-width:$desktop-max-width;
    margin-left:auto;
    margin-right:auto;
    padding:250px $desktop-gutter 150px $desktop-gutter;
    width:100%;

    .content{
      position:relative;
      display:flex;
      z-index:2;
      flex-grow:1;
    }

    .illustration{
      position:relative;
      flex:0 0 540px;
      display:flex;
      align-items:center;
      line-height:0;

      & > div{
        width:100%;
      }
    }
  }

  .content{
    padding-top:50px;
    padding-right:80px;

    .title{
      max-width:525px;
      font-size:41px;
      line-height:49px;
      margin-bottom:18px;
      font-weight:500;

      &.large{
        font-size:49px;
        line-height:55px;
        padding-right:35px;
      }
    }

    .description{
      max-width:525px;
      font-size:18px;
      line-height:30px;
      color:$hero-description-color;

      p{
        margin-bottom:20px;

        &:last-child{
          margin-bottom:0;
        }
      }

      p + .actions{
        margin-top:10px;
      }

      .actions{
        display:inline-flex;
        margin-top:30px;
  
        .button{
          margin-right:15px;
  
          &:last-child{
            margin-right:0;
          }
        }
      }
    }

    .icons{
      display:flex;
      margin-top:40px;
      
      & > a{
        margin-right:34px;

        &:last-child{
          margin-right:0;
        }
      }

      svg{
        height:34px;
      }
    }
    
  }

  .illustration{
    max-width:560px;
    width:100%;

    &.expanded{
      img{
        position:relative;
        top:-30px;
        left:80px;
        transform:scale(1.5);
      }
    }

    &.up-50{
      margin-top:-50px;
      margin-bottom:-50px;
    }

    img,
    svg{
      width:100%;
      height:auto;
    }
  }

  .video-holder{
    width:60%;
  }

}

@include breakpoint($laptop-tablet){
  .hero-code{
    & > .inner{
      padding:180px $desktop-gutter-tablet-landscape 80px $desktop-gutter-tablet-landscape;
    }

    .content{
      padding-top:30px;

      .title{
        max-width:525px;
        margin-bottom:18px;
  
        &,
        &.large{
          font-weight:500;  
          font-size:37px;
          line-height:45px;
        }
      }
    }

    .illustration{
      &.expanded{
        img{
          transform:scale(1.2);
          left:0;
          top:-20px;
        }
      }
    }
  }
}

@include breakpoint($tablet-landscape){
  .hero-code{
    & > .inner{
      padding-top:250px;
    }

    .content{
      display:flex;
      align-items:center;
      padding-top:0;
      padding-right:40px;

      .title{
        &,
        &.large{
          padding-right:0;
          font-size:29px;
          line-height:39px;
        }
      }

      .description{
        font-size:16px;
        line-height:26px;
      }
    }

    .illustration{
      &.expanded{
        img{
          transform:scale(1);
          left:20px;
          top:0;
        }
      }
    }
  }
}

@include breakpoint($tablet-portrait){
  .hero-code{

    &.has-video{
      & > .inner{
        flex-direction:column-reverse;
      }
    }

    & > .inner{
      padding:100px $desktop-gutter-tablet-portrait 70px $desktop-gutter-tablet-portrait;

      .content{
        flex:1;
      }

      .illustration{
        flex:1;
      }
    }

    .content{
      padding-top:20px;
      padding-right:40px;

      .title{
        &,
        &.large{
          padding-right:20px;
          font-size:23px;
          line-height:33px;
        }
      }

      .description{
        font-size:14px;
        line-height:25px;
        padding-right:40px;

        p + .actions{
          margin-top:0;
        }
      }
    }

    .video-holder{
      width:100%;
    }
  }
}

@include breakpoint($phone){
  .hero-code{
    & > .inner{
      flex-direction:column-reverse;
      padding:130px $desktop-gutter-phone 60px $desktop-gutter-phone;
    }

    .content{
      padding-right:10px;

      .icons{
        flex-wrap:wrap;
      }

      .title{
        &,
        &.large{
          padding-right:20px;
          font-size:29px;
          line-height:33px;
        }
      }

      .description{
        font-size:15px;
        line-height:25px;
      }
    }

    .illustration{
      margin-bottom:20px;

      &.up-50{
        margin-top:0;
        margin-bottom:0;
      }

      &.expanded{
        img{
          left:7px;
        }
      }
    }
  }
}
