/* Block: cnm-person-grid
 * Extracted from theme CSS by wp-arch-agent.
 * Classes: header, cards, card, cnm-person-grid, section-heading
 */

/* The block renders one "<h2>Category</h2> + .team-grid" pair per team_category
   straight into a plain block container, and .section-heading has margin: 0, so
   every gap inside here computed to ZERO — the second heading ("Staff") sat
   flush against the grid above it and its own grid below it. The static markup
   had all of these as children of .team-listing > .container, a flex column
   with a flat 50px gap; that container is gone in the block build, so the same
   rhythm is restored on the block root. Matches the gap the page's <article>
   already uses between the top-level blocks, at each breakpoint. */
.cnm-person-grid {
  --pg-gap: 50px;
  display: flex;
  flex-direction: column;
  gap: var(--pg-gap);
}

@media (max-width: 991px) {
  .cnm-person-grid {
    --pg-gap: 40px;
  }
}

@media (max-width: 575px) {
  .cnm-person-grid {
    --pg-gap: 32px;
  }
}

/* A heading that FOLLOWS a grid opens a new category, so it needs more air above
   it than the gap it gets below. The flat gap above is a restoration of the old
   .team-listing rhythm (see the note above), not a statement that a section break
   and an intra-section gap should measure the same — with both at 50px "Staff"
   read as belonging equally to the grid above and the one below, which is what
   the client flagged. Doubling the gap keeps the value in one place per
   breakpoint; the first heading has no grid before it and is untouched. */
.cnm-person-grid .team-grid + .section-heading {
  margin-top: var(--pg-gap);
}

.team-listing .section-heading {
  margin: 0;
  font-family: var(--font-heading, ui-monospace, monospace);
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--ink, #081F2C);
}