/* =========================================================
   PROJECTS – PREMIUM REAL ESTATE (GLOBAL)
   Used in: index.php + projects.php
========================================================= */

.section-projects{
  padding:70px 0 80px;
  background: var(--bg); /* Dynamic background */
}

/* ================= GRID ================= */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  align-items:stretch;
}

/* ================= CARD ================= */
.project-card{
  position:relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  transition:all .35s ease;
  box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb), 0.05); /* Dynamic shadow */
}

.project-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* GOLD BORDER GLOW */
.project-card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:18px;
   background: none;
  opacity:0;
  transition:.35s ease;
  pointer-events:none;
}
.project-card:hover::before{ opacity:1 }

/* ================= IMAGE ================= */
.project-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;      /* 🔥 square wrapper */
 background: var(--bg-light);
   overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.project-image{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;      /* full image visible */
  display:block;
}

.project-card:hover .project-image{
  transform:scale(1.05);
}


/* ================= BASIC INFO OVERLAY ================= */
.project-info-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:14px 16px;
  background: rgba(var(--brand-dark-rgb), 0.75);
  color: var(--text-on-dark);
  z-index:2;
  transition:.3s ease;
}

.project-card:hover .project-info-overlay{
  opacity:0;
  transform:translateY(8px);
}

/* STATUS */
.pio-status{
  display:inline-block;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:5px 10px;
  margin-bottom:6px;
  background: var(--success); /* Replaced static #25d366 */
  color: var(--brand-dark); /* Replaced static #000 */
  border-radius:999px;
  font-weight:700;
}

/* TITLE */
.pio-title{
  font-size:14px;
  font-weight:700;
  margin:4px 0 6px;
}

/* LOCATION */
.pio-location{
  font-size:12px;
  opacity:.9;
  display:flex;
  align-items:center;
  gap:6px;
}

/* ================= HOVER OVERLAY ================= */
.project-overlay{
  position:absolute;
  inset:0;
  background: rgba(var(--brand-dark-rgb), 0.75);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);

  display:flex;
  align-items:flex-end;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  transition:.35s ease;
  z-index:3;
}

.project-card:hover .project-overlay{
  opacity:1;
  visibility:visible;
}

/* HOVER CONTENT */
.po-content{
  text-align:center;
  padding:26px 18px 30px;
  transform:translateY(20px);
  transition:.35s ease;
}

.project-card:hover .po-content{
  transform:translateY(0);
}

/* TAG */
.po-tag{
  display:inline-block;
  padding:6px 14px;
  margin-bottom:10px;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background: var(--accent);
  color: var(--brand-dark); /* Replaced #000 */
  border-radius:999px;
  font-weight:700;
}

/* TITLE */
.po-title{
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--text-on-dark);
  margin-bottom:8px;
  font-weight:600;
}

/* META */
.po-meta{
  font-size:12px;
  color: var(--border); /* Replaced #e5e5e5 */
}

/* ================= BODY ================= */
.project-body{
  padding:18px 18px 20px;
}

.project-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
  color: var(--text);
}

.project-location{
  font-size:13px;
  color: var(--muted); /* Replaced #666 */
  margin-bottom:14px;
}

/* CTA */
.pc-cta-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.pc-cta-btn{
  padding:10px 16px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background: var(--brand); /* Replaces #000 */
  color: var(--text-on-dark);
  border-radius:6px;
  transition:.25s ease;
}

.pc-cta-btn:hover{
  background: var(--accent);
  color: var(--brand-dark);
}

.pc-cta-note{
  font-size:12px;
  color: var(--muted); /* Replaced #777 */
}

/* ================= VIEW ALL ================= */
.projects-view-all{
  margin-top:50px;
  text-align:center;
}

.view-all-btn{
  padding:12px 32px;
  font-size:12px;
  letter-spacing:.2em;
  background: var(--accent);
  color: var(--brand-dark);
  border-radius:10px;
  box-shadow: 0 14px 30px rgba(var(--brand-dark-rgb), 0.25);
  transition:.3s ease;
}

.view-all-btn:hover{
  transform:translateY(-3px);
  box-shadow: 0 14px 30px rgba(var(--brand-dark-rgb), 0.45);
}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:768px){
  .projects-grid{ grid-template-columns:1fr; }
  .project-image-wrap{ height:260px; }
  .project-overlay{ display:none; }
}