/* ======================================
   BOARD GRID — 3 PER ROW (CENTERED)
====================================== */

.board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 320px));
  gap: 2.5rem;

  /* Center the grid block itself with equal left/right space */
  width: max-content;
  max-width: 100%;
margin: 2rem auto 0;

  justify-content: center;
  justify-items: center;
  padding-inline: 0;
}

/* If last row has 1 item -> center it */
.board-grid > :nth-last-child(1):nth-child(3n + 1) {
  grid-column: 2;
}

/* If last row has 2 items -> center the pair (symmetrical) */
.board-grid > :nth-last-child(2):nth-child(3n + 1) {
  grid-column: 1;
}

.board-grid > :nth-last-child(1):nth-child(3n + 2) {
  grid-column: 3;
}

/* ======================================
   BOARD CARD
====================================== */

.board-card {
  text-align: center;
}

/* ======================================
   PHOTO
====================================== */

.board-photo {
  width: 180px;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1rem;
  background-color: #f2f2f2;
}

/* ======================================
   TYPOGRAPHY
   (inherits your existing theme colors)
====================================== */

.board-name {
  margin: 0;
}

.board-role {
  margin: 0.3rem 0 0.8rem;
  font-weight: 600;
  color: var(--color-primary); /* your red theme */
}

.board-bio {
  margin: 0;
}

/* ======================================
   MOBILE — SINGLE COLUMN
====================================== */

@media (max-width: 768px) {
  .board-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem auto 0;
    justify-content: stretch;
    justify-items: center;
  }

  /* ✅ reset desktop "last row" positioning rules on mobile */
  .board-grid > * {
    grid-column: auto !important;
  }

  .board-photo {
    width: 160px;
    height: 200px;
  }
}