@use 'sass:math';
@use '../helpers/functions' as *;

.legal-tech-help {
  position: relative;
  overflow: hidden;
  background-color: $neutral-10;

  &__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: $spacer * 2;
    z-index: 1;
    padding-top: $spacer * 4;
    padding-bottom: $spacer * 4;
  }

  &__badge {
    display: inline-flex;
    align-items: center;
    gap: $spacer * 0.5;
    padding: pxToRem(4) $spacer;
    background-color: $neutral-20;
    border-radius: pxToRem(100);
    font-size: pxToRem(14);
    font-weight: 500;
    line-height: 1.5;
    color: $neutral-90;

    &-icon {
      width: $spacer;
      height: $spacer;
    }
  }

  &__title {
    position: relative;
    margin: 0;
    font-size: pxToRem(24);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: $neutral-98;
    z-index: 1;
  }

  &__description {
    margin: 0;
    font-size: pxToRem(18);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: $neutral-70;
  }

  &__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: pxToRem(36);
    padding: $spacer * 0.5 pxToRem(20);
    background: linear-gradient(180deg, $primary-50 0%, $primary-30 100%);
    border-radius: $spacer * 0.5;
    font-size: $spacer;
    font-weight: 600;
    line-height: 1.5;
    color: $neutral-100;
    text-decoration: none;
    box-shadow: inset 0 pxToRem(2) pxToRem(1) 0 #ff516b;
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.9;
      color: $neutral-100;
      text-decoration: none;
    }
  }

  &__preview {
    position: relative;
    z-index: 1;
    height: 100%;

    img {
      position: absolute;
      width: 100%;
      top: 0;
    }
  }

  .overlay-top {
    left: auto;
    right: 0;
  }

  .overlay-bottom {
    right: auto;
    left: 0;
  }

  @include media-breakpoint-up(md) {
    &__preview {
      min-height: pxToRem(462);
      img {
        margin-top: -pxToRem(42);
        width: auto;
        left: 25%;
      }
    }
  }

  @include media-breakpoint-up(lg) {
    &__preview {
      img {
        width: pxToRem(502);
        top: 70px;
        left: 0;
      }
    }
  }

  @include media-breakpoint-up(xl) {
    &__content {
      max-width: pxToRem(560);
      padding-top: $spacer * 7.5;
      padding-bottom: $spacer * 9;
    }

    &__title {
      font-size: pxToRem(40);
    }

    &__description {
      font-size: pxToRem(20);
    }

    &__preview {
      img {
        width: pxToRem(772);
        top: -42px;
      }
    }
  }
}