/* Members directory (Nhân Sự / Personale / Personnel) card redesign — issue #31.
 *
 * theme.css already carries the base UM (Ultimate Member) directory theming
 * under "UM (Ultimate Member) theming" (card chrome: white surface, subtle
 * border, radius-lg, shadow-sm, hover lift; the navy name band with order:-1
 * flex trick; the enlarged 128px photo). This file is the incremental
 * redesign on top of that, kept in its own file — mirroring header-fit.css
 * and footer-mobile.css — so theme.css is not touched while it is being
 * edited on another track, and so this card-specific pass can be reverted
 * on its own. Loaded AFTER avide-navy-theme (see inc/enqueue.php), so rules
 * below share theme.css's exact selector chains and win the cascade on tie
 * specificity rather than fighting it with !important.
 *
 * Two things theme.css did not yet do, which #31 asks for:
 *
 * 1. Photo OVERLAPPING the band, not sitting below it. theme.css enlarged
 *    the photo to 128px but placed it as a plain flex sibling under the
 *    band. Pulling it up with a negative top margin equal to half its own
 *    height (-64px) is the standard overlap technique: margin-top is what
 *    positions a flex item relative to the sibling before it, so the photo
 *    slides up by exactly half its box and its vertical center lands on
 *    whatever sits above it — the name band's bottom edge — regardless of
 *    the band's own height.
 *
 *    The band's bottom padding, not just its total height, is what has to
 *    clear the 64px overlap: the overlap eats into the band from its
 *    bottom edge upward, so anything less than 64px of clear navy below
 *    the name text there gets covered by the photo instead — tried first
 *    with a band padded 24px all round (~73px tall against a 64px
 *    overlap) and the photo covered the name almost completely (see the
 *    first "after" screenshot). Bottom padding is set well past 64px
 *    (80px) here so it stays clear of the overlap with room to spare no
 *    matter how the name wraps; the top padding stays compact since only
 *    the bottom needs to absorb the overlap.
 *
 * 2. "Extra fields" styling. UM's members-grid template
 *    (ultimate-member/templates/members-grid.php) can render a "tagline"
 *    line (a chosen profile field shown as a title/role right under the
 *    name — the closest thing UM has to a card subtitle) and a collapsible
 *    "userinfo" block of further reveal_fields
 *    (.um-member-meta-main > .um-member-more/.um-member-meta/.um-member-less,
 *    each field a .um-member-metaline, plus .um-member-connect for social
 *    links) when the directory FORM enables them. Verified against the live
 *    replica (`curl http://127.0.0.1:8091/vi/members/`, form hash b7sPQ):
 *    the seeded "Members" form (post 81) ships with both OFF, so the
 *    compiled JS template has no tagline or userinfo markup at all today —
 *    turning them on is a UM admin-side settings change, not a code change,
 *    and out of scope here. These rules are written defensively (theme.css
 *    already has precedent for this, see its directory-header-search
 *    comment) so the fields render in the card's language the moment
 *    someone enables them, instead of in UM's unstyled default. Because
 *    "title if UM outputs one" cannot be told apart from any other tagline
 *    field by class name alone (UM only adds a per-key modifier class,
 *    .um-member-tagline-{key}), the tagline is styled as a bold role/title
 *    line directly under the photo rather than guessed into the band.
 */

/* ---- Name band: bottom padding grown past the 64px overlap so the
 * overlapping photo lands on clear navy, never on the name text. ---- */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-name {
  padding: var(--space-5, 20px) var(--space-4, 16px) 80px;
}

/* ---- Photo: pull up over the band's bottom edge by half its own height ---- */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-photo {
  padding: 0 0 var(--space-4, 16px) 0;
  margin-top: -64px; /* half of the 128px photo (theme.css) */
  position: relative;
  z-index: 2; /* paints over the band it now overlaps */
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-photo a img,
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member.with-cover .um-member-photo a img {
  border: 4px solid var(--surface-card, #fff);
  box-shadow: var(--shadow-sm);
}

/* ---- Tagline: styled as the card's role/title line, right under the
 * photo — bolder and darker than theme.css's plain muted-caption version,
 * since it is now the closest thing to the "title in the band" the brief
 * asks for when UM has one configured. ---- */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline {
  color: var(--text-heading, #283350);
  font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.5 var(--font-sans);
  text-align: center;
  padding: 0 var(--space-4, 16px);
  margin: 0 0 var(--space-2, 8px) 0;
}

/* ---- Extra fields (UM's "userinfo" reveal block): unstyled by theme.css
 * today because the live form has it switched off; styled here so it reads
 * as part of the same card, not UM's stock look, the moment it is turned
 * on. ---- */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-meta-main {
  margin-top: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
  border-top: 1px solid var(--border-subtle, #E1E4E8);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-metaline {
  font: var(--type-body-sm, 400 14px/1.5 var(--font-sans));
  color: var(--text-body, #3D4048);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-metaline strong {
  color: var(--text-heading, #283350);
  font-weight: var(--weight-semibold, 600);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-more,
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-less {
  text-align: center;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-more a,
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-less a {
  color: var(--text-link, #A52610);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-connect {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
}

/* ---- Breakpoints: not touched here, and the overlap above does not
 * depend on card width either way, but a live check at 1280px and 640px
 * (Playwright, replica) surfaced a PRE-EXISTING quirk worth recording
 * rather than silently working around: theme.css's own @media(max-width:
 * 640px) rule for .um-member never actually reaches 1-up at 640px
 * viewport width. UM's own um-members.min.css enqueues AFTER theme.css
 * (see the <link> order in wp_head) and carries its OWN container-width
 * breakpoints as JS-added classes on .um-directory (uimob340/500/800/960,
 * measured off the directory's own rendered width, not the viewport).
 * .um-directory.uimob800 …um-members.um-members-grid .um-member {width:48%}
 * ties theme.css's chain on class-count specificity (6 vs 6) and, loading
 * later in the document, wins outright — so the grid actually sits at
 * UM's own ~2-up tier through the width range where theme.css intended
 * 1-up. Cards do not visibly break (verified: no horizontal overflow, no
 * clipped photo/overlap at 640px — see 31-members-after-640.png), so per
 * the brief this is left alone rather than patched here; a real fix
 * belongs in theme.css's own rule (raising its specificity or matching
 * UM's uimobNNN selector shape), not in this file. */