:root {
    /* Dimensioni del testo */
    --font-size-global: 14px;
    --font-size-title: 24px;
    --font-weight-title: 700;
    --font-size-status: 14px;

    /* Colori principali (neutri, facilmente personalizzabili) */
    --color-primary: #3498db;
    /* Blu standard */
    --color-secondary: #2c3e50;
    /* Grigio scuro */
    --color-white: #ffffff;

    /* Colori elementi specifici */
    --color-category: #ffffff;
    /* Colore testo categorie */
    --color-tag: #ffffff;
    /* Colore testo tag */
    --color-dot: #ffffff;
    /* Colore pallini navigazione */

    /* Sfondi e testi */
    --color-bg-slide-content: rgba(0, 0, 0, 0.5);
    /* Sfondo overlay contenuto */
    --color-title: #ffffff;
    /* Colore titolo */
}

/* 
 * PERSONALIZZAZIONE:
 * Per personalizzare i colori in base al tema del sito, 
 * aggiungi un CSS personalizzato che sovrascriva queste variabili.
 * Esempio:
 * .next-labs-slider {
 *     --color-primary: #your-color;
 *     --color-secondary: #your-color;
 * }
 */

/* Stili per lo slider */
.next-labs-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.next-labs-slider .slide {
    position: relative;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
}

.next-labs-slider .slide-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: var(--color-white);
    background-color: var(--color-bg-slide-content);
    padding: 5px 7px;
    border-radius: 5px;
}

/* Stile per il gradiente overlay */
.next-labs-slider .slide-with-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Quando si usa il gradiente, il contenuto dello slide non necessita di sfondo proprio */
.next-labs-slider .slide-with-gradient .slide-content {
    background-color: transparent;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 15px 10px;
    box-sizing: border-box;
    z-index: 1;
    text-align: center;
}

/* Miglioramento leggibilità titoli con gradiente */
.next-labs-slider .slide-with-gradient h2 {
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    margin-bottom: 8px;
}

