/* ══════════════════════════════════════════════════════════════════
   Green Edge Technologies — Portfolio · portfolio.css
   Aesthetic: Editorial magazine grid — dark, image-rich, curated
══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────────── */
:root {
  --bg:#0A0F1C; --bg-2:#121826; --bg-3:#0d1220;
  --surface:#1A2235; --surface-2:#202c42;
  --border:rgba(255,255,255,.07); --border-g:rgba(0,200,83,.22);
  --text:#FFFFFF; --text-muted:#B0B8C5; --text-faint:#6F7A8A;
  --green:#00C853; --green-dark:#006837;
  --green-glow:rgba(0,200,83,.30); --green-subtle:rgba(0,200,83,.08);
  --ai-blue:#00A8FF; --tech-purple:#6C63FF; --orange:#FF6B00;
  --grad-text:linear-gradient(120deg,#00C853 0%,#00A8FF 50%,#6C63FF 100%);
  --grad-btn:linear-gradient(135deg,#00C853,#006837);
  --font-d:'Manrope',sans-serif; --font-b:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --radius:14px; --radius-lg:22px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:72px
}
body.light {
  --bg:#F5F7FA; --bg-2:#EBEEF3; --bg-3:#E0E5EE;
  --surface:#FFFFFF; --surface-2:#F0F3F8;
  --border:rgba(0,0,0,.08); --border-g:rgba(0,200,83,.30);
  --text:#0A0F1C; --text-muted:#4A5568; --text-faint:#9AA5B4;
  --green-subtle:rgba(0,200,83,.10)
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-b); font-size:16px; line-height:1.7;
  cursor:default;
  transition:background .4s,color .4s
}
a { color:inherit; text-decoration:none }
ul { list-style:none }
img { display:block; max-width:100%; height:auto }
button { border:none; background:none; font-family:inherit; cursor:pointer }
input,select,textarea { font-family:inherit; font-size:inherit; outline:none }

/* NOISE */
/* CONTAINER */
.container { max-max-width: 1240px; width: 100%; margin:0 auto; padding:0 28px }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 26px; border-radius:9px;
  font-family:var(--font-d); font-weight:700; font-size:.9rem;
  letter-spacing:.01em; transition:all .3s var(--ease);
  position:relative; overflow:hidden; cursor:pointer
}
.btn::after { content:''; position:absolute; inset:0; opacity:0; background:rgba(255,255,255,.1); border-radius:inherit; transition:opacity .25s }
.btn:hover::after { opacity:1 }
.btn-primary { background:var(--grad-btn); color:#fff; box-shadow:0 4px 22px var(--green-glow) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 40px var(--green-glow),0 0 0 1px rgba(0,200,83,.35) }
.btn-ghost { border:1.5px solid var(--green); color:var(--green); background:var(--green-subtle) }
.btn-ghost:hover { background:rgba(0,200,83,.16); transform:translateY(-2px) }
.btn-sm { padding:9px 18px; font-size:.82rem }
.btn-lg { padding:15px 34px; font-size:1rem; border-radius:11px }
.btn-pulse { animation:btnPulse 3s ease-in-out infinite }
.btn-pulse:hover { animation:none }
@keyframes btnPulse {
  0%,100%{box-shadow:0 4px 22px var(--green-glow)}
  50%{box-shadow:0 4px 44px rgba(0,200,83,.6),0 0 0 7px rgba(0,200,83,.07)}
}
.gradient-text {
  background:var(--grad-text); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text
}

/* REVEALS */
.reveal-up {
  opacity:0; transform:translateY(32px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.reveal-up.visible { opacity:1; transform:translateY(0) }

/* PROGRESS RING / BACK TO TOP */
.progress-ring-wrap {
  position:fixed; bottom:2rem; right:2rem; z-index:2200;
  width:52px; height:52px; border-radius:50%;
  background:var(--surface); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; visibility:hidden;
  transform:translateY(14px) scale(.9);
  transition:opacity .35s,visibility .35s,transform .35s var(--ease);
  box-shadow:0 4px 24px rgba(0,0,0,.4)
}
.progress-ring-wrap.visible { opacity:1; visibility:visible; transform:translateY(0) scale(1) }
.progress-ring-wrap:hover { transform:translateY(-3px) scale(1.06) }
.progress-ring { position:absolute; inset:0; transform:rotate(-90deg) }
.progress-ring__track { fill:none; stroke:rgba(255,255,255,.08); stroke-width:2.5 }
.progress-ring__fill { fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:125.66; stroke-dashoffset:125.66; transition:stroke-dashoffset .1s linear }
.progress-ring__icon { position:relative; z-index:1; color:var(--green) }

/* ══ NAV ═════════════════════════════════════════════════════════════ */
.mobile-nav-label { font-family:var(--font-d); font-size:1.05rem; font-weight:700; color:var(--text-muted) }
/* ══ FOOTER ══════════════════════════════════════════════════════════ */
.footer-col h5 { font-family:var(--font-d); font-size:.73rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.25rem }
.footer-col ul { display:flex; flex-direction:column; gap:9px }
.footer-col a { font-size:.875rem; color:var(--text-muted); transition:color .2s; cursor:pointer }
.footer-col a:hover { color:var(--green) }

/* ══════════════════════════════════════════════════════════════════
   PORTFOLIO PAGE — UNIQUE EDITORIAL GRID AESTHETIC
   Direction: Dark editorial magazine — large images, bold type
══════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO ────────────────────────────────────────────────────── */
.port-hero {
  padding-top:var(--nav-h); background:var(--bg);
  position:relative; overflow:hidden; padding-bottom:0
}
.port-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 80% at 90% 50%, rgba(0,200,83,.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 5% 80%, rgba(0,168,255,.04) 0%, transparent 55%)
}
/* large faint number watermark */
.port-hero-num {
  position:absolute; right:-2rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-d); font-size:clamp(9.375rem, 16.875vw, 20.625rem);
  font-weight:800; letter-spacing:-.08em; line-height:1;
  color:rgba(255,255,255,.02); pointer-events:none; user-select:none;
  white-space:nowrap
}
body.light .port-hero-num { color:rgba(0,0,0,.025) }
.port-hero-inner {
  padding:5rem 0 4.5rem; position:relative; z-index:1;
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:3rem
}
.port-hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:1.25rem;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  color:var(--green); letter-spacing:.12em; text-transform:uppercase;
  padding:5px 14px; border:1px solid var(--border-g);
  border-radius:4px; background:var(--green-subtle)
}
.port-hero-title {
  font-family:var(--font-d);
  font-size:clamp(2.8125rem, 5.625vw, 5.1562rem);
  font-weight:800; letter-spacing:-.06em; line-height:1;
  margin-bottom:1.25rem;
  animation:pFadeUp .8s var(--ease) .05s both
}
@keyframes pFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.port-hero-sub {
  font-size:1.05rem; color:var(--text-muted); line-height:1.78;
  max-max-width: 500px; width: 100%; animation:pFadeUp .8s var(--ease) .15s both
}
/* right: stats */
.port-hero-stats {
  display:flex; flex-direction:column; gap:.6rem; align-items:flex-end;
  animation:pFadeUp .8s var(--ease) .2s both
}
.port-stat { text-align:right }
.port-stat-val { font-family:var(--font-d); font-size:2.4rem; font-weight:800; letter-spacing:-.05em; line-height:1 }
.port-stat-val span { color:var(--green) }
.port-stat-label { font-family:var(--mono); font-size:.62rem; color:var(--text-faint); letter-spacing:.1em; text-transform:uppercase }
.port-hero-divider { height:1px; background:linear-gradient(90deg,transparent,var(--border-g),transparent); margin-top:4rem }

