/* CoopMate: catalogo giochi (prefisso games-) e scheda gioco (prefisso game-), RD-5. Si carica dal blocco page_css dei due template.
   Solo var(--ui-*), nessun colore letterale. Budget della pagina: 4 KB gzip (lo controlla tests/twig_smoke.php). */

/* ---------- catalogo ---------- */
.games-top { padding-block: var(--ui-space-5) var(--ui-space-5); border-bottom: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); }
.games-top h1 { margin-bottom: var(--ui-space-2); }
.games-top .ui-lead { margin-bottom: var(--ui-space-4); }
.games-results { padding-block: var(--ui-space-4) var(--ui-space-5); }
.games-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-3); padding: 0; list-style: none; }
.games-count { margin: 0 0 var(--ui-space-3); color: var(--ui-ink-muted); font-weight: 700; }
.games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); margin: 0 0 var(--ui-space-5); padding: 0; list-style: none; }
.games-grid > li { display: grid; grid-template-columns: minmax(0, 1fr); }
.games-note { margin: var(--ui-space-3) 0 0; text-align: center; }
.games-more__title { margin-bottom: var(--ui-space-3); font-size: var(--ui-text-xl); }

/* ---------- scheda: hero ---------- */
.game-hero { padding-bottom: var(--ui-space-5); border-bottom: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); }
.game-hero__grid { display: grid; gap: var(--ui-space-4); align-items: center; }
.game-hero__cover { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-2); object-fit: cover; background: var(--ui-surface-sunken); }
.game-hero__body > * { margin-block: 0 var(--ui-space-3); }
.game-hero__body h1 { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; }
.game-facts { display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-4); padding: 0; list-style: none; color: var(--ui-ink-muted); font-weight: 700; }
.game-facts li { display: flex; align-items: center; gap: var(--ui-space-2); }
.game-hero__tags { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.game-hero__cta { margin-top: var(--ui-space-4); margin-bottom: 0; }
.game-hero__cta .ui-btn--lg { padding-inline: var(--ui-space-4); font-size: var(--ui-text-base); }

/* ---------- scheda: colonne (ordine del DOM = ordine di lettura, anche su telefono) ---------- */
.game-layout { display: grid; gap: var(--ui-space-5); margin-block: var(--ui-space-5); grid-template-areas: "main"; }
.game-layout--side { grid-template-areas: "side" "main"; }
.game-side { grid-area: side; }
.game-main { grid-area: main; display: grid; gap: var(--ui-space-6); min-width: 0; }

.game-section h2, .game-community h2 { margin-bottom: var(--ui-space-3); }
.ui-head h2 { margin-bottom: 0; }
.game-more { margin: var(--ui-space-2) 0 0; }

.game-community { padding: var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); background: var(--ui-surface-raised); }
.game-community__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.game-community .ui-figure { height: 100%; padding-inline: var(--ui-space-2); }
.game-community .ui-figure__label { font-size: var(--ui-text-xs); }
.game-library { display: grid; gap: var(--ui-space-3); margin-top: var(--ui-space-4); padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.game-library__state { margin: 0; }
.game-library .ui-cluster { gap: var(--ui-space-2); }

.game-tabs { margin-top: calc(var(--ui-space-3) * -1); }
.game-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--ui-space-3); }
.game-people { max-width: 32rem; }
.game-prose p { max-width: 65ch; }
.game-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); margin: 0; padding: 0; list-style: none; }
.game-shots img { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ui-radius-md); object-fit: cover; background: var(--ui-surface-sunken); }

@media (min-width: 640px) {
    .game-hero__cta .ui-btn--lg { padding-inline: var(--ui-space-6); font-size: var(--ui-text-lg); }
    .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-4); }
    .game-community { padding: var(--ui-space-5); }
    .game-community .ui-figure { padding-inline: var(--ui-space-4); }
    .game-community .ui-figure__label { font-size: var(--ui-text-sm); }
    .game-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .games-top { padding-block: var(--ui-space-6); }
    .game-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ui-space-6); }
    .game-layout--side { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "main side"; align-items: start; gap: var(--ui-space-6); }
    .game-side { position: sticky; inset-block-start: calc(var(--ui-header-h) + var(--ui-space-4)); }
}

@media (min-width: 1200px) {
    .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}