:root { --red: #4a0404; --aqua: #a8c4c0; --giallo: #f1b800; --nero: #000000; }

body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; color: var(--nero); }
body { -ms-overflow-style: none; scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }
html { scroll-behavior: smooth; }

.editorial-header { position: sticky; top: 0; background: white; padding: 20px; border-bottom: 2px solid var(--nero); display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.logo-container { display: flex; flex-direction: column; }
/* Logo ROSARIOSPINA - Gestione dinamica */
.main-title { margin: 0; line-height: 0.8; }
.main-title a { 
    font-family: 'Anton', sans-serif; 
    font-size: 3.2rem !important; /* DIMENSIONE PC: Grande */
    text-decoration: none; 
    color: black; 
}

@media (max-width: 600px) {
    .main-title a { 
        font-size: 1.8rem !important; /* DIMENSIONE MOBILE: Più piccolo */
    }
}
.subtitle { font-size: 1.0rem; letter-spacing: 2px; margin: 0; text-transform: uppercase; font-weight: bold; }
.menu-icon { font-size: 2.5rem; cursor: pointer; }
.hidden-menu { display: none; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(241, 184, 0, 0.9); z-index: 2000; flex-direction: column; justify-content: center; align-items: center; }
.hidden-menu.active { display: flex; }
.hidden-menu ul { list-style: none; padding: 0; }
.hidden-menu li { margin: 20px 0; }
.hidden-menu li a { color: black; font-family: 'Anton', sans-serif; font-size: 1.6rem; text-transform: uppercase; text-decoration: none; }

.marquee-container { width: 100%; overflow: hidden; background: linear-gradient(90deg, var(--aqua), var(--giallo)); padding: 20px 0; font-family: 'Anton', sans-serif; font-size: 1.4rem; text-transform: uppercase; display: flex; }
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-50%, 0); } }
.marquee-text { display: flex; white-space: nowrap; animation: marquee 30s linear infinite; }

.gallery-grid { display: flex !important; flex-direction: column !important; gap: 40px !important; padding: 0 15px !important; max-width: 800px !important; margin: 0 auto !important; }
.gallery-item img { width: 100% !important; height: auto !important; border: 2px solid var(--nero); display: block; margin: 0 0 15px 0; opacity: 0; transform: translateY(30px); transition: all 1.8s ease-out; }
.gallery-item img.visible { opacity: 1; transform: translateY(0); }
/* Titoli Serie Home - Gestione dinamica */
.gallery-item h3 { 
    font-family: 'Anton', sans-serif; 
    font-size: 2.0rem !important; /* DIMENSIONE PC: Più grande */
    margin: 0 0 10px 0; 
    text-align: left; 
}

@media (max-width: 600px) {
    .gallery-item h3 { 
        font-size: 1.3rem !important; /* DIMENSIONE MOBILE: Più piccolo */
    }
}

/* Il contenitore che scorre */
.scroll-gallery { 
    display: flex !important; 
    flex-direction: row !important; 
    overflow-x: auto !important; 
    
    /* Spazio bianco tra le immagini */
    gap: 40px !important; 
    
    /* Padding per non far attaccare le foto ai bordi dello schermo */
    padding: 0 40px !important; 
    
    /* Altezza che occupa tutto lo schermo, garantendo visibilità */
    height: 80vh !important; 
    
    align-items: center !important; 
    
    /* La magia: forza lo scorrimento a scattare sull'immagine successiva */
    scroll-snap-type: x mandatory !important; 
    -webkit-overflow-scrolling: touch; /* Per fluidità su iPhone/Android */
}

/* Le singole immagini */
.scroll-gallery img { 
    max-height: 100% !important; 
    width: auto !important; 
    object-fit: contain !important; 
    
    /* Manteniamo il tuo bordo nero */
    border: 2px solid var(--nero) !important; 
    
    /* Aggiungiamo un bordo bianco extra di 5px */
    outline: 8px solid white !important; 
    
    /* Forza lo scatto al centro */
    scroll-snap-align: center !important; 
    flex-shrink: 0 !important; 
}
.page-title { font-family: 'Anton', sans-serif !important; font-size: 2.2rem !important; padding-left: 40px; margin-bottom: 20px; }

/* Definiamo i blocchi base */
.content-block-terracotta { background: var(--giallo); padding: 80px 20px; color: var(--nero); }
.content-block-ocra { background: var(--aqua); padding: 80px 20px; color: black; }
.content-block-black { background: var(--nero); padding: 80px 20px; color: white; text-align: center; }

/* Regola specifica che sovrascrive tutto su mobile */
@media (max-width: 600px) {
    .content-block-terracotta, 
    .content-block-ocra, 
    .content-block-black { 
        padding: 30px 15px !important; /* Molto più piccolo */
    }
}

