:root {
  --card-bg: #ffffff;
  --card-radius: 12px;
  --card-shadow: 0 4px 20px rgba(0,0,0,0.1);
  --accent-color: #2563eb;
  --text-dark: #1f2937;
  --text-muted: #6b7280;
}

.staff-list-section {
  padding: 4rem 0;
  background: #f8fafc;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section-header {
  text-align: center;
  margin-bottom: 2rem;
}

.section-header h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-dark);
  position: relative;
}

.section-header h2::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 4px;
  background: var(--accent-color);
  border-radius: 2px;
}

/* Container grid for staff list */
.staff-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);;
  gap: 24px;
}

/* Each staff card */
.staff-member-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  max-width: 340px; /* Fix card width on larger screens */
  margin: auto; /* center in grid cell */
}

/* Hover effect */
.staff-member-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.03),
    0px 5px 4px rgba(3, 7, 18, 0.05),
    0px 12px 9px rgba(3, 7, 18, 0.08),
    0px 20px 15px rgba(3, 7, 18, 0.10),
    0px 32px 24px rgba(3, 7, 18, 0.13);

}

/* Image container */
.member-photo {
  height: 300px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  background: #f0f0f0;
}

/* Image itself */
.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Zoom image on hover */
.staff-member-card:hover .member-photo img {
  transform: scale(1.05);
}

/* No photo placeholder */
.no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #777;
  font-size: 0.9rem;
  background: #e0e0e0;
}

/* Member text info */
.member-info {
  padding: 0.75rem 1rem;
  text-align: center;
}

.member-info h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.position {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #666;
}

.subject-heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
  color: var(--text-dark);
  border-left: 4px solid var(--accent-color);
  padding-left: 0.5rem;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .section-header h2 {
    font-size: 1.75rem;
  }
}

/* Medium screens (tablets) */
@media (max-width: 992px) {
  .staff-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .member-photo {
    height: 40vh;
    width: 100%;
  }
}

/* Small screens (phones) */
@media (max-width: 600px) {
  .staff-list-grid {
    grid-template-columns: 1fr;
  }

  .staff-member-card {
    max-width: 100%; /* Allow full width */
  }

  .member-photo {
    height: 40vh;
    width: 100%;
  }

  .member-info h3 {
    font-size: 1rem;
  }

  .position {
    font-size: 0.85rem;
  }

  .subject-heading {
    font-size: 1.25rem;
  }
}