/*
 * Shared CSS for every portfolio detail page (portfolios/*.php), loaded only
 * there rather than site-wide. See load_portfolio_details_assets() in functions.php.
 */
.pfd-page{
  --c-ink:#121212;
  --c-title2:#1e1e1e;
  --c-body:#797979;
  --c-nav:#5e5e5e;
  --c-label:#949494;
  --c-orange:#ff5b2e;
  --c-card:#f8f8f8;
  --c-border-warm:#f2ece9;
  --c-border-light:#ededed;
  --c-border-lighter:#f2f2f2;
  --f-head:'Roboto',sans-serif;
  --f-body:'DM Sans',sans-serif;
  --pfd-sticky-top:104px;
  color:var(--c-ink);
  font-family:var(--f-body);
  background:#fff;
}
.pfd-page *{box-sizing:border-box;}
.pfd-page a{text-decoration:none;}
.pfd-page .container{max-width:1320px;width:100%;margin-bottom: 50px;}
.pfd-page [id^="pfd-"]{scroll-margin-top:calc(var(--pfd-sticky-top) + 16px);}
.pfd-hero-head .p-left-main {
    display: flex;
    align-items: end;
    gap: 50px;
}
.pfd-hero-head .p-left-main img {width: 100%; max-width: 200px;}

