/**
 * GeneLink – Member search page styles
 * Adopts card grid, filter panel, and pagination from mockup (03-member-search).
 */

.gl-search-box { display: flex; gap: .75rem; margin-bottom: 1.25rem; }

.gl-filter-toggle-btn { display: none; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 500; color: var(--gl-text, #1A1916); background: var(--gl-surface, #fff); border: 1px solid var(--gl-border, #E2E0DB); border-radius: var(--gl-r, 8px); padding: .5rem .85rem; cursor: pointer; margin-bottom: 1rem; width: 100%; justify-content: center; font-family: var(--gl-font-body, 'DM Sans', sans-serif); }

.gl-filters { background: var(--gl-surface, #fff); border: 1px solid var(--gl-border, #E2E0DB); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06); }
.gl-filters.collapsed { display: none; }
.gl-filter-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.gl-filter-header h4 { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gl-muted, #7A786F); font-family: var(--gl-font-body, 'DM Sans', sans-serif); margin: 0; }
.gl-filter-clear { font-size: .78rem; color: var(--gl-accent, #2D6A4F); cursor: pointer; background: none; border: none; font-family: var(--gl-font-body, 'DM Sans', sans-serif); font-weight: 500; }
.gl-filter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: end; }
.gl-birth-range { display: flex; gap: .4rem; align-items: center; }
.gl-birth-range span { font-size: .75rem; color: var(--gl-muted, #7A786F); white-space: nowrap; }
.gl-birth-range input { width: 80px !important; }

.gl-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: .5rem; }
.gl-results-header p { font-size: .875rem; color: var(--gl-muted, #7A786F); font-family: var(--gl-font-body, 'DM Sans', sans-serif); font-weight: 400; margin: 0; }
.gl-results-header p strong { color: var(--gl-text, #1A1916); }
.gl-sort-select { font-size: .8rem; color: var(--gl-muted, #7A786F); background: none; border: 1px solid var(--gl-border, #E2E0DB); border-radius: var(--gl-r, 8px); padding: .3rem .65rem; font-family: var(--gl-font-body, 'DM Sans', sans-serif); cursor: pointer; outline: none; }

.gl-members-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.gl-member-card { background: var(--gl-surface, #fff); border: 1px solid var(--gl-border, #E2E0DB); border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06); cursor: pointer; transition: all .2s; text-decoration: none; color: var(--gl-text, #1A1916); display: block; }
.gl-member-card:hover { border-color: var(--gl-accent, #2D6A4F); box-shadow: 0 4px 20px rgba(45,106,79,.12); transform: translateY(-2px); }

.gl-mc-top { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .9rem; }
.gl-mc-avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--gl-font-heading, 'DM Serif Display', serif); font-size: 1.1rem; flex-shrink: 0; color: #fff; overflow: hidden; }
.gl-mc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.gl-mc-name { font-family: var(--gl-font-heading, 'DM Serif Display', serif); font-size: 1.05rem; margin-bottom: .1rem; }
.gl-mc-dates { font-size: .78rem; color: var(--gl-muted, #7A786F); }
.gl-mc-divider { height: 1px; background: var(--gl-border, #E2E0DB); margin: .75rem 0; }
.gl-mc-details { display: flex; flex-direction: column; gap: .3rem; }
.gl-mc-detail { font-size: .8rem; color: var(--gl-muted, #7A786F); display: flex; align-items: center; gap: .4rem; }
.gl-mc-detail strong { color: var(--gl-text, #1A1916); font-weight: 500; }
.gl-mc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; }
.gl-view-link { font-size: .78rem; color: var(--gl-accent, #2D6A4F); font-weight: 500; text-decoration: none; }

.gl-pagination { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 2rem; flex-wrap: wrap; }
.gl-pagination .page-numbers, .gl-pagination a, .gl-pagination span { min-width: 40px; height: 40px; padding: 0 .45rem; border-radius: var(--gl-r, 8px); border: 1px solid var(--gl-border, #E2E0DB); background: var(--gl-surface, #fff); color: var(--gl-muted, #7A786F); font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; font-family: var(--gl-font-body, 'DM Sans', sans-serif); text-decoration: none; touch-action: manipulation; }
.gl-pagination .page-numbers:hover, .gl-pagination a:hover { border-color: var(--gl-accent, #2D6A4F); color: var(--gl-accent, #2D6A4F); }
.gl-pagination .page-numbers.current, .gl-pagination .current { background: var(--gl-accent, #2D6A4F) !important; border-color: var(--gl-accent, #2D6A4F) !important; color: #fff !important; font-weight: 600; }
.gl-pagination .page-numbers.dots { background: none; border: none; }

@media (max-width: 900px) {
  .gl-filter-grid  { grid-template-columns: 1fr 1fr; }
  .gl-members-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .gl-filter-toggle-btn { display: flex; }
  .gl-filters { display: none; }
  .gl-filters.open { display: block; }
  .gl-filter-grid { grid-template-columns: 1fr; }
  .gl-members-grid { grid-template-columns: 1fr; }
  .gl-birth-range input { flex: 1; width: auto !important; }
}

/* Template compatibility: current Twig uses these class names */
.genelink-search-form {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.genelink-search-form .gl-search-icon {
  left: .9rem;
}

.genelink-search-form #gl-search-input {
  width: 100%;
  padding: .7rem 2.8rem .7rem 2.5rem;
}

.genelink-search-form .gl-search-clear {
  position: absolute;
  right: 6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--gl-muted, #7A786F);
  border-radius: 999px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.genelink-search-form .gl-search-clear:hover {
  background: var(--gl-s2, #F0EFEB);
  color: var(--gl-text, #1A1916);
}

.gl-search-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .65rem;
}

.gl-search-count {
  font-size: .875rem;
  color: var(--gl-muted, #7A786F);
}

.gl-per-page-form {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.gl-member-card-av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-bottom: .9rem;
  overflow: hidden;
}

.gl-member-card-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.gl-member-card-name {
  font-family: var(--gl-font-heading, 'DM Serif Display', serif);
  font-size: 1.05rem;
  margin-bottom: .1rem;
}

.gl-member-card-aka {
  font-size: .72rem;
  color: var(--gl-muted, #7A786F);
  margin-bottom: .3rem;
}

.gl-member-card-dates {
  font-size: .78rem;
  color: var(--gl-muted, #7A786F);
  margin-bottom: .5rem;
}

.gl-member-card-detail {
  font-size: .8rem;
  color: var(--gl-muted, #7A786F);
}

.gl-member-card-detail + .gl-member-card-detail {
  margin-top: .2rem;
}

.gl-member-card-foot {
  margin-top: .9rem;
  color: var(--gl-accent, #2D6A4F);
  font-size: .78rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.gl-pagination-wrap .gl-pagination {
  margin-top: 2rem;
}

.gl-lin-badge {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .2rem .6rem;
    border-radius: 99px;
    text-transform: uppercase;
}

.gl-lin-badge--deceased {
    background: #F3F4F6;
    color: #4B5563;
}

.gl-lin-badge--living {
    background: #D1FAE5;
    color: #065F46;
}