/* Styles of <x-gallery.lightbox>, shared by every site group and item type. Rounding: var(--bs-border-radius). */

/* The shade behind white text or icons on a picture, and what a box shows before its picture is there. */
:root {
    --gallery-shade: rgba(0, 0, 0, .55);
    --gallery-placeholder: #eef0f3;
    --gallery-placeholder-dark: #222;
}

/* The picture is a box of 4:3 as wide as its column, and nothing else decides its size: no height cap next to the ratio
(browsers disagree there - Firefox shrank the width to the capped height's 4:3, leaving white space beside it). */
.gallery-stage {
    position: relative;
}

.gallery-main {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--gallery-placeholder);
    border-radius: var(--bs-border-radius);
}

/* jumpTo() in gallery-lightbox.js puts this on a carousel (the compact one or the lightbox's) for the two frames an
instant jump takes: two classes beat Bootstrap's own single-class .carousel-item rule, so no !important is needed,
and nothing is left running once the class is gone again. */
.gallery-no-transition .carousel-item {
    transition: none;
}

/* Slide and picture fill the box (Bootstrap's carousel-inner has no height of its own, so the picture below would keep
its own ratio and leave a strip in the box when it is not 4:3). */
.gallery-main .carousel-inner,
.gallery-main .carousel-item {
    height: 100%;
}

/* This box opens the matching [data-gallery-lightbox] modal on click and stays cropped (object-fit:cover
below); the lightbox is where pictures show uncropped at their real aspect ratio. */
.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The invisible button over the picture that opens the lightbox for keyboard and screen reader users. Same
z-index as Bootstrap's arrows, but earlier in the markup, so the arrows stay on top of it. The magnifier tells a mouse
that a click enlarges (a touch screen has no cursor). ":not(:disabled)" because Bootstrap's reboot sets the pointer on
exactly that. */
.gallery-open,
.gallery-open:not(:disabled) {
    cursor: zoom-in;
}

.gallery-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    background: transparent;
}

.gallery-open:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: -3px;
}

/* Dark rounded-rect backing (not Bootstrap's plain transparent default) so
a white arrow doesn't disappear against a light patch of the picture, full-
opacity white icon. Arrow itself stays Bootstrap's own default 2rem -
background-size pinned to that so it doesn't stretch to fill the now-larger
box, which is what gives the box its own visible padding around the arrow. */
.gallery-main .carousel-control-prev-icon,
.gallery-main .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: rgba(0, 0, 0, .35);
    background-size: 2rem;
    border-radius: var(--bs-border-radius);
    /* Without this, the edge-padding below squeezes the icon narrower than
    its own 3rem on a narrow phone screen (the flex button's own width is
    only 15% of the picture, which on mobile can be less than 3rem + that
    padding). */
    flex-shrink: 0;
}

.gallery-main .carousel-control-prev,
.gallery-main .carousel-control-next {
    opacity: 1;
}

/* Bootstrap centers the icon within the whole 15%-wide click band
(carousel-control-prev/-next's own width), which leaves it sitting well in
from the true edge. Anchoring to flex-start/-end with a small fixed padding
instead pins it close to the true edge regardless of the band's own width,
rather than fighting the percentage-based centering. */
.gallery-main .carousel-control-prev {
    justify-content: flex-start;
    padding-left: .75rem;
}

.gallery-main .carousel-control-next {
    justify-content: flex-end;
    padding-right: .75rem;
}

/* Phone/tablet: swipe instead of arrows - the carousel handles touch swipe
once it has an instance (gallery-lightbox.js creates it at once), so the now-redundant buttons are hidden.
(hover: none), not a max-width breakpoint, targets whether the PRIMARY input
can hover at all, ie. true touch-only devices regardless of screen size; a
desktop/laptop keeps the arrows even at a narrow window width. */
@media (hover: none) {
    .gallery-main .carousel-control-prev,
    .gallery-main .carousel-control-next {
        display: none;
    }
}

/* The overlay's own chrome (backdrop, close button, counter, arrows) is lightbox.css. */

/* Original size, not stretched: max-width/-height only shrink an image that
is too big for the screen; width/height:auto (not 100%) keeps a smaller image
at its natural size instead of upscaling it to a pixelated mess. */
.gallery-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* The stage of the lightbox: the picture area, without the strip when there is none (a group without thumbnails). */
.lightbox-slides {
    height: 100%;
}

/* Zoom with the fingers (gallery-lightbox.js, initPinchZoom()): the browser hands every finger movement on the stage
to the script - not Bootstrap's pan-y, which forbids a pinch, and not its own page zoom. The picture follows the
fingers at once (.is-gesture) and glides back or in on a double tap. */
.lightbox-slides,
.lightbox-slides.pointer-event {
    touch-action: none;
}

.gallery-lightbox-img {
    transition: transform .2s ease;
}

.gallery-lightbox-img.is-gesture {
    transition: none;
}

/* ---- Thumbnail strip (<x-gallery.thumbs>): under the picture or left of it (capability galleryLayout) and at the bottom of the lightbox ---- */

