/**
 * =========================================================
 * ICC MEDIA GALLERY
 * =========================================================
 *
 * Thumbnail:
 * 180 x 150
 *
 * Original image:
 * Opens only after CLICK
 *
 * Works on all pages
 * =========================================================
 */


/* =========================================================
   THUMBNAIL IMAGE
   ========================================================= */

img.thumbnail {

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 170px !important;
    max-height: 140px !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: auto !important;
    padding: 0 !important;

    cursor: zoom-in !important;
}


/* =========================================================
   THUMBNAIL BOX
   ========================================================= */

.wp-block-image:has(img.thumbnail) {

    position: relative !important;

    width: 180px !important;
    height: 150px !important;

    min-width: 180px !important;
    max-width: 180px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 5px !important;

    background: #ffffff !important;

    border: 1px solid #dcdcde !important;

    border-radius: 3px !important;

    cursor: zoom-in !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* =========================================================
   THUMBNAIL HOVER
   ========================================================= */

.wp-block-image:has(img.thumbnail):hover {

    border-color: #2271b1 !important;

    box-shadow:
        0 0 0 1px #2271b1 !important;
}


/* =========================================================
   CLICK OVERLAY
   ========================================================= */

.icc-image-overlay {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 2147483647 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    padding: 20px !important;

    background:
        rgba(0, 0, 0, 0.88) !important;

    cursor: zoom-out !important;
}


/* =========================================================
   ORIGINAL / LARGE IMAGE
   ========================================================= */

.icc-large-image {

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 95vw !important;
    max-height: 95vh !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow:
        0 15px 60px
        rgba(0, 0, 0, 0.65) !important;

    cursor: default !important;
}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.icc-gallery-open {

    overflow: hidden !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    img.thumbnail {

        max-width: 140px !important;
        max-height: 115px !important;

    }


    .wp-block-image:has(img.thumbnail) {

        width: 150px !important;
        height: 125px !important;

        min-width: 150px !important;
        max-width: 150px !important;

    }


    .icc-image-overlay {

        padding: 10px !important;

    }


    .icc-large-image {

        max-width: 98vw !important;
        max-height: 95vh !important;

    }

}