/* =========================================================
   Dewandaru — CARD SYSTEM (override layer)
   Identitas card sama: radius, shadow, border, hover, overlay.
   Ukuran card / grid / margin TIDAK diubah. Hanya Design Token.
   ========================================================= */

/* ---------- Listing / Feature / Destination card ---------- */
:is(
  .popular-listing .card,
  .explore-feature .card,
  .popular-cities .card,
  .list-products .card,
  .list_products .card
) {
  border: 0;
  border-radius: var(--ab-radius);
  box-shadow: var(--ab-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ab-transition), transform var(--ab-transition),
    border-color var(--ab-transition);
}

:is(
  .popular-listing .card,
  .explore-feature .card,
  .popular-cities .card,
  .list-products .card,
  .list_products .card
):hover {
  box-shadow: var(--ab-shadow-md);
  transform: translateY(-4px);
}

/* ---------- Border interior card → token ---------- */
:is(
  .popular-listing .card .card-body,
  .popular-listing .card .card-footer
) {
  border-color: var(--ab-border);
}

/* ---------- Blog card ---------- */
.blog-single-post {
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  box-shadow: var(--ab-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ab-transition), transform var(--ab-transition),
    border-color var(--ab-transition);
}
.blog-single-post:hover {
  box-shadow: var(--ab-shadow-md);
  transform: translateY(-4px);
}
.blog-single-post .post_info {
  border: 0; /* card sudah punya border luar — jangan double */
}

/* ---------- BADGE di atas card ---------- */
.card .img-block span,
.map-box .rate-info > span {
  background-color: var(--ab-badge-bg);
  border-radius: var(--ab-radius-pill);
  color: var(--ab-white);
}

/* =========================================================
   HOVER IMAGE CARD — Design System Dewandaru
   Matikan seluruh hover effect bawaan template pada image:
   - half-sweep pseudo (`:before/:after` lebar 50% -> 0)
   - slide-in blog overlay (left 50% -> 0)
   - pill "View Post" yang muncul saat hover
   Lalu terapkan hover baru: zoom gambar 1 -> 1.05 + overlay
   fade accent 0 -> 0.35, transition <- var(--ab-transition).
   Tanpa sweep, tanpa pseudo bergerak, tanpa flash warna template.
   ========================================================= */

/* ---------- Matikan sweep/pseudo template ---------- */
.card .img-block:before,
.card .img-block:after,
.popular-cities .card:before,
.popular-cities .card:after {
  content: none;
}
.blog-single-post .blog-img:before,
.agent .agent_img:before {
  content: none;
}
.blog-single-post:hover .blog-img:before,
.agent:hover .agent_img:before {
  content: none;
}
.view-post {
  display: none; /* pill "View Post" bawaan template tidak dipakai */
}

/* ---------- Zoom gambar 1 -> 1.05 ---------- */
.card .img-block img,
.blog-single-post .blog-img img {
  transform: scale(1);
  transition: transform var(--ab-transition);
}
.card:hover .img-block img,
.popular-listing .card:focus .img-block img,
.blog-single-post:hover .blog-img img {
  transform: scale(1.05);
}

/* =========================================================
   HOVER OVERLAY BARU — pakai ::after MILIK SENDIRI.
   `.img-block .overlay` (template: gradient/harga/badge)
   TIDAK disentuh sama sekali.
   Stack akhir di dalam .img-block:
     image
       ↓
     hover overlay (.img-block::after, z-index:1)
       ↓
     gradient bawaan (rate-info::before)
       ↓
     price + badge (rate-info, z-index:2)
   ========================================================= */
.card .img-block::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background-color: color-mix(in srgb, var(--ab-text) 22%, transparent); /* = rgba(0,0,0,.22) */
  opacity: 0;
  visibility: visible; /* matikan `visibility:hidden` template pada pseudo */
  pointer-events: none;
  border-radius: inherit;
  z-index: 1; /* di atas image, di bawah rate-info(z:2) */
  transition: opacity var(--ab-transition);
}
.card:hover .img-block::after,
.popular-listing .card:focus .img-block::after {
  opacity: 0.3; /* rentang 0.25 ~ 0.35 */
  left: 0;
  right: 0;
  width: auto; /* matikan sisa rule template hover (width:0) */
}

/* ---------- Overlay fade accent 0 -> 0.35 (blog card) ---------- */
/* :after blog-img tidak dipakai template -> dipakai sebagai overlay baru */
.blog-single-post .blog-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--ab-accent) 85%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ab-transition), visibility var(--ab-transition);
  z-index: 1;
}
.blog-single-post:hover .blog-img::after {
  opacity: 0.35;
  visibility: visible;
}

/* ---------- Overlay video (section video) ---------- */
.video-img:before {
  background-color: color-mix(in srgb, var(--ab-accent) 10%, transparent);
}