/* -------- striped decorative background -------- */
.pfd-striped{
    background-image: url(/wp-content/themes/ninja/assets/images/common/portfolio-ban-img.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

/* -------- breadcrumbs -------- */
.pfd-crumbs{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 0 0;margin-bottom:20px;
  font-family:var(--f-body);font-weight:500;font-size:18px;
}
.pfd-crumb-link{
  display:inline-flex;align-items:center;gap:8px;
  background-image:linear-gradient(105deg,#ff5b2e 7%,#f5e12d 127%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.pfd-crumb-link img{width:18px;height:18px;}
.pfd-crumb-next img{transform:scaleY(-1);}

/* -------- hero -------- */
.pfd-hero{padding:159px 0 64px;position:relative;z-index:1;}
.pfd-hero-head{position:relative;margin-bottom:64px;}
.pfd-hero-title{text-align: left;
  font-family:var(--f-head);font-weight:700;color:var(--c-ink);
  font-size:clamp(30px,4.4vw,58px);line-height:1.2;margin:0 0 20px;max-width:1080px;
}
.pfd-hero-tags{display:flex;flex-wrap:wrap;gap:18px;}
.pfd-hero-tag{
  background:#fff;border-radius:30px;padding:10px 20px;
  font-family:var(--f-body);font-weight:600;font-size:16px;color:#434343;
  box-shadow:0 1px 2px rgba(0,0,0,.04);     height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pfd-hero-media{position:relative;border-radius:20px;overflow:hidden;}
.pfd-hero-media img{width:100%;display:block;border-radius:20px;}

/* -------- layout: main + sticky aside -------- */
.pfd-layout{display:flex;gap:64px;padding-bottom:100px;}
.pfd-main{flex:1;display:flex;flex-direction:column;gap:90px;min-width:0;}
.pfd-aside{width:280px;flex-shrink:0;}
.pfd-aside-inner{
  background:var(--c-card);border-radius:20px;padding:28px 20px;
  position:sticky;top:var(--pfd-sticky-top);
}
.pfd-aside-inner ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;}
.pfd-aside-inner li a{
  font-family:var(--f-head);font-weight:400;font-size:20px;color:var(--c-nav);
  position:relative;padding-left:20px;display:block;
}
.pfd-aside-inner li a::before{
  content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--c-nav);
}
.pfd-aside-inner li a.is-active{color:var(--c-orange);font-weight:600;}
.pfd-aside-inner li a.is-active::before{background:var(--c-orange);}

/* -------- section heading -------- */
.pfd-section h2{
  font-family:var(--f-head);font-weight:700;color:var(--c-ink);
  font-size:clamp(26px,3.2vw,52px);line-height:1.2;margin:0 0 40px;
}

/* -------- overview -------- */
.pfd-intro-text{display:flex;flex-direction:column;gap:24px;margin-bottom:40px;}
.pfd-intro-text p{font-family:var(--f-body);font-weight:500;font-size:18px;line-height:26px;color:var(--c-body);margin:0;}
.pfd-tagline{
  font-family:var(--f-head);font-weight:600;color:var(--c-ink);
      font-size: 42px;
    line-height: 54px;margin:0 0 40px;
}
.pfd-stat-box{border:1px solid var(--c-border-warm);border-radius:16px;display:flex;flex-wrap:wrap;margin-bottom:90px;}
.pfd-stat-box .pfd-stat{
  flex:1 1 0;min-width:150px;padding:26px 22px;display:flex;flex-direction:column;gap:8px;
  border-left:1px solid var(--c-border-warm);
}
.pfd-stat-box .pfd-stat:first-child{border-left:0;}
.pfd-stat-label{font-family:var(--f-head);font-weight:400;font-size:16px;color:var(--c-label);}
.pfd-stat-value{font-family:var(--f-head);font-weight:500;font-size:18px;color:var(--c-ink);}
.pfd-media-block{border-radius:20px;overflow:hidden;}
.pfd-media-block img{width:100%;display:block;}

/* -------- results list -------- */
.pfd-results-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.pfd-results-list li{
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-body);font-weight:500;font-size:18px;color:var(--c-ink);
}
.pfd-results-list li::before{
  content:'';flex-shrink:0;width:10px;height:10px;border-radius:50%;background:var(--c-orange);
}

/* -------- pill CTA buttons -------- */
.pfd-btn{
  display:inline-flex;align-items:center;gap:12px;background:var(--c-orange);color:#fff;
  font-family:var(--f-body);font-weight:700;font-size:16px;padding:13px 8px 13px 26px;
  border-radius:30px;box-shadow:0 14px 54px rgba(255,91,46,.2);border:none;white-space:nowrap;
  margin-top:36px;
}
.pfd-btn-icon{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pfd-btn-icon img{width:15px;height:15px;transform:rotate(90deg);filter:brightness(0) invert(1);}
.pfd-btn-cta{font-size:18px;padding:15px 8px 15px 30px;margin-top:0;}
.pfd-btn-sm{font-size:14px;padding:0 4px 0 20px;height:44px;margin-top:0;}

/* -------- CTA section -------- */
.pfd-cta{padding:100px 0;text-align:center;position:relative;z-index:1;}
.pfd-cta h2{font-family:var(--f-head);font-weight:600;font-size:clamp(30px,5vw,64px);line-height:1.2;color:var(--c-ink);margin:0 0 20px;}
.pfd-cta p{font-family:var(--f-body);font-weight:500;font-size:20px;color:var(--c-body);max-width:900px;margin:0 auto 32px;}

/* -------- explore more projects -------- */
.pfd-explore{padding:80px 0;}
.pfd-explore-head{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:64px;flex-wrap:wrap;}
.pfd-explore-head h2{font-family:var(--f-head);font-weight:700;font-size:clamp(26px,3.2vw,52px);color:var(--c-ink);margin:0 0 16px; line-height: normal;}
.pfd-explore-head p{font-family:var(--f-head);font-weight:400;font-size:20px;color:var(--c-body);margin:0;}
.pfd-explore-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.pfd-explore-media{border-radius:20px;overflow:hidden;aspect-ratio:680/417;background:var(--c-card);}
.pfd-explore-media img{width:100%;height:100%;object-fit:cover;display:block;}
.pfd-explore-card p{
  font-family:var(--f-head);font-weight:600;font-size:26px;line-height:1.4;letter-spacing:-0.65px;
  color:#000;margin:24px 0 14px;
}
.pfd-explore-tags{display:flex;gap:14px;}
.pfd-explore-tag{background:var(--c-border-lighter);border-radius:100px;padding:8px 14px;font-family:var(--f-body);font-size:14px;letter-spacing:-0.35px;color:#252525;}

/* -------- responsive -------- */
@media (max-width:1199.98px){
  .pfd-aside{display:none;}
}
@media (max-width:991.98px){
  .pfd-hero-badge{position:static;width:160px;margin-bottom:16px;}
  .pfd-hero-head{display:flex;flex-direction:column-reverse;}
  .pfd-explore-grid{grid-template-columns:1fr;}
  .pfd-hero-head .p-left-main {flex-wrap: wrap;}
}
@media (max-width:767.98px){
  .pfd-crumbs{font-size:15px;}
  .pfd-stat-box .pfd-stat{flex:1 1 50%;border-left:0;border-top:1px solid var(--c-border-warm);}
  .pfd-stat-box .pfd-stat:nth-child(1),.pfd-stat-box .pfd-stat:nth-child(2){border-top:0;}
  .pfd-cta{padding:64px 0;}
  .pfd-explore{padding:56px 0;}
}
@media (max-width:575.98px){
  .pfd-stat-box .pfd-stat{flex:1 1 100%;border-top:1px solid var(--c-border-warm);border-left:0 !important;}
  .pfd-stat-box .pfd-stat:first-child{border-top:0;}
  .pfd-btn{width:100%;justify-content:center;}
}
.pfd-showcase-media {
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ────────────────────────────────────────────────────────────────
   CSS for /portfolios/ (archive-portfolios.php) — moved out of its
   inline <style> block. .small-text/.small-text:before were left
   inline there since that's a page-specific override of the shared
   custom.css definition, and .header_logo's base rule stays in
   custom.css (shared with tpl-home.php/archive-case-studies.php).
   ──────────────────────────────────────────────────────────────── */
.pf-hero-wrap{position:relative;background-image:url(../images/common/portfolio-background.png);background-repeat:no-repeat;background-size:100% auto;background-position:top center;}
.pf-banner-section{background-image:none;}
.pf-header-logo{padding-top:clamp(80px,15vw,159px);}
.pf-tabs-wrap{margin-top:clamp(24px,3vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,12px);}
.pf-tab-btn{white-space: nowrap;
    border: 1px solid #F2F2F2;
    background: #fff;
    color: var(--black);
    font-size: clamp(13px,1.3vw,16px);
    font-weight: 500;
    padding: clamp(10px,1.4vw,13px) clamp(14px,2vw,20px);
    border-radius: clamp(20px,4vw,30px);
    cursor: pointer;
    box-shadow: 0px 6px 16px 0px #00000005;
    transition: background .3s ease, color .3s ease, border-color .3s ease;}
.pf-tab-btn:hover{border-color:rgb(255, 91, 46);}
.pf-tab-btn.active{background:rgb(255, 91, 46);border-color:rgb(255, 91, 46);color:#fff;}

.pf-cta-section{position:relative;background-image:url(../images/common/portfolio-background.png);background-repeat:no-repeat;background-size:cover;background-position:center;padding:clamp(60px,9vw,150px) 0;}
.pf-cta-inner{max-width:900px;margin:0 auto;text-align:center;}
.pf-cta-title{margin-bottom:clamp(12px,2vw,20px);}
.pf-cta-sub{color:var(--grey);font-size:clamp(14px,1.2vw,18px);line-height:150%;margin-bottom:clamp(24px,4vw,36px);}

.pf-grid-section{position:relative;padding:clamp(24px,4vw,36px) 0 clamp(60px,12vw,150px) 0;}
.pf-grid-section .container{position:relative;z-index:1;}
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);row-gap:clamp(24px,5vw,64px);column-gap:clamp(16px,2.5vw,24px);}
.pf-card{display:block;text-decoration:none;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease;}
.pf-card--filtered-out{display:none;}
.pf-card-image{border-radius:clamp(10px,1.6vw,16px);width:100%;aspect-ratio:16/10;overflow:hidden;background:#fff;}
.pf-card-image img{width:100%;height:100%;object-fit:cover;display:block;}
.pf-card-body{padding:clamp(18px,3vw,28px) 0 0 0;}
.pf-card-desc{color: var(--black);
    font-size: clamp(18px,2.4vw,26px);
    font-weight: 600;
    line-height: 140%;
    margin-bottom: clamp(8px,1.4vw,14px);}
.pf-card-tags{display:flex;flex-wrap:wrap;gap:clamp(6px,1vw,8px);}
.pf-tag{font-size: clamp(12px,1.1vw,14px);
    font-weight: 400;
    color: #252525;
    background: #F2F2F2;
    border-radius: clamp(14px,2.4vw,20px);
    padding: clamp(6px,1vw,9px) clamp(10px,1.6vw,15px);}
.pf-empty-message{text-align:center;color:var(--grey);font-size:clamp(14px,1.3vw,16px);padding:clamp(24px,4vw,40px) 0;}
.cs-cta-section{position:relative;background-image:url(../images/common/portfolio-background.png);background-repeat:no-repeat;background-size:cover;background-position:center;padding:clamp(60px,9vw,150px) 0;}
.cs-cta-inner{max-width:1096px;margin:0 auto;text-align:center;}
.cs-cta-title{max-width:900px;font-size:clamp(32px,6vw,72px);margin:0 auto clamp(12px,2vw,20px);}
.cs-cta-sub{color: #797979;
    font-size: clamp(14px, 1.2vw, 20px);
    line-height: 120%;
    margin-bottom: clamp(32px,5vw,60px);
    font-weight: 500;}
@media (max-width: 991px){
    .pf-grid{grid-template-columns:1fr;}
}