/* Case Studies — Featured grid; inherits tokens from index.css */

.cs-hero { padding: 10rem 0 2rem; }
.cs-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.cs-hero .badge{
  display:inline-block; background: rgba(var(--primary-rgb), .1);
  border: 1px solid rgba(var(--primary-rgb), .25); color: var(--primary-light);
  padding: .4rem .75rem; border-radius: 999px; font-size: .85rem; margin-bottom: .75rem;
}
.cs-hero h1{ color: var(--white); font-size: clamp(2rem, 3vw, 3rem); line-height: 1.15; margin-bottom: .5rem; }
.cs-hero p{ color: var(--text-gray); max-width: 720px; }

.cs-grid .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1100px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .grid{ grid-template-columns: 1fr; } }

.cs-card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255, .06);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cs-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

.cs-thumb img{ width:100%; height: 200px; object-fit: cover; display:block; }
.cs-body{ padding: 1rem 1rem 1.25rem; }
.cs-title{ color: var(--white); font-size: 1.15rem; margin-bottom: .4rem; }
.cs-excerpt{ color: var(--text-gray); margin-top: .25rem; }

.cs-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; }
.cs-tags li{
  font-size: .8rem; color: var(--text-light);
  background: rgba(var(--primary-rgb), .12);
  border: 1px solid rgba(var(--primary-rgb), .2);
  border-radius: 999px; padding: .25rem .55rem;
}

.cs-actions{ display:flex; gap:.6rem; margin-top: .9rem; }
.cs-actions .btn-secondary{ padding:.6rem .9rem; }
.cs-actions .btn-primary{ padding:.6rem 1rem; }

.more-cta{
  text-align:center; margin-top: 1.25rem;
  color: var(--text-gray);
}
.more-cta .link{ color: var(--text-light); text-decoration: underline; }
.more-cta .link:hover{ color: var(--white); }

/* Modal */
.cs-modal::backdrop{ background: rgba(0,0,0,.55); }
.cs-modal{
  border: 0; padding: 0; background: transparent;
  max-width: min(900px, 92vw);
}
.cs-modal .modal-inner{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1rem 1rem 1.25rem;
  max-height: 85vh; overflow: auto;
}
.modal-close{
  position: sticky; top: 0; margin-left: auto;
  background: transparent; border: 0; color: var(--text-light);
  font-size: 1.25rem; cursor: pointer;
}
.modal-content{ display:block; }

.case-article header h2{ color: var(--white); margin-bottom: .25rem; }
.case-article .meta{ color: var(--text-gray); margin-bottom: .75rem; }
.case-article h3{ color: var(--white); margin-top: 1rem; }
.case-article p, .case-article li{ color: var(--text-gray); }
.case-article .stack{ margin-top: 1rem; }

/* Performance niceties */
.cs-hero, .cs-grid { content-visibility: auto; contain-intrinsic-size: 800px; }

/* Minimal card styles (only if you aren’t loading case-studies.css) */
.cs-card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
}
.cs-thumb img{
  width:100%;
  height:220px;           /* gives images visible height */
  object-fit:cover;
  display:block;
}
.cs-body{ padding: 1rem 1rem 1.25rem; }
.cs-title{ color: var(--white); font-size: 1.15rem; margin-bottom: .4rem; }
.cs-title a{ color: inherit; text-decoration: none; }
.cs-excerpt{ color: var(--text-gray); }
.cs-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; }
.cs-tags li{
  font-size:.8rem; color: var(--text-light);
  background: rgba(var(--primary-rgb), .12);
  border: 1px solid rgba(var(--primary-rgb), .2);
  border-radius: 999px; padding: .25rem .55rem;
}

/* Center the Load more button and its label */
#loadMoreCasesBtn.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}