/* ============================================
   Play Page — Painting Gallery
   ============================================ */

.play-gallery {
  padding: 80px 64px;
  /* No background-color here — inherits from body so the color-wash tint shows through */
}

.play-gallery__grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.play-gallery__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.play-gallery__figure {
  margin: 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.play-gallery__figure:hover {
  transform: rotate(-2deg);
}

@media (prefers-reduced-motion: reduce) {
  .play-gallery__figure,
  .play-gallery__figure:hover {
    transform: none;
    transition: none;
  }
}

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

/* ── Aspect ratios from Figma (1280px desktop frame) ── */

/* Column 1 */
.play-gallery__col:nth-child(1) .play-gallery__figure:nth-child(1) { aspect-ratio: 363 / 411; }
.play-gallery__col:nth-child(1) .play-gallery__figure:nth-child(2) { aspect-ratio: 364 / 365; }
.play-gallery__col:nth-child(1) .play-gallery__figure:nth-child(3) { aspect-ratio: 363 / 369; }

/* Column 2 */
.play-gallery__col:nth-child(2) .play-gallery__figure:nth-child(1) { aspect-ratio: 362 / 362; }
.play-gallery__col:nth-child(2) .play-gallery__figure:nth-child(2) { aspect-ratio: 362 / 362; }
.play-gallery__col:nth-child(2) .play-gallery__figure:nth-child(3) { aspect-ratio: 362 / 421; }

/* Column 3 */
.play-gallery__col:nth-child(3) .play-gallery__figure:nth-child(1) { aspect-ratio: 363 / 300; }
.play-gallery__col:nth-child(3) .play-gallery__figure:nth-child(2) { aspect-ratio: 363 / 470; }
.play-gallery__col:nth-child(3) .play-gallery__figure:nth-child(3) { aspect-ratio: 363 / 375; }

/* ── Responsive ── */

/* Tablet: keep 3 columns, tighten padding and gap */
@media (max-width: 1023px) {
  .play-gallery {
    padding: 60px 32px;
  }

  .play-gallery__grid {
    gap: 12px;
  }

  .play-gallery__col {
    gap: 12px;
  }
}

/* Mobile: single column */
@media (max-width: 599px) {
  .play-gallery {
    padding: 32px 20px;
  }

  .play-gallery__grid {
    flex-direction: column;
    gap: 16px;
  }

  .play-gallery__col {
    gap: 16px;
  }

  /* Reset fixed aspect ratios — use natural image proportions */
  .play-gallery__figure {
    aspect-ratio: unset !important;
  }

  .play-gallery__figure img {
    height: auto;
  }
}