/**
 * Modali su telefono e tablet stretto.
 *
 * Problema risolto: le finestre (scheda opera, cookie, pagamenti...) sono centrate
 * verticalmente; quando il contenuto è più alto dello schermo la parte sopra e sotto
 * finisce fuori e non si riesce a raggiungerla, così la modale si vede "a metà".
 *
 * Qui la finestra scorre per intero insieme allo sfondo scuro, resta centrata quando ci sta,
 * e usa l'altezza reale del telefono (barra del browser compresa).
 * Vale solo sotto i 768 pixel: su computer non cambia niente.
 */

@media (max-width: 767px) {

    .fixed.inset-0.flex.items-center {
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 100vh;
        height: 100dvh;
    }

    /* La finestra cresce quanto serve: è lo sfondo scuro a scorrere, non un riquadro dentro l'altro */
    .fixed.inset-0.flex.items-center > div {
        max-height: none;
        margin-top: auto;
        margin-bottom: auto;
    }

    /* Un po' di respiro sopra e sotto quando la modale non ha già il suo bordo */
    .fixed.inset-0.flex.items-center:not(.p-4):not(.p-6) {
        padding: 12px;
    }

    /*
     * Immagini e video grandi dentro le modali: si vedono per intero invece di essere
     * ritagliati, e non superano metà schermo così restano visibili anche testo e pulsanti.
     */
    .fixed.inset-0.flex.items-center img.w-full,
    .fixed.inset-0.flex.items-center video.w-full,
    #modal-media-container img,
    #modal-media-container video {
        object-fit: contain;
        height: auto;
        max-height: 50vh;
        max-height: 50dvh;
        background: #f8fafc;
    }

    /*
     * Modali che hanno un loro riquadro interno scorrevole (pagamenti, biografia):
     * su telefono conviene far scorrere tutta la finestra, non un riquadro dentro l'altro.
     */
    .payment-modal .modal-content,
    #biography-modal .modal-content {
        max-height: none;
        overflow-y: visible;
    }
}