/* Contenitore e Tipografia */
.crp-lite-wrapper { margin-top: 2rem; clear: both; font-family: inherit; }
.crp-lite-hr { border: 0; border-top: 1px solid #eaeaea; margin-bottom: 1.5rem; }

/* Intestazione con etichetta (Mobile) */
.crp-lite-heading { 
    font-size: 18px; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #4a4a5a; 
    margin-bottom: 1.2rem; 
    line-height: 1.2; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* L'etichetta è nascosta di default */
.crp-lite-heading::after {
    content: "Scorri \2192"; 
    font-size: 11px;
    font-weight: 500;
    color: #77bb66; 
    text-transform: none;
    letter-spacing: 0.5px;
    padding-left: 10px;
    display: none; 
}

/* Appare solo se il contenuto eccede lo spazio (classe aggiunta via JS) */
.crp-lite-heading.has-scroll::after {
    display: inline-block;
}

/* Forza la scomparsa su desktop */
@media (min-width: 1024px) {
    .crp-lite-heading.has-scroll::after { display: none !important; }
}

/* =========================================
   LAYOUT MOBILE (Swipe Orizzontale Dinamico)
   ========================================= */
.crp-lite-grid { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: 12px; 
    padding: 0 0 15px 0; 
    margin: 0; 
    list-style: none; 
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
}
.crp-lite-grid::-webkit-scrollbar { display: none; }

/* Singolo Articolo (Mobile): Calcolo preciso per far sporgere la terza */
.crp-lite-item { 
    flex: 0 0 auto; 
    position: relative; 
    /* Calcolo: (100% dello spazio / 2.3) per vederne due intere e un pezzo della terza */
    width: calc((100% / 2) - 30px); 
    aspect-ratio: 1 / 1; 
    scroll-snap-align: start; 
    border-radius: 6px; 
    overflow: hidden; 
    background: #fff;
    border: 2px solid #77bb66; 
    box-shadow: 1px 1px 4px rgba(0,0,0,0.25); 
    transition: all 0.3s ease;
}

/* Testo in Overlay (Mobile) */
.crp-lite-title { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 20px 6px 6px 6px; 
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, transparent 100%);
    color: #ffffff; 
    font-size: 12px; 
    font-weight: bold; 
    text-align: center; 
    line-height: 1.2; 
    margin: 0;
    box-sizing: border-box;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}

/* =========================================
   LAYOUT DESKTOP (Griglia a capo a 5 colonne)
   ========================================= */
@media (min-width: 768px) {
    .crp-lite-heading::after {
        display: none; /* Nasconde "Scorri" su desktop */
    }
    .crp-lite-grid { 
        flex-wrap: wrap; 
        overflow-x: visible; 
        gap: 7px; 
        padding-bottom: 0;
    }
    .crp-lite-item { 
        width: 150px; 
        aspect-ratio: auto; /* Rimuove il vincolo mobile */
        height: 150px;
    }
    .crp-lite-title {
        font-size: 13px; 
        padding: 25px 6px 6px 6px;
    }
}

/* =========================================
   REGOLE COMUNI
   ========================================= */
.crp-lite-item:hover { 
    border-color: #4a9e59; 
    box-shadow: 0 0 12px rgba(45, 107, 56, 0.8); 
}
.crp-lite-link { display: block; width: 100%; height: 100%; text-decoration: none !important; }
.crp-lite-figure { margin: 0; padding: 0; width: 100%; height: 100%; }
.crp-lite-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}