/* ═══════════════════════════════════════════════
   MEET OUR TEAM — photo-forward premium grid + modal
   ═══════════════════════════════════════════════ */

/* Hero + stats reuse About styles (.ab-hero / .ab-stats-*) — about.css is enqueued. */

/* ── Grid ── */
.motx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (min-width: 640px) { .motx-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .motx-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Card ── */
.motx-card {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--sh-card); background: var(--bg-soft);
  transition: transform .3s, box-shadow .3s;
}
.motx-card.is-clickable { cursor: pointer; }
.motx-card:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); }
.motx-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.motx-photo { position: relative; aspect-ratio: 3 / 4; width: 100%; overflow: hidden; }
.motx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.motx-card:hover .motx-photo img { transform: scale(1.06); }

/* Branded gradient fallback (no photo) */
.motx-photo--g0 { background: linear-gradient(150deg, var(--primary), var(--primary-dark)); }
.motx-photo--g1 { background: linear-gradient(150deg, var(--secondary), #063f3f); }
.motx-photo--g2 { background: linear-gradient(150deg, #2a2a44, var(--text-h)); }
.motx-ini {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.92); font-family: var(--fh); font-weight: 800; font-size: 3.4rem;
}

/* Overlay (name/role always; langs + read-bio on hover) */
.motx-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.1rem 1.1rem; color: #fff;
  background: linear-gradient(to top, rgba(10,10,25,.88), rgba(10,10,25,.35) 55%, transparent);
}
.motx-name { font-family: var(--fh); font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.motx-role { font-size: .82rem; opacity: .9; margin-top: .15rem; }
.motx-reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease, margin .35s ease; }
.motx-card:hover .motx-reveal, .motx-card:focus-within .motx-reveal { max-height: 130px; opacity: 1; margin-top: .65rem; }
.motx-langs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.motx-lang { font-size: .7rem; padding: .12rem .5rem; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; }
.motx-readbio { font-size: .8rem; font-weight: 700; color: #fff; }

/* ── Profile modal ── */
.mot-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.mot-modal[hidden] { display: none; }
.mot-modal-bg { position: absolute; inset: 0; background: rgba(20,20,40,.6); }
.mot-modal-card {
  position: relative; z-index: 1; background: var(--white); border-radius: var(--r-card);
  max-width: 520px; width: 100%; max-height: 90vh; overflow: auto;
  padding: 2.25rem 2rem; box-shadow: var(--sh-modal); text-align: center;
}
.mot-modal-close { position: absolute; top: .5rem; right: .75rem; border: 0; background: transparent; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--text-m); }
.mot-modal-close:hover { color: var(--text-h); }
.mot-modal-ava { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.1rem; border: 3px solid var(--white); box-shadow: var(--sh-card); }
.mot-modal-ava img { width: 100%; height: 100%; object-fit: cover; }
.mot-modal-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--primary-light); color: var(--primary); font-family: var(--fh); font-weight: 800; font-size: 2.6rem; }
#motModalName { font-family: var(--fh); font-weight: 800; color: var(--text-h); font-size: 1.4rem; margin: 0 0 .25rem; }
.mot-modal-role { color: var(--primary); font-weight: 600; margin-bottom: .7rem; }
.mot-modal-langs { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.mot-modal-bio { color: var(--text-b); line-height: 1.7; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .motx-card, .motx-photo img, .motx-reveal { transition: none; }
  .motx-card:hover { transform: none; }
  .motx-card:hover .motx-photo img { transform: none; }
}