/* Telefono. `-webkit-min-device-pixel-ratio: 2` esclude i telefoni non retina:
   e' come sta in UmbriaFiere e si porta identico. */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    /* Su telefono la vetrina e' SEMPRE a immagine intera, mai divisa in due.
       Due meta' su uno schermo largo 390px darebbero due strisce da 195px, che
       di una fotografia non fanno vedere niente. Si mostra la prima meta' e
       si nasconde l'altra: il contenuto resta salvato, cambia cosa si vede. */
    .vetrina--split .vetrina__meta--destra {
        display: none;
    }

    .vetrina--split .vetrina__meta--sinistra {
        flex: 1;
    }

    /* Le parole sopra la fotografia si stringono: 34ch su 390px sfondano */
    .vetrina__parole {
        max-width: none;
        padding: 16px;
    }

    /* L'elenco si impila: due colonne su 390px darebbero 162px di testo
       contro 590px di riquadro, e il testo andrebbe a capo a ogni parola */
    .elenco__colonne {
        flex-direction: column;
    }

    .elenco__vetrina {
        flex: none;
        height: 60vh;
    }

    /* Senza cursore non c'e' hover: i progetti tornano sotto la loro
       categoria e si vedono tutti, se no sono irraggiungibili.
       Impilati non servono piu' tre colonne: il testo e i progetti sono un
       elenco solo, come prima che si dividessero */
    .elenco__testo,
    .elenco__progetti {
        flex: none;
        width: 100%;
    }

    .elenco__progetti {
        position: static;
    }

    .elenco__gruppo {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        margin-left: 12%;
    }

    .elenco__figli > li > .elenco__link {
        pointer-events: auto;
    }

}

@media only screen and (min-width: 667px) and (max-width: 926px) and (max-height: 428px) and (orientation: landscape) {
    /* Anche coricato: lo schermo e' alto 428px, e due meta' resterebbero
       due strisce */
    .vetrina--split .vetrina__meta--destra {
        display: none;
    }

    .vetrina--split .vetrina__meta--sinistra {
        flex: 1;
    }
}