/* CoopMate: lista gruppi (prefisso groups-) e dettaglio (prefisso group-), RD-7a. Si carica dal blocco page_css del template.
   Solo var(--ui-*), nessun colore letterale. Budget della pagina: 4 KB gzip (lo controlla tests/twig_smoke.php). */

.groups-top { padding-block: var(--ui-space-5); border-bottom: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); }
.groups-top__head { display: grid; gap: var(--ui-space-3); margin-bottom: var(--ui-space-4); }
.groups-top h1 { margin-bottom: var(--ui-space-2); }
.groups-top .ui-lead { margin: 0; }
.groups-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; }
.groups-count { margin: 0 0 var(--ui-space-3); color: var(--ui-ink-muted); font-weight: 700; }
.groups-results { padding-block: var(--ui-space-4) var(--ui-space-6); }
.groups-grid, .group-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-3); margin: 0 0 var(--ui-space-5); padding: 0; list-style: none; }
.groups-grid > li, .group-grid > li { display: grid; grid-template-columns: minmax(0, 1fr); }

/* dettaglio */
.group-notice { padding-top: var(--ui-space-3); }
.group-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)); }
.group-hero__grid { display: grid; gap: var(--ui-space-4); align-items: center; }
.group-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); }
.group-hero__body > * { margin-block: 0 var(--ui-space-3); }
.group-hero__body h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
.group-hero__tags { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.group-muted { color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.group-layout { display: grid; gap: var(--ui-space-5); margin-block: var(--ui-space-5); }
.group-main, .group-side { display: grid; gap: var(--ui-space-5); align-content: start; min-width: 0; }
.group-side { gap: var(--ui-space-4); }
.group-actions { display: grid; gap: var(--ui-space-3); }
.group-actions > *, .group-actions form { margin-block: 0; }
.group-section h2 { margin-bottom: var(--ui-space-3); }
.group-prose p { max-width: 65ch; }
.group-messages { display: grid; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-3); padding: 0; list-style: none; overflow-wrap: anywhere; }
.group-members { display: grid; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.group-member { display: grid; gap: var(--ui-space-1); }
.group-tools { padding-left: var(--ui-space-2); font-size: var(--ui-text-sm); }
.group-tools summary { cursor: pointer; color: var(--ui-ink-muted); }
.group-invite { display: grid; gap: var(--ui-space-3); }
.group-subtitle { margin: var(--ui-space-4) 0 var(--ui-space-2); font-size: var(--ui-text-lg); }

@media (min-width: 640px) {
    .groups-grid, .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); }
    .groups-top__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

@media (min-width: 900px) {
    .groups-top { padding-block: var(--ui-space-6); }
    .group-hero__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .group-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
    .group-side { position: sticky; top: var(--ui-space-5); }
}

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