/* ==========================================================================
   COMPONENTE: TeamBios
   Escopo total sob o prefixo .tb-  — não altera nem herda nada do site.
   Cores e fontes puxam as variáveis da marca com fallback próprio.
   ========================================================================== */

.tb-bio {
  /* tokens locais — não vazam para fora do componente */
  --tb-accent: var(--blue, #1d68d6);
  --tb-text: var(--offwhite, #f4f4f4);
  --tb-muted: var(--gray, #8e8e8e);
  --tb-display: var(--font-display, 'Archivo Expanded', Helvetica, Arial, sans-serif);
  --tb-body: var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  --tb-ease: cubic-bezier(.2,.7,.1,1);

  position: relative;
  height: 170vh;
}

.tb-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.tb-grid {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

/* ---------- Texto ---------- */
.tb-text {
  position: relative;
  z-index: 2;
  min-width: 0;
  opacity: var(--tb-text-op, 0);
  transform: translateY(calc(var(--tb-text-ty, 40) * 1px));
  will-change: transform, opacity;
}

.tb-kicker {
  font-family: var(--tb-display);
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tb-text);
  margin: 0 0 18px;
}
.tb-accent { color: var(--tb-accent); }

.tb-name {
  font-family: var(--tb-body);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--tb-text);
  margin: 0 0 18px;
}

.tb-desc {
  font-family: var(--tb-body);
  color: var(--tb-muted);
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 26px;
}

.tb-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--tb-accent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tb-list li {
  font-family: var(--tb-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tb-text);
}

/* ---------- Foto ---------- */
.tb-photo-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78vh;
  max-height: 640px;
}

.tb-glow {
  position: absolute;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(29,104,214,.30) 0%, transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.tb-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 82%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%);
  mask-image: linear-gradient(0deg, transparent 0, #000 22%);
  opacity: var(--tb-photo-op, 0);
  transform: translateY(calc(var(--tb-photo-ty, 80) * 1px)) scale(var(--tb-photo-scale, 1.14));
  will-change: transform, opacity;
}

/* ---------- Sobrenome gigante em contorno ---------- */
.tb-surname {
  position: absolute;
  z-index: 0;
  font-family: var(--tb-display);
  font-size: 26vw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(29,104,214,.22);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translateX(calc(var(--tb-surname-x, 0) * 1%));
  will-change: transform;
}

/* ---------- Lados alternados ---------- */
@media (min-width: 861px) {
  .tb-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    grid-template-areas: "text photo";
  }
  .tb-text { grid-area: text; }
  .tb-photo-wrap { grid-area: photo; }
  .tb-bio--reverse .tb-grid { grid-template-areas: "photo text"; }
}

/* ==========================================================================
   MOBILE — até 860px: sem sticky, uma coluna, foto em cima
   ========================================================================== */
@media (max-width: 860px) {
  .tb-bio { height: auto; }
  .tb-stage { position: static; height: auto; padding: 90px 0; }
  .tb-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "text";
    gap: 32px;
  }
  .tb-text { grid-area: text; opacity: 1; transform: none; }
  .tb-photo-wrap { grid-area: photo; height: 60vh; }
  .tb-photo { opacity: 1; transform: translateY(0) scale(1); }
  .tb-surname { font-size: 22vw; }
}

/* ==========================================================================
   REDUCED MOTION — tudo estático
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tb-bio { height: auto; }
  .tb-stage { position: static; height: auto; padding: 60px 0; }
  .tb-text,
  .tb-photo {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .tb-surname { transform: none !important; }
}