/* ================================================================
   BRICK4BRICK — css/portfolio.css
   Portfolio page styles
   ================================================================ */

/* ── Featured Project ─────────────────────────────────────── */
.feat-project    { margin-top:52px }
.fp-eyebrow      {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:36px; flex-wrap:wrap; gap:12px;
}

.fp-body         {
  display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;
}

/* ── Browser mockup ───────────────────────────────────────── */
.fp-browser      {
  background:var(--s2); border:1px solid var(--border); border-radius:var(--r3); overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feat-project:hover .fp-browser {
  transform:translateY(-6px) rotate(-.4deg);
  box-shadow:0 48px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(200,255,87,.06);
}
.fpb-bar         {
  background:var(--s3); padding:10px 14px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--border);
}
.fpb-dots        { display:flex; gap:6px }
.fpb-dots span   { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.12) }
.fpb-dots span:nth-child(1) { background:#FF6058 }
.fpb-dots span:nth-child(2) { background:#FFBD2E }
.fpb-dots span:nth-child(3) { background:#28C940 }
.fpb-url         {
  flex:1; background:var(--s1); border:1px solid var(--border); border-radius:6px;
  padding:4px 12px; font-family:'JetBrains Mono',monospace; font-size:.66rem; color:var(--muted);
}
.fpb-screen      { aspect-ratio:16/8; overflow:hidden; position:relative }

/* ── Project info ─────────────────────────────────────────── */
.fp-cat          {
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.fp-title        {
  font-family:'Syne',sans-serif; font-size:clamp(1.8rem,3.5vw,2.4rem); font-weight:800;
  margin-bottom:18px; line-height:1.1; letter-spacing:-.025em;
}
.fp-desc         { color:var(--muted); font-size:.9375rem; line-height:1.75; margin-bottom:28px }

.fp-stats        { display:flex; gap:32px; margin-bottom:32px }
.fp-stat         {}
.fp-sn           { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:var(--accent) }
.fp-sl           { font-size:.7rem; color:var(--muted); margin-top:3px; line-height:1.4 }
.fp-actions      { display:flex; gap:12px; flex-wrap:wrap }

/* ── "More coming" section ────────────────────────────────── */
.more-soon       {
  margin-top:80px; background:var(--s1); border:1px solid var(--border);
  border-radius:var(--r4); padding:52px 56px;
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  position:relative; overflow:hidden;
}
.more-soon::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--accent),#4A7CFF);
  border-radius:var(--r4) 0 0 var(--r4);
}
.more-soon h3    { font-size:1.25rem; margin-bottom:8px }
.more-soon p     { color:var(--muted); font-size:.9375rem; line-height:1.6; max-width:480px }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1024px) {
  .fp-body      { grid-template-columns:1fr; gap:36px }
  .more-soon    { grid-template-columns:1fr; padding:36px 32px }
}
@media (max-width:768px) {
  .fp-eyebrow   { flex-direction:column; align-items:flex-start }
  .fp-stats     { gap:22px }
  .more-soon    { padding:28px 24px }
}
@media (max-width:480px) {
  .fp-actions .btn { width:100%; justify-content:center }
  .fp-stats     { flex-wrap:wrap }
}

/* ── Legacy card styles (kept for future use) ────────────── */
.port-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px }
.pcard {
  background:var(--s1); border:1px solid var(--border); border-radius:var(--r4);
  overflow:hidden; transition:all var(--t) var(--ease);
}
.pcard:hover          { transform:translateY(-6px); box-shadow:0 24px 64px rgba(0,0,0,.5); border-color:rgba(200,255,87,.2) }
.pthumb               { aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; font-size:3rem; transition:transform .5s ease; position:relative; overflow:hidden }
.pthumb::after        { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.35)); pointer-events:none }
.pcard:hover .pthumb  { transform:scale(1.06) }
.pbody                { padding:22px 22px 14px }
.ptag                 { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px }
.ptitle2              { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; margin-bottom:7px }
.pdesc                { font-size:.84rem; color:var(--muted); line-height:1.6 }
.pfooter              { padding:0 22px 18px; display:flex; gap:6px; flex-wrap:wrap }
.tag                  { font-size:.66rem; padding:3px 10px; background:var(--glow); color:var(--accent); border-radius:100px; font-weight:500; border:1px solid rgba(200,255,87,.15) }