/* Il menu a hub — sette ingressi al posto di quarantasei.

   LA GEOMETRIA E' DISEGNATA, non fotografata. Cerchi, archi e spicchi in
   gradienti conici e radiali sul colore del gruppo: pesano zero byte, sono
   nitidi a qualunque densita' di schermo e seguono il tema. Sette fotografie
   avrebbero pesato circa un megabyte per ottenere meno carattere.

   L'angolo di ogni composizione dipende da --hub-i, l'indice del gruppo:
   sette schede con la stessa geometria sarebbero sette timbri uguali. */

.hub-grid { display: grid; gap: 12px; margin-bottom: 26px; }

.hub {
  position: relative; overflow: hidden; display: flex; align-items: stretch;
  min-height: 96px; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--bh-text);
  background: var(--bh-paper); border: 1.5px solid var(--bh-border);
  border-radius: var(--bh-radius-lg); box-shadow: var(--bh-shadow-sm);
}

.hub-svg {
  position: absolute; right: 0; top: 0; height: 100%; width: 62%;
  pointer-events: none;
}

.hub-body {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  gap: 3px; padding: 16px 18px; flex: 1; min-width: 0;
}
.hub-title {
  font-family: var(--bh-font-display, inherit);
  font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em;
}
.hub-sub { font-size: .8rem; color: var(--bh-text-muted); line-height: 1.35; }
.hub-count {
  margin-top: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  /* NON il colore del gruppo. I sette colori sono scelti per essere
     riconoscibili come colori, non per reggere su un fondo: l'oro di Esami
     misura 3,25:1 sul bianco e il navy di Grammatica 1,03:1 su una card
     notturna. Il colore del gruppo continua a vedersi nella barra di sinistra
     e nella geometria, che e' dove un colore fa il suo mestiere. */
  text-transform: uppercase; color: var(--bh-text-muted);
}

/* Barra di colore a sinistra: e' quella che rende i sette gruppi
   distinguibili con la coda dell'occhio, prima di leggere il titolo. */
.hub::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--hub);
}

@media (min-width: 720px) { .hub-grid { grid-template-columns: 1fr 1fr; } }

/* ─── La schermata di un gruppo ──────────────────────────────────────── */
.mg-sub { color: var(--bh-text-muted); font-size: .88rem; margin: 2px 0 18px; }
.mg-list { display: grid; gap: 8px; }
.mg-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 14px; cursor: pointer; text-align: left; font-family: inherit;
  color: var(--bh-text); background: var(--bh-paper);
  border: 1.5px solid var(--bh-border); border-radius: var(--bh-radius);
}
.mg-icon {
  flex: 0 0 40px; height: 40px; display: flex; align-items: center;
  justify-content: center; border-radius: 11px;
  background: color-mix(in srgb, var(--hub-current, var(--bh-navy)) 12%, transparent);
  color: var(--hub-current, var(--bh-navy));
}
.mg-icon svg { width: 21px; height: 21px; }
.mg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-title { font-weight: 700; font-size: .95rem; }
.mg-desc { font-size: .76rem; color: var(--bh-text-muted); line-height: 1.35; }
.mg-chev { color: var(--bh-text-muted); font-size: 1.2rem; }