/* ====================================
   2. RESET E LAYOUT BASE
   ==================================== */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    /* MODIFICA FONDAMENTALE: Usiamo height fissa invece di min-height */
    height: 100vh; 
    overflow: hidden; /* Impedisce lo scroll della pagina intera (scrolliamo solo i pannelli) */
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif; 
    line-height: 1.7;
}

@media (min-width: 1600px) {
    .container-xxxl {
        margin-right: auto;
        margin-left: auto;
        max-width: 1600px;
    }
}

h1 {
    font-family: 'Playfair Display', serif;
    color: var(--coloreTitolo);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-shadow: 1px 1px 3px rgba(19, 19, 19, 0.3);
    -webkit-text-stroke: 1px #00000014;
}

a {
    color: var(--coloreSfondoScuro);
    text-decoration:underline;
}

.page {
    background: var(--coloreSfondo);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden; /* Assicura che la struttura flex non sformi */
}

/* ====================================
   SEZIONE INTRODUZIONE
   ==================================== */

/* 1. Sblocca il body solo per la pagina Intro */
body[data-menu="intro"] {
    height: auto;       /* Rimuove il vincolo 100vh */
    overflow-y: auto;   /* Riabilita la barra di scorrimento nativa del browser */
}

/* 2. Sblocca il contenitore principale .page */
body[data-menu="intro"] .page {
    height: auto;       /* Si allunga in base al contenuto */
    min-height: 100vh;  /* Assicura che lo sfondo copra almeno tutta la finestra */
    overflow: visible;  /* Rimuove il taglio del contenuto eccedente */
}

body[data-menu="ricerca"] {
    height: 100vh;      /* Bloccato all'altezza della finestra per permettere lo scroll interno */
    overflow: hidden;    /* Impedisce lo scroll di tutto il body */
    display: flex;
    flex-direction: column;
}

body[data-menu="ricerca"] .page {
    display: flex;
    flex-direction: column;
    height: 100vh;      /* Occupa esattamente la finestra */
    min-height: 100vh;
    overflow: hidden;   /* Il contenitore generale non deve scrollare */
}

.intro-section {
    padding: 30px 50px;
    overflow-y: auto; /* Permette lo scroll se il contenuto è lungo */
    max-height: 100%; /* Limita l'altezza al contenitore */
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border: 3px solid var(--coloreSfondo);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.border-bottom {
    border-bottom-color: var(--base-grigio)!important;
}

@media (min-width: 992px) {
    .image-container {
        margin-bottom: 0; 
    }
    /* Regola per rendere l'IMMAGINE "STICKY" */
    .image-container img {
        position: -webkit-sticky;
        position: sticky;
        top: 20px; 
    }
}