/*
 * UpStage Image Gallery -- frontend base styles
 * Dynamic (responsive) CSS is inlined per block instance by PHP.
 */

/* ---- Wrapper ---- */
.ugb-image-gallery {
    box-sizing: border-box;
    width: 100%;
}

/* ---- Items grid/masonry container ---- */
.ugb-image-gallery .ugb-gallery-items {
    box-sizing: border-box;
    width: 100%;
}

/* ---- Individual item ---- */
.ugb-image-gallery .ugb-gallery-item {
    box-sizing: border-box;
    position: relative;
}

/* ---- Image wrapper: receives overflow:hidden + border/radius from dynamic CSS ---- */
.ugb-image-gallery .ugb-gallery-img-wrap {
    box-sizing: border-box;
    line-height: 0;
}

/* ---- Lightbox link wrapper ---- */
.ugb-image-gallery .ugb-gallery-link {
    display: block;
    line-height: 0;
    cursor: zoom-in;
}

/* ---- Image ---- */
.ugb-image-gallery .ugb-gallery-img {
    box-sizing: border-box;
    max-width: 100%;
}

/* ---- Caption: always below the image, never an overlay ---- */
.ugb-image-gallery .ugb-gallery-caption {
    margin: 0;
    padding: 0.4em 0.25em 0;
    font-size: 0.875em;
    line-height: 1.4;
    color: inherit;
    text-align: center;
}

/* ---- Masonry: images are naturally sized, no grid-row constraints ---- */
.ugb-image-gallery.ugb-layout-masonry .ugb-gallery-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Align wide / full support ---- */
.alignwide  .ugb-image-gallery,
.alignfull  .ugb-image-gallery {
    width: 100%;
}