/***********************************************
                CARD PRODOTTO
***********************************************/

/***********************************************
                    RESET
***********************************************/

.card-prodotto__title,
.card-prodotto__description,
.card-prodotto__meta .badge {
    margin: 0;
}

/*******************************************
        STRUTTURA
*******************************************/

/*CONTENITORE*/

.card-prodotto {
    width: 100%;
    height: 100%;

    background: var(--color-white);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

/*CONTENITORE INTERNO*/

.card-prodotto > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;

    height: 100%;
}

/***********************************************
                 IMMAGINE
***********************************************/

.card-prodotto__img {
    width: 100%;
    aspect-ratio: 4 / 3;

    margin: 0;
    overflow: hidden;

    background-color: var(--color-surface);
}

.card-prodotto__img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/***********************************************
                    BODY
***********************************************/

.card-prodotto__body {
    flex: 1;

    gap: var(--space-sm);
    padding: var(--space-md);
}

.card-prodotto__body > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;

    height: 100%;
}

/***********************************************
                    META
***********************************************/

..card-prodotto__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--space-xs);
}

.card-prodotto__meta .badge {
    flex: 0 0 auto;
}

/***********************************************
          ALLINEAMENTO CARD NELLA GRIGLIA
***********************************************/
/* TEMP:
   sarà spostato in styles/layout/grid.css */



/*******************************************
        CONTENUTO
*******************************************/

/*TITOLO*/

.card-prodotto__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);

    color: var(--color-text);

    display: -webkit-box;
    overflow: hidden;

    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-prodotto__title a {
    color: inherit;
    text-decoration: none;
}

/*DESCRIZIONE*/

.card-prodotto__description {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);

    color: var(--color-text-light);

    display: -webkit-box;
    overflow: hidden;

    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/***********************************************
                   FOOTER
***********************************************/

.card-prodotto__footer {
    margin-top: auto;

    padding-top:var(--space-sm);
}

.card-prodotto__footer p {
    margin: 0;
}

/*******************************************
                HOVER
*******************************************/

.card-prodotto:hover {  

    border-color: var(--color-primary);
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}


/******************************************
                RESPONSIVE
******************************************/

/*TABLET*/

@media (max-width: 1024px) {
    .card-prodotto__body {
        padding: var(--space-sm);
    }
}


/*MOBILE*/

@media (max-width: 767px) {
        .card-prodotto__body {
        padding: var(--space-sm);
    }
}