/* =========================================
   VERSIONE DESKTOP (oltre 800px)
   ========================================= */
@media screen and (min-width: 800px) {

/* =========================================
       1. HEADER DESKTOP - FULL WIDTH
       ========================================= */
    #intestazione {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999; 
    }
 
    #header-panel-outer {
        width: 100%;
        max-width: 100%; 
        margin: 0;
        /*background-color: var(--site-primary-color);*/
        border-radius: 0;
        position: relative;
         
        background: linear-gradient(
                to right, 
                rgba(212, 175, 55, 0.4) 0%,  /* Oro antico (Opzione 1) sulla sinistra (logo) */
                rgba(0, 0, 0, 1) 60%,        /* Diventa nero pieno prima del menu */
                rgba(0, 0, 0, 1) 100%        /* Rimane nero pieno fino a destra */
            );

        transition: max-width 0.9s cubic-bezier(0.25, 1, 0.5, 1), 
                    margin 0.9s cubic-bezier(0.25, 1, 0.5, 1), 
                    border-radius 0.9s ease, 
                    background-color 0.9s ease;
    }

    #header-panel-inner {
        max-width: var(--site-content-width); 
        margin: 0 auto; 
        padding: 1em var(--site-content-offset);
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        box-sizing: border-box;
        height: 4.5em;    
        background-color: transparent;
    }

    #header-panel-outer::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        background-color: var(--site-line-color);
        transition: width 0.6s ease-in-out;
        border-radius: 0 0 8px 8px;
    }

    /* =========================================
       IL TRIANGOLINO DEI SOTTOMENU
       =========================================
       Su schermo stretto e' un pulsante vero, che apre l'elenco a fisarmonica.
       Qui no: il sottomenu si apre passandoci sopra col mouse, e il pulsante
       non avrebbe niente da fare. Torna a essere il segno grafico che era,
       attaccato alla voce. */
    .sub-toggle { display: none; }

    .has-dropdown > .i0 .s::after { content: " ▾"; }

    /* Reset dal mobile: li' la voce e' una riga intera con il pulsante a
       destra, qui e' una voce di menu orizzontale come le altre. */
    .n0.has-dropdown {
        display: block;
        width: auto;
    }

    /* =========================================
       2. EFFETTO ALLO SCROLL (.scrolled)
       ========================================= */
    
    body.scrolled #header-panel-outer {
        max-width: 1100px;         
        margin: 1em 0 0 0; 
        
        border-radius: 8px;
        background-color: rgba(10, 10, 10, 0.95);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    body.scrolled #header-panel-outer::after {
        width: 100%; 
        transition-delay: 0.6s; 
    }

    #menu-toggle { display: none; } /* Nascondi Hamburger */
    
    #header-panel-outer {
        display: block;
        max-width: 100%; 
        padding: 0;
        box-sizing: border-box;
        margin: 0;
    }

    /* 🔴 RESET FONDAMENTALE DAL MOBILE 🔴 */
    #menu {
        position: relative; 
        left: 0; 
        width: auto; 
        height: auto; 
        background-color: transparent;
        padding: 0;
        box-shadow: none;
        flex-direction: row;
        display: flex;
        align-items: center;
        gap: 1.5em;
    }
    
    .m0 {
        display: flex;
        gap: 1.5em; 
        flex-direction: row;
        flex-wrap: wrap; 
        justify-content: flex-start; 
        align-items: center; 
        align-content: center;
    }

    #menu>.m0>.n0:not(:last-child)::after {
        content: "|";
        display: block;
        width: 1em;
        height: 1em;
        text-align: center;
        line-height: 1em;
        position: absolute;
        right: -1.25em;
        top: 50%;
        margin-top: -0.5em;
        color: var(--site-secondary-color);
        font-weight: 800;
        transition: transform 0.6s ease-in-out, color 0.6s ease-in-out;
        pointer-events: none;
    }
    
    .i0 {
        color: var(--site-tertiary-color);
        font-weight: 400;
        transition: color 0.3s;
    }
    .i0:hover { color: var(--site-secondary-color); }
 
    .m0 > .n0, .cta-preventivo {
        opacity: 0;
        transform: translateY(-0.9em);
        animation: fadeDown 0.6s ease forwards;
        margin-bottom: 0; /* 🔴 RESET DAL MOBILE: Toglie lo spazio sotto le voci */
    }

    /* Animazione scaglionata */
    .m0 > .n0:nth-child(1) { animation-delay: 0.6s; }  
    .m0 > .n0:nth-child(2) { animation-delay: 0.75s; } 
    .m0 > .n0:nth-child(3) { animation-delay: 0.9s; }  
    .m0 > .n0:nth-child(4) { animation-delay: 1.05s; } 
    .m0 > .n0:nth-child(5) { animation-delay: 1.2s; }  
    .m0 > .n0:nth-child(6) { animation-delay: 1.35s; } 
    .cta-preventivo { animation-delay: 1.5s; margin-top: 0; /* 🔴 Reset dal mobile */ }

    /* Gestione Dropdown (Sottomenu) Desktop */
    .has-dropdown { position: relative; }
    
    .m1 {
        /* 🔴 RESET FONDAMENTALE DAL MOBILE 🔴 */
        max-height: none;
        overflow: visible; 
        border-left: none;
        padding-left: 0;
        margin-top: 0;
        
        position: absolute;
        top: 2.2em; 
        left: 0;
        background-color: #111;
        min-width: 14em;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.6s ease;
        border-top: 2px solid var(--site-secondary-color);
        z-index: 100;
    }
    
    .has-dropdown:hover .m1 {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .i1 {
        display: block;
        padding: 0.8em 1em;
        color: #ddd;
        font-size: 0.9em;
    }
    .i1:hover { background-color: #222; color: var(--site-secondary-color); }

    #logo-img {
        opacity: 0;
        animation: fadeIn 1s forwards 0.2s;
        margin: 0 1.5em 0 0;
    }    

    /* =========================================
       HERO DESKTOP
       ========================================= */
    #homepage-hero-holder {
        /*background-image: url(../images/index/hero-desktop.webp);*/
        background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 0) 60%), url(../images/index/hero-desktop.webp);
    }

    #homepage-hero-holder-outer {
        aspect-ratio: 1280 / 700;
        padding: var(--site-content-offset);
    }    

    #homepage-hero-holder-inner, #hero-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #homepage-hero-title {
        font-size: 260%;
        padding: 0.5em 0;
    }

    #homepage-hero-subtitle {
        font-size: 125%;
        padding: 1.5em 0;
    }    

    .section-title {
        font-size: 3em;
        margin-bottom: 1em;
    }

    .section-subtitle {
        font-size: 125%;
        margin-bottom: 1em;
    }

    .section-content {
        max-width: var(--site-content-width);
        margin: 0 auto;
        padding: 0 var(--site-content-offset);
    }

    .scrollable-list {
        gap: 2em;
        padding-bottom: var(--site-content-offset); /* Spazio per l'ombra se c'è */
    }

    .section {
        padding: var(--site-content-offset) 0;
    }

