/* ── Project Detail Page Styles ── */
.pd-hero{position:relative;height:55vh;min-height:320px;overflow:hidden;background:var(--ink)}
.pd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.65}
.pd-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.8) 100%)}
.pd-hero-content{position:absolute;bottom:44px;left:0;right:0;padding:0 40px;color:#fff}
.pd-hero-content h1{font-size:clamp(28px,4vw,54px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-top:12px}
.pd-badge{display:inline-block;padding:5px 18px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.pd-badge.ongoing{background:rgba(245,158,11,.18);border:1px solid #f59e0b;color:#f59e0b}
.pd-badge.completed{background:rgba(34,197,94,.18);border:1px solid #22c55e;color:#22c55e}
.badge-ongoing{color:#f59e0b;font-weight:700}
.badge-completed{color:#22c55e;font-weight:700}

.pd-body{padding:70px 0}
.pd-grid{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:start}
.pd-desc h2{font-size:clamp(20px,2.5vw,32px);font-weight:700;letter-spacing:-.5px;margin-bottom:20px;color:var(--ink)}
.pd-desc p{color:var(--muted);line-height:1.85;font-size:15px;margin-bottom:14px}

/* Placeholder blocks */
.pd-placeholder-block{background:#f6f6f4;border:2px dashed #ddd;border-radius:12px;padding:40px 24px;text-align:center;color:#aaa;font-size:15px;margin-bottom:30px}
.pd-img-placeholder{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.img-ph{background:#f0f0f0;border:2px dashed #ddd;border-radius:12px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:13px;font-weight:500}
.img-ph.wide{grid-column:span 2;aspect-ratio:16/7}

/* Real images layout (when client provides) */
.pd-images{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.pd-images img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover}
.pd-images img.wide{grid-column:span 2;aspect-ratio:16/7}

/* Single project image — medium size */
.single-project-img{display:block;width:100%;max-width:620px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin-top:28px;box-shadow:0 8px 32px rgba(0,0,0,.12)}

/* Project info sidebar */
.pd-meta-box{background:var(--bg-soft);border-radius:var(--radius);padding:30px;border:1.5px solid var(--line);position:sticky;top:90px}
.pd-meta-box h4{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--brand-red);margin-bottom:20px}
.pd-meta-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.pd-meta-row:last-child{border-bottom:none}
.pd-meta-row span:first-child{color:var(--muted);font-weight:500}
.pd-meta-row span:last-child{font-weight:600;color:var(--ink);text-align:right;max-width:55%}

/* Back link */
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--brand-red);font-weight:600;font-size:14px;margin-bottom:32px;transition:gap .2s;text-decoration:none}
.back-link:hover{gap:13px}
.back-link svg{width:18px;height:18px;stroke:var(--brand-red);fill:none;stroke-width:2.5}

/* Related section */
.related-section{background:#eef2f7;padding:80px 0}

/* Responsive */
@media(max-width:900px){
  .pd-grid{grid-template-columns:1fr}
  .pd-meta-box{position:static}
  .pd-hero-content{padding:0 24px;bottom:28px}
}
@media(max-width:560px){
  .pd-img-placeholder,.pd-images{grid-template-columns:1fr}
  .img-ph.wide,.pd-images img.wide{grid-column:auto;aspect-ratio:4/3}
  .pd-body{padding:50px 0}
}

/* ── Single medium project image ── */
.proj-single-img{display:block;width:100%;max-width:580px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);margin-top:24px;box-shadow:0 6px 28px rgba(0,0,0,.13)}