@use '../mixins';

@use '@jambonz/ui-kit/src/styles/vars' as ui-vars;

/******************************************************************************
 * App screenshot
*******************************************************************************/
.tech {
  display: flex;
  padding-bottom: 96px;

  @media (max-width: ui-vars.$width-tablet-1) {
    flex-wrap: wrap;
    padding-bottom: 64px;
  }

  &__image {
    max-width: 66.6666666667vw;
    width: 1120px; // Largest render size per max-width of site container

    @media (max-width: ui-vars.$width-tablet-1) {
      max-width: 100%;
      width: 100%;
    }
  }

  &__notes {
    max-width: 320px;
    padding-left: 16px;
    padding-top: 16px;

    @media (max-width: ui-vars.$width-tablet-1) {
      max-width: 100%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }

    @media (max-width: ui-vars.$width-mobile) {
      max-width: 320px;
      margin: 0 auto;
    }
  }

  &__note {
    margin-top: 16px;

    @media (max-width: ui-vars.$width-tablet-1) {
      width: 50%;
      margin: 0;
      padding: 32px 16px;
    }

    @media (max-width: ui-vars.$width-mobile) {
      padding: 16px;
      text-align: center;
      width: 100%;
    }
  }
}

/******************************************************************************
 * Dilemma
*******************************************************************************/
.dilemma {
  text-align: center;

  &__wrap {
    @include mixins.flex-cols();
  }

  &__headline {
    @media (max-width: ui-vars.$width-small) {
        max-width: 320px;
      }
  }

  &__subtext {
    margin-top: 16px;
    margin-bottom: 64px;

    @media (max-width: ui-vars.$width-mobile) {
      margin-bottom: 48px;
    }

    div {
      @media (max-width: ui-vars.$width-small) {
        max-width: 270px;
      }

      & + div {
        @media (max-width: ui-vars.$width-small) {
          margin-top: 8px;
        }
      }
    }
  }

  &__tables {
    display: flex;
    justify-content: center;
    
    @media (max-width: ui-vars.$width-tablet-2) {
      flex-wrap: wrap;
      width: 100%;
    }
  }

  &__table {
    width: 100%;
    max-width: 320px;
    margin: 0 16px;
    background-color: ui-vars.$white;
    border: 2px solid ui-vars.$dark;
    border-radius: 8px;
    padding: 16px 32px;

    @media (max-width: ui-vars.$width-tablet-1) {
      margin: 0 8px;
      padding: 16px;
    }

    @media (max-width: ui-vars.$width-tablet-2) {
      margin: 0;
      max-width: 100%;
    }

    & + & {
      @media (max-width: ui-vars.$width-tablet-2) {
        margin-top: 32px;
      }
    }

    &--jambonz {
      border-width: 4px;
      border-color: ui-vars.$jambonz;
      background-color: ui-vars.$pink;
    }

    &__title {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      user-select: none;

      p {
        line-height: 1;
      }

      img {
        width: 50%;

        @media (max-width: ui-vars.$width-tablet-2) {
          width: 96px;
        }
      }
    }

    &__toggle {
      margin-left: auto;
      display: none;

      @media (max-width: ui-vars.$width-tablet-2) {
        display: block;
      }
    }

    &__points {
      margin-top: 16px;

      @media (max-width: ui-vars.$width-tablet-2) {
        display: none;
      }

      &.active {
        @media (max-width: ui-vars.$width-tablet-2) {
          display: block;
        }
      }
    }

    &__point {
      margin-bottom: 16px;
      display: flex;
      align-items: flex-start;
      text-align: left;

      svg {
        width: 16px;
        height: 16px;
      }

      svg + div {
        width: calc(100% - 16px);
        margin-top: -6px;
        padding-left: 16px;
      }

      &.xcircle {
        svg {
          stroke: ui-vars.$red;
        }
      }

      &.checkcircle {
        svg {
          stroke: ui-vars.$green;
        }
      }
    }
  }
}

/******************************************************************************
 * BYO
*******************************************************************************/
.byo {
  text-align: center;

  &__wrap {
    @include mixins.flex-cols();
  }

  &__headline {
    @media (max-width: ui-vars.$width-small) {
      max-width: 320px;
    }
  }

  &__subtext {
    margin-top: 16px;

    @media (max-width: ui-vars.$width-mobile) {
      max-width: 320px;
    }
  }

  &__icons {
    margin: 64px 0;

    @media (max-width: ui-vars.$width-tablet-1) {
      margin: 48px 0;
    }
  }

  &__comment {
    max-width: 800px;

    @media (max-width: ui-vars.$width-small) {
      max-width: 340px;
    }

    a {
      border-bottom: 1px solid ui-vars.$jambonz;
    }
  }

  &__cta {
    @include mixins.cta();
  }
}