/* =========================================================
   WPAM Showroom - Sales Terbaru "Spotlight"
   Kartu promo di awal baris + progress bar scroll + tombol
   Lihat Semua. Pakai token warna tema yang sudah ada (bukan
   palet baru) supaya tetap menyatu dengan desain "dashboard
   kendaraan".
   ========================================================= */

/* ---------- Kartu Promo (item pertama di baris) ----------
   Gambar mengisi SELURUH kartu (bukan cuma bagian atas) - teks
   eyebrow/judul jadi overlay caption di atas gambar, kartu tetap
   1 link utuh ke Link Tujuan yang diatur admin di Customizer. */

.wpam-sales-spotlight-card {
  display: block;
  position: relative;
  height: 100%;
  min-height: 260px;
  border-radius: var(--wpam-radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(150deg, var(--wpam-chrome-bg) 0%, #232a37 60%, var(--wpam-accent-dark) 130%);
  box-shadow: var(--wpam-shadow-card);
}

.wpam-sales-spotlight-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mode poster/infografis - gambar SELALU ditampilkan utuh, tidak pernah
   di-crop (cocok untuk gambar yang sudah berisi teks/tombol sendiri di
   tepinya). Kalau rasio gambar beda dari kartu, sisa ruang diisi salinan
   gambar yang sama (diburamkan+diperbesar sebagai latar), bukan warna
   polos kosong - mirip pola Instagram Stories/YouTube. */
.wpam-sales-spotlight-card--poster {
  background: var(--wpam-surface-alt);
}

.wpam-sales-spotlight-card--poster .wpam-sales-spotlight-card__img {
  object-fit: contain;
  z-index: 1;
}

.wpam-sales-spotlight-card__img-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.7) saturate(1.15);
  transform: scale(1.15);
}

.wpam-sales-spotlight-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 18px 18px;
  background: linear-gradient(0deg, rgba(20, 24, 31, 0.88) 0%, rgba(20, 24, 31, 0.35) 65%, transparent 100%);
}

.wpam-sales-spotlight-card:not(:has(.wpam-sales-spotlight-card__img)) .wpam-sales-spotlight-card__body {
  position: static;
  background: none;
  padding: 20px 18px;
}

.wpam-sales-spotlight-card__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: var(--wpam-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wpam-sales-spotlight-card__heading {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ---------- Progress bar scroll (mobile/tablet) ---------- */

.wpam-sales-spotlight__progress {
  display: none;
}

@media (max-width: 1024px) {
  .wpam-sales-spotlight__progress {
    display: block;
    height: 4px;
    margin: 10px 4px 0;
    border-radius: 999px;
    background: var(--wpam-line);
    overflow: hidden;
  }

  .wpam-sales-spotlight__progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--wpam-accent);
    transition: width 0.1s linear;
  }
}

/* ---------- Tombol Lihat Semua ---------- */

.wpam-sales-spotlight__see-all {
  margin-top: 16px;
  text-align: center;
}

.wpam-sales-spotlight__see-all .wpam-button {
  min-width: 220px;
}

@media (max-width: 640px) {
  .wpam-sales-spotlight__see-all .wpam-button {
    width: 100%;
    min-width: 0;
  }
}

/* Poster + teks: label dan judul tampil di atas gambar poster (v1.99.18) */
.wpam-sales-spotlight-card--poster .wpam-sales-spotlight-card__body{z-index:2;}

/* Mode poster (v1.99.37): TANPA latar buram. Gambar diletakkan di alur normal sehingga tinggi kartu mengikuti
   rasio gambar (gambar tampil utuh, tidak dipotong). Kartu sales di sebelahnya otomatis melar mengikuti tinggi
   baris. Bila baris ternyata lebih tinggi dari gambar, gambar ikut melar dan hanya dipotong sedikit di tepinya
   (tidak ada ruang kosong atau buram). Pakai gambar tegak (mis. 720 x 1280) supaya gambar yang menentukan tinggi baris. */
.wpam-sales-spotlight-card--poster {
  display: flex;
  flex-direction: column;
  background: var(--wpam-surface-alt);
}
.wpam-sales-spotlight-card--poster .wpam-sales-spotlight-card__img {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.wpam-sales-spotlight-card--poster .wpam-sales-spotlight-card__img-backdrop { display: none; }

/* Gambar khusus desktop (<picture>): bungkus tidak ikut membentuk tata letak, img tetap diatur aturan di atas. */
.wpam-sales-spotlight-card__pic { display: contents; }