/* =========================================================
   WPAM Showroom - Kartu Grid Sales/Promo ala OLX (Tahap 2)

   File ini SENGAJA dimuat PALING TERAKHIR (lihat functions.php,
   setelah frontend.css milik plugin) supaya override di sini pasti
   menang di cascade. Beberapa properti kunci tetap dipasangi
   !important sebagai jaring pengaman kalau urutan file CSS
   berubah di kemudian hari (pola yang sama sudah dipakai di
   quick-menu.css untuk alasan serupa).

   Prinsip OLX yang ditiru: kartu lebih ringkas (padding & font
   dikecilkan), teks deskripsi (excerpt) disembunyikan supaya fokus
   ke gambar + judul + harga/info singkat + tombol aksi, dan kolom
   lebih rapat/banyak di layar lebar.
   ========================================================= */

.wpam-grid {
  gap: 14px !important;
}

/* Layar sangat lebar: kartu boleh lebih rapat lagi (4 kolom) kalau
   grid ini semula diatur 3 kolom - opsional, tidak mengganggu kalau
   selector kolom milik plugin berbeda dari dugaan di sini. */
@media (min-width: 1400px) {
  .wpam-grid.columns-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.wpam-card--sales .wpam-card__content,
.wpam-card--promo .wpam-card__content {
  padding: 12px !important;
}

.wpam-card--sales .wpam-card__title,
.wpam-card--promo .wpam-card__title {
  font-size: 14px !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}

/* Excerpt disembunyikan di kartu Sales/Promo (bukan di kartu Berita) -
   ala OLX, listing produk fokus ke gambar+judul+harga, bukan paragraf. */
.wpam-card--sales .wpam-card__excerpt,
.wpam-card--promo .wpam-card__excerpt {
  display: none !important;
}

.wpam-card--sales .wpam-card__sales,
.wpam-card--promo .wpam-card__sales {
  font-size: 12px !important;
  margin-bottom: 2px !important;
}

.wpam-card--promo .wpam-card__price {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.wpam-card--sales .wpam-card__actions,
.wpam-card--promo .wpam-card__actions {
  gap: 6px !important;
  margin-top: 8px !important;
}

.wpam-card--sales .wpam-card__actions .wpam-button,
.wpam-card--promo .wpam-card__actions .wpam-button {
  padding: 7px 10px !important;
  font-size: 12px !important;
}

.wpam-card--sales .wpam-card__posted,
.wpam-card--promo .wpam-card__posted {
  font-size: 11px !important;
  color: var(--wpam-ink-faint) !important;
  margin-bottom: 4px !important;
}

.wpam-card--sales .wpam-card__banner img,
.wpam-card--promo .wpam-card__thumb img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Kartu di dalam CAROUSEL (mode lama) MAUPUN grid Grid+Carousel-Tanpa-Henti
   (mode baru, dipakai Sales Terbaru dkk) dipaksa tinggi seragam - beda
   jumlah baris info (Sales vs Promo vs Iklan) tidak lagi bikin kartu jadi
   beda tinggi/tumpang tindih, konsisten di mobile/tablet/desktop. */
.wpam-carousel__item {
  align-items: stretch !important;
}

.wpam-carousel__item .wpam-card,
.wpam-grid > .wpam-card,
.wpam-grid--infinite-mobile > *,
.wpam-reco-item {
  height: 100% !important;
  width: 100% !important;
  align-self: stretch !important;
}

/* Jaga-jaga kalau skrip auto-inject iklan milik plugin membungkus
   .wpam-card--ad dengan elemen tambahan (bukan langsung anak dari
   .wpam-grid) - paksa kartu iklan tetap 100% tinggi & ikut melar
   mengikuti baris flex/grid-nya, apa pun struktur pembungkusnya. */
.wpam-card--ad,
.wpam-card--ad-internal {
  height: 100% !important;
  align-self: stretch !important;
}

/* KHUSUS section Sales Terbaru & Rekomendasi Untukmu (Beranda): kartu
   diseragamkan tingginya dengan STRETCH alami (height:100% mengikuti
   baris grid/flex-nya), BUKAN lagi tinggi tetap+overflow:hidden seperti
   versi sebelumnya - itu ternyata memotong konten yang lebih tinggi
   dari batasnya (mis. tombol Chat WA ikut terpotong/hilang kalau
   konten kartu kepanjangan). Dengan stretch alami, tidak ada konten
   yang pernah hilang - kartu pendek (iklan/promo minim info) melar
   mengisi ruang kosong, kartu panjang tetap utuh apa adanya. Tombol
   aksi tetap rapi menempel di bawah lewat margin-top:auto (lihat
   aturan .wpam-card__actions di bawah). */
.wpam-sales-spotlight-wrap .wpam-card,
.wpam-sales-spotlight-wrap .wpam-sales-spotlight-card,
.wpam-reco .wpam-card {
  height: 100% !important;
}

.wpam-reco-item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.wpam-sales-spotlight-wrap .wpam-card__banner,
.wpam-sales-spotlight-wrap .wpam-card--ad > a > img,
.wpam-reco .wpam-card__thumb,
.wpam-reco .wpam-card__banner,
.wpam-reco .wpam-sales-avatar-wrap {
  max-height: 180px !important;
}

/* .wpam-sales-spotlight-card__img SENGAJA tidak dibatasi 180px lagi -
   sejak didesain ulang jadi "full gambar" (lihat sales-spotlight.css),
   gambar promo harus mengisi 100% tinggi kartu, bukan dipotong 180px. */

/* Fallback gambar promo (belum upload gambar & belum ada Gambar Promo
   Default di Customizer) - kotak polos dengan ikon tag, supaya badge
   (Unggulan/Spotlight/harga) tetap punya tempat menempel yang benar
   dan tinggi kartu tetap konsisten dengan kartu lain. */
.wpam-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 140px;
  background: var(--wpam-surface-alt);
  color: var(--wpam-ink-faint);
}

.wpam-card__thumb-placeholder svg {
  width: 32px;
  height: 32px;
}

/* Kartu Berita: tinggi seragam mengikuti stretch alami dari .wpam-grid
   (aturan generik di atas sudah menyamakan tinggi LUAR-nya), di sini
   cuma menambahkan tata letak flex-column di DALAM kartu supaya tombol
   "Baca Selengkapnya" selalu menempel di bawah - jadi kartu dengan judul/
   ringkasan pendek maupun panjang tetap terlihat rapi sejajar, tanpa
   ada yang kepotong (pola yang sama seperti kartu Sales/Promo). */
.wpam-card--news {
  display: flex !important;
  flex-direction: column !important;
}

.wpam-card--news .wpam-card__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.wpam-card--news .wpam-card__excerpt {
  flex: 1 !important;
}

.wpam-card--news .wpam-button {
  margin-top: auto !important;
  align-self: flex-start;
}

.wpam-card--sales,
.wpam-card--promo,
.wpam-card--ad {
  display: flex !important;
  flex-direction: column !important;
}

.wpam-card--sales .wpam-card__content,
.wpam-card--promo .wpam-card__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.wpam-card--sales .wpam-card__actions,
.wpam-card--promo .wpam-card__actions {
  margin-top: auto !important;
}

@media (max-width: 640px) {
  .wpam-grid {
    gap: 10px !important;
  }
}

/* =========================================================
   Slot Iklan/Banner Plugin (WPAM_Ads) - disisipkan OTOMATIS oleh
   JavaScript plugin sendiri ke semua grid kartu sales/promo di
   manapun (Beranda, Promo, Cari Sales, carousel, dst). Tema TIDAK
   perlu memanggil/menyisipkan apa pun - ini murni restyle visual
   dari markup yang sudah pasti plugin hasilkan:

   Versi iklan eksternal:
     <article class="wpam-card wpam-card--ad">
       <a href="..." target="_blank">
         <img src="...">
         <span class="wpam-ad-label">Iklan</span>
       </a>
     </article>

   Versi ajakan upgrade plan (fallback, sales login non-Premium):
     <article class="wpam-card wpam-card--ad wpam-card--ad-internal">
       <a href="...">
         <div class="wpam-ad-internal__content">
           <strong>Upgrade ke Premium</strong>
           <p>...</p>
           <span class="wpam-button wpam-button--small">Coba Sekarang</span>
         </div>
       </a>
     </article>

   .wpam-card--ad dipakai BERSAMA .wpam-card, jadi otomatis mewarisi
   box dasar (border/radius/shadow) dari frontend.css plugin - di
   sini cuma menambah pembeda visual (garis putus-putus) + menata
   isi link/gambar/label/CTA supaya senada kartu sales/promo lain.
   ========================================================= */

.wpam-card--ad {
  position: relative !important;
  border-style: dashed !important;
  border-color: var(--wpam-line-strong) !important;
}

.wpam-card--ad > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.wpam-card--ad img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wpam-ad-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.65);
  color: #fff;
  font-family: var(--wpam-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Jaga-jaga: pastikan foto profil (asli MAUPUN Foto Default dari
   Customizer) selalu tampil ter-crop rapi mengisi kotak avatar - bukan
   gepeng atau kepotong aneh, apa pun rasio asli gambarnya. Ukuran kotak
   (lebar/tinggi) sendiri tetap ikut aturan plugin/tema di tempat lain -
   ini cuma memastikan PERLAKUAN gambar di dalamnya konsisten. */
.wpam-sales-avatar-wrap img.wpam-sales-avatar,
.wpam-single-hero__avatar img.wpam-sales-avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: 1 / 1;
}
.wpam-sales-avatar--placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--wpam-accent), var(--wpam-accent-dark));
  color: #fff;
  font-family: var(--wpam-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

.wpam-single-hero__avatar .wpam-sales-avatar--placeholder {
  font-size: 40px;
}

@media (max-width: 640px) {
  .wpam-single-hero__avatar .wpam-sales-avatar--placeholder {
    font-size: 30px;
  }
}

/* Badge Spotlight (boost) di kartu grid Sales/Promo dipindah ke kanan,
   konsisten dengan badge Rekomendasi (Baru/Unggulan/Premium) - keduanya
   tidak pernah tampil bersamaan di kartu yang sama, jadi aman disamakan.
   TIDAK menimpa posisi Spotlight di single-profile (chip merek/kota),
   itu ditangani terpisah lewat selector .wpam-card__meta-top yang
   sengaja beda konteks. */
.wpam-card--sales .wpam-boost-badge,
.wpam-card--promo .wpam-boost-badge {
  left: auto !important;
  right: 10px !important;
}

/* Fallback ajakan upgrade plan */
.wpam-card--ad-internal {
  border-style: solid !important;
  border-color: var(--wpam-accent) !important;
}

.wpam-ad-internal__content {
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 200px;
  background: linear-gradient(160deg, var(--wpam-accent-soft) 0%, var(--wpam-surface) 65%);
}

.wpam-ad-internal__content strong {
  font-family: var(--wpam-font-display);
  font-size: 17px;
  color: var(--wpam-ink);
}

.wpam-ad-internal__content p {
  margin: 0;
  font-size: 13px;
  color: var(--wpam-ink-soft);
  line-height: 1.5;
}

.wpam-ad-internal__content .wpam-button {
  margin-top: 4px;
  pointer-events: none; /* seluruh kartu sudah jadi link tunggal (<a>), tombol di dalamnya murni visual */
}

/* Thumbnail kartu berita: 16:9, dipotong di tengah (tidak terlalu tinggi) */
.wpam-card--news .wpam-card__thumb { display: block; overflow: hidden; }
.wpam-card--news .wpam-card__thumb img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Halaman single (promo/sales): kartu "Sales Penawar" & rekomendasi di desktop tidak boleh kebesaran.
   auto-fill menjaga lebar kartu ~190-240px walau jumlahnya sedikit (kolom kosong tetap dihitung). */
@media (min-width: 768px) {
  .wpam-single-promo__sales .wpam-grid,
  .wpam-related-section .wpam-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  }
}
@media (min-width: 1100px) {
  .wpam-single-promo__sales .wpam-grid,
  .wpam-related-section .wpam-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  }
}

