/**
 * AZ Gallery
 * Layout: 1 large image (2 cols x 2 rows) + 4 small images.
 *
 * Every small image uses a fixed aspect-ratio (control "Image Ratio", default 4:3), so the
 * ratio stays the same on every screen width. The large image fills the two rows next to it.
 * Gap, ratio, focus and border radius are overridden by the Elementor controls: those rules
 * use low-specificity selectors here on purpose, so the controls always win.
 */
.azt-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 15px;
}

.azt-gallery__item {
	border-radius: 10px;
	aspect-ratio: 4 / 3;
}

.azt-gallery__img {
	object-position: 50% 30%;
}

.azt-gallery .azt-gallery__item {
	position: relative;
	display: block;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	isolation: isolate;
	background: #e9e9ee;
	box-shadow: 0 1px 3px rgba(20, 10, 20, 0.08);
	transition: box-shadow 0.35s ease;
}

.azt-gallery .azt-gallery__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto;
}

.azt-gallery .azt-gallery__item > a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	overflow: hidden;
	outline-offset: -3px;
}

.azt-gallery .azt-gallery__item > a .azt-gallery__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* Hover overlay + zoom icon */
.azt-gallery .azt-gallery__item > a::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(24, 10, 20, 0.55), rgba(24, 10, 20, 0) 65%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.azt-gallery .azt-gallery__item > a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239f224e' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.azt-gallery .azt-gallery__item > a:focus-visible {
	outline: 3px solid #9f224e;
}

.azt-gallery .azt-gallery__item > a:focus-visible::before,
.azt-gallery .azt-gallery__item > a:focus-visible::after {
	opacity: 1;
	transform: none;
}

.azt-gallery--zoom .azt-gallery__item > a .azt-gallery__img {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: transform;
}

@media (hover: hover) {
	.azt-gallery .azt-gallery__item:hover {
		box-shadow: 0 14px 30px rgba(24, 10, 20, 0.22);
	}

	.azt-gallery .azt-gallery__item > a:hover::before {
		opacity: 1;
	}

	.azt-gallery .azt-gallery__item > a:hover::after {
		opacity: 1;
		transform: none;
	}

	.azt-gallery--zoom .azt-gallery__item > a:hover .azt-gallery__img {
		transform: scale(1.07);
	}
}

/* Mobile: 2 columns, the large image spans the full width. */
@media (max-width: 767px) {
	.azt-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.azt-gallery .azt-gallery__item:first-child {
		grid-row: span 1;
		aspect-ratio: 16 / 9;
	}
}

/* ------------------------------------------------------------------ */
/* Custom lightbox                                                     */
/* ------------------------------------------------------------------ */
html.azt-lb-open {
	overflow: hidden;
}

.azt-lb {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483000 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.azt-lb[hidden] {
	display: none;
}

.azt-lb.is-open {
	opacity: 1;
}

.azt-lb__backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(12, 9, 16, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.azt-lb__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 64px 92px;
	box-sizing: border-box;
	transform: scale(0.96);
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.azt-lb.is-open .azt-lb__stage {
	transform: none;
}

.azt-lb__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	will-change: transform, opacity;
}

.azt-lb__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 200px);
	object-fit: contain;
	border-radius: 8px;
	background: #151218;
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
}

.azt-lb__caption {
	margin-top: 20px;
	max-width: min(720px, 100%);
	color: #fff;
	font-size: 15px;
	line-height: 1.55;
	letter-spacing: 0.01em;
	text-align: center;
}

.azt-lb__caption[hidden] {
	display: none;
}

/* Spinner while the next image is loading */
.azt-lb.is-loading .azt-lb__stage::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: azt-lb-spin 0.8s linear infinite;
}

@keyframes azt-lb-spin {
	to {
		transform: rotate(360deg);
	}
}

.azt-lb__counter {
	position: absolute;
	top: 20px;
	left: 24px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.azt-lb__counter[hidden] {
	display: none;
}

/* Controls: hardened so theme button/link styles cannot hide or restyle them. */
.azt-lb .azt-lb__btn {
	position: absolute !important;
	z-index: 5;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px !important;
	height: 48px !important;
	min-width: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.14) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.azt-lb .azt-lb__btn[hidden] {
	display: none !important;
}

.azt-lb .azt-lb__btn svg {
	display: block;
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.azt-lb .azt-lb__btn:hover,
.azt-lb .azt-lb__btn:focus-visible {
	background: #9f224e !important;
	color: #fff !important;
	transform: scale(1.08);
}

.azt-lb .azt-lb__close {
	top: 14px !important;
	right: 18px !important;
}

.azt-lb .azt-lb__prev,
.azt-lb .azt-lb__next {
	top: 50% !important;
	margin-top: -24px !important;
}

.azt-lb .azt-lb__prev {
	left: 20px !important;
}

.azt-lb .azt-lb__next {
	right: 20px !important;
}

/* Caption link looks like a small pill button. */
.azt-lb .azt-lb__caption a {
	display: inline-block;
	padding: 7px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff !important;
	text-decoration: none !important;
	transition: background-color 0.25s ease;
}

.azt-lb .azt-lb__caption a::after {
	content: "\2197";
	margin-left: 8px;
}

.azt-lb .azt-lb__caption a:hover,
.azt-lb .azt-lb__caption a:focus-visible {
	background: #9f224e;
	color: #fff !important;
}

@media (max-width: 767px) {
	.azt-lb__stage {
		padding: 64px 12px 88px;
	}

	.azt-lb__img {
		max-height: calc(100vh - 220px);
	}

	.azt-lb .azt-lb__prev,
	.azt-lb .azt-lb__next {
		top: auto !important;
		bottom: 18px !important;
		margin-top: 0 !important;
	}

	.azt-lb .azt-lb__prev {
		left: calc(50% - 58px) !important;
	}

	.azt-lb .azt-lb__next {
		right: calc(50% - 58px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.azt-lb,
	.azt-lb__stage,
	.azt-gallery .azt-gallery__item,
	.azt-gallery .azt-gallery__item > a::before,
	.azt-gallery .azt-gallery__item > a::after,
	.azt-gallery--zoom .azt-gallery__item > a .azt-gallery__img {
		transition: none;
	}
}