/* ============================================
   Members Page
   ============================================ */

.members {
  padding: var(--fv-padding-top) var(--padding-x) 0;
}

.members {
  .title {
    font-family: var(--font-en);
    font-size: var(--fv-title-font-size);
    font-weight: normal;
    line-height: normal;
    margin-bottom: var(--fv-title-margin-bottom);
  }

  .text-fit {
    margin-bottom: var(--fv-logo-margin-bottom);
  }

  .page-intro {
    margin-bottom: 110rem;
  }
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 130rem;
  margin-bottom: 200rem;
}

/* --- Member Grid (with photo & profile) --- */
.members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 62rem;
}

.member-card {
  display: flex;
  flex-direction: column;
  gap: 20rem;

  .member-card-photo {
    aspect-ratio: 8 / 5;
    overflow: hidden;

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

  .member-card-info {
    display: flex;
    flex-direction: column;
    gap: 23rem;
    padding-right: 36rem;
  }
}

/* --- Member Card Header (name + website) --- */
.member-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.member-card-website {
  font-family: var(--font-en);
  font-size: 13rem;
  line-height: 1;
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-black);
  padding: 4rem 12rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.6;
  }
}

/* --- Member Card Typography --- */
.member-card-name {
  font-size: 28rem;
  letter-spacing: 1.4rem;
  line-height: 1.8;
  font-feature-settings: var(--ffs-pwid);
  font-weight: normal;
}

.member-card-name-secondary {
  margin-top: -6rem;
  font-family: var(--font-en);
  font-size: 14rem;
  line-height: 1.4;
  font-feature-settings: var(--ffs-pwid);
}

.member-card-position {
  font-size: 17rem;
  letter-spacing: 0.85rem;
  line-height: 1.6;
  font-feature-settings: var(--ffs-pwid);
}

.member-card-profile {
  font-size: 17rem;
  letter-spacing: 0.85rem;
  line-height: 1.8;
  font-feature-settings: var(--ffs-pwid);
}

/* --- Simple Members (text only) --- */
.members-simple {
  display: flex;

  .member-card-simple {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25rem;
    padding-right: 34rem;
  }
}

/* ============================================
   Responsive - SP
   ============================================ */
@media (max-width: 700px) {

  .members .page-intro {
    margin-bottom: 40rem;
  }

  .members-list {
    gap: 90rem;
    margin-bottom: 120rem;
  }

  .members-grid {
    grid-template-columns: 1fr;
    row-gap: 47rem;
  }

  .member-card {
    gap: 19rem;

    .member-card-info {
      gap: 14rem;
      padding-right: 0;
    }
  }

  .member-card-website {
    font-size: 12rem;
    padding: 6rem 11rem;
  }

  .member-card-name {
    font-size: 21rem;
    letter-spacing: 1.05rem;
  }

  .member-card-name-secondary {
    margin-top: 0;
    font-size: 12rem;
  }

  .member-card-position {
    font-size: 14rem;
    letter-spacing: 0.7rem;
  }

  .member-card-profile {
    font-size: 14rem;
    letter-spacing: 0.7rem;
  }

  .members-simple {
    flex-direction: column;
    gap: 60rem;

    .member-card-simple {
      gap: 5rem;
      padding-right: 0;
    }
  }
}