/* 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;
}

/* Caption below the lightbox image (galleries with captions below their images, see main.js):
   opaque like the grid's caption bar, since it sits on the light overlay instead of the image.
   main.js caps the image at 80% of the viewport height, centred, so at least 10vh is left below
   it; a caption longer than that scrolls instead of running off the screen. */
.sl-wrapper .sl-image .sl-caption.pos-outside {
    background-color: #333;
    max-height: 10vh;
    overflow-y: auto;
}

/* 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;
}

/* Captions below the image (Pro). The caption strip is the tile's bottom border: main.js adds a
   tile's border height to the row spacing, so every row gets room for its captions without
   overlapping the next row.
   The strip fits --rgg-caption-lines lines of caption (default 1); a longer caption is cut off
   with an ellipsis. It's read with a fallback rather than declared here, so it can be set on the
   grid or any ancestor, e.g. body { --rgg-caption-lines: 3; }. The strip height follows from it:
   lines x 18px line height + 2 x 9px padding (36px for one line). */
.rgg-imagegrid.captions-below {
    --rgg-caption-height: calc(var(--rgg-caption-lines, 1) * 18px + 18px);
}

/* overflow: the caption sits outside the image box. !important because jQuery's animate() sets an
   inline overflow:hidden while the bubble effect animates the tile's size, which would hide the
   caption for the length of the animation. */
.rgg-imagegrid.captions-below > .rgg-img {
    overflow: visible !important;
    border-bottom: var(--rgg-caption-height) solid transparent;
    background-clip: padding-box; /* keep the loading placeholder out of the caption strip */
}

/* The anchor no longer clips, so the zoom effect clips the <img> itself. clip-path is applied
   before the scale, so inset by (1 - 1/scale)/2 per side to keep the visible area at the tile
   size. --rgg-zoom is set and transitioned together with the transform (see Tile.zoom). */
@property --rgg-zoom {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

.rgg-imagegrid.captions-below > .rgg-img > .rgg-tile-img {
    clip-path: inset(calc((1 - 1 / var(--rgg-zoom)) * 50%));
}

.rgg-imagegrid.captions-below .rgg-caption-container {
    top: 100%;
    height: var(--rgg-caption-height);
}

/* Same look as the overlay caption (text colour and font come from the base rule above), as a
   bar filling the strip, with the text centred in it. The background is opaque: there's no image
   behind it, and it matches the overlay's rgba(0,0,0,.8) on a white page. The explicit height
   keeps the bar for an empty caption. */
.rgg-imagegrid.captions-below .rgg-caption-container .rgg-caption {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #333;
    line-height: 18px;
    padding: 9px 10px;
}

/* overflow: hidden also lets this flex item shrink below a long word's width, so break-word can
   wrap it instead of it running out of the bar. */
.rgg-imagegrid.captions-below .rgg-inner-caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rgg-caption-lines, 1);
    overflow: hidden;
    overflow-wrap: break-word;
}


/*
    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;
}