/* =========================================================================
   Soouo · editorial team / masthead (frontend/pages/editorialMasthead.tpl)
   Core vars kept exactly: $mastheadRoles, $mastheadUsers, $reviewers,
   $orcidIcon. Only the .user_listing markup is restyled into cards.
   ========================================================================= */

.page_masthead h2 {
  margin-top: 44px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--soouo-border);
}
.page_masthead h2:first-of-type { margin-top: 30px; }

.page_masthead ul.user_listing {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: 16px;
}
.page_masthead ul.user_listing > li {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border: 1px solid var(--soouo-border); border-radius: var(--soouo-radius-lg);
  background: var(--soouo-surface); box-shadow: var(--soouo-shadow-sm);
  transition: transform var(--soouo-dur) var(--soouo-ease), box-shadow var(--soouo-dur) var(--soouo-ease);
}
.page_masthead ul.user_listing > li:hover { transform: translateY(calc(-3px * var(--soouo-motion))); box-shadow: var(--soouo-shadow); }

/* js/team-cards.js stamps this avatar in front of .name using the
   person's initials — pure presentation, no data invented. */
.page_masthead .soouo-avatar { margin-bottom: 2px; }

.page_masthead .name {
  display: block; font-family: var(--soouo-font-heading); font-weight: 700;
  font-size: 15.5px; color: var(--soouo-text); line-height: 1.35;
}
.page_masthead .name .orcid { margin-left: 6px; display: inline-flex; vertical-align: middle; }
.page_masthead .name .orcid img, .page_masthead .name .orcid svg { width: 16px; height: 16px; }
.page_masthead .affiliation { font-size: 13px; color: var(--soouo-text-3); }
.page_masthead .date_start { font-size: 11px; color: var(--soouo-text-3); text-transform: uppercase; letter-spacing: .04em; }

.page_masthead > p { max-width: 60rem; color: var(--soouo-text-2); }
