/* Bricks Enhanced Galleries */

.beg-gallery {
	container: beg / inline-size;
	width: 100%;
	--beg-gap: 16px;
	--beg-radius: 0px;
	--beg-zoom: 1.03;
	--beg-ratio: 1.5;
	--beg-ar: 3 / 2;
	--beg-cols: 3;
	--beg-basis: 1;
	--beg-rh: 240px;
}

.beg-gallery *,
.beg-gallery *::before,
.beg-gallery *::after {
	box-sizing: border-box;
}

.beg-grid {
	display: grid;
	gap: var(--beg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.beg-item {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--beg-radius);
	background: rgba(127, 127, 127, 0.12);
}

.beg-link {
	display: block;
	color: inherit;
}

.beg-img {
	display: block;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	transition: transform 0.35s ease, filter 0.35s ease;
}

/* Cells that have a fixed shape: the image fills them. */
.beg-layout-pattern .beg-item .beg-link,
.beg-layout-pattern .beg-item .beg-img,
.beg-layout-uniform .beg-item .beg-link,
.beg-layout-uniform .beg-item .beg-img,
.beg-layout-featured .beg-stage .beg-link,
.beg-layout-featured .beg-stage .beg-img,
.beg-layout-featured .beg-thumb .beg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Photos that would lose too much to cropping are shown whole instead. */
.beg-item.beg-fit .beg-img {
	object-fit: contain;
	object-position: 50% 50%;
}

.beg-item.beg-backdrop::before {
	content: "";
	position: absolute;
	inset: -12%;
	background: var(--beg-bg) center / cover no-repeat;
	filter: blur(22px) saturate(1.1) brightness(0.92);
}

.beg-item.beg-backdrop .beg-link {
	z-index: 1;
}

/* Hover zoom */
@media (prefers-reduced-motion: no-preference) {
	.beg-zoom .beg-item:hover .beg-img,
	.beg-zoom .beg-stage:hover .beg-img {
		transform: scale(var(--beg-zoom));
		filter: saturate(1.04);
	}
}

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

/* Pattern grid */
.beg-layout-pattern .beg-grid {
	grid-template-columns: repeat(var(--beg-cols), minmax(0, 1fr));
	grid-auto-rows: calc(
		(
			(100cqw - (var(--beg-cols) - 1) * var(--beg-gap)) / var(--beg-cols) * var(--beg-basis) +
			(var(--beg-basis) - 1) * var(--beg-gap)
		) / var(--beg-ratio)
	);
}

.beg-layout-pattern .beg-placed {
	grid-column: var(--beg-c) / span var(--beg-w);
	grid-row: var(--beg-r) / span var(--beg-h);
}

/* Uniform grid */
.beg-layout-uniform .beg-grid {
	grid-template-columns: repeat(var(--beg-n), minmax(0, 1fr));
}

.beg-layout-uniform .beg-item {
	aspect-ratio: var(--beg-ar);
}

/* Justified and mosaic: balanced rows. Each row is as wide as the gallery, and each photo's width is
   proportional to its aspect ratio, so every photo in a row has the same height and nothing is cropped. */
.beg-layout-justified .beg-grid,
.beg-layout-mosaic .beg-grid {
	display: flex;
	flex-direction: column;
}

.beg-row {
	display: flex;
	gap: var(--beg-gap);
}

.beg-row > .beg-item,
.beg-row > .beg-unit {
	flex: var(--beg-iar) 1 0px;
	min-width: 0;
}

.beg-row > .beg-item .beg-img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--beg-iar);
}

.beg-row > .beg-item .beg-link {
	width: 100%;
}

.beg-stack {
	display: flex;
	flex-direction: column;
	gap: var(--beg-gap);
	aspect-ratio: var(--beg-iar);
}

.beg-stack > .beg-item {
	flex: calc(1 / var(--beg-iar)) 1 0px;
	min-height: 0;
}

.beg-stack .beg-link,
.beg-stack .beg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.beg-layout-masonry .beg-img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--beg-iar);
}

.beg-layout-masonry .beg-link {
	width: 100%;
}

/* Masonry: grid rows are 1px tall once the script has measured each item. */
.beg-layout-masonry .beg-grid {
	grid-template-columns: repeat(var(--beg-n), minmax(0, 1fr));
	align-items: start;
}

.beg-layout-masonry .beg-item {
	aspect-ratio: var(--beg-iar);
}

.beg-layout-masonry.beg-masonry-ready .beg-grid {
	grid-auto-rows: 1px;
	row-gap: 0;
}

/* Featured plus thumbnails */
.beg-layout-featured .beg-grid {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.beg-layout-featured .beg-stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--beg-ar);
	border-radius: var(--beg-radius);
	background: rgba(127, 127, 127, 0.12);
}

.beg-layout-featured .beg-strip {
	display: flex;
	gap: var(--beg-gap);
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: thin;
}

.beg-layout-featured .beg-thumb {
	position: relative;
	flex: 0 0 auto;
	width: clamp(72px, 12cqw, 140px);
	aspect-ratio: 3 / 2;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.beg-layout-featured .beg-thumb:hover,
.beg-layout-featured .beg-thumb:focus-visible,
.beg-layout-featured .beg-thumb[aria-current="true"] {
	opacity: 1;
}

.beg-layout-featured .beg-thumb[aria-current="true"] {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.beg-thumbs-right.beg-layout-featured .beg-grid {
	grid-template-columns: minmax(0, 1fr) clamp(88px, 14cqw, 160px);
}

.beg-thumbs-right.beg-layout-featured .beg-strip {
	flex-direction: column;
	max-height: calc(100cqw / var(--beg-ratio));
	overflow-x: hidden;
	overflow-y: auto;
}

.beg-thumbs-right.beg-layout-featured .beg-thumb {
	width: 100%;
}

/* Lightbox */
.beg-lb-open {
	overflow: hidden;
}

.beg-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 10, 10, 0.94);
	opacity: 0;
	transition: opacity 0.2s ease;
}

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

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

.beg-lb-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 56px 64px;
	touch-action: pan-y;
}

.beg-lb-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s ease;
	user-select: none;
}

.beg-lb-img.is-loaded {
	opacity: 1;
}

.beg-lb-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.beg-lb-btn:hover,
.beg-lb-btn:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.14);
}

.beg-lb-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.beg-lb-btn svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.beg-lb-close {
	top: 10px;
	right: 10px;
}

.beg-lb-share {
	top: 10px;
	right: 62px;
}

.beg-lb-prev {
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.beg-lb-next {
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.beg-lb-count {
	position: absolute;
	top: 22px;
	left: 20px;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.04em;
	opacity: 0.8;
	font-variant-numeric: tabular-nums;
}

.beg-lb-note {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 12px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.beg-lb-note.is-visible {
	opacity: 1;
}

.beg-lb-single .beg-lb-prev,
.beg-lb-single .beg-lb-next,
.beg-lb-single .beg-lb-count {
	display: none;
}

@media (max-width: 640px) {
	.beg-lb-stage {
		padding: 56px 0;
	}

	.beg-lb-prev {
		left: 4px;
	}

	.beg-lb-next {
		right: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.beg-lb,
	.beg-lb-img {
		transition: none;
	}
}