/* ============================================================
   Product grid — the [product-grid] block and the /products/ archive.

   The grid is a directory, not a pitch: compact cards, one line of
   summary, no store links. Cards always render the SITE accent even when
   the product has its own world, so a page of five products doesn't turn
   into a bag of skittles (plan §2.4). A world only blooms on the product
   page itself.
   ============================================================ */

/* Block container. On the /products/ archive the grid sits inside a `.wrap`;
   as a block in page content (e.g. the homepage feature zone) it self-centers
   to the site gutter and adds its own vertical rhythm. */
.ma-product-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  padding-block: clamp(48px, 6vw, 88px);
}
.ma-product-grid.alignfull { max-width: none; }

.pgrid { display:grid; gap:20px; margin:0; padding:0; list-style:none; }
.pgrid-1 { grid-template-columns: 1fr; }
.pgrid-2 { grid-template-columns: repeat(2, 1fr); }
.pgrid-3 { grid-template-columns: repeat(3, 1fr); }

.pgrid-heading {
  font-family:var(--serif); font-weight:400; letter-spacing:-0.02em;
  font-size:clamp(24px,3vw,34px); margin-bottom:26px;
}

.pcard {
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  border:1px solid var(--rule); border-radius:var(--r); padding:22px;
  background:var(--paper); transition:border-color .2s ease, transform .2s ease;
}
.pcard:hover { border-color:var(--accent); transform:translateY(-2px); }

.pcard-icon { width:52px; height:52px; border-radius:23%; object-fit:cover; display:block; border:1px solid var(--rule); }
.pcard-icon-ph {
  width:52px; height:52px; border-radius:23%; display:grid; place-items:center;
  background:var(--paper-2); border:1px solid var(--rule);
  font-family:var(--serif); font-size:22px; color:var(--ink-faint);
}

.pcard-name { font-family:var(--serif); font-weight:500; font-size:21px; letter-spacing:-0.015em; color:var(--ink); }
.pcard-tagline { font-size:14px; color:var(--ink-soft); margin-top:3px; }
.pcard-summary { font-size:14.5px; color:var(--ink-soft); margin-top:10px; line-height:1.55; }

.pcard-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; }
.pcard-badge {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  border-radius:100px; padding:4px 10px;
}
.pcard-platform {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em;
  color:var(--ink-mute); border:1px solid var(--rule); border-radius:100px; padding:4px 10px;
}
.pcard-cta { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:600; font-size:14px; color:var(--accent); }
.pcard-cta svg { width:15px; height:15px; transition:transform .2s ease; }
.pcard:hover .pcard-cta svg { transform:translateX(4px); }

/* Archived products, de-emphasized at the foot of the archive. */
.pgrid-archived { margin-top:clamp(48px,6vw,80px); }
.pgrid-archived .pcard { opacity:0.62; }
.pgrid-archived .pcard:hover { opacity:1; }

@media (max-width: 900px) {
  .pgrid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pgrid-2, .pgrid-3 { grid-template-columns: 1fr; }
}