/* AIIMS Case Studies - front end styles
   Mobile-first. Breakpoints layered on top via min-width. */

:root{
  --cs-primary:#F5412C;
  --cs-ink:#0D0D0D;
  --cs-ink-mid:#4A3F38;
  --cs-ink-soft:#8A7E78;
  --cs-surface:#FAFAF8;
  --cs-white:#FFFFFF;
  --cs-rule:#E8E0DA;
}

.cs-body, .cs-body *{ box-sizing:border-box; }
.cs-body{
  font-family:'TT Interphases Pro','Inter','Helvetica Neue',Arial,sans-serif;
  background:var(--cs-surface);
  color:var(--cs-ink);
  line-height:1.6;
}
.cs-body img{ max-width:100%; height:auto; display:block; }

/* ---------------- ARCHIVE HERO ---------------- */
/*
 * Fixed stack: header (~72px) + award bar (~34px mobile / 38px desktop)
 * padding-top must push ALL content below that stack so the breadcrumb
 * is never hidden behind the fixed nav.
 *
 * Mobile:  72 + 34 + 24 breathing room = 130px
 * Desktop: 72 + 38 + 40 breathing room = 150px
 * xl:      generous 180px (matches other page heroes)
 *
 * When the award bar is dismissed (body loses .aiims-bar-active),
 * drop the extra 34-38px.
 */
.cs-archive-hero{
  background:var(--cs-ink);
  color:var(--cs-white);
  min-height:400px;
  display:flex;
  align-items:center;
  padding-top:130px;
  padding-bottom:48px;
  text-align:center;
}
body:not(.aiims-bar-active) .cs-archive-hero{
  padding-top:96px;
}
.cs-archive-hero .container{
  width:100%;
  height:100%;
}
.cs-archive-hero h1{
  font-size:clamp(32px,8vw,64px);
  font-weight:800;
  line-height:1.05;
  margin:0 0 16px;
}
.cs-archive-hero p{
  color:rgba(255,255,255,0.65);
  max-width:560px;
  margin:0 auto;
  font-size:15px;
}
@media (min-width:768px){
  .cs-archive-hero{
    min-height:500px;
    padding-top:150px;
    padding-bottom:60px;
  }
  body:not(.aiims-bar-active) .cs-archive-hero{
    padding-top:115px;
  }
}
@media (min-width:1280px){
  .cs-archive-hero{
    min-height:600px;
    padding-top:180px;
    padding-bottom:80px;
  }
  body:not(.aiims-bar-active) .cs-archive-hero{
    padding-top:140px;
  }
}

.cs-filters{
  background:var(--cs-white);
  border-bottom:1px solid var(--cs-rule);
  padding:20px;
  position:sticky;
  top:0;
  z-index:10;
  transition:padding .25s ease, box-shadow .25s ease;
}
/* Shrinks once the page is scrolled past the hero, via JS toggling
   .is-compact on scroll (see case-studies.js). Keeps the filter bar
   out of the way on long scrolls without ever losing it entirely. */
.cs-filters.is-compact{
  padding:10px 20px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.cs-filters-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:gap .25s ease;
}
.cs-filters.is-compact .cs-filters-inner{
  gap:8px;
}
.cs-filters-row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.cs-filters select, .cs-filters input[type="text"]{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--cs-rule);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  background:var(--cs-white);
  color:var(--cs-ink);
  transition:padding .25s ease, font-size .25s ease;
}
.cs-filters.is-compact select, .cs-filters.is-compact input[type="text"]{
  padding:7px 10px;
  font-size:13px;
}
.cs-filters button{
  padding:10px 16px;
  border-radius:8px;
  border:1px solid var(--cs-rule);
  background:var(--cs-ink);
  color:var(--cs-white);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:padding .25s ease, font-size .25s ease;
}
.cs-filters.is-compact button{
  padding:7px 12px;
  font-size:12px;
}
.cs-filters button.cs-reset{
  background:transparent;
  color:var(--cs-ink-mid);
}

.cs-grid-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:32px 20px 80px;
}
.cs-count{
  font-size:13px;
  color:var(--cs-ink-soft);
  margin-bottom:20px;
}
.cs-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:start;
}
.cs-card{
  background:var(--cs-white);
  border:1px solid var(--cs-rule);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:var(--cs-ink);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cs-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}
.cs-card-media{
  aspect-ratio:16/10;
  background:var(--cs-ink);
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}
.cs-card-media img{ width:100%; height:100%; object-fit:cover; }
.cs-card-logo{
  position:absolute;
  left:16px; bottom:16px;
  height:28px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:.9;
}

/* Card body: nested flex column. min-height:0 stops the well-known
   flexbox "implicit min-size" bug where a flex:1 column inside an
   overflow:hidden parent can under-report its content height, causing
   the tags / title / stat blocks to paint on top of each other instead
   of stacking. flex-shrink:0 on every text block guarantees none of
   them are ever compressed by the flex algorithm. */
.cs-card-body{
  padding:20px;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cs-card-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:6px;
  flex-shrink:0;
  margin:0;
}
.cs-card-tag{
  display:inline-block;
  font-size:10px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--cs-primary);
  background:rgba(245,65,44,0.08);
  border-radius:100px;
  padding:4px 10px;
  white-space:nowrap;
}
/* Card title colour MUST be explicit. The .cs-body wrapper class that
   would otherwise establish this via inheritance is not present on
   every render path, and the site's global body colour is near-white
   (the main theme runs dark-mode-by-default), so an unset colour here
   silently inherits that near-white value and washes out to near
   invisible on this card's white background. Never rely on
   inheritance for this element again. */
