@import url(../_common/style.css);
@import url(../_common/plans/style.css);

[page="opening"] {
  padding: 0;
}

.main {
  & [panel] {
    position: relative;
    width: 100%;
    display: grid;
    overflow: hidden;

    & span {
      font-weight: 600;
    }

    & .examples {
      display: grid;
      gap: 10px;
      & [example] {
        display: grid;
        gap: 10px;
        justify-items: center;
        & .example-icon {
          width: 70px;
          height: 70px;
          &.vocabulary_tests {
            background: url("./images/VocabExam.svg");
          }
          &.datesandfigures {
            background: url("./images/Timeline.svg");
          }
          &.multiplicationtables {
            background: url("./images/Multiplication.svg");
          }
          &.conceptsandexpressions {
            background: url("./images/Concepts.svg");
          }
        }
      }
    }

    & .howitworks {
      display: grid;
      gap: 30px;
      place-items: center;

      & .howitworks-icon {
        width: 150px;
        height: 100px;
        background-repeat: no-repeat;
        background-position: center;
        &.questionmark {
          background-image: url(./images/SevenQuestions.svg);
        }
        &.stars {
          background-image: url(./images/SevenStars.svg);
        }
        &.checkmark {
          background-image: url(./images/SevenCheckmarks.svg);
        }
      }
    }

    & .teacher-tools {
      display: grid;
      gap: 30px;
      place-items: center;
      & .teacher-tools-icon {
        width: 150px;
        height: 120px;
        background-repeat: no-repeat;
        background-position: center;
        &.create {
          background-image: url(./images/TeachersTools.svg);
        }
        &.track {
          background-image: url(./images/Statistics.svg);
        }
        &.simplify {
          background-image: url(./images/MakeACopy.svg);
        }
      }
    }

    & .quizes {
      display: grid;
      place-items: center;
    }

    & .what-they-say-about-us-main {
      width: 100%;
      display: grid;
      gap: 15px;
      grid-template-columns: 30px 1fr 30px;
      & .testimonials {
        overflow: hidden;
        & .testimonial-container {
          display: grid;
          gap: 30px;
          place-items: center;
          grid-auto-flow: column;
          & .testimonial {
            background-color: var(--color-lighter);
            color: var(--color-darkest);
            width: 200px;
            height: 350px;
            border-radius: 15px;
            padding: 15px;
            display: grid;
            gap: 10px;
            align-content: start;
            overflow: auto;
            & .testimonial-text {
              margin: 0;
              font-weight: 300;
              color: var(--color-darker);
            }
            & .testimonial-author {
              margin: 0;
              color: var(--color-black);
            }
          }
        }
      }
      & [arrow] {
        place-self: center;
        cursor: pointer;
        & .arrow-icon {
          width: 25px;
          height: 50px;
          background-repeat: no-repeat;
          transition-duration: 0.25s;
        }
      }
      & [arrow="left"] {
        & .arrow-icon {
          background-image: url(./images/previous.svg);
        }
        &:hover .arrow-icon {
          width: 35px;
          height: 70px;
        }
      }
      & [arrow="right"] {
        & .arrow-icon {
          background-image: url(./images/next.svg);
        }
        &:hover .arrow-icon {
          width: 35px;
          height: 70px;
        }
      }
    }

    & .faq {
      display: grid;
      gap: 15px;
      place-items: center;

      & .faq-box {
        width: 100%;
        background-color: var(--color-lightest);
        padding: 15px;
        border-radius: 15px;
        cursor: pointer;

        &:not(.opened) {
          & .faq-box-answer {
            display: none;
            height: 0;
          }
          & .faq-box-plus::after {
            content: "+";
          }
        }
        &.opened {
          & .faq-box-answer {
            height: auto;
          }
          & .faq-box-plus::after {
            content: "-";
          }
        }

        & .faq-box-info {
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: center;
          & .faq-box-text {
            color: var(--color-black);
          }
        }

        & .faq-box-plus {
          color: var(--color-red);
        }

        & ol {
          padding-left: 13px;
          & li {
            list-style: disc;
            & span {
              font-weight: 600;
              color: var(--color-darkest);
            }
          }
        }
      }
    }

    & .icon-title-description {
      display: grid;
      justify-items: center;

      & .info-icon {
        width: 70px;
        height: 70px;
        background-repeat: no-repeat;
        background-position: center;

        &.rounded {
          border-radius: 50%;
          border: 1px solid var(--color-purple);
        }

        &.arcade-quiz {
          background-image: url(./images/ArcadeQuiz.svg);
        }
        &.blitz-quiz {
          background-image: url(./images/BlitzQuiz.svg);
        }
        &.exam-quiz {
          background-image: url(./images/ExamQuiz.svg);
        }
        &.interactive-story {
          background-image: url(./images/InteractiveNovels.svg);
        }
        &.situational-simulation {
          background-image: url(./images/SituationalSims.svg);
        }
        &.for-students {
          background-image: url(./images/ForStudents.svg);
        }
        &.for-teachers {
          background-image: url(./images/ForTeachers.svg);
        }
        &.for-parents {
          background-image: url(./images/ForParents.svg);
        }
      }
    }

    &[panel="main"] {
      background: url("./images/points.svg") no-repeat center center, var(--main-gradient);
      background-size: cover;
      & .brain {
        position: absolute;
        background: url("./images/brain.svg") no-repeat center center;
        background-size: contain;
        background-position: right;
        height: 150%;
      }
    }
    &[panel="color"] {
      background: var(--main-gradient);
    }
    &[panel="white"] {
      background-color: var(--color-lightest);
    }
    &[panel="gray"] {
      background-color: var(--color-lighter);
    }
  }
}

.width-460 {
  width: min(460px, 100%);
}

@media screen and (max-width: 800px) {
  .main {
    & [panel] {
      & .what-they-say-about-us-main {
        & .testimonials {
          & .testimonial-container {
            grid-template-columns: repeat(2, 1fr);
            place-items: initial;
            & .testimonial {
              width: 100%;
              height: auto;
              &:nth-child(n + 3 of .testimonial) {
                display: none;
              }
            }
          }
        }
      }
      &[panel="main"] {
        & .brain {
          display: none;
        }
      }
    }
  }
}
@media screen and (max-width: 550px) {
  .main {
    & [panel] {
      & .what-they-say-about-us-main {
        & .testimonials {
          & .testimonial-container {
            grid-template-columns: 1fr;
            & .testimonial {
              width: 100%;
              &:nth-child(n + 2 of .testimonial) {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 550px) {
  .examples {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 330px) {
  .examples {
    grid-template-columns: repeat(1, 1fr);
  }
}