/* Our Team — extends base theme */

/* HERO */
.team-hero{
  position:relative; overflow:hidden;
  padding:64px 0 28px;
  border-bottom:1px solid var(--outline);
}
.team-hero .hero-inner{ position:relative; z-index:1 }
.hero-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.orb{ position:absolute; width:380px; height:380px; border-radius:999px; filter:blur(32px); opacity:.55;
      background: radial-gradient(closest-side, var(--brand), transparent 70%) }
.orb.o1{ left:-100px; top:-60px; animation:float 12s ease-in-out infinite }
.orb.o2{ right:-120px; top:20%; animation:float 14s ease-in-out infinite reverse }
.orb.o3{ left:40%; bottom:-120px; animation:float 18s ease-in-out infinite }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* STATS */
.team-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px;
}
@media (max-width: 900px){ .team-stats{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 540px){ .team-stats{ grid-template-columns:1fr } }
.stat{
  border:1px solid var(--outline); border-radius:16px;
  background:var(--card-gradient);
  padding:16px; text-align:center; box-shadow:var(--surface-elev);
  transform:translateY(10px); opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease), border-color .35s var(--ease)
}
.stat.revealed{ transform:none; opacity:1 }
.num{
  font-size:clamp(28px,6vw,48px); font-weight:800; line-height:1;
  filter:drop-shadow(0 10px 30px var(--brand-glow));
}
.label{ opacity:.85; margin-top:6px }

/* FILTERS */
.filters{ display:grid; gap:14px; margin-top:22px; color:var(--text); }
.search-wrap{ position:relative; max-width:560px }
.search-wrap input{
  width:100%; background:var(--input-bg); border:1px solid var(--input-border); color:var(--text);
  padding:12px 40px 12px 14px; border-radius:12px; outline:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease)
}
.search-wrap input::placeholder{ color:#ffffff; opacity:.6 }
.search-wrap input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); background:var(--brand-glass) }
.search-wrap .icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.85; color:var(--text); }

.filters-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width: 800px){ .filters-row{ grid-template-columns:1fr } }

.filters-group{ display:grid; gap:8px; }
.filter-label{
  font-weight:800; letter-spacing:.02em; color:var(--text);
  opacity:.95; user-select:none;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:10px }
.tag-chip{
  color:var(--text);
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)
}
.tag-chip:hover{ transform:translateY(-1px) }
.tag-chip.is-active{
  background:linear-gradient(180deg,var(--brand),var(--accent));
  border-color:transparent;
  color:#111;
}

/* GRID */
.team-grid{ margin:28px auto 70px }
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px }
@media (max-width: 1100px){ .grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width: 700px){ .grid{ grid-template-columns:1fr } }

/* CARD 3D FLIP */
.team-card{
  position:relative; border:1px solid var(--outline); border-radius:16px; overflow:hidden;
  background:var(--card-gradient); box-shadow: var(--surface-elev);
  transform:translateY(10px) scale(.98); opacity:0;
  transition:transform .7s var(--ease), opacity .7s var(--ease), border-color .35s var(--ease)
}
.team-card.revealed{ transform:none; opacity:1 }
.team-card:hover{ border-color:var(--brand-soft-x) }

.card-3d{
  position:relative; perspective:1000px;
}
.side{
  min-height:240px; padding:14px; display:grid; grid-template-rows:auto auto 1fr auto; gap:8px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .7s var(--ease);
}
.front{
  transform:rotateY(0deg);
}
.back{
  position:absolute; inset:0; transform:rotateY(180deg);
}

.team-card:hover .front,
.team-card:focus-within .front,
.team-card.is-flipped .front{ transform:rotateY(180deg) }

.team-card:hover .back,
.team-card:focus-within .back,
.team-card.is-flipped .back{ transform:rotateY(360deg) }

.avatar-wrap{ position:relative; display:flex; align-items:center; gap:10px }
.avatar{
  width:52px; height:52px; border-radius:999px; object-fit:cover; display:block;
  border:1px solid var(--outline);
}
.avatar.placeholder{
  display:grid; place-items:center; font-weight:900; color:#111;
  background:linear-gradient(180deg,var(--brand),var(--accent));
  border-color:transparent;
  filter:drop-shadow(0 10px 30px var(--brand-glow));
}
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border); font-weight:700 }

.name{ margin:.2em 0 0 }
.role{ margin:0; opacity:.9 }

.meta{ display:flex; flex-wrap:wrap; gap:8px; align-self:end }
.tag{ padding:6px 10px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border); font-weight:700 }

/* back */
.back-title{ margin:4px 0 0 }
.actions{ display:flex; gap:10px; margin-top:8px }
.tips{ margin-top:auto }

/* CTA */
.team-cta{ margin:0 auto 70px }
.cta-card{
  border:1px solid var(--outline); background:var(--card-gradient);
  border-radius:16px; padding:16px; box-shadow:var(--surface-elev)
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
.team-card,.side{ transition:none !important }
}

@media (max-width: 600px){
  .team-hero{padding:48px 0 22px;}
  .filters{gap:12px;}
  .search-wrap{max-width:none;}
  .filters-group{gap:6px;}
  .chip-row{gap:8px;}
  .team-card{border-radius:14px;}
  .side{min-height:220px;padding:14px 12px;}
  .actions{flex-wrap:wrap;}
  .actions .btn{flex:1 1 auto;justify-content:center;}
}

@media (max-width: 480px){
  .team-stats{gap:12px;}
  .team-card{padding-bottom:10px;}
  .meta{gap:6px;}
  .tag{padding:6px 9px;}
  .filters{gap:10px;}
  .tag-chip{padding:7px 10px;}
}