/*
 * component-team.css — team family part 1: the SHARED member layer (photo/initials, reveal overlay with
 * adjustable desc styles, socials) + cards/rows/circles/masonry/staggers/mosaic/bento/feature-split.
 * apb-rx / apb-tm namespaces, tokens only, no !important. Interaction states are class/attr-driven
 * (data-team-reveal, data-team-desc) — never inline styles. Rendered by trait-apb-component-render-team*.php.
 */

/* ---- shared: head ---- */
.apb-tm-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.apb-tm-ey { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }
.apb-tm-h { font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: clamp(28px, 4.5vw, 42px); letter-spacing: -.02em; line-height: 1.05; margin: 8px 0 0; }
.apb-tm-lead { margin: 12px auto 0; font-size: 15px; line-height: 1.6; color: var(--apb-rx-dim); }
.apb-tm-narrow { max-width: 720px; margin: 0 auto; }
.apb-tm-narrow .apb-tm-head { text-align: left; margin: 0 0 28px; }

/* ---- shared: photo + initials fallback ---- */
.apb-tm-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apb-tm-ini { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--apb-rx-soft); color: var(--apb-rx-accent-text, var(--apb-rx-brand)); font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: 28px; }
.apb-tm-name { font-weight: 700; font-size: 15px; margin-top: 12px; }
.apb-tm-role { font-size: 13px; color: var(--apb-rx-dim); }
.apb-tm-role-in { color: var(--apb-rx-dim); font-weight: 400; }

/* ---- shared: the reveal overlay (bio + socials) ---- */
.apb-tm-ph, .apb-tm-tile, .apb-tm-circav, .apb-tfg-ph, .apb-tm-fsminiph, .apb-tm-waveph { position: relative; overflow: hidden; }
.apb-tm-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; opacity: 0; transition: opacity var(--apb-rx-t, .28s); }
/* reveal modes (wrapper attr) */
[data-team-reveal="hover"] .apb-tm-card:hover .apb-tm-ov, [data-team-reveal="hover"] .apb-tm-card:focus-within .apb-tm-ov,
[data-team-reveal="hover"] .apb-tm-tile:hover .apb-tm-ov, [data-team-reveal="hover"] .apb-tm-tile:focus-within .apb-tm-ov,
[data-team-reveal="hover"] .apb-tm-circ:hover .apb-tm-ov, [data-team-reveal="hover"] .apb-tm-circ:focus-within .apb-tm-ov,
[data-team-reveal="hover"] .apb-tfg-m:hover .apb-tm-ov, [data-team-reveal="hover"] .apb-tfg-m:focus-within .apb-tm-ov,
[data-team-reveal="hover"] .apb-tm-fsmini:hover .apb-tm-ov, [data-team-reveal="hover"] .apb-tm-fsmini:focus-within .apb-tm-ov,
[data-team-reveal="hover"] .apb-tm-wavec:hover .apb-tm-ov, [data-team-reveal="hover"] .apb-tm-wavec:focus-within .apb-tm-ov,
[data-team-reveal="hover"] .apb-tm-slc:hover .apb-tm-ov, [data-team-reveal="hover"] .apb-tm-slc:focus-within .apb-tm-ov,
[data-team-reveal="always"] .apb-tm-ov { opacity: 1; }
[data-team-reveal="none"] .apb-tm-ov { display: none; }
@media (hover: none) { [data-team-reveal="hover"] .apb-tm-ov { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .apb-tm-ov { transition: none; } }
/* desc styles (wrapper attr) */
[data-team-desc="scrim"] .apb-tm-ov { background: linear-gradient(to top, var(--apb-rx-scrim, rgba(0,0,0,.82)), transparent 70%); color: #fff; }
[data-team-desc="brand"] .apb-tm-ov { background: linear-gradient(to top, var(--apb-rx-brand), transparent 72%); color: var(--apb-rx-accent-contrast, #fff); }
[data-team-desc="solid"] .apb-tm-ov { inset: auto 10px 10px 10px; border-radius: calc(var(--apb-rx-radius) * .7); background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); padding: 12px 14px; }
[data-team-desc="frosted"] .apb-tm-ov { inset: auto 10px 10px 10px; border-radius: calc(var(--apb-rx-radius) * .7); background: color-mix(in srgb, var(--apb-rx-surface) 80%, transparent); color: var(--apb-rx-ink); padding: 12px 14px; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
[data-team-desc="frosted"] .apb-tm-ov-bio { color: var(--apb-rx-dim); }
.apb-tm-ov-name { font-weight: 800; font-size: 15px; }
.apb-tm-ov-role { font-size: 12px; opacity: .85; }
.apb-tm-ov-bio { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.apb-tm-soc { display: flex; gap: 10px; margin-top: 10px; color: var(--apb-rx-dim); }
.apb-tm-soc a { color: inherit; display: inline-flex; }
.apb-tm-soc--light { color: currentColor; }
[data-team-desc="frosted"] .apb-tm-soc--light { color: var(--apb-rx-dim); }

/* ---- always-on name/role label (overlay tiles) ---- */
.apb-tm-lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(to top, rgba(0,0,0,.66), transparent); color: #fff; pointer-events: none; }
.apb-tm-lbl-name { font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: 16px; }
.apb-tm-lbl-role { font-size: 12px; opacity: .85; }
.apb-tm-tile .apb-tm-ov { z-index: 1; }

/* ---- 1 cards ---- */
.apb-tm-grid { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 4), 1fr); gap: 20px; }
.apb-tm-card { text-align: center; }
.apb-tm-ph { border-radius: calc(var(--apb-rx-radius) * 1.2); aspect-ratio: 1; background: var(--apb-rx-soft); }
.apb-tm-ph--45 { aspect-ratio: 4/5; }

/* ---- 2 rows ---- */
.apb-tm-rowlist { display: flex; flex-direction: column; }
.apb-tm-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--apb-rx-line); }
.apb-tm-row:last-child { border-bottom: 0; }
.apb-tm-rowav { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--apb-rx-soft); }
.apb-tm-rowinfo { flex: 1; min-width: 0; }
.apb-tm-rowinfo .apb-tm-name { margin-top: 0; }
.apb-tm-rowbio { font-size: 13px; color: var(--apb-rx-dim); margin-top: 2px; }
.apb-tm-row .apb-tm-soc { margin-top: 0; flex: none; }

