.staff-intro {
  text-align: center;
  max-width: 800px;
  margin: 30px auto 30px;
  padding: 0 20px;
}

.staff-intro h2 {
  font-size: 2.1em;
  margin-bottom: 8px;
  font-weight: 700;
}

.staff-intro p {
  font-size: 1.05em;
  color: #555;
  margin-bottom: 0;
}

.staff-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  max-width: 700px;
  margin: 50px auto;
  padding: 0 20px 30px;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  .staff-card-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    max-width: 320px;
  }

  .staff-intro {
    margin-bottom: 25px;
  }
}

@media (max-width: 480px) {
  .staff-card-grid {
    padding: 0 15px 25px;
    gap: 10px;
    max-width: 300px;
  }

  .staff-intro {
    padding: 0 15px;
    margin-bottom: 20px;
  }

  .staff-intro h2 {
    font-size: 1.7em;
  }

  .staff-intro p {
    font-size: 0.95em;
  }
}

.staff-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
  color: white;
  height: 220px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 200px;
}

.staff-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.08),
    0px 5px 4px rgba(3, 7, 18, 0.08),
    0px 12px 9px rgba(3, 7, 18, 0.08),
    0px 20px 15px rgba(3, 7, 18, 0.08),
    0px 32px 24px rgba(3, 7, 18, 0.08);

}

.staff-card-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.staff-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.55);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
  text-align: center;
}

.staff-card:hover .staff-card-image {
  transform: scale(1.08);
}

.staff-card:hover .staff-card-overlay {
  opacity: 1;
}

.staff-card-overlay h3 {
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.2;
}

.staff-card-overlay p {
  margin-top: 6px;
  font-size: 0.85em;
  color: #ddd;
  line-height: 1.3;
  width: 75%;
}

/* Tablet landscape adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  .staff-card-grid {
    max-width: 600px;
    gap: 12px;
  }

  .staff-card {
    height: 200px;
  }

  .staff-card-overlay h3 {
    font-size: 1.3em;
  }

  .staff-card-overlay p {
    font-size: 0.8em;
  }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
  .staff-card-grid {
    max-width: 750px;
    gap: 18px;
  }

  .staff-card {
    height: 240px;
  }

  .staff-card-overlay {
    padding: 18px;
  }

  .staff-card-overlay h3 {
    font-size: 1.5em;
  }

  .staff-card-overlay p {
    font-size: 0.9em;
  }
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
  .staff-card {
    height: 180px;
    border-radius: 8px;
  }

  .staff-card-overlay {
    padding: 12px;
  }

  .staff-card-overlay h3 {
    font-size: 1.2em;
  }

  .staff-card-overlay p {
    font-size: 0.8em;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .staff-card {
    height: 160px;
  }

  .staff-card-overlay {
    padding: 10px;
  }

  .staff-card-overlay h3 {
    font-size: 1.1em;
  }

  .staff-card-overlay p {
    font-size: 0.75em;
  }
}

/* Ensure grid stays centered and compact */
@media (min-width: 1400px) {
  .staff-card-grid {
    max-width: 800px;
  }
}