/* =========================================================
   PROJECT DETAIL PAGE – JP INFRA DEVELOPERS
   Professional / Premium Layout
========================================================= */

/* ========== GLOBAL HELPERS ========== */
.project-hero,
.section-project-detail{
  background: var(--bg-light); /* */
}

.project-card-block{
  background: var(--bg-card); /* */
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(var(--brand-dark-rgb), 0.08); /* */
  padding:28px;
  margin-bottom:28px;
}

/* Section titles */
.project-block-title{
  font-size:20px;
  font-weight:800;
  margin-bottom:18px;
  position:relative;
  padding-left:14px;
}

.project-block-title::before{
  content:'';
  position:absolute;
  left:0;
  top:4px;
  width:4px;
  height:20px;
 background: var(--accent);
  border-radius:4px;
}

/* =========================================================
   HERO GALLERY
========================================================= */

.project-hero{
  padding:40px 0 20px;
}

.project-hero-main{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background: var(--brand-dark); /* Replaced #000 */
  aspect-ratio:16 / 9;     /* 🔥 KEY CHANGE */
  max-height:75vh;
}


.ph-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;   /* 🔥 contain ❌ → cover ✅ */
  opacity:0;
  transition:opacity .5s ease;
}
.project-hero-main::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(var(--brand-dark-rgb), 0.65);
  z-index:1;
}
.ph-slide{
  z-index:2;
}


.ph-slide.active{
  opacity:1;
}

/* Nav arrows */
.ph-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background: rgba(var(--brand-dark-rgb), 0.6); /* Replaced static 0,0,0 */
  color: var(--text-on-dark);
  font-size:28px;
  border:none;
  cursor:pointer;
  z-index:3;
}

.ph-prev{left:16px}
.ph-next{right:16px}

.ph-nav:hover{
   background: var(--accent);
  color: var(--brand-dark); /* Replaced #000 */
}

/* Top badges */
.ph-top-info{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  gap:10px;
  z-index:3;
}

.ph-badge,
.ph-status{
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  background: var(--accent);
  color: var(--brand-dark); /* Replaced #000 */
}

/* Quick actions */
.ph-quick-actions{
  position:absolute;
  right:16px;
  bottom:16px;
  display:flex;
  gap:10px;
  z-index:3;
}

.ph-qa-btn{
  background: rgba(var(--brand-dark-rgb), 0.7); /* Replaced static 0,0,0 */
  color: var(--text-on-dark);
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
}

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

/* Thumbnails */
.project-hero-thumbs{
  display:flex;
  gap:10px;
  margin-top:14px;
  overflow-x:auto;
}

.ph-thumb{
  width:84px;
  height:60px;
  border-radius:10px;
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
}

.ph-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ph-thumb.active{
  border-color: var(--accent); /* Replaced #c9a24d */
}

/* Title row */
.project-hero-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:26px;
  gap:20px;
}

.project-title-main{
  font-size:32px;
  font-weight:900;
  color: var(--text);
}

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

.project-hero-meta{
  display:flex;
  gap:16px;
  font-size:13px;
  font-weight:600;
  color: var(--muted); /* Replaced #444 */
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.project-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:40px;
}

/* =========================================================
   OVERVIEW GRID
========================================================= */

.project-overview-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 22px;
}

.po-item{
  background: var(--bg-light);
  padding:14px;
  border-radius:12px;
}

.po-label{
  display:block;
  font-size:12px;
  color: var(--muted); /* Replaced #777 */
}

.po-value{
  font-weight:700;
  margin-top:4px;
}

/* =========================================================
   TEXT CONTENT
========================================================= */

.project-text{
  font-size:15px;
  line-height:1.75;
  color: var(--text); /* Replaced #333 */
}

.project-why-list{
  padding-left:18px;
}

.project-why-list li{
  margin-bottom:10px;
  font-size:15px;
}

/* =========================================================
   FAQ
========================================================= */

.faq-item{
  border-bottom: 1px solid var(--border); /* Replaced #e5e7eb */
}

.faq-header{
  width:100%;
  background:none;
  border:none;
  padding:14px 0;
  font-size:15px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
}

.faq-body{
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
}

.faq-body p{
  padding-bottom:14px;
  font-size:14px;
  color: var(--muted); /* Replaced #444 */
}

/* =========================================================
   FEATURES
========================================================= */

.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;
}

.feature-item{
  background: var(--bg-light); /* Replaced #f7f8fb */
  padding:12px;
  border-radius:10px;
  font-size:14px;
  display:flex;
  gap:8px;
}

.feature-check{
  color: var(--success); /* Replaced #22c55e */
  font-weight:900;
}

/* =========================================================
   MAP
========================================================= */

.project-map-wrap iframe{
  width:100%;
  height:340px;
  border-radius:16px;
  border:none;
}

/* =========================================================
   SHARE
========================================================= */

.project-share-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.share-icons{
  display:flex;
  gap:10px;
}

.share-circle{
  width:36px;
  height:36px;
  border-radius:50%;
  background: var(--brand); 
  color: var(--text-on-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.share-circle:hover{
  background: var(--accent);
  color: var(--brand-dark);
}

/* =========================================================
   CONTACT CARD (RIGHT)
========================================================= */

.project-right{
  position:sticky;
  top:120px;
}

.project-contact-card{
  background: var(--brand); 
  color: var(--text-on-dark);
  padding:28px;
  border-radius:20px;
}

.project-contact-card h3{
  margin-bottom:6px;
}

.contact-subtext{
  font-size:13px;
  opacity:.85;
  margin-bottom:16px;
}

.contact-form .cf-field{
  margin-bottom:12px;
}

.contact-form label{
  font-size:12px;
  opacity:.85;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  margin-top:4px;
  background: var(--bg-card); /* White/Light inputs */
  color: var(--text);
  border: 1px solid var(--border);
}

.cf-submit{
  width:100%;
  margin-top:10px;
  padding:12px;
  background: var(--accent);
  color: var(--brand-dark); /* Replaced #000 via gradient logic */
  border:none;
  font-weight:800;
  cursor:pointer;
}

.contact-note{
  font-size:12px;
  margin-top:10px;
  opacity:.85;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:992px){
  .project-layout{
    grid-template-columns:1fr;
  }

  .project-right{
    position:static;
  }

  .project-hero-main{
    height:360px;
  }
}

@media(max-width:768px){
  .project-title-main{
    font-size:24px;
  }

  .project-hero-title{
    flex-direction:column;
    align-items:flex-start;
  }
}