/* =========================================================
   FON Team — cards and the single member page.

   Only what the design system does not already provide. The cards reuse
   .article-grid / .article-card / .article-thumb, so hover, border, radius and
   the responsive breakpoints all come from fon-styles.css. What is team-specific
   is the portrait crop and the focal point.
   ========================================================= */

/* ---------- Cards ---------- */

/*
 * Headshots are portraits; the stock .article-thumb is 16/10, which decapitates
 * them. 4/5 keeps a head-and-shoulders crop readable at every column count.
 */
.fon-team-thumb { aspect-ratio: 4 / 5; background: var(--cream, #f6f2e9); }
.fon-team-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Fallback tile when a member has no headshot yet. */
.fon-team-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 3.5rem; color: var(--gold-500, #b4933f);
  background: var(--navy-700, #101a33);
}

.fon-team-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .35rem; }
.fon-team-body .eyebrow { font-size: .66rem; letter-spacing: .2em; }
.fon-team-body h3 { margin: 0; font-size: 1.18rem; line-height: 1.25; }
.fon-team-more {
  margin-top: .5rem; font-family: var(--font-sans);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-600, #97742f);
}
.fon-team-card:hover .fon-team-more { color: var(--royal-600, #24408e); }

/* The shortcode's column override. The base .article-grid is 3-up and already
   collapses at 960px and 600px, so only the non-default counts need stating. */
@media (min-width: 961px) {
  .fon-team-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .fon-team-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Single member page ---------- */

.fon-team-single { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 860px) { .fon-team-single { grid-template-columns: 1fr; gap: 2rem; } }

.fon-team-photo {
  border-radius: var(--radius-lg, 14px); overflow: hidden;
  border: 1px solid var(--line, #e6e1d5); background: var(--cream, #f6f2e9);
  aspect-ratio: 4 / 5;
}
.fon-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .fon-team-photo { max-width: 300px; } }

.fon-team-meta { margin-top: 1.1rem; font-family: var(--font-sans); font-size: .88rem; color: var(--ink-2, #4a4f5e); }
.fon-team-meta div + div { margin-top: .3rem; }

/* Social row — links only, no email or phone. Those get scraped. */
.fon-team-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.fon-team-social a {
  display: inline-block; padding: .42rem .85rem;
  border: 1px solid var(--line, #e6e1d5); border-radius: 999px;
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; color: var(--ink-2, #4a4f5e);
  transition: all .25s var(--ease, ease);
}
.fon-team-social a:hover {
  border-color: var(--gold-500, #b4933f);
  color: var(--gold-600, #97742f);
  transform: translateY(-1px);
}

.fon-team-bio > p:first-child { margin-top: 0; }

/* Byline feed, shown only when a member is linked to a WordPress user. */
.fon-team-articles { margin-top: 3rem; }
.fon-team-articles .section-head-row { margin-bottom: 1.5rem; }