/* ═══════════════════════════════════════
   PORTFOLIO — portfolio.css
   Save to: clicklink-website/css/portfolio.css
═══════════════════════════════════════ */
.pf-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#001228;}
.pf-hero-bg{position:absolute;inset:0;background-image:url('../images/portfolio-hero.jpg');background-size:cover;background-position:center;opacity:.2;animation:pfZoom 20s ease-in-out infinite alternate;}
@keyframes pfZoom{from{transform:scale(1.02);}to{transform:scale(1.08);}}
.pf-hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,10,28,.97) 0%,rgba(0,30,60,.82) 60%,rgba(0,10,25,.6) 100%);}
.pf-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:clamp(90px,12vw,120px) clamp(20px,5vw,56px) clamp(60px,8vw,80px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center;}
@media(max-width:900px){.pf-hero-inner{grid-template-columns:1fr;}}
.pf-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:5px 14px;margin-bottom:18px;}
.pf-pill-dot{width:6px;height:6px;border-radius:50%;background:#e00611;}
.pf-pill span{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.7);}
.pf-hero-title{font-size:clamp(30px,5vw,54px);font-weight:800;color:#fff;line-height:1.08;margin-bottom:16px;letter-spacing:-.5px;}
.pf-hero-title span{color:#e00611;}
.pf-hero-desc{font-size:clamp(13px,1.4vw,15px);color:rgba(255,255,255,.7);line-height:1.85;margin-bottom:24px;word-wrap:break-word;}
.pf-hero-cats{display:flex;gap:8px;flex-wrap:wrap;}
.pf-hero-cat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.75);font-size:11px;font-weight:600;padding:6px 14px;border-radius:20px;}
.pf-hero-right{position:relative;}
.pf-hero-img{width:100%;border-radius:16px;object-fit:cover;height:clamp(260px,36vw,420px);display:block;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.pf-hero-stat-block{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);background:rgba(0,20,45,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 24px;display:flex;align-items:center;gap:20px;white-space:nowrap;}
.pf-hero-stat{text-align:center;}
.pf-stat-n{display:block;font-size:20px;font-weight:800;color:#fff;}
.pf-stat-l{display:block;font-size:10px;color:rgba(255,255,255,.45);letter-spacing:1px;text-transform:uppercase;margin-top:1px;}
.pf-hero-stat-sep{width:1px;height:32px;background:rgba(255,255,255,.15);}
@media(max-width:900px){.pf-hero-stat-block{position:relative;bottom:auto;left:auto;transform:none;margin-top:20px;justify-content:center;}}

/* TOOL BANNER */
.pf-tool-banner{background:linear-gradient(135deg,#002d59,#004a94);padding:clamp(16px,2.5vw,22px) 0;}
.pf-tool-banner-inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.pf-tool-banner-text{display:flex;align-items:center;gap:14px;flex:1;}
.pf-tool-banner-icon{font-size:28px;flex-shrink:0;}
.pf-tool-banner-title{font-size:clamp(13px,1.8vw,16px);font-weight:800;color:#fff;}
.pf-tool-banner-sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;}
.pf-tool-launch-btn{background:#e00611;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Sora',sans-serif;white-space:nowrap;transition:background .2s,transform .15s;flex-shrink:0;}
.pf-tool-launch-btn:hover{background:#c0050e;transform:translateY(-1px);}

/* SECTION */
.pf-section{padding:clamp(36px,5vw,56px) 0 clamp(48px,7vw,72px);}
.pf-section-inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,5vw,56px);}

/* FILTER */
.pf-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #dde4ef;}
.pf-filter-pills{display:flex;gap:8px;flex-wrap:wrap;}
.pf-filter-pill{padding:7px 16px;border-radius:20px;border:1.5px solid #dde4ef;background:#fff;font-size:11px;font-weight:600;color:#5a6a82;cursor:pointer;font-family:'Sora',sans-serif;transition:all .18s;white-space:nowrap;}
.pf-filter-pill:hover{border-color:#004a94;color:#004a94;}
.pf-filter-pill.active{background:#002d59;color:#fff;border-color:#002d59;}
.pf-count{font-size:12px;font-weight:600;color:#5a6a82;white-space:nowrap;}
.pf-count span{color:#002d59;font-weight:800;}

/* GRID */
.pf-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:0;
  list-style:none;
  width:100%;
}
.pf-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #dde4ef;
  display:flex;
  flex-direction:column;
  transition:transform .25s,box-shadow .25s;
  position:relative;
  break-inside:avoid;
}
.pf-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,45,89,.12);}
.pf-card-thumb{
  height:200px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:10px;
}
.pf-card-thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
@media(max-width:900px){
  .pf-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:540px){
  .pf-grid{grid-template-columns:1fr;gap:14px;}
  .pf-card-thumb{height:170px;}
}
@media(max-width:1000px){.pf-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.pf-grid{grid-template-columns:1fr;}}

/* PROJECT CARD */
.pf-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #dde4ef;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;position:relative;}
.pf-card:hover{transform:translateY(-5px);box-shadow:0 16px 44px rgba(0,45,89,.13);}
.pf-card.hidden{display:none;}

/* Wide card */
.pf-card-wide{grid-column:span 2;flex-direction:row;}
.pf-card-wide .pf-card-img{width:46%;flex-shrink:0;min-height:240px;}
.pf-card-wide .pf-card-body{flex:1;}
@media(max-width:1000px){.pf-card-wide{grid-column:span 2;flex-direction:column;}.pf-card-wide .pf-card-img{width:100%;min-height:200px;}}
@media(max-width:600px){.pf-card-wide{grid-column:span 1;flex-direction:column;}.pf-card-wide .pf-card-img{width:100%;}}

.pf-card-img{position:relative;min-height:200px;overflow:hidden;flex-shrink:0;}
.pf-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block;}
.pf-card:hover .pf-card-img img{transform:scale(1.05);}
.pf-card-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,15,35,.5) 100%);}
.pf-card-cat{position:absolute;top:12px;left:12px;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:12px;}
.pf-cat-web{background:#e6f1fb;color:#004a94;}
.pf-cat-smm{background:#fff7ed;color:#92400e;}
.pf-cat-seo{background:#f0fdf4;color:#166534;}
.pf-cat-brand{background:#fdf4ff;color:#7e22ce;}
.pf-card-status{position:absolute;top:12px;right:12px;font-size:9px;font-weight:800;padding:4px 10px;border-radius:10px;}
.pf-status-live{background:#f0fdf4;color:#16a34a;}
.pf-card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pf-card-title{font-size:clamp(13px,1.5vw,15px);font-weight:800;color:#002d59;line-height:1.35;margin:0;}
.pf-card-desc{font-size:12px;color:#5a6a82;line-height:1.7;word-wrap:break-word;flex:1;margin:0;}
.pf-card-tags{display:flex;gap:6px;flex-wrap:wrap;}
.pf-card-tags span{background:#f0f4fa;color:#002d59;font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px;border:1px solid #dde4ef;}
.pf-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid #f0f4fa;}
.pf-card-client{font-size:11px;color:#5a6a82;font-weight:600;}
.pf-card-year{font-size:11px;color:#002d59;font-weight:800;}

/* COMING SOON CARD */
.pf-card-soon{border-style:dashed;border-color:#c8d5e3;background:#f8fafd;min-height:240px;}
.pf-card-soon:hover{transform:none;box-shadow:none;}
.pf-card-soon-inner{padding:32px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;flex:1;}
.pf-soon-icon{font-size:36px;}
.pf-soon-badge{background:#fff7ed;color:#d97706;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:12px;}
.pf-soon-title{font-size:14px;font-weight:800;color:#002d59;margin:0;}
.pf-soon-desc{font-size:12px;color:#5a6a82;line-height:1.7;margin:0;}
.pf-soon-btn{background:#002d59;color:#fff;padding:9px 18px;border-radius:8px;font-size:11px;font-weight:700;text-decoration:none;display:inline-block;margin-top:4px;transition:background .2s;}
.pf-soon-btn:hover{background:#e00611;}

/* NO RESULTS */
.pf-no-results{text-align:center;padding:60px 20px;color:#5a6a82;}
.pf-no-results h3{font-size:18px;font-weight:800;color:#002d59;margin-bottom:8px;}

/* ═══ TOOL MODAL ═══ */
.pf-tool-overlay{position:fixed;inset:0;background:rgba(0,10,28,.8);z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:20px 16px;overflow-y:auto;}
.pf-tool-overlay.open{display:flex;}
.pf-tool-modal{background:#fff;border-radius:20px;width:100%;max-width:640px;position:relative;margin:auto;animation:pfModalIn .3s ease;overflow:hidden;}
@keyframes pfModalIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.pf-tool-close{position:absolute;top:14px;right:16px;background:#f0f4fa;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;color:#002d59;display:flex;align-items:center;justify-content:center;z-index:1;transition:background .15s;}
.pf-tool-close:hover{background:#dde4ef;}
.pf-tool-modal-header{text-align:center;padding:32px 32px 20px;}
.pf-tool-modal-icon{font-size:40px;margin-bottom:10px;}
.pf-tool-modal-title{font-size:20px;font-weight:800;color:#002d59;margin-bottom:6px;}
.pf-tool-modal-sub{font-size:12px;color:#5a6a82;line-height:1.7;max-width:460px;margin:0 auto;}
.pf-tool-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 32px 16px;}
@media(max-width:520px){.pf-tool-form-grid{grid-template-columns:1fr;}}
.pf-tf-group{margin-bottom:0;}
.pf-tf-label{display:block;font-size:10px;font-weight:700;color:#5a6a82;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:5px;}
.pf-tf-input{width:100%;background:#f8fafd;border:1.5px solid #dde4ef;border-radius:8px;padding:10px 13px;font-size:12px;font-family:'Sora',sans-serif;color:#002d59;outline:none;transition:border-color .2s;box-sizing:border-box;}
.pf-tf-input::placeholder{color:#b0bcc8;}
.pf-tf-input:focus{border-color:#004a94;}
.pf-tool-selector-label{font-size:11px;font-weight:700;color:#002d59;letter-spacing:1px;text-transform:uppercase;padding:0 32px;margin-bottom:12px;}
.pf-tool-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 32px 16px;}
@media(max-width:520px){.pf-tool-selector{grid-template-columns:1fr;}}
.pf-tool-tile{border:2px solid #dde4ef;border-radius:12px;padding:16px 12px;text-align:center;cursor:pointer;transition:all .2s;background:#fff;}
.pf-tool-tile:hover{border-color:#004a94;background:#f0f7ff;}
.pf-tool-tile.selected{border-color:#e00611;background:#fef2f2;}
.pf-tool-tile-icon{font-size:24px;margin-bottom:8px;}
.pf-tool-tile-name{font-size:12px;font-weight:800;color:#002d59;margin-bottom:4px;}
.pf-tool-tile-desc{font-size:10px;color:#5a6a82;line-height:1.5;}
#socialFieldWrap{padding:0 32px;}
.pf-tool-run-btn{display:block;width:calc(100% - 64px);margin:12px 32px 24px;background:#e00611;color:#fff;border:none;padding:13px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Sora',sans-serif;transition:background .2s;text-align:center;text-decoration:none;}
.pf-tool-run-btn:hover{background:#c0050e;}
.pf-tool-run-btn-outline{display:block;width:100%;background:transparent;color:#002d59;border:1.5px solid #dde4ef;padding:11px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Sora',sans-serif;margin-top:8px;transition:all .2s;}
.pf-tool-run-btn-outline:hover{border-color:#002d59;background:#f0f4fa;}
.pf-tool-step{display:none;}
.pf-tool-step.active{display:block;}
.pf-result-header{text-align:center;padding:24px 32px 14px;border-bottom:1px solid #f0f4fa;}
.pf-result-notice{display:inline-block;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:10px;font-weight:700;padding:5px 14px;border-radius:20px;letter-spacing:.5px;margin-bottom:10px;}
.pf-result-title{font-size:18px;font-weight:800;color:#002d59;margin-bottom:4px;}
.pf-result-sub{font-size:12px;color:#5a6a82;}
#ptResultContent{padding:0 32px;max-height:48vh;overflow-y:auto;}
.pf-res-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;}
@media(max-width:480px){.pf-res-grid{grid-template-columns:1fr;}}
.pf-res-card{background:#f8fafd;border:1px solid #dde4ef;border-radius:12px;padding:14px;}
.pf-res-card-label{font-size:10px;font-weight:700;color:#5a6a82;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.pf-res-bar-wrap{height:5px;background:#e8ecf0;border-radius:4px;margin-bottom:6px;overflow:hidden;}
.pf-res-bar{height:100%;border-radius:4px;transition:width 1s ease;}
.pf-res-val{font-size:18px;font-weight:800;color:#002d59;}
.pf-res-note{font-size:10px;color:#5a6a82;margin-top:2px;}
.pf-res-insights{display:flex;flex-direction:column;gap:8px;margin:12px 0;}
.pf-res-insight{display:flex;gap:10px;align-items:flex-start;background:#f8fafd;border-left:3px solid #e00611;border-radius:0 10px 10px 0;padding:10px 12px;}
.pf-res-insight-icon{font-size:15px;flex-shrink:0;}
.pf-res-insight-title{font-size:12px;font-weight:800;color:#002d59;margin-bottom:2px;}
.pf-res-insight-text{font-size:11px;color:#5a6a82;line-height:1.6;word-wrap:break-word;}
.pf-res-kw-list{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}
.pf-res-kw{background:#e6f1fb;color:#004a94;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;}
.pf-revamp-box{background:linear-gradient(135deg,#001a38,#002d59);border-radius:12px;padding:16px 18px;margin:12px 0;color:#fff;}
.pf-revamp-box-title{font-size:11px;font-weight:800;color:#e00611;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.pf-revamp-row{display:flex;gap:8px;margin-bottom:6px;align-items:flex-start;}
.pf-revamp-dot{width:6px;height:6px;border-radius:50%;background:#e00611;flex-shrink:0;margin-top:5px;}
.pf-revamp-text{font-size:12px;color:rgba(255,255,255,.8);line-height:1.6;}
.pf-result-cta{padding:16px 32px 24px;border-top:1px solid #f0f4fa;text-align:center;}
.pf-result-cta h3{font-size:14px;font-weight:800;color:#002d59;margin-bottom:5px;}
.pf-result-cta p{font-size:12px;color:#5a6a82;line-height:1.65;margin-bottom:12px;}
.pf-result-cta-btns{display:flex;flex-direction:column;gap:0;}
.pf-result-cta-btns .pf-tool-run-btn{margin:0;width:100%;}
@media(max-width:480px){.pf-tool-form-grid,.pf-tool-selector,.pf-tool-selector-label,.pf-tool-modal-header,#ptResultContent,.pf-result-header,.pf-result-cta,#socialFieldWrap{padding-left:16px;padding-right:16px;}.pf-tool-run-btn{margin-left:16px;margin-right:16px;width:calc(100% - 32px);}}

/* ── CARD INITIAL PLACEHOLDER (shown when no project image) ── */
.pf-card-initial {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-60%);
  width:62px; height:62px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#fff;
  letter-spacing:-1px;
  pointer-events:none;
  z-index:1;
  text-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* ── PORTFOLIO GRID ITEMS ── */
.pf-item{
  position:relative;cursor:pointer;
  border-radius:14px;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,45,89,.08);
  transition:transform .25s,box-shadow .25s;
  background:#fff;
  border:1px solid var(--border);
}
.pf-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,45,89,.15);}
.pf-item-thumb{
  position:relative;height:200px;
  display:flex;align-items:flex-end;
  justify-content:flex-start;padding:12px;
  overflow:hidden;
}
.pf-item-thumb::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.12);
  transition:background .25s;
}
.pf-item:hover .pf-item-thumb::after{background:rgba(0,0,0,.2);}
.pf-item-cat-badge{
  position:relative;z-index:2;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:6px;
  border:1px solid rgba(255,255,255,.25);
  text-transform:uppercase;letter-spacing:.8px;
}
.pf-coming-badge{
  position:absolute;top:12px;right:12px;z-index:3;
  background:rgba(255,255,255,.95);color:var(--navy);
  font-size:9px;font-weight:800;letter-spacing:.5px;
  padding:4px 10px;border-radius:20px;
  animation:comingPulse 2s ease-in-out infinite;
}
@keyframes comingPulse{0%,100%{opacity:1;}50%{opacity:.7;}}
.pf-item.coming-soon .pf-item-thumb{filter:brightness(.85);}
.pf-item-info{
  padding:14px 16px 18px;
}
.pf-item-title{
  font-size:14px;font-weight:700;color:var(--navy);
  margin-bottom:4px;line-height:1.3;
}
.pf-item-meta{
  font-size:11px;color:var(--muted);
}
@media(max-width:600px){
  .pf-item-thumb{height:165px;}
  .pf-item-title{font-size:13px;}
}

.pf-card-thumb { height:200px; overflow:hidden; background:var(--bg); border-radius:12px 12px 0 0; }
.pf-card-info { padding:12px 14px 16px; background:#fff; border-radius:0 0 12px 12px; border:1px solid var(--border); border-top:none; }

/* ── FORCE GRID — overrides any conflicting rules ─────── */
div#pfGrid,
div.pf-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  padding: 0 !important;
}
div#pfGrid > div.pf-card,
div.pf-grid > div.pf-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #dde4ef !important;
  width: 100% !important;
  min-width: 0 !important;
}
div.pf-card-thumb,
div.pf-item-thumb {
  height: 200px !important;
  min-height: 200px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 10px !important;
  flex-shrink: 0 !important;
}
div.pf-card-info,
div.pf-item-info {
  padding: 12px 14px !important;
  background: #fff !important;
  flex: 1 !important;
}
@media (max-width: 900px) {
  div#pfGrid, div.pf-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 540px) {
  div#pfGrid, div.pf-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  div.pf-card-thumb, div.pf-item-thumb {
    height: 170px !important;
    min-height: 170px !important;
  }
}