/* =========================================================
   Clickin Labs — Portfolio
   File: public_html/pages/portfolio/style.css
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-width: 0;
    overflow-x: hidden;
}


/* =========================================================
   ROOT — EXACT PORTFOLIO THEME
   Dark outer: #000000
   Light outer: #FFFFFF
   No decorative page background
   ========================================================= */

#clickin-portfolio-page {
    --portfolio-bg: #000000;
    --portfolio-surface: #08090A;
    --portfolio-heading: #D0D6E0;
    --portfolio-body: #8A8A93;
    --portfolio-secondary: #B8BCC4;
    --portfolio-border: #2D2D33;
    --portfolio-accent: #7C5CFF;

    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;

    background: var(--portfolio-bg);
    color: var(--portfolio-heading);
}

html[data-theme="light"] #clickin-portfolio-page {
    --portfolio-bg: #FFFFFF;
    --portfolio-surface: #FFFFFF;
    --portfolio-heading: #111827;
    --portfolio-body: #4B5563;
    --portfolio-secondary: #6B7280;
    --portfolio-border: #E5E7EB;
    --portfolio-accent: #7C5CFF;
}


/* =========================================================
   RESET
   ========================================================= */

#clickin-portfolio-page *,
#clickin-portfolio-page *::before,
#clickin-portfolio-page *::after {
    box-sizing: border-box;
}

#clickin-portfolio-page h1,
#clickin-portfolio-page h2,
#clickin-portfolio-page h3,
#clickin-portfolio-page p {
    margin-top: 0;
}

#clickin-portfolio-page img {
    display: block;
    max-width: 100%;
}

#clickin-portfolio-page a {
    text-decoration: none;
}

#clickin-portfolio-page svg {
    width: 1em;
    height: 1em;
    max-width: none;
    max-height: none;
    display: inline-block;
    flex: 0 0 auto;
}


/* =========================================================
   HERO
   Same 1180px container as the lower section
   Desktop/tablet: 22px side padding
   Mobile: 15px side padding
   ========================================================= */

#clickin-portfolio-page .portfolio-hero {
    width: 100%;
    margin: 0;
    padding:
        clamp(92px, 10vw, 126px)
        0
        clamp(48px, 6vw, 72px);

    background: var(--portfolio-bg);
}

#clickin-portfolio-page .portfolio-hero-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 22px;
    padding-right: 22px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
}

#clickin-portfolio-page .portfolio-hero-content {
    width: 100%;
    max-width: 620px;
    min-width: 0;
}

#clickin-portfolio-page .portfolio-hero-eyebrow {
    display: block;
    margin: 0 0 16px;

    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    color: var(--portfolio-secondary);
}

#clickin-portfolio-page .portfolio-hero-title {
    margin: 0;

    font-size: clamp(48px, 6vw, 78px);
    line-height: 0.99;
    font-weight: 700;
    letter-spacing: -0.06em;

    /* Single colour — no gradient/accent split */
    color: var(--portfolio-heading);
}

#clickin-portfolio-page .portfolio-hero-description {
    max-width: 570px;
    margin: 24px 0 0;

    font-size: 16px;
    line-height: 1.72;
    letter-spacing: -0.01em;

    color: var(--portfolio-body);
}

#clickin-portfolio-page .portfolio-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 28px;
}

#clickin-portfolio-page .portfolio-hero-button {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 17px;

    border: 1px solid var(--portfolio-border);
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    color: var(--portfolio-heading);
    background: var(--portfolio-surface);

    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

html[data-theme="light"] #clickin-portfolio-page .portfolio-hero-button {
    background: #FFFFFF;
}

#clickin-portfolio-page .portfolio-hero-button:hover {
    transform: translateY(-1px);
    border-color: var(--portfolio-accent);
}

#clickin-portfolio-page .portfolio-hero-button-primary {
    color: #FFFFFF;
    background: var(--portfolio-accent);
    border-color: var(--portfolio-accent);
}

#clickin-portfolio-page .portfolio-hero-button-primary:hover {
    color: #FFFFFF;
    background: #6E4EF0;
    border-color: #6E4EF0;
}

#clickin-portfolio-page .portfolio-hero-button svg {
    width: 14px;
    height: 14px;
}


