/* Reset e Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: #000 !important;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
}

.news-page {
    min-height: 100vh;
    /* Gradiente "Vignette" per focalizzare l'attenzione al centro */
    background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);
    padding: 150px 10% 100px 10%;
    position: relative;
}

/* Titolo Sezione Verticale: Chronicles */
.section-title {
    position: fixed; /* Rimane fisso mentre l'utente scorre le notizie */
    left: 40px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg); /* Ruotato di 90 gradi */
    transform-origin: left center;
    
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.5rem; /* Spaziatura estrema "Luxury" */
    color: rgba(212, 175, 55, 0.2); /* Oro soffuso, quasi impercettibile */
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none; /* Non blocca i click sulle notizie */
}

/* Ottimizzazione del container per non coprire il titolo */
.news-container {
    max-width: 900px;
    margin-left: 120px; /* Aumentiamo il margine per lasciare spazio al titolo verticale */
    position: relative;
    border-left: 1px solid rgba(212, 175, 55, 0.1);
    padding-left: 60px;
}

.news-item {
    margin-bottom: 100px; /* Grande spazio tra una notizia e l'altra */
    position: relative;
}

/* Punto di connessione sulla linea */
.news-item::before {
    content: "";
    position: absolute;
    left: -64.5px;
    top: 5px;
    width: 8px;
    height: 8px;
    background: #D4AF37;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.news-meta {
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.news-date {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: #D4AF37;
    font-weight: 300;
}

.news-category {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 10px;
}

.news-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.2;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* Transizione morbida e lussuosa */
}

.news-item:hover .news-title {
    color: #D4AF37;
}

.news-excerpt {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 700px;
}

.news-link {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #D4AF37;
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

.news-link:hover {
    letter-spacing: 5px;
    color: #D4AF37;
}

/* Stile speciale per l'ultima notizia (Featured) */
.news-item.featured .news-title {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Titolo più grande e impattante */
    font-style: italic;
    color: #D4AF37; /* L'ultima notizia "brilla" in oro */
    line-height: 1.1;
}

.news-item.featured .news-excerpt {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
    .news-container {
        margin-left: 0; /* Su mobile il titolo è in alto, quindi riprendiamo lo spazio */
        padding-left: 30px;
    }

    .news-item::before {
        left: -34.5px;
    }

    .news-title {
        font-size: 1.8rem;
    }

    .news-item.featured .news-title {
        font-size: 2.2rem;
    }

    .news-excerpt {
        font-size: 1.1rem;
    }

    .section-title {
        position: relative;
        transform: none;
        left: 0;
        top: 0;
        text-align: center;
        letter-spacing: 0.8rem;
        margin-bottom: 60px;
        display: block;
        opacity: 0.6;
    }
}