/* ========================================================================
   Team Section
   ======================================================================== */
.team {
  background: var(--color-bg-dark);
  color: var(--color-text-white);
}

.team .section-title { color: var(--color-text-white); }
.team .section-desc  { color: var(--color-text-gray); }

/* ---------- Grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.team-card {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-card);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.team-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(80%) contrast(1.05);
  transition:
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
}

.team-card:hover .team-photo img {
  transform: scale(1.06);
  filter: grayscale(0%) contrast(1);
}

.team-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.88) 100%);
  transform: translateY(20%);
  opacity: 0.9;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.team-card:hover .team-overlay {
  transform: translateY(0);
  opacity: 1;
}

.team-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--color-text-white);
}

.team-role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
}

.team-country {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.team-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e9ecf3 0%, #d6dbe5 100%);
  color: #8892a6;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: 4px;
  user-select: none;
}

.team-card--tbh .team-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.65) 100%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 640px) {
  /* 팀 카드 좌우 슬라이드 — 다음 카드 살짝 보이는 peek */
  .team-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding: 2px var(--container-pad) 14px;
    scroll-padding-left: var(--container-pad);
  }
  .team-grid::-webkit-scrollbar { display: none; }

  .team-card {
    flex: 0 0 62%;
    max-width: 62%;
    scroll-snap-align: start;
  }
  .team-card:last-child {
    margin-right: calc(var(--container-pad) - 12px);
  }

  .team-overlay { transform: translateY(0); opacity: 1; padding: 14px; }
  .team-name { font-size: 15px; }
  .team-role { font-size: 11px; letter-spacing: 1px; }
  .team-country { font-size: 10px; letter-spacing: 1.5px; }
}