/* =========================================
       SEZIONE "LE NOSTRE FIRME" (Desktop)
       ========================================= */
    .nostre-firme-list-item {
        flex: 0 0 calc(33.333% - 1.34em); 
        aspect-ratio: 1 / 1; 
    }

    .nostre-firme-title {
        font-size: 1.6em;
        bottom: 30px;
    }    

/* =========================================
   7. SEZIONE "IL CULTO DEL DETTAGLIO" 
   ========================================= */

    #dettaglio-section .section-inner {
        max-width: var(--site-content-width);
        margin: 0 auto;

        /* Il margine laterale qui lo dava "margin: 0 auto", che pero' non da'
           niente finche' la finestra e' piu' stretta di --site-content-width:
           fra 850px e 1200px il testo finiva attaccato ai due bordi. Il
           margine va messo come padding, che c'e' sempre. */
        padding: var(--site-content-offset) 1.5em;
        box-sizing: border-box;
        
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center; 
        gap: 6em; 
    }

    #dettaglio-section .section-title {
        font-size: 3em;        
        margin: 0 0 0.3em 0;
        text-align: left;
    }

    .dettaglio-list-item {
        font-size: 1.3em;
        margin-bottom: 0.5em;
    }

/* =========================================
       SEZIONE "IL NOSTRO PROCESSO" (Desktop)
       ========================================= */

    .timeline-wrapper {
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        margin-top: 4em;
        position: relative;
    }

    /* Modifica linea da verticale a orizzontale */
    .timeline-line-bg, .timeline-line-progress {
        top: 3.75em; 
        bottom: auto;
        left: 5%; 
        width: 90%; 
        height: 0.125em;
    }

    .timeline-line-progress {
        /* Animazione desktop */
        height: 0.125em; 
        width: 0; 
        transition: width 2s ease-in-out; 
    }

    #processo-section.isvisible .timeline-line-progress {
        width: 90%; 
        height: 0.125em;
    }

    .timeline-item {
        flex: 1; 
        padding-bottom: 0;
        padding: 0 1em; 
        text-align: center; 
        
        transform: translateY(1.875em);
    }

    #processo-section.isvisible .timeline-item {
        transform: translateY(0);
    }

    .timeline-icon {
        margin: 0 auto 1.875em auto; 
        width: 2.8125em; 
        height: 2.8125em; 
    }

    .timeline-dot {
        left: 50%; 
        top: 3.4375em; 
        transform: translateX(-50%); 
    }

    .timeline-content {
        margin-top: 2.5em;
    }

    /* Tappe senza icone (pagina Il Metodo): linea e pallino in cima, il testo
       sotto. Con le altezze pensate per le icone la linea tagliava i titoli,
       e tanto piu' quando vanno a capo. */
    .timeline-senza-icone .timeline-line-bg,
    .timeline-senza-icone .timeline-line-progress {
        top: 0.3125em;
    }

    .timeline-senza-icone .timeline-dot {
        top: 0;
    }

    .timeline-step-title {
        font-size: 1.3em; 
        margin-bottom: 1em;
    }

    .timeline-step-desc {
        font-size: 0.9em;
    }    

