/* =============================================
   Easterseals Arkansas - Staff
   Profile pages at /about-us/people/<slug>/ and the
   three group index grids under /about-us/people/.
   Builds on css/base.css and css/site.css using
   brand tokens only.
   Signature pattern: circular headshot crops.
   ============================================= */

/* ---------- Shared: circular headshot cards ---------- */
.staff-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.staff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 22px 28px;
  transition: box-shadow 0.3s, transform 0.3s;
}
.staff-card:hover {
  box-shadow: 0 12px 34px rgba(0, 68, 115, 0.14);
  transform: translateY(-4px);
}
.staff-card-photo {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--color-white);
  box-shadow: 0 10px 26px rgba(0, 68, 115, 0.16);
  margin-bottom: 20px;
  background: var(--eas-pale-yellow);
}
.staff-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Headshots are 2:3 portraits (900x1350, card thumbs 300x450). Centered,
     the square circle trims top and bottom equally and cuts off the crown;
     15% from the top keeps the whole head and the shoulders. */
  object-position: 50% 15%;
}
.staff-card-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-secondary);
}
.staff-card-name {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1.25;
  margin-bottom: 6px;
}
.staff-card-title {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.5;
}

/* ---------- Group index filter bar (js/people-filter.js) ---------- */
/* Tokens and control sizing match .careers-toolbar in css/careers.css so the
   two filter UIs on this site look like one pattern. The facet is checkboxes
   rather than the <select> careers uses: it is multi-select, and national's own
   people facet is checkboxes with counts.
   LAYOUT (iprov-agency/eas-easterseals#164 review, Jen): one row, the search
   and the stacked group checkboxes on the left, the result count at the
   bottom right, and a rule under the whole bar. The toolbar takes the free
   width (flex 1 1 0) and wraps the facet under the search when the row is
   too narrow; the row itself wraps only for the empty state, which takes a
   full line of its own (.people-empty below). */
.people-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.people-toolbar {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
}
.people-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.people-field-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--color-text-light);
  padding: 0;
}
.people-search {
  min-width: 350px;
  padding: 11px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 1rem;
  font-family: var(--font-base);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.people-search::placeholder { color: var(--color-text-light); }
/* CORRECTION (2026-10-01): the note that used to sit here claimed this
   box-shadow was a ring "in the same orange (5.9:1 on white)". That cited
   the raw swatch, not what renders. Composited at 0.28 alpha over white the
   halo is rgb(242, 205, 185) and measures 1.48:1, so it was never a focus
   indicator. It is kept as decoration; the outline below is the indicator. */
.people-search:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(207, 75, 4, 0.28);
}
.people-search:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.people-facet {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  border: 0;
}
.people-facet-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-body);
  cursor: pointer;
}
/* The native checkbox ring is never suppressed here. It is replaced with the
   kit ring so the filter checkboxes match the search field beside them. */
.people-facet-input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.people-facet-input:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.people-count {
  align-self: flex-end;
  margin-left: auto;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.people-empty {
  flex: 0 0 100%;
  margin-top: 8px;
  padding: 40px 24px;
  text-align: center;
  background: var(--color-light);
  border-radius: var(--radius);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-body);
}
/* .staff-card sets display:flex and .staff-group is a plain div, both of which
   outrank the [hidden] UA rule, so the filter cannot hide anything without
   these. Same defect and same fix as .blog-grid .blog-card[hidden] in
   css/blog.css. */
.staff-card-grid .staff-card[hidden],
.staff-group[hidden],
.people-filter .people-empty[hidden] { display: none !important; }

@media (max-width: 680px) {
  .people-toolbar { flex-basis: 100%; gap: 18px; }
  /* On its own line under the toolbar the count reads from the left, like
     the field labels above it (Jen). Desktop keeps it bottom right. */
  .people-count { margin-left: 0; }
  .people-search { min-width: 0; width: 100%; }
  .people-field { width: 100%; }
}