.next-labs-slider .slide-with-gradient h2 a {
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Stili di base per il titolo, l'allineamento verrà sovrascritto inline */
.next-labs-slider h2 {
    text-align: center;
}

/* Stili specifici per l'allineamento del contenuto */
.next-labs-slider .slide-content.align-left {
    text-align: left;
    left: 10px;
    right: auto;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.next-labs-slider .slide-content.align-center {
    text-align: center;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    padding-left: 5px;
    padding-right: 5px;
}

.next-labs-slider .slide-content.align-right {
    text-align: right;
    left: auto;
    right: 10px;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.next-labs-slider h2 a {
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-title);
}

/* Categorie e tag con stesso stile di base */
.slide-categories a,
.slide-tags a {
    color: var(--color-white);
    text-decoration: underline;
    font-size: var(--font-size-status);
    margin-right: 5px;
}

/* Pseudo-elementi per prefissi */
.slide-category-link::before {
    content: "•";
    display: inline-block;
    margin-right: 5px;
    font-size: 20px;
    vertical-align: middle;
}

.slide-tag-link::before {
    content: "#";
    display: inline-block;
    margin-right: 5px;
    font-size: var(--font-size-status);
    vertical-align: middle;
}

/* Stili per le frecce di navigazione */
.next-labs-slider .slick-prev,
.next-labs-slider .slick-next {
    width: 50px !important;
    height: 50px !important;
    z-index: 10;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Posizionamento delle frecce */
.next-labs-slider .slick-prev {
    left: 25px;
}

.next-labs-slider .slick-next {
    right: 25px;
}

/* Stile delle frecce */
.next-labs-slider .slick-prev:before,
.next-labs-slider .slick-next:before {
    font-size: 60px !important;
    content: '\2039' !important;
    color: var(--color-white);
    opacity: 0.8;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

.next-labs-slider .slick-next:before {
    content: '\203A' !important;
}

/* Stili hover per le frecce */
.next-labs-slider .slick-prev:hover,
.next-labs-slider .slick-next:hover,
.next-labs-slider .slick-prev:focus,
.next-labs-slider .slick-next:focus {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.next-labs-slider .slick-prev:hover:before,
.next-labs-slider .slick-next:hover:before {
    color: var(--color-white) !important;
    opacity: 1;
}

/* Rimuovi stili indesiderati durante focus/active */
.next-labs-slider .slick-prev:active,
.next-labs-slider .slick-next:active,
.next-labs-slider .slick-prev:focus-visible,
.next-labs-slider .slick-next:focus-visible {
    outline: none !important;
    border-color: transparent !important;
    background-color: transparent !important;
}

/* Stili per i punti di navigazione */
.next-labs-slider .slick-dots {
    display: block !important;
    bottom: 15px;
    z-index: 10;
    position: absolute;
}

.next-labs-slider .slick-dots li button {
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

.next-labs-slider .slick-dots li button:before {
    color: var(--color-dot);
    font-size: 12px;
    opacity: 0.8;
}

.next-labs-slider .slick-dots li.slick-active button:before {
    color: var(--color-dot);
    opacity: 1;
}

/* Rimuovi il rettangolo di focus su tutti gli elementi interattivi */
.next-labs-slider:focus,
.next-labs-slider *:focus,
.next-labs-slider .slick-slide:focus,
.next-labs-slider .slick-arrow:focus,
.next-labs-slider .slick-dots li button:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Rimuovi qualsiasi background colorato */
.next-labs-slider .slick-arrow,
.next-labs-slider .slick-arrow:hover,
.next-labs-slider .slick-arrow:focus {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Responsività */
@media (max-width: 768px) {

    /* Stile per tablet */
    .next-labs-slider .slide {
        height: 400px;
        /* Riduzione moderata dell'altezza */
    }

    .next-labs-slider .slide-content {
        bottom: 10px;
        left: 10px;
        padding: 5px;
        max-width: 90%;
    }

    .next-labs-slider h2 a {
        font-size: 18px;
    }

    .slide-categories a,
    .slide-tags a {
        font-size: 12px;
    }

    .next-labs-slider .slick-prev:before,
    .next-labs-slider .slick-next:before {
        font-size: 40px !important;
        /* Frecce più piccole sui dispositivi mobili */
    }

    /* Regola la posizione delle frecce su mobile */
    .next-labs-slider .slick-prev {
        left: 15px;
    }

    .next-labs-slider .slick-next {
        right: 15px;
    }
}

/* Stili specifici per smartphone */
@media (max-width: 576px) {
    .next-labs-slider .slide {
        height: 320px;
        /* Altezza minima sicura */
    }

    /* Dimensione del titolo */
    .next-labs-slider h2 a {
        font-size: 15px !important;
        line-height: 1.2 !important;
        display: block;
        word-wrap: break-word;
    }
    
    /* Stili specifici per gradiente su mobile */
    .next-labs-slider .slide-with-gradient::after {
        height: 85%;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
    }
    
    .next-labs-slider .slide-with-gradient .slide-content {
        padding: 10px 5px;
    }

    /* Contenuto con padding ottimizzato */
    .next-labs-slider .slide-content {
        bottom: 10px;
        padding: 7px;
        background-color: rgba(0, 0, 0, 0.7);
        /* Sfondo più scuro per leggibilità */
    }
    
    /* Stili responsive specifici per allineamento */
    .next-labs-slider .slide-content.align-left {
        left: 10px;
        right: auto;
        text-align: left;
        max-width: calc(100% - 20px);
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .next-labs-slider .slide-content.align-center {
        left: 10px;
        right: 10px;
        text-align: center;
        max-width: calc(100% - 20px);
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .next-labs-slider .slide-content.align-right {
        left: auto;
        right: 10px;
        text-align: right;
        max-width: calc(100% - 20px);
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Nessuna abbreviazione del titolo */
    .next-labs-slider h2 {
        margin: 0 0 3px 0;
        padding: 0;
    }

    /* Lasciamo più spazio visivo tra testo e frecce */
    .next-labs-slider .slick-prev {
        left: 10px;
    }

    .next-labs-slider .slick-next {
        right: 10px;
    }

    /* Rendere le frecce più trasparenti */
    .next-labs-slider .slick-prev:before,
    .next-labs-slider .slick-next:before {
        font-size: 40px !important;
        opacity: 0.7 !important;
    }

    /* Riduciamo lo spazio tra elementi */
    .next-labs-slider .slide-categories,
    .next-labs-slider .slide-tags {
        margin-top: 2px;
        line-height: 1.2;
    }
}

/* Per schermi ancora più piccoli */
@media (max-width: 375px) {
    .next-labs-slider .slide {
        height: 280px;
    }

    .next-labs-slider h2 a {
        font-size: 14px !important;
    }

    .next-labs-slider .slick-prev:before,
    .next-labs-slider .slick-next:before {
        font-size: 35px !important;
    }

    .next-labs-slider .slide-content {
        padding: 5px;
    }
}