/* ==========================================================
   project-detail.css — page-specific styles for project-detail.html
   Extracted from inline <style> — see site.css for shared rules
   ========================================================== */

/* ── Project Detail ── */

/* Breadcrumb */
.pd-breadcrumb{
  background:var(--char); border-bottom:1px solid rgba(255,255,255,.08);
  padding:0 clamp(24px,5vw,64px); height:46px;
  display:flex; align-items:center;
}
.pd-breadcrumb-inner{
  max-width:var(--maxw); margin:0 auto; height:46px;
  display:flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.pd-breadcrumb-inner a{color:rgba(255,255,255,.4); transition:color .2s}
.pd-breadcrumb-inner a:hover{color:var(--gold)}
.pd-breadcrumb-inner .sep{opacity:.25; color:rgba(255,255,255,.3)}
.pd-breadcrumb-inner .current{color:rgba(255,255,255,.85)}

/* Gallery hero */
.pd-gallery{
  position:relative; height:clamp(380px,52vw,680px); overflow:hidden; background:var(--char);
}
.pd-gallery-slides{
  display:flex; height:100%; transition:transform .65s var(--ease);
}
.pd-gallery-slide{
  flex-shrink:0; width:100%; height:100%; position:relative; overflow:hidden;
}
.pd-gallery-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .8s var(--ease);
}
.pd-gallery-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,7,.65) 0%, rgba(10,9,7,.1) 50%, transparent 100%);
  pointer-events:none;
}
.pd-gallery-nav{
  position:absolute; bottom:clamp(20px,3vw,36px); right:clamp(20px,3vw,40px);
  display:flex; gap:10px; z-index:5;
}
.pd-gallery-btn{
  width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  background:rgba(10,9,7,.45); backdrop-filter:blur(8px);
  color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .25s var(--ease);
}
.pd-gallery-btn:hover{border-color:var(--gold); color:var(--gold); background:rgba(10,9,7,.7)}
.pd-gallery-dots{
  position:absolute; bottom:clamp(20px,3vw,36px); left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:5;
}
.pd-gallery-dot{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35);
  cursor:pointer; transition:all .25s; border:none; padding:0;
}
.pd-gallery-dot.active{background:var(--gold); width:22px; border-radius:3px}
.pd-gallery-badge{
  position:absolute; top:calc(var(--nav-h) + 16px); left:clamp(20px,3vw,40px);
  font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  padding:6px 14px; border-radius:9999px;
  background:rgba(34,160,107,.88); color:#fff; z-index:5;
}
.pd-gallery-count{
  position:absolute; top:calc(var(--nav-h) + 16px); right:clamp(20px,3vw,40px);
  font-family:var(--sans); font-size:.65rem; letter-spacing:.12em;
  color:rgba(255,255,255,.7); z-index:5; backdrop-filter:blur(4px);
  background:rgba(10,9,7,.35); padding:5px 12px; border-radius:9999px;
}

/* Overview bar */
.pd-overview{
  background:var(--char); padding:clamp(28px,4vw,44px) clamp(24px,5vw,64px);
}
.pd-overview-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
}
.pd-kicker{
  font-family:var(--sans); font-weight:700; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:12px;
}
.pd-kicker::before{content:''; width:22px; height:1px; background:var(--gold)}
.pd-title{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(2rem,4vw,3.8rem); line-height:1.1; letter-spacing:-.02em;
  margin-bottom:16px;
}
.pd-title em{color:var(--gold-soft); font-style:normal}
.pd-tags{display:flex; gap:10px; flex-wrap:wrap}
.pd-tag{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 12px; border-radius:9999px;
  border:1px solid rgba(207,173,102,.3); color:var(--gold-soft);
}
.pd-cta-group{display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.pd-btn-primary{
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 28px;
  border-radius:9999px; background:var(--gold); color:var(--char);
  font-family:var(--sans); font-size:.9rem; font-weight:600; cursor:pointer;
  border:none; transition:all .25s var(--ease); white-space:nowrap;
}
.pd-btn-primary:hover{background:var(--gold-soft); transform:translateY(-2px)}
.pd-btn-outline{
  display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 22px;
  border-radius:9999px; border:1.5px solid rgba(207,173,102,.35); color:rgba(255,255,255,.7);
  font-family:var(--sans); font-size:.85rem; font-weight:500; cursor:pointer;
  background:transparent; transition:all .25s var(--ease); white-space:nowrap;
  text-align: center; justify-content:center;width:100%;
}
.pd-btn-outline:hover{border-color:var(--gold); color:var(--gold)}

/* Stats bar */
.pd-stats{
  background:var(--white); border-bottom:1px solid var(--hairline);
  padding:0 clamp(24px,5vw,64px);
}
.pd-stats-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr);
}
.pd-stat{
  padding:clamp(18px,2.5vw,28px) 0; border-right:1px solid var(--hairline);
  padding-left:clamp(16px,2vw,28px);
}
.pd-stat:first-child{padding-left:0}
.pd-stat:last-child{border-right:none}
.pd-stat-val{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.2rem,2vw,1.8rem); line-height:1; margin-bottom:5px;
}
.pd-stat-val em{color:var(--gold); font-style:normal}
.pd-stat-lbl{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}

