/* PERFOZI — page-case-studies.css — Case Studies archive + single */

/* ── ARCHIVE HERO ── */
.cs-hero{padding:120px 5% 60px;background:var(--black);position:relative;overflow:hidden;border-bottom:1px solid var(--br)}
.cs-hero::after{content:'';position:absolute;right:-100px;top:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,212,255,.05) 0%,transparent 65%);pointer-events:none}
.cs-hero-inner{position:relative;z-index:1;max-width:1400px;margin:0 auto}
.cs-hero-top{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:48px}
.cs-h1{font-family:var(--fh);font-size:clamp(40px,5.5vw,68px);font-weight:800;letter-spacing:2px;line-height:.95}
.cs-h1 em{color:var(--cyan);font-style:normal;display:block}
.cs-hero-right{display:flex;flex-direction:column;justify-content:flex-end}
.cs-intro{font-family:var(--fb);font-size:17px;color:var(--t1);line-height:1.8;margin-bottom:24px}
.cs-intro strong{color:var(--white)}
.cs-stats{display:flex;gap:28px;flex-wrap:wrap}
.css-stat{font-family:var(--fh);font-size:14px;color:var(--t2)}
.css-stat strong{color:var(--white);display:block;font-size:22px;letter-spacing:-.5px}

/* ── INDUSTRY FILTER ── */
.cs-filter{display:flex;gap:6px;flex-wrap:wrap}
.cs-btn{font-family:var(--fb);font-size:14px;color:var(--t2);background:var(--s2);border:1px solid var(--br);border-radius:100px;padding:7px 16px;cursor:pointer;transition:all .25s}
.cs-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.cs-btn.active{background:var(--cyan);color:var(--black);border-color:var(--cyan);font-weight:600}

/* ── ARCHIVE GRID ── */
.cs-archive{padding:64px 5% 96px;max-width:1400px;margin:0 auto}
.cs-grid-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.cs-count{font-family:var(--fh);font-size:15px;font-weight:800}
.cs-count em{color:var(--cyan);font-style:normal}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ── CASE STUDY CARD ── */
.cs-card{background:var(--s2);border:1px solid var(--br);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--white);display:flex;flex-direction:column;transition:border-color .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.cs-card:hover{border-color:var(--br2);transform:translateY(-6px)}
.cs-card-img{aspect-ratio:16/9;background:var(--s3);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cs-card-img-bg{position:absolute;inset:0;font-family:var(--fh);font-size:80px;font-weight:800;color:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;user-select:none;letter-spacing:-3px}
.cs-card-img img{width:100%;height:100%;object-fit:cover}
.cs-card-industry{position:absolute;top:14px;left:14px;font-family:var(--fb);font-size:14px;font-weight:700;color:var(--black);background:var(--cyan);border-radius:100px;padding:3px 10px;letter-spacing:1px;text-transform:uppercase}
.cs-card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.cs-card-metric{font-family:var(--fh);font-size:36px;font-weight:800;letter-spacing:-1.5px;line-height:1;margin-bottom:4px}
.cs-card-metric em{color:var(--cyan);font-style:normal}
.cs-card-metric-lbl{font-family:var(--fb);font-size:14px;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
.cs-card-divider{height:1px;background:var(--br);margin-bottom:16px}
.cs-card-title{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.2;margin-bottom:10px}
.cs-card-excerpt{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:16px;flex:1}
.cs-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--br);margin-top:auto}
.cs-card-tags{display:flex;gap:5px;flex-wrap:wrap}
.cs-card-tag{font-family:var(--fb);font-size:14px;color:var(--cyan);background:var(--ca);border:1px solid var(--cb);border-radius:100px;padding:2px 9px}
.cs-card-read{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--cyan);display:flex;align-items:center;gap:4px;transition:gap .2s;white-space:nowrap;flex-shrink:0}
.cs-card:hover .cs-card-read{gap:7px}

/* ── EMPTY STATE ── */
.cs-empty{padding:96px 5%;text-align:center}
.cs-empty-icon{font-size:48px;margin-bottom:16px}
.cs-empty-title{font-family:var(--fh);font-size:24px;font-weight:800;margin-bottom:8px}
.cs-empty-sub{font-family:var(--fb);font-size:15px;color:var(--t2)}

