/* =============================================================
   DOCTOR AVATAR 4:5 OVERRIDE — Responsive for all devices
   Aspect ratio 4:5 (width:height, portrait) on every screen size
   Elemen yang kena: rail-avatar, doc-avatar, doctor-all-avatar,
   doctor-mini-avatar, doctor-profile-avatar,
   doctor-profile-modal-avatar, doc-avatar-preview (admin)
   ============================================================= */

/* Make the actual <img> fill the avatar box (cropped to 4:5) */
.rail-avatar img,
.doc-avatar img,
.doctor-all-avatar img,
.doctor-mini-avatar img,
.doctor-profile-avatar img,
.doctor-profile-modal-avatar img,
.doc-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* --- Rail card avatar (home, "Dokter Kami") --- */
.rail-avatar {
  width: 108px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* --- Doc list avatar (hasil pencarian dokter) --- */
.doc-avatar {
  width: 104px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* --- Doctors "all" grid avatar --- */
.doctor-all-avatar {
  width: 128px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* --- Doctors mini grid avatar (home, service section) --- */
.doctor-mini-avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

/* --- Doctor profile page avatar (halaman detail dokter) --- */
.doctor-profile-avatar {
  width: 168px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* --- Doctor profile modal avatar (popup detail dokter) --- */
.doctor-profile-modal-avatar {
  width: 136px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* --- Admin: preview foto dokter saat upload --- */
.doc-avatar-preview {
  width: 96px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* Small mobile (≤360px) — sedikit lebih kecil */
@media (max-width: 360px) {
  .rail-avatar { width: 88px; }
  .doc-avatar { width: 88px; }
  .doctor-all-avatar { width: 104px; }
  .doctor-profile-avatar { width: 136px; }
  .doctor-profile-modal-avatar { width: 112px; }
  .doc-avatar-preview { width: 80px; }
}

/* Mobile portrait (361–480px) */
@media (min-width: 361px) and (max-width: 480px) {
  .rail-avatar { width: 104px; }
  .doc-avatar { width: 104px; }
  .doctor-all-avatar { width: 120px; }
  .doctor-profile-avatar { width: 152px; }
  .doctor-profile-modal-avatar { width: 128px; }
  .doc-avatar-preview { width: 88px; }
}

/* Larger phones (481–600px) */
@media (min-width: 481px) and (max-width: 600px) {
  .rail-avatar { width: 116px; }
  .doc-avatar { width: 112px; }
  .doctor-all-avatar { width: 132px; }
  .doctor-profile-avatar { width: 160px; }
  .doctor-profile-modal-avatar { width: 132px; }
  .doc-avatar-preview { width: 96px; }
}

/* Tablet portrait (601–960px) */
@media (min-width: 601px) and (max-width: 960px) {
  .rail-avatar { width: 128px; }
  .doc-avatar { width: 120px; }
  .doctor-all-avatar { width: 144px; }
  .doctor-profile-avatar { width: 176px; }
  .doctor-profile-modal-avatar { width: 144px; }
  .doc-avatar-preview { width: 104px; }
}

/* Tablet landscape / small desktop (961–1200px) */
@media (min-width: 961px) and (max-width: 1200px) {
  .rail-avatar { width: 140px; }
  .doc-avatar { width: 128px; }
  .doctor-all-avatar { width: 156px; }
  .doctor-profile-avatar { width: 184px; }
  .doctor-profile-modal-avatar { width: 152px; }
  .doc-avatar-preview { width: 112px; }
}

/* Large desktop (≥1201px) */
@media (min-width: 1201px) {
  .rail-avatar { width: 152px; }
  .doc-avatar { width: 136px; }
  .doctor-all-avatar { width: 168px; }
  .doctor-profile-avatar { width: 200px; }
  .doctor-profile-modal-avatar { width: 160px; }
  .doc-avatar-preview { width: 120px; }
}