/*
 * cases.css — application-cases gallery section (#cases).
 *
 * Layout brief: 20 real injection-moulded part photos in a uniform
 * 4:3 grid. We previously tried CSS multi-column for a masonry feel
 * but the variable image heights left visible empty space at the
 * bottom of shorter columns once column-fill balanced the heights.
 * Switched to a fixed-aspect grid + object-fit:cover — dense, gap-
 * free, and the centre-crop on extreme portraits / panoramas reads
 * cleanly because the point is product variety, not any single
 * hero shot.
 *
 * History note: an earlier draft also had a fruit-ninja-style
 * scroll-in animation (translate+rotate+scale + IntersectionObserver
 * sliced-cut). Removed because the off-screen translate broke IO on
 * mobile — items could never trigger their entrance. js/fruit-gallery.js
 * was deleted along with this rollback.
 *
 * Coupled with:
 *   - HTML markup in index.html under <section class="slab cases">
 *   - 20 photos in assets/img/gallery/g01.jpg .. g20.jpg
 *
 * Last refactor: 2026-04-28 — extracted from a multi-purpose cases.css.
 */

.cases {
  padding-top: 80px;
  padding-bottom: 120px;
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.case-gallery-item {
  margin: 0;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.case-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.case-gallery-item:hover {
  border-color: var(--text-faint);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.25);
}

@media (max-width: 1100px) {
  .case-gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .case-gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 720px) {
  .cases { padding-top: 48px; padding-bottom: 72px; }
}
@media (max-width: 520px) {
  .case-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}