/* Main content */
.pd-main{
  background:var(--ivory); padding:clamp(56px,7vw,96px) clamp(24px,5vw,64px);
}
.pd-main-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:clamp(48px,6vw,80px); align-items:start;
}
.pd-section-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.5rem,2.2vw,2.2rem); line-height:1.15; letter-spacing:-.02em;
  margin-bottom:24px;
}
.pd-section-h em{color:var(--gold); font-style:normal}
.pd-body-text{
  font-size:clamp(.9rem,1.05vw,1rem); color:var(--body); line-height:1.8;
  margin-bottom:20px;
}

/* Amenities */
.pd-amenities{margin-top:clamp(40px,5vw,64px)}
.pd-amenity-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px;
}
.pd-amenity{
  background:var(--white); border:1px solid var(--hairline); border-radius:14px;
  padding:18px 16px; display:flex; align-items:center; gap:14px;
  transition:all .3s var(--ease);
  opacity:1 !important; /* override WOW stale state */
  visibility:visible !important;
}
.pd-amenity:hover{
  border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(207,173,102,.12);
}
.pd-amenity-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(207,173,102,.15),rgba(207,173,102,.05));
  border:1px solid rgba(207,173,102,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--gold-deep);
}
.pd-amenity-name{font-size:.88rem; font-weight:600; color:var(--ink); line-height:1.3}
.pd-amenity-icon svg{width:20px; height:20px; stroke:var(--gold-deep); stroke-width:1.5px; fill:none}

/* Sidebar card */
.pd-sidebar{}
.pd-enquire-card{
  background:var(--white); border:1px solid var(--hairline); border-radius:20px;
  padding:clamp(24px,3vw,36px); position:sticky; top:calc(var(--nav-h) + 24px);
}
.pd-enquire-card-h{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.2rem,1.6vw,1.5rem); margin-bottom:6px; line-height:1.2;
}
.pd-enquire-card-sub{font-size:.85rem; color:var(--muted); margin-bottom:24px}
.pd-form-row{margin-bottom:14px}
.pd-input{
  width:100%; height:46px; padding:0 16px;
  border:1.5px solid var(--hairline); border-radius:10px;
  font-family:var(--sans); font-size:.9rem; color:var(--ink); background:var(--white);
  outline:none; transition:border .2s;
}
.pd-input:focus{border-color:var(--gold)}
.pd-input::placeholder{color:var(--muted)}
.pd-select{
  width:100%; height:46px; padding:0 16px;
  border:1.5px solid var(--hairline); border-radius:10px;
  font-family:var(--sans); font-size:.9rem; color:var(--ink); background:var(--white);
  outline:none; appearance:none; cursor:pointer; transition:border .2s;
}
.pd-select:focus{border-color:var(--gold)}
.pd-submit{
  width:100%; height:50px; background:var(--char); color:var(--white);
  border:none; border-radius:10px; font-family:var(--sans); font-size:.95rem; font-weight:600;
  cursor:pointer; transition:all .25s var(--ease); margin-top:6px;
}
.pd-submit:hover{background:var(--gold); color:var(--char)}
.pd-enquire-note{
  text-align:center; margin-top:14px;
  font-size:.75rem; color:var(--muted); line-height:1.5;
}
.pd-price-range{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; border-top:1px solid var(--hairline-soft); margin-bottom:16px;
}
.pd-price-label{font-size:.75rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.pd-price-val{
  font-family:var(--serif); font-size:1.2rem; color:var(--ink);
}
.pd-price-val em{color:var(--gold); font-style:normal}

/* Gallery grid */
.pd-gallery-sec{
  background:var(--white); padding:clamp(56px,7vw,96px) clamp(24px,5vw,64px);
}
.pd-gallery-sec-inner{max-width:var(--maxw); margin:0 auto}
.pd-gallery-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:auto auto;
  gap:8px; margin-top:36px;
}
.pd-gimg{overflow:hidden; border-radius:12px; cursor:pointer; position:relative}
.pd-gimg::after{
  content:'⊕'; position:absolute; inset:0;
  background:rgba(10,9,7,.0); display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:rgba(255,255,255,0); transition:all .35s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.pd-gimg:hover::after{background:rgba(10,9,7,.35); color:rgba(255,255,255,.9)}
.pd-gimg:first-child{grid-row:1/3}
.pd-gimg img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .6s var(--ease);
}
.pd-gimg:first-child img{aspect-ratio:auto; height:100%}
.pd-gimg:hover img{transform:scale(1.05)}