/* ── FILTER BAR ───────────────────────────────────────────────────── */
.port-filter-bar { background:var(--bg); padding:1.75rem 0; position:sticky; top:var(--nav-h); z-index:100; border-bottom:1px solid var(--border) }
body.light .port-filter-bar { background:var(--bg) }
.port-filter-inner { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.filter-btn {
  font-family:var(--font-d); font-size:.78rem; font-weight:700;
  padding:6px 16px; border-radius:100px; cursor:pointer;
  border:1px solid var(--border); color:var(--text-faint);
  background:transparent; transition:all .25s var(--ease)
}
.filter-btn:hover { border-color:var(--border-g); color:var(--green); background:var(--green-subtle) }
.filter-btn.active { background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 4px 16px var(--green-glow) }
.filter-count { margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--text-faint) }

/* ── MAIN PROJECTS GRID ───────────────────────────────────────────── */
.port-grid-section { padding:60px 0 100px; background:var(--bg) }
.port-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem
}

/* ── PROJECT CARD ─────────────────────────────────────────────────── */
.pcard {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  cursor:pointer; display:flex; flex-direction:column;
  transition:border-color .3s,box-shadow .4s var(--ease),transform .4s var(--ease)
}
.pcard:hover { border-color:var(--border-g); box-shadow:0 32px 72px rgba(0,0,0,.45); transform:translateY(-7px) }

