/* =========================
   TEAM SECTION
========================= */
.team-section {
  padding: 20px 20px !important;
  overflow: hidden !important;
}

.team-container {
  max-width: 1300px !important;
  margin: 20px auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
}

/* Header */
.team-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.team-header img {
  width: 40px !important;
  height: 40px !important;
}

.team-header h2 {
  font-size: 40px !important;
  font-weight: 600 !important;
  color: var(--primary-green, #355355) !important;
  margin: 0 !important;
}

.team-container > h3 {
  font-size: clamp(26px, 5vw, 50px) !important;
  font-weight: 400 !important;
  color: var(--black, #333) !important;
  margin: 0 !important;
  text-align: left !important;
}

/* =========================
   TEAM CAROUSEL
========================= */
.team-carousel {
  overflow: hidden !important;
  width: 100% !important;
}

.team-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 50px !important;
  animation: teamLoop 35s linear infinite !important;
  width: calc(280px * 12) !important;
}

.team-grid:hover {
  animation-play-state: paused !important;
}

/* Team social icons */
.socialicon {
  display: flex !important;
  gap: 20px !important;
  flex-direction: row !important;
}

.lead {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* =========================
   TEAM CARD
========================= */
.team-member {
  flex-shrink: 0 !important;
  width: 280px !important;
}

.team-member > img,
.img-placeholder {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid lightgray !important;
  margin-bottom: 12px !important;
}

.team-member h4 {
  font-size: 24px !important;
  margin: 0 0 6px !important;
  color: #355355 !important;
}

.team-member p {
  font-size: 16px !important;
  margin: 0 !important;
  color: var(--primary-green, #355355) !important;
  font-weight: 500 !important;
}

/* Social icons */
.socialicon a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  background: rgba(53, 83, 85, 0.1) !important;
  color: #355355 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.socialicon a:hover {
  background: #355355 !important;
  color: white !important;
}

.socialicon svg {
  width: 18px !important;
  height: 18px !important;
}

/* Infinite scroll animation */
@keyframes teamLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================
   TABLET (≤1025px)
========================= */
@media (max-width: 1025px) {
  .team-container {
    max-width: 95% !important;
    gap: 35px !important;
  }
  
  .team-header h2 {
    font-size: 32px !important;
  }
  
  .team-container > h3 {
    font-size: 38px !important;
  }
  
  .team-grid {
    width: calc(250px * 12) !important;
    gap: 40px !important;
    animation-duration: 30s !important;
  }
  
  .team-member {
    width: 250px !important;
  }
  
  .team-member > img,
  .img-placeholder {
    height: 280px !important;
  }
}

/* =========================
   MOBILE (≤768px)
========================= */
@media (max-width: 768px) {
  .team-section {
    padding: 15px 12px !important;
  }
  
  .team-container {
    gap: 30px !important;
    text-align: start !important;
  }
  
  .team-header {
    justify-content: start !important;
  }
  
  .team-header h2 {
    font-size: 26px !important;
  }
  
  .team-container > h3 {
    font-size: 30px !important;
    text-align: start !important;
  }
  
  .team-grid {
    width: calc(200px * 12) !important;
    gap: 30px !important;
    animation-duration: 25s !important;
  }
  
  .team-member {
    width: 200px !important;
  }
  
  .team-member > img,
  .img-placeholder {
    height: 240px !important;
  }
  
  .team-member h4 {
    font-size: 20px !important;
  }
  
  .team-member p {
    font-size: 14px !important;
  }
}

/* =========================
   SMALL MOBILE (≤480px)
========================= */
@media (max-width: 480px) {
  .team-container {
    gap: 25px !important;
  }
  
  .team-header h2 {
    font-size: 22px !important;
  }
  
  .team-container > h3 {
    font-size: 26px !important;
  }
  
  .team-grid {
    width: calc(160px * 12) !important;
    gap: 20px !important;
    animation-duration: 22s !important;
  }
  
  .team-member {
    width: 160px !important;
  }
  
  .team-member > img,
  .img-placeholder {
    height: 200px !important;
  }
  
  .team-member h4 {
    font-size: 18px !important;
  }
  
  .team-member p {
    font-size: 13px !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .team-grid {
    animation-play-state: paused !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: auto !important;
  }
  .team-member {
    flex: 1 1 280px !important;
    max-width: 280px !important;
  }
}

.team-data { display: none !important; }