.titolo1 {
    font-size: 2.1rem;
}

/* gallery primaria */

    .gallery-wrapper {
        width: 100%;
        padding: 2vh 0 0vh 0;
    }

    .gallery-primaria {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        gap: 1rem;
        padding-left: 0rem; /* padding solo a sinistra */
        padding-right: 0; /* nessun padding a destra */
        padding-top: 0; /* nessun padding in alto*/
        scroll-snap-type: x mandatory;
        cursor: grab;
    }

        .gallery-primaria:active {
            cursor: grabbing;
        }

        .gallery-primaria::-webkit-scrollbar {
            display: none;
        }

    .gallery-box-primaria {
        position: relative;
        flex: 0 0 30%;
        min-width: 350px;
        min-height: 550px; /* non va lasciato statico */
        border-radius: 2rem;
        padding: 0rem 2rem 2rem 2rem;
        scroll-snap-align: start;
        margin-right: 1rem;
        overflow: hidden;
        position: relative;
    }

        /* Background separato */
        .gallery-primaria-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: transform 0.4s ease, filter 0.4s ease;
            z-index: 0;
        }

        /* Contenuto testuale */
        .gallery-primaria-text {
            position: relative;
            z-index: 1;
            padding: 0rem 1rem 0 1rem; /* top right bottom left */
            color: white;
        }

            .gallery-primaria-text h3 {
                margin-top: -40px;
                height: 23vh;
            }

            .gallery-primaria-text p {
                padding-top: 30px;
                text-shadow: 0 0 5px rgba(0,0,0,1);
            }

        .fixed-text-block-hidden {
            display: none;
        }

        /* Quando si passa il mouse: espandi la maschera fino al box intero */
        .gallery-box-primaria:hover .text-mask {
            height: 100%;
        }

        /* Scroll al hover */
        .gallery-box-primaria:hover {
            transform: translateY(calc(-100% + 100%)); /* scroll completo verso l alto */
        }

        /* Effetti su hover/touch: SOLO sullo sfondo */
        .gallery-box-primaria:hover .gallery-primaria-bg,
        .gallery-box-primaria.touch-active .gallery-primaria-bg {
            transform: scale(1.05);
            filter: brightness(0.8); /* con valori sopra 1 aumenta la luminosità */
        }

        .gallery-box-primaria:last-child {
            margin-right: 0;
        }

        .gallery-primaria-controls {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            padding: 1rem 10vw 0 0; /* top right bottom left */
        }

        .scroll-btn {
            font-size: 1.5rem;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 1rem;
            cursor: pointer;
            opacity: 1;
            transition: opacity 0.3s;
        }

            .scroll-btn:disabled {
                opacity: 0.5;
                cursor: default;
                pointer-events: none;
            }

/* FINE GALLERY PRIMARIA */

/* GALLERY SECONDARIA */

        .gallery-secondaria {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            gap: 1rem;
            padding-left: 0rem; /* padding solo a sinistra */
            padding-right: 0; /* nessun padding a destra */
            padding-top: 0; /* nessun padding in alto*/
            scroll-snap-type: x mandatory;
            cursor: grab;
        }

            .gallery-secondaria:active {
                cursor: grabbing;
            }

            .gallery-secondaria::-webkit-scrollbar {
                display: none;
            }

        .gallery-box-secondaria {
            position: relative;
            flex: 0 0 30%;
            min-width: 300px;
            max-width: 350px;
            min-height: 300px;
            max-height: 380px; /* non va lasciato statico */
            border-radius: 2rem;
            padding: 0rem 2rem 2rem 2rem;
            scroll-snap-align: start;
            margin-right: 1rem;
            overflow: hidden;
            position: relative;
        }

        /* Contenuto testuale */
        .gallery-secondaria-text {
            position: relative;
            z-index: 1;
            padding: 0rem 1rem 0 1rem; /* top right bottom left */
            color: white;
        }

            .gallery-secondaria-text h3 {
                margin-top: -40px;
            }

            .gallery-secondaria-text p {
                padding-top: 30px;
                text-shadow: 0 0 5px rgba(0,0,0,1);
            }

        /* Quando si passa il mouse: espandi la maschera fino al box intero */
        .gallery-box-secondaria:hover .text-mask {
            height: 100%;
        }

        /* Scroll al hover */
        .gallery-box-secondaria:hover {
            transform: translateY(calc(-100% + 100%)); /* scroll completo verso l alto */
        }

            /* Effetti su hover/touch: SOLO sullo sfondo */
            .gallery-box-secondaria:hover .gallery-primaria-bg,
            .gallery-box-secondaria.touch-active .gallery-primaria-bg {
                transform: scale(1.05);
                filter: brightness(0.8); /* con valori sopra 1 aumenta la luminosità */
            }

        .gallery-box-secondaria:last-child {
            margin-right: 0;
        }

        .gallery-secondaria-controls {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            padding: 1rem 10vw 0 0; /* top right bottom left */
        }

/* FINE GALLERY SECONDARIA */

/* Inizio parte Blog*/

:root {
    --base-2: clamp(0.9rem, 1vw, 1rem);
    --scale-2: 1.25;
}

.dynamic-section {
    padding: 3em 10vw;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* Altezza uguale per righe */
    grid-auto-rows: 1fr;
    gap: 2em;
    background-color: #13172e;
}

.box {
    font-size: var(--base-2);
    background-color: #020304;
    color: white;
    border-radius: 1.5em;
    padding: 2em;
    box-shadow: 0 0 0.8em rgba(0,0,0,0.2);
    height: 100%; /* Riempie la cella */
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9);
    overflow: hidden;
}

    .box.visible {
        animation: zoomInBounce 0.6s ease-out forwards;
    }

@keyframes zoomInBounce {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Grid column spans */
.col-4 {
    grid-column: span 4;
}

.col-8 {
    grid-column: span 8;
}

.col-12 {
    grid-column: span 12;
}
/* FINE Inizio parte Blog*/


@media (max-width: 768px) {
    

        .dynamic-section h3 {
            padding: 0.5em;
        }

        .dynamic-section p {
            padding: 1em;
        }

    .col-4 {
        grid-column: span 12;
        margin-top: 3vh;
        margin-bottom: 3vh;
        margin-left: 10vw;
        margin-right: 10vw;
        border-radius: 1em;
    }

    .col-8 {
        grid-column: span 12;
        margin-top: 3vh;
        margin-bottom: 3vh;
        margin-left: 10vw;
        margin-right: 10vw;
        border-radius: 1em;
    }

    .col-12 {
        margin-top: 3vh;
        margin-bottom: 3vh;
        margin-left: 10vw;
        margin-right: 10vw;
        border-radius: 1em;
    }
}