@charset "UTF-8";

/* Variabili globali */
:root {
    /* Padding e margini */
    --padding-default: 0.25rem;
    --padding-top: 0.25rem;
    --padding-right: 0.25rem;
    --padding-bottom: 0.25rem;
    --padding-bottom-filetti: calc(0.25rem / 2);
    --padding-left: .25rem;
    --margin-bottom-default: 0.25rem;
    --margin-top-default: 0.25rem;

    /* Colori */
    --color-black: #000;
    --color-white: #fff;
    --color-background: #fff;
    --color-gray: rgb(220, 220, 220);
    --color-graypiani: rgb(245, 245, 245);
    --color-yellow: yellow;
    --color-border: #000;

    /* Font e tipografia */
    --font-size-base: 1em;
    --font-size-small: 0.875em;
    --font-size-large: 1.25em;
    --line-height-base: 1.5;

    /* Altezze e larghezze */
    --menu-width: calc(100vw / 8);
    --menu-height: 75vh;
    --project-height: 50vh;
    --image-width: 100%;
    --image-height: 100%;

    /* Transizioni */
    --transition-duration: 0.4s;
    --transition-ease: ease-in-out;

    /* z-index */
    --z-index-header: 5000;
    --z-index-menu: 100;
    --z-index-active-menu: 1000;

    /* Posizionamento */
    --top-header: 0;
    --top-menu: calc(25vh / 2);
    --right-menu: 0;
    --bottom-padding-menu: 0.5rem;
}

/* Font */
@font-face {
    font-family: "baikal";
    src: url(../fonts/Baikal-Medium.otf);
}

/* Reset globale */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Impostazioni di base */
html, body {
    background-color: var(--color-white);
    font-family: baikal, sans-serif;
    font-size: var(--font-size-base);
}

/* Struttura del viewport senza il fondo nero */
.pagina-progetto {
    position: absolute;
    /* top: 0; */
    height: 100%; /* Imposta l'altezza a tutta la finestra */
    width: 100%;
    z-index: var(--z-index-menu);
    display: none;
    padding: var(--padding-sito);
}

/* Quando la classe .body-active è presente sul body, abilita lo scroll */
.body-active .pagina-progetto {
    display: block; /* Attiva lo scroll quando body-active è attivo */
}

.contenitore-progetto {
    padding-left: 2rem ;
    width: calc(100vw / 8 * 7);
    position: relative;
    height: 100%;
    /* left: 2.5rem; */
    /* background-color: blue; */
}

.sezione-storica {
    margin-top: 0;
    height: auto;
    width: 100%;
    display: flex; /* Abilita Flexbox */
    flex-direction: row;
    justify-content: flex-start; /* Allinea orizzontalmente al centro */
    align-items: flex-start; /* Allinea verticalmente al centro */
}

.descrizione-progetto {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 100;
    height: 100%;
    /* padding-left: calc(2vw + var(--padding-left)); */
    padding-right: .5rem;
    padding-left: 0;
    padding-bottom: 1.5rem;
    width: calc(100vw / 8 * 4 - var(--padding-sito));
}

.contenitore-vignetta {
    width: calc(100vw / 8 * 3 + var(--padding-sito));
    height: auto;
    position: relative;
    display: flex;
}

.vignetta-sfondo {
    width: 100%;
    height: calc(100% - var(--padding-bottom) );
    position: absolute;
    background-color: var(--color-graypiani);
    z-index: var(--z-index-header);
    mix-blend-mode: multiply;
}

.immagine-storica {
    width: 100%;
    height: auto;
    padding-bottom: var(--padding-bottom);
    position: relative;
    display: block;
    opacity: .9;
}

.immagini-progetto {
    max-width: 100%;
    max-height: 100vh;
    padding-bottom: var(--padding-bottom);
    position: relative;
    display: block;
}