/* ---------- Leadership Team: grouped tiers ---------- */
.staff-group { margin-top: 56px; }
.staff-group:first-of-type { margin-top: 8px; }
.staff-group-head { margin-bottom: 28px; }
.staff-group-head h2 { color: var(--color-secondary); margin-bottom: 6px; }
.staff-group-head p {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.6;
  max-width: 640px;
}

/* ============================================================
   Profile page: 2026 Figma template (frame 107:1312)
   Builds on the shared kit in css/who-we-serve.css (breadcrumb bar,
   Related Articles band, navy .cta-banner). These rules add only the
   template-specific bio hero and info-card grid. Brand tokens only.
   ============================================================ */

/* ---------- Bio hero: photo left, orange name + role + bio right ---------- */
.staff-hero {
  padding: 48px 0 56px;
  background: var(--color-white);
}
.staff-hero-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.staff-hero--no-media .staff-hero-inner {
  grid-template-columns: 1fr;
  max-width: 760px;
}
/* No fixed aspect box (iprov-agency/eas-easterseals#325: "reframe. make sure we
   don't cut heads off."). This was `aspect-ratio: 4 / 5` with `object-fit:
   cover`, which cropped every photo whose shape did not match. Measured across
   the 37 distinct headshots: 31 are portrait near 2:3 and lost 16.6% vertically,
   and 6 are near square and lost 18 to 22% horizontally. The container now takes
   its height from the image's own intrinsic ratio, so nothing is cropped at any
   aspect, including photos added later. The generator emits the real width and
   height attributes so the browser still reserves the right space and there is
   no layout shift. */
.staff-hero-photo {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--eas-pale-yellow);
  box-shadow: 0 18px 44px rgba(0, 68, 115, 0.18);
  line-height: 0;
}
.staff-hero-photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* .staff-hero-side and .staff-hero-aside are GONE, with the lone info card they
   wrapped. They existed for iprov-agency/eas-easterseals#326 "weird blank space"
   and #327 "it's small and left aligned", whose real subject was a 368px card
   stranded in a 1152px three column band; the band is a full-width row list now,
   so a lone entry is a full-width row and there is nothing to rescue into the
   hero. Measured in Chromium across all 12 affected profiles: at 1280 the aside
   overshot the copy on every one of them, so taking it out shrinks the gap on
   all 12, leaving space under the photo on three (134px ron-ekstrand, 120px
   jillian-jacuzzi, 104px jeff-smith). At 900 it grows on 6 of the 12, worst
   478px on ron-ekstrand. Both readings sit inside the range the 35 untouched
   photo profiles already carry (-523 to +210 at 1280, -387 to +584 at 900), and
   nothing is added to fill it. The full table is in
   .specs/EAS-Bio-Info-Rows.md and the check is section 5 of
   .specs/verify-bio-rows.mjs. */

.staff-hero-name {
  color: var(--color-primary); /* orange #cf4b04 (5.9:1 on white) */
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 8px;
}
.staff-hero-role {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-secondary); /* navy */
  line-height: 1.4;
  margin: 0 0 22px;
}
.staff-hero-bio p {
  font-size: 1.0625rem;
  color: var(--color-text-body);
  line-height: 1.75;
  margin: 0 0 16px;
}
.staff-hero-bio p:last-child { margin-bottom: 0; }
.staff-hero-bio strong { color: var(--color-text); }
.staff-hero-bio a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s;
}
.staff-hero-bio a:hover { color: var(--color-primary-dark); }

/* ---------- Info rows (Contact / Program / Location) ----------
   Was a three column card grid of .staff-info-card. Retired by
   iprov-agency/eas-easterseals#352 ("Program and location cards should not look
   identical") and #353 ("we have a three column grid here ... the cards either
   need to expand to fill the full three columns, or we need a filler card").

   The label column answers #352: Program and Location are told apart BY
   POSITION, not by paint, so the distinction does not depend on telling two
   tints apart. A list answers #353 by having no last row to fill; 10 of the 16
   grids ended one ragged, at 2, 4, 5 or 8 cards.

   COLOUR. The pale-yellow card ground goes, which Casey accepted knowingly, and
   what survives is deliberately small: a 3px --color-accent #ffa300 rule down
   the left edge of every row, and the same --eas-pale-yellow on hover and on
   focus. The rule is decoration and measures 2.00:1 on white, so it is never
   the only thing marking a row boundary (the 1px --color-border separator is).
   Every text pair is measured by scripts/check-contrast.mjs's own matrix and
   clears 4.5:1 on BOTH grounds, white and the hover tint: navy #004473 10.12
   and 8.14, --color-text-body #4b5563 7.56 and 6.08. Brand orange is NOT used
   here: it is 3.62:1 on #ffe3b3 and fails for text, and a ratio measured on
   white does not transpose to the tint.

   NO text-transform ON THE LABEL. Chromium folds text-transform into the
   accessible name, so an uppercased label ships "PROGRAM" into the name of
   every row link. It is spaced and weighted instead, which reads as a label and
   leaves the name alone. */
