/* Portfolio page — styles specific to portfolio.html (shared rules live in css/site.css) */

.hero{padding:100px 0 74px;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:rgba(45,168,255,.15);filter:blur(26px);right:-170px;top:-230px}
.hero:after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(142,240,199,.08);filter:blur(30px);left:-220px;bottom:-250px}
.hero-inner{max-width:900px}
.hero-copy{max-width:760px;margin:0 0 30px}
.hero-meta{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:32px;color:#b9cbd8;font-size:13px
}
.hero-meta span{
  padding:8px 11px;border:1px solid var(--line);
  background:rgba(255,255,255,.025);border-radius:10px
}

.filter-bar{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 30px}
.filter-btn{
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:#c7d6e1;border-radius:999px;padding:9px 13px;
  cursor:pointer;font-weight:700;font-size:13px
}
.filter-btn:hover,.filter-btn.active{
  color:#06111c;background:var(--brand-2);border-color:var(--brand-2)
}

.projects{display:grid;gap:28px}
.project{
  display:grid;grid-template-columns:.92fr 1.08fr;
  border:1px solid var(--line);border-radius:28px;
  overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.015));
  box-shadow:var(--shadow)
}
.project:nth-child(even){grid-template-columns:1.08fr .92fr}
.project:nth-child(even) .project-media{order:2}
.project-media{
  min-height:390px;background:#0b1625;
  position:relative;overflow:hidden
}
.project-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease
}
.project:hover .project-media img{transform:scale(1.025)}
.project-media:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(7,17,31,.22))
}
.project-content{padding:36px}
.project-number{
  display:inline-block;color:#80d8ff;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:9px
}
.project h2{font-size:34px;line-height:1.08;letter-spacing:-.03em;margin:0 0 9px}
.project-lead{color:#c1d0db;font-size:17px;margin:0 0 22px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tag{
  font-size:12px;font-weight:700;color:#c9eafa;
  border:1px solid rgba(98,208,255,.18);
  background:rgba(45,168,255,.07);padding:6px 9px;border-radius:9px
}
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px}
.story-box{
  border:1px solid var(--line);border-radius:15px;
  padding:16px;background:rgba(255,255,255,.02)
}
.story-box strong{
  display:block;color:#8fe5ff;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px
}
.story-box p{margin:0;color:#c6d4de;font-size:14px}
.capabilities{margin:0;padding-left:18px;color:#d8e5ed;font-size:14px}
.capabilities li{margin:5px 0}
.note{
  margin-top:20px;color:#8ea6b7;font-size:13px;
  border-left:2px solid rgba(98,208,255,.35);padding-left:12px
}

.experience{
  background:var(--bg-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.experience-card{
  padding:25px;border:1px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.025)
}
.experience-card h3{font-size:20px;margin:0 0 10px}
.experience-card p{margin:0;color:var(--muted);font-size:14px}
.experience-card .mini{
  display:inline-block;margin-bottom:16px;font-size:20px
}

.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.stack-list{display:flex;flex-wrap:wrap;gap:10px}
.stack-list span{
  padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,.025);
  color:#d4e2ec;font-size:13px;font-weight:700
}
.principles{display:grid;gap:12px}
.principle{
  border:1px solid var(--line);border-radius:16px;
  padding:18px;background:rgba(255,255,255,.022)
}
.principle strong{display:block;margin-bottom:3px}
.principle span{color:var(--muted);font-size:14px}

.hidden-project{display:none}

@media(max-width:920px){
  .project,.project:nth-child(even){grid-template-columns:1fr}
  .project:nth-child(even) .project-media{order:0}
  .project-media{min-height:320px}
  .experience-grid{grid-template-columns:1fr 1fr}
  .stack-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero{padding:66px 0 58px}
  .hero-copy{font-size:17px}
  .project-content{padding:24px}
  .project h2{font-size:28px}
  .project-media{min-height:235px}
  .story{grid-template-columns:1fr}
  .experience-grid{grid-template-columns:1fr}
}