/* =============================================================
   TradeRange — /team/ people page
   One full-width card per person, stacked vertically. Inherits
   every colour/type token from style.css; nothing here redefines
   the palette. All classes are prefixed .team-.

   The link buttons deliberately reuse .tr-social-btn-icon from
   style.css (the coloured tile + invert-to-white SVG treatment
   used by the home page's social row) so a member's GitHub button
   and the home page's GitHub button render the same icon the same
   way.
   ============================================================= */

/* ---------- Hero ---------------------------------------------------- */
.team-hero {
  border-bottom: var(--tr-bw) solid var(--tr-line);
  padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
}
.team-hero h1 {
  margin: 10px 0 14px;
}
.team-hero .tr-lead {
  max-width: 68ch;
}

/* ---------- List ---------------------------------------------------- */
.team-section {
  padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 7vw, 96px);
}
.team-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.team-empty {
  color: var(--tr-text-3);
  padding: 32px 0;
}

/* ---------- Card ---------------------------------------------------- */
.team-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 28px);
  width: 100%;
  padding: clamp(18px, 2.2vw, 26px);
  border: var(--tr-bw) solid var(--tr-line);
  border-radius: 0;
  background: var(--tr-bg-1);
  box-shadow: var(--tr-shadow-sm);
  transition: box-shadow .15s, transform .15s;
  scroll-margin-top: 90px;   /* deep links to #member-id clear the nav */
}
.team-card:hover {
  box-shadow: var(--tr-shadow);
  transform: translate(-3px, -3px);
}
@media (prefers-reduced-motion: reduce) {
  .team-card { transition: none; }
  .team-card:hover { transform: none; }
}

.team-card-photo { flex-shrink: 0; }
a.team-card-photo {
  text-decoration: none;
  color: inherit;
}
a.team-card-photo:hover .team-photo,
a.team-card-photo:focus-visible .team-photo {
  border-color: var(--tr-line-strong);
}
.team-photo {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 0;
  object-fit: cover;
  background: var(--tr-bg-2);
  border: var(--tr-bw) solid var(--tr-line);
}
/* Shown until a photo is uploaded — initials on a soft brand tile. */
.team-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tr-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--tr-brand);
  background: var(--tr-brand-soft);
  border-color: transparent;
}

.team-card-body {
  flex: 1 1 auto;
  min-width: 0;   /* lets long descriptions wrap instead of pushing wide */
}
.team-card-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.team-username {
  font-family: var(--tr-display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  word-break: break-word;
}
a.team-username-link {
  color: inherit;
  text-decoration: none;
}
a.team-username-link:hover,
a.team-username-link:focus-visible {
  color: var(--tr-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.team-realname {
  font-size: 14px;
  font-weight: 600;
  color: var(--tr-text-3);
}
.team-role {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tr-brand);
}
.team-desc {
  margin-top: 12px;
  max-width: 78ch;
  color: var(--tr-text-2);
  line-height: 1.65;
}
.team-desc p + p { margin-top: 10px; }

/* ---------- Tag pills ----------------------------------------------- */
.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  list-style: none;
  padding: 0;
}
.team-tag {
  padding: 4px 12px;
  border: var(--tr-bw) solid var(--tr-line);
  border-radius: 0;
  background: var(--tr-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--tr-mono);
  color: var(--tr-yellow-ink);
  white-space: nowrap;
}

/* ---------- Profile links ------------------------------------------- */
.team-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.team-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: var(--tr-bw) solid var(--tr-line);
  border-radius: 0;
  background: var(--tr-bg-1);
  text-decoration: none;
  font-family: inherit;
  transition: box-shadow .15s, transform .15s;
}
a.team-link:hover,
a.team-link:focus-visible {
  text-decoration: none;
  outline: none;
  transform: translateY(-2px);
  box-shadow: var(--tr-shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
  .team-link { transition: none; }
  a.team-link:hover { transform: none; }
}
/* Discord: a handle to copy, not a URL — no hover lift. */
.team-link--static { cursor: text; user-select: text; }

/* The icon tile. .tr-social-btn-icon (style.css) supplies the flex
   centering and the invert-to-white filter on the SVG; this only
   resizes it for the compact pill and layers the text fallback. */
.team-link-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 0;
}
.team-link-icon img {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  /* Flatten every icon to white, whatever the source SVG is drawn in.
     The shared .tr-social-btn-icon rule only inverts, which is right for
     the home page's black glyphs but wrong here: LinkedIn's blue would
     inverts to orange and X's white artwork would invert to black on a
     black tile. brightness(0) crushes any colour to black first, so the
     invert always lands on white. */
  filter: brightness(0) invert(1);
}
/* Sits *behind* the SVG: if an icon file isn't in the repo yet the
   broken <img> collapses to nothing and these letters show through,
   so the button still reads instead of being a blank square. */
.team-link-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tr-display);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
/* Hidden while an icon is actually there — an outline glyph (the globe,
   the envelope) is thin enough that the letters would otherwise read
   through it. js/team.js removes an <img> that fails to load, which
   drops this rule and brings the letters back. */
.team-link-icon:has(img) .team-link-fallback { display: none; }
.team-link .tr-social-btn-label { align-items: flex-start; }
.team-link .tr-social-btn-label span:last-child { font-size: 14px; }

/* Brand borders, matching the home page's social buttons. */
.team-link--github   { border-color: #24292F; }
.team-link--linkedin { border-color: #0A66C2; }
.team-link--website  { border-color: var(--tr-brand); }
.team-link--x        { border-color: #111111; }
.team-link--youtube  { border-color: #FF0000; }
.team-link--reddit   { border-color: #FF4500; }
.team-link--tiktok   { border-color: #555555; }
.team-link--email    { border-color: #555555; }

/* ---------- Member page (/team/<slug>/) -------------------------------- */
.team-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tr-text-3);
}
.team-crumb a {
  color: var(--tr-text-2);
  text-decoration: none;
}
.team-crumb a:hover,
.team-crumb a:focus-visible {
  color: var(--tr-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.team-member-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 28px);
}
.team-member-photo { flex-shrink: 0; }
.team-member-photo .team-photo {
  width: 160px;
  height: 160px;
}
.team-member-intro { min-width: 0; }
.team-member-name {
  margin: 8px 0 6px;
  font-family: var(--tr-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  word-break: break-word;
}
.team-realname--page {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tr-text-3);
}
.team-section--member { padding-top: 8px; }
.team-member-body .team-desc { margin-top: 0; }
.team-back {
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
}
.team-back a { color: var(--tr-text-2); }
.team-back a:hover { color: var(--tr-brand); }
.team-member-missing {
  padding: clamp(40px, 6vw, 80px) 0;
}
.team-member-missing h1 {
  margin: 10px 0 14px;
  font-family: var(--tr-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
}

/* ---------- Narrow screens ------------------------------------------ */
@media (max-width: 720px) {
  .team-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .team-card-body { width: 100%; }
  .team-card-head { justify-content: center; }
  .team-desc { margin-left: auto; margin-right: auto; }
  .team-tags,
  .team-links { justify-content: center; }
  .team-member-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .team-crumb { justify-content: center; }
}