.staff-info { padding: 8px 0 var(--section-spacing); }
.staff-info-rows { border-top: 1px solid var(--color-border); }
/* The whole row is the link, which is what the card was. Verified by clicking
   five points inside one at 1280, including the empty middle and both corners
   6px in; all five navigate to the row's href. */
.staff-info-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 8px 28px;
  align-items: start;
  padding: 22px 26px 22px 23px;
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  background: var(--color-white);
  transition: background-color 0.2s;
}
a.staff-info-row:hover { background: var(--eas-pale-yellow); }
/* Inset ring: rows are flush with each other, so a positive outline-offset
   would draw over the neighbouring row's separator. */
a.staff-info-row:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: -3px;
  background: var(--eas-pale-yellow);
}
.staff-info-row-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
  line-height: 1.6;
  padding-top: 2px;
}
/* minmax(0, 1fr) above and min-width here: without both, a long unbroken
   supporting line makes the grid column wider than its track and pushes the
   action column off the row. */
.staff-info-row-body { min-width: 0; }
.staff-info-row-title {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.35;
}
.staff-info-row-meta {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.6;
}
.staff-info-row-sep {
  padding: 0 7px;
  color: var(--color-text-body);
}
.staff-info-row-action {
  align-self: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
}
a.staff-info-row:hover .staff-info-row-action { text-decoration: underline; }
/* The Contact row is a div, not a link: it holds a mailto and a tel, and an
   anchor cannot nest in an anchor. It renders on 0 of the 65 profiles today,
   because every record's email and phone are empty strings, so these two rules
   are the whole of its styling and none of it has been seen in a browser. */
