/* ============================================================
   The team card, its grid, and the two staff-only templates.

   ONE STYLESHEET, ONE CARD. The `staff_cards` block, the
   /our-team/ archive (archive-staff.php) and a staff profile
   (single-staff.php) all draw the same card through the same
   renderer, parts/staff-card.php, so its rules live once —
   here — rather than as a copy per surface.

   THE FILE IS NAMED AFTER A BLOCK THAT NO LONGER EXISTS, ON
   PURPOSE. `team_cards` was the second team block and was
   removed in FB-028 (parts/blocks/BLOCKS.md carries the
   client instruction and the reasoning). It is the block
   these rules were first written for, and every single one of
   them is also worn by the staff card — verified selector by
   selector against the PHP that emits them — so NOTHING was
   deleted along with the block. The filename stays because
   the handle `m434-team-cards`, the per-block stylesheet map
   and the editor-styles list in inc/enqueue.php all name this
   path; a rename buys a tidier filename at the price of
   touching three maps in a file this change does not own.
   Read `team-cards` here as the name of the CARD, not of a
   block.

   Mobile-first per DECISIONS D3.
   ============================================================ */

.m434-team-head { margin-bottom: 28px; }

.m434-team-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 10px 0 0;
}

/* THE HAIRLINES ARE DRAWN BY THE CARDS, NOT BY THE CONTAINER.

   The obvious build — a --line background on the grid, showing through
   1px gaps — is what this used to be, and it has a failure the comps
   never exposed: an EMPTY CELL is not whitespace, it is the container
   background, so it paints as a solid gray block. That is fine while
   the card count is an exact multiple of the column count (six people
   in three columns, which is every instance the design was drawn from)
   and visibly broken the moment it is not. One staff member in a
   three-column grid rendered one card beside a gray slab two thirds of
   the page wide.

   Giving each card its own 1px ring removes the failure rather than
   enumerating it. Adjacent rings meet inside the 1px gap and overlap
   exactly, so a full row is identical to what the container painted;
   the outer edge is identical to the container's own ring; and a short
   last row simply ends after its last card. No quantity queries, no
   :has(), and nothing to keep in step as counts change.

   box-shadow-as-border is already this theme's border idiom — see the
   note at global.css:88 — so this is the house pattern, not a new one. */
.m434-hairgrid.m434-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}

.m434-hairgrid.m434-team-grid > .m434-member {
  box-shadow: 0 0 0 1px var(--line);
}

.m434-member {
  background: var(--white);
  padding: 26px 22px;
}

.m434-member-photo {
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--m434-rule-accent);
}

.m434-member-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit above center in a portrait crop, so a plain center
     object-position tends to cut foreheads. */
  object-position: 50% 25%;
}

.m434-member-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  color: var(--m434-accent-text);
}

.m434-member-name {
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

/* .m434-member is a light island (blocks.css), so both of these
   resolve to --m434-slate-strong — 7.56:1 on the card's white —
   whatever band the block is set to. The flat tokens they replace
   were #6b7280: 4.83:1 on white, but 3.13:1 on --navy and 1.81:1 on
   crimson had the island guard ever been missing. */
.m434-member-role {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--m434-muted-ink);
  margin: 6px 0 0;
}

.m434-member-org {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m434-muted-ink);
  margin: 4px 0 0;
}

/* .prose sets its own measure; inside a card the column is the measure. */
.m434-member-bio {
  margin-top: 14px;
  max-width: none;
  font-size: 14px;
  line-height: 1.65;
}

@media (min-width: 480px) {
  .m434-hairgrid.m434-team-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .m434-team-title { font-size: 34px; }
  .m434-staff-group-title { font-size: 24px; }
  .m434-hairgrid.m434-team-grid + .m434-staff-group-title { margin-top: 56px; }
  .m434-member { padding: 30px 26px; }
  .m434-member-photo { width: 112px; height: 112px; }
}

@media (min-width: 1024px) {
  .m434-team-title { font-size: 40px; }
  .m434-hairgrid.m434-team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   WHAT A LINKED CARD ADDS, plus the two staff-only templates.

   Everything above is the card. Everything below is what a
   card whose person HAS a page of their own needs and the
   retired typed card never had — a linked name and a
   "Read more" link — followed by the /our-team/ archive
   header and the single-profile lockup.

   The split is worth keeping now that `team_cards` is gone
   (FB-028): above is the card, below is the surfaces around
   it. Nothing above was deleted with the block, because every
   rule up there is still worn by the staff card.

   Mobile-first, matching the file's existing breakpoints.
   ============================================================ */

/* The name is a link whenever get_permalink() returns one and plain
   text when it does not (parts/staff-card.php guards on exactly
   that), so this is an addition to .m434-member-name rather than a
   replacement of it — color and weight come from there either way.
   All this does is remove the global prose underline, since the
   whole line is already a heading and reads as a target. */
.m434-member-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}

