@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&family=EB+Garamond:wght@400&display=swap');


/* Impedisce la scrollbar orizzontale */
html, body {
    overflow-x: hidden; /* Nasconde lo scorrimento orizzontale */
    width: 100vw; /* Assicura che il sito non superi la larghezza dello schermo */
}

body {
    background-color: #f5f5f5; /* Sfondo bianco */
    margin: 0;
    font-family: 'EB Garamond', serif; /* Font principale per il testo */
}
body {
    color: #666666; /* Grigio scuro per il testo */
}

/* Assicura che tutti i titoli e paragrafi ereditino il colore */
h1, h2, h3, h4, h5, h6, p, span, a {
    color: #666666; /* Grigio scuro */
}
s

.container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Contenitore del logo */
.logo-container {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1000;
}

/* Logo nello stato normale */
.logo {
    width: 200px; /* Mantiene la dimensione fissa */
    transition: opacity 0.3s ease-in-out; /* Mantiene solo la transizione di trasparenza */
}

/* Logo di scroll nascosto inizialmente */
.scroll-logo {
    opacity: 0; 
    position: absolute;
    top: 0;
    left: 0;
	width: 30px;
}

/* Transizione di opacità quando si scrolla */
.scrolled .default-logo {
    opacity: 0; /* Il primo logo scompare */
}

.scrolled .scroll-logo {
    opacity: 1; /* Il secondo logo appare */
}

/* Logo attivato quando si scrolla */
.scrolled .default-logo {
    opacity: 0;
}

.scrolled .scroll-logo {
    opacity: 1;
}

/* Video a tutta larghezza */
.full-width-video {
    width: 100vw;
    max-height: 80vh;
    object-fit: cover;
}

/* Sezione di testo */
.text-section {
    width: 80%; /* Margine ai lati per evitare troppo testo esteso */
    margin: 40px auto; /* Centrare il blocco */
    display: flex;
    flex-direction: column;
}

/* Titolo sopra le due colonne */
.text-title {
    font-family: 'Roboto', sans-serif; /* Font per il titolo */
    font-weight: 100; /* Versione Thin */
    font-size: 1.8em; /* Grandezza regolabile */
    text-align: left; /* Sbandierato a sinistra */
    margin-bottom: 20px;
	letter-spacing: 3px; /* Aumenta la spaziatura tra le lettere */
}

/* Testo a due colonne */
.text-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Due colonne per il testo */
    gap: 50px; /* Spazio tra le colonne */
    font-family: 'EB Garamond', serif;
    font-size: 1.2em;
    text-align: justify;
}

/* Media Query per 1 colonna su schermi piccoli */
@media (max-width: 1024px) {
    .text-content {
        grid-template-columns: 1fr; /* Una colonna su schermi piccoli */
    }
}

/* Griglia con tre video per riga - Con margini laterali */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tre colonne */
    gap: 10px;
    width: calc(100vw - 100px); /* Riduce la larghezza per creare margini laterali */
    padding: 0;
    margin: 0 auto; /* Centra la griglia */
    box-sizing: border-box;
}
.video-grid a {
    display: block;
    width: 100%;
}

