/**
* @project: Console Art Cybernetic - https://cacybernetic.github.io
* @fileoverview: Console Art Cybernetic faq stylesheet.
* @author: Obrymec - obrymecsprinces@gmail.com
* @supported: DESKTOP, MOBILE
* @created: 2023-07-20
* @updated: 2023-09-28
* @file: faq.scss
* @version: 0.0.2
*/

// Custom dependencies.
@import "./_placeholders.scss";
@import "./_variables.scss";

// Vertical line.
div.faq-vline {
  border-right: 2px solid $faq-border-color;
  transform: translateY(200%);
  margin: 0 96px;
  display: block;
  opacity: 0;
  // From 1024 to 0.
  @media #{$faq-1024} {
    display: none;
  }
}

// FAQ section.
section.faq {
  transform: translate3d(0, 0, 0);
  overflow: hidden;
  padding: 96px 5%;
  display: flex;
  background: (
    radial-gradient(
      50.08% 44.51% at 100% 100%,
      $faq-gradient-color-1 0,
      $faq-gradient-color-2 100%
    ),
    radial-gradient(
      60.76% 48.01% at 0 100%,
      $faq-gradient-color-3 0,
      $faq-gradient-color-4 100%
    ),
    $faq-btn-text-color
  );
  // From 1024 to 640.
  @media #{$faq-1024} {
    flex-direction: column;
    row-gap: 64px;
  }
  // From 640 to 0.
  @media #{$faq-640} {
    padding: 96px 16px;
  }
  // Show part.
  div.faq-part-show {
    transform: translateX(0);
    opacity: 1;
  }
  // Vline show.
  div.faq-vline-show {
    transform: translateY(0);
    opacity: 1;
  }
}

// Left section.
div.faq-left {
  transform: translateX(-200%);
  opacity: 0;
  // Huge title.
  h2 {
    letter-spacing: -1.4px;
    margin-bottom: 16px;
    line-height: 60px;
    font-weight: 600;
    font-size: 50px;
  }
  // Description.
  p {
    letter-spacing: -1.1px;
    margin-bottom: 24px;
    line-height: 40px;
    font-weight: 400;
    font-size: 32px;
  }
  // Free trial button.
  button {
    @extend %faq-free-trial-btn;
    // From 1024 to 0.
    @media #{$faq-1024} {
      width: 100%;
    }
  }
}

// Right section.
div.faq-right {
  transform: translateX(200%);
  opacity: 0;
  width: 48%;
  // From 1024 to 0.
  @media #{$faq-1024} {
    width: 100%;
  }
  // Experts container.
  div.faq-experts {
    // From 1024 to 0.
    @media #{$faq-1024} {
      justify-content: center;
      display: inline-flex;
      width: 100%;
    }
  }
  // Experts.
  img {
    margin-bottom: 16px;
    max-width: 210px;
    display: block;
  }
  // Description.
  p {
    letter-spacing: -1.1px;
    margin-bottom: 24px;
    line-height: 40px;
    font-weight: 400;
    font-size: 32px;
  }
  // Talk to an expert button.
  button {
    font-size: 18px;
    // Hover effect.
    &:hover > img {
      transform: translate(8px, 8px);
    }
    // Right arrow.
    img {
      transform: translate(0, 8px);
      filter: brightness(25%);
    }
  }
}