/* ── Photo Lightbox ── */
.pd-lb{
  position:fixed; inset:0; z-index:3000;
  background:rgba(6,4,6,.94); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.pd-lb.open{opacity:1; pointer-events:all}
.pd-lb-wrap{
  position:relative; max-width:90vw; max-height:88svh;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.pd-lb-img{
  max-width:88vw; max-height:80svh; object-fit:contain;
  border-radius:10px; display:block;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  transition:opacity .25s, transform .25s;
}
.pd-lb-cap{
  font-family:var(--sans); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.4); text-align:center;
}
.pd-lb-close{
  position:fixed; top:20px; right:20px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .25s; z-index:5;
}
.pd-lb-close:hover{background:var(--gold); border-color:var(--gold)}
.pd-lb-close svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.pd-lb-btn{
  position:fixed; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .25s; z-index:5;
}
.pd-lb-btn:hover{background:rgba(207,173,102,.2); border-color:var(--gold)}
.pd-lb-btn svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none}
.pd-lb-prev{left:16px}
.pd-lb-next{right:16px}
.pd-lb-counter{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-size:.62rem; letter-spacing:.2em;
  color:rgba(255,255,255,.35); z-index:5;
}
@media(max-width:640px){.pd-lb-btn{display:none}}
.pd-location-sec{
  background:var(--cream); padding:clamp(56px,7vw,96px) clamp(24px,5vw,64px);
}
.pd-location-inner{max-width:var(--maxw); margin:0 auto}
.pd-map-placeholder{
  width:100%; height:clamp(280px,35vw,460px); border-radius:20px; margin-top:36px;
  background:var(--char); display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(207,173,102,.5); overflow:hidden; position:relative;
  background-image:url('https://images.unsplash.com/photo-1524230572899-a752b3835840?auto=format&fit=crop&w=1400&q=80');
  background-size:cover; background-position:center;
}
.pd-map-overlay{
  position:absolute; inset:0; background:rgba(10,9,7,.55);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px;
}
.pd-map-pin{
  width:52px; height:52px; border-radius:50%;
  background:var(--gold); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow:0 0 0 12px rgba(207,173,102,.2);
}
.pd-map-label{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.pd-nearby-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px;
}
.pd-nearby{
  background:var(--white); border:1px solid var(--hairline); border-radius:12px;
  padding:16px 20px; display:flex; flex-direction:column; gap:4px;
}
.pd-nearby-cat{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)
}
.pd-nearby-name{font-size:.88rem; font-weight:500; color:var(--ink)}
.pd-nearby-dist{font-size:.78rem; color:var(--muted)}

/* Responsive */
@media(max-width:1100px){
  .pd-enquire-card{position:static}
}
@media(max-width:980px){
  .pd-stats-inner{grid-template-columns:repeat(3,1fr)}
  .pd-stat:nth-child(3){border-right:none}
  .pd-stat:nth-child(4){border-right:1px solid var(--hairline); padding-left:clamp(16px,2vw,28px)}
  .pd-overview-inner{grid-template-columns:1fr}
  .pd-gallery-grid{grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto}
  .pd-gimg:first-child{grid-column:1/3; grid-row:1}
  .pd-amenity-grid{grid-template-columns:repeat(2,1fr)}
  .pd-nearby-grid{grid-template-columns:repeat(2,1fr)}
  .pd-cta-group{flex-direction:row; align-items:center}
}

@media(max-width:768px){
  .pd-stats-inner{grid-template-columns:repeat(3,1fr)}
  .pd-stat:nth-child(3){border-right:none}
  .pd-stat:nth-child(4){border-right:1px solid var(--hairline); padding-left:0}
  .pd-overview-inner{grid-template-columns:1fr}
  .pd-cta-group{flex-direction:row; align-items:center}
  .pd-gallery-grid{grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto}
  .pd-gimg:first-child{grid-column:1/3; grid-row:1}
  .pd-amenity-grid{grid-template-columns:repeat(2,1fr)}
  .pd-nearby-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .pd-stats-inner{grid-template-columns:1fr 1fr}
  .pd-stat:nth-child(2){border-right:none}
  .pd-stat:nth-child(3){border-right:1px solid var(--hairline); padding-left:clamp(16px,2vw,28px)}
  .pd-stat:nth-child(4){border-right:none}
  .pd-gallery-grid{grid-template-columns:1fr}
  .pd-gimg:first-child{grid-column:1; grid-row:1}
  .pd-amenity-grid{grid-template-columns:1fr 1fr}
  .pd-nearby-grid{grid-template-columns:1fr 1fr}
  .pd-cta-group{flex-direction:column; align-items:stretch}
  .pd-btn-primary,.pd-btn-outline{justify-content:center}
}
@media(max-width:380px){
  .pd-title{font-size:1.7rem}
  .pd-amenity-grid{grid-template-columns:1fr}
}