/* Styling for the standalone portfolio page. Shared design primitives live in /styles.css. */
.portfolio-container{min-height:70vh;padding-top:8.5rem}
.portfolio-intro{text-align:center;max-width:860px;margin:0 auto 45px}
.portfolio-eyebrow{color:#00c57d;font-size:.75rem;font-weight:700;letter-spacing:.24em;margin-bottom:16px}
.portfolio-intro h1{font-family:'Syne',sans-serif;font-size:clamp(2.6rem,6vw,5.4rem);font-weight:800;letter-spacing:-.06em;line-height:1.06;margin:0 0 18px;color:#f0f7f3}
.portfolio-intro h1 span{color:#00c57d}
.portfolio-intro p{color:#a9b9b0;font-size:1rem;line-height:1.8;max-width:680px;margin:0 auto 20px}
.portfolio-count{display:inline-flex;align-items:center;gap:10px;padding:9px 17px;background:rgba(0,197,125,.07);border:1px solid rgba(0,197,125,.23);border-radius:999px;color:#90e7bd;font-size:.83rem;font-weight:600}
.portfolio-count-pulse{width:7px;height:7px;border-radius:50%;background:#00c57d;box-shadow:0 0 0 5px rgba(0,197,125,.11)}
.portfolio-grid{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:22px}
.portfolio-category-button{appearance:none;display:block;width:100%;color:inherit;font-family:inherit;text-align:left;padding:0;background:#161b19;border:1px solid #24392e;border-radius:20px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.portfolio-category-button:hover,.portfolio-category-button:focus-visible{transform:translateY(-6px);border-color:rgba(0,197,125,.5);box-shadow:0 24px 48px rgba(0,0,0,.28)}
.portfolio-category-button .portfolio-image{height:auto;aspect-ratio:16/9;background:#0f1713}
.portfolio-category-button .portfolio-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.portfolio-category-button:hover .portfolio-image img{transform:scale(1.04)}
.portfolio-category-button .portfolio-content{padding:20px 22px 23px;min-height:122px;position:relative}
.portfolio-category-button .portfolio-content h2{font-family:'Montserrat',sans-serif;font-size:.96rem;color:#e9f5ee;margin:0 20px 9px 0;text-align:left;letter-spacing:.005em}
.portfolio-category-button .portfolio-content p{font-size:.78rem;color:#90a59a;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-right:8px}
.portfolio-card-arrow{position:absolute;right:20px;top:16px;color:#00c57d;font-weight:700;font-size:1.35rem;transition:transform .2s ease}
.portfolio-category-button:hover .portfolio-card-arrow{transform:translate(2px,-2px)}
.portfolio-bottom-cta,.portfolio-detail-cta{text-align:center;margin:4.5rem auto 1rem}.portfolio-bottom-cta h2{font-family:'Syne',sans-serif;color:#e8f5ec;font-size:clamp(1.7rem,4vw,2.8rem);margin:0 0 9px}.portfolio-bottom-cta p{color:#a7b9ad;margin-bottom:20px}.portfolio-detail-cta{margin:38px auto 12px}
#project-detail .back-btn{margin-bottom:2rem}
#project-detail .project-detail-content{margin-bottom:1.5rem}
#project-detail .project-detail-content h1{font-family:'Syne',sans-serif;font-size:clamp(1.6rem,4vw,3rem);margin:0 0 14px;color:#00c57d}
#project-description{color:#b6c5bb;line-height:1.8;max-width:740px;margin:0 auto 2rem}
#project-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));gap:20px;padding:0}
.portfolio-gallery-thumb{cursor:zoom-in;appearance:none;display:block;padding:0;border:1px solid rgba(0,197,125,.16);border-radius:17px;overflow:hidden;background:#111;transition:transform .2s,border-color .2s}
.portfolio-gallery-thumb:hover{transform:translateY(-3px);border-color:rgba(0,197,125,.55)}
.portfolio-gallery-thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
/* Standalone, centered preview; no inherited nav, button or image geometry. */
body.portfolio-lightbox-open{overflow:hidden}
#lightbox[hidden]{display:none!important}
#lightbox.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:76px 24px 32px;background:rgba(3,8,5,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:9000;overflow-y:auto}
#lightbox.lightbox.is-visible{display:flex}
#lightbox .lightbox-close{position:fixed;top:20px;right:20px;left:auto;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:110px;height:42px;padding:0 16px;margin:0;border:1px solid #3c6250;border-radius:999px;background:#18261f;color:#e5f8ec;font-size:.87rem;font-weight:600;text-shadow:none;box-shadow:none;transform:none}
#lightbox .lightbox-close::before{display:none}
#lightbox .lightbox-close:hover{background:#234634;color:#fff;transform:none}
#lightbox #lightbox-img{display:block;max-width:min(1400px,96vw);max-height:min(86dvh,1000px);width:auto;height:auto;object-fit:contain;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 28px 70px rgba(0,0,0,.55);transform:none;cursor:default;background:#101913}
@media(max-width:650px){#lightbox.lightbox{padding:68px 10px 18px}#lightbox #lightbox-img{max-width:98vw;max-height:82dvh}#lightbox .lightbox-close{top:15px;right:15px}}
@media(max-width:768px){.portfolio-container{padding:7rem 1.25rem 2rem}.portfolio-intro{margin-bottom:25px}.portfolio-intro h1{font-size:2.7rem}.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.portfolio-category-button .portfolio-content{padding:12px 13px;min-height:112px}.portfolio-category-button .portfolio-content h2{font-size:.78rem}.portfolio-category-button .portfolio-content p{font-size:.7rem}.portfolio-card-arrow{top:8px;right:10px;font-size:1.1rem}}
@media(max-width:480px){.portfolio-grid{grid-template-columns:1fr}.portfolio-category-button .portfolio-content{min-height:unset}.portfolio-intro h1{font-size:2.4rem}}

/* Match the outlined UpWork action in the homepage navbar (desktop and mobile). */
body.portfolio-page nav .nav-links a.upwork-link {
  border:2px solid #00c57d; border-radius:15px; padding:9px 15px; color:#eaf8ee;
  display:inline-flex;align-items:center;justify-content:center;line-height:1.25;
  transition:border-color .2s, background-color .2s, color .2s;
}
body.portfolio-page nav .nav-links a.upwork-link:hover,
body.portfolio-page nav .nav-links a.upwork-link:focus-visible { background:rgba(0,197,125,.13);color:#00e68a;border-color:#00e68a; }
@media(max-width:480px){body.portfolio-page nav .nav-links a.upwork-link{padding:6px 9px;border-radius:11px;font-size:.77rem}}