/* =========================================================
   HERO IMAGE
   Crisp. No blur. No decorative overlay.
   ========================================================= */

#clickin-portfolio-page .portfolio-hero-image {
    width: 100%;
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--portfolio-border);
    border-radius: 10px;
    background: var(--portfolio-surface);
}

#clickin-portfolio-page .portfolio-hero-image img {
    width: 100%;
    height: auto;

    display: block;

    margin: 0;
    padding: 0;
    border: 0;

    object-fit: cover;
    object-position: top center;

    filter: none !important;
    opacity: 1 !important;
    transform: none;
}


/* =========================================================
   TRUSTED / CLIENT MARQUEE
   No background decoration
   ========================================================= */

#clickin-portfolio-page .portfolio-trusted {
    width: 100%;
    margin: 0;
    padding: 24px 0 38px;

    background: var(--portfolio-bg);
    overflow: hidden;
}

#clickin-portfolio-page .portfolio-marquee-wrapper {
    width: 100%;
    overflow: hidden;
}

#clickin-portfolio-page .portfolio-marquee-track {
    width: max-content;

    display: flex;
    align-items: center;
    gap: 30px;

    padding-left: 22px;

    animation: portfolio-marquee-scroll 38s linear infinite;
    will-change: transform;
}

#clickin-portfolio-page .portfolio-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    white-space: nowrap;

    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.01em;

    color: var(--portfolio-secondary);
}

#clickin-portfolio-page .portfolio-dot-sep {
    width: 3px;
    height: 3px;
    flex: 0 0 3px;

    border-radius: 50%;
    background: var(--portfolio-accent);
    opacity: 0.45;
}

@keyframes portfolio-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}


/* =========================================================
   WORK SECTION
   EXACT SAME 1180px CONTAINER
   ========================================================= */

#clickin-portfolio-page .portfolio-work {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;

    padding:
        45px
        22px
        100px;

    background: var(--portfolio-bg);
}

#clickin-portfolio-page .portfolio-section-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 34px;
}

#clickin-portfolio-page .portfolio-heading-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

#clickin-portfolio-page .portfolio-heading-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;
    background: var(--portfolio-accent);
}

#clickin-portfolio-page .portfolio-heading-title {
    margin: 0;

    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: var(--portfolio-heading);
}

#clickin-portfolio-page .portfolio-heading-line {
    width: 100%;
    height: 1px;
    background: var(--portfolio-border);
}

#clickin-portfolio-page{
  --bg:var(--color-bg,#08090A);
  --bg1:var(--color-surface,#0B0C0F);
  --bg2:var(--color-surface-elevated,#101114);
  --surface:rgba(255,255,255,0.03);
  --surface2:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.12);
  --v:#7C5CFF;
  --v2:#9B85FF;
  --b:#3B82F6;
  --b2:#60A5FA;
  --g:#10B981;
  --white:var(--color-heading,#F1F5FF);
  --grey:var(--color-secondary,#8892A4);
  --grey2:#5A6478;
  --font:var(--font-primary,inherit);
  --portfolio-page-bg:var(--color-bg,#08090A);
}



#clickin-portfolio-page *,
#clickin-portfolio-page *::before,
#clickin-portfolio-page *::after{margin:0;padding:0;box-sizing:border-box;font-family:inherit}


#clickin-portfolio-page{scroll-behavior:smooth}


#clickin-portfolio-page{background:var(--bg);
  font-family:var(--font);
  color:var(--white);
  overflow-x:clip;
  position:relative;
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;}



#clickin-portfolio-page::before{content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 800px 600px at 80% -10%, rgba(124,92,255,.12) 0%, transparent 60%),
    radial-gradient(ellipse 600px 500px at -10% 80%, rgba(59,130,246,.08) 0%, transparent 60%),
    radial-gradient(ellipse 400px 400px at 50% 50%, rgba(124,92,255,.04) 0%, transparent 70%);
  pointer-events:none;z-index:0;}



#clickin-portfolio-page .wrap{max-width:var(--container-width,1180px);margin:0 auto;padding:var(--section-padding-y,50px) var(--container-padding-x,22px);position:relative;z-index:1}



/* ── SECTION GROUPING ── */


#clickin-portfolio-page .portfolio-section{margin-bottom:56px}


#clickin-portfolio-page .portfolio-section:last-child{margin-bottom:0}



#clickin-portfolio-page .section-head{display:flex;align-items:center;gap:14px;
  margin-bottom:22px;}


#clickin-portfolio-page .section-head .shead-left{display:flex;align-items:center;gap:10px}


#clickin-portfolio-page .section-head .sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--v),var(--b));
  box-shadow:0 0 10px rgba(124,92,255,.6);}


