/* ============================================================
   case-studies.css
   Additive styles for the Case Studies module.
   Load AFTER styles.css — reuses the same design tokens
   (--bg, --card, --border, --text, --text-dim, --accent, --accent-dim, --radius)
   so it inherits the site's look automatically.
   ============================================================ */

/* ---- hero ---- */
.cs-hero{padding:150px 0 60px;text-align:center;position:relative;}
.cs-hero .wrap{max-width:820px;}
.cs-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin:20px 0 18px;}
.cs-hero p{color:var(--text-dim);font-size:1.05rem;margin-bottom:32px;}
.cs-search{max-width:520px;margin:0 auto;display:flex;gap:10px;}
.cs-search input{flex:1;background:var(--card);border:1px solid var(--border);color:var(--text);
  padding:13px 18px;border-radius:999px;font-size:0.95rem;font-family:inherit;}
.cs-search input:focus{outline:none;border-color:var(--accent);}
.cs-search button{border:none;}

/* ---- filters ---- */
.cs-filters{padding:36px 0 4px;}
.cs-filter-group + .cs-filter-group{margin-top:18px;}
.cs-filter-label{color:var(--text-dim);font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:block;}
.cs-pills{display:flex;flex-wrap:wrap;gap:10px;}
.cs-pill{background:transparent;border:1px solid var(--border);color:var(--text-dim);
  padding:8px 16px;border-radius:999px;font-size:0.85rem;font-weight:600;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;font-family:inherit;}
.cs-pill:hover{border-color:var(--accent);color:var(--accent);}
.cs-pill.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}

/* ---- featured ---- */
.cs-featured{display:grid;grid-template-columns:1.1fr 1fr;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.cs-featured-text{padding:44px;display:flex;flex-direction:column;justify-content:center;}
.cs-featured-text h2{font-size:1.7rem;font-weight:700;letter-spacing:-0.02em;margin:14px 0 14px;line-height:1.25;}
.cs-featured-text p{color:var(--text-dim);margin-bottom:24px;}
.cs-featured-stats{display:flex;gap:28px;margin-bottom:28px;flex-wrap:wrap;}
.cs-featured-stats .num{font-size:1.6rem;font-weight:700;color:var(--accent);}
.cs-featured-stats .label{font-size:0.78rem;color:var(--text-dim);margin-top:2px;}
.cs-featured-img{min-height:320px;}
.cs-featured-img img{width:100%;height:100%;object-fit:cover;}
@media(max-width:820px){.cs-featured{grid-template-columns:1fr;}.cs-featured-img{min-height:220px;}}

/* ---- card grid ---- */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:980px){.cs-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.cs-grid{grid-template-columns:1fr;}}
.cs-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform .25s ease,border-color .25s ease;display:block;}
.cs-card:hover{transform:translateY(-4px);border-color:var(--accent);}
.cs-card img{width:100%;height:190px;object-fit:cover;}
.cs-card-body{padding:22px;}
.cs-card-body h3{font-size:1.08rem;font-weight:700;letter-spacing:-0.01em;margin:12px 0 10px;line-height:1.35;}
.cs-card-body p{color:var(--text-dim);font-size:0.9rem;margin-bottom:16px;line-height:1.6;}
.cs-card-stats{display:flex;gap:20px;margin-bottom:18px;}
.cs-card-stats .num{color:var(--accent);font-weight:700;font-size:0.95rem;}
.cs-card-stats .label{color:var(--text-dim);font-size:0.72rem;}
.cs-card-link{color:var(--accent);font-weight:600;font-size:0.88rem;}

/* ---- pagination ---- */
.cs-pagination{display:flex;justify-content:center;gap:8px;margin-top:48px;}
.cs-pagination button,.cs-pagination a{border:1px solid var(--border);color:var(--text-dim);
  padding:9px 16px;border-radius:999px;font-size:0.85rem;font-weight:600;cursor:pointer;font-family:inherit;background:none;}
.cs-pagination .active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}

/* ---- newsletter ---- */
.cs-newsletter{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:52px;text-align:center;}
.cs-newsletter h2{font-size:1.5rem;margin-bottom:10px;}
.cs-newsletter p{color:var(--text-dim);margin-bottom:26px;}
.cs-newsletter form{max-width:440px;margin:0 auto;display:flex;gap:10px;}
.cs-newsletter input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);
  padding:12px 16px;border-radius:999px;font-family:inherit;}
.cs-newsletter button{border:none;}

/* ---- illustrative notice ---- */
.cs-illustrative{display:inline-flex;align-items:flex-start;gap:10px;font-size:0.82rem;color:#facc7a;
  background:rgba(250,204,122,0.08);border:1px solid rgba(250,204,122,0.25);padding:12px 16px;
  border-radius:10px;text-align:left;max-width:640px;}

