/* ═══════════════════════════════════════════════════════════════
   CASE STUDY INDEX  ·  /client-case-studies/
   ═══════════════════════════════════════════════════════════════
   Loads after css/style.css and css/page-kit.css. The parent page for every
   case study; each card links to a child page under the same directory. */

.cs-hero { padding: 9rem 0 3rem; }
.cs-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-wrap: balance;
  max-width: 16ch;
  margin: 1rem 0 1.25rem;
}
.cs-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  max-width: 42rem;
}

.cs-list { padding-top: 1rem; }
.cs-grid { display: grid; gap: 1.5rem; }

.cs-card {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-card:hover { border-color: var(--primary); transform: translateY(-3px); }

.cs-card-media {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  overflow: hidden;
}
.cs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-card:hover .cs-card-media img { transform: scale(1.03); }

.cs-card-body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}
.cs-card-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0.625rem 0 0.875rem;
}
.cs-card-body p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 1.25rem;
}

.cs-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.cs-tags li {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.cs-go {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-lift);
}
.cs-go::after { content: ' \2192'; }

/* A client with no footage shows its mark. The logos are dark on
   transparent, so they are inverted to white for the dark card and sit
   centred rather than cropping edge to edge. Scoped by class, not by file
   type, so a real PNG frame is never inverted by accident. */
.cs-card-media--logo {
  display: grid;
  place-items: center;
  background: var(--surface-alt, #1c1c27);
}
.cs-card-media--logo img {
  object-fit: contain;
  width: 62%;
  height: auto;
  max-height: 55%;
  filter: invert(1) brightness(1.05);
  opacity: 0.9;
}

@media (min-width: 900px) {
  .cs-card { grid-template-columns: 1.15fr 1fr; }
  .cs-card-media { aspect-ratio: auto; min-height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card, .cs-card-media img { transition: none; }
  .cs-card:hover, .cs-card:hover .cs-card-media img { transform: none; }
}