@import '../sections/info-section';
/*Benefit Archive*/
.benefit-archive {
  .hero-benefit {
    background: $bg-light-gray;
    padding: 50px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    @media screen and (max-width: $phones-big) {
      padding: 40px 15px 35px;
    }
    h1 {
      text-align: center;
      font: normal 900 60px / 1.1em $font-almoni;
      color: $dark-blue;
      margin: 0;
      display: flex;
      flex-direction: column;
      .blue-text {
        color: $blue;
      }
      @media screen and (max-width: $phones-big) {
        font-size: 30px;
        .blue-text {
          padding-top: 5px;
        }
      }
    }
  }
  .listing-benefit {
    padding: 60px 30px 50px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    @media screen and (max-width: $tablets-big) {
      padding: 50px 16px 20px;
    }
    @media screen and (max-width: $phones-big) {
      padding: 40px 16px 10px;
    }
    .benefits-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      .benefit-item {
        flex: 0 0 calc((100% - 48px) / 3);
        @media screen and (max-width: $tablets-big) {
          flex: 0 0 calc((100% - 48px) / 2);
        }
        @media screen and (max-width: $phones-big) {
          flex: 0 0 100%;
        }
      }
      @media screen and (max-width: $phones-big) {
        gap: 16px;
      }
    }
  }
}
/*Benefit Listing*/
.benefits-list {
  .benefit-item {
    padding: 15px 16px 30px;
    border-radius: 12px;
    box-shadow: 5px 8px 38px 0 rgba(219, 229, 239, 0.75);
    background: $white;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: .3s;
    &:hover {
      box-shadow: 5px 12px 38px 0 rgba(182, 193, 205, .9);
    }
    @media screen and (max-width: $phones-big) {
      flex-direction: row;
      padding: 0;
      border-radius: 8px;
    }
    .benefit-thumbnail {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      background: center / cover no-repeat;
      border-radius: 8px;
      @media screen and (max-width: $phones-big) {
        padding-bottom: 100px;
        min-width: 115px;
        max-width: 115px;
        border-radius: 0 8px 8px 0;
      }
    }
    .benefit-title {
      h4 {
        font: normal 700 28px / 1.2em $font-almoni;
        color: $dark-blue;
        margin: 0;
        @media screen and (max-width: $phones-big) {
          font-size: 20px;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
      @media screen and (max-width: $phones-big) {
        padding: 10px 0 10px 20px;
        width: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
}
/*Benefit Single*/
.single-benefit {
  #breadcrumbs {
    max-width: 1675px;
    padding: 5px 30px;
    margin: 0 auto;
    width: 100%;
    @media screen and (max-width: $tablets-big) {
      padding: 5px 16px;
    }
  }
  .benefit-container {
    display: flex;
    width: 100%;
    max-width: 1675px;
    margin: 0 auto;
    padding: 60px 30px 100px;
    gap: 50px;
    @media screen and (max-width: $full-hd) {
      gap: 40px
    }
    @media screen and (max-width: $desktop) {
      padding: 60px 30px 60px;
    }
    @media screen and (max-width: $tablets-big) {
      flex-direction: column;
      padding: 20px 16px 20px;
    }
    @media screen and (max-width: $phones-big) {
      padding-bottom: 10px;
    }
    .single-content {
      display: flex;
      flex-direction: column;
      gap: 60px;
      @media screen and (max-width: $phones-big) {
        gap: 40px
      }
      .info-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 70px;
        @media screen and (max-width: $full-hd) {
          gap: 40px
        }
        @media screen and (max-width: $desktop) {
          grid-template-columns: 1fr;
        }
        @media screen and (max-width: $phones-big) {
          gap: 32px;
        }
        .benefit-image {
          position: relative;
          width: 100%;
          padding-bottom: 100%;
          background: center / cover no-repeat;
          border-radius: 11px;
          box-shadow: 3.75px 6px 28.5px 0 rgba(219, 229, 239, 0.75);
          @media screen and (max-width: $desktop) and (min-width: $phones-big) {
            padding-bottom: 50%;
            max-width: 50%;
          }
        }
        .info-column {
          height: 100%;
          display: flex;
          flex-direction: column;
          .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            .tag {
              font: normal 400 20px / 1em $font-almoni;
              color: #B74B00;
              padding: 4px 8px;
              border-radius: 4px;
              background: rgba(255, 162, 57, 0.20);
              @media screen and (max-width: $phones-big) {
                font-size: 14px;
              }
            }
          }
          h1 {
            font: normal 700 32px / 1.2em $font-almoni;
            padding: 16px 0 28px;
            margin: 0;
            @media screen and (max-width: $phones-big) {
              font-size: 28px;
              padding: 12px 0 20px;
            }
          }
          .benefit-content {
            font: normal 400 20px / 1em $font-almoni;
            color: $dark-gray;
            display: flex;
            gap: 15px;
            flex-direction: column;
            padding-bottom: 30px;
            @media screen and (max-width: $phones-big) {
              font-size: 16px;
            }
          }
          .benefit-button {
            border-radius: 6px;
            display: flex;
            padding: 12px 20px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            font: normal 400 16px / 1em $font-almoni;
            color: $white;
            width: fit-content;
            margin-top: auto;
          }
          .premium-button {
            background: $blue;
          }
          .no-premium-button {
            background: $extra-dark-blue;
            border: none;
          }
        }
      }
      .faq-accordion {
        display: flex;
        flex-direction: column;
        gap: 28px;
        @media screen and (max-width: $phones-big) {
          gap: 16px;
        }
        .faq-item {
          padding: 24px 32px;
          border-radius: 16px;
          border: 1px solid $divider2;
          @media screen and (max-width: $phones-big) {
            padding: 16px;
            border-radius: 8px;
          }
          .faq-question {
            font: normal 700 22px / 1 $font-almoni;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            gap: 16px;
            transition: 0.4s linear;
            @media screen and (max-width: $phones-big) {
              font-size: 16px;
            }
            svg {
              min-width: 28px;
              path {
                transition: stroke 0.3s ease;
                &.line {
                  transition: transform 0.3s ease, opacity 0.3s ease;
                  transform-origin: center;
                }
              }
              @media screen and (max-width: $phones-big) {
                min-width: 20px;
                width: 20px;
                height: 20px;
              }
            }
          }
          .faq-answer {
            font: normal 400 16px / 112% $font-almoni;
            color: $dark-gray;
            overflow: hidden;
            padding-top: 0;
            transition: 0.4s linear;
            max-height: 0;
            @media screen and (max-width: $phones-big) {
              font-size: 14px;
            }
          }
          &.open-faq {
            .faq-question {
              padding-bottom: 20px;
              @media screen and (max-width: $phones-big) {
                padding-bottom: 15px;
              }
            }
            path {
              stroke: $extra-dark-gray;
              &.vertical {
                opacity: 0;
                transform: rotate(90deg);
              }
            }
            .faq-answer {
              max-height: 350px;
            }
          }
        }
      }
    }
    .sidebar-post {
      min-width: 310px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      h5 {
        font: normal 700 16px / 1 $font-almoni;
        @media screen and (max-width: $tablets-big) and (min-width: $phones-big) {
          display: none;
        }
      }
      .benefits-list {
        display: flex;
        flex-direction: column;
        gap: 28px;
        @media screen and (max-width: $tablets-big) {
          flex-direction: row;
          gap: 24px;
        }
        @media screen and (max-width: $phones-big) {
          flex-direction: column;
          gap: 16px;
        }
        a {
          width: 100%;
          @media screen and (max-width: $tablets-big) and (min-width: $phones-big) {
            &:last-child {
              display: none;
            }
          }
          h4 {
            font-size: 26px;
            @media screen and (max-width: $phones-big) {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}