/* =========================================================================
   JM People — the team grid and its modal

   Figma draws the cards (304:498/501/504/507) on Purple/400 with no surface of
   their own: name, role in Gold/500, a teaser, then "Read more". The board does
   not draw the expanded state, so the modal below follows the site's own
   conventions rather than a frame.
   ========================================================================= */

.jm-people__grid {
  display: grid;
  /* Rows breathe more than columns (Phil, 2026-08-31): the board's 24 was
     the card gap, but whole people stacked 24 apart read as one run-on
     block. 40 between rows on desktop, columns keep the drawn 24. */
  gap: 2.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm-people--cols-2 .jm-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jm-people--cols-3 .jm-people__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 47.99rem) {
  .jm-people--cols-2 .jm-people__grid,
  .jm-people--cols-3 .jm-people__grid { grid-template-columns: minmax(0, 1fr); }
  /* One column on the phone: each person is a full entry, so the space
     between them has to say "new person", not "next paragraph". */
  .jm-people__grid { gap: 3.5rem; }
}

.jm-people__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                        /* 12 — the board's card gap */
  max-width: 14.25rem;                 /* 228 — the drawn name measure */
  max-width: none;
}

/* Name and role are one block on the board: 18/600 at line-height 1, the role
   directly beneath in Gold/500 with no gap. */
.jm-people__name {
  margin: 0;
  font: 600 var(--text-body-m)/1 var(--font-sans);
  color: var(--stone-100);
}

.jm-people--light .jm-people__name { color: var(--purple-500); }

.jm-people__post {
  margin-left: 0.375rem;               /* 6 */
  font-size: 0.6875rem;                /* 11 — the drawn post-nominal */
  font-weight: 500;
}

.jm-people__role {
  margin: 0;
  font: 600 var(--text-body-m)/1 var(--font-sans);
  color: var(--gold-500);
}

.jm-people__teaser {
  margin: 0;
  font: 400 var(--text-body-s)/1.4 var(--font-sans);
  color: var(--stone-100);
}

.jm-people--light .jm-people__teaser { color: var(--purple-400); }

/* ---- The card's control ---- */

.jm-people__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                         /* 8 — the button atom's gap */
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stone-100);
  font: 400 var(--text-body-s)/1.2 var(--font-sans);
  cursor: pointer;
}

.jm-people--light .jm-people__more { color: var(--purple-500); }

.jm-people__more-label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.jm-people__more:hover .jm-people__more-label { text-decoration-thickness: 2px; }
.jm-people__more:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 4px;
}

/* ---- The modal ----

   A native <dialog>: focus trapping, Esc, inertness and the top layer are the
   platform's job, not this file's. */

.jm-people__dialog {
  width: min(46rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(44rem, calc(100dvh - 4rem));
  padding: 0;
  border: 0;
  background: var(--stone-100);
  color: var(--purple-700);
  /* Horizontal touches belong to the modal's own swipe paging — pan-y stops
     the browser claiming them, and contain stops a scroll at the bio's end
     rubber-banding the page behind (Phil, 2026-08-31). */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.jm-people__dialog::backdrop {
  background: rgb(27 0 86 / 0.72);     /* Purple/700 at 72% */
}

.jm-people__sheet {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                         /* 24 */
  max-height: inherit;
  padding: 2rem;                       /* 32 */
}

@media (max-width: 47.99rem) {
  .jm-people__sheet { padding: 1.5rem; }
}

.jm-people__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.jm-people__count {
  margin: 0;
  font: 500 var(--text-caption-m)/1.2 var(--font-sans);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--purple-400);
}

/* The X is the burger-bars component in its crossed state (chrome.css), the
   same close as the menu and the conversation modal (Phil, 2026-08-31) —
   recoloured purple for this light sheet. */
.jm-people__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(2.75rem, 44px);
  height: max(2.75rem, 44px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.jm-people__close .jm-burger__bars span {
  background-color: var(--purple-500);
  transition: background-color var(--motion-fast) var(--motion-ease-out);
}
.jm-people__close:hover .jm-burger__bars span { background-color: var(--purple-700); }
.jm-people__close:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 2px; }

/* ---- The panels ---- */

.jm-people__panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.jm-people__panel:focus { outline: none; }

.jm-people__panel-name {
  margin: 0;
  font: 600 var(--text-heading-l)/1.2 var(--font-sans);
  color: var(--purple-500);
}

.jm-people__panel-role {
  margin: 0.25rem 0 1.25rem;           /* 4 / 20 */
  font: 600 var(--text-body-m)/1.2 var(--font-sans);
  color: var(--purple-400);
}

.jm-people__bio p {
  margin: 0 0 1rem;
  font: 400 var(--text-body)/1.5 var(--font-sans);
  color: var(--purple-700);
}

.jm-people__bio p:last-child { margin-bottom: 0; }

/* ---- Paging ---- */

.jm-people__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;                /* 20 */
  border-top: 1px solid var(--purple-100);
}

.jm-people__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;                      /* 44 */
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--purple-100);
  background: none;
  color: var(--purple-500);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-out), border-color var(--motion-fast) var(--motion-ease-out);
}

.jm-people__step:hover { background-color: var(--purple-50); border-color: var(--purple-500); }
.jm-people__step:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 2px; }

/* The one arrow, pointed back for "previous". */
.jm-people__step--prev .jm-people__step-arrow { transform: scaleX(-1); }

.jm-people__step-arrow {
  display: inline-flex;
  transition: transform var(--motion-fast) var(--motion-ease-out);
}

.jm-people__step--next:hover .jm-people__step-arrow { transform: translateX(0.25rem); }
.jm-people__step--prev:hover .jm-people__step-arrow { transform: scaleX(-1) translateX(0.25rem); }

.jm-people__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;                         /* 8 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm-people__dot {
  display: block;
  width: 0.5rem;                       /* 8 */
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background-color: var(--purple-100);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease-out), transform var(--motion-fast) var(--motion-ease-out);
}

.jm-people__dot:hover { background-color: var(--purple-300); }
.jm-people__dot.is-current { background-color: var(--purple-500); transform: scale(1.4); }
.jm-people__dot:focus-visible { outline: 3px solid var(--purple-500); outline-offset: 3px; }

/* ---- Micro animation ----

   The dialog fades and lifts on open; a panel change slides in from the side you
   travelled from, so the movement agrees with the control you pressed. Both are
   short enough to read as responsiveness rather than as an effect. */

@keyframes jm-people-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes jm-people-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.jm-people__dialog[open] { animation: jm-people-in var(--motion-base) var(--motion-ease-enter); }
.jm-people__dialog[open]::backdrop { animation: jm-people-backdrop-in var(--motion-base) var(--motion-ease-out); }

.jm-people__panel { animation: jm-people-in var(--motion-base) var(--motion-ease); }
.jm-people__panel.is-from-end   { opacity: 0; transform: translateX(1.25rem); }
.jm-people__panel.is-from-start { opacity: 0; transform: translateX(-1.25rem); }

@media (prefers-reduced-motion: reduce) {
  .jm-people__dialog[open],
  .jm-people__dialog[open]::backdrop,
  .jm-people__panel { animation: none; }

  .jm-people__close .jm-burger__bars span,
  .jm-people__step,
  .jm-people__step-arrow,
  .jm-people__dot { transition: none; }
  .jm-people__step--next:hover .jm-people__step-arrow { transform: none; }
  .jm-people__step--prev:hover .jm-people__step-arrow { transform: scaleX(-1); }
}