#clickin-portfolio-page .section-head .stitle{font-size:clamp(17px,2vw,21px);font-weight:800;color:var(--white);
  letter-spacing:-0.01em;white-space:nowrap;}


#clickin-portfolio-page .section-head .scount{font-size:10px;font-weight:700;color:var(--grey);
  background:var(--surface2);border:1px solid var(--border2);
  padding:3px 10px;border-radius:100px;letter-spacing:.03em;
  flex-shrink:0;}


#clickin-portfolio-page .section-head .sline{flex:1;height:1px;
  background:linear-gradient(90deg, var(--border2), transparent);}



#clickin-portfolio-page .grid{display:grid;grid-template-columns:1fr;gap:24px}


@media (min-width:700px){#clickin-portfolio-page .grid{grid-template-columns:1fr 1fr;gap:24px}}


@media (min-width:1100px){#clickin-portfolio-page .grid{grid-template-columns:1fr 1fr 1fr;gap:28px}}



#clickin-portfolio-page .card{position:relative;
  background:var(--bg1);
  border-radius:8px;
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .25s ease;}


#clickin-portfolio-page .card::before{content:"";
  position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(135deg, rgba(124,92,255,.06) 0%, transparent 50%, rgba(59,130,246,.04) 100%);
  pointer-events:none;z-index:0;}


#clickin-portfolio-page .card:hover{border-color:rgba(124,92,255,.55);}



#clickin-portfolio-page .img-wrap{position:relative;height:210px;overflow:hidden;
  background:#050506;flex-shrink:0;}


#clickin-portfolio-page .img-wrap img{width:100%;height:100%;
  object-fit:cover;object-position:top;
  display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1);}


#clickin-portfolio-page .card:hover .img-wrap img{transform:scale(1.06)}


#clickin-portfolio-page .img-fade{position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 35%, rgba(8,9,10,.95) 100%);
  pointer-events:none;z-index:1;}



#clickin-portfolio-page .status-badge{position:absolute;top:12px;right:12px;z-index:3;
  display:flex;align-items:center;gap:5px;
  background:rgba(8,9,10,.82);
  border:1px solid rgba(16,185,129,.25);
  border-radius:100px;
  padding:4px 10px 4px 8px;
  backdrop-filter:blur(8px);}


#clickin-portfolio-page .status-dot{width:6px;height:6px;border-radius:50%;
  background:var(--g);
  box-shadow:0 0 6px var(--g);
  animation:portfolio-blink 2.5s infinite;}


@keyframes portfolio-blink{0%,100%{opacity:1}50%{opacity:.3}}


#clickin-portfolio-page .status-text{font-size:9px;font-weight:600;color:var(--g);letter-spacing:.06em;text-transform:uppercase}



#clickin-portfolio-page .cat-pill{position:absolute;bottom:12px;left:12px;z-index:3;
  background:rgba(124,92,255,.2);
  border:1px solid rgba(124,92,255,.35);
  border-radius:100px;
  padding:3px 10px;
  font-size:9px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--v2);
  backdrop-filter:blur(6px);}



#clickin-portfolio-page .cbody{padding:18px 18px 0;position:relative;z-index:1;flex:1;display:flex;flex-direction:column}



#clickin-portfolio-page .meta-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}


#clickin-portfolio-page .year-tag{font-size:10px;font-weight:500;color:var(--grey2);letter-spacing:.04em}


#clickin-portfolio-page .type-tag{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.22);
  color:var(--b2);border-radius:100px;padding:2px 8px;}



#clickin-portfolio-page .ctitle{font-size:17px;font-weight:700;line-height:1.25;margin-bottom:6px;color:var(--white)}


#clickin-portfolio-page .cdesc{font-size:12px;font-weight:400;color:var(--grey);line-height:1.65;margin-bottom:14px;flex:1}



