/*	–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	CORE/LIGHTBOX/LIGHTBOX.CSS
	––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/**
 * VISIOFRAMEWORK
 * This file is part of VISIOFRAMEWORK.
 * @package		visioframework
 * @author		Agência Visio <contato@agenciavisio.com.br>
 * @copyright	Copyright (c) 2023-present. M. Souza & Souza LTDA. (CNPJ: 21.284.748/0001-33). All rights reserved.
 * @license		Proprietary
 * @link		https://www.agenciavisio.com.br
 */

/*	The look of Fancybox, which this replaced, so a gallery changes little: its colors, sizes and compact mode.
	Loaded only by a page that drew a lightbox link, so it stays out of the bundle. */
.lightbox {
	/*	Both edges anchored, no viewport unit: the toolbar and the thumbnails stay inside the visible area
		while a phone's address bar comes and goes */
	inset				: 0;
	width				: auto;
	height				: auto;
	max-width			: none;
	max-height			: none;
	margin				: 0;
	padding				: 0;
	border				: 0;
	overflow			: hidden;
	overscroll-behavior	: contain;
	color				: #dbdbdb;
	background-color	: rgba(24, 24, 27, 0.98);
	transition			: opacity 0.2s ease-out;
}

.lightbox[open] {
	display			: flex;
	flex-direction	: column;
	opacity			: 1;
}

@starting-style {
	.lightbox[open] {
		opacity	: 0;
	}
}

/*	No UA rule hides a closed dialog where <dialog> is unknown (iOS before 15.4) */
.lightbox:not([open]) {
	display	: none;
}

.lightbox:focus {
	outline	: none;
}

.lightbox::backdrop {
	background-color	: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.lightbox {
		transition	: none;
	}
}

.lightbox--toolbar {
	display		: flex;
	position	: relative;
	z-index		: 2;
	flex		: none;
	align-items	: center;
	min-height	: 46px;
}

.lightbox--counter {
	padding					: 0 10px;
	font-size				: 17px;
	line-height				: 46px;
	font-variant-numeric	: tabular-nums;
	text-shadow				: 1px 1px 1px rgba(0, 0, 0, 0.5);
	user-select				: none;
}

.lightbox--close,
.lightbox--nav,
.lightbox--thumb-button {
	display			: flex;
	align-items		: center;
	justify-content	: center;
	padding			: 0;
	border			: 0;
	color			: inherit;
	cursor			: pointer;
}

.lightbox--close {
	width				: 46px;
	height				: 46px;
	margin-left			: auto;
	font-size			: 24px;
	background-color	: rgba(24, 24, 27, 0.65);
	transition			: background-color 0.15s ease;
}

.lightbox--close:hover {
	color				: #fff;
	background-color	: rgba(70, 70, 73, 0.65);
}

.lightbox--stage {
	position	: relative;
	flex		: 1 1 auto;
	min-height	: 0;
}

.lightbox--main {
	width	: 100%;
	height	: 100%;
}

/*	.lightbox ahead of the slides' rules: Swiper's own .swiper-slide sets their display and width */
.lightbox .lightbox--slide {
	display			: flex;
	align-items		: center;
	justify-content	: center;
	padding			: 4px;
}

/*	Swiper's zoom stylesheet, which the build leaves out: only the lightbox zooms */
.lightbox .swiper-zoom-container {
	display			: flex;
	align-items		: center;
	justify-content	: center;
	width			: 100%;
	height			: 100%;
}

.lightbox .swiper-slide-zoomed {
	cursor			: move;
	touch-action	: none;
}

.lightbox--image {
	max-width	: 100%;
	max-height	: 100%;
}

.lightbox--video,
.lightbox--frame {
	width				: 960px;
	height				: 540px;
	max-width			: 100%;
	max-height			: 100%;
	border				: 0;
	background-color	: #000;
}

.lightbox--nav {
	position			: absolute;
	top					: 50%;
	z-index				: 2;
	width				: 50px;
	height				: 50px;
	border-radius		: 50%;
	font-size			: 26px;
	background-color	: transparent;
	filter				: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));
	translate			: 0 -50%;
	transition			: background-color 0.15s ease;
}

.lightbox--nav:hover {
	color				: #fff;
	background-color	: rgba(24, 24, 27, 0.3);
}

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

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

.lightbox--footer {
	position	: relative;
	z-index		: 2;
	flex		: none;
}

/*	A block as wide as its text, centered, its lines aligned to the start */
.lightbox--caption {
	width			: fit-content;
	max-width		: 100%;
	margin			: 0 auto;
	padding			: 14px 24px 4px;
	line-height		: 1.375;
	overflow-wrap	: anywhere;
}

/*	Swiper's own rule zeroes a carousel's padding */
.lightbox .lightbox--thumbs {
	padding	: 8px 8px 12px;
}

.lightbox .lightbox--thumb {
	width	: 96px;
	height	: 72px;
}

.lightbox--thumb-button {
	width				: 100%;
	height				: 100%;
	overflow			: hidden;
	font-size			: 24px;
	background-color	: rgba(255, 255, 255, 0.1);
	opacity				: 0.5;
	transition			: opacity 0.2s ease;
}

.lightbox--thumb-button:hover,
.lightbox--thumb-button:focus-visible,
.swiper-slide-thumb-active .lightbox--thumb-button {
	opacity	: 1;
}

.swiper-slide-thumb-active .lightbox--thumb-button {
	cursor	: default;
}

.lightbox--thumb-image {
	width		: 100%;
	height		: 100%;
	object-fit	: cover;
}

.lightbox--single .lightbox--counter,
.lightbox--single .lightbox--nav,
.lightbox--single .lightbox--thumbs {
	display	: none;
}

/*	Fancybox's compact mode: the picture takes the whole screen, and the toolbar and the footer sit over it,
	the footer on a scrim of its own */
@media (max-width: 578px), (max-height: 578px) {
	.lightbox--toolbar {
		position	: absolute;
		top			: 0;
		right		: 0;
		left		: 0;
	}

	.lightbox--footer {
		position			: absolute;
		right				: 0;
		bottom				: 0;
		left				: 0;
		background-color	: rgba(24, 24, 27, 0.5);
	}

	.lightbox--caption {
		width	: auto;
		padding	: 12px;
	}

	.lightbox .lightbox--thumb {
		width	: 64px;
		height	: 48px;
	}
}

/*	The page holds still behind, as behind a modal; inside one, the modal's own gap stands */
:root:has(dialog.lightbox[open]) {
	overflow	: hidden;
}

:root:has(dialog.lightbox[open]) body {
	padding-right	: var(--lightbox-scrollbar-gap, var(--modal-scrollbar-gap, 0px));
}