/**
 * FlowGallery — Custom styles
 *
 * @copyright  (C) 2026 FlowAds. All rights reserved.
 * @license    GNU General Public License version 2 or later
 */

/* ------------------------------------------------------------------ */
/*  Grid layout (default)                                             */
/* ------------------------------------------------------------------ */
.flowgallery--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ------------------------------------------------------------------ */
/*  Masonry layout (CSS columns fallback)                             */
/* ------------------------------------------------------------------ */
/* Column WIDTH comes from the plugin inline (column-width: <thumb_width>px),
   so the count reflows with the viewport and needs no media query. The
   images keep their own proportions - no object-fit, no fixed height. */
/* CSS columns do NOT space stacked items with row-gap - the space between
   items in a column is the item's OWN margin. So the gap parameter has to
   reach that margin, or setting gap to 0 still leaves a fixed 10px band.
   --fg-gap is written on the container by the plugin. */
.flowgallery--masonry {
    column-gap: var(--fg-gap, 10px);
}

.flowgallery--masonry > a {
    display: block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: var(--fg-gap, 10px);
}

.flowgallery--masonry > a > img {
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------ */
/*  Justified layout (flexbox)                                        */
/* ------------------------------------------------------------------ */
/* Equal-height rows, widths in proportion to each image's real shape.
   --fg-ar is written per item by the plugin from the actual pixel
   dimensions; --fg-row is the target row height. A bare flex-grow:1 (what
   this used to be) makes a portrait as wide as a panorama, which is why
   the old "justified" was not justified. */
.flowgallery--justified {
    display: flex;
    flex-wrap: wrap;
}

.flowgallery--justified > a {
    height: var(--fg-row, 150px);
    flex-grow: var(--fg-ar, 1);
    flex-basis: calc(var(--fg-ar, 1) * var(--fg-row, 150px));
}

.flowgallery--justified > a > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

/* ------------------------------------------------------------------ */
/*  Carousel layout (1.5.0)                                           */
/* ------------------------------------------------------------------ */
/* One row that scrolls sideways and snaps to each photo. --fg-row is the
   row height; each photo keeps its own width at that height. */
.flowgallery--carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.flowgallery--carousel > a {
    flex: 0 0 auto;
    height: var(--fg-row, 150px);
    scroll-snap-align: start;
}

.flowgallery--carousel > a > img {
    height: 100%;
    width: auto;
    vertical-align: bottom;
}

/* ------------------------------------------------------------------ */
/*  Teaser (1.5.0)                                                    */
/* ------------------------------------------------------------------ */
/* teaser=N: photos after the Nth stay in the gallery (the lightbox still
   walks them) but leave the page; the Nth shows how many more there are. */
.flowgallery > a.flowgallery__teased {
    display: none;
}

.flowgallery > a.flowgallery__more {
    position: relative;
}

.flowgallery > a.flowgallery__more::after {
    content: attr(data-fg-more);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.6em;
    font-weight: 600;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/*  Common thumbnail styles                                           */
/* ------------------------------------------------------------------ */
.flowgallery a {
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

.flowgallery a img {
    display: block;
    transition: transform 0.3s ease;
}

.flowgallery a:hover img {
    transform: scale(1.05);
}

/* ------------------------------------------------------------------ */
/*  Page-level promo slots (top / bottom of the gallery)               */
/* ------------------------------------------------------------------ */
.flowgallery-promo {
    margin: 10px 0;
}

.flowgallery-promo:empty {
    display: none;
}

/* ------------------------------------------------------------------ */
/*  Error messages                                                    */
/* ------------------------------------------------------------------ */
.flowgallery-error {
    color: #c00;
    padding: 8px 12px;
    background: #fff0f0;
    border: 1px solid #fcc;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ------------------------------------------------------------------ */
/*  "View more photos from ..." under a library gallery (1.7.0)       */
/* ------------------------------------------------------------------ */
.flowgallery-viewmore {
    margin: 0.5em 0 1.5em;
    font-size: 0.95em;
}

/* ------------------------------------------------------------------ */
/*  Lightbox slot / drawer (sub-html area)                            */
/* ------------------------------------------------------------------ */
.flowgallery-slot {
    padding: 8px 16px;
    text-align: center;
}

.flowgallery-slot__caption {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #eee;
}

.flowgallery-slot__module {
    margin-top: 8px;
}

/* When both caption and module are present, add a subtle separator */
.flowgallery-slot__caption + .flowgallery-slot__module {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ------------------------------------------------------------------ */
/*  FlowAds slot inside lightbox (JS-driven, kept for compatibility)  */
/* ------------------------------------------------------------------ */
.flowgallery-flowads {
    padding: 10px;
    text-align: center;
}

.flowgallery-flowads--below {
    width: 100%;
    position: relative;
    z-index: 10;
}

.flowgallery-flowads--sidebar {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    z-index: 10;
}

/* ------------------------------------------------------------------ */
/*  Responsive                                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .flowgallery-flowads--sidebar {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        transform: none;
    }

    .flowgallery-slot {
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
}

/* ------------------------------------------------------------------ */
/*  Lightbox presentation: shadowbox                                  */
/* ------------------------------------------------------------------ */
/*
 * lightGallery's own look is a full-viewport black overlay. `shadowbox`
 * contains it: the photo sits in a card with the article dimmed behind it,
 * which is both the lighter-feeling presentation and the only shape where a
 * rail can sit BESIDE the image instead of on top of it.
 *
 * The class reaches .lg-container two ways: lightGallery's own addClass puts
 * it there (measured against 2.8.2 - it is NOT put on .lg-outer), and the
 * initialiser adds it again on open as a guard. The container is the right
 * anchor because .lg-backdrop is a SIBLING of .lg-outer, so a rule scoped to
 * .lg-outer could never restyle the backdrop.
 *
 * Nothing here touches a vendor file.
 */
/* Backdrop opacity is a PARAMETER, set per gallery as --fg-backdrop-alpha by
   the initialiser. The fallback is 1, i.e. the solid black lightGallery ships
   with, so a gallery that never sets it looks exactly as it did before.
   Scoped to .lg-container so a non-FlowGallery lightbox is left alone. */
.lg-container .lg-backdrop {
    background-color: rgb(10 10 14 / var(--fg-backdrop-alpha, 1));
}

.fg-lb-shadowbox .lg-outer {
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(94vw, 1180px);
    height: 92vh;
    border-radius: 12px;
    overflow: hidden;
    background-color: #121215;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------ */
/*  Lightbox side rail (module / promo content beside the photo)      */
/* ------------------------------------------------------------------ */
.flowgallery-rail {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    /*
     * Below .lg-toolbar (1082) on purpose. The toolbar carries the close
     * button, and a rail that covers it traps the reader in the lightbox.
     */
    z-index: 1081;
}

/* Give the slide area the remaining width so the rail never sits on the
   photo. This is the whole reason the rail wants a contained lightbox. */
.fg-has-rail .lg-content,
.fg-has-rail .lg-sub-html {
    right: 300px;
}

/* ------------------------------------------------------------------ */
/*  Small screens                                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* A contained box wastes a phone screen - go full bleed. */
    .fg-lb-shadowbox .lg-outer {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    /* A 300px rail beside a phone-width photo leaves room for neither, so
       it drops under the image instead of beside it. */
    .flowgallery-rail {
        position: static;
        width: 100%;
        height: auto;
        max-height: 40%;
    }

    .fg-has-rail .lg-content,
    .fg-has-rail .lg-sub-html {
        right: 0;
    }
}

/* subfolders=group: one heading per child folder */
.flowgallery-group__heading {
    margin: 1.25em 0 0.5em;
}