/* ===== TEAM ===== */

/* 3-column grid: [image col] [text col] [image col] */
.team-row {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 0 104px;
  align-items: start;
}

.team-intro { padding: 48px 0 32px; }
.team-intro-text { margin-top: 0.5rem; }

.team-band { 
    padding: 56px 0; 
    background: var(--gray-light);
}
.team-band--alt { background: var(--white); }

.team-member-photo {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: top;
  display: block;
}
.team-member-photo-placeholder {
  width: 200px;
  height: 300px;
  background: #ddd;
}

/* Text column */
.team-col-main h3 {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.team-col-main .role {
  font-size: 0.875rem;
  color: var(--gray);
  margin-bottom: 1.25rem;
}
.team-col-main .bio { margin-bottom: 1.5rem; }
.team-col-main .bio p { font-size: 0.875rem; color: var(--gray); line-height: 1.65; margin-bottom: 0.75rem; }
.team-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}
.team-col-main .contact-line { font-size: 0.875rem; color: var(--gray); margin-bottom: 0.25rem; }
.team-col-main .contact-line a { color: var(--primary); text-decoration: none; }
.team-col-main .contact-line a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .team-row {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }
  /* Hide the blank side columns on mobile */
  .team-col-side:not(.team-col-side--photo) { display: none; }
  /* For even rows the photo is the 3rd element — pull it above the text */
  .team-row--even .team-col-side--photo { grid-row: 1; }
  .team-row--even .team-col-main { grid-row: 2; }
  .team-member-photo,
  .team-member-photo-placeholder { width: 200px; height: 300px; margin: 0 auto; }
}