/* Template sections: Team variants (template-sections/team.html). V1 is the about page team (css/pages/about.css).
   Portraits use the shared .ts-face crop in library.css. */
.ts-team p { color: var(--text-medium); }
:where(.ts-team) :where(ol, ul) { padding: 0; list-style: none; }
.ts-team__social { display: flex; gap: var(--space-1); }
.ts-team__social a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-low); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ts-team__social .ts-svg { width: 16px; height: 16px; }
@media (hover: hover) { .ts-team__social a:hover { background: var(--base-medium); color: var(--text-strong); } }

/* V2 circle grid */
.ts-team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-4); text-align: center; }
.ts-team__grid li { display: grid; justify-items: center; gap: var(--space-1); }
.ts-team__grid .ts-face { --face: 96px; margin-bottom: var(--space-3); transition: translate var(--dur-slow) var(--ease-out); }
.ts-team__grid .ts-team__social { margin-top: var(--space-2); }
@media (hover: hover) { .ts-team__grid li:hover .ts-face { translate: 0 -4px; } }
@media (min-width: 768px) { .ts-team__grid { grid-template-columns: repeat(4, 1fr); } .ts-team__grid .ts-face { --face: 120px; } }

/* V3 compact list */
.ts-team__listwrap { display: grid; gap: var(--space-10); }
.ts-team__intro { display: grid; justify-items: start; align-content: start; gap: var(--space-4); }
.ts-team__list { display: grid; border-top: 1px solid var(--border-thin); }
.ts-team__list li { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--border-thin); }
.ts-team__list li > div { display: grid; flex: 1; min-width: 0; }
.ts-team__list b { font-weight: var(--fw-medium); color: var(--text-strong); }
.ts-team__list li > div span { font-size: var(--body-sm-size); color: var(--text-low); }
.ts-team__where { display: none; align-items: center; gap: var(--space-1); font-size: var(--body-sm-size); color: var(--text-low); }
.ts-team__where .ts-svg { width: 14px; height: 14px; }
@media (min-width: 480px) { .ts-team__where { display: inline-flex; } }
@media (min-width: 1024px) {
  .ts-team__listwrap { grid-template-columns: 1fr 1.4fr; gap: var(--space-20); }
  .ts-team__intro { position: sticky; top: calc(var(--header-h) + var(--space-8)); align-self: start; }
}

/* V4 bio cards */
.ts-team__cards { display: grid; gap: var(--space-4); }
.ts-team__cards .card { display: flex; flex-direction: column; gap: var(--space-4); }
.ts-team__cards .card > p { flex: 1; }
.ts-team__cards .ts-team__social { margin-left: -6px; }
.ts-team__who { display: flex; align-items: center; gap: var(--space-3); }
.ts-team__who .ts-face { --face: 56px; }
.ts-team__who p { font-size: var(--body-sm-size); color: var(--text-low); }
@media (min-width: 640px) { .ts-team__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ts-team__cards { grid-template-columns: repeat(4, 1fr); } }

/* V5 founders split */
.ts-team__founders { display: grid; gap: var(--space-10); align-items: center; }
.ts-team__photo { overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 4 / 3; }
.ts-team__photo img { width: 100%; height: 100%; object-fit: cover; }
.ts-team__note { display: grid; justify-items: start; gap: var(--space-4); }
.ts-team__pair { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-4); }
.ts-team__pair li { display: flex; align-items: center; gap: var(--space-3); }
.ts-team__pair div { display: grid; }
.ts-team__pair b { font-weight: var(--fw-medium); color: var(--text-strong); }
.ts-team__pair div span { font-size: var(--body-sm-size); color: var(--text-low); }
@media (min-width: 1024px) { .ts-team__founders { grid-template-columns: 1fr 1fr; gap: var(--space-20); } .ts-team__photo { aspect-ratio: 1; } }

/* V6 avatars and hiring */
.ts-team__hire { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-5); border-radius: var(--radius-xl); text-align: center; }
.ts-team__hire .h3 { max-width: 22ch; }
.ts-team__hire .ts-lead { max-width: 52ch; }
.ts-team__wall { display: flex; flex-wrap: wrap; justify-content: center; max-width: 340px; margin-bottom: var(--space-4); }
.ts-team__wall .ts-face { --face: 52px; margin: -4px; border: 3px solid var(--ts-surface); }
.ts-team__you { background: var(--orange-500) !important; color: #fff !important; }
.ts-team__you .ts-svg { width: 20px; height: 20px; }
.ts-team__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-12); margin-block: var(--space-4); }
.ts-team__stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.ts-team__stats dt { font-size: var(--body-sm-size); color: var(--text-low); }
.ts-team__stats dd { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h4-size); line-height: 1.1; color: var(--text-strong); }
.ts-team__hire .ts-actions { justify-content: center; }
@media (min-width: 768px) { .ts-team__hire { padding: var(--space-20) var(--space-12); } .ts-team__wall { max-width: none; } .ts-team__wall .ts-face { --face: 64px; } }