/* ============ project.css — project case-study pages ============ */

.breadcrumb { padding:16px 0; display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mid); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.breadcrumb a { color:var(--mid); text-decoration:none; }
.breadcrumb a:hover { color:var(--ink); }
.breadcrumb-sep { font-size:10px; opacity:0.4; }
.breadcrumb-current { color:var(--ink); }

.hero-img { width:100%; aspect-ratio:16/7; object-fit:cover; object-position:center; display:block; margin:32px 0; border-radius:12px; }

.project-header { display:grid; grid-template-columns:1fr auto; gap:60px; align-items:start; padding:40px 0; border-bottom:1px solid var(--border); margin-bottom:48px; }
.project-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:72px; line-height:0.85; letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink); }
.project-title em { font-style:italic; color:var(--accent); }
.project-desc { font-size:16px; line-height:1.75; color:#555; margin-top:20px; max-width:580px; }

.project-meta { display:flex; flex-direction:column; gap:0; min-width:200px; flex-shrink:0; padding-top:8px; }
.meta-row { padding:14px 0; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:3px; }
.meta-row:last-child { border-bottom:none; }
.meta-label { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mid); }
.meta-value { font-size:14px; font-weight:500; color:var(--ink); }

.gallery { margin-bottom:64px; }
.gallery-grid-top { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.gallery-grid-bottom { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.gallery-img { width:100%; display:block; border-radius:8px; object-fit:cover; }
.gallery-img.tall { aspect-ratio:4/5; }
.gallery-img.wide { aspect-ratio:16/9; grid-column:span 2; }
.gallery-img.square { aspect-ratio:1; }
.gallery-img.portrait { aspect-ratio:3/4; }

.process-strip { background:var(--soft); border-radius:12px; padding:36px 40px; margin-bottom:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.process-num { font-family:'Barlow Condensed',sans-serif; font-size:36px; font-weight:900; color:var(--accent); line-height:1; margin-bottom:8px; }
.process-label { font-size:13px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.process-desc { font-size:12px; color:var(--mid); line-height:1.6; }

.related-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:24px; gap:16px; }
.related-title { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mid); }
.related-all { font-size:12px; color:var(--accent); text-decoration:none; letter-spacing:0.06em; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:64px; }
.related-card { border-radius:10px; overflow:hidden; cursor:pointer; position:relative; transition:transform 0.2s; display:block; text-decoration:none; }
.related-card:hover { transform:scale(0.975); }
.related-card:hover .rc-overlay { opacity:1; }
.related-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.rc-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%); opacity:0; transition:opacity 0.2s; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; border-radius:10px; }
.rc-cat { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--yellow); margin-bottom:3px; }
.rc-name { font-size:14px; font-weight:500; color:#fff; }

.project-nav { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); margin-bottom:0; }
.pnav-item { padding:28px 0; cursor:pointer; display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.pnav-item:first-child { border-right:1px solid var(--border); padding-right:32px; }
.pnav-item:last-child { padding-left:32px; align-items:flex-end; }
.pnav-label { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mid); }
.pnav-title { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:900; text-transform:uppercase; color:var(--ink); letter-spacing:-0.01em; display:flex; align-items:center; gap:8px; }
.pnav-item:hover .pnav-title { color:var(--accent); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .project-header { grid-template-columns:1fr; gap:28px; }
  .project-title { font-size:60px; }
  .process-strip { grid-template-columns:repeat(2,1fr); gap:24px; }
}
@media (max-width:560px) {
  .hero-img { aspect-ratio:4/3; }
  .project-title { font-size:48px; }
  .gallery-grid-top, .gallery-grid-bottom { grid-template-columns:1fr; }
  .process-strip { grid-template-columns:1fr; padding:28px; }
  .related-grid { grid-template-columns:1fr; }
  .pnav-title { font-size:18px; }
}