.people-block {
  --person-card-bg: var(--wp--preset--color--blue, #1354DE);
  --person-card-bg-hover: var(--wp--preset--color--navy, #04246B);
  /* Drop a pattern SVG in here later: url("...") no-repeat center / cover */
  --person-card-pattern: none;
  /* Gap above the head — increase to push photos further down */

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 24px;
  margin-bottom: 80px;
  container-type: inline-size;
}


/* --- Card ------------------------------------------------------------- */
.person-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--border-gray, #DDDDDD);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

/* --- Media (photo + bio overlay on blue) ------------------------------ */
.person-card__media {
  position: relative;
  aspect-ratio: 1 / 1.1;
  background-color: var(--person-card-bg);
  background-image: var(--person-card-pattern);
  overflow: hidden;
  transition: background-color 0.4s ease;
}

.person-card__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  object-position: center bottom;
  transition: opacity 0.4s ease;
}

.person-card__bio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.75em;
  padding: 24px;
  overflow-y: auto;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.person-card__bio p {
  margin: 0;
  font-size: 14px;
}

/* Reveal on hover or keyboard focus */
.person-card:hover .person-card__media,
.person-card:focus-within .person-card__media {
  background-color: var(--person-card-bg-hover);
}

.person-card:hover .person-card__photo,
.person-card:focus-within .person-card__photo {
  opacity: 0;
}

.person-card:hover .person-card__bio,
.person-card:focus-within .person-card__bio {
  opacity: 1;
  transform: translateY(0);
}

/* --- Footer ----------------------------------------------------------- */
.person-card__footer {
  display: flex;
  flex-direction: column;
  padding: 20px 24px 24px;
}

.person-card__name-link {
  text-decoration: none;
  color: inherit;
}

.person-card__name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--wp--preset--color--dark-blue, #11132B);
}

.person-card__name-link:hover .person-card__name {
  text-decoration: underline;
}

.person-card__role {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--wp--preset--color--gray, #555769);
}

.person-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.person-card__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--wp--preset--color--light-gray, #EEEEF2);
  color: var(--wp--preset--color--blue, #1354DE);
  transition: background-color 0.2s ease;
}

.person-card__linkedin:hover {
  background: var(--wp--preset--color--light-blue, #ECEEF8);
}

.person-card__linkedin .vmg-icon {
  width: 18px;
  height: 18px;
}

.person-card__read-bio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  color: var(--wp--preset--color--dark-blue, #11132B);
}

.person-card__read-bio .vmg-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.person-card__read-bio:hover .vmg-icon {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .person-card__media,
  .person-card__photo,
  .person-card__bio,
  .person-card__read-bio .vmg-icon {
    transition: none;
  }

  .person-card__bio {
    transform: none;
  }
}