/* Photo galleries in page content ([[PHOTOGALLERY-n ...]], include/gallery.php).
   Loaded by gallery_scripts() only on pages that show a gallery. */

.cms-gallery {
    margin:10px 0;
}
.cms-gallery-single .galleria {
    width:100%;
}
.cms-gallery-empty {
    padding:40px 0;
    text-align:center;
}

/* Banner: photos side by side (Owl Carousel with autoWidth). Every photo is shown whole at the
   banner height (--cms-banner-h, set from the code's height=N option); its width follows its shape. */
.cms-gallery-banner {
    --cms-banner-h:220px;
}
.cms-gallery-banner .item {
    display:block;
    cursor:zoom-in;
}
.cms-gallery-banner .item img {
    display:block;
    height:var(--cms-banner-h);
    width:auto !important;          /* Owl sets width:100% on images */
    max-width:var(--cms-banner-maxw, calc(100vw - 60px));   /* never wider than the banner: a very wide photo on a phone is scaled down, not cut off (set by gallery_scripts) */
    object-fit:contain;
    border-radius:4px;
}
.cms-gallery-banner.owl-carousel .owl-stage {
    display:flex;
    align-items:center;
}
.cms-gallery-banner.owl-carousel .owl-nav {
    margin:0;
}
.cms-gallery-banner.owl-carousel .owl-nav button.owl-prev,
.cms-gallery-banner.owl-carousel .owl-nav button.owl-next {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    margin:0;
    border-radius:50%;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size:26px;
    line-height:32px;
}
.cms-gallery-banner.owl-carousel .owl-nav button.owl-prev { left:6px; }
.cms-gallery-banner.owl-carousel .owl-nav button.owl-next { right:6px; }
.cms-gallery-banner.owl-carousel .owl-nav button:hover {
    background:rgba(0,0,0,0.8);
}
.cms-gallery-banner.owl-carousel .owl-nav button.disabled {
    opacity:0.3;
}

/* Overlay showing one photo large (click a banner photo) */
.cms-lightbox {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:20000;                  /* above the fixed menu bar (9999) */
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.9);
}
.cms-lightbox[hidden] {
    display:none;
}
.cms-lightbox figure {
    margin:0;
    max-width:90vw;
    text-align:center;
}
.cms-lightbox img {
    display:block;
    max-width:90vw;
    max-height:82vh;
    margin:0 auto;
    background:#fff;
    border-radius:4px;
    box-shadow:0 4px 30px rgba(0,0,0,0.5);
}
.cms-lightbox figcaption {
    color:#fff;
    margin-top:10px;
    font-size:15px;
}
.cms-lightbox figcaption:empty {
    display:none;
}
.cms-lightbox button {
    position:absolute;
    border:0;
    background:rgba(255,255,255,0.15);
    color:#fff;
    cursor:pointer;
    border-radius:50%;
    width:48px;
    height:48px;
    font-size:32px;
    line-height:44px;
    padding:0;
}
.cms-lightbox button:hover,
.cms-lightbox button:focus {
    background:rgba(255,255,255,0.3);
    outline:none;
}
.cms-lightbox .cms-lb-close {
    top:14px;
    right:14px;
}
.cms-lightbox .cms-lb-prev,
.cms-lightbox .cms-lb-next {
    top:50%;
    transform:translateY(-50%);
}
.cms-lightbox .cms-lb-prev { left:14px; }
.cms-lightbox .cms-lb-next { right:14px; }
.cms-lightbox .cms-lb-count {
    position:absolute;
    top:24px;
    left:20px;
    color:#ccc;
    font-size:14px;
}
@media screen and (max-width: 575px) {
    .cms-lightbox .cms-lb-prev,
    .cms-lightbox .cms-lb-next {
        top:auto;
        bottom:20px;
        transform:none;
    }
}
body.cms-lightbox-open {
    overflow:hidden;                /* the page doesn't scroll behind the overlay */
}