/**
 * griglia-esempi.css
 *
 * Stile specifico del componente "griglia esempi"
 * (Src\Views\Termini\GrigliaEsempi): layout a griglia delle schede,
 * annotazione pinyin dell'intera frase, ed effetto di evidenziazione
 * delle parole cliccabili/passabili col mouse.
 *
 * Richiede assets/css/font-cinese.css per la classe .testo-cinese
 * (caricato separatamente: questo file non lo importa da solo, va
 * incluso nella pagina prima di questo).
 */

.griglia-esempi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
    margin-top: .5rem;
}
.scheda-esempio {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: .6rem .75rem;
    background: #fafafa;
}
.scheda-esempio-cinese {
    font-size: 1.2rem;
    margin: 0 0 .3rem;
}
.scheda-esempio-traduzione {
    margin: 0;
}

/* Annotazione pinyin dell'intera frase (un solo <ruby> per frase, non
   uno per parola: verificato con una registrazione dello schermo del
   sito già in produzione — il pinyin compare come un'unica riga sopra
   l'intera frase, non allineato parola per parola). */
.scheda-esempio-cinese rt {
    font-size: .65em;
    color: #555;
    font-style: italic;
}

/* Parole cliccabili/passabili col mouse dentro la frase: a riposo
   nessun elemento grafico (restano testo continuo, come una normale
   frase cinese), un riquadro colorato ("chip") appare solo al
   passaggio del mouse o è permanente per la parola evidenziata —
   stesso stile in entrambi i casi, come nella registrazione dello
   schermo fornita.

   L'ingrandimento (sia al passaggio del mouse sia, in modo permanente,
   per la parola evidenziata) usa una curva di transizione con leggero
   "superamento" (cubic-bezier con un valore oltre l'1 a metà curva)
   invece di un ingrandimento lineare: è quello che dà la sensazione di
   rimbalzo morbido/elastico invece di un semplice "scatto" di
   dimensione — nota di stile ripresa dal progetto precedente.
   "display: inline-block" è necessario perché transform: scale()
   funzioni su uno <span>: di norma un elemento inline lo ignora. */
.parola-cliccabile {
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    padding: 0 .1rem;
    border: 1px solid transparent;
    transition:
        transform .3s cubic-bezier(.68, -.55, .265, 1.55),
        background-color .15s ease,
        border-color .15s ease;
}
.parola-cliccabile:hover {
    background: #7ee27e;
    border-color: #2a7a2a;
    transform: scale(1.12);
}
.parola-evidenziata {
    background: #7ee27e;
    border: 1px solid #2a7a2a;
    font-weight: bold;
    transform: scale(1.08); /* leggero ingrandimento permanente, non solo al passaggio del mouse */
    animation: parola-evidenziata-comparsa .6s cubic-bezier(.68, -.55, .265, 1.55);
}
/* Il "balzo" elastico si vede solo al primo comparire della parola
   evidenziata (es. al caricamento della pagina): parte da dimensione
   normale, supera leggermente il traguardo, poi si assesta sulla
   dimensione permanente (1.08) definita sopra. */
@keyframes parola-evidenziata-comparsa {
    0%   { transform: scale(1); }
    60%  { transform: scale(1.22); }
    100% { transform: scale(1.08); }
}

/* Evidenziazione TEMPORANEA della parola attualmente in riproduzione
   durante la sillabazione (icona "riproduci parola per parola", vedi
   assets/js/audio-esempio.js): stesso identico effetto elastico di
   .parola-cliccabile:hover (stessa transizione ereditata dalla regola
   base .parola-cliccabile sopra) — aggiunta/rimossa dinamicamente via
   JS mano a mano che la sequenza audio avanza da una parola alla
   successiva, non un cambio di sfondo istantaneo. */
.parola-in-riproduzione {
    background: #7ee27e;
    border: 1px solid #2a7a2a;
    transform: scale(1.12);
}

/* Pannellino di icone di ogni scheda esempio (riproduci frase,
   riproduci parola per parola, preferiti). */
.scheda-esempio .pannellino {
    margin-bottom: .4rem;
}
.scheda-esempio .pannellino i {
    cursor: pointer;
    margin-right: .6rem;
    color: #555;
}
.scheda-esempio .pannellino i:hover {
    color: #06c;
}
/* Icona non ancora funzionante (funzionalità futura): niente hover,
   cursore "non disponibile", opacità ridotta — visivamente presente
   ma chiaramente inerte. */
.scheda-esempio .pannellino i.icona-disabilitata {
    opacity: .35;
    cursor: not-allowed;
}
.scheda-esempio .pannellino i.icona-disabilitata:hover {
    color: #555;
}