/* Webbler Gallery – image cards, black & white → colour */

/* Take the full width also inside a row (flexbox) container – a grid has no
   natural width of its own and would otherwise shrink to almost nothing.
   Advanced → Width in Elementor still overrides this. */
.elementor-widget-webbler-gallery {
	width: 100%;
}

.wgal {
	--wgal-cols: 3;
	--wgal-span: 2;
	--wgal-big: 2;
	--wgal-gap: 24px;
	--wgal-ratio: 0.8;
	--wgal-radius: var(--wel-r-md, 24px);
	--wgal-gray: 100%;
	--wgal-speed: 600ms;
	--wgal-shade: rgba(16, 25, 33, 0.65);
	--wgal-card-bg: transparent;
	--wgal-card-pad: 0px;
	--wgal-pad: 20px;

	display: grid;
	grid-template-columns: repeat(var(--wgal-cols), minmax(0, 1fr));
	gap: var(--wgal-gap);
	align-items: stretch;
	width: 100%;
}

.wgal__item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--wgal-radius);
	background: var(--wgal-card-bg);
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

a.wgal__item:focus-visible {
	outline: 2px solid #163e35;
	outline-offset: 3px;
}

.wgal__item--big {
	grid-column: span var(--wgal-span);
}

/* Image */
.wgal__media {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	aspect-ratio: var(--wgal-ratio);
	background: #eef3f2;
}

.wgal--text-below .wgal__media {
	border-radius: var(--wgal-radius);
}

/* Text under the image: don't clip the letters at the card edge */
.wgal--text-below .wgal__item {
	overflow: visible;
}

/* Big card: twice as wide, exactly the same image height as its neighbours */
.wgal__item--big .wgal__media {
	aspect-ratio: calc(var(--wgal-ratio) * var(--wgal-big));
}

/* webbler-gallery.js measures the grid (--wgal-w) so the height matches exactly */
.wgal.has-w .wgal__item--big .wgal__media {
	aspect-ratio: auto;
	height: calc((var(--wgal-w) - (var(--wgal-cols) - 1) * var(--wgal-gap)) / var(--wgal-cols) / var(--wgal-ratio));
}

.wgal-ratio-original .wgal__media,
.wgal-ratio-original .wgal__item--big .wgal__media {
	height: auto;
	aspect-ratio: auto;
}

.wgal .wgal__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	transition:
		filter var(--wgal-speed) ease,
		transform calc(var(--wgal-speed) * 1.6) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wgal-ratio-original .wgal .wgal__img {
	height: auto;
}

/* Black & white until hover / focus / "in the middle of the screen" */
.wgal-bw-yes .wgal .wgal__img {
	filter: grayscale(var(--wgal-gray));
}

.wel-can-hover .wgal-bw-yes .wgal__item:hover .wgal__img,
.wgal-bw-yes .wgal a.wgal__item:focus-visible .wgal__img,
.wgal-bw-yes .wgal .wgal__item.is-color .wgal__img {
	filter: grayscale(0);
}

html:not(.wel-can-hover) .wgal-bw-yes .wgal--touch-color .wgal__img {
	filter: grayscale(0);
}

.wel-can-hover .wgal-zoom-yes .wgal__item:hover .wgal__img {
	transform: scale(1.05);
}

/* Text under the image */
.wgal__body {
	position: relative;
	z-index: 1;
}

.wgal--text-below .wgal__body {
	padding: 16px var(--wgal-card-pad) var(--wgal-card-pad);
}

.wgal .wgal__title {
	margin: 0 0 4px;
	padding: 0;
	color: #333;
	font-family: "FS Meridian", serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
}

.wgal .wgal__text {
	margin: 0;
	color: #333;
	font-family: "FS Meridian", serif;
	font-size: 16px;
	line-height: 22px;
}

/* Text on the image */
.wgal--text-overlay .wgal__body,
.wgal--text-hover .wgal__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 64px var(--wgal-pad) var(--wgal-pad);
	background: linear-gradient(to top, var(--wgal-shade), transparent);
	pointer-events: none;
}

.wgal--text-overlay .wgal__title,
.wgal--text-overlay .wgal__text,
.wgal--text-hover .wgal__title,
.wgal--text-hover .wgal__text {
	color: #fff;
}

.wgal--text-hover .wgal__body {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity calc(var(--wgal-speed) * 0.7) ease, transform calc(var(--wgal-speed) * 0.7) ease;
}

.wel-can-hover .wgal--text-hover .wgal__item:hover .wgal__body,
.wgal--text-hover a.wgal__item:focus-visible .wgal__body,
.wgal--text-hover .wgal__item.is-color .wgal__body,
html:not(.wel-can-hover) .wgal--text-hover.wgal--touch-color .wgal__body,
html:not(.wel-can-hover) .wgal--text-hover.wgal--touch-gray .wgal__body {
	opacity: 1;
	transform: none;
}

/* ---------- Lightbox ---------- */
.wgal-lb {
	position: fixed;
	inset: 0;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 72px;
	background: rgba(16, 25, 33, 0.92);
	opacity: 0;
	transition: opacity 250ms ease;
}

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

.wgal-lb__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.wgal-lb__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 160px);
	max-height: calc(100dvh - 160px);
	border-radius: 12px;
	object-fit: contain;
}

.wgal-lb__caption {
	margin-top: 14px;
	color: #fff;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
}

.wgal-lb button {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.wgal-lb button:hover,
.wgal-lb button:focus-visible {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.wgal-lb__close {
	top: 16px;
	right: 16px;
}

.wgal-lb__prev {
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
}

.wgal-lb__next {
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
}

html.wgal-locked,
html.wgal-locked body {
	overflow: hidden;
}

@media (max-width: 767px) {
	.wgal-lb {
		padding: 64px 12px;
	}

	.wgal-lb__prev,
	.wgal-lb__next {
		top: auto;
		bottom: 12px;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wgal .wgal__img,
	.wgal__body,
	.wgal-lb {
		transition: none !important;
	}
}