/* SITO_GIONA/static/css/00_global.css - ROOT & GLOBALI (Mobile-First V4) */

:root {
    --color-neon-magenta: #C060FF;    
    --color-neon-blue: #00BFFF;       
    --color-dark-void: #030303;     
    --color-text-light: #E0E0E0;      
    --color-glass-bg: rgba(255, 255, 255, 0.05);
    --color-glass-border: rgba(255, 255, 255, 0.15);
    --color-hover-glow: rgba(192, 96, 255, 0.4); 
}

html { 
    scroll-behavior: smooth; 
    height: 100%; 
}

body {
    margin: 0; 
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #000000 !important; 
    color: var(--color-text-light);
    line-height: 1.6;
    width: 100%; 
    max-width: 100vw; 
    overflow-x: hidden; /* Mantenuto per prevenire lo scroll orizzontale */
    min-height: 100%; 
    box-sizing: border-box; 
}

/* Applica box-sizing a tutti gli elementi per coerenza */
*, *::before, *::after {
    box-sizing: inherit; 
}


/* Stili Testo Globale (Desktop Base) */
h2 { font-size: 3rem; font-weight: 800; color: white; margin-bottom: 0.5rem; }
.section-subtitle { font-size: 1.25rem; color: #999; margin-bottom: 4rem; }

/* Scroll Anchor Fix */
:target::before { content: ""; display: block; height: 150px; margin-top: -150px; visibility: hidden; pointer-events: none; }

/* Texture & Section Base (Desktop) */
.standard-section {
    padding: 8rem 20px 6rem 20px; /* Padding desktop */
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    background-color: #000000; 
}

.full-width-section { 
    padding: 8rem 0 6rem 0; /* Padding desktop */
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
    overflow-x: hidden; 
    background-color: #000000;
}

/* *** MAPPATURA SFONDI (INVARIATA) *** */
.bg-texture-hero-curl { background-image: url('../assets/bg-abstract-curl.jpg'); }
.bg-texture-liquid-flow { background-image: url('../assets/bg-liquid-flow.jpg'); } 
.bg-texture-stripes { background-image: url('../assets/tx-dark-stripes.jpg'); }
.bg-texture-light-net { background-image: url('../assets/tx-light-net.jpg'); }
.bg-texture-dark-sand { background-image: url('../assets/tx-dark-sand.jpg'); }
.bg-texture-dark-stars { background-image: url('../assets/tx-dark-stars.jpg'); }
.bg-texture-dark-abstract { background-image: url('../assets/tx-dark-abstract.jpg'); }
.bg-texture-dark-feathers { background-image: url('../assets/tx-dark-feathers.jpg'); } 
.bg-texture-dark-strada { background-image: url('../assets/tx-dark-strada.jpg'); } 


.has-texture { 
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 
    position: relative; 
    z-index: 1; 
}
/* Overlay nero puro per garantire la profondità sulle texture */
.has-texture::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0, 0, 0, 0.75); 
    z-index: 1; 
}
.has-texture > * { position: relative; z-index: 2; } 


/* ===================================== */
/* 5. RESPONSIVE OPTIMIZATION (Mobile-First) */
/* ===================================== */

/* --- Mobile Base (Max-width 768px) --- */
@media (max-width: 768px) {

    /* Tipografia Generale */
    h2 { 
        font-size: 2.2rem; /* Ridotto */
        margin-bottom: 0.5rem;
    }
    .section-subtitle { 
        font-size: 1.05rem; /* Ridotto */
        margin-bottom: 2.5rem; /* Ridotto */
    }

    /* Padding Sezioni: Più compatto verticalmente e orizzontalmente flessibile */
    .standard-section { 
        padding: 4.5rem 4vw 3.5rem 4vw; /* Uso di VW per padding orizzontale */
        max-width: 100%; /* Permette di riempire meglio */
    }
    .full-width-section { 
        padding: 4.5rem 0 3.5rem 0; /* Solo padding verticale */
    }

    /* 1. HERO SECTION */
    .hero-section {
        padding-bottom: 80px; 
    }
    .title-xl { 
        font-size: 2.5rem; /* Manteniamo la regola di 03_pages.css (ma qui definita globalmente) */
    }
    .subtitle-lg { 
        font-size: 1.2rem; 
        margin-bottom: 2rem; 
    }
    .quote-box {
        margin: 0 auto 2rem; 
    }
    .quote-text {
        font-size: 1.0rem; 
    }
    .scroll-down-arrow {
        bottom: 20px; 
        transform: translateX(-50%) scale(0.7); 
    }
    
    /* 2. CTA FINALE (CONTATTI) */
    .contact-section {
        padding: 4rem 4vw; 
    }
    .quote-text-final.quote-max-size {
        font-size: 1.8rem; 
        line-height: 1.4;
    }
    .cta-button-minimal {
        font-size: 0.9rem; 
        padding: 0.8rem 2rem;
    }

    /* 3. PAGINA DETTAGLIO PROGETTO */
    .project-detail-section {
        padding-top: 100px; 
    }
    .detail-title-xl { 
        font-size: 1.9rem; 
    }
    .detail-subtitle-lg { 
        font-size: 1.0rem; 
    }
    .main-content-column, .sidebar-details-column {
        padding: 20px; 
    }
}


/* Stile per il placeholder del calendario di contatto (spostato da 03_pages.css) */
.calendar-placeholder {
    height: 550px; 
    background: #1a1a1a; 
    border-radius: 15px; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.calendar-placeholder p {
    padding: 20px; 
    color: #AAA; 
    font-style: italic;
}