/* CoopMate: profilo pubblico (prefisso profile-), RD-7c. 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). */

.profile-hero { 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)); }
.profile-hero__grid { display: grid; gap: var(--ui-space-4); align-items: center; }
.profile-hero__avatar { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; box-shadow: var(--ui-shadow-2); background: var(--ui-surface-sunken); }
.profile-hero__body > * { margin-block: 0 var(--ui-space-3); }
.profile-hero__body h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.profile-muted { color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.profile-headline { font-size: var(--ui-text-lg); }
.profile-tags, .profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-3); }
.profile-level { grid-column: 1 / -1; }
.profile-layout { display: grid; gap: var(--ui-space-5); margin-block: var(--ui-space-5); }
.profile-main, .profile-side { display: grid; gap: var(--ui-space-5); align-content: start; min-width: 0; }
.profile-section h2 { margin-bottom: var(--ui-space-3); }
.profile-section__head { display: grid; gap: var(--ui-space-3); }
.profile-subtitle { margin: var(--ui-space-4) 0 var(--ui-space-2); font-size: var(--ui-text-lg); }
.profile-invite { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ui-space-2); }
.profile-facts { display: grid; gap: var(--ui-space-2); margin: 0; }
.profile-facts > div { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: var(--ui-space-3); padding-bottom: var(--ui-space-2); border-bottom: 1px solid var(--ui-border); }
.profile-facts dt { color: var(--ui-ink-muted); font-weight: 700; }
.profile-facts dd { margin: 0; overflow-wrap: anywhere; }
.profile-availability { display: grid; grid-template-columns: minmax(4.5rem, auto) repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; font-size: var(--ui-text-sm); }
.profile-availability__day { text-align: center; color: var(--ui-ink-muted); }
.profile-availability__slot { color: var(--ui-ink-muted); }
.profile-availability__cell { display: block; height: 1.75rem; border-radius: var(--ui-radius-sm); background: var(--ui-surface-sunken); }
.profile-availability__cell.is-on { background: var(--ui-accent); }
.profile-games, .profile-cards, .profile-badges, .profile-accounts { display: grid; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-3); padding: 0; list-style: none; }
.profile-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-game { display: grid; gap: var(--ui-space-2); align-content: start; }
.profile-game a { display: grid; gap: var(--ui-space-1); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.profile-game img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--ui-radius-lg); object-fit: cover; background: var(--ui-surface-sunken); }
.profile-cards > li { display: grid; grid-template-columns: minmax(0, 1fr); }
.profile-badges small { color: var(--ui-ink-muted); }
.profile-accounts li { overflow-wrap: anywhere; }

@media (min-width: 640px) {
    .profile-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-section__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

@media (min-width: 900px) {
    .profile-hero__grid { grid-template-columns: auto minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--ui-space-5); }
    .profile-hero__avatar { width: 7.5rem; height: 7.5rem; }
    .profile-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
    .profile-side { position: sticky; top: var(--ui-space-5); }
}

/* DASH-3: nota del proprietario e salti tra sezioni. */
.profile-owner-note { display: flex; align-items: center; gap: var(--ui-space-2); margin: var(--ui-space-4) 0 0; padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-lg); background: var(--ui-surface-sunken); font-size: var(--ui-text-sm); }
.profile-jump { display: flex; gap: var(--ui-space-2); margin-top: var(--ui-space-3); overflow-x: auto; scrollbar-width: thin; }
.profile-jump a { flex: none; display: inline-flex; align-items: center; min-height: var(--ui-tap); padding-inline: var(--ui-space-3); border-radius: var(--ui-radius-lg); color: var(--ui-ink-muted); font-weight: 700; text-decoration: none; }
.profile-jump a:hover { background: var(--ui-surface-sunken); color: var(--ui-ink); }
@media (min-width: 56rem) { .profile-jump { display: none; } }
@media (max-width: 30rem) { .profile-stats .ui-figure { padding-inline: var(--ui-space-2); } .profile-stats .ui-figure__label { font-size: var(--ui-text-xs); overflow-wrap: normal; hyphens: none; } }