/* CoopMate: home ospite (prefisso home-) e plancia utente (prefisso dash-), RD-4. 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). */

/* ---------- home: hero ---------- */
.home-hero { position: relative; overflow: clip; padding-block: var(--ui-space-5) var(--ui-space-6); }
.home-hero__grid { display: grid; gap: var(--ui-space-5); align-items: center; }
.home-hero__title { margin-bottom: var(--ui-space-4); font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; }
.home-hero__title span { color: var(--ui-primary-text); }
.home-hero__lead { max-width: 36em; margin-bottom: var(--ui-space-5); color: var(--ui-ink-muted); font-size: var(--ui-text-lg); }
.home-hero__stage { position: relative; isolation: isolate; margin: 0; padding: var(--ui-space-5) var(--ui-space-3); }

/* Due cerchi dietro la card, come le due figure del logo: decorazione pura, nessun contenuto. */
.home-hero__stage::before, .home-hero__stage::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.home-hero__stage::before { inset: 0 0 auto auto; width: 11rem; height: 11rem; background: color-mix(in srgb, var(--ui-accent) 70%, transparent); }
.home-hero__stage::after { inset: auto auto 4.5rem 0; width: 8rem; height: 8rem; background: color-mix(in srgb, var(--ui-secondary) 60%, transparent); }
.home-hero__card { max-width: 24rem; margin-inline: auto; transform: rotate(-1deg); animation: home-rise .6s var(--ui-ease-out) both; }
.home-hero__caption { max-width: 24rem; margin: var(--ui-space-4) auto 0; color: var(--ui-ink-muted); font-size: var(--ui-text-sm); text-align: center; }

@keyframes home-rise {
    from { opacity: 0; transform: translateY(1rem) rotate(-1deg); }
}

/* ---------- home: numeri reali ---------- */
.home-live__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); margin: 0; padding: 0; list-style: none; }
.home-live .ui-figure { height: 100%; }
.home-live__games { grid-column: 1 / -1; }

/* ---------- home: come funziona (sequenza in 5 scene di ui/motion.twig, stile in pages/motion.css) ---------- */
.home-how__more { margin: var(--ui-space-5) 0 0; }

/* ---------- home: griglie, liste editoriali, chiusura ---------- */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--ui-space-4); }
.home-lists { display: grid; gap: var(--ui-space-4); align-items: start; }
.home-lists__intro > * { margin-bottom: var(--ui-space-2); }
.home-lists__items { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); background: var(--ui-surface-raised); list-style: none; }
.home-lists__items li + li { border-top: 1px solid var(--ui-border); }
.home-lists__link { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-height: 3.5rem; padding: var(--ui-space-3) var(--ui-space-5); color: var(--ui-ink); font-weight: 800; text-decoration: none; transition: background-color var(--ui-dur-fast) var(--ui-ease); }
.home-lists__link:hover { background: var(--ui-surface-sunken); color: var(--ui-ink); }
.home-lists__link .ui-icon { transition: transform var(--ui-dur-base) var(--ui-ease); }
.home-lists__link:hover .ui-icon { transform: translateX(.25rem); }

.home-cta, .dash-next { background: var(--ui-surface-inverse); color: var(--ui-ink-inverse); }
.home-cta :focus-visible, .dash-next :focus-visible { outline-color: var(--ui-ink-inverse); }
.home-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-5); padding: var(--ui-space-6) var(--ui-space-5); border-radius: var(--ui-radius-xl); }
.home-cta h2 { margin-bottom: var(--ui-space-2); }
.home-cta p { max-width: 38em; margin: 0 0 var(--ui-space-2); }
.home-cta__note { font-size: var(--ui-text-sm); }

