@charset "utf-8";

/* =================================================================ata
   1. SLIDER NINJA
   =================================================================== */
#slider { 
    width: 100%; 
    background: #121212; 
    margin: 0 auto; 
    overflow: hidden; 
    box-sizing: border-box; 
    z-index: 1; 
    aspect-ratio: 16 / 9; 
}

#slider .slider-inner { 
    margin: 0 auto; 
    font-size: 0; 
    position: relative; 
    box-sizing: border-box; 
}

#slider ul { 
    position: relative; 
    list-style: none; 
    padding: 0; 
    box-sizing: border-box; 
}

#slider li { 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: absolute; 
    font-size: 12px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    opacity: 0; 
    box-sizing: border-box; 
}

#slider li.ns-show { 
    opacity: 1; 
}

#slider .ns-img { 
    background-color: rgba(0,0,0,0); 
    background-size: contain; 
    overflow: hidden; 
    cursor: default; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-position: center center; 
}


/* ====================================================================
   2. SEZIONE NEWS OVERLAY (CONTENITORE GENERALE)
   =================================================================== */
.news-overlay {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;      
    gap: 15px;
    justify-content: center;
    align-items: stretch; 
    width: 80%;           
    margin: 10px auto; 
    z-index: 10;
    padding: 10px 0;
    box-sizing: border-box;
}

.news-title { 
    text-align: center; 
    display: block; 
    margin: 30px 0 0 0; 
    font-weight: bold; 
    color: #fc3; 
    font-size: 1.5em; 
}


/* ====================================================================
   3. SINGOLE CARD DELLE NEWS (LAYOUT E COMPATTEZZA)
   =================================================================== */
.news-card-overlay {
    flex: 1 1 250px;      
    max-width: 400px;     
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 15px;
    text-decoration: none !important;
    color: #fff !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Mantiene gli elementi compatti in alto, rimuovendo lo spazio vuoto in fondo */
    transition: all 0.2s ease-in-out;
    text-align: center;
    box-sizing: border-box;
    
    /* Pattern geometrico a griglia sottile sullo sfondo */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

.news-card-overlay:hover { 
    background-color: rgba(50, 50, 128, 0.8); 
    border-color: #ffcc00; 
    transform: translateY(-3px); 
}


/* ====================================================================
   4. CONTENUTO TESTUALE INTERNO ALLE CARD
   =================================================================== */
.news-content {
    flex-grow: 0; /* Impedisce al blocco di espandersi lasciando spazio vuoto */
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

.news-card-overlay h4 { 
    color: #ffcc00; 
    font-family: 'Oswald', sans-serif; 
    font-size: 1rem; 
    margin-top: 0;
    margin-bottom: 6px; /* Gestisce la distanza tra titolo e descrizione */
}

.news-card-overlay p { 
    font-size: 0.8rem;
	font-weight:lighter;
    color: #fff; 
    line-height: 1.4; 
    margin-top: 0;
    margin-bottom: 5px; /* Ridotto per chiudere lo spazio ed evitare vuoti finali */
}

.news-card-overlay .news-date { 
    display: block; 
    font-size: 0.85rem; 
    color: #ccc; 
    text-align: right; 
    font-style: italic; 
    align-self: flex-end;
    margin-top: 0; /* Sposta leggermente la data più in alto verso il testo */
    opacity: 0.9;
}


/* ====================================================================
   5. SFUMATURE E VARIANTI DI COLORE DELLE CARD
   =================================================================== */
.news-card-overlay.gradient-sunset {
    background: linear-gradient(135deg, rgba(80, 25, 15, 0.8), rgba(40, 15, 25, 0.8)),
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: auto, 20px 20px, 20px 20px !important;
    color: #fff !important;
}

.news-card-overlay.gradient-ocean {
    background: linear-gradient(135deg, rgba(10, 30, 50, 0.8), rgba(15, 20, 35, 0.8)),
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: auto, 20px 20px, 20px 20px !important;
    color: #fff !important;
}

.news-card-overlay.gradient-neon {
    background: linear-gradient(135deg, rgba(45, 10, 40, 0.8), rgba(20, 5, 35, 0.8)),
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: auto, 20px 20px, 20px 20px !important;
    color: #fff !important;
}

.news-card-overlay.gradient-gold {
    background: linear-gradient(135deg, rgba(50, 40, 10, 0.8), rgba(30, 20, 5, 0.8)),
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: auto, 20px 20px, 20px 20px !important;
    color: #fff !important;
}

.news-card-overlay.default {
    /* Mantiene lo stile standard predefinito */
}


/* ====================================================================
   6. RESPONSIVE DESIGN (DISPOSITIVI MOBILI E TABLET)
   =================================================================== */
@media screen and (max-width: 800px) {
    .news-overlay {
        width: 95%; 
    }
}

@media screen and (max-width: 480px) {
    #slider { 
        aspect-ratio: 1 / 1 !important; 
        height: auto; 
    }

    #slider .ns-img {
        background-size: cover; 
        background-position: center center;
    }
}