/*!
 * Alcateia Widgets: Portfolio Gallery (alw-gl), lightbox
 * Author: Joao Pedro | Alcateia Marketing & Design Agency
 * Author URI: https://alcateiaagency.com/
 *
 * Native Popover API, zero JavaScript to open, enlarge and close. Loaded only by
 * instances with the lightbox on. The arrows come hidden; alw-gl.js reveals them.
 */
.alw-gl .alw-gl__open:focus-visible {
	outline: 2px solid var(--alw-gl-focus, var(--alw-accent, #c9a96a));
	outline-offset: -3px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.alw-gl .alw-gl__open .alw-gl__img {
		transition: transform .6s cubic-bezier(.2, .6, .2, 1);
	}

	.alw-gl .alw-gl__open:hover .alw-gl__img,
	.alw-gl .alw-gl__open:focus-visible .alw-gl__img {
		transform: scale(1.05);
	}
}

html:has(.alw-gl__lb:popover-open) {
	overflow: hidden;
}

.alw-gl .alw-gl__lb {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 4rem 1rem;
	border: 0;
	background: var(--alw-gl-lb-bg, rgba(8, 9, 10, .94));
	color: var(--alw-gl-lb-c, #fff);
	overflow: hidden;
}

.alw-gl .alw-gl__lb:popover-open {
	display: grid;
	place-items: center;
}

.alw-gl .alw-gl__full {
	position: relative;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100dvh - 8rem);
	object-fit: contain;
	pointer-events: none;
}

.alw-gl .alw-gl__close,
.alw-gl .alw-gl__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 0;
	background: rgba(0, 0, 0, .4);
	color: var(--alw-gl-lb-c, #fff);
	cursor: pointer;
}

.alw-gl .alw-gl__close {
	top: calc(.75rem + env(safe-area-inset-top, 0px));
	right: .75rem;
}

.alw-gl .alw-gl__close svg,
.alw-gl .alw-gl__nav svg {
	width: 1.2rem;
	height: 1.2rem;
}

.alw-gl .alw-gl__close:hover,
.alw-gl .alw-gl__close:focus-visible,
.alw-gl .alw-gl__nav:hover,
.alw-gl .alw-gl__nav:focus-visible {
	border-color: currentColor;
	background: rgba(0, 0, 0, .4);
	color: var(--alw-gl-lb-c, #fff);
	outline: none;
}

/* Invisible background button: any tap outside the arrows closes */
.alw-gl .alw-gl__dismiss {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-out;
}

.alw-gl .alw-gl__dismiss:hover,
.alw-gl .alw-gl__dismiss:focus {
	background: none;
}

.alw-gl .alw-gl__nav {
	top: 50%;
	translate: 0 -50%;
}

/* The class sets display:grid, which would beat the browser's [hidden] */
.alw-gl .alw-gl__nav[hidden] {
	display: none;
}

.alw-gl .alw-gl__prev {
	left: .75rem;
}

.alw-gl .alw-gl__next {
	right: .75rem;
}

@media (min-width: 768px) {
	.alw-gl .alw-gl__lb {
		padding-inline: 4.5rem;
	}
}