/* ---------- plancia ---------- */
.dash-head { padding-block: var(--ui-space-5) var(--ui-space-2); }
.dash-head__inner { display: grid; gap: var(--ui-space-4); }
.dash-head__who { display: flex; align-items: center; gap: var(--ui-space-4); }
.dash-head__text { flex: 1; min-width: 0; max-width: 28rem; }
.dash-head h1 { margin-bottom: var(--ui-space-2); }

.dash-now { display: grid; gap: var(--ui-space-4); margin-block: var(--ui-space-4); }
.dash-clear { display: flex; align-items: center; gap: var(--ui-space-2); margin: 0; color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.dash-missions { display: grid; gap: var(--ui-space-3); }
.dash-missions__meta { margin: var(--ui-space-1) 0 0; color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.dash-title { display: flex; align-items: center; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-3); font-size: var(--ui-text-xl); }
.dash-title--sm { font-size: var(--ui-text-lg); }
.dash-title--xs { margin-top: var(--ui-space-4); font-size: var(--ui-text-base); }
.ui-head > .dash-title { margin: 0; }
.dash-todo { border-inline-start: 6px solid var(--ui-warning-solid); }

.dash-next { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-2); padding: var(--ui-space-5); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-2); }
.dash-next > * { margin: 0; }
.dash-next--empty { padding: 0; background: none; box-shadow: none; color: inherit; }
.dash-next--empty .ui-empty { width: 100%; }
.dash-next__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); font-weight: 700; }
.dash-next__title { font-size: var(--ui-text-2xl); }
.dash-next { position: relative; }
.dash-next__title a { color: inherit; text-decoration-thickness: .08em; }
.dash-next__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dash-next__title a:focus-visible { outline: none; }
.dash-next__title a:focus-visible::after { outline: 3px solid var(--ui-ink-inverse); outline-offset: -6px; }
.dash-next__when { font-size: var(--ui-text-lg); font-weight: 700; }
.dash-next__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); }
.dash-next .ui-btn { margin-top: auto; }
.dash-next > :nth-last-child(2) { margin-bottom: var(--ui-space-4); }
.dash-next__host { font-size: var(--ui-text-sm); }

.dash-kpis { margin-block: var(--ui-space-4) var(--ui-space-5); }
.dash-kpis__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); margin: 0; padding: 0; list-style: none; }
.dash-kpis__main { grid-column: 1 / -1; }
.dash-kpis .ui-figure { height: 100%; }

.dash-grid, .dash-main { display: grid; gap: var(--ui-space-6); }
.dash-side { display: grid; align-content: start; gap: var(--ui-space-4); }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--ui-space-4); }
.dash-side .ui-empty { padding-inline: 0; border: 0; }
.dash-more { margin: var(--ui-space-2) 0 0; font-size: var(--ui-text-sm); }
.dash-more a { display: inline-flex; align-items: center; min-height: var(--ui-tap); }

@media (min-width: 640px) {
    .home-live__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .home-live__games { grid-column: auto; }
    .dash-kpis__list { grid-template-columns: 1.4fr 1fr 1fr; }
    .dash-kpis__main { grid-column: auto; }
}

@media (min-width: 900px) {
    .home-hero { padding-block: var(--ui-space-6) var(--ui-space-7); }
    .home-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--ui-space-6); }
    .home-hero__title span { display: block; }
    .home-hero__stage { padding-inline: var(--ui-space-5); }
    .home-hero__stage::before { width: 14rem; height: 14rem; }
    .home-hero__stage::after { width: 10rem; height: 10rem; }
    .home-lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--ui-space-6); }
    .dash-head__inner { grid-template-columns: 1fr auto; align-items: center; }
    .dash-now--todo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .dash-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

@media (min-width: 1200px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr) 22rem; }
}

/* Ricerca giochi in evidenza (hero): da un gioco alle sessioni, agli eventi e ai gruppi collegati. */
.home-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-3); align-items: end; margin-block: var(--ui-space-4); }
@media (min-width: 40rem) { .home-search { grid-template-columns: minmax(0, 1fr) auto; } }