/* people block.
   The card face, the list row and the name/role/summary treatment all come from
   css/components/card.css (.people-cards, .people-cards-list). This file is the
   delta that shared sheet cannot own: the display_style column counts.

   Before this, only `list` was mapped. `tiles`, `tiles-reduced`, `list-image`
   and `list-full` fell through to the base .row-cards grid, which sets no
   columns, so all four rendered as one stacked column.

   tiles-reduced extracted from sites/dc/dc-child/style.css L8527-8538 (2-up from
   40em, 5-up from 64em), re-expressed in this theme's max-width convention.
   FLAG: `tiles` had no rule in any source theme and none in design-export.
   Three across is a reading of the field label ("Tiles", the fuller variant of
   "Reduced Tiles" at five). Revisit if that is wrong.
   No literal colour, every value a token. */

.people-cards-tiles { grid-template-columns: repeat(3, 1fr); }
.people-cards-tiles-reduced { grid-template-columns: repeat(5, 1fr); }

/* The two list variants are rows, like .people-cards-list. The row treatment
   itself lives in components/card.css alongside it; this is only the column. */
.people-cards-list-image,
.people-cards-list-full { grid-template-columns: 100%; }

/* Image sizing. card.css sizes `.card-image`, but this block emits a BARE <img>
   (and an inline SVG placeholder) straight inside .card — no wrapper — so none
   of that applied. Unsized, the image became a greedy flex item on the list
   rows: it ballooned, stretched to the row height (cropping faces), and
   squeezed the name column so hard that names and roles wrapped one word per
   line. Size the real elements instead. */
.people-cards-list > .card > img,
.people-cards-list-image > .card > img,
.people-cards-list-full > .card > img,
.people-cards-list > .card > .person-photo-placeholder,
.people-cards-list-image > .card > .person-photo-placeholder,
.people-cards-list-full > .card > .person-photo-placeholder {
  /* !important is required, not lazy: the Smush plugin injects an inline
     `.lazyload { width: var(--smush-placeholder-width) !important }` (with a
     per-image --smush-placeholder-width) that otherwise pins every photo to its
     natural width and beats even a higher-specificity rule. */
  flex: 0 0 124px;
  width: 124px !important; height: 124px !important;
  object-fit: cover;
  object-position: center top;   /* keep heads in frame */
  align-self: flex-start;
  margin: 1.2rem 0 1.2rem 1.2rem;
  border-radius: var(--radius-sm);
}
/* Give the name column a sane share so it stops wrapping a word per line. */
.people-cards-list > .card .card-name,
.people-cards-list-image > .card .card-name,
.people-cards-list-full > .card .card-name { flex: 0 1 15rem; min-width: 0; }
.people-cards-list > .card .card-section,
.people-cards-list-image > .card .card-section,
.people-cards-list-full > .card .card-section { flex: 1 1 0; min-width: 0; }

/* Tile variants: square, full-bleed across the card. */
.people-cards-tiles > .card > img,
.people-cards-tiles-reduced > .card > img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top;
}

/* The profile link is a supporting action here, not a hero CTA. */
.people-cards .card-info .cta,
.people-cards .card-info .btn { font-size: var(--fs-min); padding: .5rem 1rem; }

@media (max-width: 64em) {
  .people-cards-tiles,
  .people-cards-tiles-reduced { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .people-cards-list > .card,
  .people-cards-list-image > .card,
  .people-cards-list-full > .card { flex-direction: column; }
  .people-cards-list > .card > img,
  .people-cards-list-image > .card > img,
  .people-cards-list-full > .card > img { margin: 1.2rem 0 0 1.2rem; }
}
@media (max-width: 40em) {
  .people-cards-tiles,
  .people-cards-tiles-reduced { grid-template-columns: 1fr; }
}