body:has(.bio-grid-block .bio-overlay.active) {
  overflow: hidden;
}

.bio-grid-block {

  .bio-grid-title {
    text-align: center;
    margin-bottom: 16px;
    font-weight: 700;
  }

  .bio-grid-subtitle {
    text-align: center;
    font-weight: 500;
  }

  .bio-grid-tabs-wrapper {
    overflow: auto;
    width: 100%;

    .bio-grid-tabs {
      margin-top: 32px;
      display: flex;
      gap: 20px;
      justify-content: center;
      margin-bottom: 32px;
      min-width: max-content;

      a.bio-grid-tab {
        padding-right: 20px;
        appearance: none;
        background: unset;
        border: none;
        border-right: 1px solid;
        position: relative;
        text-wrap-mode: nowrap;

        text-decoration: none;
        color: #151316;
        cursor: pointer;

        &.active::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          right: 20px;
          height: 1px;
          background: var(--rc-grad-warmth);
        }

        &:focus,
        &:focus-visible {
          padding: 0 20px 0 0;
          border-radius: 0;
          box-shadow: none;
        }
      }

      .bio-grid-tab:last-of-type {
        padding: 0;
        border: 0;

        &.active::after {
          right: 0
        }
      }
    }
  }

  .bio-grid-contents {
    margin-top: 32px;
  }

  .bio-grid-content {
    position: relative;
  }

  .bio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    /* min-height: max-content; */
    /* max-height: 700px; */
    max-height: calc(100svh - 124px);
    overflow: hidden;
    z-index: 100;
    background: #FAFAFA;
    scroll-margin-top: 24px;
    cursor: default;


    @media screen and (max-width: 990px) {
      max-height: 64vw;
    }

    @media screen and (max-width: 600px) {
      max-height: unset;
      height: auto;
      left: -24px;
      right: -24px;
      width: unset;
      
    }


     &::before {
      content: "";
      position: absolute;
      top: 0;
      /* left: 44%; */
      left: 540px;
      width: 1px;
      height: 100%;
      background: var(--rc-grad-brand-180);
      z-index: -1;

      @media screen and (max-width: 990px) {
        left: 50%;
        
      }

      @media screen and (max-width: 600px) {
        display: none;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 80px;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--rc-grad-brand-270);
      z-index: -1;

      @media screen and (max-width: 600px) {
        display: none;
      }
    }

    .bio-overlay-content {
      display: flex;
      height: 100%;
      gap: 48px;

      @media screen and (max-width: 600px) {
        flex-direction: column;
        gap: 0;
      }
    }

    button.bio-overlay-close {
      appearance: none;
      background: none;
      border: none;
      padding: 10px;
      line-height: 1;
      position: absolute;
      top: 16px;
      right: 16px;
    }

    .bio-overlay-photo {
      /* flex: 0 0 44%; */
      flex: 0 0 540px;
      align-self: flex-end;
      position: relative;
      img {
        width: 100%;

        @media screen and (max-width: 600px) {
          max-width: 230px;
        }
      }

      @media screen and (max-width: 990px) {
        flex: 0 0 50%;
      }

      @media screen and (max-width: 600px) {
        flex: unset;
        align-self: center;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 61.33%;
          width: 1px;
          height: 100%;
          background: var(--rc-grad-brand-180);
          z-index: -1;
        }

        
      }
    }

    .bio-overlay-info-wrapper {
      margin-top: 80px;
      height: 100%;
      /* max-height: 620px; */
      max-height: calc(100svh - 204px);
      overflow-y: auto;

      @media screen and (max-width: 990px) {
        max-height: calc(64vw - 80px);
      }


      @media screen and (max-width: 600px) {
        margin-top: 0;
        /* max-height: unset; */
        max-height: calc(100svh - 424px);
        height: auto;
        border-top: 1px solid;
        border-image: var(--rc-grad-brand) 1;
      }
    }

    .bio-overlay-info {
      padding: 32px 50px 32px 0;


      @media screen and (max-width: 600px) {
        padding: 32px 16px 32px 16px;
      }

      .bio-overlay-name {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.333;
        margin-bottom: 0;
      }

      .bio-overlay-title {
        color: #757277;
        margin-bottom: 16px;
      }

      .bio-overlay-post-content {
        margin-bottom: 0px;
        color: #757277;

        p {
          margin-bottom: 24px;
        }
      }
      
    }
  }
  
  .bio-grid-content.bio-click {
    .bio-grid {
      .bio-grid-item {
        cursor: pointer;
      }
    }
  }

  .bio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 39px;


    @media screen and (max-width: 600px) {
      grid-template-columns: 1fr 1fr;

      column-gap: 12px;
    }


    .bio-grid-item {
      --mouse-left: 87%;
      --mouse-top: 26%;

      .bio-photo {
        background: #FAFAFA;
        position: relative;
        z-index: 10;
        aspect-ratio: 115 / 151;
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          /* left: 87%; */
          left: var(--mouse-left);
          width: 1px;
          height: 100%;
          background: var(--rc-grad-brand-180);
          z-index: -1;

          /* transition: left 0.3s ease; */
        }

        &::after {
          content: "";
          position: absolute;
          /* top: 26%; */
          top: var(--mouse-top);
          left: 0;
          width: 100%;
          height: 1px;
          background: var(--rc-grad-brand-270);
          z-index: -1;

          /* transition: top 0.3s ease; */
        }
      }

      .bio-info {
        padding-top: 16px;
      }


      @media screen and (max-width: 770px) {
        .bio-info {
          margin-top: 16px;
          border-top: 1px solid black;
        }
      }

      
      .bio-name {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 0;
      }

      .bio-title {
        color: #757277;
      }

    }
  }


  .bio-grid:has(.bio-overlay.active):after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #00000080;
    z-index: 50;
  }
}