/* ==========================================================================
   Devnex Solutions — Team section (additive layer)
   Ships alongside the compiled bundle. Nothing here overrides template rules:
   every selector is prefixed .dvx-team- (plus one #team scroll offset).
   Colour / type / shadow all come from the template's own CSS custom
   properties (--primary, --accent, --gradient-primary, --shadow-*, --muted).
   ========================================================================== */

/* Fixed header is h-20 (5rem); keep anchor jumps clear of it. */
#team {
  scroll-margin-top: 5rem;
}
#team:focus,
#team:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------- layout -- */

.dvx-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
}

/* 5 across on desktop: 100% minus 4 gaps, split 5 ways. */
.dvx-team-card {
  box-sizing: border-box;
  width: calc((100% - 6rem) / 5);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem 1.75rem;
  position: relative;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.5s ease;
}

/* Matches the Projects card interaction: soft lift + primary-tinted border. */
.dvx-team-card:hover {
  border-color: hsl(var(--primary) / 0.3);
  box-shadow: var(--shadow-elevated);
}
.dvx-team-card.dvx-team-in:hover {
  transform: translateY(-0.5rem);
}

/* Founder — same footprint, a touch more weight. */
.dvx-team-card--lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
}

/* --------------------------------------------------------------- avatar -- */

.dvx-team-avatar {
  position: relative;
  width: 7rem;
  height: 7rem;
  border-radius: 9999px;
  overflow: hidden;
  background-color: hsl(var(--muted));
  box-shadow:
    0 0 0 2px hsl(var(--primary) / 0.3),
    var(--shadow-card);
  margin-bottom: 1.25rem;
  flex: none;
}

.dvx-team-card--lead .dvx-team-avatar {
  width: 7.75rem;
  height: 7.75rem;
  box-shadow:
    0 0 0 3px hsl(var(--primary) / 0.45),
    var(--glow-primary);
}

.dvx-team-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Initials fallback — revealed only when the photo genuinely fails. */
.dvx-team-initials {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  font-family: Poppins, system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.03em;
  line-height: 1;
  user-select: none;
}
.dvx-team-avatar.is-failed .dvx-team-photo {
  display: none;
}
.dvx-team-avatar.is-failed .dvx-team-initials {
  display: flex;
}

/* ------------------------------------------------------------------ text -- */

.dvx-team-name {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 0.25rem;
  word-break: break-word;
}
.dvx-team-card--lead .dvx-team-name {
  font-size: 1.0625rem;
}

.dvx-team-role {
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0;
}

/* -------------------------------------------------------------- entrance -- */

.dvx-team-anim {
  opacity: 0;
  transform: translateY(1.25rem);
}
.dvx-team-anim.dvx-team-in {
  opacity: 1;
  transform: none;
}
.dvx-team-head {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* ------------------------------------------------------------- nav link -- */

/* The link itself inherits the template's nav classes verbatim (cloned from a
   live sibling), so only the focus affordance is defined here. */
.dvx-team-nav-link:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 4px;
}

/* ----------------------------------------------------------- responsive -- */

/* Tablet — 3 across (last row centres itself via justify-content). */
@media (max-width: 1023px) {
  .dvx-team-card {
    width: calc((100% - 3rem) / 3);
  }
  .dvx-team-avatar {
    width: 6.5rem;
    height: 6.5rem;
  }
  .dvx-team-card--lead .dvx-team-avatar {
    width: 7.25rem;
    height: 7.25rem;
  }
}

/* Mobile — 2 across, founder full width as the feature card. */
@media (max-width: 767px) {
  .dvx-team-grid {
    gap: 1rem;
  }
  .dvx-team-card {
    width: calc((100% - 1rem) / 2);
    padding: 1.5rem 0.75rem 1.25rem;
  }
  .dvx-team-card--lead {
    width: 100%;
    padding: 1.75rem 1rem 1.5rem;
  }
  .dvx-team-avatar {
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: 1rem;
  }
  .dvx-team-card--lead .dvx-team-avatar {
    width: 7rem;
    height: 7rem;
  }
  .dvx-team-initials {
    font-size: 1.375rem;
  }
  .dvx-team-card--lead .dvx-team-initials {
    font-size: 1.75rem;
  }
  .dvx-team-name {
    font-size: 0.9375rem;
  }
  .dvx-team-card--lead .dvx-team-name {
    font-size: 1.0625rem;
  }
  .dvx-team-role {
    font-size: 0.75rem;
  }
  .dvx-team-card--lead .dvx-team-role {
    font-size: 0.875rem;
  }
}

/* Very narrow (≤360px) — keep two columns readable. */
@media (max-width: 360px) {
  .dvx-team-avatar {
    width: 4.75rem;
    height: 4.75rem;
  }
  .dvx-team-name {
    font-size: 0.875rem;
  }
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  .dvx-team-anim,
  .dvx-team-anim.dvx-team-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dvx-team-card,
  .dvx-team-card.dvx-team-in:hover {
    transform: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
}