/* ============================================================
   CASE STUDIES + CASE STUDY DETAIL
   ============================================================ */
:root{ --nv:#022b63; --cream:#efede7; --amber:#f9a825; --ink:#111827; --muted:#5b6472; --line:#e7e4dc; --soft:#f7f6f2; --radius:18px; }

/* ---- Filter bar ---- */
.cs-filter{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:44px; }
.cs-fbtn{
  padding:10px 22px; border-radius:30px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-family:'DMSans-Medium'; font-size:14px; cursor:pointer; transition:.25s;
}
.cs-fbtn:hover{ border-color:var(--nv); color:var(--nv); }
.cs-fbtn.active{ background:var(--nv); border-color:var(--nv); color:#fff; }

/* ---- Cards grid ---- */
.cs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.cs-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:.35s; display:flex; flex-direction:column;
}
.cs-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(2,43,99,.10); border-color:#cfd6e2; }
.cs-card.is-hidden{ display:none; }
.cs-cardimg{ height:200px; background:linear-gradient(135deg,#f7f6f2,#efede7); display:flex; align-items:center; justify-content:center; color:#c3cbd8; font-size:52px; overflow:hidden; }
.cs-cardimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-cardbody{ padding:26px 24px 28px; display:flex; flex-direction:column; flex:1; }
.cs-tag{ display:inline-block; align-self:flex-start; background:var(--cream); color:var(--nv); font-family:'DMSans-Medium'; font-size:12px; padding:5px 12px; border-radius:20px; margin-bottom:14px; }
.cs-card h3{ font-family:'DMSans-SemiBold'; font-size:18px; color:var(--ink); line-height:1.35; margin:0 0 10px; }
.cs-card p{ color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 18px; flex:1; }
.cs-stats{ display:flex; gap:22px; margin-bottom:18px; }
.cs-stat .num{ font-family:'PlusJakartaSans-Medium'; font-size:22px; color:var(--nv); }
.cs-stat .lbl{ font-size:11.5px; color:var(--muted); }
.cs-card .cs-link{ font-family:'DMSans-SemiBold'; font-size:14px; color:var(--nv); display:inline-flex; align-items:center; gap:6px; }
.cs-card .cs-link i{ transition:.25s; }
.cs-card:hover .cs-link i{ transform:translateX(4px); }

.cs-empty{ text-align:center; color:var(--muted); padding:40px 0; display:none; }
.cs-empty.show{ display:block; }

/* ---- Detail page (blog-detail style: full-width image + content) ---- */
.csd-meta{ display:flex; flex-wrap:wrap; gap:10px 18px; margin:14px 0 0; color:var(--muted); font-size:14px; align-items:center; }
.csd-meta .cat{ background:var(--nv); color:#fff; font-family:'DMSans-Medium'; font-size:12px; padding:5px 14px; border-radius:20px; }
.csd-meta span:not(.cat){ display:inline-flex; align-items:center; gap:7px; }
.csd-meta i{ color:var(--nv); font-size:17px; }

.csd-wrap{ max-width:900px; margin:0 auto; }
.csd-hero{ border-radius:24px; overflow:hidden; border:1px solid var(--line); margin-bottom:36px; }
.csd-hero img{ width:100%; display:block; }
.csd-hero.noimg{ min-height:340px; background:linear-gradient(135deg,#f7f6f2,#efede7); }

.csd-statbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; background:var(--nv); border-radius:20px; padding:34px 40px; margin-bottom:44px; }
.csd-statbar .st{ text-align:center; color:#fff; }
.csd-statbar .st .num{ font-family:'PlusJakartaSans-Medium'; font-size:32px; display:block; }
.csd-statbar .st .lbl{ font-size:12.5px; color:#ffffffcc; }

.csd-body .lead{ font-size:18px; line-height:1.7; color:var(--ink); font-family:'DMSans-Medium'; margin:0 0 28px; }
.csd-body h2{ font-family:'PlusJakartaSans-Medium'; font-size:25px; color:var(--ink); margin:36px 0 14px; }
.csd-body p{ color:var(--muted); font-size:16px; line-height:1.85; margin:0 0 16px; }
.csd-body ul{ list-style:none; padding:0; margin:0 0 16px; }
.csd-body ul li{ display:flex; align-items:flex-start; gap:12px; color:var(--ink); font-size:15.5px; line-height:1.7; margin-bottom:12px; }
.csd-body ul li i{ color:var(--amber); font-size:20px; flex:0 0 auto; margin-top:2px; }
.csd-body blockquote{ margin:28px 0; padding:22px 28px; border-left:4px solid var(--amber); background:var(--soft); border-radius:0 14px 14px 0; font-family:'PlusJakartaSans-Medium'; font-size:18px; color:var(--nv); line-height:1.6; font-style:italic; }
.csd-body blockquote .who{ display:block; margin-top:10px; font-size:14px; font-style:normal; color:var(--muted); font-family:'DMSans-Regular'; }

.csd-ctabox{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--cream); border-radius:20px; padding:34px 38px; margin-top:44px; }
.csd-ctabox h3{ font-family:'DMSans-SemiBold'; font-size:20px; color:var(--ink); margin:0 0 6px; }
.csd-ctabox p{ color:var(--muted); font-size:14.5px; margin:0; }

/* ---- Responsive ---- */
@media(max-width:991px){
  .cs-grid{ grid-template-columns:repeat(2,1fr); }
  .csd-statbar{ grid-template-columns:repeat(2,1fr); gap:26px; }
}
@media(max-width:767px){
  .cs-grid{ grid-template-columns:1fr; }
  .cs-filter{ gap:8px; }
  .cs-fbtn{ padding:8px 16px; font-size:13px; }
  .csd-statbar{ grid-template-columns:repeat(2,1fr); padding:26px 22px; gap:20px; }
  .csd-statbar .st .num{ font-size:26px; }
  .csd-body h2{ font-size:21px; }
  .csd-ctabox{ padding:26px 24px; }
}
@media(max-width:479px){
  .csd-statbar{ grid-template-columns:1fr; }
}