/* ===========================
   Reprecinct Property Listings – Frontend (Grid + Card)
   =========================== */

/* --- Base wrappers / notices --- */
.rpl-wrap {
  margin: 1.5rem 0;
}
.rpl-notice {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #f6f7f7;
}
.rpl-error {
  background: #fde8e8;
  color: #8a1f11;
}
.rpl-empty {
  background: #f6f7f7;
  color: #50575e;
}

/* =====================================================
   GRID WRAPPER
   - Uses CSS variables for columns & gap
   - Shortcode prints data-rpl-grid + inline style:
     --rpl-grid-cols-desktop, --rpl-grid-cols-tablet,
     --rpl-grid-cols-mobile, --rpl-grid-gap
   ===================================================== */
.rpl-grid {
  /* sensible defaults (when variables not provided inline) */
  --rpl-grid-cols-desktop: 3;
  --rpl-grid-cols-tablet: 2;
  --rpl-grid-cols-mobile: 1;
  --rpl-grid-gap: 24px;

  display: grid;
  grid-template-columns: repeat(var(--rpl-grid-cols-desktop), minmax(0, 1fr));
  gap: var(--rpl-grid-gap);
}

/* Tablet */
@media (max-width: 1024px) {
  .rpl-grid {
    grid-template-columns: repeat(var(--rpl-grid-cols-tablet), minmax(0, 1fr));
  }
}
/* Mobile */
@media (max-width: 640px) {
  .rpl-grid {
    grid-template-columns: repeat(var(--rpl-grid-cols-mobile), minmax(0, 1fr));
  }
}

/* Ensure shortcode grid always respects its variables and
   doesn't get affected by legacy/global themes */
.rpl-wrap .rpl-grid[data-rpl-grid] {
  display: grid !important;
  grid-template-columns: repeat(
    var(--rpl-grid-cols-desktop),
    minmax(0, 1fr)
  ) !important;
  gap: var(--rpl-grid-gap) !important;
}
@media (max-width: 1024px) {
  .rpl-wrap .rpl-grid[data-rpl-grid] {
    grid-template-columns: repeat(
      var(--rpl-grid-cols-tablet),
      minmax(0, 1fr)
    ) !important;
  }
}
@media (max-width: 640px) {
  .rpl-wrap .rpl-grid[data-rpl-grid] {
    grid-template-columns: repeat(
      var(--rpl-grid-cols-mobile),
      minmax(0, 1fr)
    ) !important;
  }
}

/* VERY IMPORTANT:
   Never let cards force manual column spans (old 12-col behavior). */
.rpl-grid[data-rpl-grid] .rpl-card {
  grid-column: auto !important;
}

/* =====================================================
   CARD BASICS (shared by grid & slider)
   ===================================================== */
.rpl-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

/* Media / thumbnail */
.rpl-card__media {
  position: relative;
  background: #f0f3f7;
}

.rpl-card__thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.rpl-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rpl-card__thumb--placeholder {
  width: 100%;
  height: 100%;
  background: #f2f4f7;
}

/* Badges */
.rpl-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #0b7285; /* type badge */
  padding: 6px 10px;
  border-radius: 999px;
}
.rpl-badge--status {
  /* status badge (right side) */
  right: 12px;
  left: auto;
  background: #1e7e34;
}

/* Body / content */
.rpl-card__body {
  padding: 16px 18px 12px;
}

.rpl-card__title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
}
.rpl-card__title a {
  text-decoration: none;
  color: #111;
}
.rpl-card__title a:hover {
  text-decoration: underline;
}

.rpl-card__address {
  color: #556;
  font-size: 14px;
  margin-bottom: 10px;
}

/* Meta pills (price, area, etc.) */
.rpl-card__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rpl-meta__item {
  font-size: 13px;
  padding: 6px 10px;
  background: #eef3f7;
  border-radius: 999px;
}

/* Footer / CTA (used on grid variant A) */
.rpl-card__footer {
  padding: 0 18px 18px;
}
.rpl-card__cta {
  display: inline-block;
  padding: 10px 16px;
  background: #0b7285;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
}
.rpl-card__cta:hover {
  filter: brightness(1.05);
}

/* =====================================================
   CAPTION VARIANT (Grid Layout 2)
   - Image → kicker (type) → title
   ===================================================== */
.rpl-card--caption .rpl-card__body {
  padding: 14px 16px 16px;
}

.rpl-card__kicker {
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #0b7285;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.rpl-card--caption .rpl-card__title {
  font-size: 18px;
  margin-bottom: 4px;
}

.rpl-card__caption-meta {
  font-size: 16px;
  font-weight: 600;
  color: #111;
}

/* =====================================================
   OPTIONAL: Slim variant (used in slider standard card)
   ===================================================== */
.rpl-card--slim .rpl-card__body {
  padding: 14px 16px 12px;
}

/* =========================
   Featured Grid (1 big + 4 small)
   ========================= */

/* Featured Grid – perbaiki overflow kanan & samakan tinggi */
.rpl-wrap .rpl-grid-featured[data-rpl-gf] {
  display: grid !important;
  gap: calc(var(--rpl-gf-gap, 24) * 1px) !important;
  grid-template-columns: 1fr; /* mobile stack */
}

/* ===== Featured Grid – fix span, gap, dan tinggi kolom ===== */
.rpl-wrap .rpl-grid-featured[data-rpl-gf] {
  display: grid !important;
  gap: calc(var(--rpl-gf-gap, 24) * 1px) !important;
  grid-template-columns: 1fr; /* mobile stack */
}

/* urutan kolom (default: main kiri; bisa diubah data-main="right") */
.rpl-grid-featured[data-rpl-gf] .rpl-gf-main {
  order: 0;
}
.rpl-grid-featured[data-rpl-gf] .rpl-gf-side {
  order: 1;
}
.rpl-grid-featured[data-rpl-gf][data-main='right'] .rpl-gf-main {
  order: 1;
}
.rpl-grid-featured[data-rpl-gf][data-main='right'] .rpl-gf-side {
  order: 0;
}

@media (min-width: 1024px) {
  .rpl-wrap .rpl-grid-featured[data-rpl-gf] {
    grid-template-columns: 1fr 1fr; /* 50/50 */
    align-items: stretch;
  }
}

/* grid sisi kanan: 2 kolom, 2 baris sama tinggi */
.rpl-grid-featured[data-rpl-gf] .rpl-gf-side {
  display: grid;
  gap: calc(var(--rpl-gf-gap, 24) * 1px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* baris sama tinggi */
  min-height: 0;
}

/* —— OVERRIDE aturan global yang bikin item melebar —— */
.rpl-grid-featured[data-rpl-gf] .rpl-gf-side .rpl-card,
.rpl-grid-featured[data-rpl-gf] .rpl-gf-main .rpl-card {
  grid-column: auto !important; /* jangan span 4/6/12 */
}

/* Kartu isi penuh sel grid; gambar flexible */
.rpl-grid-featured[data-rpl-gf] .rpl-card,
.rpl-grid-featured[data-rpl-gf] .rpl-card--featured {
  display: grid;
  grid-template-rows: 1fr auto; /* gambar 1fr, body auto */
  height: 100%;
  min-height: 0;
}

/* Matikan rasio 16:9 pada featured, pastikan crop rapi */
.rpl-grid-featured[data-rpl-gf] .rpl-card__thumb {
  aspect-ratio: auto !important;
  height: 100%;
  overflow: hidden;
}
.rpl-grid-featured[data-rpl-gf] .rpl-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}