/* ---- 3 circles ---- */
.apb-tm-circgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 24px 16px; max-width: 900px; margin: 0 auto; }
.apb-tm-circ { text-align: center; }
.apb-tm-circav { width: 80px; height: 80px; border-radius: 50%; background: var(--apb-rx-soft); margin: 0 auto; }
.apb-tm-circ .apb-tm-name { font-size: 13px; margin-top: 9px; }
.apb-tm-circ .apb-tm-role { font-size: 11px; }
.apb-tm-circ .apb-tm-ov { padding: 8px; font-size: 10px; }
.apb-tm-circ-more { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--apb-rx-accent-text, var(--apb-rx-brand)); }

/* ---- 4 masonry ---- */
.apb-tm-mascols { column-count: 3; column-gap: 16px; max-width: 1000px; margin: 0 auto; }
.apb-tm-mascard { break-inside: avoid; margin-bottom: 16px; background: var(--apb-rx-surface); border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * 1.1); overflow: hidden; }
.apb-tm-masph { aspect-ratio: 1; background: var(--apb-rx-soft); }
.apb-tm-masph.tall { aspect-ratio: 3/4; }
.apb-tm-masbody { padding: 14px; }
.apb-tm-masbody .apb-tm-name { margin-top: 0; }
.apb-tm-masbio { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--apb-rx-dim); }

/* ---- 5 staggered ---- */
.apb-tm-stggrid { display: grid; grid-template-columns: repeat(var(--apb-rx-cols, 4), 1fr); gap: 20px; align-items: start; }
.apb-tm-stgc.down { margin-top: 40px; }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .apb-tm-grid, .apb-tm-stggrid { grid-template-columns: repeat(2, 1fr); }
  .apb-tm-stgc.down { margin-top: 0; }
  .apb-tm-mascols { column-count: 2; }
}
@media (max-width: 480px) { .apb-tm-mascols { column-count: 1; } }