/* ================================================= */
/*          CARDS-FORMA.CSS (Versione Corretta)      */
/* Stili specifici per le card evento della home     */
/* ================================================= */

/* NUOVE REGOLE PER IL CARICAMENTO SELETTIVO */

/* 1. Di default, tutte le immagini sono nascoste */
.evento-image {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
    /* La transizione si applica solo se non specificato diversamente */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    z-index: 10;
}

/* 2. Classe per l'animazione: fa apparire l'immagine con una transizione */
.evento-card.animate-in .evento-image {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 3. Classe per la visualizzazione istantanea: fa apparire l'immagine senza transizione */
.evento-card.show-instant .evento-image {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: none; /* Annulla l'animazione */
}

/* ------------------------------------------------- */

/*
 * MODIFICA CHIAVE:
 * Annulla il posizionamento relativo del contenitore immagine.
 * Questo permette agli elementi interni (.hover-info, .evento-image)
 * di essere posizionati rispetto alla card principale (.card-base).
*/
.evento-card .card-image-container {
    position: static;
}

/*
 * .evento-image
 * Posizionato in modo assoluto AL CENTRO DELLA CARD.
 * Ha uno z-index alto per essere sempre in primo piano.
*/
.evento-image {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Le proprietà transform, opacity e transition sono già state definite sopra */
    width: calc(100% - 40px);
    height: auto;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * .hover-info
 * Posizionato in modo assoluto NELLA PARTE ALTA DELLA CARD.
 * Contiene i dettagli dell'evento.
*/
.hover-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 50px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Allinea il contenuto in alto */
    align-items: center;
    opacity: 0;
    /* --- MODIFICA INIZIO --- */
    visibility: hidden; /* Nascosto e non interattivo di default */
    pointer-events: none; /* Aggiunta di sicurezza */
    /* --- MODIFICA FINE --- */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    text-align: center;
    z-index: 2;
    /* Rimosso background per trasparenza */
}

.nome-festa {
    font-size: 2.2rem;
    padding-bottom: 15px;
    margin-bottom: 20px; 
    color: var(--card-primario);
    width: 100%;
    /* MODIFICA: La linea ora usa il colore del testo della card con trasparenza */
    border-bottom: 1px solid color-mix(in srgb, var(--card-testo), transparent);
}


.info-festa {
    font-size: 0.9rem;
    margin: 8px 0;
    color: var(--card-testo);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-festa i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    font-size: 1.1em;
}

/*
 * .card-content-area
 * Posizionato in modo assoluto NELLA PARTE BASSA DELLA CARD.
 * Contiene i bottoni e i link.
*/
.evento-card .card-content-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    flex-grow: 0;
    background: transparent; /* Sfondo non necessario */
    z-index: 5;
}

/*
 * LOGICA DI VISIBILITÀ
 * Controlla la visibilità in base all'hover sulla card (.card-base:hover)
 * o alla classe .show-info sulla card (.card-base.show-info).
*/

/* Nasconde l'immagine, la rimpicciolisce e la rende non cliccabile */
.card-base:hover .evento-image,
.card-base.show-info .evento-image {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
    /* --- MODIFICA INIZIO --- */
    pointer-events: none; /* Rende l'immagine "trasparente" ai click */
    /* --- MODIFICA FINE --- */
}

/* Mostra le info e le rende cliccabili */
.card-base:hover .hover-info,
.card-base.show-info .hover-info {
    opacity: 1;
    /* --- MODIFICA INIZIO --- */
    visibility: visible; /* Rende il blocco visibile e interattivo */
    pointer-events: auto; /* Permette interazioni con il contenuto */
    /* --- MODIFICA FINE --- */
}

/* Nascondi di default il pulsante e il testo modifica */
.registrati-button,
.modifica-testo {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Mostra il pulsante e il testo modifica in hover/tocco */
.card-base:hover .registrati-button,
.card-base:hover .modifica-testo,
.card-base.show-info .registrati-button,
.card-base.show-info .modifica-testo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/*
 * Stili degli elementi nell'area contenuto
*/
.registrati-button {
    width: 100%;
    padding: 15px 0 !important;
    border-radius: 8px !important;
    font-size: 1.3rem !important;
    font-weight: 800;
    border: none;
    cursor: pointer;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
}

.registrati-button i {
    margin-right: 10px;
}

.modifica-testo {
    margin: 0;
    font-size: 0.9rem;
    text-align: center;
}

/*
 * REGOLE RESPONSIVE
*/
@media (max-width: 768px) {

    /*
     * Disabilita l'effetto hover su mobile per prevenire attivazioni
     * accidentali, A MENO CHE la classe .show-info non sia attiva.
    */
    .card-base:not(.show-info):hover .evento-image {
        /* RIPRISTINA L'IMMAGINE SE IL TEMA È CARICATO */
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    
    .card-base:not(.show-info):hover .hover-info {
        opacity: 0;
    }

    .card-base:not(.show-info):hover .registrati-button,
    .card-base:not(.show-info):hover .modifica-testo {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
    }

    .evento-card .card-content-area {
        gap: 12px;
    }

    /* Riduce la dimensione del titolo su mobile per fare spazio */
    .nome-festa {
        font-size: 1.8rem;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    /* MODIFICA: Sposta il contenuto informativo più in alto su mobile */
    .hover-info {
        padding-top: 35px; /* Valore ridotto rispetto ai 50px del desktop */
    }
}