/* ==========================================================================
   COMPONENTS / gambar-preview-grid / gambar-preview-grid.css
   --------------------------------------------------------------------------
   Styling untuk galeri foto PRODUK YANG SUDAH TERSIMPAN — dipakai di 2
   tempat: #galeriGambarTersimpan (tab Photos, di dalam dialog form produk,
   lihat _form_upload.php) dan #gambarGrid (galeri utama di detail.php).
   Markup di-generate oleh renderGambarTab()/renderGambar() di product.js.

   BEDA DENGAN upload-preview.css : upload-preview.css menstyle preview file
   yang BARU DIPILIH, belum diupload (.upload-preview-item, dst — daftar
   vertikal dengan nama file & progress bar). File ini menstyle foto yang
   SUDAH ADA di server — grid thumbnail visual, tanpa nama file/progress,
   dengan aksi jadikan-utama/hapus. Dua konteks berbeda, class berbeda,
   sengaja tidak digabung.

   Class yang di-generate JS (TIDAK BOLEH diganti nama tanpa update
   product.js juga) :
     .gambar-preview-grid   → wrapper grid (#galeriGambarTersimpan / #gambarGrid)
     .gambar-item           → 1 kartu foto
     .gambar-item.gambar-primary → modifier saat is_primary == 1
     .btn-gambar-primary    → tombol "jadikan utama" (icon-trophy)
     .btn-gambar-hapus      → tombol hapus (icon-ui-delete)

   DEPENDS ON: tokens/_colors.css, tokens/_semantic.css, tokens/_spacing.css,
   tokens/_elevation.css, tokens/_typography.css, tokens/_motion.css

   Dipakai bersama: _form_upload.php, product.js (renderGambarTab/renderGambar)
   ========================================================================== */

/* --------------------------------------------------------------------------
   GRID WRAPPER
   auto-fill + minmax, BUKAN repeat(6, 1fr) kaku — supaya jumlah kolom
   menyesuaikan lebar dialog (lg = 720px muat ~5-6 kolom @ minmax 96px),
   tanpa perlu media query terpisah utk tiap breakpoint dialog size.
   -------------------------------------------------------------------------- */
.gambar-preview-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap:                   var(--size-300);
}

/* --------------------------------------------------------------------------
   KARTU FOTO
   -------------------------------------------------------------------------- */
.gambar-item {
  position:      relative;
  aspect-ratio:  1 / 1;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--color-bg-sunken);
  border:        1px solid var(--color-border-default);
  box-shadow:    var(--shadow-xs);
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow   var(--duration-fast) var(--ease-default);
}

.gambar-item:hover {
  border-color: var(--color-border-strong);
  box-shadow:   var(--shadow-sm);
}

.gambar-item picture,
.gambar-item img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   MODIFIER — gambar utama
   Border brand + badge trofi pojok kiri-atas, SELALU terlihat (beda dari
   tombol aksi yang hover-only) — status "ini yang utama" harus kebaca
   sekilas tanpa perlu hover dulu.
   -------------------------------------------------------------------------- */
.gambar-item.gambar-primary {
  border-color: var(--color-brand);
  box-shadow:   0 0 0 1px var(--color-brand);
}

.gambar-item.gambar-primary::before {
  content:         "";
  position:        absolute;
  inset:           0;
  pointer-events:  none;
  /* Vignette halus di bagian bawah supaya badge trofi & tombol aksi
     (putih/terang) tetap kebaca di atas foto apa pun, tanpa perlu
     overlay solid permanen yang menutupi foto. */
  background: linear-gradient(
    to top,
    hsla(0, 0%, 0%, 0.35) 0%,
    hsla(0, 0%, 0%, 0) 45%
  );
  opacity:    0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.gambar-item.gambar-primary:hover::before,
.gambar-item:hover::before {
  opacity: 1;
}

.gambar-badge-primary {
  position:        absolute;
  top:             var(--size-200);
  left:            var(--size-200);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--size-600);
  height:          var(--size-600);
  border-radius:   var(--radius-full);
  background:      var(--color-brand);
  color:           var(--color-text-inverse);
  box-shadow:       var(--shadow-sm);
}

.gambar-badge-primary svg {
  width:  var(--size-icon-sm);
  height: var(--size-icon-sm);
}

/* --------------------------------------------------------------------------
   AKSI (jadikan utama / hapus) — HOVER-ONLY
   Disatukan di 1 baris di dasar kartu, fade-in bareng vignette di atas.
   Baik .gambar-item biasa maupun .gambar-primary sama-sama pakai
   mekanisme hover yang sama (opacity 0 → 1) — TIDAK butuh :focus-within
   krn tombol type="button" biasa, bukan link ber-tab-index custom, jadi
   fokus keyboard native (Tab) akan otomatis trigger :focus pada tombol
   itu sendiri, cukup ditambah kontras via :focus-visible di bawah tanpa
   perlu menampilkan seluruh overlay.
   -------------------------------------------------------------------------- */
.gambar-item-actions {
  position:        absolute;
  left:            0;
  right:           0;
  bottom:          0;
  display:         flex;
  justify-content: center;
  gap:             var(--size-200);
  padding:         var(--size-200);
  opacity:         0;
  transform:       translateY(4px);
  transition:
    opacity   var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

.gambar-item:hover .gambar-item-actions,
.gambar-item:focus-within .gambar-item-actions {
  opacity:   1;
  transform: translateY(0);
}

.btn-gambar-primary,
.btn-gambar-hapus {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--size-700);
  height:          var(--size-700);
  border:          none;
  border-radius:   var(--radius-full);
  background:      var(--color-bg-surface);
  color:           var(--color-text-secondary);
  cursor:          pointer;
  padding:         0;
  box-shadow:      var(--shadow-sm);
  transition:      var(--transition-interactive);
}

.btn-gambar-primary svg,
.btn-gambar-hapus svg {
  width:  var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.btn-gambar-primary:hover {
  background: var(--color-brand-subtle);
  color:      var(--color-brand-text);
  transform:  scale(1.08);
}

/* Kartu yang SUDAH primary: tombol "jadikan utama" tidak relevan lagi —
   diredupkan & dimatikan interaksinya, bukan disembunyikan total, supaya
   tinggi/posisi tombol hapus di sebelahnya tidak ikut geser (layout
   shift) antara kartu primary dan non-primary dalam 1 grid. */
.gambar-item.gambar-primary .btn-gambar-primary {
  opacity:        0.4;
  pointer-events: none;
}

.btn-gambar-hapus:hover {
  background: var(--color-error-subtle);
  color:      var(--color-error);
  transform:  scale(1.08);
}

.btn-gambar-primary:focus-visible,
.btn-gambar-hapus:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — dialog full-width di mobile (lihat custom-dialog-form.css,
   breakpoint 639px), kolom minimum diperkecil supaya tetap 3-4 kolom
   kebaca di layar sempit, bukan 1-2 kolom raksasa.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .gambar-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: var(--size-200);
  }
}