/* ==========================================================================
   Team Section 
   ========================================================================== */

/* Section background + spacing */
#section-team{
  padding: clamp(36px, 6vw, 72px) 0;
  background: linear-gradient(180deg, var(--bg-2, #f6f7fb), var(--bg, #fff));
}

/* Title */
.team-title{
  color: var(--text);
  font-weight: 900;
  font-size: clamp(2.6rem, 2.2rem + 3vw, 4.8rem);
  line-height: 1.05;
  margin: clamp(24px,4vw,48px) 0;
  text-align: center;
  font-family: "Libre Baskerville", serif;
}

/* Safe gutters around the grid */
#section-team .wrapper{
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 28px);
}

/* Responsive grid: 4 / 3 / 2 / 1 columns */
.team-grid{
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  justify-content: start;
}

@media (max-width: 1200px){
  .team-grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}

@media (max-width: 860px){
  .team-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

/* Card: compact, white/card background, soft shadow */
.team-card{
  background: var(--accent, #fff);
  border-radius: clamp(14px, 2.2vw, var(--radius, 22px));
  box-shadow: var(--shadow, 0 18px 50px rgba(0,0,0,.12));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--tt, .25s cubic-bezier(.2,.8,.2,1)),
              box-shadow var(--tt, .25s cubic-bezier(.2,.8,.2,1));
}
.team-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm, 0 10px 28px rgba(0,0,0,.08));
}

/* Photo block: perfect rounded-square, fills width */
.team-photo{
  width: 100%;
  aspect-ratio: 1 / 1;               /* perfect square */
  overflow: hidden;
  background: #f1f1f4;
}
.team-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: clamp(12px, 2vw, 18px); /* inner curve look */
  transform: scale(0.96);                 /* inner margin illusion */
}

/* Meta (name + role) */
.team-meta{
  padding: clamp(10px, 2.2vw, 16px) clamp(8px, 2vw, 14px) clamp(14px, 2.6vw, 18px);
  text-align: center;
}

/* Big bold name */
.team-name{
  color: var(--bg, #111318);
  font-family: Merriweather, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 4px 0 6px;
  line-height: 1.15;
  font-size: clamp(1.15rem, 0.9rem + 1.8vw, 1.8rem);
  /* prevent awkward wraps on very long names */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Subtle role text */
.team-role{
  color: var(--bg, #5c6470);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  font-size: clamp(.9rem, .8rem + .6vw, 1.05rem);
}

/* Optional: ensure images never flash tall before load */
@supports not (aspect-ratio: 1 / 1){
  .team-photo{ position: relative; padding-top: 100%; }
  .team-photo img{ position: absolute; inset: 0; }
}