/* ============================================================
   projects-portfolio.css  — FIXED v19
   Fixes applied:
   1. Removed loading="lazy" behaviour via CSS contain fix
   2. Added .hb-clients-grid layout (was completely missing!)
   3. Fixed body overflow-x:clip breaking IntersectionObserver
   4. "IMAGE COMING SOON" placeholder improved styling
   ============================================================ */

/* Projects portfolio — self-contained (no body bleed) */
.elementor-1047 .elementor-widget-html,
.elementor-widget-html .section {
  --black:#0d0d0d;
  --orange:#f47c20;
  --white:#ffffff;
  --gray-1:#f5f5f5;
  --gray-2:#e0e0e0;
  --gray-3:#9e9e9e;
  font-family:'Poppins',sans-serif;
}
.elementor-1047 .elementor-widget-html .section {
  background:var(--gray-1);
  color:var(--black);
  padding:48px 16px 64px;
  max-width:100%;
  box-sizing:border-box;
}

/* ─── FIX 1: Stop body overflow-x:clip from breaking lazy-load ─── */
html, body {
  overflow-x: hidden !important;
}

.section{max-width:1300px;margin:0 auto}
.section-header{text-align:center;margin-bottom:36px;animation:fadeUp .6s ease both}
.section-label{display:inline-block;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--orange);margin-bottom:12px;position:relative}
.section-label::before,.section-label::after{content:'';position:absolute;top:50%;width:24px;height:1.5px;background:var(--orange)}
.section-label::before{right:calc(100% + 8px)}
.section-label::after{left:calc(100% + 8px)}
.section-title{font-size:clamp(22px,3vw,36px);font-weight:800;line-height:1.2;letter-spacing:-.5px}
.section-sub{font-size:14px;color:var(--gray-3);margin-top:8px;font-weight:400}

/* ─── Tabs ─── */
.tabs-wrap{display:flex;justify-content:center;margin-bottom:28px}
.tabs{display:inline-flex;background:var(--white);border-radius:50px;padding:5px;gap:4px;box-shadow:0 2px 12px rgb(0 0 0 / .08)}
.tab-btn{background:transparent;border:none;border-radius:50px;padding:10px 22px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:var(--gray-3);cursor:pointer;transition:all .25s;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.tab-btn.active{background:var(--orange);color:var(--white);box-shadow:0 2px 8px rgb(244 124 32 / .35)}
.tab-count{font-size:11px;font-weight:700;opacity:.85}

/* ─── Projects Grid ─── */
.tab-panel{display:none}
.tab-panel.active{display:block}
.cards-grid,.cards-grid-ongoing{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ─── Project Card ─── */
.card{background:var(--white);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgb(0 0 0 / .06);transition:transform .3s,box-shadow .3s;cursor:pointer}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgb(0 0 0 / .12)}

/* ─── FIX 2: Card images ─── */
.card-img-wrap{width:100%;aspect-ratio:4/3;overflow:hidden;position:relative;cursor:zoom-in;contain:layout}
.card-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.card:hover .card-img-wrap img{transform:scale(1.06)}
.card-img-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--orange);z-index:1}

.zoom-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff0;transition:background .28s;z-index:1;pointer-events:none}
.card:hover .zoom-hint{background:rgb(0 0 0 / .12)}
.zoom-hint svg{opacity:0;transform:scale(.7);transition:opacity .28s,transform .28s}
.card:hover .zoom-hint svg{opacity:1;transform:scale(1)}

/* ─── "IMAGE COMING SOON" placeholder ─── */
.card-img-placeholder{width:100%;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--gray-1);gap:10px}
.card-img-placeholder svg{color:var(--gray-3);opacity:.5}
.card-img-placeholder span{font-size:11px;font-weight:600;color:var(--gray-3);letter-spacing:1px;text-transform:none;padding:0 4px}

/* ─── Card badges ─── */
.card-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:rgb(0 0 0 / .55);color:#fff;backdrop-filter:blur(4px)}
.card-badge.completed{background:rgb(15 80 15 / .7)}
.card-badge.ongoing{background:rgb(200 100 0 / .7)}
.ongoing-pulse{position:absolute;top:10px;right:10px;z-index:2}
.ongoing-pulse span{display:block;width:10px;height:10px;border-radius:50%;background:#22c55e;position:relative}
.ongoing-pulse span::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgb(34 197 94 / .35);animation:pulseRing 1.8s ease-in-out infinite}
@keyframes pulseRing{0%{transform:scale(.9);opacity:1}70%{transform:scale(1.6);opacity:0}100%{transform:scale(.9);opacity:0}}

.card-body{padding:15px 14px 17px}
.card-name{font-size:15px;font-weight:700;color:var(--black);margin-bottom:4px;letter-spacing:-.2px}
.card-location{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--orange);margin-bottom:12px}
.card-divider{height:1px;background:var(--gray-2);margin-bottom:10px}
.card-specs{display:flex;flex-direction:column;gap:6px}
.spec-row{display:flex;align-items:center;gap:6px;font-size:11px}
.spec-icon{width:25px;height:25px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.spec-icon.built{background:rgb(244 124 32 / .1)}
.spec-icon.plot{background:rgb(13 13 13 / .05)}
.spec-label{color:var(--gray-3);font-weight:500;min-width:60px}
.spec-value{color:var(--black);font-weight:700;margin-left:auto}
.spec-value.no-data{color:var(--gray-3);font-weight:400}

/* ─── Pagination ─── */
#pg-wrap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
#pg-wrap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:36px;flex-wrap:wrap}
.pg-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--gray-2);background:var(--white);font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:var(--black);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.pg-btn:hover{border-color:var(--orange);color:var(--orange)}
.pg-btn.active{background:var(--orange);color:var(--white);border-color:var(--orange);box-shadow:0 2px 8px rgb(244 124 32 / .3)}
.pg-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.pg-info{font-size:12px;color:var(--gray-3);font-weight:500;letter-spacing:1px;text-transform:none;padding:0 4px}