@media (max-width: 600px) {
    .content-block-terracotta .events-slider,
    .content-block-ocra .events-slider {
        padding: 0 !important; /* Rimuove lo spazio extra dentro il blocco */
    }
    
    .content-block-terracotta h2,
    .content-block-ocra h2 {
        margin-bottom: 20px !important; /* Riduce lo spazio sotto il titolo */
    }
}/* Slider - Aggiunto padding-bottom per il bordo bianco dell'immagine */
.events-slider { display: flex; overflow-x: auto; gap: 40px; padding: 20px; }

/* Card - Manteniamo la struttura */
.event-card-item { flex: 0 0 300px; text-decoration: none; color: black; display: flex; flex-direction: column; }

/* Immagine - Qui applichiamo il bordo nero + cornice bianca */
.event-image-box { 
    width: 100%; 
    height: 300px; 
    margin-bottom: 15px; 
    display: flex;         /* Aggiunto per centrare l'immagine */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center;     /* Centra verticalmente */
    background: transparent; /* Rimosso il bianco di sfondo se c'era */
}

.event-image-box img { 
    max-width: 100%;       /* L'immagine non supera la larghezza della card */
    max-height: 100%;      /* L'immagine non supera l'altezza della card */
    width: auto;           /* Mantiene le proporzioni */
    height: auto;          /* Mantiene le proporzioni */
    object-fit: contain;   /* La mostra intera */
    
    border: 2px solid var(--nero); 
    outline: 5px solid white; 
    display: block; 
}/* Titoli - Rimosso il maiuscolo forzato (text-transform: none) */
.event-card-item h3 { 
    font-family: 'Anton', sans-serif; 
    font-size: 1.4rem; 
    margin: 0; 
    text-transform: none; /* Ora rispetta come lo scrivi nell'HTML */
}

h2 { font-family: 'Anton', sans-serif; font-size: 1.6rem; margin-bottom: 20px; }
.museum-footer { padding: 20px; text-align: center; font-size: 0.8rem; text-transform: uppercase; }
/* --- 1. OTTIMIZZAZIONE MOBILE DEFINITIVA --- */
@media (max-width: 600px) {
    .scroll-gallery { gap: 20px !important; padding: 0 20px !important; height: 60vh !important; }
    .scroll-gallery img { max-height: 65% !important; border: 2px solid var(--nero); }
    .page-title { font-size: 1.6rem !important; padding-left: 20px !important; }
    
    /* Blocchi colorati ridotti */
    .content-block-terracotta, .content-block-ocra, .content-block-black { 
        padding: 40px 20px !important; 
    }
}

/* --- 2. INTERAZIONE E CLICCABILITA' --- */
.event-card-item { cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease; }
.event-card-item:hover { transform: scale(1.02); opacity: 0.8; }
.event-card-item:active { opacity: 0.7; transform: scale(0.98); }

