/* ==========================================================================
   ISOTOPE — RENATO BIROLLI
   ========================================================================== */

/*
 * Le larghezze responsive delle colonne sono gestite
 * dal foglio style.css principale.
 *
 * isotope.css gestisce:
 * - contenitore uniforme delle miniature;
 * - centratura delle opere;
 * - titolo in sovrimpressione;
 * - transizioni Isotope;
 * - accessibilità.
 */


/* ==========================================================================
   ELEMENTO DELLA GRIGLIA
   ========================================================================== */

.grid-item {
    position: relative;
    float: left;

    /*
     * Tutte le opere occupano lo stesso spazio visivo.
     *
     * Il formato quadrato permette a opere verticali,
     * orizzontali e quasi quadrate di mantenere
     * un peso visivo comparabile.
     */
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    margin-bottom: 20px;

    overflow: hidden;

    /*
     * Fondo molto leggermente neutro.
     * Può essere sostituito con #fff per renderlo invisibile.
     */
    background-color: #fafafa;

    cursor: zoom-in;
}


/* ==========================================================================
   IMMAGINE DELL'OPERA
   ========================================================================== */

.grid-item > img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    /*
     * L'opera viene sempre mostrata integralmente.
     *
     * NON usare cover:
     * taglierebbe le opere verticali o orizzontali.
     */
    object-fit: contain;
    object-position: center;

    margin: 0;
    padding: 0;

    border: 0;

    transition:
        transform 0.22s ease,
        opacity 0.22s ease;
}


/*
 * Leggerissimo ingrandimento al passaggio del mouse.
 * Non altera né ritaglia l'immagine.
 */

.grid-item:hover > img {
    transform: scale(1.015);
}


/* ==========================================================================
   TITOLO / DIDASCALIA
   ========================================================================== */

.grid-item .title {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 10;

    width: 100%;

    margin: 0;
    padding: 8px 10px;

    box-sizing: border-box;

    background-color: rgba(35, 40, 45, 0.76);

    color: #fff;

    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}


/*
 * Mostra il titolo al passaggio del mouse
 * o quando l'elemento riceve il focus.
 */

.grid-item:hover .title,
.grid-item:focus-within .title {
    opacity: 1;
    visibility: visible;
}


/* ==========================================================================
   STATI ISOTOPE
   ========================================================================== */

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    z-index: 1;
    pointer-events: none;
}


/* ==========================================================================
   TRANSIZIONI ISOTOPE
   ========================================================================== */

.isotope {
    transition-property: height, width;
    transition-duration: 0.35s;
}

.isotope .isotope-item {
    transition-property: transform, opacity;
    transition-duration: 0.35s;
}


/* ==========================================================================
   DISABILITAZIONE TRANSIZIONI
   ========================================================================== */

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    transition-duration: 0s;
}


/* ==========================================================================
   ACCESSIBILITÀ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .isotope,
    .isotope .isotope-item,
    .grid-item > img,
    .grid-item .title {
        transition: none;
    }

    .grid-item:hover > img {
        transform: none;
    }

}