body:has(.challenge .challenge__popup.show)::after {
  content: "";
  position: fixed;
  background-color: #0000008a;
  width: 100%;
  height: 100%;
  top: 0;
}

body:has(.challenge .challenge__popup.show) {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 15px);
}

.challenge {
  background: rgba(var(--bg-color-6));
  /* padding: 120px 0; */
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: -290px;
    right: -190px;
    background: radial-gradient(circle,
        rgba(var(--bg-color-13), 0.16) 0%,
        rgba(var(--bg-color-13), 0) 70%);
    width: 720px;
    height: 720px;
    pointer-events: none;
  }

  .challenge__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    margin-bottom: 41px;

    .challenge__heading {
      max-width: 717px;
      color: rgba(var(--text-color-1));
      font-family: var(--font-source-serif-4);
      font-size: var(--font-9-2);
      line-height: 1.1;
      font-weight: 700;
    }

    .challenge__content {
      max-width: 428px;
      color: rgba(var(--text-color-17));
      font-size: var(--font-24);
      line-height: 1.75;
      font-weight: 400;
    }
  }

  .challenge__wrapper {
    position: relative;

    .challenge__cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      z-index: 1;
      position: relative;

      .challenge__card {
        background: rgba(var(--bg-color-1));
        border: 1px solid rgba(var(--border-color-40));
        border-radius: var(--border-radius-11);
        padding: 24px;
        display: flex;
        flex-direction: column;

        .step-process__number {
          color: rgba(var(--text-color-41));
          font-family: var(--font-source-serif-4);
          font-size: var(--font-13);
          line-height: 1;
          font-weight: 700;
          font-style: italic;
          display: block;
          margin-bottom: 15px;
        }

        .step-process__step-heading {
          flex: 1;
          font-family: var(--font-source-serif-4);
          color: rgba(var(--text-color-4));
          font-size: var(--font-24);
          line-height: 1.2;
          font-weight: 700;
        }

        a {
          margin-top: 16px;
        }
      }
    }
  }

  .challenge__popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    max-width: 710px;
    width: 100%;
    background: rgba(var(--bg-color-1));
    border-radius: var(--border-radius-1);
    border: 1px solid rgba(var(--border-color-6));
    padding: 35px;
    z-index: 9999;
    box-shadow: 0 4px 12.3px 0 rgba(var(--bg-color-2), 25%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;

    &.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }

    .closePopup {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      cursor: pointer;

      &:hover {
        svg {
          path {
            fill: rgba(var(--bg-color-13));
          }
        }
      }
    }

    .popup-header {
      display: flex;
      gap: 20px;
      align-items: center;
      margin-bottom: 20px;

      .popupNumber {
        color: rgba(var(--text-color-41), 77%);
        font-style: italic;
        font-family: var(--font-source-serif-4);
        font-size: var(--font-9-2);
        line-height: 1;
        font-weight: 700;
      }

      .popup-title {
        font-family: var(--font-source-serif-4);
        color: rgba(var(--text-color-4));
        font-size: var(--font-19);
        line-height: 1;
        font-weight: 700;
        max-width: 500px;
      }
    }

    .popup-body {
      max-height: 35vh;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(var(--bg-color-19));
        border-radius: var(--border-radius-14);
      }

      &::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--bg-color-20));
      }

      .modal-text {
        color: rgba(var(--text-color-2));
        font-size: var(--font-25);
        line-height: 1.75;
        font-weight: 400;
      }
    }
  }

  .challenge__bottom {
    margin-top: 21px;
    background: rgba(var(--bg-color-1));
    border: 1px solid rgba(var(--border-color-40));
    border-radius: var(--border-radius-11);
    padding: 31px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    .closing-statement-text {
      font-family: var(--font-source-serif-4);
      font-style: italic;
      font-size: var(--font-21);
      line-height: 1.2;
      font-weight: 400;
      max-width: 728px;
    }

    .closing-statement-cta {
      border-radius: var(--border-radius-9) !important;
      flex-shrink: 0;
    }
  }

  @media (max-width: 1200px) {
    .challenge__wrapper {
      .challenge__cards {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }

  @media (max-width: 1024px) {
    .challenge__top {
      flex-direction: column;
      align-items: start;
      gap: 24px;

      .challenge__heading {
        max-width: 100%;
      }

      .challenge__content {
        max-width: 100%;
      }
    }

    .challenge__wrapper {
      .challenge__cards {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .challenge__bottom {
      flex-direction: column;
      align-items: start;
      gap: 24px;

      p {
        max-width: 100%;
      }
    }
  }

  @media (max-width: 767px) {
    .challenge__wrapper {
      .challenge__cards {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .challenge__popup {
      padding: 24px;
      border-radius: var(--border-radius-3);

      .closePopup {
        top: 12px;
        right: 12px;
      }

      .popup-header {
        flex-direction: column;
        align-items: start;
        gap: 16px;

        h4 {
          max-width: 100%;
        }
      }
    }
  }

  @media (max-width: 480px) {
    .challenge__wrapper {
      .challenge__cards {
        grid-template-columns: 1fr;

        .challenge__card {
          padding: 16px;
        }
      }
    }

    .challenge__bottom {
      padding: 16px;
    }
  }
}