/* A row that scrolls on its own (swipe, wheel, the arrows below); the script only keeps the active thumb in view.
Five thumbs across; the gap enters the width, so a full page of five fits the row exactly. */
.gallery-strip {
    --gallery-strip-gap: .5rem;
    --gallery-strip-visible: 5;
    position: relative;
}

.gallery-strip-track {
    display: flex;
    gap: var(--gallery-strip-gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.gallery-strip-track::-webkit-scrollbar {
    display: none;
}

.gallery-thumb {
    flex: 0 0 calc((100% - (var(--gallery-strip-visible) - 1) * var(--gallery-strip-gap)) / var(--gallery-strip-visible));
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: calc(var(--bs-border-radius) * .5);
    overflow: hidden;
    background-color: var(--gallery-placeholder);
    opacity: .7;
    scroll-snap-align: start;
    transition: opacity .15s ease;
}

.gallery-thumb img,
.lightbox-grid-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb:hover {
    opacity: 1;
}

/* An outline is painted over the picture inside the button, a border or shadow would not be. */
.gallery-thumb.is-active {
    opacity: 1;
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Inside the button, like .is-active above: the track that scrolls the strip clips anything painted outside its own
box, which cut this ring off before. */
.gallery-thumb:focus-visible {
    opacity: 1;
    outline: 3px solid var(--bs-primary);
    outline-offset: -3px;
}

/* Arrows of the row: a page of thumbs at a time. Shown by the script only while there is more in that direction;
on a touch screen the row is swiped instead. */
.gallery-strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius);
    background-color: var(--gallery-shade);
    color: #fff;
    font-size: 1rem;
}

.gallery-strip-arrow:hover {
    background-color: rgba(0, 0, 0, .8);
}

.gallery-strip-prev {
    left: .25rem;
}

.gallery-strip-next {
    right: .25rem;
}

@media (hover: none) {
    .gallery-strip-arrow {
        display: none;
    }
}

/* Under the picture on the page, from tablet width on (its class carries Bootstrap's own d-none d-md-block, not a
rule here - a phone swipes the picture and opens the grid instead, a strip of thumbs that small would be no better
than that). */
.gallery-strip-page {
    padding: .5rem;
}

.gallery-strip-page .gallery-strip-prev {
    left: .75rem;
}

.gallery-strip-page .gallery-strip-next {
    right: .75rem;
}

/* The row along the bottom of the picture: the position of the shown picture on the left, the button of the grid on the
right. The row itself and the counter are no target of clicks (the invisible button under them opens the lightbox). */
.gallery-hud {
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    pointer-events: none;
}

.gallery-counter,
.gallery-grid-open {
    padding: .4rem .8rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--gallery-shade);
    color: #fff;
    font-size: .95rem;
    line-height: 1.2;
}

/* Button on the picture that opens the grid of all pictures. */
.gallery-grid-open {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
}

.gallery-grid-open:hover {
    background-color: rgba(0, 0, 0, .8);
}

/* ---- Lightbox: strip at the bottom, grid over the whole window ---- */

/* The strip takes the height it needs off the picture area, and only where there is room for it (not on a phone,
not in a landscape phone). */
.lightbox-with-strip {
    --lightbox-strip-height: 6rem;
}

/* Not wider than the picture area above it: a picture of 4:3 in the height the strip leaves (the same at any picture, a
portrait one is no reason for a narrow strip), and at most the 1280 px of the large pictures, which are never shown
larger. A big screen would otherwise show all thumbs from its left edge to its right. */
.gallery-strip-lightbox {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 1280px, calc((100vh - var(--lightbox-strip-height)) * 4 / 3));
    height: var(--lightbox-strip-height);
    margin: 0 auto;
    padding: .75rem 1rem;
}

.gallery-strip-lightbox .gallery-strip-track {
    width: max-content;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* As high as the strip minus its own padding (.75rem twice). */
.gallery-strip-lightbox .gallery-thumb {
    flex: 0 0 auto;
    width: 6rem;
    height: calc(var(--lightbox-strip-height) - 1.5rem);
    background-color: var(--gallery-placeholder-dark);
    opacity: .55;
}

.gallery-strip-lightbox .gallery-thumb:hover {
    opacity: 1;
}

.gallery-strip-lightbox .gallery-thumb.is-active {
    opacity: 1;
    outline-color: #fff;
}

/* Without this, the plain .gallery-thumb:focus-visible rule above (opacity:1) and the opacity:.55 rule above this one
have equal specificity, so the later one in the file - here, always the .55 - wins and keyboard focus on a dark
thumb never shows as lit. */
.gallery-strip-lightbox .gallery-thumb:focus-visible {
    opacity: 1;
    outline-color: #fff;
}

.gallery-strip-lightbox .gallery-strip-prev {
    left: 1rem;
}

.gallery-strip-lightbox .gallery-strip-next {
    right: 1rem;
}

@media (min-width: 768px) and (min-height: 560px) {
    .lightbox-with-strip .lightbox-slides {
        height: calc(100% - var(--lightbox-strip-height));
    }

    .gallery-strip-lightbox {
        display: block;
    }
}

/* The switch from the slide show to the grid, top left (gone in the grid, a tile leads back) - the counter's twin in height and
colour: a square of --lightbox-bar-height (lightbox.css), the icon as large as fits into it. */
.lightbox-grid-toggle {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--lightbox-bar-height);
    height: var(--lightbox-bar-height);
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius);
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
}