#clickin-portfolio-page .metrics{margin-bottom:14px}


#clickin-portfolio-page .metric-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}


#clickin-portfolio-page .metric-label{font-size:9px;font-weight:600;color:var(--grey2);letter-spacing:.06em;text-transform:uppercase;width:74px;flex-shrink:0}


#clickin-portfolio-page .metric-bar{flex:1;height:4px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden}


#clickin-portfolio-page .metric-fill{height:100%;border-radius:100px;transition:width 1s cubic-bezier(.4,0,.2,1)}


#clickin-portfolio-page .fill-v{background:linear-gradient(90deg,var(--v),var(--v2))}


#clickin-portfolio-page .fill-b{background:linear-gradient(90deg,var(--b),var(--b2))}


#clickin-portfolio-page .fill-g{background:linear-gradient(90deg,#059669,var(--g))}


#clickin-portfolio-page .metric-val{font-size:9px;font-weight:700;color:var(--grey);width:24px;text-align:right;flex-shrink:0}



#clickin-portfolio-page .tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}


#clickin-portfolio-page .tag{font-size:9px;font-weight:500;letter-spacing:.03em;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border2);
  color:var(--grey);border-radius:6px;padding:3px 8px;}



#clickin-portfolio-page .card-divider{height:1px;background:var(--border);margin:0 18px;position:relative;z-index:1}



#clickin-portfolio-page .actions{display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:8px;padding:14px 18px 18px;
  position:relative;z-index:1;}


#clickin-portfolio-page .btn{display:flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 6px;border-radius:8px;
  font-size:11px;font-weight:600;
  cursor:pointer;border:none;
  transition:all .2s;text-decoration:none;
  white-space:nowrap;letter-spacing:.01em;}


#clickin-portfolio-page .btn svg{width:12px;height:12px;flex-shrink:0}



#clickin-portfolio-page .bp{background:var(--surface2);color:var(--white);border:1px solid var(--border2)}


#clickin-portfolio-page .bp:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}



#clickin-portfolio-page .bi{background:rgba(59,130,246,.1);color:var(--b2);border:1px solid rgba(59,130,246,.25)}


#clickin-portfolio-page .bi:hover{background:rgba(59,130,246,.2)}



#clickin-portfolio-page .bv{background:linear-gradient(135deg,var(--v),var(--v2));
  color:#fff;border:none;
  box-shadow:0 4px 14px rgba(124,92,255,.4);}


#clickin-portfolio-page .bv:hover{box-shadow:0 6px 22px rgba(124,92,255,.6);transform:translateY(-1px)}



#clickin-portfolio-page .info-panel{position:absolute;inset:0;z-index:20;
  background:rgba(8,9,10,.97);
  backdrop-filter:blur(24px);
  border-radius:8px;
  transform:translateY(102%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:22px;}


#clickin-portfolio-page .info-panel.open{transform:translateY(0)}



#clickin-portfolio-page .iclose{position:absolute;top:14px;right:14px;
  background:rgba(255,255,255,.07);border:1px solid var(--border2);
  color:var(--grey);width:30px;height:30px;border-radius:8px;
  font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;}


#clickin-portfolio-page .iclose:hover{background:rgba(239,68,68,.15);color:#f87171;border-color:#f87171}



#clickin-portfolio-page .i-top{margin-bottom:14px}


#clickin-portfolio-page .i-eyebrow{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v2);margin-bottom:5px}


#clickin-portfolio-page .i-title{font-size:20px;font-weight:800;line-height:1.2;margin-bottom:8px}


#clickin-portfolio-page .i-desc{font-size:12px;color:var(--grey);line-height:1.7}



#clickin-portfolio-page .i-section{margin-top:14px}


#clickin-portfolio-page .i-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey2);margin-bottom:8px;display:flex;align-items:center;gap:6px}


#clickin-portfolio-page .i-label::after{content:"";flex:1;height:1px;background:var(--border)}



#clickin-portfolio-page .i-tags{display:flex;flex-wrap:wrap;gap:5px}


#clickin-portfolio-page .i-tag{font-size:10px;padding:4px 10px;border-radius:8px;border:1px solid var(--border2);color:var(--white);background:var(--surface2)}



