/* =========================
   FIXED-SIZE CARD GRID (uniform cards + uniform image height)
========================= */

:root {
  --mt-card-w: 260px;    /* fixed card width */
  --mt-card-h: 460px;    /* taller to accommodate portrait image + text */
  --mt-gap: 12px;
}

/* Grid uses fixed-width tracks so rows with 4 vs 5 cards look identical */
.mt-profile-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, var(--mt-card-w)) !important;
  justify-content: center;
  gap: var(--mt-gap) !important;
  align-items: start !important;
  margin: 1.25rem 0 !important;
  width: 100% !important;
}

/* Kill any theme widths/floats/flex */
.mt-profile-grid > * {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  box-sizing: border-box !important;
}

/* Card box: exact width/height so every card matches visually */
.mt-card {
  position: relative;
  width: var(--mt-card-w) !important;
  height: var(--mt-card-h);
  overflow: hidden;
  perspective: 1000px;
  box-sizing: border-box;
}

/* Flip engine */
.mt-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s;
}
@media (prefers-reduced-motion: reduce){ .mt-card-inner { transition: none; } }
.mt-card:hover .mt-card-inner { transform: rotateY(180deg); }

/* Faces fill the card box */
.mt-card-front,
.mt-card-back {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: .75rem;
  border: 1px solid #ddd;
  border-radius: .5rem;
  background: #fff;
  box-sizing: border-box;
}

/* FRONT uses grid: photo (portrait), name, title, button, spacer */
.mt-card-front {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;  /* photo, name, title, button, spacer */
  row-gap: .5rem;
  text-align: center;
}

/* BACK stays visual-only and flips; no interactive content inside */
.mt-card-back {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotateY(180deg);
}

/* Portrait image area (uniform across all cards) */
.mt-photo {
  width: 100%;
  aspect-ratio: 4 / 5;      /* portrait: height = width * 1.25 */
  border-radius: .5rem;
  overflow: hidden;
}

/* Image fills the portrait area and ignores WYSIWYG inline sizes */
.mt-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 20%;
}

/* Typography */
.profile-name  {
  margin: .25rem 0 .15rem;
  font-weight: 700;
  font-size: 1.2em !important;           /* small bump */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Title: optional 2-line clamp so long titles don't push layout */
.profile-title {
  margin: 0;
  color: #444;
  font-size: .92rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* clamp to 2 lines for uniformity */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25em * 2);/* reserve space equal to 2 lines */
}

/* Fallback for older browsers that lack aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .mt-photo { height: calc(var(--mt-card-w) * 1.25); } /* 4:5 portrait */
}

.bio-snippet { margin: 0 0 .5rem; line-height: 1.4; }

/* Button */
.read-more-btn {
  align-self: center;
  background: #93002b;
  color: #fff;
  border: 0;
  padding: .45rem .9rem;
  border-radius: .375rem;
  cursor: pointer;
  font-size: .9rem;
}
.read-more-btn:focus { outline: 2px solid #000; outline-offset: 2px; }

/* Shared visual button style (you already have .read-more-btn) */

/* Front (real button): nothing extra needed */
.read-more-btn--front {}

/* Back (visual-only control in aria-hidden panel) */
.read-more-btn--back {
  display: inline-block;
  text-align: center;
  user-select: none;
  cursor: pointer;              /* click opens modal */
  /* ensure it’s not focusable via CSS (it’s a <span>) */
}

/* Modal */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.7); z-index: 1000;
}
.modal[hidden], .modal[aria-hidden="true"] { display: none; }
.modal-content {
  background: #fff; width: min(92vw, 720px); max-height: 80vh;
  overflow-y: auto; padding: 1.5rem; border-radius: .5rem;
  position: relative; box-shadow: 0 10px 25px rgba(0,0,0,.2);
  line-height: 1.5; border: 2px solid #900;
}
.modal-content h2 {
    margin-bottom: 0;
    font-size: 1.3em;
}
.modal-close {
  position: absolute; top: .75rem; right: .75rem; color: #C2363D;
  border: 0; background: transparent; font-size: 3.5rem; line-height: 1; cursor: pointer;
}
.modal-title { margin-top: .25rem; color: #555; }

/* Section heading */
.profile-section { margin: 1.25rem 0 .75rem; font-size: 2rem; font-weight: 700; }