/* ── SINGLE CASE STUDY ── */
.cs-single-hero{padding:108px 5% 60px;background:var(--black);position:relative;overflow:hidden;border-bottom:1px solid var(--br)}
.cs-single-hero::after{content:'';position:absolute;top:-100px;right:-100px;width:600px;height:600px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,212,255,.05) 0%,transparent 65%);pointer-events:none}
.cs-single-inner{position:relative;z-index:1;max-width:900px;margin:0 auto}
.cs-bc{display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:14px;color:var(--t3);margin-bottom:28px;flex-wrap:wrap}
.cs-bc a{color:var(--t3);text-decoration:none}.cs-bc a:hover{color:var(--cyan)}.cs-bc span{color:var(--t4)}
.cs-single-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.cs-single-industry{font-family:var(--fb);font-size:14px;font-weight:700;color:var(--black);background:var(--cyan);border-radius:100px;padding:4px 13px;letter-spacing:1px;text-transform:uppercase}
.cs-single-h1{font-family:var(--fh);font-size:clamp(32px,4.5vw,56px);font-weight:800;letter-spacing:2px;line-height:1;margin-bottom:24px}
.cs-single-excerpt{font-family:var(--fb);font-size:18px;color:var(--t1);line-height:1.75;margin-bottom:36px;max-width:720px}

/* Metrics strip */
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--br);border-radius:14px;overflow:hidden;margin-bottom:0}
.cs-metric-item{background:var(--s2);padding:24px 20px;text-align:center}
.cs-metric-n{font-family:var(--fh);font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-1.5px;line-height:1}
.cs-metric-n em{color:var(--cyan);font-style:normal}
.cs-metric-lbl{font-family:var(--fb);font-size:14px;color:var(--t2);margin-top:6px;line-height:1.4}

/* Single cover */
.cs-single-cover{max-width:900px;margin:0 auto;padding:40px 5% 0}
.cs-cover-img{width:100%;aspect-ratio:16/7;border-radius:20px;overflow:hidden;background:var(--s2);border:1px solid var(--br)}
.cs-cover-img img{width:100%;height:100%;object-fit:cover}

/* Single body */
.cs-single-body{padding:56px 5% 96px;max-width:900px;margin:0 auto}
.cs-body-content{font-family:var(--fb);font-size:var(--body-size);color:var(--t1);line-height:var(--body-line)}
.cs-body-content h2{font-family:var(--fh);font-size:clamp(22px,2.5vw,30px);font-weight:800;letter-spacing:-.5px;line-height:1.1;margin:48px 0 16px;color:var(--white)}
.cs-body-content h3{font-family:var(--fh);font-size:clamp(18px,1.8vw,22px);font-weight:800;letter-spacing:-.3px;line-height:1.2;margin:32px 0 12px;color:var(--white)}
.cs-body-content p{margin-bottom:22px;overflow-wrap:break-word;word-break:break-word}
.cs-body-content strong{color:var(--white);font-weight:600}
.cs-body-content em{color:var(--cyan);font-style:normal}
.cs-body-content a{color:var(--cyan);text-decoration:underline;text-decoration-color:rgba(0,212,255,.3)}
.cs-body-content ul,.cs-body-content ol{margin:0 0 22px 20px;display:flex;flex-direction:column;gap:10px}
.cs-body-content li{line-height:1.75}
.cs-body-content ul li::marker{color:var(--cyan)}
.cs-body-content img{max-width:100%;height:auto;border-radius:12px;display:block;margin:28px 0}

/* Back + next nav */
.cs-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:48px;border-top:1px solid var(--br);margin-top:48px;flex-wrap:wrap}
.cs-nav-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--t2);border:1px solid var(--br);border-radius:8px;padding:12px 20px;text-decoration:none;transition:all .3s}
.cs-nav-back:hover{border-color:var(--cyan);color:var(--cyan)}
.cs-nav-next{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;background:var(--cyan);color:var(--black);border-radius:8px;padding:12px 20px;text-decoration:none;transition:all .3s}
.cs-nav-next:hover{opacity:.85;transform:translateY(-2px)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .cs-hero-top{grid-template-columns:1fr;gap:32px}
  .cs-grid{grid-template-columns:1fr 1fr}
  .cs-metrics{grid-template-columns:1fr 1fr}
  .cs-single-h1{letter-spacing:0}
  .cs-single-hero{padding:80px 5% 40px}
  .cs-card-metric,.cs-card-title,.cs-metric-n,.cs-body-content h2,.cs-body-content h3{letter-spacing:0}
}
@media(max-width:600px){
  .cs-hero{padding:60px 5% 32px}
  .cs-grid{grid-template-columns:1fr}
  .cs-metrics{grid-template-columns:1fr}
  .cs-archive{padding:40px 5% 60px}
  .cs-single-hero{padding:60px 5% 28px}
  .cs-single-body{padding:32px 5% 60px}
  .cs-single-cover{padding:24px 5% 0}
  .cs-nav{flex-direction:column;align-items:stretch}
  .cs-nav-back,.cs-nav-next{justify-content:center}
}