/* =========================================================
   SECTION — Case grid (COLLINS-style portfolio index)
   A clean responsive grid of tall portrait cards: image with
   a client + title label beneath. main.js initCaseGrid()
   renders the cards from PR_WORK_ITEMS. Self-contained .cg-*.
   ========================================================= */

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-grid-md);
}

.cg-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cg-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--page-fg), transparent 88%);
}

/* Image is taller than its frame so it can drift (parallax) within it as the
   page scrolls. main.js initCaseGrid() animates .cg-media-inner on scroll. */
.cg-media-inner {
  position: absolute;
  inset: -12% 0;
  will-change: transform;
}

.cg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cg-index {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-ui);
  color: var(--pr-paper);
  mix-blend-mode: difference;
}

.cg-label {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-row-xs) / 2);
  margin-top: 16px;
}

.cg-client {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-sm);
  letter-spacing: var(--tracking-heading-soft);
  line-height: var(--leading-heading);
  transition: color var(--duration-hover-fast) var(--ease);
}

.cg-card:hover .cg-client,
.cg-card:focus-visible .cg-client {
  color: var(--pr-rocket);
}

.cg-title {
  font-size: var(--type-small);
  opacity: 0.6;
}

.cg-meta {
  font-size: var(--type-tiny);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .case-grid {
    grid-template-columns: 1fr;
    gap: var(--space-stack-lg);
  }

  .cg-media {
    aspect-ratio: 4 / 3;
  }
}