/* Team Carousel Block Styles */
.team-carousel-block {
  padding: 80px 40px;
  margin: 0 !important;
  max-width: 100% !important;
}

.team-carousel-container {
  max-width: 1512px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.team-carousel-heading {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #f99c28;
  text-align: left;
}

/* Swiper Styles */
.team-carousel-swiper {
  width: 100%;
  position: relative;
  touch-action: pan-y;
}

.team-carousel-swiper .swiper-wrapper {
  align-items: center;
}

.team-member-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 343px;
  margin: 0;
}

.team-member-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}

.team-member-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}

.team-member-content {
  padding: 10px 0;
  text-align: left;
}

.team-member-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #000000;
}

.team-member-job-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #000000;
  opacity: 0.5;
  text-transform: uppercase;
  max-width: 220px;
  min-height: 45px;
}

/* Bio styling */
.team-member-bio {
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 30px 0;
  color: #000000;
  display: none; /* Hidden by default on mobile */
}

/* Desktop grid layout styles - only applied on desktop when swiper is disabled */
@media (min-width: 769px) {
  .desktop-grid-enabled .swiper-wrapper {
    display: grid !important;
    gap: 40px 20px;
    transform: none !important;
  }

  .desktop-grid-enabled.team-carousel-grid-2 .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .desktop-grid-enabled.team-carousel-grid-3 .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

  .desktop-grid-enabled.team-carousel-grid-4 .swiper-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  .desktop-grid-enabled .swiper-slide {
    width: 100% !important;
    transform: none !important;
    margin-right: 0 !important;
  }

  /* Full width cards for 2-column layout */
  .desktop-grid-enabled.team-carousel-grid-2 .team-member-card {
    max-width: 100%;
  }

  /* Desktop grid image aspect ratio */
  .desktop-grid-enabled .team-member-image img {
    aspect-ratio: 7/6;
  }

  .desktop-grid-enabled .swiper-pagination {
    display: none;
  }
}

/* Sticker slide styles */
.team-carousel-block .sticker-slide,
.team-carousel-block .sticker-item {
  display: none !important; /* Hidden on mobile by default */
  align-items: stretch;
  justify-content: center;
  height: 100%;
}

.team-carousel-block .sticker-item {
  padding: 0;
}

/* Ensure sticker matches team card height in swiper */
.team-carousel-swiper .sticker-slide {
  height: auto;
}

.team-carousel-block .sticker-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 570px;
  padding: 0;
  max-width: 280px;
  margin: -20px auto 0 auto;
  background: transparent; /* Make sure background doesn't interfere */
}

/* About Us */
.page-id-427 .team-carousel-heading {
  margin-bottom: 50px;
}

.page-id-427 .team-member-name {
  font-size: 42px;
}

.page-id-427 .team-member-job-title {
  font-size: 32px;
  max-width: 370px;
}

@media (max-width: 768px) {
  .page-id-427 .team-carousel-heading {
    margin-bottom: 0;
  }
  
  .page-id-427 .team-member-name {
    font-size: 20px;
  }

  .page-id-427 .team-member-job-title {
    font-size: 16px;
  }
}

.page-id-427 .team-carousel-block .sticker-card {
  max-width: 420px;
  height: 100%;
}

.team-carousel-block .sticker-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* Swiper pagination - Using global green design */

/* Responsive styles */
@media (min-width: 769px) {
  /* Show bio on desktop */
  .team-member-bio {
    display: block;
  }

  /* Show sticker slide on desktop/tablet */
  .team-carousel-swiper .sticker-slide {
    display: flex !important;
  }

  .team-carousel-grid .sticker-item {
    display: flex !important;
  }

}

@media (max-width: 768px) {
  .team-carousel-block {
    padding: 80px 0;
  }

  .team-carousel-container {
    gap: 40px;
  }

  .team-carousel-heading {
    padding: 0 15px;
  }

  /* Mobile maintains 1:1 aspect ratio even when desktop grid is enabled */
  .desktop-grid-enabled .team-member-image img {
    aspect-ratio: 1/1;
  }
}

/* Fallback styles when Swiper fails to load */
.team-carousel-fallback {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.team-carousel-fallback .swiper-slide {
  transform: none !important;
  width: auto !important;
  margin-right: 0 !important;
}

.team-carousel-fallback .swiper-pagination {
  display: none;
}