/* ==========================================================================
   People — the artistic staff row on About Us.

   The markup is Kadence Blocks (a Row Layout of three columns), authored in
   the page so staff can edit it in the block editor. This file only makes the
   three land consistently; it deliberately sets no layout the row itself owns,
   so changing the column count or gutters in the editor still works.
   ========================================================================== */

/* The three headshots are 967x1024, 730x730 and 683x1024 — ratios of 0.94,
   1.00 and 0.67. Dropped in at their own proportions they read as three
   different kinds of photograph rather than one set of colleagues, and the
   names sit at three different heights. A square crop is the only thing all
   three can share without re-shooting: object-position keeps the crop at the
   top, because on a portrait headshot the middle of the frame is a chest. */
.gsjc-people .gsjc-person__photo {
  margin: 0 0 var(--gsjc-space-md);
}

.gsjc-people .gsjc-person__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  background: var(--gsjc-surface-alt);   /* while it decodes */
}

/* --- Name ----------------------------------------------------------------
   Two classes. Kadence sets heading margins inside content with a two-part
   selector, and a single class loses to it silently — the trap that has
   already cost this theme four bugs. dev/audit-specificity.py enforces it. */
.gsjc-people .gsjc-person__name {
  margin: 0 0 var(--gsjc-space-3xs);
  font-size: var(--gsjc-fs-h4);
  font-weight: var(--gsjc-weight-bold);   /* the trustees' weight, further down the page */
  line-height: var(--gsjc-lh-head);
}

.gsjc-people .gsjc-person__name a {
  color: var(--gsjc-primary);       /* 10.93:1 on white */
  text-decoration: none;
}

.gsjc-people .gsjc-person__name a:hover,
.gsjc-people .gsjc-person__name a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Sentence case at body size, per the About Us mockup — "Artistic Director",
   not "ARTISTIC DIRECTOR". It was uppercase and letterspaced to echo the season
   cards' ensemble line; the mockup sets these the same way it sets the trustee
   roles further down the page, so the two lists on this page now read as one
   system rather than the team borrowing the home page's. */
.gsjc-people .gsjc-person__role {
  margin: 0;
  font-size: var(--gsjc-fs-body);
  color: var(--gsjc-ink-muted);     /* 7.73:1 on white */
}

/* The photograph carries no link. It would point at the same page as the name
   directly beneath it, which is two tab stops and two announcements for one
   destination — the same reasoning that takes the season card's artwork out of
   the tab order. The name is the link. */

/* ==========================================================================
   The Person page's bio — two columns the browser balances.
   ========================================================================== */

/* CSS columns rather than a Columns block: the editor writes one continuous
   bio, the browser splits it, and the split moves as the text is edited
   instead of being a hand-placed break that goes stale. An image block set
   to align left floats inside whichever column it lands in and the text
   wraps around it — the designer's sketch. */
.gsjc-person__bio {
  padding-block: var(--gsjc-space-xl) var(--gsjc-space-3xl);
  column-count: 2;
  column-gap: var(--gsjc-space-2xl);
  orphans: 2;
  widows: 2;
}

/* A heading at the foot of a column, or a picture cut in two, reads as a
   mistake. Paragraphs may break: that is what a column flow is. */
.gsjc-person__bio h2,
.gsjc-person__bio h3,
.gsjc-person__bio figure,
.gsjc-person__bio .wp-block-image {
  break-inside: avoid;
}

/* The first line of the bio starts level with the top of the flow. Kadence
   gives paragraphs in content a top margin; three parts to beat its two. */
.gsjc-person__bio.entry-content > :first-child {
  margin-top: 0;
}

@media (max-width: 767px) {
  .gsjc-person__bio {
    column-count: 1;
  }
}