.immagini-progetto img {
    display: block; /* Rende l'immagine un elemento block */
    margin-left: auto;  /* Centra orizzontalmente */
    margin-right: auto; /* Centra orizzontalmente */
    max-width: 100%;  /* Impedisce che l'immagine esca dal contenitore */
    height: auto;
    max-height: 90vh;  /* Mantiene le proporzioni dell'immagine */
}

.first-line-indent {
    display: inline-block; /* Permette di trattarlo come un blocco per applicare il rientro */
    text-indent: calc(100vh / 8 * 2); /* Rientro solo sulla prima linea */
}

p {
    text-indent: var(--padding-default); /* Rientro della prima linea di ogni paragrafo */
    margin: 0; /* Evita margini indesiderati */
}

.filettodue {
    position: sticky;
    top: calc(1rem + 16px);
    width: 1.5rem;
    height: 3px;
    border-top: 1.5px solid var(--color-white);
    background-color: var(--color-black);
    margin-top: 0;
    margin-left: -2rem ;
}

#content {
    min-height: 0; /* Altezza minima temporanea per debugging */
    width: 100%;
    position: absolute;
}

.piani {
    width: 100%;
    height: calc(100% - var(--padding-bottom) - .8em);
    position: absolute;
    background-color: var(--color-graypiani);
    z-index: var(--z-index-header);
    mix-blend-mode: multiply;
}

.misurapiani {
    margin-left: auto;  /* Centra orizzontalmente */
    margin-right: auto; /* Centra orizzontalmente */
    width: fit-content;
    height: 100%;
    position: relative;
    display: block;
    background-color: white;
    font-variant-numeric: tabular-nums;
}

.griglia-testo {
    display: grid;
    grid-template-columns: calc(50% - 1.5rem - .75rem) calc(100vw / 8 * 1);; /* Prima colonna: titolo, seconda colonna: numero */
    column-gap: 2rem; /* Spazio tra le colonne */
}

.numero {
    text-align: left;
}

.sequenza-img{
    background-color: white;
    padding-bottom: var(--padding-bottom);
    z-index: 50000;
}

.titolazione{
    color: var(--color-black)
}
@media (max-width: 800px){

    .sezione-storica {

        flex-direction: column;

    }

    .descrizione-progetto {
        width: 100%;
    }

    .contenitore-vignetta {
        width: 100%;
    }

}

@media (max-width: 1000px){

    .piani {
        height: calc(100% - var(--padding-bottom) - .6em);
    }

    .filettodue {
        top: calc(1rem + 12.8px * 3);
        /* margin-left: -5.5vw; */
        width: 1rem;
    }

    .menu-active .struttura-titoli{
        display: none;
    }

    .numerazione-titoli{
        /* width: 100%; */
        padding-right: 1em;
    }

    .menu-active .numerazione-titoli{
        width: 100%;
        padding-right: 0;
    }

    .filetto {
        width: 1rem;
        border-top: 1.5px solid var(--color-border);
        height: auto;
        margin: 0;
        right: 0;
        /* padding-bottom: var(--padding-bottom-filetti); */
    }
    .filettoprimo {
        position: sticky;
        top: calc(1rem + 12.8px * 3);
        width: 1rem;
        height: 3px;
        border-top: 1.5px solid var(--color-white);
        background-color: var(--color-black);
        margin-top: 0;
        
    }

    .Alessandro br{
        display: block;
    }

    .menu-active {
        top: 40vh;
        font-size: 1.2em;
    }
}


@media (max-width: 1400px){
    .menu-active .immagini{
        display: none;
        width: 0;
    }

    .filettodue {
        top: calc(1rem + 12.8px * 3);
        /* margin-left: -5.5vw; */
        width: 1rem;
    }
}


@media (min-width: 1920px){

    .filetto {
        height: 4.5px;
    }

    .filettoprimo {
        top: calc(1rem + 48px * 1);
        height: 4.5px;
    }
    
    .filettodue{
        top: calc(1rem + 48px * 1);
        height: 4.5px;
    }

    }