/* reset commonly used image styles that can screw up the gallery */

.rgg-imagegrid a, .rgg-imagegrid a:hover {
    box-shadow: none;
}

.rgg-imagegrid { position: relative; clear:both; }

.rgg-imagegrid > .rgg-img {
    display:block;
    position: absolute;
    left:0;
    top:0;
    overflow: hidden; /* clip the inner <img> — e.g. when the zoom hover scales it past the tile */
    background-color:#f4f4f4; /* placeholder behind the image while it loads */
    /*border:4px solid #ffffff;*/
    /*padding: 5px;*/
    box-sizing: content-box;
}

/* Every tile is a real <img> filling the anchor box (replaces the old JS-painted CSS
   background-image and its 102%/cover background-size tricks). object-fit:cover crops to the
   tile, covering the fixed aspect-ratio (.rgg-crop) case too. transform-origin centres the
   zoom-hover scale (see Tile.zoom in main.js). */
.rgg-imagegrid > .rgg-img > .rgg-tile-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
}

/* Per-image duotone (Gutenberg): filter the <img> directly so it is recolored while the caption
   span (a sibling above it) stays un-recolored. */
.rgg-imagegrid > .rgg-img.rgg-duotone > .rgg-tile-img {
    filter: var(--rgg-duotone);
}

/* Native WP lightbox tiles carry no href, so the anchor keeps the default cursor; core only puts
   cursor:zoom-in on the tile <img>. An overlay caption (a span covering the whole tile) sits above
   the image and would otherwise inherit that default cursor, hiding the magnifier. Set zoom-in on
   the whole lightbox tile so it shows over the caption too (cursor is inherited). */
.rgg-imagegrid > .rgg-img.wp-lightbox-container {
    cursor: zoom-in;
}

/* SimpleLightbox sets the caption's inline width to the exact image width; without
   border-box its 10px padding would push it 20px wider than the image. */
.sl-wrapper .sl-image .sl-caption {
    box-sizing: border-box;
}

/* built-in captions styles and effects */

.rgg-caption-container {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height:100%;
    overflow: hidden;
    /*background-color: rgba(255,0,0,.5);*/
}

.rgg-caption-container .rgg-caption {
    box-sizing:border-box;
    position:absolute;
    left:0;
    bottom:0;
    /*transform: translate(0,100%);*/
    background-color: rgba(0,0,0,0.8);
    font-size: 12px;
    width: 100%;
    text-align:center;
    color: #eeeeee;
    font-weight:bold;
    padding: 10px;
}


/*
    Example 1: adding borders to the images.
    -------------------------------------------------------------------
    Copy the CSS below to your theme's style.css file and uncomment it.
    Then modify as necessary.
    - Note: you cannot add padding or margins this way. To add margins between the images set the margin parameter
            in the schortcode or globally under Dashboard > RGG Options > Margin
 */
/*
.rgg-imagegrid > .rgg-img {
    border: 4px solid #3c3c9c;
    border-bottom-width: 20px;
}
*/

/* ------------------------------------------------------------------------------------------------------------------ */

/*
     Example 2: Custom Captions CSS. (RGG Pro Only)
     ---------------------------------------------------------------------
     Copy the CSS below to your theme's style.css file and uncomment it.
     Then go to Dashboard > RGG Options, and set Captions to Custom Style.
*/
/*
.rgg-imagegrid.captions-custom .rgg-caption-container {
    background-color: rgba(0,0,0,.6);
}

.rgg-imagegrid.captions-custom .rgg-caption-container:hover {
    background-color: rgba(0,0,0,0);
}

.rgg-imagegrid.captions-custom .rgg-caption-container .rgg-caption {
    bottom:50%;
    transform: translate(0,50%);
    background-color: transparent;
    font-size: 20px;
    text-align:center;
    font-weight:bold;
    transition: all .5s ease;
}

.rgg-imagegrid.captions-custom .rgg-caption-container:hover .rgg-caption {
    transform: translate(0,50%) scale(2,2);
    opacity: 0;
}
*/

.image-above-container .slide {
    background-color: #303030;
    text-align: center;
}

.image-above-container .slide img {
    margin: 0 auto;
    max-width:100%;
    height: auto;
}