/* project-details.css
   Cinematic Split Hero — Premium Studio 83
   Split hero: left image (visual), right info card (glass)
   Bronze accent: #9A826C
*/

:root{
  --bg:#111014;
  --card: rgba(255,255,255,0.04);
  --muted:#C9C9D1;
  --accent:#9A826C;
  --glass-border: rgba(255,255,255,0.06);
  --max-width:1200px;
  --page-padding:28px;
  --transition: 300ms cubic-bezier(.2,.9,.2,1);
  --noise: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence baseFrequency="0.8" numOctaves="1" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.02"/></svg>');
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#0f0f14 0%, #0d0c10 100%);color:#eee;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
a{color:inherit}
img{max-width:100%;display:block;border:0}

/* NAV */
.pd-nav{position:sticky;top:0;z-index:60;background:linear-gradient(180deg, rgba(8,7,10,0.6), rgba(8,7,10,0.35));backdrop-filter: blur(8px);border-bottom:1px solid rgba(255,255,255,0.03);}
.pd-nav .container{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px var(--page-padding);}
.logo{font-family:Oswald, sans-serif;font-size:18px;color:var(--accent);letter-spacing:.4px;text-decoration:none}
.nav-actions .btn-ghost{border:1px solid rgba(255,255,255,0.06);padding:10px 14px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:600}

/* SPLIT HERO: layout */
.pd-hero{display:grid;grid-template-columns: 1fr 420px;gap:36px;align-items:stretch;max-width:calc(var(--max-width) + 40px);margin:28px auto;padding:0 var(--page-padding);min-height:62vh}
@media (max-width:1080px){.pd-hero{grid-template-columns: 1fr 380px}}
@media (max-width:880px){.pd-hero{grid-template-columns: 1fr;min-height:unset} .hero-right{order:2} .hero-left{order:1;height:46vh}}

/* Hero Left — image canvas */
.hero-left{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 40px 80px rgba(2,2,6,0.6);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform: translateZ(0);
  isolation:isolate;
}
.hero-left::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.12) 10%, rgba(0,0,0,0.45) 80%);
  pointer-events:none;
}
.hero-overlay{position:absolute;inset:0;mix-blend-mode:overlay; background:radial-gradient(1200px 600px at 20% 20%, rgba(154,130,108,0.06), transparent 15%);}
.hero-deco{position:absolute;right:-12%;top:10%;width:60%;height:120%;background:linear-gradient(180deg, rgba(154,130,108,0.03), transparent);transform:skewX(-12deg);opacity:.9;}

/* Hero Right — glass info */
.hero-right{display:flex;align-items:center;justify-content:center;padding:18px 0}
.info-card{
  width:100%;
  background:var(--card);
  border-radius:12px;
  border:1px solid var(--glass-border);
  padding:28px;
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 12px 40px rgba(2,2,6,0.6);
  color:var(--muted);
  position:relative;
}
.meta-row{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--accent);font-size:13px}
.project-title{font-family:Oswald, sans-serif;font-size:34px;color:#fff;margin:12px 0 10px;letter-spacing:.6px}
.project-blurb{margin:12px 0 20px;color:var(--muted);line-height:1.6}

/* actions & stats */
.info-actions{display:flex;gap:12px;margin-bottom:18px}
.btn-primary{background:var(--accent);color:#111;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.btn-outline{border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.project-stats{display:flex;gap:18px;margin-top:18px;list-style:none;padding:0}
.project-stats li{display:flex;flex-direction:column;align-items:flex-start;color:var(--muted)}
.project-stats li strong{color:#fff;font-size:18px}

/* credit */
.credit{margin-top:18px;font-size:12px;color:rgba(255,255,255,0.5)}

/* GALLERY (masonry-like) */
.pd-main{max-width:var(--max-width);margin:28px auto;padding:0 var(--page-padding)}
.pd-gallery{column-count:3;column-gap:20px}
@media (max-width:1100px){.pd-gallery{column-count:2}}
@media (max-width:680px){.pd-gallery{column-count:1}}
.pd-item{break-inside:avoid;margin-bottom:20px;position:relative;overflow:visible;transform-origin:center center}
.pd-item img{width:100%;height:auto;border-radius:12px;box-shadow: 0 16px 40px rgba(2,2,6,0.55);transition: transform var(--transition), box-shadow var(--transition)}
.pd-item:hover img{transform:scale(1.035) translateY(-6px);box-shadow: 0 28px 60px rgba(2,2,6,0.7)}
.pd-caption{position:absolute;left:10px;bottom:10px;background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.6));padding:8px 12px;border-radius:8px;color:#fff;font-size:13px;opacity:0;transform:translateY(10px);transition:var(--transition)}
.pd-item:hover .pd-caption{opacity:1;transform:translateY(0)}


/* small text noise layer for richness */
.hero-left::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.02;pointer-events:none}

/* subtle entrance */
.gsap-item{opacity:0;transform:translateY(18px)}


/* utility */
.hidden{display:none}

/* FULLSCREEN DARK BACKDROP */
.pd-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

/* MAIN INNER AREA */
.pd-lightbox-inner {
    position: relative;
    width: 90%;
    height: 88%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* MAIN IMAGE */
.pd-main-img {
    max-width: 100%;
    max-height: 80%;
    object-fit: contain;
    transition: opacity 0.4s ease;
}

/* ZONES (CLICK TO NAVIGATE) */
.pd-nav-zone {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}
#pd-zone-left { left: 0; }
#pd-zone-right { right: 0; }

/* CLOSE BUTTON */
.pd-lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 36px;
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000;
}

/* FULLSCREEN BUTTON */
.pd-lightbox-fullscreen {
    position: absolute;
    top: 20px;
    right: 70px;
    font-size: 24px;
    color: white;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1000;
}

/* BOTTOM BAR (META + ARROWS) */
.pd-bottom-bar {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 120px;
    color: white;
    font-size: 15px;
}

/* THUMBNAILS STRIP */
.pd-lightbox-thumbs {
    position: absolute;
    bottom: 25px;
    height: 70px;
    width: 90%;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    border-radius: 10px;
}

.pd-lightbox-thumbs::-webkit-scrollbar { display: none; }

.pd-lightbox-thumbs img {
    width: 85px;
    height: 65px;
    object-fit: cover;
    border-radius: 6px;
    opacity: 0.6;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.3s ease;
}

.pd-lightbox-thumbs img:hover {
    opacity: 1;
    transform: scale(1.05);
}

.pd-lightbox-thumbs img.active-thumb {
    border-color: #9A826C;
    opacity: 1;
    transform: scale(1.12);
}