/* =========================
   PORTFOLIO — Page scoped styles
========================= */

.page-portfolio{
  --bg:#090112;
  --text:#fff;
  --muted:#b8b8c2;
  --line:rgba(255,255,255,0.08);
  --purple:#d403e0;
  --blue:#6f2aff;
  --top-gap:56px;

  background:transparent;
  color:var(--text);
  font-family:'Glacial Indifference', system-ui, sans-serif;
  overflow-x:hidden;
  position:relative;
  isolation:isolate;
}

@media (max-width:820px){
  .page-portfolio{
    --top-gap: calc(var(--mobile-header-h,60px) + var(--mobile-gap,12px));
  }
}

@media (min-width:821px){
  .page-portfolio{
    --top-gap: calc(var(--nav-h,80px) + 50px);
  }
}

/* PAGE BASE */
.page-portfolio .portfolio-hero{
  min-height:62vh;
  display:flex;
  align-items:center;
  padding: var(--top-gap) 8vw 30px;
  position:relative;
}

.page-portfolio .portfolio-hero::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:280px;
  background:radial-gradient(circle at 30% 50%, rgba(177,0,255,0.22), transparent 45%);
  pointer-events:none;
}

.page-portfolio .hero-text{
  max-width:900px;
  position:relative;
  z-index:2;
}

.page-portfolio .eyebrow{
  color:var(--muted);
  letter-spacing:3px;
  font-size:0.85rem;
  margin-bottom:18px;
}

.page-portfolio .hero-text h1{
  font-size:clamp(3rem, 8vw, 6.8rem);
  line-height:0.95;
  font-weight:900;
  letter-spacing:-2px;
}

.page-portfolio .hero-text h1 span{
  background:linear-gradient(180deg, #e45cff 0%, #8d00ff 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.page-portfolio .hero-sub{
  margin-top:24px;
  max-width:640px;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.7;
}

/* INTRO */
.page-portfolio .portfolio-intro{
  padding:0 8vw 40px;
}

.page-portfolio .portfolio-intro p{
  max-width:780px;
  color:var(--muted);
  line-height:1.8;
  font-size:1rem;
}

/* GRID */
.page-portfolio .portfolio-grid{
  padding:20px 8vw 80px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.page-portfolio .portfolio-card{
  position:relative;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(10,10,14,0.62), rgba(18,18,24,0.50));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  min-height:420px;
}

.page-portfolio .portfolio-card.featured{
  transform:translateY(-10px);
}

.page-portfolio .card-glow{
  position:absolute;
  top:-60px;
  right:-40px;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(177,0,255,0.35), transparent 65%);
  filter:blur(10px);
}

.page-portfolio .card-content{
  position:relative;
  z-index:2;
  padding:34px 28px 28px;
  display:flex;
  flex-direction:column;
  height:100%;
}

.page-portfolio .card-tag{
  color:#c9a7ff;
  font-size:0.8rem;
  letter-spacing:2px;
  margin-bottom:20px;
}

.page-portfolio .portfolio-card h2{
  font-size:2rem;
  margin-bottom:18px;
  line-height:1.05;
}

.page-portfolio .portfolio-card p{
  color:var(--muted);
  line-height:1.7;
  font-size:0.98rem;
}

.page-portfolio .download-btn{
  margin-top:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(177,0,255,0.65);
  box-shadow:0 0 22px rgba(177,0,255,0.18);
  transition:0.3s ease;
}

.page-portfolio .download-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(177,0,255,0.35);
  background:rgba(177,0,255,0.08);
}

/* SELECTOR */
.page-portfolio .portfolio-selector{
  padding:0 8vw 100px;
}

.page-portfolio .selector-box{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:30px;
  padding:38px 32px;
  background:linear-gradient(180deg, rgba(12,12,16,0.55), rgba(24,12,34,0.42));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:center;
}

.page-portfolio .selector-label{
  color:#c9a7ff;
  font-size:0.82rem;
  letter-spacing:3px;
  margin-bottom:14px;
}

.page-portfolio .selector-box h3{
  font-size:2rem;
  margin-bottom:12px;
}

.page-portfolio .selector-sub{
  color:var(--muted);
  max-width:650px;
  margin:0 auto 30px;
  line-height:1.7;
}

.page-portfolio .selector-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}

.page-portfolio .selector-pill{
  text-decoration:none;
  color:#fff;
  padding:14px 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  transition:0.3s ease;
  font-weight:700;
}

.page-portfolio .selector-pill:hover{
  border-color:rgba(177,0,255,0.7);
  box-shadow:0 0 20px rgba(177,0,255,0.25);
  transform:translateY(-2px);
}

/* RESPONSIVE */
@media (max-width:1100px){
  .page-portfolio .portfolio-grid{
    grid-template-columns:1fr;
  }

  .page-portfolio .portfolio-card.featured{
    transform:none;
  }
}

@media (max-width:768px){
  .page-portfolio .portfolio-hero{
    padding: calc(var(--top-gap) + 20px) 20px 20px;
    min-height:auto;
  }

  .page-portfolio .portfolio-intro,
  .page-portfolio .portfolio-grid,
  .page-portfolio .portfolio-selector{
    padding-left:20px;
    padding-right:20px;
  }

  .page-portfolio .selector-box{
    padding:28px 20px;
  }

  .page-portfolio .hero-text h1{
    font-size:clamp(2.8rem, 13vw, 4.8rem);
    line-height:0.95;
  }

  .page-portfolio .hero-sub{
    font-size:1rem;
  }
}

/* BACKGROUND IMAGE SYSTEM */
.page-portfolio::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.74)),
    url("/assets/web/portfolio-bg.jpg") center center / cover no-repeat;
  filter:saturate(105%) contrast(105%);
  pointer-events:none;
}

.page-portfolio::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(70% 60% at 20% 30%, rgba(212,3,224,.16) 0%, transparent 60%),
    radial-gradient(70% 60% at 80% 20%, rgba(111,42,255,.12) 0%, transparent 60%),
    radial-gradient(90% 80% at 50% 100%, rgba(0,0,0,.45) 0%, transparent 70%);
  pointer-events:none;
}