/* image zone */
.pcard-img {
  position:relative; overflow:hidden; aspect-ratio:16/10;
  background:var(--bg-2)
}
.pcard-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease)
}
.pcard:hover .pcard-img img { transform:scale(1.06) }
/* image gradient overlay */
.pcard-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,15,28,.7) 100%);
  pointer-events:none
}
body.light .pcard-img::after {
  background:linear-gradient(180deg,transparent 40%,rgba(20,30,50,.55) 100%)
}
/* year badge on image */
.pcard-year {
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  color:#fff; background:rgba(10,15,28,.7); backdrop-filter:blur(8px);
  padding:4px 10px; border-radius:100px;
  border:1px solid rgba(255,255,255,.12)
}
/* category pill on image */
.pcard-cat {
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-d); font-size:.62rem; font-weight:800;
  padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.06em
}

/* live project button on portfolio card image overlay */
.pcard-live {
  position:absolute; left:14px; bottom:14px; z-index:4;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:100px;
  background:rgba(0,200,83,.92); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  font-family:var(--font-d); font-size:.72rem; font-weight:800;
  line-height:1; text-decoration:none;
  opacity:0; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), background .2s;
}
.pcard:hover .pcard-live,
.pcard:focus-within .pcard-live { opacity:1; transform:translateY(0) }
.pcard-live:hover { background:#00C853; color:#fff }
.pcard-live svg { flex-shrink:0 }

/* card body */
.pcard-body { padding:1.5rem; flex:1; display:flex; flex-direction:column }
.pcard-client {
  display:flex; align-items:center; gap:5px; margin-bottom:.55rem;
  font-family:var(--mono); font-size:.64rem; color:var(--text-faint); letter-spacing:.06em
}
.pcard-title { font-family:var(--font-d); font-size:1rem; font-weight:800; line-height:1.3; margin-bottom:.55rem }
.pcard-desc { font-size:.83rem; color:var(--text-muted); line-height:1.68; flex:1; margin-bottom:1.1rem }
.pcard-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem }
.ptag {
  font-family:var(--font-d); font-size:.62rem; font-weight:700;
  padding:3px 9px; border-radius:100px
}
.ptag-g  { background:rgba(0,200,83,.1);  color:#00C853; border:1px solid rgba(0,200,83,.25) }
.ptag-b  { background:rgba(0,168,255,.1); color:#00A8FF; border:1px solid rgba(0,168,255,.25) }
.ptag-p  { background:rgba(108,99,255,.1);color:#6C63FF; border:1px solid rgba(108,99,255,.25) }
.ptag-o  { background:rgba(255,107,0,.1); color:#FF6B00; border:1px solid rgba(255,107,0,.25) }
.ptag-r  { background:rgba(255,45,85,.1); color:#FF2D55; border:1px solid rgba(255,45,85,.25) }
.ptag-ai { background:rgba(57,255,20,.07);color:#39FF14; border:1px solid rgba(57,255,20,.22) }
.pcard-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1rem; border-top:1px solid var(--border); margin-top:auto
}
.pcard-link {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-d); font-size:.8rem; font-weight:700;
  color:var(--green); transition:gap .2s
}
.pcard:hover .pcard-link { gap:9px }
.pcard-num {
  font-family:var(--mono); font-size:.65rem; color:var(--text-faint)
}

/* ── NO RESULTS ───────────────────────────────────────────────────── */
.port-empty {
  display:none; grid-column:1/-1; text-align:center; padding:5rem 0;
  color:var(--text-faint)
}
.port-empty.visible { display:block }
.port-empty h3 { font-family:var(--font-d); font-size:1.1rem; font-weight:800; margin-bottom:.5rem }

/* ── CTA BANNER ───────────────────────────────────────────────────── */
.port-cta {
  background:var(--bg-2); border-top:1px solid var(--border); padding:80px 0
}
.port-cta-inner {
  display:grid; grid-template-columns:1fr auto;
  gap:3rem; align-items:center
}
.port-cta h2 {
  font-family:var(--font-d); font-size:clamp(1.6875rem, 2.8125vw, 2.625rem);
  font-weight:800; letter-spacing:-.04em; line-height:1.15; margin-bottom:.75rem
}
.port-cta p { color:var(--text-muted); font-size:.95rem; line-height:1.75 }
.port-cta-btns { display:flex; gap:1rem; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:1100px) {
  .port-grid { grid-template-columns:repeat(2,1fr) }
  .port-hero-inner { grid-template-columns:1fr; gap:2rem }
  .port-hero-stats { flex-direction:row; align-items:flex-start }
  .port-stat { text-align:left }
  .port-cta-inner { grid-template-columns:1fr; gap:2rem }
  .port-cta-btns { justify-content:flex-start }
}
@media(max-width:960px) {
@media(max-width:768px) {
  .port-grid { grid-template-columns:1fr }
  .pcard-live { opacity:1; transform:none }
  .port-hero-title { font-size:3rem }
  .port-filter-bar { top:0 }
}
@media(max-width:560px) {

/* ══════════════════════════════════════════════════════════════════
   PROJECT DETAIL OVERLAY
══════════════════════════════════════════════════════════════════ */

/* ── pcard-link is now a button ── */
.pcard-link {
  background:none; border:none; padding:0;
  font-family:var(--font-d); font-size:.8rem; font-weight:700;
  color:var(--green); cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  transition:gap .2s
}
.pcard:hover .pcard-link { gap:9px }

/* ── pcard-tags is now tighter ── */
.pcard-tags { margin-bottom:0 }

/* backdrop */
.po-backdrop {
  position:absolute; inset:0;
  background:rgba(5,8,18,.82); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer
}

/* panel */
.po-panel {
  position:relative; z-index:1;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  width:100%; max-width:760px; max-height:90vh;
  overflow-y:auto; display:flex; flex-direction:column;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  animation:poSlideIn .4s var(--ease) both
}
@keyframes poSlideIn {
  from { opacity:0; transform:translateY(28px) scale(.97) }
  to   { opacity:1; transform:translateY(0)    scale(1)   }
}

/* close button — fixed to top-right of panel, always visible */
.po-close {
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(18,24,38,.85); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
  transition:all .2s; z-index:10;
  flex-shrink:0
}
.po-close:hover { background:var(--green); border-color:var(--green) }

/* image */
.po-img {
  position:relative; aspect-ratio:16/8;
  overflow:hidden; flex-shrink:0
}
.po-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease)
}
.po-panel:hover .po-img img { transform:scale(1.03) }
.po-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,15,28,.75) 100%);
  pointer-events:none
}
body.light .po-img::after {
  background:linear-gradient(180deg,transparent 45%,rgba(20,30,50,.6) 100%)
}
/* year — bottom-right, away from close button */
.po-year {
  position:absolute; bottom:14px; right:14px; z-index:2;
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  color:#fff; background:rgba(10,15,28,.7); backdrop-filter:blur(8px);
  padding:4px 11px; border-radius:100px;
  border:1px solid rgba(255,255,255,.14)
}
.po-cat-badge {
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--font-d); font-size:.65rem; font-weight:800;
  padding:4px 11px; border-radius:100px;
  text-transform:uppercase; letter-spacing:.06em;
  background:var(--green); color:#fff
}

