/* Dichiarazione dei Font Personalizzati */
/*
  Ho configurato i font per la famiglia 'Clash'.
  Assicurati che i nomi dei file (es. 'ClashDisplay-Regular.woff2') corrispondano
  a quelli che hai nella cartella /fonts.
*/
@font-face {
    font-family: 'Clash';
    src: url('/fonts/ClashDisplay-Light.woff2') format('woff2');
    font-weight: 300; /* Light */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash';
    src: url('/fonts/ClashDisplay-Regular.woff2') format('woff2');
    font-weight: 400; /* Regular (normal) */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash';
    src: url('/fonts/ClashDisplay-Medium.woff2') format('woff2');
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash';
    src: url('/fonts/ClashDisplay-Semibold.woff2') format('woff2');
    font-weight: 600; /* Semibold */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash';
    src: url('/fonts/ClashDisplay-Bold.woff2') format('woff2');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

/* Reset e Stili Globali */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Clash', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #FFFFFF;
    color: #000000;
    overflow-x: hidden;
}

h1, h2 {
    font-size: 50px;
    font-weight: 500; /* Medium */
    line-height: 1.1; /* Interlinea ridotta per tutti i titoli */
}

p {
    font-size: 17px;
    font-weight: 500; /* Medium */
    line-height: 1.4; /* Aggiungo un'interlinea per migliorare la leggibilità */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    padding: 20px 0;
}

.logo-link {
    display: inline-block;
}

.logo {
    max-height: 50px; /* Imposta l'altezza massima del tuo logo */
    width: auto;
    display: block;
}

/* Spaziatura */
.spacer-100 {
    height: 100px;
}

.spacer-200 {
    height: 200px;
}

/* Sezione 1: Intro (Immagine + Testo) */
.intro-section {
    display: flex;
    align-items: stretch; /* Modificato per permettere alle colonne di avere la stessa altezza */
    gap: 40px;
}

.intro-section .image-column {
    flex: 1;
}

.intro-section .image-column img {
    width: 100%;
    height: auto;
    display: block;
}

.intro-section .text-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.intro-section h1 {
    margin-bottom: 20px;
}

/* Sezione 2: Collage */
.collage-section {
    /* Rimosso il posizionamento e l'altezza fissa per adattarsi alla GIF */
    width: 100%;
}

/* Approccio con background-image per le GIF */
#main-gif-container, #mini-gif-container {
    width: 100%; /* Occupa tutta la larghezza del contenitore */
    background-size: contain; /* Mostra l'intera immagine senza tagli */
    background-position: center; /* Centra l'immagine */
    background-repeat: no-repeat; /* Evita la ripetizione */
}

/* GIF 1 (Desktop) */
#main-gif-container {
    aspect-ratio: 1400 / 788; /* Proporzioni della GIF desktop */
    background-image: url('img/Sequenza 01_desktop.gif');
}

/* GIF 2 (Desktop) */
#mini-gif-container {
    aspect-ratio: 580 / 326; /* Proporzioni della GIF desktop */
    background-image: url('img/Sequenza 02_desktop.gif');
    background-size: cover; /* Assicura che copra lo spazio anche su desktop */
}

/* Sezione 3: CTA con titolo centrato */
.cta-section {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Ripristinato layout a 3 colonne */
    align-items: start; /* Allinea gli elementi in alto */
    gap: 40px;
}

.cta-section h2 {
    grid-column: 2; /* Posiziona il titolo nella colonna centrale */
    text-align: center; /* Allinea il testo al centro */
}

.cta-button-wrapper {
    text-align: right;
}

.btn {
    display: inline-block; /* Necessario per applicare larghezza e centrare il testo */
    background-color: #fff;
    color: #000;
    width: 150px; /* Larghezza fissa */
    padding: 10px 0; /* Padding verticale ridotto, orizzontale a 0 */
    border: 1px solid #000;
    border-radius: 20px; /* Bordi più arrotondati (come su mobile) */
    cursor: pointer;
    text-decoration: none;
    text-align: center; /* Testo centrato */
    font-size: 1rem;
    transition: all 0.3s ease; /* Aggiungo una transizione per l'hover */
    font-weight: 500; /* Peso del font per i pulsanti */
}

/* Sezione 4: Sticky Scroll */
.sticky-parent-section {
    display: flex;
    position: relative;
}

.sticky-parent-section .left {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 1;
    display: flex;
    align-items: flex-start; /* Allinea il contenuto in alto */
    justify-content: flex-start; /* Allinea il contenuto a sinistra */
    background: #fff; /* Sfondo bianco */
    padding: 40px 40px 40px 0; /* Rimuove il padding sinistro, gestito dal container */
}

.sticky-parent-section .right {
    flex: 1;
    padding: 40px;
    position: relative; /* Necessario per posizionare il mini-collage relativamente a questa colonna */
}

.sticky-parent-section .right p {
    margin-bottom: 40px;
}

/* Stili per il mini-collage nella sezione 4 */
.mini-collage-section {
    /* Rimosso il posizionamento e l'altezza fissa */
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
}

/* Stili per le immagini sovrapposte nella sezione 4 */
.stacked-images-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Allinea le immagini a destra */
    gap: 20px; /* Spazio tra le due immagini */
}

.stacked-img-1 {
    width: 33% !important;
}

.stacked-img-2 {
    width: 100% !important;
}

.sticky-parent-section .right img {
    width: 100%;
}

/* Sezione 5: Testo + CTA */
.text-cta-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.text-cta-section .right-column .btn {
    margin-top: 20px;
    float: right;
}