#clickin-portfolio-page .i-list{list-style:none;display:flex;flex-direction:column;gap:7px}


#clickin-portfolio-page .i-list li{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--grey);line-height:1.5}


#clickin-portfolio-page .i-list li::before{content:"";flex-shrink:0;width:5px;height:5px;background:linear-gradient(135deg,var(--v),var(--b));border-radius:50%;margin-top:5px}



#clickin-portfolio-page .results-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}


#clickin-portfolio-page .result-chip{display:flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;
  padding:4px 10px;border-radius:100px;}


#clickin-portfolio-page .rc-v{background:rgba(124,92,255,.15);color:var(--v2);border:1px solid rgba(124,92,255,.3)}


#clickin-portfolio-page .rc-b{background:rgba(59,130,246,.12);color:var(--b2);border:1px solid rgba(59,130,246,.25)}


#clickin-portfolio-page .rc-g{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.25)}



#clickin-portfolio-page .i-visit{display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;padding:10px 18px;border-radius:8px;
  background:linear-gradient(135deg,var(--v),var(--v2));
  color:#fff;font-size:12px;font-weight:700;text-decoration:none;
  box-shadow:0 4px 18px rgba(124,92,255,.45);
  transition:all .2s;}


#clickin-portfolio-page .i-visit:hover{box-shadow:0 8px 28px rgba(124,92,255,.65);transform:translateY(-1px)}


#clickin-portfolio-page .i-visit svg{width:12px;height:12px}



#clickin-portfolio-page .overlay{display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.9);backdrop-filter:blur(16px);
  align-items:center;justify-content:center;padding:20px;}


#clickin-portfolio-page .overlay.open{display:flex}


#clickin-portfolio-page .modal{width:100%;max-width:1000px;max-height:90vh;
  background:var(--bg2);border-radius:10px;
  border:1px solid var(--border2);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 120px rgba(0,0,0,.9),0 0 0 1px rgba(124,92,255,.15);
  animation:portfolio-pop-in .28s cubic-bezier(.4,0,.2,1);}


@keyframes portfolio-pop-in{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:none}}



#clickin-portfolio-page .mhead{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--border);
  flex-shrink:0;gap:12px;
  background:rgba(255,255,255,.02);}


#clickin-portfolio-page .m-left{display:flex;align-items:center;gap:10px;min-width:0}


#clickin-portfolio-page .m-icon{width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--v),var(--b));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}


#clickin-portfolio-page .m-icon svg{width:14px;height:14px;color:#fff}


#clickin-portfolio-page .m-text{min-width:0}


#clickin-portfolio-page .mtitle{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


#clickin-portfolio-page .murl{font-size:10px;color:var(--grey2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}


#clickin-portfolio-page .mbtns{display:flex;gap:6px;flex-shrink:0}


#clickin-portfolio-page .mbtn{background:var(--surface2);border:1px solid var(--border2);
  color:var(--grey);padding:6px 12px;border-radius:8px;
  font-size:11px;font-weight:600;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;gap:4px;transition:all .18s;}


#clickin-portfolio-page .mbtn:hover{background:rgba(255,255,255,.1);color:var(--white)}


#clickin-portfolio-page .mbtn.x:hover{background:rgba(239,68,68,.14);color:#f87171;border-color:#f87171}


#clickin-portfolio-page .mbtn svg{width:11px;height:11px}


#clickin-portfolio-page .mimg{flex:1;overflow:hidden;background:#050506}


#clickin-portfolio-page .mimg img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}



@media (max-width:600px){
  
#clickin-portfolio-page .section-head .stitle{white-space:normal}

}

/* =========================================================
   CLICKIN LABS GLOBAL MIGRATION RULES — PORTFOLIO OVERRIDES
   Design preserved; only the common system is normalized.
   ========================================================= */

@media (max-width: 1024px) {
  #clickin-portfolio-page .wrap {
    padding-left: var(--container-padding-x, 22px);
    padding-right: var(--container-padding-x, 22px);
  }

  #clickin-portfolio-page .card,
  #clickin-portfolio-page .card::before,
  #clickin-portfolio-page .info-panel,
  #clickin-portfolio-page .modal {
    border-radius: 12px;
  }
}

