.header-case-studies-block {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  /* min-height: 100vh; */
  padding-top: 98px;

  @media screen and (max-width: 990px) {
    padding-top: 0;
    min-height: unset;
  }

  &::before {
    content: "";
    position: absolute;
    width: 1111px;
    max-width: 80%;
    height: 293px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -281px;
    background: radial-gradient(
                  ellipse at 13.08% 81.13%, 
                  #4500F9 0%, 
                  #8752FA 30.29%, 
                  #CD83FF 67.31%, 
                  #FF5001 100%
                ), #D9D9D9;
    filter: blur(150px);
    z-index: 1;
  }


  .header-case-studies-inner {
    display: flex;
    min-height: calc(100vh - 98px - var(--header-height));
    border-top: 1px solid #EAEAEB;
    
    @media screen and (max-width: 990px) {
      flex-direction: column;
      border-top: none;
      min-height: unset;
    }
  }

  /* Left Section */
  .header-left-section {
    /* flex: 0 0 50%; */
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    position: relative;
    
    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: -100px;
      bottom: 0;
      width: 2px;
      background: #EAEAEB;
      z-index: 2;
    }
    
    @media screen and (max-width: 990px) {
      flex: none;
      
      &::after {
        display: none;
      }
    }
  }

  .header-headline-container {
    padding: 32px 40px 120px 120px;
    position: relative;

    h1 {
      margin: 0;
      font-weight: 700;
      font-size: clamp(2.5rem, 5vw, 4rem);
      line-height: 1.1;
    }

    @media screen and (max-width: 990px) {
      padding: 82px 24px 48px 48px;
    }
  }

  .header-body-container {
    padding: 64px 40px 40px 120px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    position: relative;
    
    &::before {
      content: "";
      position: absolute;
      width: 2px;
      left: 0;
      top: 0;
      bottom: 0;
      background: #EAEAEB;
    }

    @media screen and (max-width: 990px) {
      padding: 48px 24px 48px 48px;
      &::before {
        left: 24px;
        top: -100vh;
        bottom: 0;
      }
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background: #EAEAEB;
      }
    }
  }

  .header-body-text {
    font-size: 1.8rem;
    line-height: 1.4;
    color: #333;

    @media screen and (max-width: 990px) {
      font-size: 1.6rem;
      line-height: 1.25;
    }
  }

  /* Right Section */
  .header-right-section {
    flex: 0 0 60%;
    position: relative;
    display: flex;
    
    @media screen and (max-width: 990px) {
      flex: none;
      min-height: 60vh;
      display: none;
    }
  }

  .case-studies-list {
    width: 100%;
    /* max-width: 600px; */
    position: relative;
    z-index: 2;
    padding: 0;  margin: 0;
    list-style: none;
    
    @media screen and (max-width: 990px) {
      padding: 40px 20px;
    }
  }

  .case-study-item {
    display: grid;
    grid-template-columns: 114px 1fr;
    align-items: center;
    gap: 32px;
    padding: 8px 32px;
    transition: opacity 0.3s ease;
    cursor: pointer;
    min-height: 100px;
    
    
    @media screen and (max-width: 990px) {
      padding: 20px 0;
    }

    .case-study-category {
      display: block;
      opacity: 0;
      font-size: 1.6rem;
      line-height: 1.5;
      font-weight: 400;
    }

    .case-study-link {
      opacity: 0;
    }

    .case-study-title {
      margin: 0;
      font-size: 3.2rem;
      font-weight: 700;
      line-height: 1.125;
      
      @media screen and (max-width: 990px) {
        font-size: 1.6rem;
      }
    }


    &.active {
      .case-study-category,
      .case-study-link {
        opacity: 1;
      }

      background-image: var(--rc-grad-warmth);
    }
  }

  .case-studies-list:has(.case-study-item.active) {
    .case-study-title,
    .case-study-category {
      color: #FFFFFF;
    }
  }



  /* Background System */
  .case-studies-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .background-image.active {
    opacity: 1;
  }
}




.mobile-case-studies {
  display: none;

  @media screen and (max-width: 990px) {
    display: block;
  }

  .mobile-case-studies-list {
    list-style: none;
    margin: 0;
    padding: 18px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .mobile-case-study-item {
      padding: 16px 0;
      border-top: 1px solid #000000;
      border-bottom: 1px solid #000000;
      margin: 32px 0;
    }

    .mobile-case-study-image {
      aspect-ratio: 3 / 2;

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

    .mobile-case-study-title {
      font-family: "Helvetica Now Text", Helvetica, sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .mobile-case-study-description {
      color: #757277;
      margin-bottom: 16px;
    }

    .mobile-case-study-category {
      color: #A09EA2;
      margin-bottom: 25px;

      strong {
        color: #000000;
        margin-right: 16px;
      }
    }

    .mobile-case-study-link {
      margin-bottom: 25px;
    }
  }
}