/*
 * BestVinhomes Listings — Grid (Giỏ hàng)
 * Port từ: File thiết kế mẫu/Listing Grid.html
 *
 * Scope: mọi rule dưới .bvl-grid
 * Variables: dùng --bvl-* từ design-system.css
 * Hover: PHẲNG — chỉ border-color + mũi tên translateX.
 *        KHÔNG transform card, KHÔNG box-shadow, KHÔNG zoom ảnh.
 * Chống theme Houzez: !important cho font-size / color / margin / text-decoration.
 *
 * Version: 1.0.12
 */

/* ═══════════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════════ */
.bvl-grid .bvl-grid-sec {
  background: transparent;   /* bỏ nền — để trang chứa shortcode tự quyết */
  padding: clamp(40px, 6vw, 88px) 0;
}

.bvl-grid .bvl-grid-inner {
  max-width: var(--bvl-maxw);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px);
}

/* ═══════════════════════════════════════════════
   CARD GRID — 3 cột desktop
═══════════════════════════════════════════════ */
.bvl-grid .bvl-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 1080px) {
  .bvl-grid .bvl-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 560px) {
  .bvl-grid .bvl-card-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ═══════════════════════════════════════════════
   LISTING CARD (thẻ <a>)
═══════════════════════════════════════════════ */
.bvl-grid .bvl-lcard {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff;   /* thân card trắng như mẫu (--bg-card gốc) */
  border: 1px solid var(--bvl-line);
  border-radius: 18px;   /* khớp --r-card file gốc */
  overflow: hidden;   /* clip ảnh vào border-radius card */
  text-decoration: none !important;
  color: var(--bvl-ink) !important;
  transition: border-color .22s ease;
  cursor: pointer;
}

/* Chống a:hover { color: cam } của Houzez ở mọi trạng thái */
.bvl-grid .bvl-lcard:hover,
.bvl-grid .bvl-lcard:focus,
.bvl-grid .bvl-lcard:active,
.bvl-grid .bvl-lcard:visited {
  color: var(--bvl-ink) !important;
  text-decoration: none !important;
}

/* Hover phẳng: chỉ đổi border */
.bvl-grid .bvl-lcard:hover {
  border-color: var(--bvl-gold-line) !important;
}

/* ═══════════════════════════════════════════════
   CARD IMAGE — aspect ratio 4:3
═══════════════════════════════════════════════ */
.bvl-grid .bvl-lcard-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bvl-gold-tint);
  overflow: hidden;
  flex-shrink: 0;
}

.bvl-grid .bvl-lcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* KHÔNG transition transform — không zoom ảnh khi hover */
}

/* ═══════════════════════════════════════════════
   CARD BODY
═══════════════════════════════════════════════ */
.bvl-grid .bvl-lcard-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ── Pills ── */
.bvl-grid .bvl-lcard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px !important;
}

.bvl-grid .bvl-lcard-pills span {
  font-family: var(--bvl-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  color: var(--bvl-ink) !important;
  background: var(--bvl-paper-card);
  border: 1px solid var(--bvl-line);
  border-radius: 999px;
  padding: 6px 13px;
  line-height: 1.5 !important;
}

/* ── Title ── */
.bvl-grid .bvl-lcard h4 {
  font-family: var(--bvl-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  color: var(--bvl-ink) !important;
  margin: 0 0 10px !important;
}

/* ── Short desc — clamp 2 dòng ── */
.bvl-grid .bvl-lcard p {
  font-family: var(--bvl-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bvl-ink-soft) !important;
  margin: 0 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Rule — đẩy footer xuống đáy ── */
.bvl-grid .bvl-lcard-rule {
  flex: 1 1 auto;
  min-height: 16px;
  border: 0;
  margin: 0;
}

/* ── Card footer ── */
.bvl-grid .bvl-lcard-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--bvl-line-soft);
}

/* ── Price ── */
.bvl-grid .bvl-lcard-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.bvl-grid .bvl-lcard-price b {
  font-family: var(--bvl-serif) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--bvl-gold-deep) !important;
  letter-spacing: -.01em;
}

.bvl-grid .bvl-lcard-price small {
  font-family: var(--bvl-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--bvl-ink-soft) !important;
}

/* ── "Xem →" ── */
.bvl-grid .bvl-lcard-view {
  font-family: var(--bvl-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bvl-gold-deep) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.bvl-grid .bvl-arr {
  display: inline-block;
  transition: transform .2s ease;
}

/* Chỉ mũi tên translateX — card không nhấc, ảnh không zoom */
.bvl-grid .bvl-lcard:hover .bvl-arr {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL
   Chỉ áp khi người dùng KHÔNG prefer reduced motion
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .bvl-grid .bvl-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .45s ease, transform .45s ease;
  }

  .bvl-grid .bvl-reveal.bvl-in {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE FINE-TUNE
═══════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* Ảnh giữ tỉ lệ gốc — thẻ co/giãn theo ảnh, không crop 4:3 */
  .bvl-grid .bvl-lcard-img {
    aspect-ratio: auto !important;
  }
  .bvl-grid .bvl-lcard-img img {
    height: auto !important;
    object-fit: contain;
  }

  /* Mô tả hiện đầy đủ — bỏ clamp 2 dòng */
  .bvl-grid .bvl-lcard p {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }

  .bvl-grid .bvl-lcard-body {
    padding: 16px 18px 18px;
  }

  .bvl-grid .bvl-lcard h4 {
    font-size: 16px !important;
  }

  .bvl-grid .bvl-lcard-price b {
    font-size: 19px !important;
  }
}

/* ═══ Theme Thuê — grid emerald ═══
   .bvl-grid--rent (đặt trên wrapper bởi [bds_rent_grid]) ghi đè biến gold → emerald.
   Đổi màu 4 chỗ accent: viền hover, nền tint, số giá, mũi tên "Xem →". */
.bvl-grid--rent {
  --bvl-gold:      #1b6b5a;
  --bvl-gold-deep: #145446;
  --bvl-gold-tint: rgba(27,107,90,.12);
  --bvl-gold-line: rgba(27,107,90,.34);
}

/* Pill grid Thuê: nền xanh nhẹ theo theme (thay nền trung tính của Bán) */
.bvl-grid--rent .bvl-lcard-pills span {
  background: var(--bvl-gold-tint);
  border-color: var(--bvl-gold-line);
}

/* ── Pagination số trang ───────────────────────────── */
.bvl-pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:36px; font-family:'Inter',sans-serif; }
.bvl-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border:1px solid #e4e4e4; border-radius:10px; background:#fff; color:#333; font-size:15px; font-weight:500; text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.bvl-pagination a.page-numbers:hover { border-color:#b5b5b5; }
.bvl-pagination .page-numbers.current { color:#fff; border-color:transparent; }
.bvl-pagination--sale .page-numbers.current { background:#B85030; }
.bvl-pagination--rent .page-numbers.current { background:#1B6B5A; }
.bvl-pagination .page-numbers.dots { border:none; background:transparent; }