.member-apply__grid{

  display: grid; grid-template-columns: 1.1fr 1fr;

  gap: 56px; align-items: center;

}

.member-apply__body p{ color: var(--c-text-soft); margin-bottom: 16px; }

.member-apply__body p strong{ color: var(--c-primary-dark); }


.member-apply__perks{

  display: grid; grid-template-columns: 1fr 1fr;

  gap: 14px; margin: 28px 0;

}

.member-apply__perks > div{

  display: flex; align-items: center; gap: 12px;

  background: var(--c-bg-soft);

  border: 1px solid var(--c-border);

  border-left: 3px solid var(--c-accent);

  padding: 12px 16px;

  border-radius: var(--radius-sm);

  font-size: .88rem; font-weight: 600;

  color: var(--c-primary-dark);

  transition: all .25s var(--tr);

}

.member-apply__perks > div:hover{

  background: #fff;

  border-color: var(--c-accent);

  transform: translateX(4px);

  box-shadow: var(--shadow-sm);

}

.member-apply__perks i{ color: var(--c-accent); font-size: 1.1rem; }


.member-apply__actions{

  display: flex; flex-wrap: wrap; gap: 12px;

  margin-top: 24px;

}


.member-apply__preview{

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  max-width: 480px;

  margin-left: auto;

}

.member-apply__preview-head{

  display: flex; align-items: center; gap: 10px;

  padding: 14px 20px;

  background: var(--c-primary);

  color: #fff;

  font-size: .9rem; font-weight: 600;

}

.member-apply__preview-head i{ color: var(--c-accent); }

.member-apply__preview-body{

  background: var(--c-bg-alt);

  aspect-ratio: 703/1430;

  max-height: 540px;

  overflow: hidden;

}

.member-apply__preview-body img{

  width: 100%; height: 100%;

  object-fit: cover; object-position: top;

}


@media (max-width: 900px){

  .member-apply__grid{ grid-template-columns: 1fr; gap: 40px; }

  .member-apply__preview{ margin: 0 auto; max-width: 100%; }

  .member-apply__perks{ grid-template-columns: 1fr; }

}


/* ----- Tabs ----- */

.member-tabs__bar{

  display: flex; justify-content: center;

  gap: 8px; flex-wrap: wrap;

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: 999px;

  padding: 8px;

  margin: 0 auto 28px;

  max-width: 720px;

  box-shadow: var(--shadow-sm);

}

.member-tabs__btn{

  display: inline-flex; align-items: center; gap: 10px;

  background: transparent;

  color: var(--c-text-soft);

  border: 0; border-radius: 999px;

  padding: 10px 22px;

  font-family: var(--ff-body);

  font-size: .92rem; font-weight: 600;

  cursor: pointer;

  transition: all .25s var(--tr);

}

.member-tabs__btn i{ color: var(--c-accent); font-size: 1rem; }

.member-tabs__btn em{

  font-style: normal;

  background: var(--c-bg-soft);

  color: var(--c-text-soft);

  padding: 2px 10px; border-radius: 999px;

  font-size: .78rem; font-weight: 700;

  border: 1px solid var(--c-border);

}

.member-tabs__btn:hover{

  background: var(--c-bg-soft);

  color: var(--c-primary-dark);

}

.member-tabs__btn.is-active{

  background: var(--c-primary);

  color: #fff;

  box-shadow: 0 6px 16px rgba(30,58,138,.25);

}

.member-tabs__btn.is-active i{ color: var(--c-accent); }

.member-tabs__btn.is-active em{

  background: rgba(255,255,255,.2);

  color: #fff;

  border-color: transparent;

}


/* ----- Search ----- */

.member-search{

  position: relative;

  max-width: 480px;

  margin: 0 auto 40px;

}

.member-search i{

  position: absolute; top: 50%; left: 18px;

  transform: translateY(-50%);

  color: var(--c-muted);

}

.member-search input{

  width: 100%;

  padding: 13px 20px 13px 46px;

  font-family: var(--ff-body);

  font-size: .95rem;

  color: var(--c-text);

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: 999px;

  transition: all .2s var(--tr);

}

.member-search input:focus{

  outline: none;

  border-color: var(--c-accent);

  box-shadow: 0 0 0 4px rgba(245,158,11,.12);

}

.member-search input::placeholder{ color: var(--c-muted); }


/* ----- Member grid ----- */

.member-tab-panel.is-active{ display: block; }

.member-grid{

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 20px;

}

.member-card{

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: var(--radius);

  overflow: hidden;

  text-align: center;

  transition: all .3s var(--tr);

  display: flex; flex-direction: column;

}

.member-card:hover{

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

  border-color: transparent;

}

.member-card__media{

  position: relative;

  aspect-ratio: 1/1;

  background: var(--c-bg-alt);

  overflow: hidden;

}

.member-card__media img{

  width: 100%; height: 100%;

  object-fit: cover; object-position: top;

  transition: transform .5s var(--tr);

}

.member-card:hover .member-card__media img{ transform: scale(1.06); }

.member-card__media--fallback{

  background:

    linear-gradient(135deg, rgba(30,58,138,.15), rgba(245,158,11,.15)),

    var(--c-bg-alt);

  display: flex; align-items: center; justify-content: center;

}

.member-card__media--fallback::after{

  content: '\f007'; /* fa-user */

  font-family: 'Font Awesome 6 Free';

  font-weight: 900;

  font-size: 3.5rem;

  color: var(--c-muted);

  opacity: .4;

}

.member-card__placeholder{

  position: absolute; inset: 0;

  display: flex; align-items: center; justify-content: center;

  background: var(--c-bg-alt);

  color: var(--c-muted);

  font-size: 3.5rem;

}

.member-card__year{

  position: absolute; top: 10px; right: 10px;

  background: var(--c-accent); color: #1f1300;

  font-size: .68rem; font-weight: 700;

  letter-spacing: .06em; text-transform: uppercase;

  padding: 4px 10px; border-radius: 999px;

  box-shadow: var(--shadow);

}

.member-card__body{

  padding: 16px 14px 18px;

  flex: 1;

}

.member-card__body h3{

  font-family: var(--ff-display);

  font-size: 1rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 4px;

  line-height: 1.3;

  /* single line clamp */

  display: -webkit-box;

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.member-card__body p{

  color: var(--c-text-soft);

  font-size: .82rem;

  line-height: 1.5;

  /* 2 line clamp */

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.member-card--dynamic .member-card__body h3{

  -webkit-line-clamp: 2;

}


/* ----- Empty state ----- */

.member-empty{

  text-align: center;

  padding: 60px 20px;

  color: var(--c-text-soft);

}

.member-empty i{

  font-size: 3rem;

  color: var(--c-muted);

  margin-bottom: 12px;

  display: block;

  opacity: .6;

}

.member-empty p{ font-size: .95rem; }


@media (max-width: 640px){

  .member-tabs__btn{ padding: 8px 14px; font-size: .82rem; }

  .member-tabs__btn em{ padding: 1px 8px; font-size: .72rem; }

  .member-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

  .member-card__body{ padding: 12px 10px 14px; }

  .member-card__body h3{ font-size: .92rem; }

  .member-card__body p{ font-size: .78rem; }

}