.video-grid video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Media Query per 2 colonne */
@media (max-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Media Query per 1 colonna */
@media (max-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Griglia con due video per riga - Aggiunge margine bianco a destra */
.video-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: calc(100vw - 18px); /* Riduciamo la larghezza per creare spazio a destra */
    padding: 0;
    margin-left: 0; /* Mantiene l'allineamento a sinistra */
    margin-right: auto; /* Spinge la griglia verso sinistra e lascia margine a destra */
    box-sizing: border-box;
}


/* Video dentro la griglia */
.video-grid-2 a,
.video-grid-2 video {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.video-grid-2 img {
    width: 100%; /* L'immagine si adatta alla larghezza del contenitore */
    height: auto; /* Mantiene le proporzioni corrette */
    display: block;
    object-fit: cover; /* Assicura che l'immagine riempia lo spazio senza deformarsi */
}

/* Media Query per 1 colonna su schermi piccoli */
@media (max-width: 1024px) {
    .video-grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Importa Roboto Light 300 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

/* Barra delle Breaking News */
.breaking-news {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Altezza regolabile */
    background-color: black;
    color: white;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 2000;
}

/* Contenitore del testo scorrevole */
.news-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* Testo che scorre all'infinito */
.news-content {
    display: flex;
    white-space: nowrap;
    animation: scrollText 60s linear infinite; /* Più lento */
}

/* Mantiene le breaking news bianche */
.news-content {
    color: white !important;
}
.news-content a {
    color: white !important;
}

/* Ripetizione del testo per effetto carosello */
.news-content span {
    display: flex;
}

/* Stile del testo */
.news-content a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500; /* Roboto Medium */
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Aumenta la spaziatura tra le lettere */
    margin-right: 50px; /* Spazio tra le notizie */
}



.news-content a:hover {
    text-decoration: underline;
}

/* Link specifici per la barra delle breaking news */
.news-content a {
    color: white !important; /* I link saranno sempre bianchi nella barra */
    text-decoration: none;
}

.news-content a:visited {
    color: white !important;
}

.news-content a:active {
    color: white !important;
}

.news-content a:hover {
    color: white !important;
    text-decoration: underline;
}

/* Animazione scorrevole */
@keyframes scrollText {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Spazio extra per evitare che il logo venga coperto dalla barra */
.logo {
    margin-top: 0px; /* Sposta il logo più in basso per non sovrapporsi alla barra */
}

/* Video singolo a tutta larghezza senza spazio extra */
.single-video {
    width: 100vw; /* Occupa tutta la larghezza dello schermo */
    height: auto; /* Altezza automatica per evitare spazi vuoti */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Il video ora riempie lo spazio senza lasciare bande bianche */
.single-video video {
    width: 100vw;
    height: auto; /* Cambia da 100% a auto per evitare di forzare lo spazio */
    object-fit: cover;
}

/* Griglia con due video */
.video-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Due colonne */
    gap: 10px;
    width: 100vw;
    padding: 10px;
    box-sizing: border-box;
}

.video-grid-2 a {
    display: block;
    width: 100%;
}

.video-grid-2 video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Media Query per 1 colonna su schermi piccoli */
@media (max-width: 1024px) {
    .video-grid-2 {
        grid-template-columns: 1fr; /* Una colonna su schermi piccoli */
    }
}

/* Link normali su sfondo bianco */
a {
    color: black; /* Link sempre neri */
    text-decoration: none; /* Rimuove la sottolineatura */
}

a:visited {
    color: black;
}

a:active {
    color: black;
}

a:hover {
    color: black;
    text-decoration: underline; /* Effetto al passaggio del mouse */
}

/* Margini personalizzabili per dividere sezioni */
.separator-large {
    height: 80px; /* Margine grande */
}

/* Linea di separazione sottile con colore forzato */
.separator-line {
    width: 100%; /* Occupa tutta la larghezza disponibile */
    max-width: 80%; /* Imposta la larghezza massima (uguale alla larghezza massima del testo) */
    height: 1px; /* Altezza sottile */
    background-color: #aaaaaa !important; /* Grigio scuro forzato */
    margin: 40px auto; /* Centra la linea e aggiunge spazio sopra e sotto */
}


/* Contenitore video con didascalia sopra */
.video-container {
    display: flex;
    flex-direction: column; /* Imposta il layout verticale */
    align-items: flex-start; /* Allinea la didascalia a sinistra */
}

/* Testo della didascalia sopra il video, ancora più leggibile */
.video-caption {
    font-family: 'Roboto', sans-serif; /* Font Roboto */
    font-size: 14px; /* Testo più grande */
    font-weight: 600; /* Roboto SemiBold per maggiore impatto */
    text-transform: uppercase; /* Sempre in maiuscolo */
    letter-spacing: 2px; /* Maggiore spaziatura tra lettere */
    color: #666666; /* Testo nero */
    text-align: left;
    margin-bottom: 5px; /* Distanza tra la didascalia e il video */
    margin-left: 30px; /* Maggiore margine a sinistra */
    padding: 3px 0; /* Piccolo padding per aria */
}
/* Stile per il titolo centrato */
.text-title-center {
    text-align: center;
}


.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.image-container {
    flex: 1 1 calc(33% - 20px);
    max-width: calc(33% - 20px);
    box-sizing: border-box;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.image-caption {
    text-align: center;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Tablet: una per riga */
@media (max-width: 1024px) {
    .image-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Mobile: anche qui una per riga (già incluso sopra, ma lo lasciamo per chiarezza) */
@media (max-width: 1024px) {
    .image-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


.single-image {
    width: 100%;
    margin-bottom: 30px;
}

.single-image img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-note {
    text-align: center;
    font-size: 14px;
    color: #777;
    margin: 60px 20px 60px 20px;
    line-height: 1.6;
}


/* Di default mostra solo la versione desktop */
.desktop-video {
    display: block;
}
.mobile-video {
    display: none;
}

/* Su mobile mostra solo la versione verticale */
@media (max-width: 1024px) {
    .desktop-video {
        display: none;
    }
    .mobile-video {
        display: block;
    }
}


.video-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: calc(100vw - 100px);
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

.video-grid-2 video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Responsive: su schermi fino a 768px (tablet), metti i video uno sopra l'altro */
@media (max-width: 1024px) {
    .video-grid-2 {
        grid-template-columns: 1fr;
    }
}


#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  color: black;
  text-align: center;
  padding: 1em;
  font-family: sans-serif;
  font-size: 14px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  z-index: 9999;
  transition: opacity 0.5s ease;
}

#cookie-banner.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Video singolo a tutta larghezza senza spazio extra */
.single-video {
    width: 100vw; /* Occupa tutta la larghezza dello schermo */
    height: auto; /* Altezza automatica per evitare spazi vuoti */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Il video ora riempie lo spazio senza lasciare bande bianche */
.single-video video {
    width: 100vw;
    height: auto; /* Cambia da 100% a auto per evitare di forzare lo spazio */
    object-fit: cover;
}

.full-width-logo-section {
    width: 100vw;
    margin: 60px 0;
    padding: 0 5vw;
    box-sizing: border-box;
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.logo-grid a {
    display: block;
    max-width: 160px;
    width: 100%;
    transition: transform 0.3s ease;
}

.logo-grid img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(95%);
    transition: filter 0.4s ease, transform 0.3s ease;

    /* Maschera su tutti i lati */
    mask-image: 
        linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: 
        linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);

    mask-composite: intersect;
    -webkit-mask-composite: destination-in;
}

.logo-grid img:hover {
    filter: grayscale(0%) brightness(100%);
    transform: scale(1.05);
}

.center-text {
  text-align: center;
  padding-left: 15vw;
  padding-right: 15vw;
}