/* ==========================================

   STILI COMUNI A TUTTE LE PAGINE 

   ========================================== */

body { 

    margin: 0; 

    background: #000; 

    color: #eee; 

    font-family: Verdana, sans-serif; 

    overflow-x: hidden; /* Evita fastidiosi scorrimenti laterali su mobile */

}



.wrapper { 

    display: grid; 

    grid-template-columns: 180px 1fr; 

    min-height: 100vh; 

}



/* SIDEBAR E MENU */

.sidebar { 

    padding: 130px 20px 30px; 

    border-right: 2px solid #c45a1a; 

    position: relative; 

    z-index: 10; 

}



.sidebar a { 

    display: block; 

    color: #fff; 

    text-decoration: none; 

    margin-bottom: 12px; 

    font-size: 14px; 

    line-height: normal; 

    transition: color 0.3s;

}



.sidebar a:hover, .sidebar a.active { 

    color: #c45a1a; 

}



/* CONTENT AREA */

.content { 

    padding: 30px; 

    box-sizing: border-box; /* Assicura che il padding non sballi la larghezza */

    width: 100%;

}



/* HEADER E LINEA ARANCIONE */

.header, .header-container { 

    position: relative; 

    margin-bottom: 60px; 

    display: flex; 

    align-items: baseline; 

    gap: 40px; 

}



.header h1, .header-container h1 { 

    font-size: 48px; 

    margin: 0; 

    font-weight: normal; 

}



.header::after, .header-container::after { 

    content: ""; 

    position: absolute; 

    left: -200px; 

    top: 70px; 

    width: calc(100% + 200px); 

    height: 6px; 

    background: #c45a1a; 

    z-index: -1; /* Mantiene la linea dietro eventuali testi */

}



/* ==========================================

   VERSIONE MOBILE - OTTIMIZZATA

   ========================================== */

@media (max-width: 800px) {

    .wrapper { 

        grid-template-columns: 1fr; 

    }

    

    .sidebar { 

        padding: 20px; 

        border-right: none; 

        border-bottom: 2px solid #c45a1a; 

        display: flex; 

        flex-wrap: wrap; 

        justify-content: center; 

        gap: 15px; 

    }

    

    .sidebar a { 

        margin-bottom: 0; 

        font-size: 13px;

        white-space: nowrap; /* Impedisce alle voci di menu di spezzarsi */

    }

    

    .header, .header-container { 

        flex-direction: column; 

        align-items: center; 

        gap: 10px; 

        margin-bottom: 40px; 

    }

    

    .header h1, .header-container h1 { 

        font-size: 32px; 

        text-align: center; 

    }

    

    .header::after, .header-container::after { 

        left: -20px; 

        width: calc(100% + 40px); 

        top: 45px; 

    }



    /* Esposizioni.php Mobile */

    .expo-year-group { 

        grid-template-columns: 1fr; 

        gap: 0; 

        margin-bottom: 30px;

    }

    

    .year-label { 

        font-size: 32px; 

        color: #c45a1a; 

        border-bottom: 1px solid #c45a1a;

        margin-bottom: 15px;

        padding-bottom: 5px;

    }



    .btn-foto {

        display: block;

        text-align: center;

        padding: 12px;

        margin-top: 15px;

        background: rgba(196, 90, 26, 0.1);

        border: 1px solid #c45a1a;

        color: #c45a1a;

        text-decoration: none;

    }



    /* Gallery Mobile */

    .grid { 

        grid-template-columns: repeat(2, 1fr) !important; 

        gap: 10px !important; 

    }

    .item { height: 150px !important; }

}



/* ==========================================

   TESTI E DESCRIZIONI (Gallery Evento)

   ========================================== */

.intro-text { 

    margin: 20px 0 40px 0; 

    font-size: 16px; 

    line-height: 1.8; 

    color: #ccc; 

    width: 100%;

    display: block;

    text-align: left;

    clear: both;

    white-space: pre-wrap; /* Fondamentale: rispetta gli a capo del file .txt */

    word-wrap: break-word; /* Evita che parole troppo lunghe escano dai bordi */

	/* Forza l'allineamento a sinistra ed elimina rientri */

    text-indent: 0 !important;

    padding-left: 0 !important;

}