/* The Fade Plug — gallery tiles
   Loaded by the "Fade Plug — Gallery" must-use plugin.
   Layout, content and colours live in Elementor; this file only carries the
   fixed photo ratio, the hover lift and the caption scrim, which Elementor's
   own controls can't express. Scoped to .fp-gal-loop (the CSS class on the
   Loop Grid widget) so nothing else on the site is touched. */

/* ---- The tile ---------------------------------------------------------- */

.fp-gal-loop .e-loop-item > .e-con {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: #100d0b;
	border: 1px solid rgba(217, 178, 76, .14);
	transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.fp-gal-loop .e-loop-item > .e-con:hover {
	transform: translateY(-4px);
	border-color: rgba(217, 178, 76, .42);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

/* ---- The photo --------------------------------------------------------- */

.fp-gal-loop .fp-gal-img,
.fp-gal-loop .fp-gal-img .elementor-widget-container,
.fp-gal-loop .fp-gal-img figure,
.fp-gal-loop .fp-gal-img a {
	display: block;
	width: 100%;
	margin: 0;
	line-height: 0;
}

.fp-gal-loop .fp-gal-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
	transition: transform .6s ease;
}

.fp-gal-loop .e-loop-item > .e-con:hover .fp-gal-img img {
	transform: scale(1.05);
}

/* ---- The caption, over the bottom of the photo ------------------------- */

.fp-gal-loop .fp-gal-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	max-width: 100%;
	padding: 64px 20px 18px;
	pointer-events: none;
	background: linear-gradient(to top, rgba(8, 6, 5, .93), rgba(8, 6, 5, .55) 45%, rgba(8, 6, 5, 0));
}

.fp-gal-loop .fp-gal-cap.elementor-widget-heading .elementor-heading-title {
	font-family: "Figtree", sans-serif;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: 0;
	color: #f7efe0;
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

/* ---- Filter row -------------------------------------------------------- */

.fp-gal-filter .e-filter {
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 767px) {
	.fp-gal-loop .e-loop-item > .e-con {
		border-radius: 16px;
	}

	.fp-gal-loop .fp-gal-cap {
		padding: 46px 13px 12px;
	}

	.fp-gal-loop .fp-gal-cap.elementor-widget-heading .elementor-heading-title {
		font-size: 13px;
		line-height: 1.3;
	}
}