.m434-member-name a:hover,
.m434-member-name a:focus-visible {
  color: var(--m434-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m434-member-more {
  margin: 12px 0 0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.m434-member-more a {
  color: var(--m434-accent-text);
  text-decoration: none;
  border-bottom: 0;
}

.m434-member-more a:hover,
.m434-member-more a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Read more" alone is useless in a screen reader's link list when a
   grid holds twelve of them, so the card appends the person's name
   and hides it visually. Scoped rather than declared as a global
   utility, for the reason global.css gives at its own copy of this
   block: .screen-reader-text is not this file's class to own. */
.m434-member-more__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- /our-team/ (archive-staff.php) ----------------------- */

/* archive.css caps .m434-archive-head at 44ch. That is right where it
   was written for — a header standing over a single column of posts,
   where a wide measure would leave the heading floating alone above a
   narrow list. It is wrong over a full-width 3-up grid: 44ch of the
   inherited body size is roughly a quarter of the wrap, so the heading
   and intro sat in the top-left corner with the grid running the full
   width beneath them.

   Released rather than overridden with a number, so this header simply
   uses the wrap the grid already uses. Scoped to .m434-staff-archive —
   the blog archive keeps its 44ch. */
.m434-staff-archive .m434-archive-head {
  max-width: none;
  margin-bottom: 28px;
}

/* THE INTRO CARRIES A SECOND, INDEPENDENT CAP, AND RELEASING ONLY
   THE HEADER'S LEAVES THE BUG HALF FIXED (FB-024: "staff listing
   intro doesn't fill the full width of the page").

   The rule above releases the SECTION cap on .m434-archive-head.
   The intro also wears `prose`, and global.css:1626 caps .prose at
   --m434-measure (760px) — the READING MEASURE, a different system
   with a different purpose, and nothing about widening the header
   touches it. Worse, .prose sets no margin-inline, so the copy does
   not even center in the space it was given: it strands flush-left
   at 760px inside a 1200px wrap, which is the reported symptom.

   Released rather than re-capped with a number, and this is the
   established pattern in this build, not a new one — see
   rich-text.css:39 (.m434-rt--single .prose) and .m434-member-bio
   above, both of which uncap .prose the moment its container is the
   measure. Here the container is the archive wrap. Scoped to
   .m434-staff-archive: the unscoped .m434-archive-intro in
   archive.css keeps the blog archive's narrow reading measure under
   its deliberate 44ch header, per the note above. */
.m434-staff-archive .m434-archive-intro {
  margin-top: 14px;
  max-width: none;
}

/* ---- Category group headings ------------------------------ */

/* Emitted by m434_staff_grid() when grouping is on, once per category,
   directly above that category's own grid. The rule underneath is the
   divider between sections; the grid's own hairline ring sits below it,
   so the two must not double up — hence padding rather than a bottom
   border on the title, and no rule on the first group, whose separator
   is the page header above it. */
.m434-staff-group-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--m434-accent-text);
}

/* Space between one group's grid and the next group's heading. The
   sibling selector puts the gap on the HEADING that follows a grid, so
   the last grid on the page has nothing hanging off it. */
.m434-hairgrid.m434-team-grid + .m434-staff-group-title { margin-top: 44px; }

/* ---- /our-team/<slug>/ (single-staff.php) ------------------ */

.m434-staff-lockup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 14px 0 28px;
}

.m434-staff-portrait {
  width: 140px;
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--m434-rule-accent);
}

.m434-staff-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  /* Same crop bias as the card: a centered portrait cuts foreheads. */
  object-position: 50% 25%;
}

.m434-staff-ident h1 { margin: 0; }

/* The role and organization lines are the card's, reused verbatim so
   the profile and the card agree; only the scale steps up. */
.m434-staff-ident .m434-member-role { font-size: 15px; margin-top: 8px; }
.m434-staff-ident .m434-member-org { font-size: 12px; }

.m434-staff-linkedin {
  margin: 12px 0 0;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
}

.m434-staff-linkedin a { color: var(--m434-accent-text); }

.m434-staff-back { margin-top: 32px; }

@media (min-width: 700px) {
  /* Portrait beside the name rather than above it. align-items start
     so a one-line name does not center against a tall photo. */
  .m434-staff-lockup {
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
  }

  .m434-staff-portrait {
    flex: 0 0 220px;
    width: 220px;
  }

  .m434-staff-ident { flex: 1 1 auto; }
}