/* Come per la finestra, il <dialog> è l'intera superficie: i valori predefiniti
   del browser vanno azzerati e lo sfondo non dipende da ::backdrop. */
.vcp-galleria__velo {
    position: fixed;
    inset: 0;
    z-index: var(--vcp-livello-finestra);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow: hidden;
    overscroll-behavior: contain;
    border: 0;
    background: var(--vcp-colore-superficie-scura);
    color: var(--vcp-colore-su-scuro);
}

.vcp-galleria__velo[open] {
    display: grid;
}

.vcp-galleria__velo::backdrop {
    background: transparent;
}

.vcp-galleria__velo :focus-visible {
    outline: var(--vcp-contorno-fuoco-su-scuro);
}

.vcp-galleria__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vcp-spazio-12);
    padding: var(--vcp-spazio-8) var(--vcp-spazio-8) var(--vcp-spazio-8) var(--vcp-spazio-16);
}

.vcp-galleria__contatore {
    margin: 0;
    font-size: var(--vcp-testo-14);
    font-weight: var(--vcp-peso-semigrassetto);
    font-variant-numeric: tabular-nums;
    color: var(--vcp-colore-su-scuro-tenue);
}

.vcp-galleria__strumenti {
    display: flex;
    gap: var(--vcp-spazio-8);
}

.vcp-galleria__strumento,
.vcp-galleria__freccia {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--vcp-altezza-44);
    height: var(--vcp-altezza-44);
    border-radius: var(--vcp-raggio-cerchio);
    background: var(--vcp-colore-controllo-su-immagine);
    box-shadow: var(--vcp-ombra-controllo-su-immagine);
    font-size: var(--vcp-testo-16);
    color: var(--vcp-colore-su-scuro);
    transition: background-color var(--vcp-durata-rapida), opacity var(--vcp-durata-rapida);
}

.vcp-galleria__strumento:hover,
.vcp-galleria__freccia:hover {
    background: var(--vcp-colore-controllo-su-immagine-attivo);
}

.vcp-galleria__strumento:focus-visible,
.vcp-galleria__freccia:focus-visible {
    box-shadow: var(--vcp-ombra-fuoco-su-immagine);
}

.vcp-galleria__strumento[aria-disabled="true"] {
    opacity: var(--vcp-opacita-disattivato);
    cursor: not-allowed;
}

.vcp-galleria__strumento[aria-disabled="true"]:hover {
    background: var(--vcp-colore-controllo-su-immagine);
}

.vcp-galleria__palco,
.vcp-galleria__freccia {
    grid-row: 2;
    grid-column: 1;
}

.vcp-galleria__palco {
    position: relative;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.vcp-galleria__freccia {
    z-index: var(--vcp-livello-rialzato);
    align-self: center;
    margin: 0 var(--vcp-spazio-8);
}

.vcp-galleria__freccia--precedente {
    justify-self: start;
}

.vcp-galleria__freccia--successivo {
    justify-self: end;
}

.vcp-galleria__diapositiva {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    padding: var(--vcp-spazio-8);
    transition: transform var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
}

.vcp-galleria__immagine,
.vcp-galleria__video,
.vcp-galleria__rotella {
    grid-area: 1 / 1;
}

.vcp-galleria__immagine,
.vcp-galleria__video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.vcp-galleria__video {
    width: 100%;
    height: auto;
    aspect-ratio: auto 16 / 9;
}

.vcp-galleria__immagine {
    cursor: zoom-in;
    transition: transform var(--vcp-durata) var(--vcp-curva-scorrimento), opacity var(--vcp-durata);
    -webkit-user-drag: none;
}

.vcp-galleria--ingrandita .vcp-galleria__immagine {
    cursor: grab;
}

.vcp-galleria--gesto .vcp-galleria__immagine,
.vcp-galleria--gesto .vcp-galleria__diapositiva {
    transition: none;
}

.vcp-galleria--gesto.vcp-galleria--ingrandita .vcp-galleria__immagine {
    cursor: grabbing;
}

.vcp-galleria__diapositiva--caricamento .vcp-galleria__immagine {
    opacity: 0;
}

.vcp-galleria__rotella {
    display: none;
    font-size: var(--vcp-testo-28);
    color: var(--vcp-colore-su-scuro-tenue);
}

.vcp-galleria__diapositiva--caricamento .vcp-galleria__rotella {
    display: block;
}

.vcp-galleria__scheda,
.vcp-galleria__errore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vcp-spazio-12);
    width: 100%;
    max-width: var(--vcp-campo-larghezza-massima);
    padding: var(--vcp-spazio-24);
    border-radius: var(--vcp-raggio-20);
    background: var(--vcp-colore-controllo-su-scuro);
    text-align: center;
    user-select: text;
    -webkit-user-select: text;
}