.cs-card-title{
  font-size:19px;
  font-weight:700;
  line-height:1.35;
  margin:0;
  color:var(--cs-ink);
  flex-shrink:0;
  overflow-wrap:break-word;
  word-break:break-word;
}
.cs-card-stat{
  font-size:13px;
  color:var(--cs-ink-soft);
  line-height:1.5;
  margin:0;
  flex-shrink:0;
}
.cs-card-stat strong{ color:var(--cs-ink); }

/* ---------------- BRANDED LOADING SCREEN ---------------- */
.cs-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  background:var(--cs-ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  opacity:1;
  visibility:visible;
  transition:opacity .5s ease, visibility 0s linear 0s;
}
.cs-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease, visibility 0s linear .5s;
}
.cs-loader-logo{
  height:30px;
  width:auto;
  filter:brightness(0) invert(1);
  animation:cs-loader-pulse 1.6s ease-in-out infinite;
}
.cs-loader-spinner{
  width:36px;
  height:36px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--cs-primary);
  animation:cs-loader-spin .8s linear infinite;
}
.cs-loader-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  font-weight:600;
}
@keyframes cs-loader-spin{ to{ transform:rotate(360deg); } }
@keyframes cs-loader-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
body.cs-loading{ overflow:hidden; }

/* ---------------- SINGLE ---------------- */
.cs-hero{
  background:var(--cs-ink);
  color:var(--cs-white);
  padding:72px 20px 56px;
  position:relative;
  overflow:hidden;
}
.cs-hero-eyebrow{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cs-primary); font-weight:600; margin-bottom:18px;
}
.cs-hero h1{
  font-size:clamp(34px,8vw,64px);
  font-weight:800;
  line-height:1.05;
  max-width:900px;
  margin:0 0 20px;
}
.cs-hero-sub{ font-size:16px; color:rgba(255,255,255,0.65); max-width:600px; margin-bottom:32px; }
.cs-hero-logo{ height:32px; width:auto; filter:brightness(0) invert(1); margin-bottom:24px; }

.cs-facecard{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:12px;
}
.cs-facecard-item{
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;
  padding:18px 16px;
}
.cs-facecard-num{ font-size:clamp(24px,5vw,36px); font-weight:800; color:var(--cs-primary); line-height:1; margin-bottom:6px; }
.cs-facecard-label{ font-size:12px; color:rgba(255,255,255,0.6); }

.cs-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.cs-meta-item .label{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,0.4); margin-bottom:4px; }
.cs-meta-item .value{ font-size:14px; font-weight:500; color:rgba(255,255,255,0.9); }

.cs-social-row{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.cs-social-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  color:var(--cs-white); text-decoration:none; font-size:13px;
}

.cs-content-wrap{
  max-width:820px;
  margin:0 auto;
  padding:56px 20px;
}
.cs-content-wrap h2{ font-size:26px; font-weight:700; margin:40px 0 16px; }
.cs-content-wrap p{ font-size:16px; color:var(--cs-ink-mid); line-height:1.75; margin-bottom:18px; }

.cs-reel-embed{ margin:40px 0; }
.cs-reel-embed .cs-reel-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--cs-primary); font-weight:600; margin-bottom:12px; }
.cs-reel-embed iframe, .cs-reel-embed .cs-embed-wrap{ width:100%; max-width:420px; margin:0 auto; }

.cs-gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:32px 0;
}
.cs-gallery img{ border-radius:10px; width:100%; }

.cs-testimonial{
  background:var(--cs-ink);
  color:var(--cs-white);
  border-radius:16px;
  padding:36px 28px;
  margin:40px 0;
}
.cs-testimonial blockquote{ font-size:19px; font-style:italic; line-height:1.5; margin:0 0 16px; }
.cs-testimonial cite{ font-size:13px; color:rgba(255,255,255,0.55); font-style:normal; }

.cs-departments, .cs-team{
  display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 32px;
}
.cs-pill{
  font-size:12px; font-weight:600; padding:6px 14px; border-radius:100px;
  background:rgba(245,65,44,0.08); color:var(--cs-primary);
}

.cs-cta{
  background:var(--cs-primary);
  color:var(--cs-white);
  text-align:center;
  padding:56px 20px;
}
.cs-cta h2{ font-size:clamp(24px,5vw,36px); font-weight:800; margin:0 0 16px; }
.cs-cta a{
  display:inline-block; background:var(--cs-white); color:var(--cs-primary);
  font-weight:700; padding:14px 28px; border-radius:100px; text-decoration:none; font-size:14px;
}

/* ---------------- BREAKPOINTS ---------------- */
@media (min-width:640px){
  .cs-grid{ grid-template-columns:repeat(2,1fr); }
  .cs-facecard{ grid-template-columns:repeat(3,1fr); }
  .cs-filters-row{ grid-template-columns:repeat(3,1fr) auto; align-items:center; }
  .cs-gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .cs-grid{ grid-template-columns:repeat(3,1fr); }
  .cs-filters-row{ grid-template-columns:repeat(5,1fr) auto; }
  .cs-hero{ padding:96px 60px 72px; }
  .cs-content-wrap{ padding:72px 20px; }
}