/* =============================================================================================
 * JURA Club — Utilità / Utility classes
 * =============================================================================================
 * IT: Classi minute e monouso per spaziatura, allineamento, larghezza e colore del testo.
 *     Esistono per una ragione precisa e limitata: **togliere gli attributi `style` dal markup**.
 *
 *     PERCHÉ SERVIVA. La prima stesura dei template portava 108 attributi `style` sparsi in 21
 *     file. Ciascuno sembrava innocuo — un margine, un allineamento — e insieme facevano tre
 *     danni: rendevano impossibile cambiare il ritmo verticale in un punto solo; sfuggivano alla
 *     prova che vieta i colori fuori dai token, perché quella prova legge i fogli di stile e non
 *     il markup; e rendevano il markup illeggibile proprio nei punti in cui la struttura conta.
 *     Ora il gate vieta l'attributo `style` nei `.eta`: il debito non può rientrare in silenzio.
 *
 *     LA REGOLA D'USO, CHE NON È «USALE OVUNQUE». Un'utilità è ammessa quando descrive una
 *     **eccezione locale** a una regola che il componente già stabilisce: una scheda che in quel
 *     punto ha bisogno di un margine in più, un testo che lì va a destra. Quando la stessa
 *     combinazione di utilità ricorre tre volte, non è un'eccezione: è un componente che non è
 *     stato ancora scritto, e va scritto in `componenti.css`. Un markup pieno di sei utilità per
 *     elemento è lo stesso identico difetto degli `style` inline, con una sintassi più elegante.
 *
 *     Nessun valore letterale: ogni utilità cita un token di `tokens.css`.
 *
 * EN: Single-purpose utility classes for spacing, alignment, width and text colour. They exist to
 *     remove inline `style` attributes from the markup — the gate now forbids them. A utility is
 *     for a LOCAL EXCEPTION; when the same combination recurs three times it is a missing
 *     component, not a utility.
 * ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
 * 1. SPAZIATURA
 *
 * Nomenclatura: `<proprietà><lato>-<passo>`.
 *   m = margine · p = spaziatura interna
 *   t = alto · b = basso · x = orizzontale · y = verticale · (nessuna lettera) = tutti i lati
 * I passi sono quelli della scala di `tokens.css` — 1…8 — e non ne esistono altri.
 * --------------------------------------------------------------------------------------------- */

.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.mt-1 { margin-top: var(--sp-1); }  .mb-1 { margin-bottom: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }  .mb-2 { margin-bottom: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }  .mb-3 { margin-bottom: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }  .mb-4 { margin-bottom: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }  .mb-5 { margin-bottom: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }  .mb-6 { margin-bottom: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }  .mb-7 { margin-bottom: var(--sp-7); }

.ml-auto { margin-left: auto; }
.ml-2 { margin-left: var(--sp-2); }
.ml-6 { margin-left: var(--sp-6); }


/* ---------------------------------------------------------------------------------------------
 * 2. DISPOSIZIONE
 * --------------------------------------------------------------------------------------------- */

.centrato        { text-align: center; }
.a-destra        { text-align: right; }
.contenuto-centrato { justify-content: center; }
.contenuto-a-destra { justify-content: flex-end; }
.allinea-inizio  { align-items: flex-start; }
.a-capo          { flex-wrap: wrap; }
.piena-larghezza { width: 100%; }

/* Spaziatura interna a un contenitore flessibile: sostituisce i `gap` scritti a mano. */
.spazio-1 { gap: var(--sp-1); }
.spazio-2 { gap: var(--sp-2); }
.spazio-3 { gap: var(--sp-3); }
.spazio-4 { gap: var(--sp-4); }
.spazio-5 { gap: var(--sp-5); }

/* ---------------------------------------------------------------------------------------------
 * 3. LARGHEZZE DI LETTURA
 *
 * Una riga di testo oltre i ~75 caratteri costringe l'occhio a cercare l'inizio della riga
 * successiva. Non è una preferenza: è la ragione per cui i giornali hanno le colonne.
 * --------------------------------------------------------------------------------------------- */

.colonna-lettura { max-width: var(--larghezza-editoriale); }
.colonna-media   { max-width: 900px; }

/* ---------------------------------------------------------------------------------------------
 * 4. TESTO
 * --------------------------------------------------------------------------------------------- */

.testo-xs  { font-size: var(--testo-xs); }
.testo-sm  { font-size: var(--testo-sm); }
.testo-md  { font-size: var(--testo-md); }
.testo-lg  { font-size: var(--testo-lg); }

.testo-tenue  { color: var(--colore-testo-tenue); }
.testo-forte  { color: var(--colore-testo-forte); }
.testo-oro    { color: var(--jura-oro); }
.testo-avorio { color: var(--jura-avorio); }

.peso-normale { font-weight: var(--peso-normale); }
.peso-forte   { font-weight: var(--peso-forte); }
.maiuscoletto { text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------------------------------------
 * 5. BORDI DI SEGNALAZIONE
 *
 * Il filetto laterale che marca un pannello come «richiede attenzione» o «è la prova on-chain».
 * Erano scritti a mano su ogni scheda; ora sono due classi con un significato dichiarato.
 * --------------------------------------------------------------------------------------------- */

.segna-attesa { border-left: 3px solid var(--stato-attesa); }
.segna-info   { border-left: 3px solid var(--stato-info); }
.segna-oro    { border-top: 3px solid var(--jura-oro); }

/* ---------------------------------------------------------------------------------------------
 * 6. VISIBILITÀ
 * --------------------------------------------------------------------------------------------- */

.nascosto { display: none; }
@media (max-width: 720px) { .nascosto-su-mobile { display: none; } }

/* Larghezza minima protetta: sotto ~320px una traccia da 290px sborda dal contenitore. */
@media (max-width: 340px) { .griglia--auto { grid-template-columns: minmax(0, 1fr); } }