/*
| L'ingranditore delle immagini, per il sito e per la Console: il foglio sta
| accanto allo script (assets/js/ingranditore.js) e li carica insieme
| ingranditoreAssets(). Erano due stili quasi uguali, .immagine-ingrandita nel
| foglio della Console e .vetrina-velo nella pagina delle funzionalita': uno
| solo adesso, perche' e' lo stesso gesto e deve sembrare lo stesso.
|
| Il velo e' scuro perche' una schermata chiara su fondo chiaro non si stacca.
| 96vw/92vh e non 100: un margine attorno fa capire che sotto c'e' ancora la
| pagina, e che ci si torna. object-fit:contain perche' un'immagine tagliata
| per riempire lo schermo e' esattamente cio' che non si vuole quando la si
| sta ingrandendo per guardarla.
|
| I colori sono variabili di assets/css/tokens.css (--ingranditore-*), come
| tutti: una versione sola, perche' il velo e' scuro in tutti e due i temi.
*/
.ingranditore{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:var(--ingranditore-velo);
    cursor:zoom-out;
}

.ingranditore img{
    max-width:96vw;
    max-height:92vh;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 24px 60px var(--ingranditore-ombra);
    background:var(--ingranditore-fondo-immagine);
}

/* 40px: un bersaglio comodo per il dito, sopra i 24 minimi del progetto. */
.ingranditore-chiudi{
    position:absolute;
    top:16px;
    right:20px;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:var(--ingranditore-x);
    color:var(--ingranditore-x-testo);
    /* Il segno × piu grande del testo: e un bersaglio, non una parola. */
    font-size:var(--corpo-titolo-grande);
    line-height:1;
    cursor:pointer;
}

/* Due regole e non un gruppo: un browser che non conosce :focus-visible
   scarta la regola INTERA, e con lei il :hover (tests/browser_support.php). */
.ingranditore-chiudi:hover{
    background:var(--ingranditore-x-attiva);
}

.ingranditore-chiudi:focus-visible{
    background:var(--ingranditore-x-attiva);
}

/* In stampa il velo non serve a niente: si stampa la pagina, non l'immagine aperta sopra. */
@media print{
    .ingranditore{display:none;}
}