/*
 * Photo lightbox (assets/js/lightbox.js): the one lightbox of the site, for the product gallery and the
 * photo grids of Realizácie. Shown in the styleguide (styleguide.php, Lightbox).
 *
 *   .pg-lightbox          full screen <dialog>: bar (counter, zoom, close), strip of photos, thumbnails
 *   .pg-lightbox__arrow   previous and next over the photo (pointers that can hover), round: off only with one photo
 *
 * Background and text: --pg-lightbox-bg and --pg-lightbox-fg (tokens.css). The buttons and the focus
 * ring read the colour roles, which follow --pg-lightbox-fg, so a dark background needs only those two.
 */

html.pg-lightbox-open { overflow: hidden; }

.pg-lightbox {
	--pg-ink: var(--pg-lightbox-fg);
	--pg-ink-inverse: var(--pg-lightbox-bg);
	--pg-ink-paper: var(--pg-lightbox-bg);
	--pg-focus-color: var(--pg-lightbox-fg);
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--pg-lightbox-bg);
	color: var(--pg-lightbox-fg);
}

.pg-lightbox[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-columns: minmax(0, 1fr); /* the width of the screen: the strip with the clones of an endless row (loop.js)
	                                          made the column as wide as its photos and the photo stood off the screen */
}

/* The dialog covers the screen and paints the background itself (custom properties do not reach
   ::backdrop in every browser). */
.pg-lightbox::backdrop { background: transparent; }

.pg-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pg-gap-el);
	padding: var(--pg-space-4) var(--pg-gutter);
}

.pg-lightbox__count {
	font-size: var(--pg-text-s);
	font-weight: var(--pg-fw-bold);
	font-variant-numeric: tabular-nums;
}

.pg-lightbox__tools { display: flex; gap: var(--pg-space-4); }

.pg-lightbox__stage {
	position: relative;
	min-height: 0;
}

.pg-lightbox__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pg-lightbox__track::-webkit-scrollbar { display: none; }

.pg-lightbox__track.is-zoomed { overflow: hidden; } /* a zoomed photo is dragged, not swiped away */

.pg-lightbox__slide {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	height: 100%;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	touch-action: pan-x pan-y;
}

.pg-lightbox__slide.is-zoomed { touch-action: none; cursor: grab; }

.pg-lightbox__img {
	background: var(--pg-surface-card); /* the frame of the photo while the full size loads */
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
	transition: transform var(--pg-dur) var(--pg-ease-out);
}

.pg-lightbox__slide.is-zoomed .pg-lightbox__img { cursor: grab; }
.pg-lightbox__img.is-dragging { transition: none; cursor: grabbing; }

.pg-lightbox__arrow {
	position: absolute;
	top: 50%;
	z-index: var(--pg-z-raised);
	translate: 0 -50%;
}

.pg-lightbox__arrow--prev { left: var(--pg-gutter); }
.pg-lightbox__arrow--next { right: var(--pg-gutter); }

.pg-lightbox__thumbs {
	display: flex;
	justify-content: safe center;
	gap: var(--pg-space-8);
	margin: 0;
	padding: var(--pg-space-8) var(--pg-gutter) var(--pg-space-12);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.pg-lightbox__thumb {
	flex: none;
	width: var(--pg-gallery-thumb-s);
	padding: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--pg-line);
	border-radius: var(--pg-radius-s);
	background: var(--pg-surface-card);
	cursor: pointer;
}

.pg-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pg-lightbox__thumb[aria-current="true"] {
	border-color: var(--pg-ink);
	box-shadow: inset 0 0 0 1px var(--pg-ink);
}

.pg-lightbox__thumb:focus-visible {
	outline: 2px solid var(--pg-focus-color);
	outline-offset: -2px;
}

@media (hover: none) {
	.pg-lightbox__arrow { display: none; }
}

@media (max-width: 767px) {
	.pg-lightbox__thumbs { justify-content: flex-start; }
}

/* An arrow that is off (one photo) catches its click and does nothing: through it the click reached the slide and closed
   the lightbox (Jaroslav 10. 11.). */
.pg-lightbox .pg-lightbox__arrow[aria-disabled="true"] {
	pointer-events: auto;
	cursor: default;
}