/* Team Section */

body .team-section-wrapper {
  display: grid;
  place-items: center;
  width: 80%; /* Match other sections */
  max-width: 1200px; /* Add max-width */
  padding: var(--spacing-xl) var(--spacing-md);
  margin: 0 auto;
}

/* Also update the main team section if used elsewhere */
body .team-section {
  width: 100%; /* Use full width within the 80% wrapper */
  max-width: none; /* Remove max-width constraint */
  margin: 0 auto;
  padding: var(--spacing-md);
  container-type: inline-size;
}
.team-section.content-section {
  all: unset;
  width: fit-content;
  max-width: min(1200px, 90vw);
  margin: 0 auto;
  padding: var(--spacing-md);
  display: block;
}
.team-section h3 {
  color: var(--color-text-inverse);
  text-align: center;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.team-section.partnership-pattern {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background: linear-gradient(135deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 5%) 100%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: var(--newsletter-border-radius);
  box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  padding: 2rem;
}
body .team-section .team-container {
  gap: var(--spacing-xl);
  width: fit-content;
  max-width: var(--component-max-width);
  margin: 0 auto;
  padding: 0;
}
body .team-row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  width: fit-content;
  margin: 0 auto var(--spacing-lg) auto;
}
body .team-row-left {
  flex-direction: row;
  justify-content: center;
}
body .team-row-right {
  flex-direction: row-reverse;
  justify-content: center;
}
body .team-member {
  align-items: center;
  text-align: center;
  padding: var(--spacing-lg);
  background: rgb(0 0 0 / 80%);
  border: 1px solid rgb(34 197 94 / 30%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  width: var(--tiny-component-width);
  min-width: var(--tiny-component-width);
  max-width: var(--tiny-component-width);
  flex-shrink: 0;
  flex-grow: 0;
}
body .team-description {
  display: flex;
  align-items: center;
  padding: var(--spacing-lg);
  background: var(--gradient-bg-standard);
  border: 1px solid rgb(34 197 94 / 30%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  justify-content: center;
  width: var(--small-component-width);
  min-width: var(--small-component-width);
  max-width: var(--small-component-width);
  flex-shrink: 0;
  flex-grow: 0;
}
.team-description p {
  color: var(--text-color);
  font-size: var(--font-size-base);
  line-height: 1.5;
  text-align: left;
  opacity: 0.9;
  margin: auto 0;
  align-self: center;
  font-family: var(--font-primary);
  letter-spacing: var(--letter-spacing-normal);
  word-spacing: normal;
}
.team-section .team-description p.text-newsletter {
  font-family: var(--font-primary);
  letter-spacing: var(--letter-spacing-normal);
  word-spacing: normal;
  text-align: left;
}
body .team-photo {
  width: 160px; /* increased for sharper rendering */
  height: 160px;
  border-radius: 50%;
  object-fit: cover; /* ensure full coverage and consistent framing */
  object-position: center center;
  border: 2px solid var(--newsletter-border);
  margin-bottom: var(--spacing-md);
  background: rgb(255 255 255 / 5%);
  image-rendering: auto;
}

/* remove letterboxing and extra padding for special cases */
.team-member img[src*='Jung_Yannick'],
.team-member img[src*='Sander_Swen'] {
  object-fit: cover;
  object-position: center center;
  background: transparent;
  padding: 0;
  border-radius: 50%;
}
body .team-name {
  font-size: var(--font-size-base);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-normal);
}
body .team-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  line-height: var(--line-height-normal);
  max-width: 100%;
  word-wrap: normal;
}
  body .team-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .team-member,
  body .team-description {
    width: 100%;
    max-width: var(--small-component-width);
    min-width: auto;
  }
body .team-grid {
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
  margin: 0 auto;
  padding: 0;
}



@container (min-width: 768px) {
  body .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--component-sm), 1fr));
    gap: var(--space-lg);
  }
}

@container (min-width: 1024px) {
  body .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--component-md), 1fr));
    gap: var(--space-lg);
  }
}

@container (min-width: 1400px) {
  body .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--component-lg), 1fr));
    gap: var(--space-xl);
    justify-content: center;
  }
}
body .team-member-card {
  background: var(--gradient-bg-standard);
  border: 1px solid rgba(78, 148, 80, 0.3);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  text-align: center;
  transition: var(--transition-smooth);
}


/* Responsive Design - Media Queries */

/* Critical Mobile Breakpoint - Force Stacking */
@media (max-width: 768px) {
  /* Force team rows to stack vertically */
  body .team-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
  }
  
  /* Force all team row directions to column */
  body .team-row-left,
  body .team-row-right {
    flex-direction: column !important;
  }
  
  /* Ensure team elements take full width */
  body .team-member,
  body .team-description {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    flex-grow: 1 !important;
  }
  
  /* Force team container to full width */
  body .team-section .team-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Grid fallback for team layout */
  body .team-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md) !important;
  }
}

/* Extra Small Screens - Aggressive Stacking */
@media (max-width: 480px) {
  body .team-section-wrapper {
    padding: var(--spacing-md) var(--spacing-xs) !important;
  }
  
  body .team-section {
    padding: var(--spacing-sm) !important;
  }
  
  body .team-member,
  body .team-description {
    padding: var(--spacing-sm) !important;
  }
  
  body .team-name {
    font-size: var(--font-size-sm) !important;
    word-break: break-word !important;
  }
  
  body .team-role {
    font-size: var(--font-size-xs) !important;
    word-break: break-word !important;
  }
  
  body .team-row {
    gap: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
  }
}

@media (min-width: 480px) and (max-width: 640px) {
  body .team-grid {
    grid-template-columns: 1fr;
  }
  :not(.menu-content-area) .team-grid {
    gap: var(--space-sm);
    padding: 0 var(--space-sm);
  }
  body .menu-content-area .team-grid {
    padding: 0 ;
  }
}

@media (max-width: 640px) {
  body .team-member-card {
    padding: var(--spacing-sm);
  }
  .team-member-card h3 {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 479px) {
  body .team-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: 0;
  }
  body .menu-content-area .team-grid {
    margin: 0 ;
    padding: 0 ;
  }
}