/* ── ita_people_cards ───────────────────────────────────────────────
   Rounded-square headshot + name + role, left-aligned. v2 design
   system (source material/ITA-DESIGN-SYSTEM-v2.md §6): squared corner
   ties to the logo's own square shape instead of a generic avatar-
   circle; left alignment matches every other block on the site — see
   the "why do you keep centering content" correction already applied
   to this block's header earlier. Tokens only. */

/* Inline emphasis in the intro paragraph — matches the ita_stripe_cards
   .sc-headline treatment (display font, bold) instead of the browser
   default bold-in-body-font <strong>. */
.block-ita_people_cards .lead strong {
  font-family: var(--font-display); font-weight: 700;
}

.block-ita_people_cards .pc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}

.block-ita_people_cards .pc-photo {
  display: flex; flex-direction: column;
  width: 100%; aspect-ratio: 1 / 1; border-radius: 27px; overflow: hidden;
  margin: 0 0 32px; background: var(--color-surface);
  transition: transform .2s ease;
}
.block-ita_people_cards .pc-card:hover .pc-photo { transform: scale(1.04); }
/* object-position: top — headshots frame the face near the top of the
   source photo, so a centered crop (the object-fit: cover default)
   was cutting off the top of the head. */
.block-ita_people_cards .pc-photo img {
  flex: 1 1 auto; min-height: 0; width: 100%;
  object-fit: cover; object-position: top center; display: block;
  filter: grayscale(1);
}

/* Top 15% color band, cycling the brand's gold/red/teal, 3-up — same
   round-robin pattern used for the category-card icon tints and the
   Recognition feature-list borders. A flex item stacked directly above
   the photo (not an overlay on top of it) so there's no gap and no
   overlap between the band and the face — the two occupy strictly
   adjacent, non-overlapping bands of the same square box. */
.block-ita_people_cards .pc-photo::before {
  content: ""; flex: 0 0 15%; display: block;
}
.block-ita_people_cards .pc-card:nth-child(3n+1) .pc-photo::before { background: var(--color-accent-2); }
.block-ita_people_cards .pc-card:nth-child(3n+2) .pc-photo::before { background: var(--color-accent); }
.block-ita_people_cards .pc-card:nth-child(3n+3) .pc-photo::before { background: var(--color-accent-3); }

.block-ita_people_cards .pc-photo--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
}
.block-ita_people_cards .pc-photo-hint { display: none; }
body.cms-edit .block-ita_people_cards .pc-photo--empty {
  border: 1.5px dashed var(--color-border); cursor: pointer;
}
body.cms-edit .block-ita_people_cards .pc-photo--empty:hover {
  border-color: var(--color-accent); background: var(--color-bg);
}
body.cms-edit .block-ita_people_cards .pc-photo-hint {
  display: block; font-size: 9px; font-weight: 700; color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; padding: 0 8px;
}

.block-ita_people_cards .pc-name {
  font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-bottom: 4px;
}
.block-ita_people_cards .pc-role { font-size: 16px; color: var(--color-fg-muted); margin: 6px 0 0; line-height: 1.4; }

@media (max-width: 900px) {
  .block-ita_people_cards .pc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .block-ita_people_cards .pc-grid { grid-template-columns: repeat(2, 1fr); }
}