/* Struttura a card per gli articoli del blog */
.blog-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 200px));
    gap: 1.5rem;
}

/* Fornisce un'altezza identica a tutte le card dell'articolo */
.blog-items .com-content-category-blog__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff; /* Colore di sfondo della card */
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

/* Spinge il pulsante "Leggi tutto" sempre sul fondo della card */
.blog-items .com-content-category-blog__item .links {
    margin-top: auto;
    padding-top: 1rem;
}

/* Rende le immagini responsive all'interno della card */
.blog-items .com-content-category-blog__item img {
    width: 100%;
    /*height: auto;
    object-fit: cover;*/
}

/* Trasforma il link Leggi Tutto in un pulsante */
.readmore a, .blog-item .readmore a, a.readmore {
    display: inline-block;
    background-color: #007bff; /* Colore di sfondo (Blu) */
    background-color: #ffffff; /* Colore di sfondo (Bianco) */
    color: #ffffff !important; /* Colore del testo (Bianco) */
    color: #0056b3 !important; /* Colore del testo (Bianco) */
    padding: 5px 10px;         /* Spazio interno (Altezza e Larghezza) */
    font-size: 12px;           /* Dimensione del testo */
    font-weight: normal;       /* Testo in grassetto */
    text-decoration: none;     /* Rimuove la sottolineatura standard */
    border-radius: 5px;        /* Arrotondamento dei bordi */
    transition: background 0.3s ease; /* Effetto di transizione fluido */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Leggera ombra */
}

/* Effetto visivo quando l'utente passa il mouse sul pulsante */
.readmore a:hover, .blog-item .readmore a:hover, a.readmore:hover {
    background-color: #0056b3; /* Il blu diventa più scuro al passaggio */
    color: #ffffff !important;
    text-decoration: none;
}