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

/* ── Projects Page ── */
.proj-hero{
  background:var(--char); min-height:clamp(340px,42vw,520px);
  display:flex; align-items:flex-end; position:relative; overflow:hidden;
  /* was missing padding-top:var(--nav-h) — every sibling hero (.abt-hero, .cr-hero,
     .cp-hero, .ct-hero, .csr-hero, .gl-hero, .nri-hero) has it; this one didn't,
     so the "Portfolio" kicker sat directly under/behind the fixed nav logo. */
  padding:var(--nav-h) 0 clamp(48px,6vw,80px);
}
.proj-hero-bg{
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=2000&q=80');
  background-size:cover; background-position:center 40%;
  animation:heroScale 20s ease-in-out infinite alternate;
}
@keyframes heroScale{from{transform:scale(1)}to{transform:scale(1.06)}}
.proj-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,9,7,.2) 0%,rgba(10,9,7,.72) 100%);
}
.proj-hero-content{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(24px,5vw,64px)}
.proj-hero-kicker{
  font-family:var(--sans); font-weight:700; font-size:.65rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px; display:flex; align-items:center; gap:12px;
}
.proj-hero-kicker::before{content:''; width:24px; height:1px; background:var(--gold)}
.proj-hero-h{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(2.4rem,5vw,5rem); line-height:1.08; letter-spacing:-.02em;
  margin-bottom:16px;
}
.proj-hero-h em{color:var(--gold-soft); font-style:normal}
.proj-hero-sub{
  font-family:var(--sans); font-size:clamp(.9rem,1.2vw,1.05rem);
  color:rgba(255,255,255,.6); max-width:560px;
}

/* ── Filter bar ── */
.proj-filter-wrap{
  background:var(--white); border-bottom:1px solid var(--hairline);
  position:sticky; top:var(--nav-h); z-index:90;
}
.proj-filter{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(24px,5vw,64px);
  display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none;
  height:60px;
}
.proj-filter::-webkit-scrollbar{display:none}
.pf-chip{
  flex-shrink:0; height:34px; padding:0 18px; border-radius:9999px;
  border:1.5px solid var(--hairline); background:transparent;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  color:var(--body); cursor:pointer; transition:all .2s var(--ease);
  white-space:nowrap;
}
.pf-chip.active,.pf-chip:hover{
  border-color:var(--gold); background:rgba(207,173,102,.08); color:var(--ink);
}
.pf-chip.active{background:var(--gold); color:var(--white); border-color:var(--gold)}
.pf-divider{width:1px; height:22px; background:var(--hairline); flex-shrink:0; margin:0 4px}
.proj-count{
  margin-left:auto; flex-shrink:0;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.12em;
  color:var(--muted); white-space:nowrap;
}

/* ── Projects grid ── */
.proj-sec{
  background:var(--ivory); padding:clamp(56px,8vw,96px) 0;
}
.proj-grid-wrap{
  max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(24px,5vw,64px);
}

/* Featured row — first 2 projects large */
.proj-featured{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px;
}
.proj-standard{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}

/* Card */
.pc{
  background:var(--white); overflow:hidden;
  border:1px solid var(--hairline);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  cursor:pointer; display:block; text-decoration:none; color:inherit;
}
.pc:hover{transform:translateY(-6px); box-shadow:0 20px 48px rgba(37,37,37,.12)}
.pc-img{
  position:relative; overflow:hidden;
  aspect-ratio:16/16;
}
.pc.pc-lg .pc-img{aspect-ratio:4/3}
.pc-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.pc:hover .pc-img img{transform:scale(1.06)}
.pc-badge{
  position:absolute; top:14px; left:14px;
  font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  padding:5px 12px; border-radius:9999px; font-weight:500;
}
.pc-badge.ready{background:rgba(34,160,107,.9); color:#fff}
.pc-badge.uc{background:rgba(207,173,102,.9); color:#fff}
.pc-badge.comm{background:rgba(37,37,37,.85); color:var(--gold-soft)}
.pc-type{
  position:absolute; top:14px; right:14px;
  font-family:var(--sans); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  padding:4px 10px; border-radius:9999px;
  background:rgba(10,9,7,.55); color:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
}
.pc-body{padding:clamp(18px,2vw,24px)}
.pc-loc{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:8px; display:flex; align-items:center; gap:8px;
}
.pc-loc::before{content:''; width:14px; height:1px; background:var(--gold); opacity:.7}
.pc-name{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.2; letter-spacing:-.01em;
  margin-bottom:10px;
}
.pc-name em{color:var(--gold); font-style:normal}
.pc-desc{
  font-size:clamp(.82rem,.95vw,.9rem); color:var(--body); line-height:1.6;
  margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pc-meta{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--hairline-soft);
  flex-wrap:wrap; gap:8px;
}
.pc-config{
  font-family:var(--sans); font-size:.8rem; font-weight:500; color:var(--body);
  display:flex; align-items:center; gap:6px;
}
.pc-config-dot{width:4px; height:4px; border-radius:50%; background:var(--gold); flex-shrink:0}
.pc-cta{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:6px;
  transition:gap .2s var(--ease);
}
.pc:hover .pc-cta{gap:10px}
.pc-cta-arr{font-size:.9rem}

/* ── No results ── */
.no-results{
  grid-column:1/-1; text-align:center; padding:80px 24px;
  color:var(--muted); font-size:1rem; display:none;
}

/* ── Responsive ── */
@media(max-width:980px){
  .proj-featured{grid-template-columns:1fr}
  .proj-standard{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .proj-standard{grid-template-columns:1fr}
  .proj-filter{gap:6px}
  .pf-chip{height:30px; padding:0 14px; font-size:.78rem}
}
@media(max-width:380px){
  .proj-hero-h{font-size:2rem}
  .pf-chip{height:28px; padding:0 12px; font-size:.72rem}
}