/* =========================================
    SEZIONE "LA MATERIA PRIMA" (Desktop/Tablet)
   ========================================= */
       
    #materia-prima-section {
        padding: var(--site-content-offset) 0;
    }

    #materia-prima-section .section-inner {
        max-width: var(--site-content-width);
        margin: 0 auto;
        padding: 0 var(--site-content-offset) var(--site-content-offset) var(--site-content-offset);
    }

    .materia-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--site-content-offset);
    }
    
    .materia-item {
        aspect-ratio: 3 / 4;
    }

/* =========================================
   FOOTER
   ========================================= */
    #piede-inner {
        flex-direction: row; 
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left; 
    }

    #footer-row-wrapper {
        flex: 1;
        min-width: 300px;
    }

    #dati-aziendali-holder {
        flex: 1;
        min-width: 300px;
        display: flex;
        justify-content: flex-end;
        text-align: right;
    }

    #dati-contatto-logo {
        margin: 0 0 1.5em 0; 
        max-width: 200px; 
    } 

/* =========================================
   AZIENDA
   ========================================= */
    .azienda-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2em; 
    }    

/* =========================================
   CONTATTI
   ========================================= */
    .contatti-grid { grid-template-columns: 1fr 1fr; }

    #contatti-section { padding: 4em 0; }
    .section-inner { max-width: var(--site-content-width); margin: 0 auto; padding: 0 1.5em; }

/* =========================================
   PAGINA REALIZZAZIONI (PORTFOLIO, FILTRI E LIGHTBOX)
   ========================================= */    

    #portfolio-section .section-inner {
        padding: 4em 1.5em; 
    }   

   .portfolio-filters {
        flex-direction: row; 
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .portfolio-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }    

    .spec-row {
        flex-direction: row; 
        gap: 4em;
    }
    
    /* La classe "reverse" inverte l'ordine da sinistra a destra */
    .spec-row.reverse {
        flex-direction: row-reverse;
    }

/* =========================================
   PAGINA SPECIALIZZAZIONI
   ========================================= */    

    .spec-row {
        flex-direction: row; /* Su PC: testo a sinistra, foto a destra */
        gap: 4em;
    }
    
    /* La classe "reverse" inverte l'ordine: foto a sinistra, testo a destra */
    .spec-row.reverse {
        flex-direction: row-reverse;
    }    

/* =========================================
   PAGINA RISTRUTTURAZIONI
   ========================================= */       
    .features-grid { grid-template-columns: 1fr 1fr; }
    .service-gallery-grid { grid-template-columns: 1fr 1fr 1fr; }

    .service-intro-grid { flex-direction: row; gap: 4em; }
    .features-grid { grid-template-columns: repeat(4, 1fr); }    
}

@media (max-width: 600px) {
    .carousel-item {
        aspect-ratio: 16 / 9; 
    }
}

@media (max-width: 600px) {
    #prima-dopo-carousel-wrapper {
        aspect-ratio: 4 / 3; 
    }
}