/* ---- detail hero ---- */
.cs-detail-hero{padding:130px 0 0;}
.cs-breadcrumb{color:var(--text-dim);font-size:0.85rem;margin-bottom:20px;}
.cs-breadcrumb a{color:var(--accent);}
.cs-detail-hero h1{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700;letter-spacing:-0.02em;
  line-height:1.2;margin:18px 0 18px;max-width:820px;}
.cs-detail-hero .lede{color:var(--text-dim);font-size:1.02rem;max-width:680px;margin-bottom:24px;}
.cs-hero-img{width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius);margin-top:32px;}

/* ---- detail layout ---- */
.cs-detail-layout{display:grid;grid-template-columns:2.1fr 1fr;gap:56px;align-items:start;}
@media(max-width:900px){.cs-detail-layout{grid-template-columns:1fr;}}
.cs-body h2{font-size:1.5rem;font-weight:700;letter-spacing:-0.01em;margin:44px 0 16px;}
.cs-body h2:first-child{margin-top:0;}
.cs-body h3{font-size:1.15rem;font-weight:700;margin:32px 0 14px;}
.cs-body h4{font-size:1rem;font-weight:700;color:var(--accent);margin:22px 0 8px;}
.cs-body p{color:var(--text-dim);line-height:1.75;}
.cs-body ul{color:var(--text-dim);padding-left:20px;line-height:1.9;}
.cs-body ul li{margin-bottom:6px;}
.cs-inline-img{width:100%;height:250px;object-fit:cover;border-radius:var(--radius);margin:20px 0 30px;}

/* ---- timeline ---- */
.cs-timeline{border-left:2px solid var(--border);padding-left:26px;margin-left:6px;margin-top:24px;}
.cs-timeline-item{position:relative;padding-bottom:28px;}
.cs-timeline-item:last-child{padding-bottom:0;}
.cs-timeline-item::before{content:'';position:absolute;left:-32px;top:4px;width:11px;height:11px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-dim);}
.cs-timeline-phase{color:var(--accent);font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:.06em;}
.cs-timeline-desc{color:var(--text-dim);margin-top:4px;font-size:0.92rem;}

/* ---- results stat grid ---- */
.cs-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:10px 0 10px;}
@media(max-width:640px){.cs-stat-grid{grid-template-columns:repeat(2,1fr);}}
.cs-stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;text-align:center;}
.cs-stat-box .num{font-size:1.7rem;font-weight:700;color:var(--accent);}
.cs-stat-box .label{color:var(--text-dim);font-size:0.78rem;margin-top:4px;}

/* ---- sidebar ---- */
.cs-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px;}
.cs-sidebar-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;}
.cs-sidebar-box .cs-sb-label{font-size:0.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:14px;}
.cs-sb-row{margin-bottom:14px;}
.cs-sb-row:last-child{margin-bottom:0;}
.cs-sb-row .k{color:var(--text-dim);font-size:0.78rem;margin-bottom:2px;}
.cs-sb-row .v{font-size:0.92rem;}
.cs-sb-row .v.accent{color:var(--accent);font-weight:700;}
.cs-sidebar-box.cta-box{text-align:center;}
.cs-sidebar-box.cta-box h4{font-size:1rem;margin-bottom:8px;}
.cs-sidebar-box.cta-box p{color:var(--text-dim);font-size:0.85rem;margin-bottom:18px;}
.cs-sidebar-box.cta-box .cta-btn{width:100%;text-align:center;}

/* ---- FAQ (reuses .faq-item/.faq-q/.faq-a but allows taller answers) ---- */
.cs-body .faq-a{max-height:0;}
.cs-body .faq-item.open .faq-a{max-height:400px;padding-bottom:22px;}

/* ---- related ---- */
.cs-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:820px){.cs-related-grid{grid-template-columns:1fr;}}
.cs-related-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;transition:border-color .2s;display:block;}
.cs-related-card:hover{border-color:var(--accent);}
.cs-related-card img{width:100%;height:120px;object-fit:cover;border-radius:10px;margin-bottom:14px;}
.cs-related-card h4{font-size:0.95rem;line-height:1.4;margin-top:8px;}

/* ---- detail CTA band ---- */
.cs-cta-band{border-radius:var(--radius);padding:60px 40px;text-align:center;
  background:radial-gradient(circle at center, rgba(124,242,156,0.10), transparent 70%);
  border:1px solid var(--border);}
.cs-cta-band h2{font-size:1.7rem;margin-bottom:14px;}
.cs-cta-band p{color:var(--text-dim);max-width:480px;margin:0 auto 28px;}