﻿/*##################################################*/
/*# STILI MULTISCHERMO #############################*/
/*##################################################*/
.popup_container {
    display: none;
}

#popup_trigger:checked ~ .popup_container {
    display: block;
}

.popup_container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    z-index: 19;
}
    /**/
    .popup_container .backdrop_overlay {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.7);
        backdrop-filter: blur(15px);
        cursor: pointer;
    }
    /**/
    .popup_container .popup {
        width: 80%;
        height: auto;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
        max-width: 600px;
        max-height: 80vh;
        overflow: hidden; /* Questo è per il box popup in generale */
        z-index: 4;
    }

        .popup_container .popup .autoscroll {
            height: inherit;
            overflow: auto;
            max-height: inherit;
        }
        /**/
        .popup_container .popup .image {
            position: relative;
            width: 100%;
        }

            .popup_container .popup .image .date {
                position: absolute;
                width: 100%;
                z-index: 4;
            }

                .popup_container .popup .image .date span {
                    padding: 0 1rem;
                }

                    .popup_container .popup .image .date span:first-child {
                        border-right: solid 1px #ddd;
                    }
            /**/
            .popup_container .popup .image img {
                display: block;
                width: 100%;
                z-index: 1;
            }

            .popup_container .popup .image:before {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 25%;
                background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 100%);
                z-index: 2;
            }
        /**/
        .popup_container .popup p { /* Stile per il titolo */
            padding: 1rem 0; /* Rimuovi padding laterale se lo gestisci in autoscroll */
            margin: 0; /* Resetta margini di default del paragrafo */
        }

            .popup_container .popup p strong {
            }
        /**/
        /* Stile per la descrizione */
        .popup_container .popup .font_sz_var_02 {
            display: block; /* Fa comportare lo span come un blocco, utile per padding e a capo */
            padding-bottom: 1rem; /* Spazio sotto la descrizione */
            white-space: normal; /* Assicura il comportamento standard di a capo */
            overflow-wrap: break-word; /* Per andare a capo con parole lunghe */
            word-wrap: break-word; /* Fallback per browser meno recenti */
            /* Se vuoi un a capo più aggressivo: */
            /* word-break: break-all; */
        }
        /**/
        .popup_container .popup .cta_container {
        }

            .popup_container .popup .cta_container .flx_itm {
                flex-grow: 1;
            }

            .popup_container .popup .cta_container a {
                cursor: pointer;
                height: 100%;
            }
        /**/
        .popup_container .popup label {
            position: absolute;
            top: 0.5rem;
            right: 1rem;
            background-color: rgba(255,255,255,0.8);
            backdrop-filter: blur(10px);
            border-radius: 0.6rem;
            z-index: 4;
            cursor: pointer;
            padding: 1.5rem;
            box-shadow: 0 0 6px rgba(0,0,0,0.25);
            margin-right: 7px;
        }

            .popup_container .popup label:hover span {
                text-shadow: 0 0 10px rgba(0,0,0,0.85);
            }
/*##################################################*/

/*##################################################*/
/*- STILI ESCLUSIVI GRANDI SCHERMI -----------------*/
@media (min-width: 1281px) {
    /*##################################################*/
}
/*##################################################*/
/*- STILI SCHERMI MEDI --------------------------*/
@media (min-width: 1025px) and (max-width: 1280px) {
    /*##################################################*/
}
/*##################################################*/
/*- STILI PICCOLI SCHERMI --------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
    /*##################################################*/
}
/*##################################################*/
/*- STILI TABLET -----------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {
    /*##################################################*/
}
/*##################################################*/
/*- STILI MOBILE -----------------------------------*/
@media (max-width: 480px) {
    /*##################################################*/
    .popup_container .popup {
        max-height: 48rem;
    }

        .popup_container .popup label {
            margin-right: 0
        }
}
