@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.experiences-catalog {
  .title {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      right: -20px;
      top: -20px;
      background: url(../../assets/img/experiences/academy.png) no-repeat center;
      background-size: contain;
      width: 150px;
      min-height: 40px;
    }
  }

  .experience-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .see-more {
      cursor: pointer;
      color: var(--color-secondary);
    }
  }

  .catalog__container {
    main {
      .item-list-catalog--mosaic {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;

        @include tablet {
          grid-template-columns: repeat(2, 1fr);
        }

        @include mobile {
          grid-template-columns: 1fr;
        }

        .experience-catalog-item-container {
          .background-container {
            position: relative;
            padding-top: 60%;

            .img-container {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
        }
      }
    }
  }
}

.experience-cta-buttons-container {
  display: flex;
  justify-content: center;
  padding: 3rem 5%;
  background: var(--color-grey-100);

  @include desktop {
    justify-content: space-between;
  }

  @include mobile {
    flex-direction: column;
    align-items: center;

    .item {
      text-align: center;
      margin: var(--spacing-m) 0;

      &.bordered {
        border-left: none !important;
      }
    }
  }

  .item {
    display: inline-block;
    padding: 0 var(--spacing-xl);

    @include desktop {
      padding: 0 var(--spacing-m);
    }

    &.bordered {
      border-left: var(--border-default);
    }

    &.image {
      display: flex;
      align-items: center;

      img {
        width: 140px;
      }
    }

    &.questions {
      border-left: none;
    }

    i {
      margin-right: var(--spacing-xs);

      @include fontSize(12);
    }
  }
}

.experience-page{

  .horizontal-info-container{
    display: flex;
    background-color: var(--color-grey-100);
    justify-content: space-around;
    align-items: center;

    .item{
      display: flex;
      justify-content: center;
      flex-direction: column;
      max-width: 240px;

      &.border{
        border-color: var(--color-grey-300);
        padding-left: var(--spacing-m);

        .label{
          color: var(--color-dark);
          font-weight: bold;
        }
      }

      &.theme {
        flex: 0.5 1;
      }
    }

  }

  .experience-button-back-container {
    display: flex;
    justify-content: center;
  }

  .experiences {
    display: none;
  }

}

.faq-footer {
  .experience-cta-buttons-container {
    & > .item {
      &.experiences {
        display: inline-block;
      }

      &.questions {
        display: none;
      }
    }
  }
}
