/* ==========================================================================
   Ngare Digital — Projects / Portfolio redesign (scoped to .pf-*)
   Dark navy + emerald premium showcase. Safe to load only on /projects.
   ========================================================================== */
.pf-scope{
  --pf-navy:#071827;
  --pf-navy-2:#04111f;
  --pf-navy-3:#0b1c2e;
  --pf-emerald:#10b981;
  --pf-emerald-bright:#00d99a;
  --pf-white:#ffffff;
  --pf-muted:#a8b7c8;
  --pf-line:rgba(255,255,255,.10);
  --pf-line-strong:rgba(255,255,255,.18);
  --pf-glass:rgba(255,255,255,.04);
  --pf-glass-2:rgba(255,255,255,.06);
  --pf-radius:18px;
  --pf-radius-sm:12px;
  --pf-radius-lg:26px;
  --pf-shadow:0 18px 50px rgba(2,8,16,.55);
  --pf-shadow-sm:0 8px 24px rgba(2,8,16,.40);
  --pf-trans:.28s cubic-bezier(.4,0,.2,1);
}

/* ---------- Hero ---------- */
.pf-hero{
  position:relative; color:var(--pf-white); overflow:hidden;
  padding-block:clamp(3rem, 2rem + 6vw, 6rem);
  background:
    radial-gradient(60% 90% at 82% -20%, rgba(0,217,154,.20), transparent 62%),
    radial-gradient(50% 70% at -10% 120%, rgba(16,185,129,.14), transparent 60%),
    linear-gradient(180deg, var(--pf-navy-2), var(--pf-navy));
  border-bottom:1px solid var(--pf-line);
}
.pf-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--pf-line) 1px, transparent 1px),linear-gradient(90deg,var(--pf-line) 1px, transparent 1px);
  background-size:56px 56px; opacity:.25;
  mask-image:radial-gradient(70% 70% at 50% 0%, #000 0%, transparent 75%);
}
.pf-hero .container{position:relative; z-index:1}
.pf-hero .breadcrumbs{color:var(--pf-muted)}
.pf-hero .breadcrumbs a{color:var(--pf-muted)}
.pf-hero .breadcrumbs a:hover{color:var(--pf-emerald-bright)}
.pf-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pf-emerald-bright); margin:.4rem 0 1rem;
}
.pf-eyebrow::before{content:""; width:26px; height:2px; background:var(--pf-emerald-bright); border-radius:2px}
.pf-title{
  font-size:clamp(2rem, 1.2rem + 4.4vw, 3.6rem);
  line-height:1.05; letter-spacing:-.02em; margin:0 0 1rem; color:var(--pf-white);
  font-weight:800;
}
.pf-title .pf-accent{color:var(--pf-emerald-bright)}
.pf-lead{color:var(--pf-muted); font-size:clamp(1rem,.96rem+.4vw,1.18rem); max-width:62ch; margin:0 0 1.6rem}
.pf-hero-actions{display:flex; flex-wrap:wrap; gap:.7rem}

/* ---------- Section + filter bar ---------- */
.pf-section{background:var(--pf-navy)}
.pf-section .container{position:relative}
.pf-filterbar{
  display:flex; gap:.5rem; margin-bottom:1.1rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:.35rem; scrollbar-width:thin;
}
.pf-filterbar::-webkit-scrollbar{height:6px}
.pf-filterbar::-webkit-scrollbar-thumb{background:var(--pf-line-strong); border-radius:6px}
.pf-chip{
  flex:0 0 auto; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px; padding:.55rem 1rem; border-radius:999px;
  background:var(--pf-glass); border:1px solid var(--pf-line);
  color:var(--pf-muted); font:inherit; font-size:.9rem; font-weight:600; white-space:nowrap;
  transition:background var(--pf-trans), color var(--pf-trans), border-color var(--pf-trans), transform .12s;
}
.pf-chip:hover{border-color:var(--pf-line-strong); color:var(--pf-white)}
.pf-chip:focus-visible{outline:2px solid var(--pf-emerald-bright); outline-offset:2px}
.pf-chip.is-active{
  background:linear-gradient(135deg, var(--pf-emerald), var(--pf-emerald-bright));
  color:#04150f; border-color:transparent;
}
.pf-count{color:var(--pf-muted); font-size:.85rem; margin:0 0 1.4rem}