/* Sezione 6: Form Contatti */
.contact-section-wrapper {
    padding-top: 100px; /* Aggiunge spazio sopra il form */
}

.contact-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.contact-section .left-column {
    margin-bottom: 30px; /* Aggiunge spazio tra titolo e form su mobile */
}

.form-group {
    margin-bottom: 35px; /* Aumenta spazio tra i campi del form */
}

.form-group {
    margin-bottom: 25px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-size: 1rem;
    background-color: transparent;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: #000;
}

/* Assicura che gli elementi del form ereditino il font corretto */
.contact-section input, 
.contact-section textarea, 
.contact-section button,
.contact-section ::placeholder {
    font-family: 'Clash', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.form-group ::placeholder {
    color: #999;
    font-family: 'Clash', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.contact-section .form-wrapper {
    text-align: right;
}

/* Effetto hover per i pulsanti */
.btn:hover {
    background-color: #000;
    color: #fff;
}


/* Media Queries per responsiveness */
@media (max-width: 768px) {
    /* Riduco gli spaziatori su mobile */
    .spacer-100 {
        height: 50px;
    }
    .spacer-200 {
        height: 80px;
    }

    .text-cta-section, .contact-section {
        flex-direction: column;
        display: block; /* Rimuove grid/flex su mobile */
    }

    /* 1. Logo al 70% */
    .header .container {
        text-align: center;
    }
    .logo {
        width: 70%;
        max-height: none;
    }

    /* 2. Riordino Sezione Intro */
    .intro-section {
        display: flex;
        flex-direction: column;
    }
    .intro-section .text-column {
        order: 1; /* Prima il blocco testo */
    }
    .intro-section .image-column {
        order: 2; /* Poi l'immagine */
        margin: 10px 0; /* Spazio ridotto tra testo e immagine */
    }
    .intro-section .text-column p {
        order: 3; /* Il paragrafo viene dopo l'immagine */
    }
    .intro-section .text-column {
        display: contents; /* Permette di riordinare i figli diretti */
    }

    /* 3. CTA Section mobile layout */
    .cta-section {
        grid-template-columns: 1fr; /* Colonna singola */
        gap: 30px; /* Aumentato spazio tra testo e bottone */
    }
    .cta-section h2 {
        grid-column: 1; /* Occupa la sua colonna */
        text-align: left;
    }
    .cta-button-wrapper {
        text-align: right; /* Pulsante a destra */
    }

    /* Dimensione testi */
    h1, h2 {
        font-size: 29px; /* Riduco ulteriormente la dimensione dei titoli su mobile */
    }
    p {
        font-size: 18px; /* Aumentata dimensione del testo su mobile */
    }

    /* Sostituzione GIF su Mobile */
    #main-gif-container {
        aspect-ratio: 1 / 1; /* Proporzioni della GIF mobile (quadrata) */
        background-image: url('img/Sequenza 01_mobile.gif');
    }

    #mini-gif-container {
        aspect-ratio: 350 / 197; /* Proporzioni della GIF mobile */
        background-image: url('img/Sequenza 02_mobile.gif');
    }


    /* 4. Sticky scroll su mobile */
    .sticky-parent-section {
        display: block; /* Mantiene il layout a blocchi su mobile */
    }
    .sticky-parent-section .left {
        position: static !important; /* Rimuove l'effetto sticky su mobile */
        /* top: 0; non ha più effetto */
        height: auto !important; /* Forza l'altezza ad adattarsi al contenuto, sovrascrivendo il 100vh del desktop */
        padding: 20px; /* Padding ridotto per mobile */
        /* z-index: 10; non è più necessario */
    }

    /* Ripristina il padding del container su mobile per la sezione sticky */
    .sticky-section-wrapper .container {
        padding: 0;
    }

    .sticky-parent-section .right {
        padding: 20px; /* Allinea il padding della colonna destra a quella sinistra */
    }

    .stacked-img-1 {
        width: 50% !important; /* Ingrandita immagine Fondazione Themis */
    }

    /* Sezione 4 mobile */
    .text-cta-section .left-column {
        margin-bottom: 20px; /* Spazio tra titolo e paragrafo */
    }
    .text-cta-section .right-column .btn {
        margin-top: 30px; /* Aumentato spazio tra paragrafo e bottone */
    }

    /* Stili pulsanti */
    .btn {
        font-weight: 500; /* Peso del font ridotto come da richiesta */
        border-radius: 20px; /* Bordi più arrotondati */
        padding: 10px 0; /* Padding verticale ridotto, orizzontale a 0 */
    }

    /* Form */
    .contact-section .left-column { margin-bottom: 40px; }
    .form-group { margin-bottom: 40px; }
}

/* Stili per il messaggio di stato del form */
#form-status h2 {
    margin-bottom: 15px;
}

#form-status.error p {
    color: #D8000C; /* Rosso per l'errore */
}

/* Sezione 7: Footer */
.footer-wrapper {
    background-color: #ffffff; /* Sfondo bianco */
    padding: 40px 0;
}

.footer-content {
    display: flex;
}

.footer-half-column {
    width: 50%;
}

.footer-inner-content {
    display: flex;
    gap: 60px; /* Spazio tra le due colonne di testo */
}

.footer-column p {
    margin: 0;
    line-height: 1.6;
}

.footer-column a {
    text-decoration: none;
    color: inherit; /* I link ereditano il colore del testo (nero) */
}

/* Responsive per il footer */
@media (max-width: 768px) {
    .footer-inner-content {
        flex-direction: column;
        gap: 20px; /* Riduco lo spazio tra le colonne su mobile */
    }
    .footer-half-column {
        width: 100%; /* La colonna con il contenuto occupa tutta la larghezza */
    }
}