.team-title {
    font-size: 3.5rem;
    font-weight: 300;
    margin-top: 6rem;
    margin-bottom: 3rem;    
}

.accordion-trigger {
    font-size: 1.5rem;
    background-color: transparent;
    color: #ffff;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    padding: 0;
    outline: none !important;
}

.accordion-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background-color: rgba(35, 82, 68, 1);
    transition: width 0.3s ease-in-out; /* smooth animation */
}

.accordion-trigger:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background-color: rgba(35, 82, 68, 1);
}

.accordion-trigger.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background-color: rgba(35, 82, 68, 1); /* active underline color */
}

.accordion-content {
    display: flex;
    flex-wrap: nowrap; /* no wrapping to next row */
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    transition: max-height 0.4s ease-out;
    max-height: 0;
}

.accordion-content.open {
    max-height: 2000px;
}

.accordion-content::-webkit-scrollbar {
    height: 8px;
}

.accordion-content::-webkit-scrollbar-thumb {
    background-color: rgba(35, 82, 68, 0.5);
    border-radius: 4px;
}

.accordion-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Only affect the Professional Team accordion */
.accordion-trigger.professional-team + .accordion-content {
  flex-wrap: wrap !important;          /* override the existing nowrap */
  overflow-x: visible !important;      /* turn off horizontal scroll */
  scroll-snap-type: none !important;
  justify-content: center;  /* nice centering */
  max-width: 640px;         /* two 300px cards + 20px gap */
  margin: 0 auto;
}

/* Keep cards at their original size so they don't get huge */
.accordion-trigger.professional-team + .accordion-content .team-member {
    flex: 0 0 calc(50% - 20px); /* 2 per row */
    max-width: 300px;
}

/* Mobile: fall back to one per row */
@media (max-width: 600px) {
  .accordion-trigger.professional-team + .accordion-content {
    max-width: none;
  }
  .accordion-trigger.professional-team + .accordion-content .team-member {
    flex: 0 0 100%;
  }
}



/* Team member card */
.team-member {
    flex: 0 0 300px;;
    background-color: RGB(161 161 143);
    border: 4px solid rgba(35, 82, 68, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

/* Images */
.team-member img {
    width: 100%;       /* fills card width */
    height: 400px;     /* fixed height */
    object-fit: cover; /* crops nicely if different ratios */
}

/* Text styling */
.team-member p {
    text-align: center;
    margin: 4px 0;
}

.team-member .name {
    font-size: 1.2rem;
    font-weight: bold;
    color: rgba(35, 82, 68, 1);
}

.team-member .role {
    font-size: 1rem;
    color: #fff;
}

.team-member .title {
    font-size: 1rem;
    color: rgba(35, 82, 68, 1);
}

.professional-team-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* centers them */
}

.professional-team-container .team-member {
    flex: 0 0 calc(50% - 20px);
    max-width: 300px; /* keeps them from getting too big */
}




.icon-container {
    display: flex;             /* arrange icons in a row */
    justify-content: center;   /* center them horizontally */
    gap: 10px;
}

.icon-container a {
    display: flex;              /* make each link’s content centered */
    align-items: center;
    justify-content: center;
    text-decoration: none;      /* remove underline if any */
    color: rgba(35, 82, 68, 1);
    transition: color 0.3s ease, transform 0.2s ease;             /* keep the icon color */
}

.icon-container a:hover {
    color: #fff; /* white on hover */
    transform: scale(1.1); /* slight grow effect */
}

@media (min-width: 1300px) {
    .accordion-content {
        flex-wrap: nowrap; /* one row only on wide screens */
    }
}

@media (max-width: 1024px) {
    .team-member {
        flex: 0 0 calc(50% - 20px); /* 2 per row on tablets */
    }
}

@media (max-width: 600px) {
    .team-member {
        flex: 0 0 100%; /* 1 per row on mobile */
    }
}

@media (max-width: 600px) and (max-height: 600px) {
    .team-member img {
        height: 100px; /* adjust for tiny screens */
    }
    .accordion-content.open {
        max-height: none !important; /* no restriction for tiny screens */
        height: auto !important;
        overflow: visible !important;
    }
    
}

.team-section {
    width: 100%;
    max-width: 1600px; /* choose how wide you want it */
    margin: 0 auto;    /* center */
    padding: 0 20px;
}

/* Put this AT THE END of team.css */

/* Target the accordion item that contains the Professional Team trigger */
.accordion-item:has(.accordion-trigger.professional-team) .accordion-content {
  display: grid !important;                 /* beat the flex container */
  grid-template-columns: repeat(2, 300px);  /* exactly 2 cards per row */
  gap: 20px;
  justify-content: start;                  /* center the 2 columns */
  overflow: hidden;             /* kill horizontal scroll */
  scroll-snap-type: none !important;
  max-height: 0;
  transition: max-height 0.4s ease-out;
}

/* Let it grow as tall as needed (if many rows) */
.accordion-item:has(.accordion-trigger.professional-team) .accordion-content.open {
  max-height: 4000px !important;
}

/* Mobile fallback: 1 per row */
@media (max-width: 600px) {
  .accordion-item:has(.accordion-trigger.professional-team) .accordion-content {
    grid-template-columns: 1fr;
  }
}