/* ================================================= */
/*          SHARED-CARD-STYLES.CSS                   */
/* Stili base condivisi per tutte le card del sito   */
/* ================================================= */

/*
 * .card-base
 * La classe principale per ogni card. Definisce la forma,
 * le dimensioni, l'ombra e il layout di base.
*/
.card-base {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 380px; /* Larghezza fissa come in /foto */
    min-height: 500px; /* Altezza minima come in /foto */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* RIPRISTINATO: Layout a colonna */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-base:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/*
 * .card-image-container
 * Contenitore per l'immagine. Usa il trucco del "padding-top"
 * per forzare un aspect ratio costante (4:3).
*/

.card-image-container {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
    overflow: hidden;
}

/*
 * .card-image
 * Lo stile per l'immagine vera e propria, per assicurarsi
 * che riempia il contenitore senza deformarsi.
*/
.card-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* RIPRISTINATO: Allineamento in alto di default */
}

/*
 * .card-content-area
 * L'area sotto l'immagine che conterrà i pulsanti
 * e i link specifici di ogni tipo di card.
*/
.card-content-area {
    /* MODIFICA: Specificato il padding per il lato inferiore */
    padding: 20px 20px 35px; /* Top, Lati, Bottom */
    flex-grow: 1; /* RIPRISTINATO: L'area contenuto si espande */
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-end;
}

/* ================================================= */
/*          MODIFICA: Stili Mobile Unificati         */
/* ================================================= */
/*
 * Questi stili si applicano a tutte le card che usano
 * la classe .card-base, garantendo dimensioni e proporzioni
 * coerenti su mobile.
*/
@media (max-width: 768px) {
    .card-base {
        min-height: 400px;
        max-width: 320px;
    }

    .card-image-container {
        padding-top: 70%; /* Modificato per coerenza con foto.css */
    }
}