/* Reusable product-collection layouts (config/grids.js PIN_LAYOUTS).
   The SAME .pgrid-item (a partials/product-card) is arranged six ways. Ported
   from the bandsaas pin-flow patterns but reusing wesell's product card and the
   existing numbered pagination (partials/pagination.ejs) beneath it. */

.pgrid { margin: 0 0 8px; }
.pgrid-item { margin-bottom: 16px; }

/* grid — uniform responsive tiles (matches the classic col-6/md-4/lg-3 look) */
.pgrid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pgrid-grid .pgrid-item { margin-bottom: 0; }

/* columns — tall & narrow, more per row */
.pgrid-columns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pgrid-columns .pgrid-item { margin-bottom: 0; }

/* compact — dense small tiles */
.pgrid-compact { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pgrid-compact .pgrid-item { margin-bottom: 0; }

/* justified — Flickr-style flex rows that fill the width */
.pgrid-justified { display: flex; flex-wrap: wrap; gap: 16px; }
.pgrid-justified .pgrid-item { flex: 1 1 220px; margin-bottom: 0; }

/* masonry — Pinterest stagger via CSS multi-column */
.pgrid-masonry { column-count: 4; column-gap: 16px; }
.pgrid-masonry .pgrid-item {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: inline-block; width: 100%;
}

/* mosaic — a full-width featured first card, remainder in masonry columns */
.pgrid-mosaic { column-count: 4; column-gap: 16px; }
.pgrid-mosaic .pgrid-item {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: inline-block; width: 100%;
}
.pgrid-mosaic .pgrid-feature { column-span: all; -webkit-column-span: all; }

/* ── Game-capsule card variant (partials/marketplace/game-card.ejs) ──
   Dark Steam-style capsule that fills a .pgrid-item, so games marketplaces
   flow the SAME six layouts above. The white product-card washes out on the
   cherry hub chrome; this variant is dark and image-forward instead. */
.pgrid-game .pgrid-item { margin-bottom: 0; }
.pg-capsule {
  display: block; background: #16202d; border-radius: 8px; overflow: hidden;
  text-decoration: none; color: #c7d5e0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pg-capsule:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.5); color: #fff; }
.pg-capsule-art { position: relative; aspect-ratio: 1/1; background: #0b1118; }
.pg-capsule-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pg-capsule-body { padding: 10px 12px 12px; }
.pg-capsule-title { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.35; margin-bottom: 2px; }
.pg-capsule-studio { font-size: 11px; color: #7a8b99; margin-bottom: 4px; }
.pg-capsule-rating { font-size: 11px; color: #f5c518; margin-bottom: 6px; }
.pg-capsule-rating .pg-muted { color: #7a8b99; }
.pg-capsule-price { display: flex; align-items: baseline; gap: 8px; }
.pg-now { font-size: 15px; font-weight: 700; color: #a4d007; }
.pg-was { font-size: 12px; color: #67707b; }
.pg-free { font-size: 15px; font-weight: 700; color: #66c0f4; }
.pg-badge {
  position: absolute; top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 7px; border-radius: 4px; color: #fff; text-transform: uppercase;
}
.pg-badge--off { right: 8px; background: #4c6b22; color: #a4d007; }
.pg-badge--pre { left: 8px; background: #1387b8; }
.pg-badge--feat { left: 8px; background: #c1443f; }
/* text-truncate-2 also used by the platform card; safe to re-declare */
.pgrid-game .text-truncate-2 {
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* mosaic hero: give the featured capsule a landscape banner crop */
.pgrid-game.pgrid-mosaic .pgrid-feature .pg-capsule-art { aspect-ratio: 21/9; }
.pgrid-game.pgrid-mosaic .pgrid-feature .pg-capsule-art img { object-fit: cover; }

/* empty state */
.pgrid-empty { text-align: center; padding: 60px 20px; color: #9aa0ad; }
.pgrid-empty i { font-size: 44px; opacity: .5; display: block; margin-bottom: 8px; }

/* Responsive column counts */
@media (max-width: 1199.98px) {
  .pgrid-grid { grid-template-columns: repeat(3, 1fr); }
  .pgrid-columns { grid-template-columns: repeat(4, 1fr); }
  .pgrid-compact { grid-template-columns: repeat(5, 1fr); }
  .pgrid-masonry, .pgrid-mosaic { column-count: 3; }
}
@media (max-width: 767.98px) {
  .pgrid-grid, .pgrid-columns { grid-template-columns: repeat(2, 1fr); }
  .pgrid-compact { grid-template-columns: repeat(3, 1fr); }
  .pgrid-masonry, .pgrid-mosaic { column-count: 2; }
}