/* ============================================================================================================================
	rm-gallery.css - the image/video lightbox (assets/js/ui/rm-gallery.js, Step 3a, 5 Oct 2026; lightGallery 1.6.12 before). The look of
	lightGallery as the site had it: a black screen, the picture or video in the middle, a translucent bar at the top with the
	counter, download and close, translucent arrows at the sides, the caption at the bottom; buttons grey, white under the pointer,
	keyboard focus in the accent colour. Colours from the brand tokens (assets/tokens/rm-brand-tokens.css).
============================================================================================================================ */

.rm-gallery {
	--rm-gallery-bg: var(--rm-black);
	--rm-gallery-bar: rgba(0, 0, 0, 0.45);
	--rm-gallery-icon: var(--rm-grey-99);
	--rm-gallery-icon-hover: var(--rm-white);
	--rm-gallery-caption: var(--rm-text-on-dark);
	--rm-gallery-speed: 400ms;
	--rm-gallery-video-max-width: 1440px;

	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	color: var(--rm-gallery-caption);
	background: var(--rm-gallery-bg);
	font-family: var(--rm-font-family);
	opacity: 1;
	transition: opacity var(--rm-gallery-speed) ease-out;
	@starting-style { opacity: 0; }
}
.rm-gallery::backdrop { background: var(--rm-gallery-bg); }
.rm-gallery:focus { outline: none; }
html:has(.rm-gallery[open]) { overflow: hidden; }

/* ---- slides ---- */
.rm-gallery__stage {
	position: absolute;
	inset: 0;
	touch-action: pan-y pinch-zoom;
	user-select: none;
}
.rm-gallery__stage.is-zoomed { touch-action: auto; }		/* (zoomed in: a finger pans across the picture; rm-gallery.js does not swipe) */
.rm-gallery__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 47px 0;
	opacity: 0;
	visibility: hidden;
	transition: transform var(--rm-gallery-speed) ease, translate var(--rm-gallery-speed) ease, opacity var(--rm-gallery-speed) ease, visibility var(--rm-gallery-speed);
}
.rm-gallery__slide[data-pos="prev"] { transform: translateX(-100%); }
.rm-gallery__slide[data-pos="next"] { transform: translateX(100%); }
.rm-gallery__slide.is-current { transform: none; opacity: 1; visibility: visible; }
.rm-gallery__stage.is-dragging .rm-gallery__slide { transition: none; }
.rm-gallery__stage.is-dragging .rm-gallery__slide:is([data-pos="prev"], [data-pos="next"]) { opacity: 1; visibility: visible; }

.rm-gallery__media--image img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	-webkit-user-drag: none;
}
.rm-gallery__media--image { display: contents; }
/* the gallery items on the page (links, and the video spans rm-gallery.js makes buttons): keyboard focus in the accent
   (!important: beats rm-base.css's :focus { outline: none !important }) */
.lightgallery > :focus-visible { outline: 2px solid var(--rm-accent) !important; outline-offset: 2px; }
.rm-gallery__error { margin: 0; padding: var(--rm-space-4); color: var(--rm-gallery-caption); font-size: 16px; text-align: center; }

/* videos: 16:9, as wide as the window allows (up to the gallery's videoMaxWidth) */
.rm-gallery__media--youtube,
.rm-gallery__media--video {
	position: relative;
	width: min(100%, var(--rm-gallery-video-max-width), calc((100vh - 94px) * 16 / 9));
	aspect-ratio: 16 / 9;
	background: var(--rm-black);
}
.rm-gallery__media iframe,
.rm-gallery__media video,
.rm-gallery__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.rm-gallery__poster {
	padding: 0;
	background: var(--rm-black) center / cover no-repeat;
	color: var(--rm-white);
	cursor: pointer;
}
.rm-gallery__poster i {
	display: inline-grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	font-size: 30px;
	--rm-gallery-play-bg: rgba(0, 0, 0, 0.55);
	background: var(--rm-gallery-play-bg);
	transition: background-color var(--rm-duration-fast);
}
.rm-gallery__poster:hover i,
.rm-gallery__poster:focus-visible i { background: var(--rm-accent); }

/* ---- toolbar, arrows, caption ---- */
.rm-gallery__toolbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	height: 47px;
	background: var(--rm-gallery-bar);
	z-index: var(--rm-z-raised-2);
}
/* (text for screen readers only: the caption read with the counter) */
.rm-gallery__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.rm-gallery__counter {
	margin-right: auto;
	padding-left: var(--rm-space-4);
	color: var(--rm-gallery-icon);
	font-size: 16px;
}
.rm-gallery__button {
	display: inline-grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rm-gallery-icon);
	cursor: pointer;
	text-decoration: none;
	transition: color var(--rm-duration-fast) linear;
}
.rm-gallery__button:hover,
.rm-gallery__button:focus-visible { color: var(--rm-gallery-icon-hover); }
/* (a video's own focus - its controls are the browser's: an accent ring inside it; !important beats rm-base.css's :focus rule) */
.rm-gallery__media video:focus-visible { outline: 2px solid var(--rm-accent) !important; outline-offset: -2px; }
/* (keyboard focus: a ring in the accent - a box-shadow, as rm-base.css removes outlines) */
.rm-gallery__button:focus-visible { box-shadow: inset 0 0 0 2px var(--rm-accent); }
.rm-gallery__button[hidden] { display: none; }
.rm-gallery__toolbar .rm-gallery__button { width: 50px; height: 47px; font-size: 22px; }

.rm-gallery__prev,
.rm-gallery__next {
	position: absolute;
	top: 50%;
	z-index: var(--rm-z-raised-2);
	width: 42px;
	height: 40px;
	margin-top: -20px;
	border-radius: var(--rm-radius-sm);
	font-size: 26px;
	background: var(--rm-gallery-bar);
}
.rm-gallery__prev { left: 20px; }
.rm-gallery__next { right: 20px; }

.rm-gallery__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--rm-z-raised-2);
	padding: var(--rm-space-2) var(--rm-space-6);
	color: var(--rm-gallery-caption);
	font-size: 16px;
	text-align: center;
	background: var(--rm-gallery-bar);
}
.rm-gallery__caption[hidden] { display: none; }

/* reduced motion: the pictures change in place (a short fade), no sliding */
@media (prefers-reduced-motion: reduce) {
	.rm-gallery__slide { transition: opacity var(--rm-duration-fast), visibility var(--rm-duration-fast); }
	.rm-gallery__slide[data-pos] { transform: none; }
	.rm-gallery__stage.is-dragging .rm-gallery__slide:is([data-pos="prev"], [data-pos="next"]) { opacity: 0; visibility: hidden; }
}

@media (max-width: 575.98px) {
	.rm-gallery__prev { left: 6px; }
	.rm-gallery__next { right: 6px; }
	.rm-gallery__caption { padding: 8px var(--rm-space-3); font-size: 14px; }
}