/* ---------- Kartu promo: tinggi seragam, dengan gambar, gambar default, maupun tanpa gambar ---------- */
.wpam-card--promo .wpam-card__thumb {
  display: block !important;
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: none !important;
  overflow: hidden;
  background: var(--wpam-surface-alt, #f1f2f5);
}
.wpam-card--promo .wpam-card__thumb > img,
.wpam-reco .wpam-card--promo .wpam-card__thumb > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover;
}
.wpam-card--promo .wpam-card__thumb .wpam-card__thumb-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.wpam-reco .wpam-card--promo .wpam-card__thumb {
  max-height: none !important;
}
.wpam-card--promo .wpam-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}
/* Semua baris grid Rekomendasi (desktop) sama tinggi, bukan hanya kartu dalam satu baris. */
.wpam-reco .wpam-grid:not(.wpam-grid--infinite-mobile-active) {
  grid-auto-rows: 1fr;
}
@media (max-width: 767px) {
  .wpam-reco .wpam-grid--infinite-mobile { align-items: stretch; }
}

/* Mode carousel (<=1024px, container flex): height:100% tidak bisa dihitung sehingga item tidak ikut "stretch".
   - Item pembungkus (Rekomendasi): flex baris, kartu di dalamnya otomatis melar setinggi item.
   - Kartu langsung sebagai item (Sales Terbaru, Promo Aktif, Berita, dst): cukup height:auto agar ikut stretch.
   Selector sengaja TIDAK memakai "> *" supaya kartu tidak ikut berubah menjadi flex baris. */
@media (max-width: 1024px) {
  .wpam-grid--infinite-mobile > .wpam-reco-item {
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }
  .wpam-grid--infinite-mobile > .wpam-reco-item > .wpam-card {
    height: auto !important;
    flex: 1 1 0;
    min-width: 0;
  }
  .wpam-grid--infinite-mobile > .wpam-card {
    height: auto !important;
  }
}