// Call to Action

.call-to-action{
  --titleFontSize: var(--titleFontSizeLarge);
  --titleLineHeight: var(--titleLineHeightLarge);

  --textFontSize: var(--textFontSizeXLarge);
  --textLineHeight: var(--textLineHeightXLarge);

  background-color:$white;
  border-bottom:1px solid $line-color;
  
  & > .inner{
    max-width:$desktop-max-width;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    padding:100px 80px;
    align-items:center;
  }

  .content{
    color:$blue-black;
    flex-grow:1;

    .title{
      font-size: var(--titleFontSize);
      line-height: var(--titleLineHeight);
      font-weight:600;
      margin-bottom:15px;

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

    p{
      font-size: var(--textFontSize);
      line-height: var(--textLineHeight);
      max-width:525px;
      color:$blue-grey;
    }
  }

  .actions{
    flex-grow:0;
    display:flex;
    justify-content:flex-end;
    
    .pill-button{
      font-size:16px;
      line-height:27px;
      font-weight:500;
      padding:10px 20px 8px 20px;
      border-radius:50px;
      margin-right:25px;
      border-width:2px;

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

@include breakpoint($laptop-tablet){
  .call-to-action{
    --titleFontSize: var(--titleFontSizeMedium);
    --titleLineHeight: var(--titleLineHeightMedium);

    --textFontSize: var(--textFontSizeLarge);
    --textLineHeight: var(--textLineHeightLarge);
  }
}

@include breakpoint($tablet-landscape){
  .call-to-action{
    & > .inner{
      padding-left:50px;
      padding-right:50px;
    }

    .content{
      width:50%;
    }

    .actions{
      width:50%;

      .pill-button{
        font-size:14px;
        padding:9px 17px 7px 17px;
        margin-right:12px;
      }
    }
  }
}

@include breakpoint($tablet-portrait){
  .call-to-action{
    & > .inner{
      padding-top:70px;
      padding-bottom:70px;
    }

    .actions{
      .pill-button{
        padding:7px 16px 5px 16px;
        border-width:1px;
      }
    }
  }
}

@include breakpoint($tablet-phone){
  .call-to-action{
    --titleFontSize: var(--titleFontSizeSmall);
    --titleLineHeight: var(--titleLineHeightSmall);

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

    .content{
      width:100%;
      margin-bottom:25px;
    }

    .actions{
      width:100%;
      justify-content:flex-start;
    }

  }
}

@include breakpoint($phone){
  .call-to-action{
    & > .inner{
      padding:40px 30px 50px 30px;
    }

    .content{
      .title{
        font-size:19px;
        line-height:25px;
      }

      p{
        font-size:15px;
        line-height:27px;
      }
    }

    .actions{
      .pill-button{
        font-size:13px;
        line-height:19px;
        padding:7px 15px 7px 15px;
        
      }
    }
  }
}
