/* =============================================================
   PROMO PHOTO 4:5 / 9:16 OVERRIDE — foto promo tampil penuh
   Dipakai di 3 tempat:
   - .promo-card-photo    : kartu promo publik (Tab Harga & Promo)
   - .promo-admin-photo   : kartu daftar promo di Admin Panel
   - .promo-photo-preview : preview langsung saat admin upload/edit foto
   Rasio kotak foto otomatis menyesuaikan antara potret 4:5 (format
   feed) dan 9:16 (format story) mengikuti ukuran asli foto yang
   diupload (lihat fitPromoPhotoBox() di js/app.js), supaya foto
   promo tampil penuh dan tidak terpotong aneh.
   ============================================================= */

.promo-card-photo,
.promo-admin-photo,
.promo-photo-preview {
  width: 100%;
  aspect-ratio: 4 / 5; /* nilai awal sebelum ukuran asli foto diketahui */
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  position: relative;
  flex-shrink: 0;
}

.promo-card-photo img,
.promo-admin-photo img,
.promo-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- Kartu promo publik (Tab Harga & Promo) --- */
.promo-card-photo {
  max-width: 320px;
  margin: 2px 0 12px;
  box-shadow: 0 8px 20px rgba(230, 57, 87, .14);
}

/* --- Kartu daftar promo di Admin Panel --- */
.promo-admin-photo {
  max-width: 260px;
  margin-bottom: 4px;
}

/* --- Preview langsung di form tambah/edit promo (Admin Panel) --- */
.promo-photo-preview {
  width: 130px;
  max-width: 130px;
}

@media (max-width: 360px) {
  .promo-card-photo { max-width: 100%; }
  .promo-photo-preview { width: 104px; }
}

@media (min-width: 601px) and (max-width: 960px) {
  .promo-card-photo { max-width: 280px; }
}

@media (min-width: 961px) {
  .promo-card-photo { max-width: 300px; }
}