.vcp-galleria__scheda-icona,
.vcp-galleria__errore > i {
    font-size: var(--vcp-testo-30);
    color: var(--vcp-colore-su-scuro-tenue);
}

.vcp-galleria__nome-file,
.vcp-galleria__errore-testo {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
}

.vcp-galleria__nome-file {
    font-size: var(--vcp-testo-13);
    color: var(--vcp-colore-su-scuro-tenue);
}

.vcp-galleria__errore-testo,
.vcp-galleria__scheda .vcp-galleria__nome-file {
    font-size: var(--vcp-testo-15);
    font-weight: var(--vcp-peso-semigrassetto);
    color: var(--vcp-colore-su-scuro);
}

.vcp-galleria__nome-file:empty {
    display: none;
}

.vcp-galleria__collegamento {
    display: inline-flex;
    align-items: center;
    gap: var(--vcp-spazio-8);
    min-height: var(--vcp-altezza-44);
    padding: 0 var(--vcp-spazio-20);
    border-radius: var(--vcp-raggio-pillola);
    background: var(--vcp-colore-su-scuro);
    font-size: var(--vcp-testo-15);
    font-weight: var(--vcp-peso-semigrassetto);
    text-decoration: none;
    color: var(--vcp-colore-testo);
}

.vcp-galleria__collegamento:hover {
    color: var(--vcp-colore-primario);
}

.vcp-galleria__didascalia {
    margin: 0;
    padding: 0 var(--vcp-spazio-16);
    overflow: hidden;
    font-size: var(--vcp-testo-14);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--vcp-colore-su-scuro);
}

.vcp-galleria__didascalia:not(:empty) {
    padding-top: var(--vcp-spazio-8);
    padding-bottom: var(--vcp-spazio-12);
}

@media (min-width: 860px) {
    .vcp-galleria__barra {
        padding: var(--vcp-spazio-12) var(--vcp-spazio-16) var(--vcp-spazio-12) var(--vcp-spazio-24);
    }

    .vcp-galleria__freccia {
        width: var(--vcp-altezza-52);
        height: var(--vcp-altezza-52);
        margin: 0 var(--vcp-spazio-16);
        font-size: var(--vcp-testo-19);
    }

    .vcp-galleria__diapositiva {
        padding: var(--vcp-spazio-16);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .vcp-galleria__velo[open] {
        animation: vcp-galleria-compare var(--vcp-durata);
    }

    .vcp-galleria__diapositiva--da-successivo {
        animation: vcp-galleria-da-successivo var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
    }

    .vcp-galleria__diapositiva--da-precedente {
        animation: vcp-galleria-da-precedente var(--vcp-durata-scorrimento) var(--vcp-curva-scorrimento);
    }

    .vcp-galleria__rotella {
        animation: vcp-galleria-gira var(--vcp-durata-rotazione) linear infinite;
    }

    @keyframes vcp-galleria-compare {
        from {
            opacity: 0;
        }
    }

    @keyframes vcp-galleria-da-successivo {
        from {
            opacity: 0;
            transform: translateX(var(--vcp-spazio-48));
        }
    }

    @keyframes vcp-galleria-da-precedente {
        from {
            opacity: 0;
            transform: translateX(calc(-1 * var(--vcp-spazio-48)));
        }
    }

    @keyframes vcp-galleria-gira {
        to {
            transform: rotate(1turn);
        }
    }
}