/* =========================================================
   Shahrukh Portfolio Slider — scoped styles (shk- prefix)
   All selectors live under .shk-portfolio so nothing leaks
   into other sections. Colours come from CSS variables that
   Elementor's Style controls override per-instance.
   ========================================================= */
.shk-portfolio{
  --shk-ink:#0e1430;
  --shk-body:#5b6478;
  --shk-brand:#2547d0;
  --shk-line:#e6e9f2;
  --shk-card:#ffffff;
  --shk-bg:#f7f8fc;
  --shk-cols:3;
  --shk-cols-tablet:2;
  --shk-cols-mobile:1;
  --shk-gap:24px;
  --shk-speed:550ms;
  --shk-cur:var(--shk-cols);
  font-family:inherit;
  background:var(--shk-bg);
  box-sizing:border-box;
}
.shk-portfolio *,
.shk-portfolio *::before,
.shk-portfolio *::after{box-sizing:border-box;}
.shk-pf-wrap{max-width:1180px;margin:0 auto;}

/* Heading */
.shk-pf-head{text-align:center;max-width:680px;margin:0 auto 36px;}
.shk-pf-eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--shk-brand);
  background:color-mix(in srgb,var(--shk-brand) 10%,#fff);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.shk-pf-title{font-size:clamp(28px,4vw,42px);line-height:1.1;color:var(--shk-ink);margin:0 0 14px;font-weight:800;letter-spacing:-.02em;}
.shk-pf-sub{font-size:16px;line-height:1.6;color:var(--shk-body);margin:0;}

/* Filters */
.shk-pf-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px;}
.shk-pf-pill{
  border:1px solid var(--shk-line);background:#fff;color:var(--shk-body);
  font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;cursor:pointer;
  transition:all .2s ease;font-family:inherit;line-height:1.2;
}
.shk-pf-pill:hover{border-color:var(--shk-brand);color:var(--shk-brand);}
.shk-pf-pill.is-active{background:var(--shk-brand);border-color:var(--shk-brand);color:#fff;}

/* Carousel */
.shk-pf-carousel{display:flex;align-items:center;gap:12px;}
.shk-pf-viewport{overflow:hidden;flex:1;}
.shk-pf-track{display:flex;gap:var(--shk-gap);transition:transform var(--shk-speed) cubic-bezier(.22,.61,.36,1);will-change:transform;}

/* Arrows */
.shk-pf-arrow{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--shk-line);
  background:#fff;color:var(--shk-ink);font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;
}
.shk-pf-arrow:hover{background:var(--shk-brand);border-color:var(--shk-brand);color:#fff;}
.shk-pf-arrow:disabled{opacity:.35;cursor:default;background:#fff;color:var(--shk-ink);border-color:var(--shk-line);}

/* Card = mini browser window */
.shk-card{
  flex:0 0 calc((100% - (var(--shk-gap) * (var(--shk-cur) - 1))) / var(--shk-cur));
  background:var(--shk-card);border:1px solid var(--shk-line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 2px 4px rgba(14,20,48,.04);
  transition:transform .25s ease,box-shadow .25s ease;
}
.shk-card.is-hidden{display:none;}
.shk-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(14,20,48,.12);}
.shk-card-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#f1f3f9;border-bottom:1px solid var(--shk-line);}
.shk-dots{display:flex;gap:6px;}
.shk-dots span{width:9px;height:9px;border-radius:50%;background:#cdd3e3;}
.shk-dots span:nth-child(1){background:#ff5f57;}
.shk-dots span:nth-child(2){background:#febc2e;}
.shk-dots span:nth-child(3){background:#28c840;}
.shk-url{flex:1;background:#fff;border:1px solid var(--shk-line);border-radius:6px;font-size:12px;color:var(--shk-body);padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shk-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dfe3ef;}
.shk-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.shk-card:hover .shk-thumb img{transform:scale(1.05);}
.shk-thumb.placeholder{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.25);text-align:center;padding:10px;}
.shk-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.shk-card-cat{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--shk-brand);}
.shk-card-name{font-size:17px;font-weight:700;color:var(--shk-ink);margin:0;line-height:1.3;}
.shk-card-link{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--shk-brand);text-decoration:none;align-self:flex-start;}
.shk-card-link:hover{gap:10px;}

/* Responsive columns driven by the CSS variables */
@media(max-width:1024px){.shk-portfolio{--shk-cur:var(--shk-cols-tablet);}}
@media(max-width:640px){.shk-portfolio{--shk-cur:var(--shk-cols-mobile);}}
@media(prefers-reduced-motion:reduce){.shk-pf-track{transition:none;}}