.staff-info-row--contact .staff-info-row-title { font-weight: 700; }
.staff-info-row--contact a {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* ---------- Profile closing bands (iprov-agency/eas-easterseals#179) ----------
   Every profile page (/about-us/people/<slug>/, 65 pages) ends with a light
   gray Related Articles band and a light yellow closing CTA: the cream of the
   Our History closing band, which sits better above the gold newsletter band
   than navy did. Both components are shared (33 other pages carry
   .related-articles on cream, 22 carry .cta-banner), so every rule here is
   scoped with `.staff-hero ~`: render_bio_hero() in scripts/generate_people.py
   writes section.staff-hero on every profile and on no other page, and both
   bands are its later siblings. This file loads only under /about-us/people/.
   Contrast on cream #ffe3b3: navy #004473 8.14:1, --color-text-body #4b5563
   6.08:1. The white outline-light button was built for navy and would vanish,
   so on cream it is a navy outline (label and border 8.14:1; navy fill with a
   white label on hover, 10.12:1). The orange "View the Program" button keeps
   its fill: white label 4.51:1, fill against cream 3.62:1 (non-text, 3:1).
   The gray band keeps its navy eyebrow (9.12:1) and orange heading (4.06:1,
   large text) on #f3f3f3; the cards stay white. */
.staff-hero ~ .related-articles { background: var(--color-light); }
.staff-hero ~ .cta-banner {
  background: var(--color-cream);
  color: var(--color-text-body);
}
.staff-hero ~ .cta-banner h2 { color: var(--color-secondary); }
.staff-hero ~ .cta-banner p {
  color: var(--color-text-body);
  opacity: 1;
}
.staff-hero ~ .cta-banner .btn-outline-light {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.staff-hero ~ .cta-banner .btn-outline-light:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* ---------- Join Our Team filler card (CD-230) ----------
   A .staff-card-grid must never end a row with an empty column, and the
   leadership page needs a careers CTA. One component does both. The card is
   always the LAST child of its grid, so its 1-based position is (cards + 1);
   that position modulo the column count gives the column it lands in, and the
   span is (columns - column + 1). When a group divides evenly the card starts a
   fresh row and spans the full width, so the CTA never disappears (a full-width
   row has no empty column either). Card counts change whenever staff join or
   leave and this needs no regeneration and no hand arithmetic.

   SPECIFICITY: these four are (0,3,0). The media blocks below MUST restate the
   same nth-child form and cover every integer position, because a plainer
   override such as `.staff-card-grid > .staff-join-card` is only (0,2,0) and
   would silently lose to these regardless of media-query order.

   COLOUR: navy on the pale-yellow tint. The brand orange --color-primary
   #cf4b04 measures 3.62:1 on #ffe3b3 and fails AA for normal text (same finding
   as the css/base.css:65 eyebrow note); --eas-blue #007cb1 is 3.74:1 and also
   fails. Navy #004473 is 8.14:1 and --color-text-body #4b5563 is 6.08:1. */
/* Since iprov-agency/eas-easterseals#165 only the Executive Leadership grid
   carries the tile; the page closes with its own careers CTA, so a second
   tile repeated it. The Program & Operational Leadership grid therefore ends
   with empty columns whenever its last row is short, which is the accepted
   cost. */
.staff-join-card {
  justify-content: center;
  gap: 10px;
  background: var(--eas-pale-yellow);
  border-color: transparent;
}
.staff-join-eyebrow {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-secondary);
}
.staff-join-title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-secondary);
}
/* 650px measure (iprov-agency/eas-easterseals#320, Jen), up from 550px
   (#165) and 46ch (460px here) before that. The tile centres its children, so
   the paragraph stays centred in the tile at every width; narrower tiles
   simply wrap sooner. */
.staff-join-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-body);
  max-width: 650px;
}
.staff-join-link {
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: underline;
}
.staff-card-grid > .staff-join-card:nth-child(4n + 1) { grid-column: span 4; }
.staff-card-grid > .staff-join-card:nth-child(4n + 2) { grid-column: span 3; }
.staff-card-grid > .staff-join-card:nth-child(4n + 3) { grid-column: span 2; }
.staff-card-grid > .staff-join-card:nth-child(4n)     { grid-column: span 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .staff-card-grid { grid-template-columns: repeat(3, 1fr); }
  .staff-card-grid > .staff-join-card:nth-child(3n + 1) { grid-column: span 3; }
  .staff-card-grid > .staff-join-card:nth-child(3n + 2) { grid-column: span 2; }
  .staff-card-grid > .staff-join-card:nth-child(3n)     { grid-column: span 1; }
}
@media (max-width: 820px) {
  .staff-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
    text-align: center;
  }
  .staff-hero-photo { order: -1; max-width: 320px; }
  .staff-hero-bio { text-align: left; }
}
@media (max-width: 680px) {
  .staff-card-grid { grid-template-columns: repeat(2, 1fr); }
  .staff-card { padding: 26px 16px 22px; }
  .staff-card-photo { width: 120px; height: 120px; }
  /* One column under 680px: a 140px label track plus a nowrap action column
     leaves too little for the supporting line, which wrapped to four lines at
     375px while the action sat alone on the right. */
  .staff-info-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 18px 18px 18px 15px;
  }
  .staff-info-row-label { padding-top: 0; }
  .staff-info-row-action { align-self: start; margin-top: 6px; }
  .staff-card-grid > .staff-join-card:nth-child(2n + 1) { grid-column: span 2; }
  .staff-card-grid > .staff-join-card:nth-child(2n)     { grid-column: span 1; }
}
@media (max-width: 400px) {
  .staff-card-grid { grid-template-columns: 1fr; }
  .staff-card-grid > .staff-join-card:nth-child(n) { grid-column: span 1; }
}