/* body */
.po-body { padding:2rem 2rem 2.5rem }
.po-meta {
  display:flex; align-items:center; gap:6px; margin-bottom:.65rem;
  font-family:var(--mono); font-size:.68rem; color:var(--text-faint); letter-spacing:.06em
}
.po-title {
  font-family:var(--font-d); font-size:clamp(1.125rem, 2.8125vw, 1.5rem);
  font-weight:800; letter-spacing:-.03em; line-height:1.2;
  margin-bottom:1.1rem
}
.po-desc {
  font-size:.95rem; color:var(--text-muted);
  line-height:1.82; margin-bottom:1.5rem
}
/* reuse pcard-tags inside overlay */
.po-body .pcard-tags { margin-bottom:2rem }
.po-actions {
  display:flex; gap:.85rem; flex-wrap:wrap;
  padding-top:1.5rem; border-top:1px solid var(--border)
}

/* ── scrollbar styling inside panel ── */
.po-panel::-webkit-scrollbar { width:4px }
.po-panel::-webkit-scrollbar-track { background:transparent }
.po-panel::-webkit-scrollbar-thumb { background:var(--border-g); border-radius:2px }

/* ── body lock when overlay open ── */
body.overlay-open { overflow:hidden }

/* ── responsive ── */
@media(max-width:768px) {
  .proj-overlay { padding:.75rem; align-items:flex-end }
  .po-panel { max-height:92vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0 }
  .po-body { padding:1.5rem 1.5rem 2rem }
  .po-title { font-size:1.25rem }
  @keyframes poSlideIn {
    from { opacity:0; transform:translateY(60px) }
    to   { opacity:1; transform:translateY(0) }
  }
}

/* Logo Fix */

/* Logo sizing is controlled via Appearance → Customize → Logo & Branding.
   CSS custom properties are set by greenedge_logo_inline_css() in functions.php
   and consumed by components.css. Do not add hardcoded overrides here. */