/*
 * Stili specifici per le Card della Homepage
 * (Effetto "Lift on Hover")
 */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
    border: none;
    border-radius: 0.5rem;

    /* 1. Ombra rimossa dallo stato statico */
    box-shadow: none;

    background-color: var(--cri-bianco);
    padding: 1rem;
    margin-bottom: 1rem;
    list-style-type: none;

    /* 2. Aggiunta transizione fluida per l'ombra */
    transition: box-shadow 0.3s ease-in-out;
}

/* 3. Applichiamo l'ombra SOLO in :hover */
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Ombra forte in hover */
}

/* Titolo (h2): Rosso e Grassetto */
.md-typeset .grid.cards > ul > li h2,
.md-typeset .grid > .card h2 {
    color: var(--cri-rosso) !important;
    font-weight: bold;
    margin-top: 0;
}

/* Descrizione (p): Nero */
.md-typeset .grid.cards > ul > li p,
.md-typeset .grid > .card p {
    color: var(--cri-nero) !important;
    margin-bottom: 0;
}

/* Link Titolo (h2 a): Rosso */
.md-typeset .grid.cards > ul > li h2 a,
.md-typeset .grid > .card h2 a {
    color: var(--cri-rosso) !important;
    text-decoration: none;
}

/* Effetto Hover nullo sul link (rimuove la sottolineatura) */
.md-typeset .grid.cards > ul > li h2 a:hover,
.md-typeset .grid > .card h2 a:hover {
    text-decoration: none;
}