/*
  Purpose: Page-specific layout for the Games catalogue.
  Related documentation: UI_ARCHITECTURE.md, WEBSITE_SPEC.md.
  Implementation milestone: CSS-ISOLATION-001.

  This file is loaded only by /games/. Product landing pages remain isolated
  in product.css and must not depend on catalogue selectors.
*/

.games-page {
  padding-block-start: clamp(8rem, 14vw, 12rem);
}

.games-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(16rem, 0.7fr);
  gap: var(--space-6);
  align-items: end;
  margin-block-start: var(--space-3);
}

.games-intro p {
  margin-block-end: 0.2rem;
}

.games-card {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  margin-block-start: var(--space-8);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.games-cover {
  inline-size: 100%;
  aspect-ratio: 1 / 1.75;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.3);
  transform-origin: center;
  clip-path: inset(11.5%);
  border: 1px solid var(--color-line-soft);
  background: var(--color-background-deep);
}

.games-content {
  min-inline-size: 0;
}

.games-content h2 {
  margin-block: var(--space-2) var(--space-3);
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.games-content p:last-child {
  margin-block-end: 0;
}

.games-action {
  white-space: nowrap;
}

@media (max-width: 800px) {
  .games-intro {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .games-card {
    grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
    gap: var(--space-4);
  }

  .games-action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 500px) {
  .games-page {
    padding-block-start: 7rem;
  }

  .games-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .games-cover {
    inline-size: min(100%, 8rem);
  }

  .games-action {
    grid-column: auto;
    justify-self: stretch;
  }
}