.lightbox-grid-toggle:hover {
    background-color: rgba(0, 0, 0, 1);
}

.lightbox-grid {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow-y: auto;
    padding: 1rem 1rem 2rem;
}

.lightbox-grid-inner {
    max-width: 72rem;
    margin: 0 auto;
}

/* As tall as the counter and the switch of the slide show, so the title sits on their line. */
.lightbox-grid-title {
    display: flex;
    align-items: center;
    min-height: var(--lightbox-bar-height);
    margin: 0 3rem 1rem 0;
    color: #fff;
    font-size: var(--lightbox-bar-font);
}

/* Three across on a phone, six on a desktop over the width of the box above (72rem), four in between. */
.lightbox-grid-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

@media (min-width: 768px) {
    .lightbox-grid-tiles {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) {
    .lightbox-grid-tiles {
        grid-template-columns: repeat(6, 1fr);
    }
}

.lightbox-grid-tile {
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background-color: var(--gallery-placeholder-dark);
    opacity: .85;
    transition: opacity .15s ease;
}

.lightbox-grid-tile:hover,
.lightbox-grid-tile:focus-visible {
    opacity: 1;
}

.lightbox-grid-tile.is-current {
    opacity: 1;
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* In the grid (the class is set by the script) the slide show underneath and its strip are out of sight and out of the
tab order. */
.lightbox-content.is-grid .lightbox-grid {
    display: block;
}

.lightbox-content.is-grid .lightbox-slides,
.lightbox-content.is-grid .gallery-strip-lightbox {
    visibility: hidden;
}

.lightbox-content.is-grid .lightbox-counter,
.lightbox-content.is-grid .lightbox-grid-toggle {
    display: none;
}

/* ---- Where the thumbnails sit (capability galleryLayout): 'below' is the strip under the picture above, 'left' and
'right' put a column beside it from tablet width on. A phone shows the picture alone, with the counter and the button. ---- */

@media (min-width: 768px) {
    .gallery-layout-left,
    .gallery-layout-right {
        display: grid;
        gap: .5rem;
        padding: .5rem;
    }

    .gallery-layout-left {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    .gallery-layout-right {
        grid-template-columns: minmax(0, 1fr) 8rem;
    }

    /* The column is the way into the grid here (its last slot "+N"), so the button on the picture goes. */
    .gallery-layout-left .gallery-grid-open,
    .gallery-layout-right .gallery-grid-open {
        display: none;
    }
}

/* Beside the picture the row leaves the corner of the video icon (bottom right) alone and keeps to the left. */
.gallery-layout-left .gallery-hud,
.gallery-layout-right .gallery-hud {
    right: 3.5rem;
    justify-content: flex-start;
}

/* 'left': a column of four thumbs as high as the picture next to it (the row's height comes from the picture; the track
lies over the strip's box, so its thumbs cannot make it higher). The size of a thumb is the strip's rule above, with
four instead of five in a row - along the column here. Shown from tablet width on by its own Bootstrap classes
(d-none d-md-block), same reasoning as .gallery-strip-page above. */
.gallery-strip-vertical {
    --gallery-strip-visible: 4;
}

.gallery-strip-vertical .gallery-strip-track {
    position: absolute;
    inset: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
}

.gallery-strip-vertical .gallery-thumb {
    width: 100%;
    aspect-ratio: auto;
}

/* "+N" over a thumb or a tile: the pictures out of sight. */
.gallery-strip-more,
.gallery-tile-more {
    background-color: var(--gallery-shade);
    color: #fff;
    font-size: 1.25rem;
}

.gallery-strip-more:hover,
.gallery-tile:hover .gallery-tile-more {
    background-color: rgba(0, 0, 0, .7);
}

/* On the last slot of the vertical strip (the script counts and hides it when there are no pictures out of sight). */
.gallery-strip-more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: calc((100% - (var(--gallery-strip-visible) - 1) * var(--gallery-strip-gap)) / var(--gallery-strip-visible));
    padding: 0;
    border: 0;
    border-radius: calc(var(--bs-border-radius) * .5);
}

/* 'right': four fixed tiles, the fourth with "+N". Their pictures lie over the tiles (a tile has no height of its own), so
the column is as high as the picture and no higher. A tile is a quarter of the column high, also when a listing has fewer
pictures (two pictures must not make one tall sliver). Layout by its Bootstrap classes (d-none d-md-flex flex-column
gap-2: from tablet width on, one column). */
.gallery-tile {
    position: relative;
    flex: 0 1 calc((100% - 3 * .5rem) / 4);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: calc(var(--bs-border-radius) * .5);
    overflow: hidden;
    background-color: var(--gallery-placeholder);
}

.gallery-tile,
.gallery-tile:not(:disabled) {
    cursor: zoom-in;
}

.gallery-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .15s ease;
}

.gallery-tile:hover img {
    opacity: .85;
}

.gallery-tile:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

.gallery-tile-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}