/* ---------- Grid + cards ---------- */
.pf-grid{display:grid; gap:1.4rem; grid-template-columns:1fr}
@media (min-width:680px){ .pf-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .pf-grid{grid-template-columns:repeat(3,1fr)} }

.pf-card{
  display:flex; flex-direction:column; min-width:0;
  background:linear-gradient(180deg, var(--pf-navy-3), var(--pf-navy-2));
  border:1px solid var(--pf-line); border-radius:var(--pf-radius);
  overflow:hidden; box-shadow:var(--pf-shadow-sm);
  transition:transform var(--pf-trans), border-color var(--pf-trans), box-shadow var(--pf-trans);
}
.pf-card:hover{transform:translateY(-4px); border-color:var(--pf-line-strong); box-shadow:var(--pf-shadow)}
.pf-card-media{
  position:relative; overflow:hidden;
  aspect-ratio:16/10; background:radial-gradient(120% 120% at 20% 0%, rgba(16,185,129,.14), transparent 60%), var(--pf-navy-2);
  display:grid; place-items:center; padding:1rem;
  border-bottom:1px solid var(--pf-line);
}
.pf-card-media > *{width:100%}
.pf-card-media img{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.pf-card:hover .pf-card-media img{transform:scale(1.04)}
.pf-card-body{display:flex; flex-direction:column; gap:.6rem; padding:1.2rem 1.2rem 1.3rem; flex:1}
.pf-badge{
  align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:999px;
  color:var(--pf-emerald-bright);
  background:color-mix(in srgb, var(--pf-emerald) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--pf-emerald) 34%, transparent);
}
.pf-card-title{margin:0; font-size:1.22rem; color:var(--pf-white); letter-spacing:-.01em}
.pf-card-desc{margin:0; color:var(--pf-muted); font-size:.94rem; line-height:1.55}
.pf-chips{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 0; padding:0}
.pf-chips li{
  font-size:.74rem; color:var(--pf-muted);
  background:var(--pf-glass); border:1px solid var(--pf-line);
  border-radius:999px; padding:.24rem .6rem;
}
.pf-card-actions{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:auto; padding-top:.9rem}
.pf-card-actions .btn{min-height:44px}
.pf-empty{color:var(--pf-muted); text-align:center; padding:2.5rem 0}

/* Keep the composed product visuals legible on the dark card surface */
.pf-card-media .pv-browser,.pf-card-media .pv-phone,.pf-card-media .pv-device{width:100%}
.pf-card-media .pv-phone{max-width:190px; margin:0 auto}
.pf-card-media .slider-btn{background:rgba(4,17,31,.7); color:#fff}

/* Clearly-illustrative branded panel styles now live in the global ngare.css
   so both the homepage and the projects page can use them. */

/* ---------- Closing CTA ---------- */
.pf-cta{padding-block:clamp(3rem, 2rem + 5vw, 5rem); background:var(--pf-navy-2)}
.pf-cta-card{
  position:relative; overflow:hidden; text-align:center;
  border-radius:var(--pf-radius-lg); padding:clamp(1.8rem, 1rem + 4vw, 3.4rem);
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(0,217,154,.22), transparent 60%),
    linear-gradient(135deg, var(--pf-navy), #0e2a44);
  border:1px solid var(--pf-line);
}
.pf-cta-card h2{margin:0 0 .4rem; color:var(--pf-white); font-size:clamp(1.6rem,1.2rem+2.4vw,2.6rem); letter-spacing:-.02em}
.pf-cta-card p{margin:0 0 1.4rem; color:var(--pf-muted); font-size:1.06rem}

/* ---------- Mobile refinements ---------- */
@media (max-width:679px){
  .pf-hero{padding-block:clamp(2.2rem, 1.4rem + 6vw, 3rem)}
  .pf-title br.pf-m{display:block}
  .pf-card-media{aspect-ratio:4/3; padding:.8rem}
  .pf-card-actions .btn{flex:1 1 100%}
  .pf-filterbar{margin-inline:-1rem; padding-inline:1rem}
}
@media (prefers-reduced-motion: reduce){
  .pf-card,.pf-card-media img,.pf-chip{transition:none !important}
  .pf-card:hover{transform:none}
  .pf-card:hover .pf-card-media img{transform:none}
}