/* CoopMate: lista sessioni (prefisso sessions-), RD-6a. 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). */

.sessions-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)); }
.sessions-top__head { display: grid; gap: var(--ui-space-3); margin-bottom: var(--ui-space-4); }
.sessions-top h1 { margin-bottom: var(--ui-space-2); }
.sessions-top .ui-lead { margin: 0; }
.sessions-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; }
.sessions-count { margin: 0 0 var(--ui-space-3); color: var(--ui-ink-muted); font-weight: 700; }
.sessions-results { padding-block: var(--ui-space-4) var(--ui-space-6); }
.sessions-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; }
.sessions-grid > li { display: grid; grid-template-columns: minmax(0, 1fr); }

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

@media (min-width: 900px) {
    .sessions-top { padding-block: var(--ui-space-6); }
}

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

/* ---------- dettaglio (prefisso session-), RD-6b: DOM = ordine di lettura; da 900 px il pannello azioni diventa colonna sticky ---------- */
.session-notice { padding-top: var(--ui-space-3); }
.session-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)); }
.session-hero__grid { display: grid; gap: var(--ui-space-4); align-items: center; }
.session-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); }
.session-hero__body > * { margin-block: 0 var(--ui-space-3); }
.session-hero__body h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
.session-hero__when { display: flex; align-items: center; gap: var(--ui-space-2); font-weight: 700; }
.session-hero__tags { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.session-muted { color: var(--ui-ink-muted); font-size: var(--ui-text-sm); font-weight: 400; }

.session-layout { display: grid; gap: var(--ui-space-5); margin-block: var(--ui-space-5); grid-template-areas: "side" "main"; }
.session-side { grid-area: side; display: grid; gap: var(--ui-space-4); align-content: start; min-width: 0; }
.session-main { grid-area: main; display: grid; gap: var(--ui-space-5); min-width: 0; }
.session-actions { display: grid; gap: var(--ui-space-3); }
.session-actions > * { margin-block: 0; }
.session-actions form { margin: 0; }
.session-comm { display: flex; gap: var(--ui-space-2); overflow-wrap: anywhere; }
.session-danger { border-top: 1px solid var(--ui-border); padding-top: var(--ui-space-3); }
.session-danger summary { cursor: pointer; font-weight: 700; }
.session-cancel { display: grid; gap: var(--ui-space-3); margin-top: var(--ui-space-3); }

.session-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.session-step { display: grid; gap: var(--ui-space-1); padding: var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-raised); color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.session-step strong { color: var(--ui-ink); }
.session-step--done::before { content: "✓ "; }
.session-step--current { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); color: var(--ui-ink); }

.session-section h2 { margin-bottom: var(--ui-space-3); }
.session-facts { display: grid; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-4); }
.session-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); }
.session-facts dt { color: var(--ui-ink-muted); font-weight: 700; }
.session-facts dd { margin: 0; }
.session-prose p { max-width: 65ch; }
.session-person { display: grid; gap: var(--ui-space-2); }
.session-person__tools { gap: var(--ui-space-1); }
.session-host { display: flex; align-items: center; gap: var(--ui-space-3); margin-bottom: var(--ui-space-3); color: inherit; text-decoration: none; }
.session-game-title { margin: var(--ui-space-3) 0 var(--ui-space-2); font-size: var(--ui-text-lg); }
.ui-missing { display: grid; gap: var(--ui-space-3); }
.ui-missing > * { margin-block: 0; }

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

@media (min-width: 900px) {
    .session-hero__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .session-layout { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-areas: "main side"; align-items: start; }
    .session-side { position: sticky; top: var(--ui-space-5); }
}