/* =========================================================
   SQ CUSTOM - WORKS / SQUARESPACE
   ---------------------------------------------------------
   Squarespace-specifieke styling voor de Works-pagina's.

   Bevat:
   1. Vorige / volgende artwork-navigatie
   2. Gallery
   3. Mobiele artwork-navigatie
   4. Gallery-lightbox
   ========================================================= */


/* =========================================================
   1. VORIGE / VOLGENDE ARTWORK-NAVIGATIE
   ========================================================= */

/* Navigatiecontainer */
#itemPagination {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    position: relative;
    margin: 25px 25px 50px 25px;
}

/* Volgend artwork rechts positioneren */
#itemPagination > .item-pagination-link--next {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* Vorig artwork links positioneren */
#itemPagination > .item-pagination-link--prev {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Artwork-titel */
#itemPagination .item-pagination-title {
    font-size: 2rem !important;
}

/* Navigatiepijl */
#itemPagination .item-pagination-icon svg {
    width: 2em !important;
    height: 2em !important;
    position: relative;
    top: 1px;
}

/* Verticale uitlijning van de navigatiepijl */
#itemPagination .item-pagination-icon {
    display: flex;
    align-items: center;
}


/* =========================================================
   2. GALLERY
   ========================================================= */

.gallery-strips {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   3. MOBIELE ARTWORK-NAVIGATIE
   ========================================================= */

@media screen and (max-width: 767px) {

    /* Kleinere artwork-titel */
    #itemPagination .item-pagination-title {
        font-size: 1.2rem !important;
    }

    /* Kleinere navigatiepijl */
    #itemPagination .item-pagination-icon svg {
        width: 1.2em !important;
        height: 1.2em !important;
    }
}


/* =========================================================
   4. GALLERY-LIGHTBOX
   ========================================================= */

/* Donkere achtergrond */
.gallery-lightbox-background {
    background-color: #000000 !important;
    opacity: 0.85 !important;
}

/* Witte sluit- en navigatieknoppen */
.gallery-lightbox-close-btn,
.gallery-lightbox-control-btn {
    color: #ffffff !important;
}