@media (max-width: 768px) {
  #clickin-portfolio-page .wrap {
    padding-left: var(--container-padding-x-mobile, 15px);
    padding-right: var(--container-padding-x-mobile, 15px);
    padding-top: var(--section-padding-y-mobile, 34px);
    padding-bottom: var(--section-padding-y-mobile, 34px);
  }

  #clickin-portfolio-page .card,
  #clickin-portfolio-page .card::before,
  #clickin-portfolio-page .info-panel,
  #clickin-portfolio-page .modal {
    border-radius: 14px;
  }

  #clickin-portfolio-page .trusted-section {
    padding-left: var(--container-padding-x-mobile, 15px);
    padding-right: var(--container-padding-x-mobile, 15px);
  }
}

/* =========================================================
   FINAL PAGE SYSTEM
   ========================================================= */

#clickin-portfolio-page{
  width:100%;
  min-height:100vh;
  background:var(--portfolio-page-bg,#08090A);
  color:var(--white);
  overflow-x:clip;
}

#clickin-portfolio-page #portfolio-grid{
  scroll-margin-top:90px;
}


/* =========================================================
   FINAL PAGE BACKGROUND — EXACT ROOT
   No decorative background artwork.
   ========================================================= */

#clickin-portfolio-page::before {
    display: none !important;
}

#clickin-portfolio-page {
    background: var(--color-bg, #000000) !important;
}

html[data-theme="light"] #clickin-portfolio-page {
    background: #FFFFFF !important;
}


/* =========================================================
   WORK WRAPPER
   The original card system stays intact, but the outer
   page section follows the Clickin 1180px container.
   ========================================================= */

#clickin-portfolio-page .portfolio-work {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

#clickin-portfolio-page .wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding:
        50px
        22px
        80px;
}

@media (max-width: 767px) {
    #clickin-portfolio-page .wrap {
        padding:
            34px
            15px
            50px;
    }
}

/* Keep original card visual dimensions and effects. */
#clickin-portfolio-page .card {
    border-radius: 8px;
}

#clickin-portfolio-page .card::before {
    border-radius: 8px;
}

#clickin-portfolio-page .info-panel {
    border-radius: 8px;
}

/* Sharp portfolio images — no blur/filter. */
#clickin-portfolio-page .img-wrap img,
#clickin-portfolio-page .mimg img {
    filter: none !important;
}


/* =========================================================
   LIGHT THEME — CARD BUTTON TEXT FIX
   ========================================================= */

html[data-theme="light"] #clickin-portfolio-page .bp {
    color: #111827 !important;
    background: #F3F4F6 !important;
    border-color: #D1D5DB !important;
}

html[data-theme="light"] #clickin-portfolio-page .bp:hover {
    color: #111827 !important;
    background: #E5E7EB !important;
    border-color: #C7CDD6 !important;
}

html[data-theme="light"] #clickin-portfolio-page .bi {
    color: #2563EB !important;
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
}

html[data-theme="light"] #clickin-portfolio-page .bv {
    color: #FFFFFF !important;
}


/* =========================================================
   LIGHT THEME — HERO BUTTON TEXT CONTRAST
   ========================================================= */

html[data-theme="light"] #clickin-portfolio-page .portfolio-hero-button {
    color: #111827 !important;
    background: #FFFFFF !important;
    border-color: #D1D5DB !important;
}

html[data-theme="light"] #clickin-portfolio-page .portfolio-hero-button:hover {
    color: #111827 !important;
    background: #F9FAFB !important;
    border-color: #BFC5D0 !important;
}

html[data-theme="light"] #clickin-portfolio-page .portfolio-hero-button-primary,
html[data-theme="light"] #clickin-portfolio-page .portfolio-hero-button-primary:hover {
    color: #FFFFFF !important;
    background: #7C5CFF !important;
    border-color: #7C5CFF !important;
}


/* =========================================================
   FINAL HERO RESPONSIVE SYSTEM
   ========================================================= */

/* Large desktop */
#clickin-portfolio-page .portfolio-hero-title {
    font-size: clamp(44px, 4.8vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

#clickin-portfolio-page .portfolio-hero-inner {
    gap: clamp(36px, 4.5vw, 56px);
}


