// Partials / Block Halves

.block{
  &.dark{
    .halves{
      &.divider{
        .half{
          &:first-child{
            border-color:rgba(255,255,255,0.1);
          }
        }
      }

      .content{
        color:$white;

        .title{
          color:$white;
        }

        h3.title{
          color:$blue;
        }

        p,li{
          color:$near-white-on-blue-dark;
        }
      }
    }
  }

  .halves{
    &.reverse{
      flex-direction:row-reverse;
    }

    &.divider{
      .half{
        &:first-child{
          border-right:1px solid $line-color;
        }
      }
    }

    &.skinny{
      & > .inner{
        max-width:900px;
        padding-left:0;
        padding-right:0;

        .half{
          &:first-child{
            .content{
              margin-left:0;
            }
          }

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

    & > .inner{
      max-width:$desktop-max-width;
      padding-left:$desktop-gutter;
      padding-right:$desktop-gutter;
      margin-left:auto;
      margin-right:auto;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
    }

    .half{
      display:flex;
      width:50%;
      padding-top:30px;
      padding-bottom:20px;
    }

    .illustration{
      &.middle{
        display:flex;
        align-items:center;
      }

      img{
        width:100%;
      }

      &.center{
        position:relative;
        margin:0 auto;
        width:50%;
      }
    }

    .photo{
      display:flex;
      align-items:center;
      
      &.middle{
        display:flex;
        align-items:center;
      }

      img{
        width:100%;
      }
    }

    .content{
      max-width:525px;
      padding-left:65px;
      
      &.middle{
        display:flex;
        align-items:center;
      }

      &.center{
        text-align:center;
      }
      
      .title{
        color:$black;
        font-size:30px;
        line-height:39px;
        font-weight:600;
        margin-bottom:25px;
      }

      h3.title{
        font-size:16px;
        font-weight:400;
        margin-bottom:10px;
      }

      p,
      li{
        font-size:18px;
        line-height:30px;
      }

      p,
      ol,
      ul{
        margin-bottom:20px;
      }

      .actions{
        display:inline-flex;

        .button{
          margin-right:15px;

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

@include breakpoint($tablet-landscape){
  .block{
    .halves{
      &.skinny{
        & > .inner{
          .half{
            &:first-child{
              .content{
                margin-left:auto;
              }
            }
  
            &:last-child{
              .content{
                margin-right:auto;
              }
            }
          }
        }
      }

      .content{
        padding:40px 0 0 0;

        .title{
          font-size:20px;
          line-height:27px;
          font-weight:500;
          margin-bottom:10px;
        }

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

@include breakpoint($tablet-portrait){
  .block{
    .halves{
      & > .inner{
        padding-left:$desktop-gutter-tablet-portrait;
        padding-right:$desktop-gutter-tablet-portrait;
      }

      .half{
        padding-top:20px;
        padding-bottom:20px;
      }

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

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

        p{
          font-size:14px;
          line-height: 23px;
          padding-right:15px;
        }
      }
    }
  }
}

@include breakpoint($phone){
  .block{
    .halves{
      & > .inner{
        flex-direction:column;
        padding:0 $desktop-gutter-phone;
      }

      .half{
        width:100%;
        padding:0;
      }

      .content{
        padding-right:0;

        .title{
          font-size:21px;
          line-height:27px;
        }
      }
    }
  }
}
