/*
  HubSpot Module CSS: Leadership Section
  - Mobile-first approach
  - Scoped to the .leadership-section class to prevent conflicts
*/

/* Main container styling */
.leadership-section {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  color: #f5f5f7;
}

/* Optional section header */
.leadership-section .section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.leadership-section .section-header h2 {
  font-size: 2.5rem; /* 40px */
  font-weight: 800;
}

/* Grid for all team members */
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr; /* A single column on all screen sizes */
  gap: 3.5rem; /* Space between members */
}

/* Individual team member card */
.team-member {
  text-align: center; /* Center everything on mobile */
}

/* Image styles */
.team-member__image-wrapper img {
  width: 100%;
  max-width: 250px; /* Adjust max size as needed */
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%; /* Makes the image a circle */
  object-fit: cover; /* Prevents image distortion */
  margin: 0 auto 1.5rem auto; /* Center image and add space below */
  border: 3px solid rgba(255, 255, 255, 0.1);
}

/* Text styles */
.team-member__name {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.team-member__title {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  color: #a1a1aa; /* A slightly lighter color for the title */
}

.team-member__description {
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  color: #d4d4d8;
}

/* Linkedin icon */
.linkedin-icon-link {
  color: #7E878E;
  display: flex;
  transition: color 0.2s ease-in-out;
  width: 20px;
  height: 20px;
}

.linkedin-icon-link svg {
  width: 100%;
  height: 100%;
}

.linkedin-icon-link:hover {
  color: #F5F5F7;
}

.team-member__title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* --- DESKTOP STYLES --- */
/* Using 768px as the breakpoint for tablets and desktops */
@media (min-width: 768px) {
  .team-member {
    display: flex; /* Switch to a side-by-side layout */
    text-align: left; /* Left-align text */
    gap: 2rem; /* Space between image and text */
    align-items: flex-start; /* Vertically align image and text */
  }

  .team-member__image-wrapper {
    flex-shrink: 0; /* Prevents the image from shrinking */
  }
  
  .team-member__image-wrapper img {
     max-width: 100px; /* Increased headshot size for desktop */
     margin-bottom: 0; /* Remove bottom margin for flex layout */
  }
  
  .team-member__info {
    flex: 1; /* Allows the info to take up the remaining space */
  }
  .team-member__title-wrapper {
    justify-content: flex-start;
  }

  .leadership-section .section-header h2 {
    font-size: 3rem;
  }
}
}