/* Brainwave Gallery — frontend styles */

.bwg-gallery {
	width: 100%;
}

.bwg-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.bwg-layout-masonry .bwg-grid {
	grid-auto-rows: 10px;
}

.bwg-layout-masonry .bwg-item {
	grid-row-end: span 30;
}

.bwg-item {
	position: relative;
	overflow: hidden;
	display: block;
}

.bwg-item a {
	display: block;
	position: relative;
	overflow: hidden;
}

.bwg-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition-property: transform, filter;
	transition-duration: 800ms;
}

/* Aspect ratios */
.bwg-aspect-1-1 .bwg-item a { aspect-ratio: 1 / 1; }
.bwg-aspect-3-2 .bwg-item a { aspect-ratio: 3 / 2; }
.bwg-aspect-4-3 .bwg-item a { aspect-ratio: 4 / 3; }
.bwg-aspect-16-9 .bwg-item a { aspect-ratio: 16 / 9; }
.bwg-aspect-9-16 .bwg-item a { aspect-ratio: 9 / 16; }
.bwg-aspect-original .bwg-item a { aspect-ratio: auto; }

.bwg-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition-property: opacity;
	transition-duration: 800ms;
	text-align: center;
	padding: 10px;
}

.bwg-item:hover .bwg-overlay {
	opacity: 1;
}

.bwg-zoom-icon {
	font-size: 24px;
	color: #ffffff;
}

.bwg-caption {
	color: #ffffff;
	font-size: 14px;
	line-height: 1.4;
}

/* Elementor lightbox background — dark overlay to match reference (overridable via widget's Style > Lightbox control) */
.elementor-lightbox {
	background-color: rgba(0, 0, 0, 0.9);
}

.elementor-lightbox .dialog-widget-content,
.elementor-lightbox .dialog-overlay,
.elementor-lightbox .dialog-message {
	background-color: transparent !important;
}

.elementor-lightbox::before {
	background-color: transparent !important;
}

/* Elementor lightbox navigation arrows — forced visible, covers current + legacy Elementor markup */
.elementor-lightbox .elementor-swiper-button,
.elementor-lightbox .swiper-button-prev,
.elementor-lightbox .swiper-button-next,
.elementor-lightbox .dialog-lightbox-prev-slide-icon,
.elementor-lightbox .dialog-lightbox-next-slide-icon {
	display: flex !important;
	visibility: visible !important;
	opacity: 0.9 !important;
	pointer-events: auto !important;
	color: #ffffff;
	font-size: 25px;
	z-index: 999999 !important;
	transition: opacity 0.2s ease;
}

.elementor-lightbox .elementor-swiper-button:hover,
.elementor-lightbox .swiper-button-prev:hover,
.elementor-lightbox .swiper-button-next:hover {
	opacity: 1 !important;
}

/* Swiper dims arrows at the first/last slide by default — keep them fully visible */
.elementor-lightbox .swiper-button-disabled {
	opacity: 0.9 !important;
	pointer-events: auto !important;
}

.elementor-lightbox .elementor-swiper-button-prev,
.elementor-lightbox .swiper-button-prev {
	left: 20px !important;
}

.elementor-lightbox .elementor-swiper-button-next,
.elementor-lightbox .swiper-button-next {
	right: 20px !important;
}

/* Brainwave Gallery's own injected arrow buttons — used as a fallback when
   the site's global Elementor lightbox "Navigation" setting is off, so
   arrows always show for this widget's galleries regardless of that setting. */
.elementor-lightbox .bwg-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.35);
	color: #ffffff;
	border: none;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 999999;
	opacity: 0.9;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.elementor-lightbox .bwg-lightbox-arrow:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.6);
}

.elementor-lightbox .bwg-lightbox-prev {
	left: 20px;
}

.elementor-lightbox .bwg-lightbox-next {
	right: 20px;
}

@media (max-width: 767px) {
	.elementor-lightbox .bwg-lightbox-arrow {
		width: 38px;
		height: 38px;
		font-size: 16px;
	}
}

/* Responsive default columns (overridden by Elementor responsive controls) */
@media (max-width: 1024px) {
	.bwg-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.bwg-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}