/**
 * People page styles
 *
 * Card grid + search/institution/role filter for the generated People page
 * (hooks/generated_components.py, docs/assets/javascripts/people-filter.js),
 * matching the DataverseNO brand tokens defined in extra.css / dataverseno.css.
 *
 * Components
 * ----------
 * - .people-filter          Search + institution + role filter container
 * - .people-filter__search  Search input wrapper (#people-search)
 * - .people-filter__boxes   Institution select + role filter buttons
 * - .people-filter-box      Role toggle button, [aria-pressed="true"] = active
 * - .people-institution-select  Multi-select institution filter
 * - .people-results-summary Live result count (aria-live="polite")
 * - .people-group           One institution's heading + card grid; hidden via
 *                            [hidden] by people-filter.js when it has no
 *                            visible cards left
 * - .people-group__heading  Institution name, shown once per group instead
 *                            of repeated on every card
 * - .people-card-grid       Grid of .people-card elements, one per .people-group
 * - .people-card            Person card, hidden via the native [hidden] attribute
 * - .people-empty-state     Shown when no cards match the current filters
 */

.people-filter {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 32rem;
  margin: 1rem 0;
}

.people-filter label {
  font-size: 0.8rem;
  font-weight: bold;
}

.people-filter__search input[type='search'] {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--dvno-grey);
  border-radius: 6px;
  font-size: 0.9rem;
}

.people-filter__search input[type='search']:focus-visible,
.people-institution-select:focus-visible,
.people-filter-box:focus-visible {
  outline: 2px solid var(--dvno-orange);
  outline-offset: 2px;
}

.people-filter__boxes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.people-institution-select {
  padding: 0.4rem;
  border: 1px solid var(--dvno-grey);
  border-radius: 6px;
  min-width: 12rem;
}

.people-filter-box {
  padding: 0.35rem 0.8rem;
  border: 2px solid var(--dvno-orange);
  border-radius: 999px;
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
}

.people-filter-box[aria-pressed='true'] {
  background: var(--dvno-orange);
  color: #fff;
  font-weight: bold;
}

.people-results-summary {
  font-size: 0.85rem;
  opacity: 0.85;
}

.people-group {
  margin: 0 0 1.5rem;
}

.people-group__heading {
  margin: 0 0 0.8rem;
  padding: 0.5rem 0.9rem;
  background: var(--dvno-orange);
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
}

.people-card-grid {
  display: grid;
  /* Two columns per institution group, per the design mockup — grouping by
     institution (see .people-group above) already keeps each grid's cards
     to a handful, so a narrower column doesn't force the same heavy
     wrapping that a flat, ungrouped multi-column grid of all 82 people
     did. Explicit repeat(2, ...), not auto-fit/minmax: auto-fit's track
     count depends on how many tracks of at least the minmax floor *fit*,
     but grid items default to min-width:auto (their content's min-content
     size) same as flex items do — a card with a long unwrapped role/
     expertise line forced its track wider than the floor, so auto-fit
     kept computing "only 1 column fits" instead of actually wrapping that
     text within a 2nd column. min-width: 0 on .people-card (below)
     removes that floor so the explicit 2 columns can actually be used. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media screen and (max-width: 700px) {
  .people-card-grid {
    grid-template-columns: 1fr;
  }
}

/* people-filter.js hides non-matching cards by setting the [hidden]
   attribute, but `.people-card { display: flex }` below overrides the UA
   `[hidden] { display: none }` rule — without this a searched-away card
   stays on screen (e.g. searching one person still showed everyone else
   at the same institution). */
.people-card[hidden],
.people-group[hidden] {
  display: none;
}

.people-card {
  display: flex;
  min-width: 0;
  /* Centered, not the flex default (stretch -> sits at top): cards vary a
     lot in how much text they carry (expertise/profile-link are both
     conditional), so a top-pinned photo looks disconnected from the block
     once a card runs to several lines. */
  align-items: center;
  gap: 0.8rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--dvno-grey);
}

