/* ============================================================
 *  Location: /pages/cases/sections/grid/cases.grid.css
 * ============================================================ */

.cases-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem 1rem;
}

.case-card { grid-column: span 4; }
.case-card--lg { grid-column: span 8; }

.case-card__link { display: block; color: var(--mu-ink); text-decoration: none; }

.case-card__media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--mu-radius);
  overflow: hidden;
  background: var(--mu-warm);
  margin-bottom: 1rem;
}
.case-card--lg .case-card__media { aspect-ratio: 16/10; }

.case-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.case-card:hover .case-card__media img { transform: scale(1.04); }

.case-card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--mu-primary), var(--mu-accent));
  color: var(--mu-paper);
  font-family: var(--mu-font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.case-card__meta {
  display: flex; gap: .5rem; align-items: center;
  font-size: .82rem; color: var(--mu-mute);
  margin-bottom: .35rem;
}
.case-card__client { font-weight: 600; color: var(--mu-ink); }
.case-card__tag {
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--mu-warm);
  color: var(--mu-mute);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.case-card__title {
  font-family: var(--mu-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-bottom: .35rem;
  color: var(--mu-primary);
}
.case-card--lg .case-card__title { font-size: clamp(1.5rem, 2.5vw, 2rem); }

.case-card__excerpt {
  color: var(--mu-mute);
  font-size: .92rem;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .case-card { grid-column: span 6; }
  .case-card--lg { grid-column: span 12; }
}
@media (max-width: 575.98px) {
  .case-card, .case-card--lg { grid-column: span 12; }
}