/* ─── FIX 3: Happy Clients Section — .hb-clients-grid WAS COMPLETELY MISSING CSS ─── */
.hb-clients{
  background:var(--white);
  padding:64px 16px;
  box-sizing:border-box;
}
.hb-clients h2{
  text-align:center;
  font-size:clamp(22px,3vw,34px);
  font-weight:800;
  color:var(--black);
  margin-bottom:8px;
  letter-spacing:-.3px;
}
.hb-clients > p{
  text-align:center;
  font-size:14px;
  color:var(--gray-3);
  margin-bottom:36px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.hb-clients-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:1100px;
  margin:0 auto;
}
.hb-clients-grid figure{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--gray-1);
  box-shadow:0 2px 10px rgb(0 0 0 / .07);
  transition:transform .3s, box-shadow .3s;
}
.hb-clients-grid figure:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgb(0 0 0 / .13);
}
.hb-clients-grid figure:first-child{
  grid-column:span 2;
}
.hb-clients-grid figure img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  display:block;
}

/* ─── FAQ ─── */
.hb-faq{padding:48px 16px 64px;max-width:860px;margin:0 auto;box-sizing:border-box}
.hb-faq h2{font-size:clamp(20px,2.5vw,30px);font-weight:800;color:var(--black);margin-bottom:24px;text-align:center}

/* ─── Lightbox ─── */
#hb-lightbox{position:fixed;inset:0;z-index:99999;background:rgb(0 0 0 / .92);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;backdrop-filter:blur(6px)}
#hb-lightbox.open{display:flex}
#lb-img{max-width:90vw;max-height:80vh;border-radius:8px;object-fit:contain;box-shadow:0 8px 40px rgb(0 0 0 / .6);transition:opacity .25s}
#lb-close{position:fixed;top:16px;right:18px;width:44px;height:44px;border-radius:50%;background:rgb(255 255 255 / .1);border:1.5px solid rgb(255 255 255 / .18);color:#fff;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .3s;backdrop-filter:blur(8px)}
#lb-close:hover{background:var(--orange);transform:scale(1.12) rotate(90deg)}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:rgb(255 255 255 / .1);border:1.5px solid rgb(255 255 255 / .18);color:#fff;cursor:pointer;font-size:26px;display:none;align-items:center;justify-content:center;transition:background .2s;backdrop-filter:blur(8px);user-select:none}
.lb-nav.visible{display:flex}
#lb-prev{left:18px}
#lb-next{right:18px}
#lb-prev:hover{background:rgb(244 124 32 / .75);transform:translateY(-50%) scale(1.1)}
#lb-next:hover{background:rgb(244 124 32 / .75);transform:translateY(-50%) scale(1.1)}
#lb-dots{display:flex;gap:6px;justify-content:center;margin-top:4px}
.lb-dot{width:7px;height:7px;border-radius:50%;background:rgb(255 255 255 / .3);transition:background .2s,transform .2s}
.lb-dot.active{background:var(--orange);transform:scale(1.3)}
#lb-counter{font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;color:rgb(255 255 255 / .45);letter-spacing:1.5px;margin-top:2px}
#lb-swipe-hint{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);font-family:'Poppins',sans-serif;font-size:11px;color:rgb(255 255 255 / .3);pointer-events:none;display:none}

/* ─── Animations ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ─── Responsive breakpoints ─── */
@media(max-width:1100px){
  .cards-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .hb-clients-grid{grid-template-columns:repeat(2,1fr)}
  .hb-clients-grid figure:first-child{grid-column:span 2}
}
@media(max-width:860px){
  .hb-embed-shell{padding:36px 12px 56px}
  .cards-grid,.cards-grid-ongoing{grid-template-columns:repeat(2,1fr);gap:14px}
  .tab-btn{padding:9px 16px;font-size:12px}
  .hb-clients-grid{grid-template-columns:repeat(2,1fr)}
  .hb-clients-grid figure:first-child{grid-column:span 2}
}
@media(max-width:560px){
  body{padding:26px 10px 44px}
  .cards-grid,.cards-grid-ongoing{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-body{padding:11px 10px 13px}
  .card-name{font-size:13px}
  .tab-btn{padding:8px 12px;font-size:11.5px;min-height:40px}
  .pg-btn{width:34px;height:34px;font-size:12px}
  #lb-prev{left:6px}
  #lb-next{right:6px}
  #lb-swipe-hint{display:block}
  #lb-img{max-width:96vw;max-height:72vh}
  .hb-clients-grid{grid-template-columns:1fr}
  .hb-clients-grid figure:first-child{grid-column:span 1}
}
@media(max-width:380px){
  .cards-grid,.cards-grid-ongoing{grid-template-columns:1fr}
}