/* `.people-card__photo` alone loses the specificity tie against Material's
   own `.md-typeset img, .md-typeset svg, .md-typeset video { height: auto;
   max-width: 100% }` base rule (one class vs. one class + one element,
   Material wins regardless of stylesheet load order) — confirmed live:
   height:auto let the photo keep its source aspect ratio while width
   collapsed toward a fixed px value, and border-radius:50% turned that
   mismatched box into a stretched oval instead of a circle. Scoping under
   `.people-card` raises this to two classes so it wins outright.

   Fixed size, not a dynamic stretch-to-match-text-height (tried and
   reverted): deriving width from a stretched height via aspect-ratio
   creates a circular main-axis/cross-axis dependency that different
   browsers resolve differently once a card's text runs long or the
   viewport narrows — confirmed live as both a reverted-looking oval on one
   card and an overflowing, clipped circle on another, from the same CSS.

   128px: repeatedly reported as still too small at 80/96/112/104px even
   after other proportion fixes (grouping, capping expertise) landed —
   sized generously rather than against a calculated "ideal" this time. */
.people-card .people-card__photo,
.people-card .people-card__photo--initials {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  flex-shrink: 0;
}

.people-card .people-card__photo {
  object-fit: cover;
}

/* 66 of 82 people (80%) have no photo at all — those rows rendered as bare
   text with no circle, breaking the list's visual rhythm down the page.
   Same-size initials badge keeps every row consistent. */
.people-card .people-card__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dvno-grey);
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--dvno-orange);
}

.people-card__content {
  /* Caps how wide the text column gets on a short (1-2 line) card — the
     majority case — so it doesn't stretch to the full content width just
     because the grid item next to it does. */
  max-width: 30rem;
}

.people-card__name {
  margin: 0 0 0.2rem;
  /* A 128px photo (see .people-card__photo) leaves only ~195px for text in
     a 2-column layout — at 1rem this wrapped even 2-word names ("Rune
     Keisuke Kosaka") that read on one line in the design mockup. 0.875rem
     fits most real names (data/people.yml) on one line without needing to
     shrink the photo back down. */
  font-size: 0.875rem;
  font-weight: bold;
  /* Names with an institutional profile link picked up Material's default
     link color (orange); names without one (no profile_url in
     data/people.yml) fell through to the plain text color, so the same
     field read black in light mode / white in dark mode next to orange
     ones (raised live, issue #16). Orange is meant to signal "this is a
     profile link" — apply it to every name uniformly instead. */
  color: var(--dvno-orange);
}

.people-card__roles {
  margin: 0 0 0.2rem;
  /* Clearly smaller than .people-card__name (0.875rem): at 0.8125rem the
     two were close enough in size (and name's only other distinguishing
     trait was bold) that the name didn't read as the visual anchor of the
     card. Clearly bigger than .people-card__expertise (0.7rem): a
     DataverseNO role is the more load-bearing fact about a person on this
     page than their subject-expertise tags (raised live — the two read as
     equally weighted at the same size). */
  font-size: 0.75rem;
  opacity: 0.85;
}

.people-card__expertise {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  opacity: 0.85;
}

.people-card__expertise:last-child {
  margin-bottom: 0;
}

/* "+N more" toggle for expertise terms beyond _EXPERTISE_SHOWN_MAX
   (hooks/generated_components.py, wired up in people-filter.js). Plain
   button + hidden span rather than <details>: this markup sits inside
   .md-typeset content, where Material styles every <details> as a bordered
   admonition box, which didn't blend inline with the rest of the sentence
   (confirmed live). */
.people-card__expertise-toggle {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--dvno-orange);
  text-decoration: underline;
  cursor: pointer;
}

.people-card__expertise-rest[hidden] {
  display: none;
}

.people-empty-state {
  font-style: italic;
  opacity: 0.8;
}