/* --- 3. BARRA DI SCORRIMENTO (HOME E PAGINE INTERNE) --- */
.events-slider, .scroll-gallery {
    scrollbar-width: thin;
    scrollbar-color: var(--nero) white; 
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.events-slider::-webkit-scrollbar, .scroll-gallery::-webkit-scrollbar { height: 8px; }
.events-slider::-webkit-scrollbar-track, .scroll-gallery::-webkit-scrollbar-track { background: white; }
.events-slider::-webkit-scrollbar-thumb, .scroll-gallery::-webkit-scrollbar-thumb { 
    background-color: var(--nero); 
    border-radius: 4px; 
    border: 1px solid white; 
}
.cta-button { 
    display: inline-block; 
    margin-top: 20px; 
    padding: 10px 20px; 
    background: var(--nero); 
    color: white; 
    text-decoration: none; 
    font-family: 'Anton', sans-serif; 
}
.instagram-link { 
    color: white; 
    text-decoration: underline; 
    font-weight: bold; 
    transition: color 0.3s ease;
}

.instagram-link:hover { 
    color: var(--giallo); /* Cambia colore quando ci passi sopra */
}
.responsive-img {
    max-width: 90%;       /* Non supererà mai il 90% della larghezza dello schermo */
    height: auto;         /* Mantiene le proporzioni corrette */
    border: 2px solid var(--nero);
    display: block;
    margin: 0 auto 20px auto; /* Centrata automaticamente */
}
/* Effetto feedback al tocco */
.event-card-item:active {
    opacity: 0.7;
    transition: opacity 0.1s ease;
}
/* Stile per il tasto di chiusura del menu a tendina */
.close-menu {
    position: absolute;
    top: 25px;       /* Distanza dal bordo superiore */
    right: 30px;     /* Distanza dal bordo destro */
    font-size: 38px;  /* Dimensione della X */
    font-family: Arial, sans-serif;
    cursor: pointer;
    color: #000000;  /* Colore nero di base per le pagine con sfondo bianco */
    z-index: 9999;   /* Forza la X a stare sopra a qualsiasi altro elemento */
    line-height: 1;
}

/* Nella pagina Bio (che ha lo sfondo nero), la X deve diventare bianca per contrasto */
.bio-page .close-menu {
    color: #ffffff !important;
}
/* ==========================================================================
   BLOCCO UNICO PER MOBILE (Solo per schermi fino a 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. La galleria resta in riga (con snapping magnetico opzionale) */
    .scroll-gallery {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 15px !important;
        padding: 10px 20px !important; /* Ho dato 20px ai lati per non far appiccicare le foto ai bordi dello schermo */
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scroll-snap-type: x mandatory !important; /* Rende lo scorrimento fluido a scatti */
        scroll-behavior: smooth !important;
    }

    /* Forza le singole foto a posizionarsi al centro durante lo scorrimento su MOBILE */
    .scroll-gallery img {
        scroll-snap-align: center !important;
        flex-shrink: 0 !important;
        width: 85vw !important; /* Lascia intravedere la foto successiva */
        height: auto !important;
        object-fit: contain !important;
        margin-bottom: 0 !important; 
    }

    /* 2. Margini interni (padding) a destra e a sinistra per i testi delle mostre su MOBILE */
    .text-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: justify !important; /* Mantiene il testo pulito e bilanciato */
    }
}
/* ==========================================================================
   PAGINA BIO CONCETTUALE (SFONDO NERO) - REVISIONE COLORE CORRETTA
   ========================================================================= */

/* 1. Sfondo Nero ASSOLUTO su tutta la pagina, inclusi header, footer e qualsiasi contenitore principale */
body.bio-page, 
.bio-page header,
.bio-page .editorial-header,
.bio-page .site-header,
.bio-page footer,
.bio-page .museum-footer {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* 2. Contenitore della Bio */
.bio-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* Lascia il giusto spazio a header e footer */
    padding: 40px 10%;   
    box-sizing: border-box;
    background-color: #000000 !important;
}

/* 3. Testo della Bio (Gabbia e Spazi) */
.bio-text {
    max-width: 550px;       
    font-size: 1.15rem;      
    line-height: 2;         
    letter-spacing: 0.05em; 
}

/* FORZA IL BIANCO PURO E LA GIUSTIFICAZIONE DIRETTAMENTE SUI PARAGRAFI */
.bio-text p {
    color: #ffffff !important; /* Forza ogni singola riga in bianco lucido */
    text-align: justify;       /* Forza la giustificazione del testo */
    margin-bottom: 1.8rem;  
}

/* 4. Forza i testi del Logo, Sottotitolo, Hamburger, X di chiusura e Footer in Bianco */
.bio-page header h1,
.bio-page header h1 a,
.bio-page .main-title a,
.bio-page .subtitle,
.bio-page .menu-icon,
.bio-page .close-menu,
.bio-page footer p,
.bio-page .museum-footer p {
    color: #ffffff !important; 
}

/* 5. Gestione della Tendina del Menu nella Bio */
.bio-page #full-menu {
    background-color: #000000 !important; 
}

/* Nasconde la tendina finché non viene attivata col click */
.bio-page #full-menu:not(.active) {
    display: none !important; 
}

.bio-page #full-menu ul li a {
    color: #ffffff !important; /* Testi interni alla tendina bianchi */
}

.bio-page #full-menu ul li a:hover {
    color: #a0a0a0 !important; 
}
/* Ottimizzazione Mobile */
@media screen and (max-width: 768px) {
    .bio-text p {
        font-size: 1rem;    
        line-height: 1.8;
    }
    .bio-container {
        padding: 40px 5%;
    }
}
#contact {
    scroll-margin-top: 80px; /* Spinge l'atterraggio del link un po' più su del banner nero per farlo vedere tutto */
}
/* ==========================================================================
   LIGHTBOX UNIVERSALE PER LE IMMAGINI (Ingrandimento al Click)
   ========================================================================== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98); /* Sfondo bianco quasi totale */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: zoom-out;
    touch-action: none;
}
/* Quando il lightbox si attiva */
.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* L'immagine ingrandita */
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    user-select: none;
}

/* Rende tutte le immagini del sito "cliccabili" visivamente con la lente d'ingrandimento */
.gallery-item img, 
.scroll-gallery img {
    cursor: zoom-in;
}