/* The chrome both full-screen overlays share: the picture gallery (<x-gallery.lightbox>, gallery-lightbox.css) and the
video window (<x-video-lightbox-modal>, video-lightbox.css). Pushed by both components. Rounding: var(--bs-border-radius). The
modal-content also carries border-0 rounded-0. */

/* Dark, edge-to-edge backdrop, so a portrait picture's letterboxing reads as intentional. The bar variables are the
counter's font and its height (line 1.5 plus the padding twice), shared by everything that stands in its size: the
close button and, in the picture gallery, the grid switch and the grid title. */
.lightbox-content {
    --lightbox-arrow-alpha: .35;
    --lightbox-bar-font: 1.3125rem;
    --lightbox-bar-height: calc(var(--lightbox-bar-font) * 1.5 + .75rem);
    background-color: rgba(0, 0, 0, .95);
}

/* The same dark chip as the counter and, in the picture gallery, the grid switch (top left). Bootstrap's own
.btn-close keeps box-sizing:content-box and centres its background-image icon on its own, so overriding only the box
(padding 0, explicit width/height) is enough - no flex layout needed. */
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: var(--lightbox-bar-height);
    height: var(--lightbox-bar-height);
    padding: 0;
    border-radius: var(--bs-border-radius);
    background-color: rgba(0, 0, 0, .6);
    opacity: 1;
    /* A white cross of its own instead of Bootstrap's .btn-close-white: that one turns the black cross white with a
    filter (invert, grayscale, brightness) on the whole button, which inverts this dark background as well - grey in
    Chrome and Firefox, nearly white in Safari on an iPhone, a white cross on white (owner, 2026-10-15). */
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    filter: none;
}

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

.lightbox-counter {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    padding: .375rem 1.125rem;
    border-radius: var(--bs-border-radius);
    font-size: var(--lightbox-bar-font);
}

/* Arrows: a square with rounded corners (like the counter box above), not a circle. --lightbox-arrow-alpha is the
opacity of the box's own background-color only - the icon is a separately drawn background-image (SVG, fill="#fff",
fully opaque) on top of it. A lightbox that shows something busy (the video) makes it stronger. */
.lightbox-content .carousel-control-prev-icon,
.lightbox-content .carousel-control-next-icon {
    width: 3.16rem;
    height: 3.16rem;
    background-color: rgba(0, 0, 0, var(--lightbox-arrow-alpha));
    background-size: 1.44rem;
    border-radius: var(--bs-border-radius);
    transition: background-color .15s ease;
}

/* Bootstrap's .carousel-control-prev/-next sets opacity:.5 on the whole button (icon included), which would make the
pure-white SVG read as light gray; bumped back to fully opaque here. Hover goes to a fully solid background. */
.lightbox-content .carousel-control-prev,
.lightbox-content .carousel-control-next {
    opacity: 1;
}

.lightbox-content .carousel-control-prev:hover .carousel-control-prev-icon,
.lightbox-content .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 1);
}