/* Situazioni.css
   Pagina elenco della sezione "Situazioni": griglia di argomenti pratici,
   sullo stile della griglia categorie di Dizionario.css, ma con icone
   emoji dirette (nessuna immagine) e un segno di spunta per gli argomenti
   già completati. Riusa le variabili colore definite in style.css. */

/*---------------- SFONDO DECORATIVO ---------------- */

body::before,
body::after{
    content:"";
    position:fixed;
    border-radius:50%;
    filter:blur(60px);
    z-index:-1;
    pointer-events:none;
}

body::before{
    top:-120px;
    right:-90px;
    width:280px;
    height:280px;
    background:rgba(23,185,149,.16);
    animation:vagaBlob1 24s ease-in-out infinite;
}

body::after{
    bottom:-100px;
    left:-100px;
    width:300px;
    height:300px;
    background:rgba(139,108,240,.16);
    animation:vagaBlob2 20s ease-in-out infinite;
}

@keyframes vagaBlob1{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-35px,45px) scale(1.12); }
}

@keyframes vagaBlob2{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(30px,-35px) scale(1.1); }
}

/*---------------- GRIGLIA SITUAZIONI ----------------*/

.listaSituazioni{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    max-width:600px;
    margin:0 auto;
}

@keyframes ingressoSituazione{
    from{ opacity:0; transform:translateY(14px) scale(.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.cardSituazione{
    position:relative;
    background:var(--carta-grad);
    border-radius:22px;
    padding:22px 14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    box-shadow:var(--ombra);
    border:1px solid var(--bordo);
    cursor:pointer;
    text-align:center;
    min-height:140px;
    justify-content:center;
    overflow:hidden;
    animation:ingressoSituazione .4s ease both;
    transition:transform .18s, box-shadow .18s, border-color .18s;
}

.listaSituazioni .cardSituazione:nth-child(1){ animation-delay:.02s; }
.listaSituazioni .cardSituazione:nth-child(2){ animation-delay:.05s; }
.listaSituazioni .cardSituazione:nth-child(3){ animation-delay:.08s; }
.listaSituazioni .cardSituazione:nth-child(4){ animation-delay:.11s; }
.listaSituazioni .cardSituazione:nth-child(5){ animation-delay:.14s; }
.listaSituazioni .cardSituazione:nth-child(6){ animation-delay:.17s; }
.listaSituazioni .cardSituazione:nth-child(n+7){ animation-delay:.2s; }

.cardSituazione:hover{
    transform:translateY(-4px);
    box-shadow:var(--ombra-forte, 0 20px 40px rgba(30,50,90,.16));
    border-color:var(--blu-chiaro);
}

.cardSituazione:active{
    transform:scale(.96);
}

.iconaSituazione{
    font-size:32px;
    line-height:1;
    width:60px;
    height:60px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .18s;
}

.cardSituazione:hover .iconaSituazione{
    transform:scale(1.08) rotate(-4deg);
}

.listaSituazioni .cardSituazione:nth-child(6n+1) .iconaSituazione{ background:linear-gradient(135deg,#3b6fe0,var(--viola,#8b6cf0)); box-shadow:0 10px 20px rgba(59,111,224,.35); }
.listaSituazioni .cardSituazione:nth-child(6n+2) .iconaSituazione{ background:linear-gradient(135deg,var(--menta,#17b995),#22d3c5); box-shadow:0 10px 20px rgba(23,185,149,.35); }
.listaSituazioni .cardSituazione:nth-child(6n+3) .iconaSituazione{ background:linear-gradient(135deg,var(--ambra,#f5a623),#ff8a5c); box-shadow:0 10px 20px rgba(245,166,35,.35); }
.listaSituazioni .cardSituazione:nth-child(6n+4) .iconaSituazione{ background:linear-gradient(135deg,#ec4899,#e0524f); box-shadow:0 10px 20px rgba(236,72,153,.32); }
.listaSituazioni .cardSituazione:nth-child(6n+5) .iconaSituazione{ background:linear-gradient(135deg,#06b6d4,#3b6fe0); box-shadow:0 10px 20px rgba(6,182,212,.32); }
.listaSituazioni .cardSituazione:nth-child(6n+6) .iconaSituazione{ background:linear-gradient(135deg,var(--viola,#8b6cf0),#ec4899); box-shadow:0 10px 20px rgba(139,108,240,.32); }

.titoloSituazioneCard{
    font-size:14.5px;
    font-weight:700;
    line-height:1.25;
    color:var(--testo);
}

.descrizioneSituazioneCard{
    font-size:11.5px;
    color:var(--testo-tenue);
    line-height:1.3;
}

.spuntaSituazione{
    position:absolute;
    top:10px;
    right:10px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--verde),#22d3c5);
    color:#fff;
    font-size:12px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 10px rgba(30,166,114,.4);
    animation:comparsaSpunta .3s cubic-bezier(.3,1.8,.4,1) both;
}

@keyframes comparsaSpunta{
    from{ transform:scale(0); }
    to{ transform:scale(1); }
}

@media(max-width:340px){

    .titoloSituazioneCard{
        font-size:13px;
    }

}