/* Tablet / medium screens */
@media (max-width: 1024px) {

    #clickin-portfolio-page .portfolio-hero {
        padding-top: 96px;
        padding-bottom: 58px;
    }

    #clickin-portfolio-page .portfolio-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }

    #clickin-portfolio-page .portfolio-hero-title {
        font-size: clamp(40px, 5vw, 48px);
        line-height: 1.06;
    }

    #clickin-portfolio-page .portfolio-hero-description {
        font-size: 15px;
        line-height: 1.68;
        margin-top: 20px;
    }

    #clickin-portfolio-page .portfolio-hero-actions {
        margin-top: 24px;
    }

    #clickin-portfolio-page .portfolio-hero-image {
        border-radius: 12px;
    }

}


/* Tablet portrait / small laptop */
@media (max-width: 900px) {

    #clickin-portfolio-page .portfolio-hero {
        padding-top: 90px;
        padding-bottom: 54px;
    }

    #clickin-portfolio-page .portfolio-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #clickin-portfolio-page .portfolio-hero-content {
        max-width: 760px;
    }

    #clickin-portfolio-page .portfolio-hero-image {
        width: 100%;
        max-width: 760px;
    }

    #clickin-portfolio-page .portfolio-hero-title {
        font-size: clamp(38px, 6vw, 46px);
    }

}


/* Mobile */
@media (max-width: 767px) {

    #clickin-portfolio-page .portfolio-hero {
        padding:
            78px
            0
            42px;
    }

    #clickin-portfolio-page .portfolio-hero-inner {
        padding-left: 15px;
        padding-right: 15px;
        gap: 26px;
    }

    #clickin-portfolio-page .portfolio-hero-eyebrow {
        margin-bottom: 13px;
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    #clickin-portfolio-page .portfolio-hero-title {
        font-size: clamp(32px, 9vw, 38px);
        line-height: 1.08;
        letter-spacing: -0.04em;
        max-width: 100%;
    }

    #clickin-portfolio-page .portfolio-hero-description {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.68;
        max-width: 100%;
    }

    #clickin-portfolio-page .portfolio-hero-actions {
        width: 100%;
        margin-top: 21px;
        gap: 9px;
    }

    #clickin-portfolio-page .portfolio-hero-button {
        min-height: 44px;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 12px;
        border-radius: 8px;
    }

    #clickin-portfolio-page .portfolio-hero-image {
        width: 100%;
        border-radius: 14px !important;
        overflow: hidden;
    }

    #clickin-portfolio-page .portfolio-hero-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: top center;
    }

}


/* Small mobile */
@media (max-width: 520px) {

    #clickin-portfolio-page .portfolio-hero {
        padding-top: 72px;
        padding-bottom: 36px;
    }

    #clickin-portfolio-page .portfolio-hero-title {
        font-size: 32px;
        line-height: 1.09;
    }

    #clickin-portfolio-page .portfolio-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #clickin-portfolio-page .portfolio-hero-button {
        width: 100%;
    }

    #clickin-portfolio-page .portfolio-hero-image {
        border-radius: 14px !important;
    }

}


/* Very small mobile */
@media (max-width: 380px) {

    #clickin-portfolio-page .portfolio-hero-inner {
        gap: 22px;
    }

    #clickin-portfolio-page .portfolio-hero-title {
        font-size: 29px;
    }

    #clickin-portfolio-page .portfolio-hero-description {
        font-size: 13.5px;
    }

    #clickin-portfolio-page .portfolio-hero-button {
        min-height: 42px;
        font-size: 12px;
    }

}


/* =========================================================
   MOBILE — PORTFOLIO CARD RADIUS
   ========================================================= */

@media (max-width: 767px) {

    #clickin-portfolio-page .card {
        border-radius: 14px !important;
    }

    #clickin-portfolio-page .card::before {
        border-radius: 14px !important;
    }

    #clickin-portfolio-page .info-panel {
        border-radius: 14px !important;
    }

}


/* =========================================================
   ORIGINAL CLICKIN LABS THEME BACKGROUND
   ========================================================= */

#clickin-portfolio-page {
    background: #000000 !important;
}

html[data-theme="light"] #clickin-portfolio-page {
    background: #F3F4F6 !important;
}

body {
    background: #000000 !important;
}

html[data-theme="light"] body {
    background: #F3F4F6 !important;
}