/* Shared portrait framing. Keep the original photographs and their proportions;
   do not stretch, retouch, or apply person-specific zoom to doctors' faces. */
#doctor-results .catalog-card > img,
.clinic-snap #doctors .catalog-card > img,
.related-doctor-grid .catalog-card > img,
.doctor-grid .doctor-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  flex: 0 0 auto;
  background: #e7ebdf;
}

/* An initials tile occupies the same space as a photograph. */
#doctor-results .catalog-card > .doctor-placeholder,
.clinic-snap #doctors .catalog-card > .doctor-placeholder,
.related-doctor-grid .catalog-card > .doctor-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  background: #e7ebdf;
  color: #54704c;
  font: 60px/1 Georgia, serif;
}

/* Scope profile framing to doctors, leaving allied-health logos untouched. */
.profile-hero > img[alt^="Dr "] {
  display: block;
  width: 100%;
  max-width: 390px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  justify-self: start;
  background: #e7ebdf;
}

/* Keep the supplied wide photograph and generic placeholder fully visible. */
.profile-hero > img[src*="Dr-Sally-Lapin-1"],
.profile-hero > img[src*="avatar-placeholder"] {
  object-fit: contain;
  object-position: center;
}

/* Navigation already uses the site's square 200px thumbnails. */
.fc-doctor-panel .fc-roster a > img,
.fc-doctor-panel .fc-roster a > .initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  flex: 0 0 42px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #e7ebdf;
}

@media (max-width: 700px) {
  .profile-hero > img[alt^="Dr "] {
    max-width: 300px;
    margin-inline: auto;
    justify-self: center;
  }
}

@media (max-width: 350px) {
  .profile-hero > img[alt^="Dr "] {
    max-width: 260px;
  }
}