/**
 * Styles for archive-members.php (ESTMJS Members Directory).
 * Enqueued conditionally — loads only on the members post-type archive.
 *
 * Typography (font-family, font-size, color) for headings and text is
 * intentionally NOT set here — it inherits from the active theme's
 * Customizer settings via normal CSS cascade.
 */

.estmjs-member-archive {
  --estmjs-navy:       #0F2A43;
  --estmjs-teal:       #1F8A83;
  --estmjs-teal-light: #E4F3F2;
  --estmjs-paper:      #FFFFFF;
  --estmjs-canvas:     #F7F9FA;
  --estmjs-border:     #E2E8ED;
  --estmjs-radius:     6px;

  background-color:    var(--estmjs-canvas);
}

.estmjs-member-archive *,
.estmjs-member-archive *::before,
.estmjs-member-archive *::after {
  box-sizing: border-box;
}

.estmjs-member-archive__header {
  max-width: 1200px;
  margin:    0 auto;
  padding:   2.5rem 1.5rem 0;
}

.estmjs-member-archive__title {
  margin: 0 0 1.5rem;
}

/* -----------------------------------------------------------------------
 * Grid: 4 / 3 / 2 / 1 columns, mobile-first.
 * ---------------------------------------------------------------------- */
.estmjs-member-grid {
  display:               grid;
  grid-template-columns: repeat( 1, 1fr );
  gap:                   1.5rem;
  max-width:             1200px;
  margin:                0 auto;
  padding:               0 1.5rem 4rem;
}

@media ( min-width: 600px ) {
  .estmjs-member-grid {
    grid-template-columns: repeat( 2, 1fr );
    gap:                   2rem;
  }
}

@media ( min-width: 900px ) {
  .estmjs-member-grid {
    grid-template-columns: repeat( 3, 1fr );
  }
}

@media ( min-width: 1200px ) {
  .estmjs-member-grid {
    grid-template-columns: repeat( 4, 1fr );
  }
}

/* -----------------------------------------------------------------------
 * Card
 * ---------------------------------------------------------------------- */
.estmjs-member-card {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  text-align:       center;
  background-color: var(--estmjs-paper);
  border:           1px solid var(--estmjs-border);
  border-radius:    var(--estmjs-radius);
  overflow:         hidden;
  min-width:        100%;
}

.estmjs-member-card__media-link {
  display: block;
  width:   100%;
}

.estmjs-member-card__photo {
  display:       block;
  width:         100%;
  aspect-ratio:  2 / 3;
  object-fit:    cover;
  border-bottom: 4px solid var(--estmjs-teal);
}

.estmjs-member-card__photo--placeholder {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background-color: var(--estmjs-navy);
  color:            var(--estmjs-teal-light);
  font-size:        3rem;
}

.estmjs-member-card__name {
  margin: 1.25rem 1rem 1rem;
}

.estmjs-member-card__name a {
  color:           inherit;
  text-decoration: none;
}

.estmjs-member-card__name a:hover,
.estmjs-member-card__name a:focus-visible {
  color: var(--estmjs-teal);
}

/* Subtle outline button — deliberate accent chrome, pushed to card bottom. */
.estmjs-member-card__button {
  margin:           auto 0 1.5rem;
  padding:          0.5rem 1.25rem;
  border:           1px solid var(--estmjs-teal);
  border-radius:    999px;
  color:            var(--estmjs-teal);
  background-color: transparent;
  font-size:        0.8rem;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.05em;
  text-decoration:  none;
  transition:       background-color 0.15s ease, color 0.15s ease;
}

.estmjs-member-card__button:hover,
.estmjs-member-card__button:focus-visible {
  background-color: var(--estmjs-teal);
  color:            var(--estmjs-paper);
}

/* -----------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */
.estmjs-member-archive__pagination {
  max-width:  1200px;
  margin:     0 auto;
  padding:    0 1.5rem 4rem;
  text-align: center;
}

.estmjs-member-archive__pagination .page-numbers {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       2.25rem;
  height:          2.25rem;
  margin:          0 0.15rem;
  padding:         0 0.5rem;
  border:          1px solid var(--estmjs-border);
  border-radius:   var(--estmjs-radius);
  text-decoration: none;
}

/* Current-page badge needs guaranteed contrast against its teal fill,
 * so the paper colour here is a functional requirement, not a text-colour
 * override of theme copy. */
.estmjs-member-archive__pagination .page-numbers.current {
  background-color: var(--estmjs-teal);
  border-color:     var(--estmjs-teal);
  color:            var(--estmjs-paper);
}

.estmjs-member-archive__pagination a.page-numbers:hover,
.estmjs-member-archive__pagination a.page-numbers:focus-visible {
  border-color: var(--estmjs-teal);
  color:        var(--estmjs-teal);
}

.estmjs-member-archive__empty {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 1.5rem 4rem;
}

/* -----------------------------------------------------------------------
 * Accessibility / motion preferences
 * ---------------------------------------------------------------------- */
.estmjs-member-archive a:focus-visible {
  outline:        2px solid var(--estmjs-teal);
  outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
  .estmjs-member-archive * {
    transition: none !important;
  }
}