/* ============================================================
   SIMSAR PROJECT CARDS V21.7
   Projects displayed with the same premium marketplace language
   used by property/unit cards.
   ============================================================ */

#page-projects{
  --pj-red:#e23628;
  --pj-red-dark:#c92f23;
  --pj-ink:#172033;
  --pj-muted:#748095;
  --pj-line:#e7eaf0;
  --pj-soft:#fafbfc;
}

#page-projects #projectsGrid.project-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}

#page-projects .simsar-v217-project-card{
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  min-height:220px !important;
  overflow:hidden !important;
  border:1px solid var(--pj-line) !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 5px 18px rgba(15,23,42,.045) !important;
  cursor:default !important;
}

#page-projects .simsar-v217-project-media{
  position:relative;
  min-height:220px;
  background:#edf1f5;
  overflow:hidden;
}

#page-projects .simsar-v217-project-media img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  display:block;
}

#page-projects .simsar-v217-project-media:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(8,15,26,0) 48%,
    rgba(8,15,26,.55) 100%
  );
}

#page-projects .simsar-v217-project-badges{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

#page-projects .simsar-v217-project-badge{
  min-height:27px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#fff;
  color:#344054;
  font-size:9px;
  font-weight:900;
  box-shadow:0 5px 14px rgba(15,23,42,.12);
}

#page-projects .simsar-v217-project-badge.primary{
  background:var(--pj-red);
  color:#fff;
}

#page-projects .simsar-v217-project-badge.freehold{
  background:#153b72;
  color:#fff;
}

#page-projects .simsar-v217-project-body{
  min-width:0;
  padding:14px 15px 12px;
  display:flex;
  flex-direction:column;
}

#page-projects .simsar-v217-project-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
}

#page-projects .simsar-v217-project-title{
  margin:0;
  color:var(--pj-ink);
  font-size:18px;
  line-height:1.28;
  letter-spacing:-.2px;
}

#page-projects .simsar-v217-project-developer{
  margin-top:5px;
  color:var(--pj-muted);
  font-size:10.5px;
  font-weight:700;
}

#page-projects .simsar-v217-project-price{
  text-align:right;
  white-space:nowrap;
}

#page-projects .simsar-v217-project-price span{
  display:block;
  color:#8a94a4;
  font-size:8.5px;
  font-weight:800;
  text-transform:uppercase;
}

#page-projects .simsar-v217-project-price strong{
  display:block;
  margin-top:3px;
  color:var(--pj-red);
  font-size:17px;
  line-height:1.1;
}

#page-projects .simsar-v217-project-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:13px;
}

#page-projects .simsar-v217-project-meta > div{
  min-height:55px;
  padding:8px 9px;
  border:1px solid #ebedf1;
  border-radius:9px;
  background:var(--pj-soft);
}

#page-projects .simsar-v217-project-meta span{
  display:block;
  color:#8993a3;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.25px;
}

#page-projects .simsar-v217-project-meta b{
  display:block;
  margin-top:4px;
  color:#263247;
  font-size:11.5px;
  line-height:1.25;
}

#page-projects .simsar-v217-project-note{
  margin-top:10px;
  color:#657185;
  font-size:10.5px;
  line-height:1.55;
}

#page-projects .simsar-v217-project-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:auto;
  padding-top:12px;
}

#page-projects .simsar-v217-project-actions button{
  min-height:36px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid #dfe4ea;
  background:#fff;
  color:#344054;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}

#page-projects .simsar-v217-project-actions button:hover{
  border-color:#e5b7b1;
  color:var(--pj-red);
}

#page-projects .simsar-v217-project-actions button.primary{
  background:var(--pj-red);
  border-color:var(--pj-red);
  color:#fff;
}

#page-projects .simsar-v217-project-actions button.primary:hover{
  background:var(--pj-red-dark);
  border-color:var(--pj-red-dark);
  color:#fff;
}

#page-projects .simsar-v217-project-count{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:2;
  min-height:29px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:8px;
  background:rgba(18,28,45,.78);
  color:#fff;
  font-size:9px;
  font-weight:850;
}

@media(max-width:900px){
  #page-projects .simsar-v217-project-card{
    grid-template-columns:1fr !important;
  }

  #page-projects .simsar-v217-project-media,
  #page-projects .simsar-v217-project-media img{
    min-height:230px;
    height:230px;
  }
}

@media(max-width:620px){
  #page-projects .simsar-v217-project-top{
    grid-template-columns:1fr;
  }

  #page-projects .simsar-v217-project-price{
    text-align:left;
  }

  #page-projects .simsar-v217-project-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #page-projects .simsar-v217-project-actions{
    justify-content:stretch;
  }

  #page-projects .simsar-v217-project-actions button{
    flex:1 1 auto;
  }
}